vlite3 1.4.28 → 1.4.31

package/components/Tabes/Tabes.vue2.js

@@ -1,9 +1,11 @@
-import { defineComponent as Y, ref as d, watch as g, onMounted as Z, computed as v, openBlock as m, createElementBlock as z, normalizeClass as l, withDirectives as x, createVNode as y, vShow as h, createElementVNode as f, normalizeStyle as ee, createCommentVNode as j, Fragment as te, renderList as re, createBlock as M, resolveDynamicComponent as ae, mergeProps as ne, withCtx as oe, toDisplayString as se, nextTick as le } from "vue";
-import { useResizeObserver as T } from "@vueuse/core";
-import R from "../Icon.vue.js";
-import A from "../FadeOverlay/FadeOverlay.vue.js";
-import { $t as ie } from "../../utils/i18n.js";
-const ce = ["data-variant"], me = /* @__PURE__ */ Y({
+import { defineComponent as fe, ref as g, computed as f, watch as p, onMounted as me, openBlock as m, createElementBlock as k, normalizeClass as o, withDirectives as C, createVNode as h, vShow as z, createElementVNode as c, normalizeStyle as ve, createCommentVNode as O, Fragment as W, renderList as ge, unref as K, createBlock as B, withCtx as P, toDisplayString as F, resolveDynamicComponent as be, mergeProps as pe, nextTick as he } from "vue";
+import { useResizeObserver as G } from "@vueuse/core";
+import { getActiveMarkerKey as xe, isMenuTab as H, isTabActive as q } from "./tabes.utils.js";
+import x from "../Icon.vue.js";
+import J from "../FadeOverlay/FadeOverlay.vue.js";
+import we from "../Dropdown/Dropdown.vue.js";
+import { $t as ye } from "../../utils/i18n.js";
+const ke = ["dir"], Ce = ["data-variant"], ze = ["aria-selected", "aria-expanded", "disabled"], Le = /* @__PURE__ */ fe({
   __name: "Tabes",
   props: {
     options: {},
@@ -13,95 +15,109 @@ const ce = ["data-variant"], me = /* @__PURE__ */ Y({
     block: { type: Boolean, default: !1 },
     textClass: {},
     wrap: { type: Boolean, default: !1 },
-    tabClass: {}
+    tabClass: {},
+    direction: { default: "ltr" }
   },
-  emits: ["update:modelValue", "change"],
-  setup(c, { emit: E }) {
-    const t = c, $ = E, b = d(null), i = d(null), p = d(/* @__PURE__ */ new Map()), w = d(!1), C = d(!1), o = () => {
-      if (!i.value) return;
-      const { scrollLeft: e, scrollWidth: a, clientWidth: r } = i.value;
-      w.value = e > 1, C.value = Math.ceil(e + r) < a - 1;
-    }, S = (e) => {
-      i.value && i.value.scrollBy({ left: e, behavior: "smooth" });
-    }, V = () => {
-      if (!i.value || !b.value) return;
-      const e = p.value.get(t.modelValue);
-      if (!e) return;
-      const a = i.value, r = e.getBoundingClientRect(), n = a.getBoundingClientRect(), s = 40;
-      r.left < n.left + s ? a.scrollBy({
-        left: r.left - n.left - s,
+  emits: ["update:modelValue", "change", "menu-select", "menu-open", "menu-close"],
+  setup(l, { emit: Q }) {
+    const n = l, v = Q, w = g(null), u = g(null), y = g(/* @__PURE__ */ new Map()), S = g(!1), $ = g(!1), i = () => {
+      if (!u.value) return;
+      const { scrollLeft: t, scrollWidth: a, clientWidth: e } = u.value;
+      S.value = t > 1, $.value = Math.ceil(t + e) < a - 1;
+    }, M = (t) => {
+      u.value && u.value.scrollBy({ left: t, behavior: "smooth" });
+    }, L = f(() => xe(n.options, n.modelValue)), I = () => {
+      if (!u.value || !w.value) return;
+      const t = L.value;
+      if (t === void 0) return;
+      const a = y.value.get(t);
+      if (!a) return;
+      const e = u.value, r = a.getBoundingClientRect(), s = e.getBoundingClientRect(), b = 40;
+      r.left < s.left + b ? e.scrollBy({
+        left: r.left - s.left - b,
         behavior: "smooth"
-      }) : r.right > n.right - s && a.scrollBy({
-        left: r.right - n.right + s,
+      }) : r.right > s.right - b && e.scrollBy({
+        left: r.right - s.right + b,
         behavior: "smooth"
       });
     };
-    T(i, o);
-    const O = (e, a) => {
-      e ? p.value.set(a, e) : p.value.delete(a);
-    }, k = d({
+    G(u, i);
+    const T = (t, a) => {
+      t ? y.value.set(a, t) : y.value.delete(a);
+    }, R = g({
       width: "0px",
       height: "0px",
       transform: "translate(0px, 0px)",
       opacity: 0
-    }), B = d(!1), u = async () => {
-      await le();
-      const e = b.value, a = p.value.get(t.modelValue);
-      if (!e || !a) {
-        k.value.opacity = 0;
+    }), V = g(!1), d = async () => {
+      await he();
+      const t = w.value, a = L.value, e = a !== void 0 ? y.value.get(a) : void 0;
+      if (!t || !e) {
+        R.value.opacity = 0;
         return;
       }
-      const r = e.getBoundingClientRect(), n = a.getBoundingClientRect(), s = n.left - r.left, Q = n.top - r.top, U = n.width, X = n.height;
-      k.value = {
-        width: `${U}px`,
-        height: `${X}px`,
-        transform: `translate(${s}px, ${Q}px)`,
+      const r = t.getBoundingClientRect(), s = e.getBoundingClientRect(), b = s.left - r.left, ce = s.top - r.top, ue = s.width, de = s.height;
+      R.value = {
+        width: `${ue}px`,
+        height: `${de}px`,
+        transform: `translate(${b}px, ${ce}px)`,
         opacity: 1
-      }, B.value || setTimeout(() => {
-        B.value = !0;
+      }, V.value || setTimeout(() => {
+        V.value = !0;
       }, 50);
     };
-    T(b, () => {
-      u(), o();
-    }), g(
-      () => t.modelValue,
+    G(w, () => {
+      d(), i();
+    }), p(
+      () => n.modelValue,
       async () => {
-        await u(), V();
+        await d(), I();
       }
-    ), g(
-      () => t.options,
+    ), p(
+      () => n.options,
       async () => {
-        await u(), o();
+        await d(), i();
       },
       { deep: !0 }
-    ), g(
-      () => t.size,
+    ), p(
+      () => n.size,
       async () => {
-        await u(), o();
+        await d(), i();
       }
-    ), g(
-      () => t.block,
+    ), p(
+      () => n.block,
       async () => {
-        await u(), o();
+        await d(), i();
       }
-    ), g(
-      () => t.wrap,
+    ), p(
+      () => n.wrap,
       async () => {
-        await u(), o();
+        await d(), i();
       }
-    ), Z(async () => {
-      await u(), o(), setTimeout(o, 100), setTimeout(V, 100);
+    ), me(async () => {
+      await d(), i(), setTimeout(i, 100), setTimeout(I, 100);
     });
-    const D = v(() => {
-      const e = t.variant === "line";
-      return t.block || e ? "flex w-full relative" : "inline-flex max-w-full relative";
-    }), L = v(() => [
+    const U = f(() => {
+      const t = n.variant === "line";
+      return n.block || t ? "flex w-full relative" : "inline-flex max-w-full relative";
+    }), j = f(() => [
       "absolute top-0 bottom-0 z-20 flex items-center pointer-events-none transition-opacity duration-200",
-      t.variant === "line" ? "pb-[10px]" : ""
-    ]), N = (e) => {
-      e.disabled || ($("update:modelValue", e.value), $("change", e.value));
-    }, P = v(() => {
-      const e = t.variant === "line", a = {
+      n.variant === "line" ? "pb-[10px]" : ""
+    ]), X = (t) => {
+      t.disabled || H(t) || (v("update:modelValue", t.value), v("change", t.value));
+    }, Y = (t, a) => {
+      if (t.disabled) return;
+      const e = a.value;
+      e != null && (v("update:modelValue", e), v("change", e), v("menu-select", { value: e, option: a.option, tab: t }));
+    }, Z = (t) => {
+      v("menu-open", t);
+    }, _ = (t) => {
+      v("menu-close", t), d();
+    }, ee = f(() => {
+      const t = n.variant === "line";
+      return (n.block || n.wrap) && !t ? "flex-1 min-w-max" : "shrink-0";
+    }), te = (t) => t.dropdown?.direction ?? n.direction, ne = f(() => {
+      const t = n.variant === "line", a = {
         surface: "bg-secondary/80 p-1",
         primary: "bg-secondary p-1",
         secondary: "bg-secondary p-1",
@@ -109,52 +125,52 @@ const ce = ["data-variant"], me = /* @__PURE__ */ Y({
         success: "bg-success/10 p-1",
         outline: "bg-transparent border border-border p-1",
         line: "bg-transparent gap-6 rounded-none p-0 border-b border-border"
-      }, r = t.wrap && !e ? "flex-wrap" : "";
-      return [`${t.block || e ? "flex min-w-full w-max" : "inline-flex"} rounded-lg relative isolate ${r}`, a[t.variant]];
-    }), I = v(() => t.variant === "surface" || t.variant === "primary" || t.variant === "secondary" ? "var(--color-secondary)" : t.variant === "danger" ? "color-mix(in srgb, var(--color-danger) 10%, transparent)" : t.variant === "success" ? "color-mix(in srgb, var(--color-success) 10%, transparent)" : "var(--color-background)"), W = {
+      }, e = n.wrap && !t ? "flex-wrap" : "";
+      return [`${n.block || t ? "flex min-w-full w-max" : "inline-flex"} rounded-lg relative isolate ${e}`, a[n.variant]];
+    }), A = f(() => n.variant === "surface" || n.variant === "primary" || n.variant === "secondary" ? "var(--color-secondary)" : n.variant === "danger" ? "color-mix(in srgb, var(--color-danger) 10%, transparent)" : n.variant === "success" ? "color-mix(in srgb, var(--color-success) 10%, transparent)" : "var(--color-background)"), D = {
       sm: "text-xs px-2.5 py-1",
       md: "-text-fs-2 px-3 py-1",
       lg: "-text-fs-1 px-4 py-1"
-    }, _ = v(() => {
-      const e = t.variant === "line", a = e ? "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none outline-none pb-3 border-b-2 border-transparent hover:text-foreground shrink-0" : "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none rounded-md outline-none shrink-0", r = (t.block || t.wrap) && !e ? "flex-1" : "";
-      return [a, r];
-    }), F = (e) => {
-      const a = e.value === t.modelValue, r = t.variant === "line";
-      let n = "";
+    }, re = f(() => {
+      const t = n.variant === "line", a = t ? "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none outline-none pb-3 border-b-2 border-transparent hover:text-foreground shrink-0" : "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none rounded-md outline-none shrink-0", e = (n.block || n.wrap) && !t ? "flex-1" : "";
+      return [a, e];
+    }), E = (t) => {
+      const a = q(t, n.modelValue), e = n.variant === "line";
+      let r = "";
       if (a)
-        if (r)
-          n = t.wrap ? "text-primary !border-primary" : "text-primary";
+        if (e)
+          r = n.wrap ? "text-primary !border-primary" : "text-primary";
         else
-          switch (t.variant) {
+          switch (n.variant) {
             case "surface":
-              n = t.wrap ? "text-foreground bg-[#ffff] dark:bg-[#0B0B0B] shadow-sm" : "text-foreground";
+              r = n.wrap ? "text-foreground bg-[#ffff] dark:bg-[#0B0B0B] shadow-sm" : "text-foreground";
               break;
             case "primary":
-              n = t.wrap ? "text-primary-foreground bg-primary" : "text-primary-foreground";
+              r = n.wrap ? "text-primary-foreground bg-primary" : "text-primary-foreground";
               break;
             case "secondary":
-              n = t.wrap ? "text-secondary bg-secondary-foreground" : "text-secondary";
+              r = n.wrap ? "text-secondary bg-secondary-foreground" : "text-secondary";
               break;
             case "danger":
-              n = t.wrap ? "text-danger-fg bg-danger" : "text-danger-fg";
+              r = n.wrap ? "text-danger-fg bg-danger" : "text-danger-fg";
               break;
             case "success":
-              n = t.wrap ? "text-success-fg bg-success" : "text-success-fg";
+              r = n.wrap ? "text-success-fg bg-success" : "text-success-fg";
               break;
             case "outline":
-              n = t.wrap ? "text-accent-foreground bg-accent/50 ring-1 ring-border" : "text-accent-foreground";
+              r = n.wrap ? "text-accent-foreground bg-accent/50 ring-1 ring-border" : "text-accent-foreground";
               break;
             default:
-              n = "text-foreground";
+              r = "text-foreground";
           }
       else
-        n = r ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
-      const s = e.disabled ? "opacity-50 cursor-not-allowed" : "";
-      return [_.value, n, t?.tabClass, s].join(" ");
-    }, q = v(() => {
-      const a = `absolute left-0 top-0 z-0 pointer-events-none ${B.value ? "transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]" : ""}`;
-      return t.variant === "line" ? `${a} !h-[2px] !top-auto bottom-0` : `${a} rounded-md shadow-sm`;
-    }), G = () => ({
+        r = e ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
+      const s = t.disabled ? "opacity-50 cursor-not-allowed" : "";
+      return [re.value, r, n?.tabClass, s].join(" ");
+    }, ae = f(() => {
+      const a = `absolute left-0 top-0 z-0 pointer-events-none ${V.value ? "transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]" : ""}`;
+      return n.variant === "line" ? `${a} !h-[2px] !top-auto bottom-0` : `${a} rounded-md shadow-sm`;
+    }), se = () => ({
       surface: "bg-[#ffff] dark:bg-[#0B0B0B]",
       primary: "bg-primary",
       secondary: "bg-secondary-foreground",
@@ -162,112 +178,175 @@ const ce = ["data-variant"], me = /* @__PURE__ */ Y({
       success: "bg-success",
       outline: "bg-accent/50 ring-1 ring-border",
       line: "bg-primary"
-    })[t.variant], H = (e) => e.labelI18n ? ie(e.labelI18n) : e.label, J = (e) => e.to ? "router-link" : e.href ? "a" : "button", K = (e) => e.to ? { to: e.to } : e.href ? { href: e.href, target: "_blank", rel: "noopener noreferrer" } : { type: "button" };
-    return (e, a) => (m(), z("div", {
-      class: l([D.value, "group"])
+    })[n.variant], N = (t) => t.labelI18n ? ye(t.labelI18n) : t.label, oe = (t) => t.to ? "router-link" : t.href ? "a" : "button", le = (t) => t.to ? { to: t.to } : t.href ? { href: t.href, target: "_blank", rel: "noopener noreferrer" } : { type: "button" }, ie = (t) => [
+      n.size === "sm" ? "w-3 h-3" : "w-3.5 h-3.5",
+      "opacity-70 shrink-0 transition-transform duration-200",
+      t ? "rotate-180" : ""
+    ].join(" ");
+    return (t, a) => (m(), k("div", {
+      class: o([U.value, "group"]),
+      dir: l.direction
     }, [
-      x(y(A, {
+      C(h(J, {
         direction: "left",
-        color: I.value,
+        color: A.value,
         coverage: "100px",
         blur: "40px",
         easing: "smooth",
         tintOpacity: 1,
-        class: l(["z-10 pointer-events-none", t.variant === "line" ? "" : "rounded-l-lg"])
+        class: o(["z-10 pointer-events-none", n.variant === "line" ? "" : "rounded-l-lg"])
       }, null, 8, ["color", "class"]), [
-        [h, w.value]
+        [z, S.value]
       ]),
-      x(f("div", {
-        class: l(["left-0 pl-1", L.value])
+      C(c("div", {
+        class: o(["left-0 pl-1", j.value])
       }, [
-        f("button", {
-          onClick: a[0] || (a[0] = (r) => S(-200)),
+        c("button", {
+          onClick: a[0] || (a[0] = (e) => M(-200)),
           class: "pointer-events-auto h-full px-1 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors focus:outline-none",
           "aria-label": "Scroll left"
         }, [
-          y(R, {
+          h(x, {
             icon: "lucide:chevron-left",
             class: "w-5 h-5"
           })
         ])
       ], 2), [
-        [h, w.value]
+        [z, S.value]
       ]),
-      f("div", {
+      c("div", {
         ref_key: "scrollRef",
-        ref: i,
+        ref: u,
         class: "flex-1 min-w-0 max-w-full overflow-x-auto scrollbar-hide scroll-smooth",
-        onScroll: o
+        onScroll: i
       }, [
-        f("div", {
+        c("div", {
           ref_key: "containerRef",
-          ref: b,
-          class: l([P.value, "tabes-container"]),
+          ref: w,
+          class: o([ne.value, "tabes-container"]),
           role: "tablist",
-          "data-variant": t.variant,
+          "data-variant": n.variant,
           "data-tabes": ""
         }, [
-          c.modelValue !== void 0 && !c.wrap ? (m(), z("div", {
+          l.modelValue !== void 0 && !l.wrap ? (m(), k("div", {
             key: 0,
-            class: l([q.value, G()]),
-            style: ee(k.value)
-          }, null, 6)) : j("", !0),
-          (m(!0), z(te, null, re(c.options, (r) => (m(), M(ae(J(r)), ne({
-            key: r.value,
-            ref_for: !0,
-            ref: (n) => O(n?.$el || n, r.value),
-            role: "tab",
-            "data-tabes-item": "",
-            "aria-selected": c.modelValue === r.value,
-            disabled: r.disabled,
-            class: [F(r), W[t.size]]
-          }, { ref_for: !0 }, K(r), {
-            onClick: (n) => N(r)
-          }), {
-            default: oe(() => [
-              r.icon ? (m(), M(R, {
-                key: 0,
-                icon: r.icon,
-                class: l(c.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
-              }, null, 8, ["icon", "class"])) : j("", !0),
-              f("span", {
-                class: l(["whitespace-nowrap z-20 relative", c.textClass])
-              }, se(H(r)), 3)
-            ]),
-            _: 2
-          }, 1040, ["aria-selected", "disabled", "class", "onClick"]))), 128))
-        ], 10, ce)
+            class: o([ae.value, se()]),
+            style: ve(R.value)
+          }, null, 6)) : O("", !0),
+          (m(!0), k(W, null, ge(l.options, (e) => (m(), k(W, {
+            key: e.value
+          }, [
+            K(H)(e) ? (m(), B(we, {
+              key: 0,
+              options: e.menu,
+              selected: l.modelValue,
+              disabled: e.disabled,
+              direction: te(e),
+              position: e.dropdown?.position,
+              offset: e.dropdown?.offset ?? [0, 8],
+              searchable: e.dropdown?.searchable ?? !1,
+              "close-on-select": e.dropdown?.closeOnSelect ?? !0,
+              "max-height": e.dropdown?.maxHeight ?? "300px",
+              "min-width": e.dropdown?.minWidth ?? "160px",
+              width: e.dropdown?.width,
+              "menu-id": e.dropdown?.menuId ?? `tabes-menu-${e.value}`,
+              teleport: e.dropdown?.teleport ?? !0,
+              "show-selected-label": !1,
+              "show-selected-icon": !1,
+              "toggle-selection": !1,
+              selectable: !0,
+              class: o(["tabes-menu", "inline-flex!", ee.value]),
+              onOnSelect: (r) => Y(e, r),
+              onOnOpen: () => Z(e),
+              onOnClose: () => _(e)
+            }, {
+              trigger: P(({ isOpen: r }) => [
+                c("button", {
+                  ref_for: !0,
+                  ref: (s) => T(s, e.value),
+                  type: "button",
+                  role: "tab",
+                  "data-tabes-item": "",
+                  "data-tabes-menu-trigger": "",
+                  "aria-selected": K(q)(e, l.modelValue),
+                  "aria-haspopup": !0,
+                  "aria-expanded": r,
+                  disabled: e.disabled,
+                  class: o([E(e), D[n.size], "w-full"])
+                }, [
+                  e.icon ? (m(), B(x, {
+                    key: 0,
+                    icon: e.icon,
+                    class: o(l.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
+                  }, null, 8, ["icon", "class"])) : O("", !0),
+                  c("span", {
+                    class: o(["whitespace-nowrap z-20 relative", l.textClass])
+                  }, F(N(e)), 3),
+                  h(x, {
+                    icon: "lucide:chevron-down",
+                    class: o(ie(r)),
+                    "aria-hidden": "true"
+                  }, null, 8, ["class"])
+                ], 10, ze)
+              ]),
+              _: 2
+            }, 1032, ["options", "selected", "disabled", "direction", "position", "offset", "searchable", "close-on-select", "max-height", "min-width", "width", "menu-id", "teleport", "class", "onOnSelect", "onOnOpen", "onOnClose"])) : (m(), B(be(oe(e)), pe({
+              key: 1,
+              ref_for: !0,
+              ref: (r) => T(r?.$el || r, e.value),
+              role: "tab",
+              "data-tabes-item": "",
+              "aria-selected": l.modelValue === e.value,
+              disabled: e.disabled,
+              class: [E(e), D[n.size]]
+            }, { ref_for: !0 }, le(e), {
+              onClick: (r) => X(e)
+            }), {
+              default: P(() => [
+                e.icon ? (m(), B(x, {
+                  key: 0,
+                  icon: e.icon,
+                  class: o(l.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
+                }, null, 8, ["icon", "class"])) : O("", !0),
+                c("span", {
+                  class: o(["whitespace-nowrap z-20 relative", l.textClass])
+                }, F(N(e)), 3)
+              ]),
+              _: 2
+            }, 1040, ["aria-selected", "disabled", "class", "onClick"]))
+          ], 64))), 128))
+        ], 10, Ce)
       ], 544),
-      x(y(A, {
+      C(h(J, {
         direction: "right",
-        color: I.value,
+        color: A.value,
         coverage: "100px",
         blur: "40",
         easing: "smooth",
         tintOpacity: 1,
-        class: l(["z-10 pointer-events-none", t.variant === "line" ? "" : "rounded-r-lg"])
+        class: o(["z-10 pointer-events-none", n.variant === "line" ? "" : "rounded-r-lg"])
       }, null, 8, ["color", "class"]), [
-        [h, C.value]
+        [z, $.value]
       ]),
-      x(f("div", {
-        class: l(["right-0 pr-1", L.value])
+      C(c("div", {
+        class: o(["right-0 pr-1", j.value])
       }, [
-        f("button", {
-          onClick: a[1] || (a[1] = (r) => S(200)),
+        c("button", {
+          onClick: a[1] || (a[1] = (e) => M(200)),
           class: "pointer-events-auto h-full px-1 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors focus:outline-none",
           "aria-label": "Scroll right"
         }, [
-          y(R, {
+          h(x, {
             icon: "lucide:chevron-right",
             class: "w-5 h-5"
           })
         ])
       ], 2), [
-        [h, C.value]
+        [z, $.value]
       ])
-    ], 2));
+    ], 10, ke));
   }
 });
 export {
-  me as default
+  Le as default
 };

package/components/Tabes/tabes.utils.d.ts

@@ -0,0 +1,14 @@
+import { IDropdownOption } from '../../types';
+import { TabesOption } from './types';
+/** Whether the tab option is a dropdown menu trigger */
+export declare function isMenuTab(option: TabesOption): boolean;
+export declare function getMenuOptionValue(option: IDropdownOption): string | number | undefined;
+/** Recursively check if a menu tree contains the given value */
+export declare function menuContainsValue(menu: IDropdownOption[] | undefined, value: string | number): boolean;
+/** Whether a tab (standard or menu parent) should appear active for the current modelValue */
+export declare function isTabActive(option: TabesOption, modelValue: string | number): boolean;
+/**
+ * Resolve which tab option value should own the animated marker.
+ * For menu tabs, returns the parent tab's value when a child is selected.
+ */
+export declare function getActiveMarkerKey(options: TabesOption[], modelValue: string | number): string | number | undefined;

package/components/Tabes/tabes.utils.js

@@ -0,0 +1,26 @@
+function t(e) {
+  return Array.isArray(e.menu) && e.menu.length > 0;
+}
+function f(e) {
+  return e.value !== void 0 && e.value !== null ? e.value : e.label;
+}
+function u(e, r) {
+  if (!e?.length) return !1;
+  for (const n of e)
+    if (f(n) === r || n.children?.length && u(n.children, r)) return !0;
+  return !1;
+}
+function i(e, r) {
+  return t(e) ? e.value === r || u(e.menu, r) : e.value === r;
+}
+function a(e, r) {
+  for (const n of e)
+    if (i(n, r)) return n.value;
+}
+export {
+  a as getActiveMarkerKey,
+  f as getMenuOptionValue,
+  t as isMenuTab,
+  i as isTabActive,
+  u as menuContainsValue
+};

package/components/Tabes/types.d.ts

@@ -1,3 +1,21 @@
+import { IDropdownOption } from '../../types';
+import { TooltTipPlacement } from 'v-tooltip-lite/types';
+/**
+ * Optional Dropdown configuration for a menu tab.
+ * Forwards a subset of the existing Dropdown API — no duplicated menu logic.
+ */
+export interface TabesDropdownConfig {
+    position?: TooltTipPlacement;
+    offset?: [number, number];
+    direction?: 'ltr' | 'rtl';
+    searchable?: boolean;
+    closeOnSelect?: boolean;
+    maxHeight?: string;
+    minWidth?: string;
+    width?: string;
+    menuId?: string;
+    teleport?: boolean;
+}
 export interface TabesOption {
     label: string;
     labelI18n?: string;
@@ -9,6 +27,20 @@ export interface TabesOption {
         [key: string]: any;
     };
     href?: string;
+    /**
+     * When provided, this tab becomes a dropdown menu trigger.
+     * Opening the menu does not change `v-model`. Selecting a menu item
+     * updates `v-model` to that item's value and emits `change` / `menu-select`.
+     * Reuses the existing `IDropdownOption` contract from Dropdown.
+     */
+    menu?: IDropdownOption[];
+    /** Optional Dropdown configuration for this menu tab */
+    dropdown?: TabesDropdownConfig;
 }
 export type TabesSize = 'sm' | 'md' | 'lg';
 export type TabesVariant = 'surface' | 'primary' | 'secondary' | 'danger' | 'success' | 'outline' | 'line';
+export type TabesMenuSelectPayload = {
+    value: any;
+    option?: IDropdownOption;
+    tab: TabesOption;
+};

package/components/Workbook/Workbook.vue.d.ts

@@ -33,9 +33,9 @@ declare const __VLS_component: import('vue').DefineComponent<WorkbookProps, {},
 }>, {
     variant: "chrome" | "folder" | "simple" | "card";
     itemClass: string;
+    draggable: boolean;
     modelValue: string;
     editable: boolean;
-    draggable: boolean;
     confirmDelete: boolean;
     allowIconChange: boolean;
     activeItemClass: string;

package/core/config.d.ts

@@ -38,6 +38,9 @@ export declare const configState: {
         datetime?: {
             format?: string;
         };
+        googleMap?: {
+            apiKey?: string;
+        };
         empty?: {
             variant?: import('..').EmptyVariant;
         };
@@ -217,6 +220,9 @@ export declare function useVLiteConfig(): {
         datetime?: {
             format?: string;
         };
+        googleMap?: {
+            apiKey?: string;
+        };
         empty?: {
             variant?: import('..').EmptyVariant;
         };