feat(Input): handle icons

playground/pages/input.vue

@@ -5,15 +5,37 @@ import input from '#build/ui/input'
 <template>
   <div class="flex flex-col items-center gap-4">
     <div class="flex flex-col gap-4 -ml-[258px]">
-      <UInput placeholder="Write something..." autofocus />
+      <UInput placeholder="Search..." autofocus />
-      <UInput placeholder="Write something..." />
+      <UInput placeholder="Search..." color="gray" />
-      <UInput placeholder="Write something..." color="gray" />
+      <UInput placeholder="Search..." color="primary" />
-      <UInput placeholder="Write something..." color="primary" />
+      <UInput placeholder="Search..." disabled />
-      <UInput placeholder="Write something..." color="red" />
+      <UInput placeholder="Search..." type="number" />
-      <UInput placeholder="Write something..." disabled />
+      <UInput icon="i-heroicons-folder" placeholder="Search..." type="file" />
+      <UInput icon="i-heroicons-calendar" placeholder="Search..." type="date" />
+      <UInput icon="i-heroicons-lock-closed" placeholder="Search..." type="password" value="password" />
+      <UInput loading placeholder="Search..." />
+      <UInput loading leading-icon="i-heroicons-magnifying-glass" placeholder="Search..." />
+      <UInput loading trailing placeholder="Search..." />
+      <UInput loading trailing-icon="i-heroicons-magnifying-glass" placeholder="Search..." />
     </div>
     <div class="flex items-center gap-4">
-      <UInput v-for="size in Object.keys(input.variants.size)" :key="size" placeholder="Write something..." :size="(size as any)" />
+      <UInput
+        v-for="size in Object.keys(input.variants.size)"
+        :key="size"
+        icon="i-heroicons-magnifying-glass"
+        placeholder="Search..."
+        :size="(size as any)"
+      />
+    </div>
+    <div class="flex items-center gap-4">
+      <UInput
+        v-for="size in Object.keys(input.variants.size)"
+        :key="size"
+        icon="i-heroicons-magnifying-glass"
+        trailing
+        placeholder="Search..."
+        :size="(size as any)"
+      />
     </div>
   </div>
 </template>

src/runtime/components/Input.vue

@@ -1,11 +1,12 @@
 <script lang="ts">
-// TODO: Add missing props / slots (e.g. icons)
+import type { InputHTMLAttributes } from 'vue'
 import { tv, type VariantProps } from 'tailwind-variants'
 import { defu } from 'defu'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/input'
-import { looseToNumber } from '../utils'
+import { looseToNumber } from '#ui/utils'
+import type { UseComponentIconsProps } from '#ui/composables/useComponentIcons'
 
 const appConfig = _appConfig as AppConfig & { ui: { input: Partial<typeof theme> } }
 
@@ -13,23 +14,23 @@ const input = tv({ extend: tv(theme), ...(appConfig.ui?.input || {}) })
 
 type InputVariants = VariantProps<typeof input>
 
