@edgedev/create-edge-app 1.1.5 → 1.1.7

package/.eslintrc

@@ -5,6 +5,7 @@
     "vue/no-deprecated-slot-attribute": "off",
     "curly": "off",
     "no-console": "off",
-    "antfu/top-level-function": "off"
+    "antfu/top-level-function": "off",
+    "style/eol-last": "off"
   }
 }

package/assets/css/tailwind.css

@@ -41,8 +41,13 @@
     --sidebar-primary-foreground: 0 0% 98%;
     --sidebar-accent: 240 4.8% 95.9%;
     --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: transparent;
+    --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217.2 91.2% 59.8%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
   }
  
   .dark {
@@ -82,8 +87,13 @@
     --sidebar-primary-foreground: 0 0% 100%;
     --sidebar-accent: 240 3.7% 15.9%;
     --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: transparent;
+    --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 217.2 91.2% 59.8%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
   }
 }
  

package/components/ui/accordion/Accordion.vue

@@ -4,7 +4,7 @@ import {
   type AccordionRootEmits,
   type AccordionRootProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<AccordionRootProps>()
 const emits = defineEmits<AccordionRootEmits>()

package/components/ui/accordion/AccordionContent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AccordionContent, type AccordionContentProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { AccordionContent, type AccordionContentProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
 

package/components/ui/accordion/AccordionItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
 

package/components/ui/accordion/AccordionTrigger.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '~/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
 import {
   AccordionHeader,
   AccordionTrigger,
   type AccordionTriggerProps,
-} from 'radix-vue'
-import { ChevronDown } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
 

package/components/ui/alert/Alert.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
 import { type AlertVariants, alertVariants } from '.'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

package/components/ui/alert/AlertDescription.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

package/components/ui/alert/AlertTitle.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

package/components/ui/alert/index.ts

@@ -1,8 +1,8 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as Alert } from './Alert.vue'
-export { default as AlertTitle } from './AlertTitle.vue'
 export { default as AlertDescription } from './AlertDescription.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
 
 export const alertVariants = cva(
   'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',

package/components/ui/alert-dialog/AlertDialog.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<AlertDialogProps>()
 const emits = defineEmits<AlertDialogEmits>()

package/components/ui/alert-dialog/AlertDialogAction.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button'
+import { cn } from '~/lib/utils'
+import { buttonVariants } from '~/components/ui/button'
+import { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
 

package/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button'
+import { cn } from '~/lib/utils'
+import { buttonVariants } from '~/components/ui/button'
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
 
@@ -14,7 +14,14 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
     <slot />
   </AlertDialogCancel>
 </template>

package/components/ui/alert-dialog/AlertDialogContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '~/lib/utils'
 import {
   AlertDialogContent,
   type AlertDialogContentEmits,
@@ -7,8 +7,8 @@ import {
   AlertDialogOverlay,
   AlertDialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
-import { cn } from '@/lib/utils'
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<AlertDialogContentEmits>()
@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <AlertDialogPortal>
     <AlertDialogOverlay
-      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <AlertDialogContent
       v-bind="forwarded"

package/components/ui/alert-dialog/AlertDialogDescription.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '~/lib/utils'
 import {
   AlertDialogDescription,
   type AlertDialogDescriptionProps,
-} from 'radix-vue'
-import { cn } from '@/lib/utils'
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
 

package/components/ui/alert-dialog/AlertDialogFooter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

package/components/ui/alert-dialog/AlertDialogHeader.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

package/components/ui/alert-dialog/AlertDialogTitle.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
 

package/components/ui/alert-dialog/AlertDialogTrigger.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'
 
 const props = defineProps<AlertDialogTriggerProps>()
 </script>

package/components/ui/alert-dialog/index.ts

@@ -1,9 +1,9 @@
 export { default as AlertDialog } from './AlertDialog.vue'
-export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
+export { default as AlertDialogAction } from './AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
 export { default as AlertDialogContent } from './AlertDialogContent.vue'
-export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
-export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
 export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
 export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
-export { default as AlertDialogAction } from './AlertDialogAction.vue'
-export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'

package/components/ui/aspect-ratio/AspectRatio.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AspectRatio, type AspectRatioProps } from 'radix-vue'
+import { AspectRatio, type AspectRatioProps } from 'reka-ui'
 
 const props = defineProps<AspectRatioProps>()
 </script>

package/components/ui/auto-form/AutoForm.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts" generic="T extends ZodObjectOrWrapped">
-import { computed, toRefs } from 'vue'
-import type { ZodAny, z } from 'zod'
-import { toTypedSchema } from '@vee-validate/zod'
 import type { FormContext, GenericObject } from 'vee-validate'
-import { type ZodObjectOrWrapped, getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema } from './utils'
+import type { z, ZodAny } from 'zod'
 import type { Config, ConfigItem, Dependency, Shape } from './interface'
+import { Form } from '~/components/ui/form'
+import { toTypedSchema } from '@vee-validate/zod'
+import { computed, toRefs } from 'vue'
 import AutoFormField from './AutoFormField.vue'
 import { provideDependencies } from './dependencies'
-import { Form } from '@/components/ui/form'
+import { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'
 
 const props = defineProps<{
   schema: T
@@ -17,7 +17,7 @@ const props = defineProps<{
 }>()
 
 const emits = defineEmits<{
-  submit: [event: GenericObject]
+  submit: [event: z.infer<T>]
 }>()
 
 const { dependencies } = toRefs(props)
@@ -65,7 +65,7 @@ const formComponentProps = computed(() => {
   if (props.form) {
     return {
       onSubmit: props.form.handleSubmit(val => emits('submit', val)),
-    }
+    };
   }
   else {
     const formSchema = toTypedSchema(props.schema)
@@ -73,7 +73,7 @@ const formComponentProps = computed(() => {
       keepValues: true,
       validationSchema: formSchema,
       onSubmit: (val: GenericObject) => emits('submit', val),
-    }
+    };
   }
 })
 </script>

package/components/ui/auto-form/AutoFormField.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="U extends ZodAny">
 import type { ZodAny } from 'zod'
-import { computed } from 'vue'
 import type { Config, ConfigItem, Shape } from './interface'
+import { computed } from 'vue'
 import { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'
 import useDependencies from './dependencies'
 

package/components/ui/auto-form/AutoFormFieldArray.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts" generic="T extends z.ZodAny">
-import * as z from 'zod'
-import { computed, provide } from 'vue'
+import type { Config, ConfigItem } from './interface'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '~/components/ui/accordion'
+import { Button } from '~/components/ui/button'
+import { FormItem, FormMessage } from '~/components/ui/form'
+import { Separator } from '~/components/ui/separator'
 import { PlusIcon, TrashIcon } from 'lucide-vue-next'
 import { FieldArray, FieldContextKey, useField } from 'vee-validate'
-import type { Config, ConfigItem } from './interface'
-import { beautifyObjectName, getBaseType } from './utils'
+import { computed, provide } from 'vue'
+import * as z from 'zod'
 import AutoFormField from './AutoFormField.vue'
 import AutoFormLabel from './AutoFormLabel.vue'
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
-import { Button } from '@/components/ui/button'
-import { Separator } from '@/components/ui/separator'
-import { FormItem, FormMessage } from '@/components/ui/form'
+import { beautifyObjectName, getBaseType } from './utils'
 
 const props = defineProps<{
   fieldName: string
@@ -86,7 +86,7 @@ provide(FieldContextKey, fieldContext)
                       <TrashIcon :size="16" />
                     </Button>
                   </div>
-                  <Separator v-if="!field.isLast" class="dark:bg-slate-600" />
+                  <Separator v-if="!field.isLast" />
                 </div>
               </template>
 

package/components/ui/auto-form/AutoFormFieldBoolean.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { beautifyObjectName } from './utils'
 import type { FieldProps } from './interface'
+import { Checkbox } from '~/components/ui/checkbox'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '~/components/ui/form'
+import { Switch } from '~/components/ui/switch'
+import { computed } from 'vue'
 import AutoFormLabel from './AutoFormLabel.vue'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/components/ui/form'
-import { Switch } from '@/components/ui/switch'
-import { Checkbox } from '@/components/ui/checkbox'
+import { beautifyObjectName, maybeBooleanishToBoolean } from './utils'
 
 const props = defineProps<FieldProps>()
 
@@ -20,10 +20,10 @@ const booleanComponent = computed(() => props.config?.component === 'switch' ? S
           <slot v-bind="slotProps">
             <component
               :is="booleanComponent"
-              v-bind="{ ...slotProps.componentField }"
-              :disabled="disabled"
-              :checked="slotProps.componentField.modelValue"
-              @update:checked="slotProps.componentField['onUpdate:modelValue']"
+              :disabled="maybeBooleanishToBoolean(config?.inputProps?.disabled) ?? disabled"
+              :name="slotProps.componentField.name"
+              :model-value="slotProps.componentField.modelValue"
+              @update:model-value="slotProps.componentField['onUpdate:modelValue']"
             />
           </slot>
         </FormControl>

package/components/ui/auto-form/AutoFormFieldDate.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
+import type { FieldProps } from './interface'
+import { cn } from '~/lib/utils'
+import { Button } from '~/components/ui/button'
+import { Calendar } from '~/components/ui/calendar'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '~/components/ui/form'
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/ui/popover'
+
 import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
 import { CalendarIcon } from 'lucide-vue-next'
-import { beautifyObjectName } from './utils'
 import AutoFormLabel from './AutoFormLabel.vue'
-import type { FieldProps } from './interface'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/components/ui/form'
-
-import { Calendar } from '@/components/ui/calendar'
-import { Button } from '@/components/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { cn } from '@/lib/utils'
+import { beautifyObjectName, maybeBooleanishToBoolean } from './utils'
 
 defineProps<FieldProps>()
 
@@ -28,7 +28,7 @@ const df = new DateFormatter('en-US', {
         <slot v-bind="slotProps">
           <div>
             <Popover>
-              <PopoverTrigger as-child :disabled="disabled">
+              <PopoverTrigger as-child :disabled="maybeBooleanishToBoolean(config?.inputProps?.disabled) ?? disabled">
                 <Button
                   variant="outline"
                   :class="cn(

package/components/ui/auto-form/AutoFormFieldEnum.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName } from './utils'
 import type { FieldProps } from './interface'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/components/ui/form'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Label } from '@/components/ui/label'
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '~/components/ui/form'
+import { Label } from '~/components/ui/label'
+import { RadioGroup, RadioGroupItem } from '~/components/ui/radio-group'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '~/components/ui/select'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName, maybeBooleanishToBoolean } from './utils'
 
 defineProps<FieldProps & {
   options?: string[]
@@ -20,14 +20,14 @@ defineProps<FieldProps & {
       </AutoFormLabel>
       <FormControl>
         <slot v-bind="slotProps">
-          <RadioGroup v-if="config?.component === 'radio'" :disabled="disabled" :orientation="'vertical'" v-bind="{ ...slotProps.componentField }">
+          <RadioGroup v-if="config?.component === 'radio'" :disabled="maybeBooleanishToBoolean(config?.inputProps?.disabled) ?? disabled" :orientation="'vertical'" v-bind="{ ...slotProps.componentField }">
             <div v-for="(option, index) in options" :key="option" class="mb-2 flex items-center gap-3 space-y-0">
               <RadioGroupItem :id="`${option}-${index}`" :value="option" />
               <Label :for="`${option}-${index}`">{{ beautifyObjectName(option) }}</Label>
             </div>
           </RadioGroup>
 
-          <Select v-else :disabled="disabled" v-bind="{ ...slotProps.componentField }">
+          <Select v-else :disabled="maybeBooleanishToBoolean(config?.inputProps?.disabled) ?? disabled" v-bind="{ ...slotProps.componentField }">
             <SelectTrigger class="w-full">
               <SelectValue :placeholder="config?.inputProps?.placeholder" />
             </SelectTrigger>

package/components/ui/auto-form/AutoFormFieldFile.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import type { FieldProps } from './interface'
+import { Button } from '~/components/ui/button'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '~/components/ui/form'
+import { Input } from '~/components/ui/input'
 import { TrashIcon } from 'lucide-vue-next'
+import { ref } from 'vue'
 import AutoFormLabel from './AutoFormLabel.vue'
 import { beautifyObjectName } from './utils'
-import type { FieldProps } from './interface'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
 
 defineProps<FieldProps>()
 
@@ -39,7 +39,7 @@ async function parseFileAsString(file: File | undefined): Promise<string> {
             v-if="!inputFile"
             type="file"
             v-bind="{ ...config?.inputProps }"
-            :disabled="disabled"
+            :disabled="config?.inputProps?.disabled ?? disabled"
             @change="async (ev: InputEvent) => {
               const file = (ev.target as HTMLInputElement).files?.[0]
               inputFile = file

package/components/ui/auto-form/AutoFormFieldInput.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import type { FieldProps } from './interface'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '~/components/ui/form'
+import { Input } from '~/components/ui/input'
+import { Textarea } from '~/components/ui/textarea'
 import { computed } from 'vue'
 import AutoFormLabel from './AutoFormLabel.vue'
 import { beautifyObjectName } from './utils'
-import type { FieldProps } from './interface'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
 
 const props = defineProps<FieldProps>()
 const inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)
@@ -23,7 +23,7 @@ const inputComponent = computed(() => props.config?.component === 'textarea' ? T
             :is="inputComponent"
             type="text"
             v-bind="{ ...slotProps.componentField, ...config?.inputProps }"
-            :disabled="disabled"
+            :disabled="config?.inputProps?.disabled ?? disabled"
           />
         </slot>
       </FormControl>

package/components/ui/auto-form/AutoFormFieldNumber.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import type { FieldProps } from './interface'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '~/components/ui/form'
+import { Input } from '~/components/ui/input'
 import AutoFormLabel from './AutoFormLabel.vue'
 import { beautifyObjectName } from './utils'
-import type { FieldProps } from './interface'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
 
 defineOptions({
   inheritAttrs: false,
@@ -20,7 +20,7 @@ defineProps<FieldProps>()
       </AutoFormLabel>
       <FormControl>
         <slot v-bind="slotProps">
-          <Input type="number" v-bind="{ ...slotProps.componentField, ...config?.inputProps }" :disabled="disabled" />
+          <Input type="number" v-bind="{ ...slotProps.componentField, ...config?.inputProps }" :disabled="config?.inputProps?.disabled ?? disabled" />
         </slot>
       </FormControl>
       <FormDescription v-if="config?.description">

package/components/ui/auto-form/AutoFormFieldObject.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts" generic="T extends ZodRawShape">
 import type { ZodAny, ZodObject, ZodRawShape } from 'zod'
-import { computed, provide } from 'vue'
+import type { Config, ConfigItem, Shape } from './interface'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '~/components/ui/accordion'
+import { FormItem } from '~/components/ui/form'
 import { FieldContextKey, useField } from 'vee-validate'
+import { computed, provide } from 'vue'
 import AutoFormField from './AutoFormField.vue'
-import type { Config, ConfigItem, Shape } from './interface'
-import { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'
 import AutoFormLabel from './AutoFormLabel.vue'
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
-import { FormItem } from '@/components/ui/form'
+import { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'
 
 const props = defineProps<{
   fieldName: string

package/components/ui/auto-form/AutoFormLabel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { FormLabel } from '@/components/ui/form'
+import { FormLabel } from '~/components/ui/form'
 
 defineProps<{
   required?: boolean

package/components/ui/auto-form/constant.ts

@@ -1,3 +1,4 @@
+import type { InputComponents } from './interface'
 import AutoFormFieldArray from './AutoFormFieldArray.vue'
 import AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'
 import AutoFormFieldDate from './AutoFormFieldDate.vue'
@@ -7,7 +8,7 @@ import AutoFormFieldInput from './AutoFormFieldInput.vue'
 import AutoFormFieldNumber from './AutoFormFieldNumber.vue'
 import AutoFormFieldObject from './AutoFormFieldObject.vue'
 
-export const INPUT_COMPONENTS = {
+export const INPUT_COMPONENTS: InputComponents = {
   date: AutoFormFieldDate,
   select: AutoFormFieldEnum,
   radio: AutoFormFieldEnum,

package/components/ui/auto-form/dependencies.ts

@@ -1,8 +1,8 @@
-import type * as z from 'zod'
 import type { Ref } from 'vue'
-import { computed, ref, watch } from 'vue'
+import type * as z from 'zod'
+import { createContext } from 'reka-ui'
 import { useFieldValue, useFormValues } from 'vee-validate'
-import { createContext } from 'radix-vue'
+import { computed, ref, watch } from 'vue'
 import { type Dependency, DependencyType, type EnumValues } from './interface'
 import { getFromPath, getIndexIfArray } from './utils'
 
@@ -37,7 +37,7 @@ export default function useDependencies(
 
     if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {
       const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()
-      return getFromPath(form.value, currentInitial.join('.') + sourceLast)
+      return getFromPath(form.value, currentInitial.join('.') + sourceLast);
     }
 
     return getFromPath(form.value, source)