bge-ui 1.8.7 → 1.8.9

package/dist/index.js

@@ -6656,16 +6656,18 @@ 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"],
@@ -6673,76 +6675,29 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     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);
-    }
-    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, index2) => {
-        const $el = tab.ref;
-        if (!$el)
-          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;
-            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, index2) => {
-        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;
-        }
+    }
+    watch(() => props.modelValue, () => {
+      nextTick(() => {
+        update();
       });
-      if (newOffset) {
-        newOffset = Math.max(newOffset, 0);
-        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;
@@ -6752,9 +6707,9 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         if (!$el)
           return false;
         if ($el.clientWidth === 0 && index2 === 0) {
-          setTimeout(() => {
+          nextTick(() => {
             update();
-          }, 100);
+          });
           return false;
         }
         if (tab.value !== props.modelValue) {
@@ -6771,8 +6726,10 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         transform: `translateX(${offset2}px)`
       };
     };
-    const navScrollRef = ref();
     const getNavOffset = () => {
+      const navScrollElement = navScrollRef.value;
+      if (!navScrollElement)
+        return;
       panes.value.forEach((tab, index2) => {
         const $el = tab.ref;
         if (!$el)
@@ -6781,7 +6738,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           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 = currentOffset - (navScrollBounding.left - activeTabBounding.left);
@@ -6795,28 +6752,86 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         return false;
       });
     };
+    const scrollPrev = () => {
+      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, index2) => {
+        const $el = tab.ref;
+        if (!$el)
+          return false;
+        const activeTabBounding = $el.getBoundingClientRect();
+        if (activeTabBounding.left >= navScrollBounding.left && index2 > 0) {
+          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;
+          }
+        }
+      });
+      if (newOffset) {
+        newOffset = Math.max(newOffset, 0);
+        navOffset.value = Math.min(newOffset, maxOffset);
+      }
+    };
+    const scrollNext = () => {
+      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, index2) => {
+        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) {
-        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;
+      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);
     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.7",
+  "version": "1.8.9",
   "description": "",
   "type": "module",
   "main": "./src/index.ts",

package/src/tabs/index.vue

@@ -12,118 +12,84 @@
 </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"
 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
+  panes.value.forEach((tab: TabPane, index: number) => {
+    const $el = tab.ref
     if (!$el) return false
     if ($el.clientWidth === 0 && index === 0) {
-      setTimeout(() => {
+      nextTick(() => {
         update()
-      }, 100)
+      })
       return false
     }
     if (tab.value !== props.modelValue) {
@@ -143,16 +109,17 @@ const getBarStyle: any = () => {
   }
 }
 
-const navScrollRef = ref()
-const getNavOffset: any = () => {
-  panes.value.forEach((tab: any, index: number) => {
-    const $el = tab.ref as HTMLElement
+const getNavOffset = () => {
+  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 =
@@ -168,28 +135,89 @@ const getNavOffset: any = () => {
     return false
   })
 }
+
+const scrollPrev = () => {
+  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 = () => {
+  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) {
-    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
+  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)
 
 onMounted(() => {