-export interface InputProps {
+export interface InputProps extends UseComponentIconsProps {
-  id?: string | number
+  id?: string
   name?: string
-  type?: string
+  type?: InputHTMLAttributes['type']
-  required?: boolean
-  color?: InputVariants['color']
-  variant?: InputVariants['variant']
-  size?: InputVariants['size']
   modelValue?: string
-  placeholder?: string
-  autofocus?: boolean
-  autofocusDelay?: number
   modelModifiers?: {
     trim?: boolean
     lazy?: boolean
     number?: boolean
   }
+  placeholder?: string
+  color?: InputVariants['color']
+  variant?: InputVariants['variant']
+  size?: InputVariants['size']
+  required?: boolean
+  autofocus?: boolean
+  autofocusDelay?: number
   disabled?: boolean
   class?: any
   ui?: Partial<typeof input.slots>
@@ -49,7 +50,8 @@ export interface InputSlots {
 
 <script lang="ts" setup>
 import { ref, computed, onMounted } from 'vue'
-import { useFormField } from '../composables/useFormField'
+import { useFormField } from '#ui/composables/useFormField'
+import { useComponentIcons } from '#ui/composables/useComponentIcons'
 
 defineOptions({ inheritAttrs: false })
 
@@ -60,30 +62,33 @@ const props = withDefaults(defineProps<InputProps>(), {
 const emit = defineEmits<InputEmits>()
 defineSlots<InputSlots>()
 
-const { emitFormBlur, emitFormInput, size, color, inputId, name, disabled } = useFormField(props)
+const { emitFormBlur, emitFormInput, size, color, inputId, name, disabled } = useFormField<InputProps>(props)
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
+// const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
+
+// const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value)
 
 const ui = computed(() => tv({ extend: input, slots: props.ui })({
   color: color.value,
   variant: props.variant,
-  size: size?.value
+  size: size?.value,
+  loading: props.loading,
+  leading: isLeading.value,
+  trailing: isTrailing.value
 }))
 
-// const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
-
-// const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value)
-
 const modelModifiers = ref(defu({}, props.modelModifiers, { trim: false, lazy: false, number: false }))
 
 const inputRef = ref<HTMLInputElement | null>(null)
 
-const autoFocus = () => {
+function autoFocus () {
   if (props.autofocus) {
     inputRef.value?.focus()
   }
 }
 
 // Custom function to handle the v-model properties
-const updateInput = (value: string) => {
+function updateInput (value: string) {
   if (modelModifiers.value.trim) {
     value = value.trim()
   }
@@ -96,13 +101,13 @@ const updateInput = (value: string) => {
   emitFormInput()
 }
 
-const onInput = (event: Event) => {
+function onInput (event: Event) {
   if (!modelModifiers.value.lazy) {
     updateInput((event.target as HTMLInputElement).value)
   }
 }
 
-const onChange = (event: Event) => {
+function onChange (event: Event) {
   const value = (event.target as HTMLInputElement).value
 
   if (modelModifiers.value.lazy) {
@@ -115,7 +120,7 @@ const onChange = (event: Event) => {
   }
 }
 
-const onBlur = (event: FocusEvent) => {
+function onBlur (event: FocusEvent) {
   emitFormBlur()
   emit('blur', event)
 }
@@ -143,24 +148,19 @@ onMounted(() => {
       @blur="onBlur"
       @change="onChange"
     >
+
     <slot />
 
-    <!-- span
+    <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="ui.leading()">
-      v-if="(isLeading && leadingIconName) || $slots.leading"
+      <slot name="leading" :disabled="disabled" :loading="loading" :icon="leadingIconName" :class="ui.leadingIcon()">
-      :class="leadingWrapperIconClass"
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon()" />
-    >
-      <slot name="leading" :disabled="disabled" :loading="loading">
-        <UIcon :name="leadingIconName" :class="leadingIconClass" />
       </slot>
     </span>
 
-    <span
+    <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="ui.trailing()">
-      v-if="(isTrailing && trailingIconName) || $slots.trailing"
+      <slot name="trailing" :disabled="disabled" :loading="loading" :icon="trailingIconName" :class="ui.trailingIcon()">
-      :class="trailingWrapperIconClass"
+        <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon()" />
-    >
-      <slot name="trailing" :disabled="disabled" :loading="loading">
-        <UIcon :name="trailingIconName" :class="trailingIconClass" />
       </slot>
-    </span -->
+    </span>
   </div>
 </template>

src/theme/input.ts

@@ -3,35 +3,54 @@ export default (config: { colors: string[] }) => {
     slots: {
       root: 'relative',
       base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500',
-      icon: '',
+      leading: 'absolute inset-y-0 start-0 flex items-center',
-      leading: '',
+      leadingIcon: 'shrink-0 text-gray-400 dark:text-gray-500',
-      trailing: ''
+      trailing: 'absolute inset-y-0 end-0 flex items-center',
+      trailingIcon: 'shrink-0 text-gray-400 dark:text-gray-500'
     },
     variants: {
       size: {
         '2xs': {
           base: 'text-xs gap-x-1 px-2 py-1',
-          icon: 'h-4 w-4'
+          leading: 'px-2',
+          trailing: 'px-2',
+          leadingIcon: 'size-4',
+          trailingIcon: 'size-4'
         },
         xs: {
           base: 'text-sm gap-x-1.5 px-2.5 py-1.5',
-          icon: 'size-4'
+          leading: 'px-2.5',
+          trailing: 'px-2.5',
+          leadingIcon: 'size-4',
+          trailingIcon: 'size-4'
         },
         sm: {
           base: 'text-sm gap-x-1.5 px-2.5 py-1.5',
-          icon: 'size-5'
+          leading: 'px-2.5',
+          trailing: 'px-2.5',
+          leadingIcon: 'size-5',
+          trailingIcon: 'size-5'
         },
         md: {
           base: 'text-sm gap-x-1.5 px-3 py-2',
-          icon: 'size-5'
+          leading: 'px-3',
+          trailing: 'px-3',
+          leadingIcon: 'size-5',
+          trailingIcon: 'size-5'
         },
         lg: {
           base: 'text-sm gap-x-2.5 px-3.5 py-2.5',
-          icon: 'size-5'
+          leading: 'px-3.5',
+          trailing: 'px-3.5',
+          leadingIcon: 'size-5',
+          trailingIcon: 'size-5'
         },
         xl: {
           base: 'text-base gap-x-2.5 px-3.5 py-2.5',
-          icon: 'size-6'
+          leading: 'px-3.5',
+          trailing: 'px-3.5',
+          leadingIcon: 'size-6',
+          trailingIcon: 'size-6'
         }
       },
       variant: {
@@ -42,6 +61,15 @@ export default (config: { colors: string[] }) => {
         ...Object.fromEntries(config.colors.map((color: string) => [color, ''])),
         white: '',
         gray: ''
+      },
+      leading: {
+        true: ''
+      },
+      trailing: {
+        true: ''
+      },
+      loading: {
+        true: ''
       }
     },
     compoundVariants: [...config.colors.map((color: string) => ({
@@ -56,6 +84,67 @@ export default (config: { colors: string[] }) => {
       color: 'gray',
       variant: 'outline',
       class: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
+    }, {
+      leading: true,
+      size: '2xs',
+      class: 'ps-7'
+    }, {
+      leading: true,
+      size: 'xs',
+      class: 'ps-8'
+    }, {
+      leading: true,
+      size: 'sm',
+      class: 'ps-9'
+    }, {
+      leading: true,
+      size: 'md',
+      class: 'ps-10'
+    }, {
+      leading: true,
+      size: 'lg',
+      class: 'ps-11'
+    }, {
+      leading: true,
+      size: 'xl',
+      class: 'ps-12'
+    }, {
+      trailing: true,
+      size: '2xs',
+      class: 'pe-7'
+    }, {
+      trailing: true,
+      size: 'xs',
+      class: 'pe-8'
+    }, {
+      trailing: true,
+      size: 'sm',
+      class: 'pe-9'
+    }, {
+      trailing: true,
+      size: 'md',
+      class: 'pe-10'
+    }, {
+      trailing: true,
+      size: 'lg',
+      class: 'pe-11'
+    }, {
+      trailing: true,
+      size: 'xl',
+      class: 'pe-12'
+    }, {
+      loading: true,
+      leading: true,
+      class: {
+        leadingIcon: 'animate-spin'
+      }
+    }, {
+      loading: true,
+      leading: false,
+      trailing: true,
+      class: {
+        trailingIcon: 'animate-spin'
+      }
     }],
     defaultVariants: {
       size: 'sm',