bge-ui 1.9.0 → 1.9.2

package/dist/index.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, renderSlot, normalizeStyle, createStaticVNode, provide, reactive, toRefs, ref, watch, getCurrentScope, onScopeDispose, unref, readonly, computed, getCurrentInstance, onMounted, useSlots, inject, createTextVNode, toDisplayString, createCommentVNode, TransitionGroup, withCtx, nextTick, createBlock, withModifiers, withDirectives, cloneVNode, Fragment, Text, Comment, onUnmounted, h, Transition, vShow, onBeforeMount, Teleport, resolveDynamicComponent, shallowReactive, render as render$7, isVNode, vModelCheckbox, renderList, toRef, useAttrs, normalizeProps, mergeProps, onBeforeUpdate, withKeys, createSlots, guardReactiveProps, isRef } from "vue";
+import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, renderSlot, normalizeStyle, createStaticVNode, provide, reactive, toRefs, ref, watch, getCurrentScope, onScopeDispose, unref, readonly, computed, getCurrentInstance, onMounted, useSlots, inject, createTextVNode, toDisplayString, createCommentVNode, TransitionGroup, withCtx, nextTick, createBlock, withModifiers, onUnmounted, withDirectives, cloneVNode, Fragment, Text, Comment, h, Transition, vShow, onBeforeMount, Teleport, resolveDynamicComponent, shallowReactive, render as render$7, isVNode, vModelCheckbox, renderList, toRef, useAttrs, normalizeProps, mergeProps, onBeforeUpdate, withKeys, createSlots, guardReactiveProps, isRef } from "vue";
 const _hoisted_1$2d = ["disabled"];
 const _hoisted_2$1U = { class: "loading-icon" };
 const _sfc_main$2o = /* @__PURE__ */ defineComponent({
@@ -6648,6 +6648,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const maxRetryCount = 3;
 const tabsKey$1 = "bge-tabs-context";
 const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
@@ -6679,10 +6680,27 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     const barStyle = ref();
     const navOffset = ref(0);
     const scrollable = ref(false);
+    const updateRetryCount = ref(0);
     const tabsRef = ref(null);
     const navScrollRef = ref(null);
     function addPane(pane) {
-      panes.value.push(pane);
+      const existingIndex = panes.value.findIndex(
+        (p) => p.id === pane.id || p.value === pane.value
+      );
+      if (existingIndex === -1) {
+        panes.value.push(pane);
+      } else {
+        panes.value[existingIndex] = pane;
+      }
+    }
+    function removePane(id) {
+      const index2 = panes.value.findIndex((p) => p.id === id);
+      if (index2 !== -1) {
+        panes.value.splice(index2, 1);
+      }
+    }
+    function getPaneByValue(value) {
+      return panes.value.find((p) => p.value === value);
     }
     function changeValue(value) {
       emits("update:modelValue", value);
@@ -6697,6 +6715,8 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     });
     provide(tabsKey$1, {
       addPane,
+      removePane,
+      getPaneByValue,
       changeValue
     });
     const getBarStyle = () => {
@@ -6709,9 +6729,12 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           if (!$el)
             return false;
           if ($el.clientWidth === 0 && index2 === 0) {
-            nextTick(() => {
-              update();
-            });
+            if (updateRetryCount.value < maxRetryCount) {
+              updateRetryCount.value++;
+              nextTick(() => {
+                update();
+              });
+            }
             return false;
           }
           if (tab.value !== props.modelValue) {
@@ -6721,6 +6744,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           tab.setActive(true);
           offset2 = $el["offsetLeft"];
           tabSize = $el["clientWidth"];
+          updateRetryCount.value = 0;
           return false;
         });
       } else {
@@ -6851,8 +6875,9 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       barStyle.value = getBarStyle();
       getNavOffset();
     };
