diff --git a/docs/app/app.vue b/docs/app/app.vue index c0bee02a..f01efebe 100644 --- a/docs/app/app.vue +++ b/docs/app/app.vue @@ -73,24 +73,41 @@ useServerSeoMeta({ twitterCard: 'summary_large_image' }) -const updatedNavigation = computed(() => navigation.value?.map(item => ({ - ...item, - children: item.children?.map((child: typeof item) => ({ - ...child, - ...(child.path === '/getting-started/installation' && { - title: 'Installation', - active: route.path.startsWith('/getting-started/installation'), - children: [] - }), - ...(child.path === '/getting-started/i18n' && { - title: 'I18n', - active: route.path.startsWith('/getting-started/i18n'), - children: [] - }) - })) || [] -}))) +const { framework, frameworks } = useSharedData() -provide('navigation', updatedNavigation) +const groups = computed(() => { + return [{ + id: 'framework', + label: 'Framework', + items: frameworks.value + }] +}) + +function filterFrameworkItems(items: any[]) { + return items?.filter(item => !item.framework || item.framework === framework.value) +} + +function processNavigationItem(item: any): any { + if (item.shadow) { + const matchingChild = filterFrameworkItems(item.children)?.[0] + return matchingChild + ? { + ...matchingChild, + title: item.title, + children: matchingChild.children ? processNavigationItem(matchingChild) : undefined + } + : item + } + + return { + ...item, + children: item.children?.length ? filterFrameworkItems(item.children)?.map(processNavigationItem) : undefined + } +} + +const filteredNavigation = computed(() => navigation.value?.map(processNavigationItem)) + +provide('navigation', filteredNavigation) diff --git a/docs/app/assets/icons/icones-js.svg b/docs/app/assets/icons/icones-js.svg new file mode 100644 index 00000000..b7ac2dfc --- /dev/null +++ b/docs/app/assets/icons/icones-js.svg @@ -0,0 +1,10 @@ + + + + + + + diff --git a/docs/app/components/FrameworkSelect.vue b/docs/app/components/FrameworkSelect.vue new file mode 100644 index 00000000..9b9c98f4 --- /dev/null +++ b/docs/app/components/FrameworkSelect.vue @@ -0,0 +1,25 @@ + + + diff --git a/docs/app/components/Header.vue b/docs/app/components/Header.vue index 4c607ce6..254355d3 100644 --- a/docs/app/components/Header.vue +++ b/docs/app/components/Header.vue @@ -55,6 +55,8 @@ defineShortcuts({ + + diff --git a/docs/app/components/content/ComponentCode.vue b/docs/app/components/content/ComponentCode.vue index 06aa6284..c92ab9db 100644 --- a/docs/app/components/content/ComponentCode.vue +++ b/docs/app/components/content/ComponentCode.vue @@ -272,9 +272,9 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
diff --git a/docs/app/components/content/ComponentTheme.vue b/docs/app/components/content/ComponentTheme.vue index a20057b2..cef0d26e 100644 --- a/docs/app/components/content/ComponentTheme.vue +++ b/docs/app/components/content/ComponentTheme.vue @@ -4,14 +4,19 @@ import { camelCase } from 'scule' import * as theme from '#build/ui' const route = useRoute() +const { framework } = useSharedData() const name = camelCase(route.params.slug?.[route.params.slug.length - 1] ?? '') const strippedCompoundVariants = ref(false) -function stripCompoundVariants(component?: any) { - if (component?.compoundVariants) { - component.compoundVariants = component.compoundVariants.filter((compoundVariant: any) => { +const strippedTheme = computed(() => { + const strippedTheme = { + ...(theme as any)[name] + } + + if (strippedTheme?.compoundVariants) { + strippedTheme.compoundVariants = strippedTheme.compoundVariants.filter((compoundVariant: any) => { if (compoundVariant.color) { if (!['primary', 'neutral'].includes(compoundVariant.color)) { strippedCompoundVariants.value = true @@ -40,24 +45,43 @@ function stripCompoundVariants(component?: any) { }) } - return component -} + return strippedTheme +}) const component = computed(() => { return { ui: { - [name]: stripCompoundVariants((theme as any)[name]) + [name]: strippedTheme.value } } }) -const { data: ast } = await useAsyncData(`component-theme-${name}`, async () => { +const { data: ast } = await useAsyncData(`component-theme-${name}-${framework.value}`, async () => { const md = ` ::code-collapse +${framework.value === 'nuxt' + ? ` \`\`\`ts [app.config.ts] export default defineAppConfig(${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')}) \`\`\`\ +` + : ` +\`\`\`ts [vite.config.ts] +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import ui from '@nuxt/ui/vite' +export default defineConfig({ + plugins: [ + vue(), + ui(${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1') + .split('\n') + .map((line, i) => i === 0 ? line : ` ${line}`) + .join('\n')}) + ] +}) +\`\`\` +`} :: ${strippedCompoundVariants.value @@ -69,7 +93,7 @@ Some colors in \`compoundVariants\` are omitted for readability. Check out the s ` return parseMarkdown(md) -}) +}, { watch: [framework] })