fix(types): improve with strict mode (#1041)

.nuxtrc

@@ -1,3 +1,2 @@
 imports.autoImport=false
 typescript.includeWorkspace=true
-typescript.strict=false

docs/nuxt.config.ts

@@ -123,5 +123,8 @@ export default defineNuxtConfig({
         }
       })
     }
+  },
+  typescript: {
+    strict: false
   }
 })

playground/nuxt.config.ts

@@ -1,7 +1,5 @@
-import module from '../src/module'
-
 export default defineNuxtConfig({
   modules: [
-    module
+    '../src/module'
   ]
 })

src/colors.ts

@@ -243,7 +243,7 @@ export const generateSafelist = (colors: string[], globalColors) => {
 }
 
 export const customSafelistExtractor = (prefix, content: string, colors: string[], safelistColors: string[]) => {
-  const classes = []
+  const classes: string[] = []
   const regex = /<([A-Za-z][A-Za-z0-9]*(?:-[A-Za-z][A-Za-z0-9]*)*)\s+(?![^>]*:color\b)[^>]*\bcolor=["']([^"']+)["'][^>]*>/gs
 
   const matches = content.matchAll(regex)

src/module.ts

@@ -10,10 +10,15 @@ import type { DeepPartial, Strategy } from './runtime/types/utils'
 
 const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
 
+// @ts-ignore
 delete defaultColors.lightBlue
+// @ts-ignore
 delete defaultColors.warmGray
+// @ts-ignore
 delete defaultColors.trueGray
+// @ts-ignore
 delete defaultColors.coolGray
+// @ts-ignore
 delete defaultColors.blueGray
 
 type UI = {
@@ -79,12 +84,15 @@ export default defineNuxtModule<ModuleOptions>({
 
     // @ts-ignore
     nuxt.hook('tailwindcss:config', function (tailwindConfig) {
+      tailwindConfig.theme = tailwindConfig.theme || {}
+      tailwindConfig.theme.extend = tailwindConfig.theme.extend || {}
+      tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {}
+
       const globalColors: any = {
         ...(tailwindConfig.theme.colors || defaultColors),
         ...tailwindConfig.theme.extend?.colors
       }
 
-      tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {}
       // @ts-ignore
       globalColors.primary = tailwindConfig.theme.extend.colors.primary = {
         50: 'rgb(var(--color-primary-50) / <alpha-value>)',
@@ -132,7 +140,7 @@ export default defineNuxtModule<ModuleOptions>({
       }
 
       tailwindConfig.safelist = tailwindConfig.safelist || []
-      tailwindConfig.safelist.push(...generateSafelist(options.safelistColors, colors))
+      tailwindConfig.safelist.push(...generateSafelist(options.safelistColors || [], colors))
 
       tailwindConfig.plugins = tailwindConfig.plugins || []
       tailwindConfig.plugins.push(iconsPlugin(Array.isArray(options.icons) || options.icons === 'all' ? { collections: getIconCollections(options.icons) } : typeof options.icons === 'object' ? options.icons as IconsPluginOptions : {}))

src/runtime/components/data/Table.vue

@@ -11,7 +11,7 @@
             <slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
               <UButton
                 v-if="column.sortable"
-                v-bind="{ ...ui.default.sortButton, ...sortButton }"
+                v-bind="{ ...(ui.default.sortButton || {}), ...sortButton }"
                 :icon="(!sort.column || sort.column !== column.key) ? (sortButton.icon || ui.default.sortButton.icon) : sort.direction === 'asc' ? sortAscIcon : sortDescIcon"
                 :label="column[columnAttribute]"
                 @click="onSort(column)"
@@ -145,11 +145,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   emits: ['update:modelValue', 'update:sort'],

src/runtime/components/elements/Accordion.vue

@@ -93,17 +93,17 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props) {
     const { ui, attrs } = useUI('accordion', toRef(props, 'ui'), config, toRef(props, 'class'))
 
-    const uiButton = computed<Partial<typeof configButton>>(() => configButton)
+    const uiButton = computed<typeof configButton>(() => configButton)
 
     const buttonRefs = ref<{ open: boolean, close: (e: EventTarget) => {} }[]>([])
 
@@ -114,7 +114,7 @@ export default defineComponent({
 
       buttonRefs.value.forEach((button) => {
         if (button.open) {
-          button.close(e.target)
+          button.close(e.target as EventTarget)
         }
       })
     }

src/runtime/components/elements/Alert.vue

@@ -17,15 +17,15 @@
         </p>
 
         <div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
-          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" />
+          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="action.click" />
         </div>
       </div>
       <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
         <template v-if="!description && !$slots.description && actions.length">
-          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" />
+          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="action.click" />
         </template>
 
-        <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="$emit('close')" />
+        <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="$emit('close')" />
       </div>
     </div>
   </div>
@@ -73,7 +73,7 @@ export default defineComponent({
     },
     closeButton: {
       type: Object as PropType<Button>,
-      default: () => config.default.closeButton as Button
+      default: () => config.default.closeButton as unknown as Button
     },
     actions: {
       type: Array as PropType<(Button & { click?: Function })[]>,
@@ -98,11 +98,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   emits: ['close'],

src/runtime/components/elements/Avatar.vue

@@ -86,11 +86,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props) {

src/runtime/components/elements/AvatarGroup.ts

@@ -29,11 +29,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
       type: Object as PropType<Partial<typeof avatarGroupConfig & { strategy?: Strategy }>>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props, { slots }) {

src/runtime/components/elements/Badge.vue

@@ -51,11 +51,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props) {

src/runtime/components/elements/Button.vue

@@ -121,11 +121,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props, { slots }) {

src/runtime/components/elements/ButtonGroup.ts

@@ -32,11 +32,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
       type: Object as PropType<Partial<typeof buttonGroupConfig & { strategy?: Strategy }>>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props, { slots }) {

src/runtime/components/elements/Chip.vue

@@ -61,11 +61,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props) {

src/runtime/components/elements/Dropdown.vue

@@ -109,11 +109,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props) {

src/runtime/components/elements/Kbd.vue

@@ -33,11 +33,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props) {

src/runtime/components/elements/Meter.vue

@@ -87,11 +87,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props) {

src/runtime/components/elements/MeterGroup.ts

@@ -48,11 +48,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
       type: Object as PropType<Partial<typeof meterGroupConfig & { strategy?: Strategy }>>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props, { slots }) {
@@ -128,7 +128,7 @@ export default defineComponent({
       vProps.ui.wrapper = node.props?.ui?.wrapper || ''
       vProps.ui.wrapper += [
         node.props?.ui?.wrapper,
-        props.ui?.meter?.background || ui.value.background,
+        ui.value.background,
         ui.value.transition
       ].filter(Boolean).join(' ')
 
@@ -153,8 +153,8 @@ export default defineComponent({
 
       // @ts-expect-error
       delete(clone.children?.label)
-      delete(clone.props.indicator)
+      delete(clone.props?.indicator)
-      delete(clone.props.label)
+      delete(clone.props?.label)
 
       return clone
     }))

src/runtime/components/elements/Progress.vue

@@ -8,7 +8,7 @@
       </div>
     </slot>
 
-    <progress :class="progressClass" v-bind="{ value, max: realMax }">
+    <progress :class="progressClass" v-bind="{ value, max: (realMax as number) }">
       {{ Math.round(percent) }}%
     </progress>
 
@@ -39,7 +39,7 @@ export default defineComponent({
   inheritAttrs: false,
   props: {
     value: {
-      type: [Number, null, undefined],
+      type: Number,
       default: null
     },
     max: {
@@ -73,11 +73,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props) {
@@ -173,7 +173,7 @@ export default defineComponent({
       return classes.join(' ')
     }
 
-    const isIndeterminate = computed(() => [undefined, null].includes(props.value))
+    const isIndeterminate = computed(() => props.value === undefined || props.value === null)
     const isSteps = computed(() => Array.isArray(props.max))
 
     const realMax = computed(() => {
@@ -191,8 +191,8 @@ export default defineComponent({
     const percent = computed(() => {
       switch (true) {
       case props.value < 0: return 0
-      case props.value > realMax.value: return 100
+      case props.value > (realMax.value as number): return 100
-      default: return (props.value / realMax.value) * 100
+      default: return (props.value / (realMax.value as number)) * 100
       }
     })
 

src/runtime/components/forms/Checkbox.vue

@@ -100,11 +100,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   emits: ['update:modelValue', 'change'],
@@ -133,8 +133,8 @@ export default defineComponent({
         ui.value.rounded,
         ui.value.background,
         ui.value.border,
-        ui.value.ring.replaceAll('{color}', color.value),
+        color.value && ui.value.ring.replaceAll('{color}', color.value),
-        ui.value.color.replaceAll('{color}', color.value)
+        color.value && ui.value.color.replaceAll('{color}', color.value)
       ), props.inputClass)
     })
 

src/runtime/components/forms/Form.vue

@@ -247,7 +247,7 @@ async function getValibotError (
   const result = await schema._parse(state)
   if (result.issues) {
     return result.issues.map((issue) => ({
-      path: issue.path.map(p => p.key).join('.'),
+      path: issue.path?.map(p => p.key).join('.') || '',
       message: issue.message
     }))
   }

src/runtime/components/forms/FormGroup.vue

@@ -89,11 +89,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     },
     eagerValidation: {
       type: Boolean,

src/runtime/components/forms/Input.vue

@@ -153,11 +153,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     },
     modelModifiers: {
       type: Object as PropType<{ trim?: boolean, lazy?: boolean, number?: boolean }>,
@@ -199,13 +199,13 @@ export default defineComponent({
       emitFormInput()
     }
 
-    const onInput = (event: InputEvent) => {
+    const onInput = (event: Event) => {
       if (!modelModifiers.value.lazy) {
         updateInput((event.target as HTMLInputElement).value)
       }
     }
 
-    const onChange = (event: InputEvent) => {
+    const onChange = (event: Event) => {
       const value = (event.target as HTMLInputElement).value
 
       if (modelModifiers.value.lazy) {
@@ -279,7 +279,7 @@ export default defineComponent({
     const leadingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
+        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
         ui.value.icon.size[size.value],
         props.loading && 'animate-spin'
       )
@@ -296,7 +296,7 @@ export default defineComponent({
     const trailingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
+        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
         ui.value.icon.size[size.value],
         props.loading && !isLeading.value && 'animate-spin'
       )

src/runtime/components/forms/Radio.vue

@@ -90,11 +90,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   emits: ['update:modelValue', 'change'],
@@ -102,7 +102,7 @@ export default defineComponent({
     const { ui, attrs } = useUI('radio', toRef(props, 'ui'), config, toRef(props, 'class'))
 
     const radioGroup = inject('radio-group', null)
-    const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config) 
+    const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config)
     const inputId = ref(props.id)
 
     onMounted(() => {
@@ -130,8 +130,8 @@ export default defineComponent({
         ui.value.base,
         ui.value.background,
         ui.value.border,
-        ui.value.ring.replaceAll('{color}', color.value),
+        color.value && ui.value.ring.replaceAll('{color}', color.value),
-        ui.value.color.replaceAll('{color}', color.value)
+        color.value && ui.value.color.replaceAll('{color}', color.value)
       ), props.inputClass)
     })
 

src/runtime/components/forms/RadioGroup.vue

@@ -83,15 +83,15 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     },
     uiRadio: {
       type: Object as PropType<Partial<typeof configRadio & { strategy?: Strategy }>>,
-      default: undefined
+      default: () => ({})
     }
   },
   emits: ['update:modelValue', 'change'],

src/runtime/components/forms/Range.vue

@@ -85,11 +85,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   emits: ['update:modelValue', 'change'],
@@ -124,7 +124,7 @@ export default defineComponent({
         ui.value.base,
         ui.value.background,
         ui.value.rounded,
-        ui.value.ring.replaceAll('{color}', color.value),
+        color.value && ui.value.ring.replaceAll('{color}', color.value),
         ui.value.size[size.value]
       ), props.inputClass)
     })
@@ -133,7 +133,7 @@ export default defineComponent({
       return twJoin(
         ui.value.thumb.base,
         // Intermediate class to allow thumb ring or background color (set to `current`) as it's impossible to safelist with arbitrary values
-        ui.value.thumb.color.replaceAll('{color}', color.value),
+        color.value && ui.value.thumb.color.replaceAll('{color}', color.value),
         ui.value.thumb.ring,
         ui.value.thumb.background,
         ui.value.thumb.size[size.value]
@@ -153,7 +153,7 @@ export default defineComponent({
       return twJoin(
         ui.value.progress.base,
         ui.value.progress.rounded,
-        ui.value.progress.background.replaceAll('{color}', color.value),
+        color.value && ui.value.progress.background.replaceAll('{color}', color.value),
         ui.value.progress.size[size.value]
       )
     })

src/runtime/components/forms/Select.vue

@@ -173,11 +173,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   emits: ['update:modelValue', 'change'],
@@ -190,7 +190,7 @@ export default defineComponent({
 
     const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value)
 
-    const onInput = (event: InputEvent) => {
+    const onInput = (event: Event) => {
       emit('update:modelValue', (event.target as HTMLInputElement).value)
     }
 
@@ -300,7 +300,7 @@ export default defineComponent({
     const leadingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
+        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
         ui.value.icon.size[size.value],
         props.loading && 'animate-spin'
       )
@@ -317,7 +317,7 @@ export default defineComponent({
     const trailingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
+        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
         ui.value.icon.size[size.value],
         props.loading && !isLeading.value && 'animate-spin'
       )

src/runtime/components/forms/SelectMenu.vue

@@ -38,7 +38,7 @@
           <slot name="label">
             <span v-if="multiple && Array.isArray(modelValue) && modelValue.length" class="block truncate">{{ modelValue.length }} selected</span>
             <span v-else-if="!multiple && modelValue" class="block truncate">{{ ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute] }}</span>
-            <span v-else class="block truncate" :class="uiMenu.placeholder">{{ placeholder || '&nbsp;' }}</span>
+            <span v-else class="block truncate">{{ placeholder || '&nbsp;' }}</span>
           </slot>
 
           <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
@@ -54,7 +54,7 @@
       <Transition appear v-bind="uiMenu.transition">
         <div>
           <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(uiMenu.arrow)]" />
-          <component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[uiMenu.base, uiMenu.divide, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
+          <component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[uiMenu.base, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
             <HComboboxInput
               v-if="searchable"
               ref="searchInput"
@@ -305,15 +305,15 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     },
     uiMenu: {
       type: Object as PropType<Partial<typeof configMenu & { strategy?: Strategy }>>,
-      default: undefined
+      default: () => ({})
     }
   },
   emits: ['update:modelValue', 'open', 'close', 'change'],
@@ -386,7 +386,7 @@ export default defineComponent({
     const leadingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
+        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
         ui.value.icon.size[size.value],
         props.loading && 'animate-spin'
       )
@@ -403,7 +403,7 @@ export default defineComponent({
     const trailingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
+        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
         ui.value.icon.size[size.value],
         props.loading && !isLeading.value && 'animate-spin'
       )

src/runtime/components/forms/Textarea.vue

@@ -117,11 +117,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     },
     modelModifiers: {
       type: Object as PropType<{ trim?: boolean, lazy?: boolean, number?: boolean }>,
@@ -180,14 +180,14 @@ export default defineComponent({
       emitFormInput()
     }
 
-    const onInput = (event: InputEvent) => {
+    const onInput = (event: Event) => {
       autoResize()
       if (!modelModifiers.value.lazy) {
         updateInput((event.target as HTMLInputElement).value)
       }
     }
 
-    const onChange = (event: InputEvent) => {
+    const onChange = (event: Event) => {
       const value = (event.target as HTMLInputElement).value
 
       if (modelModifiers.value.lazy) {

src/runtime/components/forms/Toggle.vue

@@ -73,10 +73,6 @@ export default defineComponent({
         return appConfig.ui.colors.includes(value)
       }
     },
-    class: {
-      type: [String, Object, Array] as PropType<any>,
-      default: undefined
-    },
     size: {
       type: String as PropType<ToggleSize>,
       default: config.default.size,
@@ -84,9 +80,13 @@ export default defineComponent({
         return Object.keys(config.size).includes(value)
       }
     },
+    class: {
+      type: [String, Object, Array] as PropType<any>,
+      default: () => ''
+    },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   emits: ['update:modelValue'],
@@ -110,8 +110,8 @@ export default defineComponent({
         ui.value.base,
         ui.value.size[props.size],
         ui.value.rounded,
-        ui.value.ring.replaceAll('{color}', color.value),
+        color.value && ui.value.ring.replaceAll('{color}', color.value),
-        (active.value ? ui.value.active : ui.value.inactive).replaceAll('{color}', color.value)
+        color.value && (active.value ? ui.value.active : ui.value.inactive).replaceAll('{color}', color.value)
       ), props.class)
     })
 
@@ -126,14 +126,14 @@ export default defineComponent({
     const onIconClass = computed(() => {
       return twJoin(
         ui.value.icon.size[props.size],
-        ui.value.icon.on.replaceAll('{color}', color.value)
+        color.value && ui.value.icon.on.replaceAll('{color}', color.value)
       )
     })
 
     const offIconClass = computed(() => {
       return twJoin(
         ui.value.icon.size[props.size],
-        ui.value.icon.off.replaceAll('{color}', color.value)
+        color.value && ui.value.icon.off.replaceAll('{color}', color.value)
       )
     })
 

src/runtime/components/layout/Card.vue

@@ -38,11 +38,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props) {

src/runtime/components/layout/Container.vue

@@ -26,11 +26,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props) {

src/runtime/components/layout/Divider.vue

@@ -64,11 +64,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props) {

src/runtime/components/layout/Skeleton.vue

@@ -20,11 +20,11 @@ export default defineComponent({
   props: {
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props) {

src/runtime/components/navigation/Breadcrumb.vue

@@ -63,11 +63,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props) {

src/runtime/components/navigation/CommandPalette.vue

@@ -21,7 +21,7 @@
         @change="query = $event.target.value"
       />
 
-      <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" :class="ui.input.closeButton" @click="onClear" />
+      <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" :class="ui.input.closeButton" @click="onClear" />
     </div>
 
     <HComboboxOptions
@@ -135,7 +135,7 @@ export default defineComponent({
     },
     closeButton: {
       type: Object as PropType<Button>,
-      default: () => config.default.closeButton as Button
+      default: () => config.default.closeButton as unknown as Button
     },
     emptyState: {
       type: Object as PropType<{ icon: string, label: string, queryLabel: string }>,
@@ -171,11 +171,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   emits: ['update:modelValue', 'close'],
@@ -217,7 +217,7 @@ export default defineComponent({
       const commands: Command[] = []
       for (const group of props.groups) {
         if (!group.search) {
-          commands.push(...group.commands.map(command => ({ ...command, group: group.key })))
+          commands.push(...(group.commands?.map(command => ({ ...command, group: group.key })) || []))
         }
       }
       return commands
@@ -232,11 +232,17 @@ export default defineComponent({
 
       const groupedCommands: Record<string, typeof results['value']> = {}
       for (const command of results.value) {
+        if (!command.item.group) {
+          continue
+        }
         groupedCommands[command.item.group] ||= []
         groupedCommands[command.item.group].push(command)
       }
       for (const key in groupedCommands) {
         const group = props.groups.find(group => group.key === key)
+        if (!group) {
+          continue
+        }
 
         let commands = groupedCommands[key].map((result) => {
           const { item, ...data } = result
@@ -278,6 +284,7 @@ export default defineComponent({
       isLoading.value = true
 
       await Promise.all(searchableGroups.map(async (group) => {
+        // @ts-ignore
         searchResults.value[group.key] = await group.search(query.value)
       }))
 

src/runtime/components/navigation/Pagination.vue

@@ -6,7 +6,7 @@
         :size="size"
         :disabled="!canGoFirstOrPrev"
         :class="[ui.base, ui.rounded]"
-        v-bind="{ ...ui.default.firstButton, ...firstButton }"
+        v-bind="{ ...(ui.default.firstButton || {}), ...firstButton }"
         :ui="{ rounded: '' }"
         aria-label="First"
         @click="onClickFirst"
@@ -19,7 +19,7 @@
         :size="size"
         :disabled="!canGoFirstOrPrev"
         :class="[ui.base, ui.rounded]"
-        v-bind="{ ...ui.default.prevButton, ...prevButton }"
+        v-bind="{ ...(ui.default.prevButton || {}), ...prevButton }"
         :ui="{ rounded: '' }"
         aria-label="Prev"
         @click="onClickPrev"
@@ -31,7 +31,7 @@
       :key="`${page}-${index}`"
       :size="size"
       :label="`${page}`"
-      v-bind="page === currentPage ? { ...ui.default.activeButton, ...activeButton } : { ...ui.default.inactiveButton, ...inactiveButton }"
+      v-bind="page === currentPage ? { ...(ui.default.activeButton || {}), ...activeButton } : { ...(ui.default.inactiveButton || {}), ...inactiveButton }"
       :class="[{ 'pointer-events-none': typeof page === 'string', 'z-[1]': page === currentPage }, ui.base, ui.rounded]"
       :ui="{ rounded: '' }"
       @click="() => onClickPage(page)"
@@ -43,7 +43,7 @@
         :size="size"
         :disabled="!canGoLastOrNext"
         :class="[ui.base, ui.rounded]"
-        v-bind="{ ...ui.default.nextButton, ...nextButton }"
+        v-bind="{ ...(ui.default.nextButton || {}), ...nextButton }"
         :ui="{ rounded: '' }"
         aria-label="Next"
         @click="onClickNext"
@@ -56,7 +56,7 @@
         :size="size"
         :disabled="!canGoLastOrNext"
         :class="[ui.base, ui.rounded]"
-        v-bind="{ ...ui.default.lastButton, ...lastButton }"
+        v-bind="{ ...(ui.default.lastButton || {}), ...lastButton }"
         :ui="{ rounded: '' }"
         aria-label="Last"
         @click="onClickLast"
@@ -150,11 +150,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   emits: ['update:modelValue'],

src/runtime/components/navigation/Tabs.vue

@@ -91,11 +91,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   emits: ['update:modelValue', 'change'],
@@ -106,33 +106,37 @@ export default defineComponent({
     const itemRefs = ref<HTMLElement[]>([])
     const markerRef = ref<HTMLElement>()
 
-    const selectedIndex = ref(props.modelValue || props.defaultIndex)
+    const selectedIndex = ref<number | undefined>(props.modelValue || props.defaultIndex)
 
     // Methods
 
-    function calcMarkerSize (index: number) {
+    function calcMarkerSize (index: number | undefined) {
       // @ts-ignore
       const tab = itemRefs.value[index]?.$el
       if (!tab) {
         return
       }
 
+      if (!markerRef.value) {
+        return
+      }
+
       markerRef.value.style.top = `${tab.offsetTop}px`
       markerRef.value.style.left = `${tab.offsetLeft}px`
       markerRef.value.style.width = `${tab.offsetWidth}px`
       markerRef.value.style.height = `${tab.offsetHeight}px`
     }
 
-    function onChange (index) {
+    function onChange (index: number) {
       selectedIndex.value = index
 
       emit('change', index)
 
       if (props.modelValue !== undefined) {
-        emit('update:modelValue', index)
+        emit('update:modelValue', selectedIndex.value)
       }
 
-      calcMarkerSize(index)
+      calcMarkerSize(selectedIndex.value)
     }
 
     useResizeObserver(listRef, () => {
@@ -141,7 +145,8 @@ export default defineComponent({
 
     watch(() => props.modelValue, (value) => {
       selectedIndex.value = value
-      calcMarkerSize(value)
+
+      calcMarkerSize(selectedIndex.value)
     })
 
     onMounted(() => calcMarkerSize(selectedIndex.value))

src/runtime/components/navigation/VerticalNavigation.vue

@@ -66,11 +66,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props) {

src/runtime/components/overlays/ContextMenu.vue

@@ -45,11 +45,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   emits: ['update:modelValue', 'close'],

src/runtime/components/overlays/Modal.vue

@@ -77,11 +77,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   emits: ['update:modelValue', 'close'],

src/runtime/components/overlays/Notification.vue

@@ -25,15 +25,15 @@
             </p>
 
             <div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
-              <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
+              <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
             </div>
           </div>
           <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
             <template v-if="!description && !$slots.description && actions.length">
-              <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
+              <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
             </template>
 
-            <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="onClose" />
+            <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="onClose" />
           </div>
         </div>
         <div v-if="timeout" :class="progressClass" :style="progressStyle" />
@@ -112,11 +112,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   emits: ['close'],

src/runtime/components/overlays/Notifications.vue

@@ -43,11 +43,11 @@ export default defineComponent({
   props: {
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props) {

src/runtime/components/overlays/Popover.vue

@@ -86,11 +86,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   emits: ['update:open'],

src/runtime/components/overlays/Slideover.vue

@@ -63,11 +63,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   emits: ['update:modelValue', 'close'],

src/runtime/components/overlays/Tooltip.vue

@@ -13,7 +13,7 @@
             <slot name="text">
               {{ text }}
             </slot>
-  
+
             <span v-if="shortcuts?.length" :class="ui.shortcuts">
               <span class="mx-1 text-gray-700 dark:text-gray-200">&middot;</span>
               <UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
@@ -74,11 +74,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
-      default: undefined
+      default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-      default: undefined
+      default: () => ({})
     }
   },
   setup (props) {

src/runtime/composables/defineShortcuts.ts

@@ -40,7 +40,7 @@ export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptio
 
   let shortcuts: Shortcut[] = []
 
-  const chainedInputs = ref([])
+  const chainedInputs = ref<string[]>([])
   const clearChainedInput = () => {
     chainedInputs.value.splice(0, chainedInputs.value.length)
   }

src/runtime/composables/useFormGroup.ts

@@ -4,7 +4,7 @@ import type { FormEvent, FormEventType, InjectedFormGroupValue } from '../types/
 import { uid } from '../utils/uid'
 
 type InputProps = {
-  id?: string | null
+  id?: string
   size?: string | number | symbol
   color?: string
   name?: string
@@ -20,7 +20,7 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
     const inputId = ref(inputProps?.id)
 
     onMounted(() => {
-      inputId.value = inputProps?.isFieldset ? null : inputProps?.id ?? uid()
+      inputId.value = inputProps?.isFieldset ? undefined : inputProps?.id ?? uid()
 
       if (formGroup) {
         // Updates for="..." attribute on label if inputProps.id is provided
@@ -41,17 +41,17 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
     }
 
     function emitFormBlur () {
-      emitFormEvent('blur', formGroup?.name.value)
+      emitFormEvent('blur', formGroup?.name.value as string)
       blurred.value = true
     }
 
     function emitFormChange () {
-      emitFormEvent('change', formGroup?.name.value)
+      emitFormEvent('change', formGroup?.name.value as string)
     }
 
     const emitFormInput = useDebounceFn(() => {
       if (blurred.value || formGroup?.eagerValidation.value) {
-        emitFormEvent('input', formGroup?.name.value)
+        emitFormEvent('input', formGroup?.name.value as string)
       }
     }, 300)
 
@@ -59,7 +59,7 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
       inputId,
       name: computed(() => inputProps?.name ?? formGroup?.name.value),
       size: computed(() => {
-        const formGroupSize = config.size[formGroup?.size.value] ? formGroup?.size.value : null
+        const formGroupSize = config.size[formGroup?.size.value as string] ? formGroup?.size.value : null
         return inputProps?.size ?? formGroupSize ?? config?.default?.size
       }),
       color: computed(() => formGroup?.error?.value ? 'red' : inputProps?.color),

src/runtime/composables/useUI.ts

@@ -4,7 +4,7 @@ import { useAppConfig } from '#imports'
 import { mergeConfig, omit, get } from '../utils'
 import type { Strategy } from '../types'
 
-export const useUI = <T>(key, $ui?: Ref<Partial<T & { strategy?: Strategy }> | undefined>, $config?: Ref<T> | T, $wrapperClass?: Ref<string>, withAppConfig: boolean = false) => {
+export const useUI = <T>(key, $ui?: Ref<Partial<T> & { strategy?: Strategy }>, $config?: Ref<T> | T, $wrapperClass?: Ref<string>, withAppConfig: boolean = false) => {
   const $attrs = useAttrs()
   const appConfig = useAppConfig()
 

src/runtime/types/breadcrumb.d.ts

@@ -4,4 +4,6 @@ export interface BreadcrumbLink extends Link {
   label: string
   icon?: string
   iconClass?: string
+  // FIXME: This is a workaround for `link.to` not being resolved although it extends `NuxtLinkProps`
+  [key: string]: any
 }

src/runtime/types/form.d.ts

@@ -31,6 +31,6 @@ export interface InjectedFormGroupValue {
   inputId: Ref<string | undefined>
   name: Ref<string>
   size: Ref<string | number | symbol>
-  error: Ref<string | boolean>
+  error: Ref<string | boolean | undefined>
   eagerValidation: Ref<boolean>
 }

src/runtime/ui.config/data/table.ts

@@ -43,8 +43,8 @@ export default {
       icon: 'i-heroicons-arrows-up-down-20-solid',
       trailing: true,
       square: true,
-      color: 'gray',
+      color: 'gray' as const,
-      variant: 'ghost',
+      variant: 'ghost' as const,
       class: '-m-1.5'
     },
     loadingState: {
@@ -56,4 +56,4 @@ export default {
       label: 'No items.'
     }
   }
-}
+}

src/runtime/ui.config/elements/accordion.ts

@@ -15,6 +15,6 @@ export default {
     openIcon: 'i-heroicons-chevron-down-20-solid',
     closeIcon: '',
     class: 'mb-1.5 w-full',
-    variant: 'soft'
+    variant: 'soft' as const
   }
-}
+}

src/runtime/ui.config/elements/alert.ts

@@ -12,7 +12,7 @@ export default {
   },
   avatar: {
     base: 'flex-shrink-0 self-center',
-    size: 'md'
+    size: 'md' as const
   },
   color: {
     white: {
@@ -31,9 +31,9 @@ export default {
     icon: null,
     closeButton: null,
     actionButton: {
-      size: 'xs',
+      size: 'xs' as const,
-      color: 'primary',
+      color: 'primary' as const,
-      variant: 'link'
+      variant: 'link' as const
     }
   }
-}
+}

src/runtime/ui.config/elements/dropdown.ts

@@ -27,7 +27,7 @@ export default {
     },
     avatar: {
       base: 'flex-shrink-0',
-      size: '3xs'
+      size: '3xs' as const
     },
     shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5 ms-auto'
   },
@@ -49,4 +49,4 @@ export default {
     ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-700',
     background: 'before:bg-white dark:before:bg-gray-700'
   }
-}
+}

src/runtime/ui.config/forms/selectMenu.ts

@@ -35,7 +35,7 @@ export default {
     },
     avatar: {
       base: 'flex-shrink-0',
-      size: '3xs'
+      size: '3xs' as const
     },
     chip: {
       base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'
@@ -59,4 +59,4 @@ export default {
     ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-700',
     background: 'before:bg-white dark:before:bg-gray-700'
   }
-}
+}

src/runtime/ui.config/layout/divider.ts

@@ -23,7 +23,7 @@ export default {
   },
   avatar: {
     base: 'flex-shrink-0',
-    size: '2xs'
+    size: '2xs' as const
   },
   label: 'text-sm'
-}
+}

src/runtime/ui.config/navigation/commandPalette.ts

@@ -64,4 +64,4 @@ export default {
     closeButton: null,
     selectedIcon: 'i-heroicons-check-20-solid'
   }
-}
+}

src/runtime/ui.config/navigation/pagination.ts

@@ -5,30 +5,30 @@ export default {
   default: {
     size: 'sm',
     activeButton: {
-      color: 'primary'
+      color: 'primary' as const
     },
     inactiveButton: {
-      color: 'white'
+      color: 'white' as const
     },
     firstButton: {
-      color: 'white',
+      color: 'white' as const,
       class: 'rtl:[&_span:first-child]:rotate-180',
       icon: 'i-heroicons-chevron-double-left-20-solid'
     },
     lastButton: {
-      color: 'white',
+      color: 'white' as const,
       class: 'rtl:[&_span:last-child]:rotate-180',
       icon: 'i-heroicons-chevron-double-right-20-solid'
     },
     prevButton: {
-      color: 'white',
+      color: 'white' as const,
       class: 'rtl:[&_span:first-child]:rotate-180',
       icon: 'i-heroicons-chevron-left-20-solid'
     },
     nextButton: {
-      color: 'white',
+      color: 'white' as const,
       class: 'rtl:[&_span:last-child]:rotate-180',
       icon: 'i-heroicons-chevron-right-20-solid'
     }
   }
-}
+}

src/runtime/ui.config/navigation/verticalNavigation.ts

@@ -17,11 +17,11 @@ export default {
   },
   avatar: {
     base: 'flex-shrink-0',
-    size: '3xs'
+    size: '3xs' as const
   },
   badge: {
     base: 'relative ms-auto inline-block py-0.5 px-2 text-xs rounded-md -me-1 -my-0.5',
     active: 'bg-white dark:bg-gray-900',
     inactive: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white group-hover:bg-white dark:group-hover:bg-gray-900'
   }
-}
+}

src/runtime/ui.config/overlays/notification.ts

@@ -37,13 +37,13 @@ export default {
     timeout: 5000,
     closeButton: {
       icon: 'i-heroicons-x-mark-20-solid',
-      color: 'gray',
+      color: 'gray' as const,
-      variant: 'link',
+      variant: 'link' as const,
       padded: false
     },
     actionButton: {
-      size: 'xs',
+      size: 'xs' as const,
-      color: 'white'
+      color: 'white' as const
     }
   }
-}
+}

test/basic.spec.ts

@@ -5,13 +5,13 @@ import { join } from 'path'
 
 // TODO: fix these anys
 async function getTailwindCSSConfig (overrides: any = {}): Promise<[any, any]> {
-  overrides.modules = [ module ]
+  overrides.modules = [module]
   overrides.ssr = overrides.ssr ?? false
   overrides.hooks = overrides.hooks ?? {}
   return new Promise((resolve) => {
-    overrides.hooks['tailwindcss:resolvedConfig'] = async (config) => {
+    overrides.hooks['tailwindcss:resolvedConfig'] = async (config: any) => {
-        resolve([config, nuxt])
+      resolve([config, nuxt])
-      }
+    }
     const nuxt = loadNuxt({
       cwd: join(process.cwd(), 'fixtures', 'empty'),
       dev: false,
@@ -23,7 +23,7 @@ async function getTailwindCSSConfig (overrides: any = {}): Promise<[any, any]> {
 describe('nuxt', () => {
   it('should add plugins and modules to nuxt', async () => {
     const [, lnuxt] = await getTailwindCSSConfig()
-    await lnuxt.then((nuxt) => {
+    await lnuxt.then((nuxt: { options: { plugins: any; _requiredModules: any; appConfig: { ui: any } }; close: () => void }) => {
       expect(nuxt.options.plugins).toContainEqual(
         expect.objectContaining({
           src: expect.stringContaining('plugins/colors'),
@@ -116,7 +116,7 @@ describe('tailwindcss config', () => {
       negate = false
     }
 
-    await _nuxt.then((n) => {
+    await _nuxt.then((n: { close: () => void }) => {
       n.close()
     })
   })

test/components/elements/Button.spec.ts

@@ -13,6 +13,7 @@ describe('Button', () => {
     [ 'black solid', { props: { color: 'black', variant: 'solid' } } ],
     [ 'rounded full', { props: { ui: { rounded: 'rounded-full' } } } ],
     [ '<UButton icon="i-heroicons-pencil-square" size="sm" color="primary" square variant="solid" />' ]
+    // @ts-ignore
   ])('renders %s correctly', async (nameOrHtml: string, options: ButtonOptions) => {
     if (options !== undefined) {
       options.slots = options.slots || { default: () => 'label' }

test/components/layout/Skeleton.spec.ts

@@ -7,6 +7,7 @@ describe('Skeleton', () => {
   it.each([
     [ 'basic case', { } ],
     [ '<USkeleton class="h-12 w-12" :ui="{ rounded: \'rounded-full\' }" />' ]
+    // @ts-ignore
   ])('renders %s correctly', async (nameOrHtml: string, options: TypeOf<typeof Skeleton.props>) => {
     const html = await ComponentRender(nameOrHtml, options, Skeleton)
     expect(html).toMatchSnapshot()

test/nuxt/nuxt.config.ts

@@ -1,7 +1,5 @@
-import module from '../../src/module'
-
 export default defineNuxtConfig({
   modules: [
-    module
+    '../../src/module'
   ]
 })

test/nuxt/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  // "extends": "./.nuxt/tsconfig.json"
-}

tsconfig.json

@@ -1,4 +1,8 @@
 {
   "extends": "./.nuxt/tsconfig.json",
-  "exclude": ["docs"]
+  "exclude": ["docs", "dist"],
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "strictNullChecks": false
+  }
 }

vitest.config.ts

@@ -6,6 +6,7 @@ export default defineVitestConfig({
   test: {
     testTimeout: 20000,
     globals: true,
+    silent: true,
     environment: 'nuxt',
     environmentOptions: {
       nuxt: {
@@ -13,4 +14,4 @@ export default defineVitestConfig({
       }
     }
   }
-})
+})