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

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 }>>,
-      default: undefined
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      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 }>>,
-      default: undefined
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      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 }>>,
-      default: undefined
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      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 }>>,
-      default: undefined
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      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 }>>,
-      default: undefined
+      type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+      default: () => ({})
     }
   },
   setup (props) {