docs: types (#2186)

docs/app/components/content/ComponentCode.vue

@@ -32,7 +32,8 @@ const props = defineProps<{
 const route = useRoute()
 const { $prettier } = useNuxtApp()
 
-const camelName = camelCase(route.params.slug[route.params.slug.length - 1])
+const slug = Array.isArray(route.params.slug) ? route.params.slug[0] ?? '' : route.params.slug ?? ''
+const camelName = camelCase(slug[slug.length - 1] ?? '')
 const name = `U${upperFirst(camelName)}`
 
 const componentProps = reactive({ ...(props.props || {}) })
@@ -45,11 +46,11 @@ function setComponentProp(name: string, value: any) {
   set(componentProps, name, value)
 }
 
-const componentTheme = theme[camelName]
+const componentTheme = (theme as any)[camelName]
 const meta = await fetchComponentMeta(name as any)
 
-function mapKeys(obj, parentKey = '') {
-  return Object.entries(obj || {}).flatMap(([key, value]) => {
+function mapKeys(obj: object, parentKey = ''): any {
+  return Object.entries(obj || {}).flatMap(([key, value]: [string, any]) => {
     if (typeof value === 'object' && !Array.isArray(value)) {
       return mapKeys(value, key)
     }
@@ -63,11 +64,11 @@ function mapKeys(obj, parentKey = '') {
 const options = computed(() => {
   const keys = mapKeys(props.props || {})
 
-  return keys.map((key) => {
+  return keys.map((key: string) => {
     const prop = meta?.meta?.props?.find((prop: any) => prop.name === key)
     const propItems = get(props.items, key, [])
     const items = propItems.length
-      ? propItems.map(item => ({
+      ? propItems.map((item: any) => ({
         value: item,
         label: item
       }))
@@ -253,7 +254,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${JSON.stringif
         <component :is="name" v-bind="componentProps" @update:model-value="!!componentProps.modelValue && setComponentProp('modelValue', $event)">
           <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
             <ContentSlot :name="slot" unwrap="p">
-              {{ slots[slot] }}
+              {{ slots?.[slot] }}
             </ContentSlot>
           </template>
         </component>

docs/app/components/content/ComponentEmits.vue

@@ -3,7 +3,8 @@ import { upperFirst, camelCase } from 'scule'
 
 const route = useRoute()
 
-const camelName = camelCase(route.params.slug[route.params.slug.length - 1])
+const slug = Array.isArray(route.params.slug) ? route.params.slug[0] ?? '' : route.params.slug ?? ''
+const camelName = camelCase(slug[slug.length - 1] ?? '')
 const name = `U${upperFirst(camelName)}`
 
 const meta = await fetchComponentMeta(name as any)

docs/app/components/content/ComponentProps.vue

@@ -9,10 +9,11 @@ const props = defineProps<{
 
 const route = useRoute()
 
-const camelName = camelCase(route.params.slug[route.params.slug.length - 1])
+const slug = Array.isArray(route.params.slug) ? route.params.slug[0] ?? '' : route.params.slug ?? ''
+const camelName = camelCase(slug[slug.length - 1] ?? '')
 const name = `U${upperFirst(camelName)}`
 
-const componentTheme = theme[camelName]
+const componentTheme = (theme as any)[camelName]
 const meta = await fetchComponentMeta(name as any)
 
 const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
@@ -43,6 +44,8 @@ const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
     if (b.name === 'ui') {
       return -1
     }
+
+    return 0
   })
 })
 </script>

docs/app/components/content/ComponentPropsSchema.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
   ignore?: string[]
 }>()
 
-function getSchemaProps(schema: PropertyMeta['schema']) {
+function getSchemaProps(schema: PropertyMeta['schema']): any {
   if (!schema || typeof schema === 'string' || !schema.schema) {
     return []
   }
@@ -15,12 +15,12 @@ function getSchemaProps(schema: PropertyMeta['schema']) {
     return Object.values(schema.schema).filter(prop => !props.ignore?.includes(prop.name))
   }
 
-  return (Array.isArray(schema.schema) ? schema.schema : Object.values(schema.schema)).flatMap(getSchemaProps)
+  return (Array.isArray(schema.schema) ? schema.schema : Object.values(schema.schema)).flatMap(getSchemaProps as any)
 }
 
 const schemaProps = computed(() => {
-  return getSchemaProps(props.prop.schema).map((prop) => {
-    const defaultValue = prop.default ?? prop.tags?.find(tag => tag.name === 'defaultValue')?.text
+  return getSchemaProps(props.prop.schema).map((prop: any) => {
+    const defaultValue = prop.default ?? prop.tags?.find((tag: any) => tag.name === 'defaultValue')?.text
     let description = prop.description
     if (defaultValue) {
       description = description ? `${description} Defaults to \`${defaultValue}\`{lang="ts-type"}.` : `Defaults to \`${defaultValue}\`{lang="ts-type"}.`

docs/app/components/content/ComponentSlots.vue

@@ -3,7 +3,8 @@ import { upperFirst, camelCase } from 'scule'
 
 const route = useRoute()
 
-const camelName = camelCase(route.params.slug[route.params.slug.length - 1])
+const slug = Array.isArray(route.params.slug) ? route.params.slug[0] ?? '' : route.params.slug ?? ''
+const camelName = camelCase(slug[slug.length - 1] ?? '')
 const name = `U${upperFirst(camelName)}`
 
 const meta = await fetchComponentMeta(name as any)

docs/app/components/content/ComponentTheme.vue

@@ -5,11 +5,12 @@ import * as theme from '#build/ui'
 
 const route = useRoute()
 
-const name = camelCase(route.params.slug[route.params.slug.length - 1])
+const slug = Array.isArray(route.params.slug) ? route.params.slug[0] ?? '' : route.params.slug ?? ''
+const name = camelCase(slug[slug.length - 1] ?? '')
 
 const strippedCompoundVariants = ref(false)
 
-function stripCompoundVariants(component) {
+function stripCompoundVariants(component: any) {
   if (component.compoundVariants) {
     component.compoundVariants = component.compoundVariants.filter((compoundVariant: any) => {
       if (compoundVariant.color) {
@@ -38,7 +39,7 @@ function stripCompoundVariants(component) {
 const component = computed(() => {
   return {
     ui: {
-      [name]: stripCompoundVariants(theme[name])
+      [name]: stripCompoundVariants((theme as any)[name])
     }
   }
 })

docs/app/components/content/examples/chip/ChipShowExample.vue

@@ -2,19 +2,16 @@
 const statuses = ['online', 'away', 'busy', 'offline']
 const status = ref(statuses[0])
 
-const color = computed(() => ({
-  online: 'green',
-  away: 'amber',
-  busy: 'red',
-  offline: 'gray'
-})[status.value] as any)
+const color = computed(() => status.value ? { online: 'green', away: 'amber', busy: 'red', offline: 'gray' }[status.value] as any : 'online')
 
 const show = computed(() => status.value !== 'offline')
 
 // Note: This is for demonstration purposes only. Don't do this at home.
 onMounted(() => {
   setInterval(() => {
-    status.value = statuses[(statuses.indexOf(status.value) + 1) % statuses.length]
+    if (status.value) {
+      status.value = statuses[(statuses.indexOf(status.value) + 1) % statuses.length]
+    }
   }, 1000)
 })
 </script>

docs/app/composables/fetchComponentExample.ts

@@ -1,4 +1,4 @@
-const useComponentExampleState = () => useState('component-example-state', () => ({}))
+const useComponentExampleState = () => useState<Record<string, any>>('component-example-state', () => ({}))
 
 export async function fetchComponentExample(name: string) {
   const state = useComponentExampleState()
@@ -14,9 +14,9 @@ export async function fetchComponentExample(name: string) {
   // Add to nitro prerender
   if (import.meta.server) {
     const event = useRequestEvent()
-    event.node.res.setHeader(
+    event?.node.res.setHeader(
       'x-nitro-prerender',
-      [event.node.res.getHeader('x-nitro-prerender'), `/api/component-example/${name}.json`].filter(Boolean).join(',')
+      [event?.node.res.getHeader('x-nitro-prerender'), `/api/component-example/${name}.json`].filter(Boolean).join(',')
     )
   }
 

docs/app/composables/fetchComponentMeta.ts

@@ -1,6 +1,6 @@
 import type { ComponentMeta } from 'vue-component-meta'
 
-const useComponentsMetaState = () => useState('component-meta-state', () => ({}))
+const useComponentsMetaState = () => useState<Record<string, any>>('component-meta-state', () => ({}))
 
 export async function fetchComponentMeta(name: string): Promise<{ meta: ComponentMeta }> {
   const state = useComponentsMetaState()
@@ -16,9 +16,9 @@ export async function fetchComponentMeta(name: string): Promise<{ meta: Componen
   // Add to nitro prerender
   if (import.meta.server) {
     const event = useRequestEvent()
-    event.node.res.setHeader(
+    event?.node.res.setHeader(
       'x-nitro-prerender',
-      [event.node.res.getHeader('x-nitro-prerender'), `/api/component-meta/${name}.json`].filter(Boolean).join(',')
+      [event?.node.res.getHeader('x-nitro-prerender'), `/api/component-meta/${name}.json`].filter(Boolean).join(',')
     )
   }
 

docs/app/layouts/docs.vue

@@ -3,7 +3,7 @@ import type { NavItem } from '@nuxt/content'
 
 const nav = inject<Ref<NavItem[]>>('navigation')
 
-const navigation = computed(() => nav.value.filter(item => !item._path.startsWith('/pro')))
+const navigation = computed(() => nav?.value.filter(item => !item._path.startsWith('/pro')))
 </script>
 
 <template>

docs/app/pages/[...slug].vue

@@ -86,7 +86,7 @@ defineOgImageComponent('Docs', {
 
       <USeparator />
 
-      <UContentSurround :surround="surround" />
+      <UContentSurround :surround="surround as any" />
     </UPageBody>
 
     <template v-if="page?.body?.toc?.links?.length" #right>

docs/app/pages/examples/[...slug].vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const route = useRoute()
 
-const name = route.params.slug[0]
+const name = route.params.slug?.[0]
 </script>
 
 <template>

docs/app/plugins/colors.ts

@@ -4,11 +4,14 @@ export default defineNuxtPlugin({
     const appConfig = useAppConfig()
 
     if (import.meta.client) {
-      if (window.localStorage.getItem('nuxt-ui-primary')) {
-        appConfig.ui.colors.primary = window.localStorage.getItem('nuxt-ui-primary')
+      const primary = window.localStorage.getItem('nuxt-ui-primary')
+      if (primary) {
+        appConfig.ui.colors.primary = primary
       }
-      if (window.localStorage.getItem('nuxt-ui-gray')) {
-        appConfig.ui.colors.gray = window.localStorage.getItem('nuxt-ui-gray')
+
+      const gray = window.localStorage.getItem('nuxt-ui-gray')
+      if (gray) {
+        appConfig.ui.colors.gray = gray
       }
     }
 

docs/app/plugins/prettier.ts

@@ -8,7 +8,7 @@ export interface SimplePrettier {
 
 function createPrettierWorkerApi(worker: Worker): SimplePrettier {
   let counter = 0
-  const handlers = {}
+  const handlers: any = {}
 
   worker.addEventListener('message', (event) => {
     const { uid, message, error } = event.data
@@ -28,7 +28,7 @@ function createPrettierWorkerApi(worker: Worker): SimplePrettier {
     }
   })
 
-  function postMessage<T>(message) {
+  function postMessage<T>(message: any) {
     const uid = ++counter
     return new Promise<T>((resolve, reject) => {
       handlers[uid] = [resolve, reject]

docs/modules/component-example.ts

@@ -72,7 +72,7 @@ export default defineNuxtModule({
         .reduce((acc, component) => {
           acc[component.pascalName] = component
           return acc
-        }, {})
+        }, {} as Record<string, any>)
       await stubOutput()
     })
 
@@ -94,10 +94,10 @@ export default defineNuxtModule({
           await fetchComponents()
           await updateOutput()
         },
-        configResolved(config) {
+        configResolved(config: any) {
           _configResolved = config
         },
-        async handleHotUpdate({ file }) {
+        async handleHotUpdate({ file }: { file: any }) {
           if (
             Object.entries(components).some(
               ([, comp]: any) => comp.filePath === file

docs/server/api/component-example.get.ts

@@ -5,7 +5,7 @@ import components from '#component-example/nitro'
 
 export default defineEventHandler((event) => {
   appendHeader(event, 'Access-Control-Allow-Origin', '*')
-  const componentName = (event.context.params['component?'] || '').replace(/\.json$/, '')
+  const componentName = (event.context.params?.['component?'] || '').replace(/\.json$/, '')
   if (componentName) {
     const component = components[pascalCase(componentName)]
     if (!component) {

docs/server/api/pulls.json.get.ts

@@ -1,6 +1,6 @@
 import { Octokit } from '@octokit/rest'
 
-function isUserABot(user) {
+function isUserABot(user: any) {
   return user?.login?.endsWith('-bot') || user?.login?.endsWith('[bot]')
 }
 

src/runtime/composables/useToast.ts

@@ -26,7 +26,7 @@ export function useToast() {
     return body
   }
 
-  function update(id: string | number, toast: Omit<Partial<Toast>, "id">) {
+  function update(id: string | number, toast: Omit<Partial<Toast>, 'id'>) {
     const index = toasts.value.findIndex((t: Toast) => t.id === id)
     if (index !== -1) {
       toasts.value[index] = {

src/runtime/utils/index.ts

@@ -19,7 +19,7 @@ export function omit<Data extends object, Keys extends keyof Data>(data: Data, k
   return result as Omit<Data, Keys>
 }
 
-export function get(object: Record<string, any>, path: (string | number)[] | string, defaultValue?: any): any {
+export function get(object: Record<string, any> | undefined, path: (string | number)[] | string, defaultValue?: any): any {
   if (typeof path === 'string') {
     path = path.split('.').map((key) => {
       const numKey = Number(key)