From ba874c91914b029f5da2c3529b6818d6aacb839d Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Mon, 25 Nov 2024 15:47:52 +0100 Subject: [PATCH] docs(app): framework select global (#2719) Co-authored-by: harlan --- docs/app/app.vue | 59 +- docs/app/assets/icons/icones-js.svg | 10 + docs/app/components/FrameworkSelect.vue | 25 + docs/app/components/Header.vue | 2 + docs/app/components/content/ComponentCode.vue | 4 +- .../app/components/content/ComponentTheme.vue | 40 +- docs/app/components/content/FrameworkOnly.vue | 7 + docs/app/components/content/IconsTheme.vue | 32 +- docs/app/components/og-image/OgImageDocs.vue | 2 +- docs/app/composables/useSharedData.ts | 23 + docs/app/layouts/docs.vue | 4 + docs/app/pages/[...slug].vue | 37 +- docs/content.config.ts | 13 +- docs/content/1.getting-started/1.index.md | 2 +- .../2.installation/.navigation.yml | 1 + .../2.installation/1.nuxt.md | 15 +- .../1.getting-started/2.installation/2.vue.md | 19 +- docs/content/1.getting-started/3.theme.md | 122 +- .../1.getting-started/4.icons/.navigation.yml | 1 + .../{4.icons.md => 4.icons/1.nuxt.md} | 13 +- .../1.getting-started/4.icons/2.vue.md | 55 + docs/content/1.getting-started/5.fonts.md | 15 +- .../content/1.getting-started/6.color-mode.md | 27 - .../6.color-mode/.navigation.yml | 1 + .../1.getting-started/6.color-mode/1.nuxt.md | 58 + .../1.getting-started/6.color-mode/2.vue.md | 47 + .../1.getting-started/7.i18n/.navigation.yml | 1 + .../1.getting-started/7.i18n/1.nuxt.md | 17 +- .../content/1.getting-started/7.i18n/2.vue.md | 17 +- docs/content/3.components/0.app.md | 10 +- docs/content/3.components/accordion.md | 10 +- docs/content/3.components/alert.md | 10 +- docs/content/3.components/breadcrumb.md | 10 +- docs/content/3.components/button.md | 10 +- docs/content/3.components/carousel.md | 10 +- docs/content/3.components/checkbox.md | 20 +- docs/content/3.components/command-palette.md | 30 +- docs/content/3.components/icon.md | 18 +- docs/content/3.components/input-menu.md | 40 +- docs/content/3.components/input.md | 12 +- docs/content/3.components/modal.md | 10 +- docs/content/3.components/navigation-menu.md | 10 +- docs/content/3.components/select-menu.md | 30 +- docs/content/3.components/select.md | 32 +- docs/content/3.components/slideover.md | 10 +- docs/content/3.components/switch.md | 10 +- docs/content/3.components/toast.md | 10 +- docs/nuxt.config.ts | 11 + docs/package.json | 2 +- playground/app/app.vue | 2 - pnpm-lock.yaml | 1415 +++++++++++------ src/module.ts | 12 +- 52 files changed, 1757 insertions(+), 646 deletions(-) create mode 100644 docs/app/assets/icons/icones-js.svg create mode 100644 docs/app/components/FrameworkSelect.vue create mode 100644 docs/app/components/content/FrameworkOnly.vue create mode 100644 docs/app/composables/useSharedData.ts create mode 100644 docs/content/1.getting-started/2.installation/.navigation.yml create mode 100644 docs/content/1.getting-started/4.icons/.navigation.yml rename docs/content/1.getting-started/{4.icons.md => 4.icons/1.nuxt.md} (94%) create mode 100644 docs/content/1.getting-started/4.icons/2.vue.md delete mode 100644 docs/content/1.getting-started/6.color-mode.md create mode 100644 docs/content/1.getting-started/6.color-mode/.navigation.yml create mode 100644 docs/content/1.getting-started/6.color-mode/1.nuxt.md create mode 100644 docs/content/1.getting-started/6.color-mode/2.vue.md 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] })