feat: match input-file component to related plugin (#63)

components/form/BaseInputFile.vue

@@ -20,7 +20,7 @@ const props = withDefaults(
     /**
      * The shape of the file input.
      */
-    shape?: 'straight' | 'rounded' | 'curved' | 'full'
+    shape?: 'straight' | 'rounded' | 'smooth' | 'curved' | 'full'
 
     /**
      * The label to display for the file input.
@@ -48,9 +48,14 @@ const props = withDefaults(
     loading?: boolean
 
     /**
-     * Whether the file input is condensed.
+     * The size of the input.
      */
-    condensed?: boolean
+    size?: 'sm' | 'md' | 'lg'
+
+    /**
+     * The kind of the input.
+     */
+    kind?: 'white' | 'white-contrast'
 
     /**
      * An error message or boolean value indicating whether the file input is in an error state.
@@ -100,6 +105,8 @@ const props = withDefaults(
   {
     id: undefined,
     type: 'text',
+    size: 'md',
+    kind: 'white',
     shape: undefined,
     placeholder: 'Choose file',
     label: undefined,
@@ -122,17 +129,22 @@ const emits = defineEmits<{
 }>()
 const appConfig = useAppConfig()
 const shape = computed(() => props.shape ?? appConfig.nui.defaultShapes?.input)
-const shapeLabelStyle = {
+
+const shapeStyle = {
   straight: '',
-  rounded: 'rounded',
-  curved: 'rounded-xl',
-  full: 'rounded-full',
+  rounded: 'nui-input-rounded',
+  smooth: 'nui-input-smooth',
+  curved: 'nui-input-curved',
+  full: 'nui-input-full',
 }
-const shapeContentStyle = {
-  straight: '',
-  rounded: 'rounded-l',
-  curved: 'rounded-s-xl',
-  full: 'rounded-s-full',
+const sizeStyle = {
+  sm: 'nui-input-sm',
+  md: 'nui-input-md',
+  lg: 'nui-input-lg',
+}
+const kindStyle = {
+  white: 'nui-input-white',
+  'white-contrast': 'nui-input-white-contrast',
 }
 
 // const value = ref(props.modelValue)
@@ -142,15 +154,6 @@ const value = useVModel(props, 'modelValue', emits)
 const textValue = computed(() => {
   return props.textValue?.(value.value)
 })
-const condensedLabelStyle = computed(() =>
-  props.condensed
-    ? props.icon === undefined
-      ? 'h-8 py-2 text-xs leading-4 gap-1'
-      : 'h-8 py-2 text-xs leading-4 pe-3'
-    : props.icon === undefined
-    ? 'h-10 text-[0.825rem] leading-5 gap-2'
-    : 'h-10 text-[0.825rem] leading-5 pe-4'
-)
 
 defineExpose({
   /**
@@ -163,74 +166,52 @@ const id = useNinjaId(() => props.id)
 </script>
 
 <template>
-  <div class="relative" :class="props.classes?.wrapper">
+  <div
+    class="nui-input-file-regular"
+    :class="[
+      kindStyle[props.kind],
+      sizeStyle[props.size],
+      shape && shapeStyle[shape],
+      props.error && !props.loading && 'nui-input-file-error',
+      props.loading && 'nui-input-file-loading',
+      props.icon && 'nui-has-icon',
+      ...(props.classes?.wrapper && Array.isArray(props.classes.wrapper)
+        ? props.classes.wrapper
+        : [props.classes?.wrapper]),
+    ]"
+  >
     <label
       v-if="'label' in $slots || props.label"
-      class="nui-label w-full"
+      class="nui-input-file-label"
       :for="id"
-      :class="[
-        props.condensed && 'pb-1 text-xs',
-        !props.condensed && 'pb-1 text-[0.825rem]',
-        ...(props.classes?.label && Array.isArray(props.classes.label)
-          ? props.classes.label
-          : [props.classes?.label]),
-      ]"
+      :class="props.classes.label"
     >
       <slot name="label">{{ props.label }}</slot>
     </label>
-    <div class="group/nui-input-file relative">
+    <div class="nui-input-file-outer">
       <label
         tabindex="0"
-        class="nui-focus border-muted-300 text-muted-600 placeholder:text-muted-300 dark:border-muted-700 dark:bg-muted-900/75 dark:text-muted-200 dark:placeholder:text-muted-500 dark:focus:border-muted-700 peer flex w-full cursor-pointer items-center overflow-hidden border bg-white font-sans transition-colors duration-300 focus-within:outline-1 disabled:cursor-not-allowed disabled:opacity-75"
+        class="nui-input-file-inner"
         :for="id"
         :class="[
-          condensedLabelStyle,
-          shape && shapeLabelStyle[shape],
-          props.colorFocus && 'focus:border-primary-500',
-          props.loading && 'text-transparent placeholder:text-transparent',
-          props.error && !props.loading && 'border-danger-500',
+          props.colorFocus && 'nui-color-focus',
           ...(props.classes?.input && Array.isArray(props.classes.input)
             ? props.classes.input
             : [props.classes?.input]),
         ]"
       >
-        <div
-          class="group-hover/nui-input-file:text-primary-500 bg-muted-50 border-muted-300 dark:border-muted-700 dark:bg-muted-800 text-muted-400 group-focus-within/nui-input-file:text-primary-500 pointer-events-none flex shrink-0 items-center justify-center gap-1 border border-s-0 transition-colors duration-100 group-disabled/nui-input-file:cursor-not-allowed peer-disabled:opacity-75"
-          :class="[
-            props.condensed && 'h-8 px-2',
-            !props.condensed && 'h-10 px-3',
-            shape && shapeContentStyle[shape],
-            props.error && !props.loading && '!text-danger-500',
-            props.error &&
-              !props.loading &&
-              ' border-danger-500 border-e-danger-200 bg-danger-50',
-            ...(props.classes?.text && Array.isArray(props.classes.text)
-              ? props.classes.text
-              : [props.classes?.text]),
-          ]"
-        >
+        <div class="nui-input-file-addon" :class="props.classes.text">
           <span class="text-xs">{{ props.placeholder }}</span>
           <slot name="icon">
             <Icon
               v-if="props.icon"
               :name="props.icon"
-              :class="[
-                props.condensed && 'h-[1rem] w-[1rem]',
-                !props.condensed && 'h-[1.15rem] w-[1.15rem]',
-                ...(props.classes?.icon && Array.isArray(props.classes.icon)
-                  ? props.classes.icon
-                  : [props.classes?.icon]),
-              ]"
+              :class="props.classes.icon"
             />
           </slot>
         </div>
 
-        <div
-          class="ms-2 inline-flex truncate"
-          :class="
-            value?.item?.length ? '' : 'text-muted-300 dark:text-muted-500'
-          "
-        >
+        <div class="nui-input-file-text">
           {{ textValue }}
         </div>
         <input
@@ -243,19 +224,12 @@ const id = useNinjaId(() => props.id)
         />
       </label>
 
-      <div
-        v-if="props.loading"
-        class="absolute start-0 flex h-10 w-full items-center"
-        :class="[
-          props.condensed && '-top-1 ps-24',
-          !props.condensed && 'top-0 ps-28',
-        ]"
-      >
-        <BasePlaceload class="h-3 w-full max-w-[75%] rounded" />
+      <div v-if="props.loading" class="nui-input-file-placeload">
+        <BasePlaceload class="nui-placeload" />
       </div>
       <span
         v-if="props.error && typeof props.error === 'string'"
-        class="text-danger-600 mt-1 block font-sans text-[0.65rem] font-medium leading-none"
+        class="nui-input-file-error-text"
         :class="props.classes?.error"
       >
         {{ props.error }}