From 82e59e763deda3c5acc40622e24d107d64541f87 Mon Sep 17 00:00:00 2001 From: Yuxuan Zhang Date: Mon, 31 Mar 2025 13:19:25 -0400 Subject: [PATCH 01/12] feat(config, theme): add clientOnly marker --- src/client/app/components/ClientOnly.ts | 13 +- .../theme-default/components/VPNavBarMenu.vue | 39 ++--- .../theme-default/components/VPSidebar.vue | 22 +-- .../components/VPSidebarGroup.vue | 5 +- .../components/VPSidebarItem.vue | 133 ++++++++---------- .../theme-default/composables/sidebar.ts | 3 +- src/node/config.ts | 1 + src/shared/shared.ts | 11 ++ 8 files changed, 114 insertions(+), 113 deletions(-) diff --git a/src/client/app/components/ClientOnly.ts b/src/client/app/components/ClientOnly.ts index 680094ce5807..5d54d4ea98ee 100644 --- a/src/client/app/components/ClientOnly.ts +++ b/src/client/app/components/ClientOnly.ts @@ -1,7 +1,18 @@ import { defineComponent, onMounted, ref } from 'vue' export const ClientOnly = defineComponent({ - setup(_, { slots }) { + props: { + isClientOnly: { + type: Boolean, + default: true + } + }, + setup({ isClientOnly }, { slots }) { + if (isClientOnly) console.log({ isClientOnly, slots }) + // Programmatically determine if this component should be + // client-only based on the presence of the isClientOnly attribute. + if (!isClientOnly) return () => slots.default?.() || null + const show = ref(false) onMounted(() => { diff --git a/src/client/theme-default/components/VPNavBarMenu.vue b/src/client/theme-default/components/VPNavBarMenu.vue index 3f8fd8aefc8e..7c7fed86bbd5 100644 --- a/src/client/theme-default/components/VPNavBarMenu.vue +++ b/src/client/theme-default/components/VPNavBarMenu.vue @@ -2,29 +2,32 @@ import { useData } from '../composables/data' import VPNavBarMenuLink from './VPNavBarMenuLink.vue' import VPNavBarMenuGroup from './VPNavBarMenuGroup.vue' +import { isClientOnly } from '../../shared' const { theme } = useData()