diff --git a/docs/app/components/content/ComponentCode.vue b/docs/app/components/content/ComponentCode.vue index 15bf9351..872d9633 100644 --- a/docs/app/components/content/ComponentCode.vue +++ b/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 diff --git a/docs/app/components/content/ComponentEmits.vue b/docs/app/components/content/ComponentEmits.vue index bb3ee368..68aba593 100644 --- a/docs/app/components/content/ComponentEmits.vue +++ b/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) diff --git a/docs/app/components/content/ComponentProps.vue b/docs/app/components/content/ComponentProps.vue index 2391dfc2..ca7040d5 100644 --- a/docs/app/components/content/ComponentProps.vue +++ b/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 = computed(() => { @@ -43,6 +44,8 @@ const metaProps: ComputedRef = computed(() => { if (b.name === 'ui') { return -1 } + + return 0 }) }) diff --git a/docs/app/components/content/ComponentPropsSchema.vue b/docs/app/components/content/ComponentPropsSchema.vue index 20ca0305..cab3af92 100644 --- a/docs/app/components/content/ComponentPropsSchema.vue +++ b/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"}.` diff --git a/docs/app/components/content/ComponentSlots.vue b/docs/app/components/content/ComponentSlots.vue index c87987f3..a0e18ecb 100644 --- a/docs/app/components/content/ComponentSlots.vue +++ b/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) diff --git a/docs/app/components/content/ComponentTheme.vue b/docs/app/components/content/ComponentTheme.vue index 0a38faa0..60376b3d 100644 --- a/docs/app/components/content/ComponentTheme.vue +++ b/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]) } } }) diff --git a/docs/app/components/content/examples/chip/ChipShowExample.vue b/docs/app/components/content/examples/chip/ChipShowExample.vue index 5ef895f5..c7301d74 100644 --- a/docs/app/components/content/examples/chip/ChipShowExample.vue +++ b/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) }) diff --git a/docs/app/composables/fetchComponentExample.ts b/docs/app/composables/fetchComponentExample.ts index 8508786d..10a92832 100644 --- a/docs/app/composables/fetchComponentExample.ts +++ b/docs/app/composables/fetchComponentExample.ts @@ -1,4 +1,4 @@ -const useComponentExampleState = () => useState('component-example-state', () => ({})) +const useComponentExampleState = () => useState>('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(',') ) } diff --git a/docs/app/composables/fetchComponentMeta.ts b/docs/app/composables/fetchComponentMeta.ts index 11d3afd2..79affb87 100644 --- a/docs/app/composables/fetchComponentMeta.ts +++ b/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>('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(',') ) } diff --git a/docs/app/layouts/docs.vue b/docs/app/layouts/docs.vue index 4fd3ca99..9a465456 100644 --- a/docs/app/layouts/docs.vue +++ b/docs/app/layouts/docs.vue @@ -3,7 +3,7 @@ import type { NavItem } from '@nuxt/content' const nav = inject>('navigation') -const navigation = computed(() => nav.value.filter(item => !item._path.startsWith('/pro'))) +const navigation = computed(() => nav?.value.filter(item => !item._path.startsWith('/pro')))