feat: radio inject disabled

Author: clansty

src/components/NumberInput.tsx

@@ -12,6 +12,7 @@ export default defineComponent({
     value: { type: Number, default: 0 },
     onChange: Function as PropType<() => void>,
     onFocus: Function as PropType<() => void>,
+    innerClass: { type: String, default: 'min-h-12 cst' },
   },
   setup(props, { emit }) {
     const value = useVModel(props, 'value', emit);
@@ -39,6 +40,6 @@ export default defineComponent({
       refresh();
     }, { immediate: true });
 
-    return () => <TextInput ref={inputRef} v-model:value={wrap.value} type="number" step={props.step} onBlur={commitChange} onEnterPressed={commitChange} onFocus={props.onFocus} />;
+    return () => <TextInput ref={inputRef} v-model:value={wrap.value} type="number" step={props.step} onBlur={commitChange} onEnterPressed={commitChange} onFocus={props.onFocus} innerClass={props.innerClass} />;
   },
 });

src/components/Radio/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, PropType, useId } from 'vue';
+import { computed, defineComponent, inject, PropType, Ref, useId } from 'vue';
 
 export default defineComponent({
   props: {
@@ -9,15 +9,17 @@ export default defineComponent({
   },
   setup(props, { emit, slots }) {
     const id = useId();
+    const disabledInject = inject<Ref<boolean>>('disabled');
+    const disabled = computed(() => props.disabled || disabledInject?.value);
 
-    return () => <div class="flex gap-2 items-center">
+    return () => <div class="flex gap-2 items-center" style={{ opacity: disabled.value ? 0.5 : undefined }}>
       <input
         type="radio" id={id}
         checked={props.value === props.k}
-        disabled={props.disabled}
+        disabled={disabled.value}
         onClick={(e: Event) => {
           e.preventDefault();
-          if (props.disabled) return;
+          if (disabled.value) return;
           emit('update:value', props.k);
           props.onClick?.();
         }}