From b78acd4eb7cecdfacdae0957cb9daa0520603448 Mon Sep 17 00:00:00 2001
From: smithoo <smithoo@pubg.com>
Date: Thu, 21 Nov 2024 13:42:25 +0900
Subject: [PATCH] fix(SSR): apply lazy ID & browser check for SSR render (#290)

---
 .../vs-checkbox-set/VsCheckboxSet.vue           |  5 +----
 .../vlossom/src/components/vs-footer/types.ts   |  1 +
 .../vlossom/src/components/vs-header/types.ts   |  1 +
 .../src/components/vs-radio-set/VsRadioSet.vue  |  5 +----
 .../vlossom/src/components/vs-table/VsTable.vue |  1 -
 .../src/components/vs-table/VsTableBody.vue     |  1 -
 packages/vlossom/src/composables/index.ts       |  1 +
 .../vlossom/src/composables/input-composable.ts |  5 ++---
 .../src/composables/input-form-composable.ts    | 10 ++++++++--
 .../src/composables/lazy-id-composable.ts       | 17 +++++++++++++++++
 .../nodes/vs-checkbox-node/VsCheckboxNode.vue   |  5 ++---
 .../src/nodes/vs-focus-trap/VsFocusTrap.vue     |  2 +-
 .../src/nodes/vs-radio-node/VsRadioNode.vue     |  5 ++---
 packages/vlossom/src/styles/variables.scss      |  1 +
 packages/vlossom/src/utils/dom.ts               |  3 +++
 packages/vlossom/src/vlossom-framework.ts       | 17 +++++++++++++----
 16 files changed, 54 insertions(+), 26 deletions(-)
 create mode 100644 packages/vlossom/src/composables/lazy-id-composable.ts

diff --git a/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue b/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue
index ae1127d5c..54846969e 100644
--- a/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue
+++ b/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue
@@ -27,7 +27,7 @@
                 :checked="isChecked(option)"
                 :dense="dense"
                 :disabled="computedDisabled"
-                :id="`${computedId}-${optionIds[index]}`"
+                :id="`${computedId}-${index}`"
                 :label="getOptionLabel(option)"
                 :name="name"
                 :readonly="computedReadonly"
@@ -231,12 +231,9 @@ export default defineComponent({
             checkboxRefs.value[0]?.blur();
         }
 
-        const optionIds = computed(() => options.value.map(() => utils.string.createID()));
-
         return {
             computedId,
             checkboxRefs,
-            optionIds,
             classObj,
             computedColorScheme,
             computedState,
diff --git a/packages/vlossom/src/components/vs-footer/types.ts b/packages/vlossom/src/components/vs-footer/types.ts
index cfa54155c..cf0f6b5d5 100644
--- a/packages/vlossom/src/components/vs-footer/types.ts
+++ b/packages/vlossom/src/components/vs-footer/types.ts
@@ -5,4 +5,5 @@ export interface VsFooterStyleSet {
     height?: string;
     padding?: string;
     width?: string;
+    zIndex?: string;
 }
diff --git a/packages/vlossom/src/components/vs-header/types.ts b/packages/vlossom/src/components/vs-header/types.ts
index a0d0cb077..86a32a725 100644
--- a/packages/vlossom/src/components/vs-header/types.ts
+++ b/packages/vlossom/src/components/vs-header/types.ts
@@ -5,4 +5,5 @@ export interface VsHeaderStyleSet {
     height?: string;
     padding?: string;
     width?: string;
+    zIndex?: string;
 }
diff --git a/packages/vlossom/src/components/vs-radio-set/VsRadioSet.vue b/packages/vlossom/src/components/vs-radio-set/VsRadioSet.vue
index 9efd24439..dcd267ed3 100644
--- a/packages/vlossom/src/components/vs-radio-set/VsRadioSet.vue
+++ b/packages/vlossom/src/components/vs-radio-set/VsRadioSet.vue
@@ -27,7 +27,7 @@
                 :checked="isChecked(option)"
                 :dense="dense"
                 :disabled="computedDisabled"
-                :id="`${computedId}-${optionIds[index]}`"
+                :id="`${computedId}-${index}`"
                 :label="getOptionLabel(option)"
                 :name="name"
                 :readonly="computedReadonly"
@@ -188,12 +188,9 @@ export default defineComponent({
             radioRefs.value[0]?.blur();
         }
 
-        const optionIds = computed(() => options.value.map(() => utils.string.createID()));
-
         return {
             computedId,
             radioRefs,
-            optionIds,
             classObj,
             computedColorScheme,
             computedState,
diff --git a/packages/vlossom/src/components/vs-table/VsTable.vue b/packages/vlossom/src/components/vs-table/VsTable.vue
index 0cd6d5f8b..96367b0c2 100644
--- a/packages/vlossom/src/components/vs-table/VsTable.vue
+++ b/packages/vlossom/src/components/vs-table/VsTable.vue
@@ -25,7 +25,6 @@
                     <template #check>
                         <vs-checkbox-node
                             class="vs-table-select vs-select-all"
-                            :id="utils.string.createID()"
                             type="checkbox"
                             :color-scheme="computedColorScheme"
                             :indeterminate="!isSelectedAll && selectedItems.length > 0"
diff --git a/packages/vlossom/src/components/vs-table/VsTableBody.vue b/packages/vlossom/src/components/vs-table/VsTableBody.vue
index 253d56810..e08e2ecd1 100644
--- a/packages/vlossom/src/components/vs-table/VsTableBody.vue
+++ b/packages/vlossom/src/components/vs-table/VsTableBody.vue
@@ -26,7 +26,6 @@
             >
                 <template #check>
                     <vs-checkbox-node
-                        :id="element.id"
                         type="checkbox"
                         :color-scheme="colorScheme"
                         :checked="isSelected(element.id)"
diff --git a/packages/vlossom/src/composables/index.ts b/packages/vlossom/src/composables/index.ts
index 0e25014cd..ae0256da1 100644
--- a/packages/vlossom/src/composables/index.ts
+++ b/packages/vlossom/src/composables/index.ts
@@ -8,6 +8,7 @@ export * from './input-form-composable';
 export * from './input-modifier-composable';
 export * from './input-option-composable';
 export * from './layout-composable';
+export * from './lazy-id-composable';
 export * from './overlay-composable';
 export * from './responsive-composable';
 export * from './scroll-lock-composable';
diff --git a/packages/vlossom/src/composables/input-composable.ts b/packages/vlossom/src/composables/input-composable.ts
index de988ba48..848f0f2ae 100644
--- a/packages/vlossom/src/composables/input-composable.ts
+++ b/packages/vlossom/src/composables/input-composable.ts
@@ -1,7 +1,7 @@
 import { ComputedRef, Ref, computed, nextTick, onMounted, ref, watch } from 'vue';
+import { useLazyId } from '@/composables';
 import { useInputForm } from './input-form-composable';
 import { UIState } from '@/declaration';
-import { utils } from '@/utils';
 
 import type { StateMessage, InputComponentParams } from '@/declaration';
 
@@ -21,8 +21,7 @@ export function useInput<T = unknown>(ctx: any, inputParams: InputComponentParam
         callbacks = {},
     } = inputParams;
 
-    const innerId = utils.string.createID();
-    const computedId = computed(() => id.value || innerId);
+    const { computedId } = useLazyId(id);
 
     const changed = ref(false);
     const isInitialized = ref(false);
diff --git a/packages/vlossom/src/composables/input-form-composable.ts b/packages/vlossom/src/composables/input-form-composable.ts
index c7f0f495b..19fd90ae7 100644
--- a/packages/vlossom/src/composables/input-form-composable.ts
+++ b/packages/vlossom/src/composables/input-form-composable.ts
@@ -1,4 +1,4 @@
-import { Ref, inject, onBeforeMount, onBeforeUnmount, watch } from 'vue';
+import { Ref, inject, onMounted, onBeforeUnmount, watch } from 'vue';
 import { VS_FORM, VsFormProvide } from '@/declaration';
 import { useFormProvide } from './form-provide-composable';
 
@@ -27,11 +27,17 @@ export function useInputForm(
 
     watch(clearFlag, clear);
 
-    onBeforeMount(() => {
+    onMounted(() => {
         updateChanged(id.value, changed.value);
         updateValid(id.value, valid.value);
     });
 
+    watch(id, (newId, oldId) => {
+        removeFromForm(oldId);
+        updateChanged(newId, changed.value);
+        updateValid(newId, valid.value);
+    });
+
     onBeforeUnmount(() => {
         removeFromForm(id.value);
     });
diff --git a/packages/vlossom/src/composables/lazy-id-composable.ts b/packages/vlossom/src/composables/lazy-id-composable.ts
new file mode 100644
index 000000000..892c316e0
--- /dev/null
+++ b/packages/vlossom/src/composables/lazy-id-composable.ts
@@ -0,0 +1,17 @@
+import { computed, onMounted, Ref, ref } from 'vue';
+import { utils } from '@/utils';
+
+// This composable is used to generate a unique ID for SSR components
+export function useLazyId(id: Ref<string>) {
+    const innerId = ref('');
+    const computedId = computed(() => id.value || innerId.value);
+
+    onMounted(() => {
+        innerId.value = utils.string.createID();
+    });
+
+    return {
+        innerId,
+        computedId,
+    };
+}
diff --git a/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.vue b/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.vue
index 3b6761bee..702784dc3 100644
--- a/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.vue
+++ b/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.vue
@@ -26,7 +26,7 @@
 <script lang="ts">
 import { computed, defineComponent, nextTick, PropType, Ref, ref, toRefs, watch } from 'vue';
 import { ColorScheme, UIState, VsNode } from '@/declaration';
-import { useColorScheme, useStateClass, useStyleSet } from '@/composables';
+import { useColorScheme, useLazyId, useStateClass, useStyleSet } from '@/composables';
 import { utils } from '@/utils';
 import { VsCheckboxNodeStyleSet } from './types';
 
@@ -70,8 +70,7 @@ export default defineComponent({
             'vs-indeterminate': indeterminate.value,
         }));
 
-        const innerId = utils.string.createID();
-        const computedId = computed(() => id.value || innerId);
+        const { computedId } = useLazyId(id);
 
         function toggle(event: Event) {
             emit('change', event);
diff --git a/packages/vlossom/src/nodes/vs-focus-trap/VsFocusTrap.vue b/packages/vlossom/src/nodes/vs-focus-trap/VsFocusTrap.vue
index b592db47e..01e07fd43 100644
--- a/packages/vlossom/src/nodes/vs-focus-trap/VsFocusTrap.vue
+++ b/packages/vlossom/src/nodes/vs-focus-trap/VsFocusTrap.vue
@@ -127,7 +127,7 @@ export default defineComponent({
                 return null;
             }
 
-            const vNodes = slots.default().filter((vnode) => vnode.type !== Comment);
+            const vNodes = slots.default();
             if (vNodes.length !== 1) {
                 utils.log.error('vs-focus-trap', 'FocusTrap can only contain one child');
 
diff --git a/packages/vlossom/src/nodes/vs-radio-node/VsRadioNode.vue b/packages/vlossom/src/nodes/vs-radio-node/VsRadioNode.vue
index 392c68f3d..bc27b0962 100644
--- a/packages/vlossom/src/nodes/vs-radio-node/VsRadioNode.vue
+++ b/packages/vlossom/src/nodes/vs-radio-node/VsRadioNode.vue
@@ -27,7 +27,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, Ref, ref, toRefs } from 'vue';
 import { ColorScheme, UIState, VsNode } from '@/declaration';
-import { useColorScheme, useStateClass, useStyleSet } from '@/composables';
+import { useColorScheme, useLazyId, useStateClass, useStyleSet } from '@/composables';
 import { utils } from '@/utils';
 import { VsRadioNodeStyleSet } from './types';
 
@@ -68,8 +68,7 @@ export default defineComponent({
             'vs-readonly': readonly.value,
         }));
 
-        const innerId = utils.string.createID();
-        const computedId = computed(() => id.value || innerId);
+        const { computedId } = useLazyId(id);
 
         function toggle(event: Event) {
             emit('change', event);
diff --git a/packages/vlossom/src/styles/variables.scss b/packages/vlossom/src/styles/variables.scss
index 6321019ae..4d987f96e 100644
--- a/packages/vlossom/src/styles/variables.scss
+++ b/packages/vlossom/src/styles/variables.scss
@@ -7,6 +7,7 @@ $variables: (
     font-size-xl: 1.9rem,
 
     // radius
+    radius-ratio: 1,
     radius-xs: 0.2rem,
     radius-sm: 0.5rem,
     radius: 0.8rem,
diff --git a/packages/vlossom/src/utils/dom.ts b/packages/vlossom/src/utils/dom.ts
index e890204b8..07848c9d4 100644
--- a/packages/vlossom/src/utils/dom.ts
+++ b/packages/vlossom/src/utils/dom.ts
@@ -1,4 +1,7 @@
 export const domUtil = {
+    isBrowser(): boolean {
+        return typeof window !== 'undefined';
+    },
     getClientRect(element: HTMLElement): DOMRect {
         return element.getBoundingClientRect();
     },
diff --git a/packages/vlossom/src/vlossom-framework.ts b/packages/vlossom/src/vlossom-framework.ts
index e52ee728a..930cabce9 100644
--- a/packages/vlossom/src/vlossom-framework.ts
+++ b/packages/vlossom/src/vlossom-framework.ts
@@ -1,5 +1,6 @@
 import { store } from './stores';
 import * as vsPlugins from './plugins';
+import { utils } from './utils';
 
 import type { App } from 'vue';
 import type { VlossomOptions, VsComponent, VsNode } from '@/declaration';
@@ -7,14 +8,22 @@ import type { ToastPlugin, ConfirmPlugin } from './plugins';
 
 export class Vlossom {
     constructor(options?: VlossomOptions) {
-        const { colorScheme = {}, styleSet = {}, theme = 'light', radiusRatio = 1 } = options || {};
+        const {
+            colorScheme = {},
+            styleSet = {},
+            theme = 'light',
+            radiusRatio = 1,
+            detectOSTheme = false,
+        } = options || {};
 
-        this.theme = (this.getDefaultTheme(options) as 'light' | 'dark') || theme;
         store.option.setGlobalColorScheme(colorScheme);
         store.option.registerStyleSet(styleSet);
-        store.option.setGlobalRadiusRatio(radiusRatio);
+        if (utils.dom.isBrowser()) {
+            this.theme = (this.getDefaultTheme(options) as 'light' | 'dark') || theme;
+            store.option.setGlobalRadiusRatio(radiusRatio);
+        }
 
-        if (options?.detectOSTheme) {
+        if (utils.dom.isBrowser() && detectOSTheme) {
             const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
             mediaQueryList.addEventListener('change', (event) => {
                 this.theme = event.matches ? 'dark' : 'light';