feat(BaseInputFile): update app.config.ts and BaseInputFile.vue

app.config.ts

@@ -77,6 +77,11 @@ export default defineAppConfig({
       size: 'md',
       contrast: 'default',
     },
+    BaseInputFile: {
+      rounded: 'sm',
+      size: 'md',
+      contrast: 'default',
+    },
     BaseMessage: {
       type: 'success',
       rounded: 'sm',

components/form/BaseInputFile.vue

@@ -16,49 +16,57 @@ const props = withDefaults(
     id?: string
 
     /**
-     * The shape of the file input.
+     * The radius of the file input.
+     *
+     * @since 2.0.0
+     * @default 'sm'
      */
-    shape?: 'straight' | 'rounded' | 'smooth' | 'curved' | 'full'
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
 
     /**
-     * The label to display for the file input.
+     * The size of the input.
+     *
+     * @default 'md'
      */
-    label?: string
+    size?: 'sm' | 'md' | 'lg'
 
     /**
-     * The placeholder to display for the file input.
+     * The contrast of the input.
+     *
+     * @since 2.0.0
+     * @default 'default'
      */
-    placeholder?: string
+    contrast?: 'default' | 'default-contrast'
 
     /**
-     * The icon to display for the file input.
+     * The label to display for the file input.
      */
-    icon?: string
+    label?: string
 
     /**
-     * Whether the color of the file input should change when it is focused.
+     * The icon to display for the file input.
      */
-    colorFocus?: boolean
+    icon?: string
 
     /**
-     * Whether the file input is in a loading state.
+     * The placeholder to display for the file input.
      */
-    loading?: boolean
+    placeholder?: string
 
     /**
-     * The size of the input.
+     * An error message or boolean value indicating whether the file input is in an error state.
      */
-    size?: 'sm' | 'md' | 'lg'
+    error?: string | boolean
 
     /**
-     * The contrast of the input.
+     * Whether the color of the file input should change when it is focused.
      */
-    contrast?: 'white' | 'white-contrast'
+    colorFocus?: boolean
 
     /**
-     * An error message or boolean value indicating whether the file input is in an error state.
+     * Whether the file input is in a loading state.
      */
-    error?: string | boolean
+    loading?: boolean
 
     /**
      * Method to return the text value of the file input.
@@ -101,15 +109,14 @@ const props = withDefaults(
     }
   }>(),
   {
-    id: undefined,
     modelValue: undefined,
-    type: 'text',
-    size: 'md',
-    contrast: 'white',
-    shape: undefined,
-    placeholder: 'Choose file',
+    id: undefined,
+    rounded: undefined,
+    size: undefined,
+    contrast: undefined,
     label: undefined,
     icon: undefined,
+    placeholder: 'Choose file',
     error: false,
     textValue: (fileList?: FileList | null) => {
       if (!fileList?.item?.length) {
@@ -126,25 +133,29 @@ const props = withDefaults(
 const emits = defineEmits<{
   'update:modelValue': [value?: FileList | null]
 }>()
-const appConfig = useAppConfig()
-const shape = computed(() => props.shape ?? appConfig.nui.defaultShapes?.input)
-
-const shapeStyle = {
-  straight: '',
-  rounded: 'nui-input-rounded',
-  smooth: 'nui-input-smooth',
-  curved: 'nui-input-curved',
+
+const rounded = useNuiDefaultProperty(props, 'BaseInputFile', 'rounded')
+const size = useNuiDefaultProperty(props, 'BaseInputFile', 'size')
+const contrast = useNuiDefaultProperty(props, 'BaseInputFile', 'contrast')
+
+const radiuses = {
+  none: '',
+  sm: 'nui-input-rounded',
+  md: 'nui-input-smooth',
+  lg: 'nui-input-curved',
   full: 'nui-input-full',
-}
-const sizeStyle = {
+} as Record<string, string>
+
+const sizes = {
   sm: 'nui-input-sm',
   md: 'nui-input-md',
   lg: 'nui-input-lg',
-}
-const contrastStyle = {
-  white: 'nui-input-white',
-  'white-contrast': 'nui-input-white-contrast',
-}
+} as Record<string, string>
+
+const contrasts = {
+  default: 'nui-input-white',
+  'default-contrast': 'nui-input-white-contrast',
+} as Record<string, string>
 
 // const value = ref(props.modelValue)
 const inputRef = ref<HTMLInputElement>()
@@ -170,9 +181,9 @@ const id = useNinjaId(() => props.id)
   <div
     class="nui-input-file-regular"
     :class="[
-      contrastStyle[props.contrast],
-      sizeStyle[props.size],
-      shape && shapeStyle[shape],
+      contrast && contrasts[contrast],
+      size && sizes[size],
+      rounded && radiuses[rounded],
       props.error && !props.loading && 'nui-input-file-error',
       props.loading && 'nui-input-file-loading',
       props.icon && 'nui-has-icon',

nuxt.schema.ts

@@ -329,6 +329,26 @@ export default defineNuxtSchema({
          */
         contrast: 'default',
       },
+      BaseInputFile: {
+        /**
+         * The radius of the input.
+         *
+         * @type {'none' | 'sm' | 'md' | 'lg' | 'full'}
+         */
+        rounded: 'sm',
+        /**
+         * The size of the input.
+         *
+         * @type {'sm' | 'md' | 'lg'}
+         */
+        size: 'md',
+        /**
+         * The contrast of the input.
+         *
+         * @type {'default' | 'default-contrast'}
+         */
+        contrast: 'default',
+      },
       BaseMessage: {
         /**
          * The type of the message.