ninemoon-ui 0.0.19 → 0.0.20

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

@@ -5,7 +5,6 @@ declare const _default: import("vue").DefineComponent<{
     };
     active: {
         type: import("vue").PropType<string>;
-        default: string;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:active"[], "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     type: {
@@ -14,12 +13,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     active: {
         type: import("vue").PropType<string>;
-        default: string;
     };
 }>> & {
     "onUpdate:active"?: ((...args: any[]) => any) | undefined;
 }, {
     type: "line" | "card";
-    active: string;
 }, {}>;
 export default _default;

package/dist/index.d.ts

@@ -2284,7 +2284,6 @@ declare const LibTabs: import("vue").DefineComponent<{
     };
     active: {
         type: import("vue").PropType<string>;
-        default: string;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:active"[], "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     type: {
@@ -2293,13 +2292,11 @@ declare const LibTabs: import("vue").DefineComponent<{
     };
     active: {
         type: import("vue").PropType<string>;
-        default: string;
     };
 }>> & {
     "onUpdate:active"?: ((...args: any[]) => any) | undefined;
 }, {
     type: "line" | "card";
-    active: string;
 }, {}>;
 declare const LibTabsPane: {
     new (...args: any[]): {

package/dist/index.umd.js

@@ -5224,16 +5224,13 @@
   const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     __name: "tabs",
     props: {
-      active: { default: "" },
+      active: {},
       type: { default: "line" }
     },
     emits: ["update:active"],
     setup(__props, { emit }) {
       const props = __props;
       const showBaseline = vue.computed(() => props.type === "line");
-      const changeHandle = (name) => {
-        emit("update:active", name);
-      };
       const noactive = vue.computed(() => props.active == null);
       const activename = vue.ref("");
       const currentActive = vue.computed({
@@ -5241,7 +5238,7 @@
           if (noactive.value) {
             activename.value = val;
           } else {
-            changeHandle(val);
+            emit("update:active", val);
           }
         },
         get() {
@@ -5256,6 +5253,25 @@
       const arrowNum = vue.ref(8);
       const arrowWidth = vue.ref(0);
       const slots = vue.useSlots();
+      const renderBar = () => {
+        return vue.h(
+          "div",
+          {
+            class: vue.normalizeClass(["ETab", [props.type === "line" ? "tdd-px-2 tdd-pt-2" : " ETab_Card"]])
+          },
+          slots.default().map((it, index2) => {
+            if (typeof it.children == "string")
+              return null;
+            if (Array.isArray(it.children)) {
+              return it.children.map((simple, i) => {
+                return renderBtn(simple, i);
+              });
+            } else {
+              return renderBtn(it, index2);
+            }
+          })
+        );
+      };
       const renderBtn = (node, index2) => {
         let btc = [];
         let divc = [];
@@ -5303,39 +5319,6 @@
           )
         );
       };
-      const renderBar = () => {
-        return vue.h(
-          "div",
-          {
-            class: vue.normalizeClass(["ETab", [props.type === "line" ? "tdd-px-2 tdd-pt-2" : " ETab_Card"]])
-          },
-          slots.default().map((it, index2) => {
-            if (typeof it.children == "string")
-              return null;
-            if (Array.isArray(it.children)) {
-              return it.children.map((simple, i) => {
-                return renderBtn(simple, i);
-              });
-            } else {
-              return renderBtn(it, index2);
-            }
-          })
-        );
-      };
-      const contentHandle = (it, i) => {
-        if (currentActive.value === "") {
-          activeIndex.value = i;
-          currentActive.value = it.props.name;
-        } else if (currentActive.value === it.props.name) {
-          activeIndex.value = i;
-        }
-        return vue.withDirectives(
-          vue.h(it, {
-            key: it.props.name
-          }),
-          [[vue.vShow, currentActive.value === "" || currentActive.value === it.props.name]]
-        );
-      };
       const renderContent = () => {
         let defaultindex = -1;
         return vue.h(
@@ -5356,18 +5339,43 @@
           })
         );
       };
-      const btnBar = vue.ref();
+      const contentHandle = (it, i) => {
+        if (currentActive.value === it.props.name) {
+          activeIndex.value = i;
+        }
+        return vue.withDirectives(
+          vue.h(it, {
+            key: it.props.name
+          }),
+          [[vue.vShow, activeIndex.value === i]]
+        );
+      };
+      const observerRef = vue.ref();
+      let observer;
       vue.onMounted(() => {
-        if (showBaseline.value) {
-          const aim = btnBar.value.children[activeIndex.value];
-          arrowWidth.value = aim.children[0].innerHTML.length * 14;
+        observer = new IntersectionObserver((entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              const aim = observerRef.value.children[activeIndex.value];
+              arrowWidth.value = aim.offsetWidth;
+              arrowNum.value = aim.offsetLeft;
+            }
+          });
+        });
+        if (observerRef.value) {
+          observer.observe(observerRef.value);
+        }
+      });
+      vue.onUnmounted(() => {
+        if (observerRef.value) {
+          observer.unobserve(observerRef.value);
         }
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
           vue.createVNode(renderBar, {
-            ref_key: "btnBar",
-            ref: btnBar
+            ref_key: "observerRef",
+            ref: observerRef
           }, null, 512),
           showBaseline.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, [
             vue.createElementVNode("div", {

package/dist/js/tabs/tabs.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, ref, useSlots, onMounted, openBlock, createElementBlock, createVNode, createElementVNode, normalizeStyle, createCommentVNode, h, normalizeClass, withDirectives, vShow } from "vue";
+import { defineComponent, computed, ref, useSlots, onMounted, onUnmounted, openBlock, createElementBlock, createVNode, createElementVNode, normalizeStyle, createCommentVNode, h, normalizeClass, withDirectives, vShow } from "vue";
 const _hoisted_1 = { class: "tdd-relative tdd-w-full tdd-overflow-hidden" };
 const _hoisted_2 = {
   key: 0,
@@ -8,16 +8,13 @@ const _hoisted_3 = { class: "tdd-relative tdd-w-full" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "tabs",
   props: {
-    active: { default: "" },
+    active: {},
     type: { default: "line" }
   },
   emits: ["update:active"],
   setup(__props, { emit }) {
     const props = __props;
     const showBaseline = computed(() => props.type === "line");
-    const changeHandle = (name) => {
-      emit("update:active", name);
-    };
     const noactive = computed(() => props.active == null);
     const activename = ref("");
     const currentActive = computed({
@@ -25,7 +22,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (noactive.value) {
           activename.value = val;
         } else {
-          changeHandle(val);
+          emit("update:active", val);
         }
       },
       get() {
@@ -40,6 +37,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const arrowNum = ref(8);
     const arrowWidth = ref(0);
     const slots = useSlots();
+    const renderBar = () => {
+      return h(
+        "div",
+        {
+          class: normalizeClass(["ETab", [props.type === "line" ? "tdd-px-2 tdd-pt-2" : " ETab_Card"]])
+        },
+        slots.default().map((it, index) => {
+          if (typeof it.children == "string")
+            return null;
+          if (Array.isArray(it.children)) {
+            return it.children.map((simple, i) => {
+              return renderBtn(simple, i);
+            });
+          } else {
+            return renderBtn(it, index);
+          }
+        })
+      );
+    };
     const renderBtn = (node, index) => {
       let btc = [];
       let divc = [];
@@ -87,39 +103,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         )
       );
     };
-    const renderBar = () => {
-      return h(
-        "div",
-        {
-          class: normalizeClass(["ETab", [props.type === "line" ? "tdd-px-2 tdd-pt-2" : " ETab_Card"]])
-        },
-        slots.default().map((it, index) => {
-          if (typeof it.children == "string")
-            return null;
-          if (Array.isArray(it.children)) {
-            return it.children.map((simple, i) => {
-              return renderBtn(simple, i);
-            });
-          } else {
-            return renderBtn(it, index);
-          }
-        })
-      );
-    };
-    const contentHandle = (it, i) => {
-      if (currentActive.value === "") {
-        activeIndex.value = i;
-        currentActive.value = it.props.name;
-      } else if (currentActive.value === it.props.name) {
-        activeIndex.value = i;
-      }
-      return withDirectives(
-        h(it, {
-          key: it.props.name
-        }),
-        [[vShow, currentActive.value === "" || currentActive.value === it.props.name]]
-      );
-    };
     const renderContent = () => {
       let defaultindex = -1;
       return h(
@@ -140,18 +123,43 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         })
       );
     };
-    const btnBar = ref();
+    const contentHandle = (it, i) => {
+      if (currentActive.value === it.props.name) {
+        activeIndex.value = i;
+      }
+      return withDirectives(
+        h(it, {
+          key: it.props.name
+        }),
+        [[vShow, activeIndex.value === i]]
+      );
+    };
+    const observerRef = ref();
+    let observer;
     onMounted(() => {
-      if (showBaseline.value) {
-        const aim = btnBar.value.children[activeIndex.value];
-        arrowWidth.value = aim.children[0].innerHTML.length * 14;
+      observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const aim = observerRef.value.children[activeIndex.value];
+            arrowWidth.value = aim.offsetWidth;
+            arrowNum.value = aim.offsetLeft;
+          }
+        });
+      });
+      if (observerRef.value) {
+        observer.observe(observerRef.value);
+      }
+    });
+    onUnmounted(() => {
+      if (observerRef.value) {
+        observer.unobserve(observerRef.value);
       }
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(renderBar, {
-          ref_key: "btnBar",
-          ref: btnBar
+          ref_key: "observerRef",
+          ref: observerRef
         }, null, 512),
         showBaseline.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
           createElementVNode("div", {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninemoon-ui",
   "private": false,
-  "version": "0.0.19",
+  "version": "0.0.20",
   "author": "zhuboy",
   "keywords": [
     "vue3",