+    const debouncedUpdate = useDebounceFn(update, 100);
     if (isBrowser) {
-      useResizeObserver(tabsRef, update);
+      useResizeObserver(tabsRef, debouncedUpdate);
     }
     onMounted(() => {
       update();
@@ -6916,19 +6941,35 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     const props = __props;
     const tabPaneRef = ref();
     const tabContext = inject(tabsKey, void 0);
+    const isActive = ref(false);
+    const paneId = Math.random().toString(36).substring(2, 10);
     function changeValue() {
-      tabContext.changeValue(props.value);
+      if (tabContext) {
+        tabContext.changeValue(props.value);
+      }
     }
-    const isActive = ref(false);
     function setActive(active) {
       isActive.value = active;
     }
     onMounted(() => {
-      tabContext.addPane(reactive({
-        ref: tabPaneRef.value,
-        value: props.value,
-        setActive
-      }));
+      var _a;
+      if (tabContext) {
+        const existingPane = (_a = tabContext.getPaneByValue) == null ? void 0 : _a.call(tabContext, props.value);
+        if (!existingPane) {
+          tabContext.addPane(reactive({
+            id: paneId,
+            ref: tabPaneRef.value,
+            value: props.value,
+            setActive
+          }));
+        }
+      }
+    });
+    onUnmounted(() => {
+      var _a;
+      if (tabContext) {
+        (_a = tabContext.removePane) == null ? void 0 : _a.call(tabContext, paneId);
+      }
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {

package/package.json

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

package/src/tabs/index.vue

@@ -11,7 +11,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { useResizeObserver } from "@vueuse/core"
+import { useResizeObserver, useDebounceFn } from "@vueuse/core"
 import { provide, ref, onMounted, watch, computed, nextTick } from "vue"
 
 // 检测是否在浏览器环境中
@@ -41,6 +41,7 @@ const emits = defineEmits(['update:modelValue'])
 
 // 类型定义
 interface TabPane {
+  id: string
   ref: HTMLElement | null
   value: string
   setActive: (active: boolean) => void
@@ -51,6 +52,8 @@ const panes = ref<TabPane[]>([])
 const barStyle = ref<{ width: string; transform: string } | undefined>()
 const navOffset = ref(0)
 const scrollable = ref(false)
+const updateRetryCount = ref(0)
+const maxRetryCount = 3
 
 // 引用
 const tabsRef = ref<HTMLElement | null>(null)
@@ -58,7 +61,27 @@ const navScrollRef = ref<HTMLElement | null>(null)
 
 // 方法
 function addPane(pane: TabPane) {
-  panes.value.push(pane)
+  // 检查是否已存在相同 id 或 value 的 pane，避免重复添加
+  const existingIndex = panes.value.findIndex(
+    (p) => p.id === pane.id || p.value === pane.value
+  )
+  if (existingIndex === -1) {
+    panes.value.push(pane)
+  } else {
+    // 更新已存在的 pane
+    panes.value[existingIndex] = pane
+  }
+}
+
+function removePane(id: string) {
+  const index = panes.value.findIndex((p) => p.id === id)
+  if (index !== -1) {
+    panes.value.splice(index, 1)
+  }
+}
+
+function getPaneByValue(value: string) {
+  return panes.value.find((p) => p.value === value)
 }
 
 function changeValue(value: string) {
@@ -77,6 +100,8 @@ watch(() => props.modelValue, () => {
 const tabsKey = 'bge-tabs-context'
 provide(tabsKey, {
   addPane,
+  removePane,
+  getPaneByValue,
   changeValue
 })
 
@@ -91,9 +116,12 @@ const getBarStyle = (): { width: string; transform: string } => {
       const $el = tab.ref
       if (!$el) return false
       if ($el.clientWidth === 0 && index === 0) {
-        nextTick(() => {
-          update()
-        })
+        if (updateRetryCount.value < maxRetryCount) {
+          updateRetryCount.value++
+          nextTick(() => {
+            update()
+          })
+        }
         return false
       }
       if (tab.value !== props.modelValue) {
@@ -104,6 +132,7 @@ const getBarStyle = (): { width: string; transform: string } => {
       tab.setActive(true)
       offset = $el['offsetLeft']
       tabSize = $el['clientWidth']
+      updateRetryCount.value = 0
       return false
     })
   } else {
@@ -237,9 +266,11 @@ const update = () => {
   getNavOffset()
 }
 
+const debouncedUpdate = useDebounceFn(update, 100)
+
 // 仅在浏览器环境中使用 ResizeObserver
 if (isBrowser) {
-  useResizeObserver(tabsRef, update)
+  useResizeObserver(tabsRef, debouncedUpdate)
 }
 
 onMounted(() => {

package/src/tabs/tab-pane.vue

@@ -14,23 +14,44 @@ const props = defineProps({
     type: String
   }
 })
-import { ref, onMounted, inject, reactive } from "vue";
+import { ref, onMounted, inject, reactive, onUnmounted } from "vue";
 const tabPaneRef = ref<HTMLDivElement>()
 const tabsKey = 'bge-tabs-context'
 const tabContext: any = inject(tabsKey, undefined)
+const isActive = ref<Boolean>(false)
+
+// 生成唯一标识，用于去重
+const paneId = Math.random().toString(36).substring(2, 10)
+
 function changeValue() {
-  tabContext.changeValue(props.value)
+  if (tabContext) {
+    tabContext.changeValue(props.value)
+  }
 }
-const isActive = ref<Boolean>(false)
+
 function setActive(active: Boolean) {
   isActive.value = active
 }
+
 onMounted(() => {
-  tabContext.addPane(reactive({
-    ref: tabPaneRef.value,
-    value: props.value,
-    setActive
-  }))
+  if (tabContext) {
+    // 检查是否已存在相同 value 的 pane，避免重复添加
+    const existingPane = tabContext.getPaneByValue?.(props.value)
+    if (!existingPane) {
+      tabContext.addPane(reactive({
+        id: paneId,
+        ref: tabPaneRef.value,
+        value: props.value,
+        setActive
+      }))
+    }
+  }
+})
+
+onUnmounted(() => {
+  if (tabContext) {
+    tabContext.removePane?.(paneId)
+  }
 })
 </script>
 <style lang="scss" >