@appmax_npm/ds-prime 1.0.0-alpha.143 → 1.0.0-alpha.144

package/amtabs/index.js

@@ -1,9 +1,9 @@
-import { defineComponent as _, mergeModels as p, ref as o, useModel as v, onMounted as b, openBlock as r, createElementBlock as u, Fragment as y, renderList as k, createBlock as V, withCtx as m, createVNode as T, createTextVNode as g, toDisplayString as x, createElementVNode as A, normalizeStyle as h } from "vue";
-import { _ as B } from "../AmText.vue_vue_type_script_setup_true_lang-yjw50cPR.js";
-import C from "../ambutton/index.js";
-import { _ as E } from "../_plugin-vue_export-helper-CHgC5LLL.js";
-const M = { name: "AmTabs" }, $ = /* @__PURE__ */ _({
-  ...M,
+import { defineComponent as b, mergeModels as p, ref as s, useModel as y, onMounted as g, openBlock as n, createElementBlock as f, Fragment as k, renderList as T, createBlock as V, withCtx as d, createVNode as h, createTextVNode as A, toDisplayString as x, createElementVNode as B, normalizeStyle as C } from "vue";
+import { _ as E } from "../AmText.vue_vue_type_script_setup_true_lang-yjw50cPR.js";
+import M from "../ambutton/index.js";
+import { _ as S } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const $ = { name: "AmTabs" }, w = /* @__PURE__ */ b({
+  ...$,
   props: /* @__PURE__ */ p({
     tabs: { default: () => [] },
     modelValue: {}
@@ -12,43 +12,47 @@ const M = { name: "AmTabs" }, $ = /* @__PURE__ */ _({
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(i) {
-    const n = o(0), s = o(0), t = v(i, "modelValue"), a = o(null), f = async (e) => {
-      t.value !== e && (t.value = e, c());
-    }, c = () => {
-      if (!a.value) return;
-      const e = a.value.querySelectorAll(".am-tab")[t.value];
-      e && (n.value = e.clientWidth, s.value = e.offsetLeft);
+  setup(u) {
+    const a = u, c = s(0), m = s(0), t = y(u, "modelValue"), l = s(null), v = async (e) => {
+      e < 0 || e >= a.tabs.length || t.value !== e && (t.value = e, i());
+    }, i = () => {
+      l.value && setTimeout(() => {
+        var r;
+        const e = (r = l.value) == null ? void 0 : r.querySelectorAll(".am-tab")[t.value];
+        e && (c.value = e.clientWidth, m.value = e.offsetLeft);
+      }, 0);
     };
-    return b(c), (e, w) => (r(), u("div", {
+    return g(() => {
+      (t.value < 0 || t.value >= a.tabs.length) && (t.value = 0), i();
+    }), (e, r) => (n(), f("div", {
       ref_key: "parentElement",
-      ref: a,
+      ref: l,
       class: "w-full flex items-center border-b border-gray-200 relative"
     }, [
-      (r(!0), u(y, null, k(e.tabs, (d, l) => (r(), V(C, {
-        "data-active": t.value === l,
-        key: l,
+      (n(!0), f(k, null, T(a.tabs, (_, o) => (n(), V(M, {
+        "data-active": String(t.value.value === o),
+        key: o,
         class: "am-tab",
-        onClick: (L) => f(l),
+        onClick: (L) => v(o),
         text: ""
       }, {
-        default: m(() => [
-          T(B, { class: "am-tab__label" }, {
-            default: m(() => [
-              g(x(d), 1)
+        default: d(() => [
+          h(E, { class: "am-tab__label" }, {
+            default: d(() => [
+              A(x(_), 1)
             ]),
             _: 2
           }, 1024)
         ]),
         _: 2
       }, 1032, ["data-active", "onClick"]))), 128)),
-      A("span", {
-        style: h({ scale: `${n.value} 1`, translate: `${s.value}px` }),
+      B("span", {
+        style: C({ transform: `translateX(${m.value}px) scaleX(${c.value})` }),
         class: "am-tab__line bg-primary-500 absolute left-0"
       }, null, 4)
     ], 512));
   }
-}), z = /* @__PURE__ */ E($, [["__scopeId", "data-v-81f00e50"]]);
+}), z = /* @__PURE__ */ S(w, [["__scopeId", "data-v-1431ab61"]]);
 export {
   z as default
 };