bge-ui 1.8.8 → 1.9.0

package/dist/index.js

@@ -6656,43 +6656,124 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     type: {
+      type: String,
       default: "bordered",
-      value: ["bordered", "pills", "pills-elevated"]
+      validator: (value) => ["bordered", "pills", "pills-elevated"].includes(value)
     },
     modelValue: {
       type: String,
       default: ""
     },
     size: {
+      type: String,
       default: "default",
-      value: ["default", "large", "mini"]
+      validator: (value) => ["default", "large", "mini"].includes(value)
     }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
+    const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
     const props = __props;
     const emits = __emit;
     const panes = ref([]);
+    const barStyle = ref();
+    const navOffset = ref(0);
+    const scrollable = ref(false);
+    const tabsRef = ref(null);
+    const navScrollRef = ref(null);
     function addPane(pane) {
       panes.value.push(pane);
     }
-    watch(() => props.modelValue, () => {
-      setTimeout(() => {
-        update();
-      }, 100);
-    });
     function changeValue(value) {
       emits("update:modelValue", value);
-      setTimeout(() => {
+      nextTick(() => {
         update();
-      }, 100);
+      });
     }
+    watch(() => props.modelValue, () => {
+      nextTick(() => {
+        update();
+      });
+    });
+    provide(tabsKey$1, {
+      addPane,
+      changeValue
+    });
+    const getBarStyle = () => {
+      let offset2 = 0;
+      let tabSize = 0;
+      const sizeName = "width";
+      if (isBrowser) {
+        panes.value.forEach((tab, index2) => {
+          const $el = tab.ref;
+          if (!$el)
+            return false;
+          if ($el.clientWidth === 0 && index2 === 0) {
+            nextTick(() => {
+              update();
+            });
+            return false;
+          }
+          if (tab.value !== props.modelValue) {
+            tab.setActive(false);
+            return true;
+          }
+          tab.setActive(true);
+          offset2 = $el["offsetLeft"];
+          tabSize = $el["clientWidth"];
+          return false;
+        });
+      } else {
+        panes.value.forEach((tab) => {
+          if (tab.value === props.modelValue) {
+            tab.setActive(true);
+          } else {
+            tab.setActive(false);
+          }
+        });
+      }
+      return {
+        [sizeName]: `${tabSize}px`,
+        transform: `translateX(${offset2}px)`
+      };
+    };
+    const getNavOffset = () => {
+      if (!isBrowser)
+        return;
+      const navScrollElement = navScrollRef.value;
+      if (!navScrollElement)
+        return;
+      panes.value.forEach((tab, index2) => {
+        const $el = tab.ref;
+        if (!$el)
+          return false;
+        if (tab.value === props.modelValue) {
+          const currentOffset = navOffset.value;
+          let newOffset = currentOffset;
+          const activeTabBounding = $el.getBoundingClientRect();
+          const navScrollBounding = navScrollElement.getBoundingClientRect();
+          const maxOffset = navScrollBounding.width;
+          if (activeTabBounding.left < navScrollBounding.left) {
+            newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
+          }
+          if (activeTabBounding.right > navScrollBounding.right) {
+            newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
+          }
+          newOffset = Math.max(newOffset, 0);
+          navOffset.value = Math.min(newOffset, maxOffset);
+        }
+        return false;
+      });
+    };
     const scrollPrev = () => {
-      if (!navScrollRef.value)
+      if (!isBrowser)
+        return;
+      const navScrollElement = navScrollRef.value;
+      if (!navScrollElement)
         return;
       let newOffset;
       const currentOffset = navOffset.value;
-      const navScrollBounding = navScrollRef.value.getBoundingClientRect();
+      const navScrollBounding = navScrollElement.getBoundingClientRect();
       const maxOffset = navScrollBounding.width;
       panes.value.some((tab, index2) => {
         const $el = tab.ref;
@@ -6700,13 +6781,16 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           return false;
         const activeTabBounding = $el.getBoundingClientRect();
         if (activeTabBounding.left >= navScrollBounding.left && index2 > 0) {
-          const tabBounding = panes.value[index2 - 1].ref.getBoundingClientRect();
-          if (index2 - 1 === 0) {
-            newOffset = -navScrollBounding.left;
+          const prevTab = panes.value[index2 - 1];
+          if (prevTab && prevTab.ref) {
+            const tabBounding = prevTab.ref.getBoundingClientRect();
+            if (index2 - 1 === 0) {
+              newOffset = -navScrollBounding.left;
+              return true;
+            }
+            newOffset = currentOffset - (navScrollBounding.left - tabBounding.left);
             return true;
           }
-          newOffset = currentOffset - (navScrollBounding.left - tabBounding.left);
-          return true;
         }
       });
       if (newOffset) {
@@ -6715,11 +6799,14 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       }
     };
     const scrollNext = () => {
-      if (!navScrollRef.value)
+      if (!isBrowser)
+        return;
+      const navScrollElement = navScrollRef.value;
+      if (!navScrollElement)
         return;
       let newOffset;
       const currentOffset = navOffset.value;
-      const navScrollBounding = navScrollRef.value.getBoundingClientRect();
+      const navScrollBounding = navScrollElement.getBoundingClientRect();
       const maxOffset = navScrollBounding.width;
       panes.value.some((tab, index2) => {
         const $el = tab.ref;
@@ -6736,90 +6823,37 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         navOffset.value = Math.min(newOffset, maxOffset);
       }
     };
-    provide(tabsKey$1, {
-      addPane,
-      changeValue
-    });
-    const barStyle = ref();
-    const navOffset = ref(0);
-    const scrollable = ref(false);
-    const getBarStyle = () => {
-      let offset2 = 0;
-      let tabSize = 0;
-      const sizeName = "width";
-      panes.value.forEach((tab, index2) => {
-        const $el = tab.ref;
-        if (!$el)
-          return false;
-        if ($el.clientWidth === 0 && index2 === 0) {
-          setTimeout(() => {
-            update();
-          }, 100);
-          return false;
-        }
-        if (tab.value !== props.modelValue) {
-          tab.setActive(false);
-          return true;
-        }
-        tab.setActive(true);
-        offset2 = $el["offsetLeft"];
-        tabSize = $el["clientWidth"];
-        return false;
-      });
-      return {
-        [sizeName]: `${tabSize}px`,
-        transform: `translateX(${offset2}px)`
-      };
-    };
-    const navScrollRef = ref();
-    const getNavOffset = () => {
-      if (!navScrollRef.value)
-        return;
-      panes.value.forEach((tab, index2) => {
-        const $el = tab.ref;
-        if (!$el)
-          return false;
-        if (tab.value === props.modelValue) {
-          const currentOffset = navOffset.value;
-          let newOffset = currentOffset;
-          const activeTabBounding = $el.getBoundingClientRect();
-          const navScrollBounding = navScrollRef.value.getBoundingClientRect();
-          const maxOffset = navScrollBounding.width;
-          if (activeTabBounding.left < navScrollBounding.left) {
-            newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
-          }
-          if (activeTabBounding.right > navScrollBounding.right) {
-            newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
-          }
-          newOffset = Math.max(newOffset, 0);
-          navOffset.value = Math.min(newOffset, maxOffset);
-        }
-        return false;
-      });
-    };
     const panesStyle = computed(() => {
       return {
         transform: `translateX(-${navOffset.value}px)`
       };
     });
     const update = () => {
-      if (panes.value.length > 0 && navScrollRef.value) {
-        const right2 = panes.value[panes.value.length - 1].ref.getBoundingClientRect().right;
-        const left2 = panes.value[0].ref.getBoundingClientRect().left;
-        const navScrollBounding = navScrollRef.value.getBoundingClientRect();
-        if (left2 < navScrollBounding.left) {
-          scrollable.value = true;
-        } else if (right2 > navScrollBounding.right) {
-          scrollable.value = true;
-        } else {
-          scrollable.value = false;
+      if (isBrowser) {
+        const navScrollElement = navScrollRef.value;
+        if (panes.value.length > 0 && navScrollElement) {
+          const lastPane = panes.value[panes.value.length - 1];
+          const firstPane = panes.value[0];
+          if (lastPane && lastPane.ref && firstPane && firstPane.ref) {
+            const right2 = lastPane.ref.getBoundingClientRect().right;
+            const left2 = firstPane.ref.getBoundingClientRect().left;
+            const navScrollBounding = navScrollElement.getBoundingClientRect();
+            if (left2 < navScrollBounding.left) {
+              scrollable.value = true;
+            } else if (right2 > navScrollBounding.right) {
+              scrollable.value = true;
+            } else {
+              scrollable.value = false;
+            }
+          }
         }
       }
       barStyle.value = getBarStyle();
       getNavOffset();
     };
-    const tabsRef = ref();
-    useResizeObserver(tabsRef, update);
+    if (isBrowser) {
+      useResizeObserver(tabsRef, update);
+    }
     onMounted(() => {
       update();
     });

package/dist/tabs/index.vue.d.ts

@@ -1,30 +1,34 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     type: {
+        type: StringConstructor;
         default: string;
-        value: string[];
+        validator: (value: string) => boolean;
     };
     modelValue: {
         type: StringConstructor;
         default: string;
     };
     size: {
+        type: StringConstructor;
         default: string;
-        value: string[];
+        validator: (value: string) => boolean;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     type: {
+        type: StringConstructor;
         default: string;
-        value: string[];
+        validator: (value: string) => boolean;
     };
     modelValue: {
         type: StringConstructor;
         default: string;
     };
     size: {
+        type: StringConstructor;
         default: string;
-        value: string[];
+        validator: (value: string) => boolean;
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bge-ui",
-  "version": "1.8.8",
+  "version": "1.9.0",
   "description": "",
   "type": "module",
   "main": "./src/index.ts",

package/src/tabs/index.vue

@@ -12,130 +12,110 @@
 </template>
 <script setup lang="ts">
 import { useResizeObserver } from "@vueuse/core"
-import { provide, ref, onMounted, watch, computed, onBeforeUnmount } from "vue"
+import { provide, ref, onMounted, watch, computed, nextTick } from "vue"
+
+// 检测是否在浏览器环境中
+const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined'
 defineOptions({
   name: "Tabs",
 })
 
 const props = defineProps({
   type: {
+    type: String,
     default: 'bordered',
-    value: ['bordered', 'pills', 'pills-elevated']
+    validator: (value: string) => ['bordered', 'pills', 'pills-elevated'].includes(value)
   },
   modelValue: {
     type: String,
     default: '',
   },
   size: {
+    type: String,
     default: 'default',
-    value: ['default', 'large', 'mini']
+    validator: (value: string) => ['default', 'large', 'mini'].includes(value)
   }
 })
 
 const emits = defineEmits(['update:modelValue'])
 
-const panes = ref<any>([])
+// 类型定义
+interface TabPane {
+  ref: HTMLElement | null
+  value: string
+  setActive: (active: boolean) => void
+}
+
+// 状态管理
+const panes = ref<TabPane[]>([])
+const barStyle = ref<{ width: string; transform: string } | undefined>()
+const navOffset = ref(0)
+const scrollable = ref(false)
+
+// 引用
+const tabsRef = ref<HTMLElement | null>(null)
+const navScrollRef = ref<HTMLElement | null>(null)
 
-function addPane(pane: any) {
+// 方法
+function addPane(pane: TabPane) {
   panes.value.push(pane)
 }
 
-watch(() => props.modelValue, () => {
-  setTimeout(() => {
-    update()
-  }, 100)
-})
-
 function changeValue(value: string) {
   emits('update:modelValue', value)
-  setTimeout(() => {
+  nextTick(() => {
     update()
-  }, 100)
-}
-
-const scrollPrev = () => {
-  if (!navScrollRef.value) return
-  let newOffset
-  const currentOffset = navOffset.value
-  const navScrollBounding = navScrollRef.value.getBoundingClientRect()
-  const maxOffset = navScrollBounding.width
-  panes.value.some((tab: any, index: number) => {
-    const $el = tab.ref as HTMLElement
-    if (!$el) return false
-    const activeTabBounding = $el.getBoundingClientRect()
-    if (activeTabBounding.left >= navScrollBounding.left && index > 0) {
-      const tabBounding = panes.value[index - 1].ref.getBoundingClientRect()
-      if (index - 1 === 0) {
-        newOffset = -navScrollBounding.left
-        return true
-      }
-      newOffset =
-        currentOffset - (navScrollBounding.left - tabBounding.left)
-      return true
-    }
   })
-  if (newOffset) {
-    newOffset = Math.max(newOffset, 0)
-    navOffset.value = Math.min(newOffset, maxOffset)
-  }
 }
 
-const scrollNext = () => {
-  if (!navScrollRef.value) return
-  let newOffset
-  const currentOffset = navOffset.value
-  const navScrollBounding = navScrollRef.value.getBoundingClientRect()
-  const maxOffset = navScrollBounding.width
-  panes.value.some((tab: any, index: number) => {
-    const $el = tab.ref as HTMLElement
-    if (!$el) return false
-    const activeTabBounding = $el.getBoundingClientRect()
-    if (activeTabBounding.right > navScrollBounding.right) {
-      newOffset =
-        currentOffset + activeTabBounding.right - navScrollBounding.right
-      return true
-    }
+watch(() => props.modelValue, () => {
+  nextTick(() => {
+    update()
   })
-  if (newOffset) {
-    newOffset = Math.max(newOffset, 0)
-    navOffset.value = Math.min(newOffset, maxOffset)
-  }
-}
+})
 
 const tabsKey = 'bge-tabs-context'
 provide(tabsKey, {
   addPane,
   changeValue
 })
-const barStyle = ref<any>()
-const navOffset = ref(0)
-const scrollable = ref(false)
 
-const getBarStyle: any = () => {
+const getBarStyle = (): { width: string; transform: string } => {
   let offset = 0
   let tabSize = 0
 
   const sizeName = 'width'
 
-  panes.value.forEach((tab: any, index: number) => {
-    const $el = tab.ref as HTMLElement
-    if (!$el) return false
-    if ($el.clientWidth === 0 && index === 0) {
-      setTimeout(() => {
-        update()
-      }, 100)
-      return false
-    }
-    if (tab.value !== props.modelValue) {
-      tab.setActive(false)
-      return true
-    }
+  if (isBrowser) {
+    panes.value.forEach((tab: TabPane, index: number) => {
+      const $el = tab.ref
+      if (!$el) return false
+      if ($el.clientWidth === 0 && index === 0) {
+        nextTick(() => {
+          update()
+        })
+        return false
+      }
+      if (tab.value !== props.modelValue) {
+        tab.setActive(false)
+        return true
+      }
 
-    tab.setActive(true)
-    offset = $el['offsetLeft']
-    tabSize = $el['clientWidth']
-    return false
-  })
+      tab.setActive(true)
+      offset = $el['offsetLeft']
+      tabSize = $el['clientWidth']
+      return false
+    })
+  } else {
+    // 服务端渲染时，为活动标签设置默认样式
+    panes.value.forEach((tab: TabPane) => {
+      if (tab.value === props.modelValue) {
+        tab.setActive(true)
+      } else {
+        tab.setActive(false)
+      }
+    })
+  }
 
   return {
     [sizeName]: `${tabSize}px`,
@@ -143,17 +123,18 @@ const getBarStyle: any = () => {
   }
 }
 
-const navScrollRef = ref()
-const getNavOffset: any = () => {
-  if (!navScrollRef.value) return
-  panes.value.forEach((tab: any, index: number) => {
-    const $el = tab.ref as HTMLElement
+const getNavOffset = () => {
+  if (!isBrowser) return
+  const navScrollElement = navScrollRef.value
+  if (!navScrollElement) return
+  panes.value.forEach((tab: TabPane, index: number) => {
+    const $el = tab.ref
     if (!$el) return false
     if (tab.value === props.modelValue) {
       const currentOffset = navOffset.value
       let newOffset = currentOffset
       const activeTabBounding = $el.getBoundingClientRect()
-      const navScrollBounding = navScrollRef.value.getBoundingClientRect()
+      const navScrollBounding = navScrollElement.getBoundingClientRect()
       const maxOffset = navScrollBounding.width
       if (activeTabBounding.left < navScrollBounding.left) {
         newOffset =
@@ -169,29 +150,97 @@ const getNavOffset: any = () => {
     return false
   })
 }
+
+const scrollPrev = () => {
+  if (!isBrowser) return
+  const navScrollElement = navScrollRef.value
+  if (!navScrollElement) return
+  let newOffset
+  const currentOffset = navOffset.value
+  const navScrollBounding = navScrollElement.getBoundingClientRect()
+  const maxOffset = navScrollBounding.width
+  panes.value.some((tab: TabPane, index: number) => {
+    const $el = tab.ref
+    if (!$el) return false
+    const activeTabBounding = $el.getBoundingClientRect()
+    if (activeTabBounding.left >= navScrollBounding.left && index > 0) {
+      const prevTab = panes.value[index - 1]
+      if (prevTab && prevTab.ref) {
+        const tabBounding = prevTab.ref.getBoundingClientRect()
+        if (index - 1 === 0) {
+          newOffset = -navScrollBounding.left
+          return true
+        }
+        newOffset =
+          currentOffset - (navScrollBounding.left - tabBounding.left)
+        return true
+      }
+    }
+  })
+  if (newOffset) {
+    newOffset = Math.max(newOffset, 0)
+    navOffset.value = Math.min(newOffset, maxOffset)
+  }
+}
+
+const scrollNext = () => {
+  if (!isBrowser) return
+  const navScrollElement = navScrollRef.value
+  if (!navScrollElement) return
+  let newOffset
+  const currentOffset = navOffset.value
+  const navScrollBounding = navScrollElement.getBoundingClientRect()
+  const maxOffset = navScrollBounding.width
+  panes.value.some((tab: TabPane, index: number) => {
+    const $el = tab.ref
+    if (!$el) return false
+    const activeTabBounding = $el.getBoundingClientRect()
+    if (activeTabBounding.right > navScrollBounding.right) {
+      newOffset =
+        currentOffset + activeTabBounding.right - navScrollBounding.right
+      return true
+    }
+  })
+  if (newOffset) {
+    newOffset = Math.max(newOffset, 0)
+    navOffset.value = Math.min(newOffset, maxOffset)
+  }
+}
+
 const panesStyle = computed(() => {
   return {
     transform: `translateX(-${navOffset.value}px)`,
   }
 })
+
 const update = () => {
-  if (panes.value.length > 0 && navScrollRef.value) {
-    const right = panes.value[panes.value.length - 1].ref.getBoundingClientRect().right
-    const left = panes.value[0].ref.getBoundingClientRect().left
-    const navScrollBounding = navScrollRef.value.getBoundingClientRect()
-    if (left < navScrollBounding.left) {
-      scrollable.value = true
-    } else if (right > navScrollBounding.right) {
-      scrollable.value = true
-    } else {
-      scrollable.value = false
+  if (isBrowser) {
+    const navScrollElement = navScrollRef.value
+    if (panes.value.length > 0 && navScrollElement) {
+      const lastPane = panes.value[panes.value.length - 1]
+      const firstPane = panes.value[0]
+      if (lastPane && lastPane.ref && firstPane && firstPane.ref) {
+        const right = lastPane.ref.getBoundingClientRect().right
+        const left = firstPane.ref.getBoundingClientRect().left
+        const navScrollBounding = navScrollElement.getBoundingClientRect()
+        if (left < navScrollBounding.left) {
+          scrollable.value = true
+        } else if (right > navScrollBounding.right) {
+          scrollable.value = true
+        } else {
+          scrollable.value = false
+        }
+      }
     }
   }
   barStyle.value = getBarStyle()
   getNavOffset()
 }
-const tabsRef = ref()
-useResizeObserver(tabsRef, update)
+
+// 仅在浏览器环境中使用 ResizeObserver
+if (isBrowser) {
+  useResizeObserver(tabsRef, update)
+}
 
 onMounted(() => {
   update()