fix: update to fix type issues (#151)

src/module.ts

@@ -1,9 +1,10 @@
 import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, createResolver, addPlugin } from '@nuxt/kit'
 import colors from 'tailwindcss/colors.js'
 import { iconsPlugin, getIconCollections } from '@egoist/tailwindcss-icons'
+import { defu } from 'defu'
 import { name, version } from '../package.json'
 import { colorsAsRegex, excludeColors } from './runtime/utils/colors'
-import preset from './runtime/app.config'
+import { ui as preset } from './preset'
 import type { DeepPartial } from './runtime/types'
 
 // @ts-ignore
@@ -23,7 +24,7 @@ declare module 'nuxt/schema' {
       primary?: string
       gray?: string
       colors?: string[]
-    } & DeepPartial<typeof preset.ui>
+    } & DeepPartial<typeof preset>
   }
 }
 
@@ -64,6 +65,8 @@ export default defineNuxtModule<ModuleOptions>({
 
     nuxt.options.css.push(resolve(runtimeDir, 'ui.css'))
 
+    nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui, preset)
+
     nuxt.hook('app:resolve', (app) => {
       app.configs.push(resolve(runtimeDir, 'app.config'))
     })

src/runtime/app.config.ts → src/preset.ts

@@ -677,32 +677,30 @@ const notifications = {
   container: 'px-4 sm:px-6 py-6 space-y-3 overflow-y-auto'
 }
 
-export default {
-  ui: {
-    avatar,
-    avatarGroup,
-    badge,
-    button,
-    buttonGroup,
-    dropdown,
-    input,
-    inputGroup,
-    textarea,
-    select,
-    selectMenu,
-    checkbox,
-    radio,
-    toggle,
-    card,
-    container,
-    verticalNavigation,
-    commandPalette,
-    modal,
-    slideover,
-    popover,
-    tooltip,
-    contextMenu,
-    notification,
-    notifications
-  }
+export const ui = {
+  avatar,
+  avatarGroup,
+  badge,
+  button,
+  buttonGroup,
+  dropdown,
+  input,
+  inputGroup,
+  textarea,
+  select,
+  selectMenu,
+  checkbox,
+  radio,
+  toggle,
+  card,
+  container,
+  verticalNavigation,
+  commandPalette,
+  modal,
+  slideover,
+  popover,
+  tooltip,
+  contextMenu,
+  notification,
+  notifications
 }

src/runtime/components/forms/Input.vue

@@ -13,7 +13,7 @@
       :autocomplete="autocomplete"
       :spellcheck="spellcheck"
       :class="inputClass"
-      @input="onInput(($event.target as any).value)"
+      @input="onInput"
       @focus="$emit('focus', $event)"
       @blur="$emit('blur', $event)"
     >
@@ -147,8 +147,8 @@ export default defineComponent({
       }
     }
 
-    const onInput = (value: string) => {
-      emit('update:modelValue', value)
+    const onInput = (event: InputEvent) => {
+      emit('update:modelValue', (event.target as any).value)
     }
 
     onMounted(() => {

src/runtime/components/forms/Select.vue

@@ -7,7 +7,7 @@
       :required="required"
       :disabled="disabled"
       :class="selectClass"
-      @input="onInput(($event.target as any).value)"
+      @input="onInput"
     >
       <template v-for="(option, index) in normalizedOptionsWithPlaceholder">
         <optgroup
@@ -127,8 +127,8 @@ export default defineComponent({
 
     const ui = computed<Partial<typeof appConfig.ui.select>>(() => defu({}, props.ui, appConfig.ui.select))
 
-    const onInput = (value: string) => {
-      emit('update:modelValue', value)
+    const onInput = (event: InputEvent) => {
+      emit('update:modelValue', (event.target as any).value)
     }
 
     const guessOptionValue = (option: any) => {

src/runtime/components/forms/SelectMenu.vue

@@ -28,7 +28,7 @@
           </span>
 
           <slot name="label">
-            <span v-if="modelValue" class="block truncate">{{ typeof modelValue === 'string' ? modelValue : (modelValue as any)[optionAttribute] }}</span>
+            <span v-if="modelValue" class="block truncate">{{ typeof modelValue === 'string' ? modelValue : modelValue[optionAttribute] }}</span>
             <span v-else class="block truncate text-gray-400 dark:text-gray-500">{{ placeholder || '&nbsp;' }}</span>
           </slot>
 

src/runtime/components/forms/Textarea.vue

@@ -11,7 +11,7 @@
       :placeholder="placeholder"
       :autocomplete="autocomplete"
       :class="textareaClass"
-      @input="onInput(($event.target as any).value)"
+      @input="onInput"
       @focus="$emit('focus', $event)"
       @blur="$emit('blur', $event)"
     />
@@ -128,10 +128,10 @@ export default defineComponent({
       }
     }
 
-    const onInput = (value: string) => {
+    const onInput = (event: InputEvent) => {
       autoResize()
 
-      emit('update:modelValue', value)
+      emit('update:modelValue', (event.target as any).value)
     }
 
     watch(() => props.modelValue, () => {