vlite3 1.4.41 → 1.5.1

package/components/Tabes/Tabes.vue2.js

@@ -1,13 +1,15 @@
-import { defineComponent as Te, ref as f, computed as o, watch as m, onMounted as De, onBeforeUnmount as Ie, openBlock as v, createElementBlock as M, normalizeClass as l, withDirectives as A, createVNode as w, vShow as F, createElementVNode as u, normalizeStyle as je, createCommentVNode as j, Fragment as ee, renderList as qe, unref as te, createBlock as O, withCtx as re, toDisplayString as ne, withMemo as Pe, resolveDynamicComponent as He, mergeProps as Ne, nextTick as We } from "vue";
-import { useResizeObserver as ae } from "@vueuse/core";
-import { getActiveMarkerKey as Ge, isMenuTab as se, isTabActive as oe, scrollTabesStrip as le, getTabesScrollOverflow as Ke } from "./tabes.utils.js";
-import { measureTabesMarkerGeometry as Qe, toTabesLocalScrollDelta as ie } from "./TabesMarkerGeometry.js";
-import y from "../Icon.vue.js";
-import ce from "../FadeOverlay/FadeOverlay.vue.js";
-import Ue from "../Dropdown/Dropdown.vue.js";
-import { $t as Je } from "../../utils/i18n.js";
-import { useRtl as Xe, resolveDirFromAncestors as Ye } from "../../composables/useRtl.js";
-const Ze = ["dir"], _e = ["data-variant"], et = ["aria-selected", "aria-expanded", "disabled"], ue = 200, ut = /* @__PURE__ */ Te({
+import { defineComponent as qe, ref as d, computed as l, watch as b, onMounted as Ke, onBeforeUnmount as Ne, openBlock as h, createElementBlock as M, normalizeClass as i, withDirectives as D, createVNode as C, vShow as A, createElementVNode as g, normalizeStyle as He, createCommentVNode as N, Fragment as ne, renderList as We, unref as se, createBlock as F, withCtx as oe, toDisplayString as le, withMemo as Ge, resolveDynamicComponent as Qe, mergeProps as Ue, nextTick as Je } from "vue";
+import { useResizeObserver as ie } from "@vueuse/core";
+import { useDraggable as Xe } from "vue-draggable-plus";
+import { hashTabesValues as Ye, getActiveMarkerKey as Ze, isMenuTab as ce, isTabActive as ue, scrollTabesStrip as de, getTabesScrollOverflow as _e } from "./tabes.utils.js";
+import { measureTabesMarkerGeometry as et, toTabesLocalScrollDelta as fe } from "./TabesMarkerGeometry.js";
+import S from "../Icon.vue.js";
+import me from "../FadeOverlay/FadeOverlay.vue.js";
+import tt from "../Dropdown/Dropdown.vue.js";
+import { $t as rt } from "../../utils/i18n.js";
+import { useRtl as at, resolveDirFromAncestors as nt } from "../../composables/useRtl.js";
+import { usePersistentState as st } from "../../utils/usePersistentState.js";
+const ot = ["dir"], lt = ["data-variant"], it = ["aria-selected", "aria-expanded", "disabled"], ve = 200, yt = /* @__PURE__ */ qe({
   __name: "Tabes",
   props: {
     options: {},
@@ -18,135 +20,183 @@ const Ze = ["dir"], _e = ["data-variant"], et = ["aria-selected", "aria-expanded
     textClass: {},
     wrap: { type: Boolean, default: !1 },
     tabClass: {},
-    direction: { default: "auto" }
+    direction: { default: "auto" },
+    sortable: { type: Boolean, default: !1 },
+    storageKey: {}
   },
-  emits: ["update:modelValue", "change", "menu-select", "menu-open", "menu-close"],
-  setup(s, { emit: de }) {
-    const r = s, b = de, q = f(null), k = f(null), d = f(null), g = /* @__PURE__ */ new Map(), P = Xe(), L = f(null), C = o(() => r.direction === "rtl" ? "rtl" : r.direction === "ltr" ? "ltr" : L.value ? L.value : P.value ? "rtl" : "ltr"), S = o(() => C.value === "rtl"), H = () => {
-      L.value = Ye(q.value);
-    }, V = f(!1), z = f(!1);
-    let E = 0, N = 0, B = !1, $ = !1, T = 0;
-    const W = () => {
-      if (!d.value) return;
-      const { canScrollStart: e, canScrollEnd: n } = Ke(
-        d.value
+  emits: ["update:modelValue", "change", "menu-select", "menu-open", "menu-close", "reorder", "update:options"],
+  setup(o, { emit: be }) {
+    const r = o, f = be, H = d(null), k = d(null), p = d(null), y = /* @__PURE__ */ new Map(), W = at(), E = d(null), V = l(() => r.direction === "rtl" ? "rtl" : r.direction === "ltr" ? "ltr" : E.value ? E.value : W.value ? "rtl" : "ltr"), z = l(() => V.value === "rtl"), G = () => {
+      E.value = nt(H.value);
+    }, Q = r.sortable ? st(
+      `tabes-order-${r.storageKey ?? `auto-${Ye(r.options)}`}`,
+      [],
+      { writeDefaults: !1 }
+    ) : d([]), L = (e) => {
+      if (!r.sortable) return [...e];
+      const a = Q.value;
+      if (!a?.length) return [...e];
+      const t = new Map(e.map((s) => [s.value, s])), n = [];
+      for (const s of a) {
+        const u = t.get(s);
+        u && (n.push(u), t.delete(s));
+      }
+      for (const s of e) t.has(s.value) && n.push(s);
+      return n;
+    }, m = d(L(r.options)), ge = () => {
+      const e = m.value.map((a) => a.value);
+      Q.value = e, f("reorder", { options: [...m.value], order: e }), f("update:options", [...m.value]), c({ ensureVisible: !0 });
+    }, pe = (e) => {
+      const { item: a, from: t, oldIndex: n, oldDraggableIndex: s, newDraggableIndex: u } = e;
+      a.parentNode?.removeChild(a);
+      const K = typeof n == "number" ? t.children[n] ?? null : null;
+      if (t.insertBefore(a, K), s == null || u == null || s === u)
+        return;
+      const v = [...m.value], [x] = v.splice(s, 1);
+      x && (v.splice(u, 0, x), m.value = v, ge());
+    }, B = d(!1), $ = d(!1);
+    let T = 0, U = 0, R = !1, O = !1, I = 0;
+    const J = () => {
+      if (!p.value) return;
+      const { canScrollStart: e, canScrollEnd: a } = _e(
+        p.value
       );
-      V.value !== e && (V.value = e), z.value !== n && (z.value = n);
-    }, fe = () => {
-      $ || ($ = !0, N = requestAnimationFrame(() => {
-        $ = !1, W();
+      B.value !== e && (B.value = e), $.value !== a && ($.value = a);
+    }, he = () => {
+      O || (O = !0, U = requestAnimationFrame(() => {
+        O = !1, J();
       }));
-    }, me = () => le(d.value, "start", ue), ve = () => le(d.value, "end", ue), G = o(() => Ge(r.options, r.modelValue)), be = () => {
-      if (!d.value || !k.value) return;
-      const e = G.value;
+    }, xe = () => de(p.value, "start", ve), ye = () => de(p.value, "end", ve), X = l(() => Ze(r.options, r.modelValue)), we = () => {
+      if (!p.value || !k.value) return;
+      const e = X.value;
       if (e === void 0) return;
-      const n = g.get(e);
-      if (!n) return;
-      const t = d.value, a = n.getBoundingClientRect(), i = t.getBoundingClientRect(), p = 40;
-      a.left < i.left + p ? t.scrollBy({
-        left: ie(
+      const a = y.get(e);
+      if (!a) return;
+      const t = p.value, n = a.getBoundingClientRect(), s = t.getBoundingClientRect(), u = 40;
+      n.left < s.left + u ? t.scrollBy({
+        left: fe(
           t,
-          a.left - i.left - p
+          n.left - s.left - u
         ),
         behavior: "smooth"
-      }) : a.right > i.right - p && t.scrollBy({
-        left: ie(
+      }) : n.right > s.right - u && t.scrollBy({
+        left: fe(
           t,
-          a.right - i.right + p
+          n.right - s.right + u
         ),
         behavior: "smooth"
       });
-    }, K = (e, n) => {
-      e instanceof HTMLElement ? g.set(n, e) : e && typeof e == "object" && "$el" in e && e.$el instanceof HTMLElement ? g.set(n, e.$el) : g.delete(n);
-    }, h = f({
+    }, Y = (e, a) => {
+      e instanceof HTMLElement ? y.set(a, e) : e && typeof e == "object" && "$el" in e && e.$el instanceof HTMLElement ? y.set(a, e.$el) : y.delete(a);
+    }, w = d({
       width: "0px",
       height: "0px",
       left: "0px",
       top: "0px",
       transform: "translate(0px, 0px)",
       opacity: 0
-    }), D = f(!1), Q = () => {
-      h.value.opacity !== 0 && (h.value = {
-        ...h.value,
+    }), j = d(!1), P = () => {
+      w.value.opacity !== 0 && (w.value = {
+        ...w.value,
         opacity: 0
       });
-    }, ge = async () => {
-      await We();
-      const e = k.value, n = G.value, t = n !== void 0 ? g.get(n) : void 0;
+    }, ke = async () => {
+      await Je();
+      const e = k.value, a = X.value, t = a !== void 0 ? y.get(a) : void 0;
       if (!e || !t) {
-        Q();
+        P();
         return;
       }
       if (e.offsetWidth <= 0 || t.offsetWidth <= 0) {
-        Q();
+        P();
         return;
       }
-      const { width: a, height: i, left: p, top: Ee } = Qe(e, t), x = {
-        width: `${a}px`,
-        height: `${i}px`,
+      const { width: n, height: s, left: u, top: K } = et(e, t), v = {
+        width: `${n}px`,
+        height: `${s}px`,
         left: "0px",
         top: "0px",
-        transform: `translate(${p}px, ${Ee}px)`,
+        transform: `translate(${u}px, ${K}px)`,
         opacity: 1
-      }, R = h.value;
-      R.width === x.width && R.height === x.height && R.transform === x.transform && R.opacity === x.opacity || (h.value = x, D.value || (cancelAnimationFrame(T), T = requestAnimationFrame(() => {
-        D.value = !0;
+      }, x = w.value;
+      x.width === v.width && x.height === v.height && x.transform === v.transform && x.opacity === v.opacity || (w.value = v, j.value || (cancelAnimationFrame(I), I = requestAnimationFrame(() => {
+        j.value = !0;
       })));
     };
-    let I = !1;
-    const U = async (e) => {
-      await ge(), W(), e?.ensureVisible && be();
+    let q = !1;
+    const Z = async (e) => {
+      await ke(), J(), e?.ensureVisible && we();
     }, c = (e) => {
-      e?.ensureVisible && (I = !0), !B && (B = !0, cancelAnimationFrame(E), E = requestAnimationFrame(() => {
-        B = !1;
-        const n = I;
-        I = !1, U({ ensureVisible: n });
+      e?.ensureVisible && (q = !0), !R && (R = !0, cancelAnimationFrame(T), T = requestAnimationFrame(() => {
+        R = !1;
+        const a = q;
+        q = !1, Z({ ensureVisible: a });
       }));
     };
-    ae(d, () => c()), ae(k, () => c()), m(
+    ie(p, () => c()), ie(k, () => c()), b(
       () => r.modelValue,
       () => c({ ensureVisible: !0 })
-    ), m(
+    ), b(
       () => r.options,
-      () => c()
-    ), m(
+      (e) => {
+        m.value = L(e), c();
+      }
+    ), b(
+      () => r.sortable,
+      () => {
+        m.value = L(r.options), c();
+      }
+    ), b(
       () => r.size,
       () => c()
-    ), m(
+    ), b(
       () => r.block,
       () => c()
-    ), m(
+    ), b(
       () => r.wrap,
       () => c()
-    ), m(
+    ), b(
       () => r.variant,
       () => c()
-    ), m(P, () => H()), m(C, () => c({ ensureVisible: !0 })), De(() => {
-      H(), U({ ensureVisible: !0 });
-    }), Ie(() => {
-      cancelAnimationFrame(E), cancelAnimationFrame(N), cancelAnimationFrame(T), B = !1, $ = !1, g.clear();
+    ), b(W, () => G()), b(V, () => c({ ensureVisible: !0 })), r.sortable && Xe(k, m, {
+      animation: 150,
+      draggable: "[data-tabes-sortable]",
+      filter: "[data-tabes-disabled]",
+      ghostClass: "tabes-drag-ghost",
+      chosenClass: "tabes-drag-chosen",
+      dragClass: "tabes-drag-active",
+      // Hide the marker while dragging (it can't track a moving target), then
+      // re-measure on drop so it lands on the active tab's new position.
+      onStart: () => P(),
+      onEnd: () => c(),
+      // Own the reorder so the marker child can't skew the list indices.
+      customUpdate: (e) => pe(e)
+    }), Ke(() => {
+      G(), Z({ ensureVisible: !0 });
+    }), Ne(() => {
+      cancelAnimationFrame(T), cancelAnimationFrame(U), cancelAnimationFrame(I), R = !1, O = !1, y.clear();
     });
-    const he = o(() => {
+    const Ce = l(() => {
       const e = r.variant === "line";
       return r.block || e ? "flex w-full relative" : "inline-flex max-w-full relative";
-    }), J = o(() => [
+    }), _ = l(() => [
       "absolute top-0 bottom-0 z-20 flex items-center pointer-events-none transition-opacity duration-200",
       r.variant === "line" ? "pb-[10px]" : ""
-    ]), pe = (e) => {
-      e.disabled || se(e) || (b("update:modelValue", e.value), b("change", e.value));
-    }, xe = (e, n) => {
+    ]), Se = (e) => {
+      e.disabled || ce(e) || (f("update:modelValue", e.value), f("change", e.value));
+    }, Ve = (e, a) => {
       if (e.disabled) return;
-      const t = n.value;
-      t != null && (b("update:modelValue", t), b("change", t), b("menu-select", { value: t, option: n.option, tab: e }));
-    }, we = (e) => {
-      b("menu-open", e);
-    }, ye = (e) => {
-      b("menu-close", e), c();
-    }, ke = o(() => {
+      const t = a.value;
+      t != null && (f("update:modelValue", t), f("change", t), f("menu-select", { value: t, option: a.option, tab: e }));
+    }, ze = (e) => {
+      f("menu-open", e);
+    }, Be = (e) => {
+      f("menu-close", e), c();
+    }, $e = l(() => {
       const e = r.variant === "line";
       return (r.block || r.wrap) && !e ? "flex-1 min-w-max" : "shrink-0";
-    }), Ce = (e) => e.dropdown?.direction ?? C.value, Se = o(() => S.value ? "right" : "left"), Ve = o(() => S.value ? "left" : "right"), ze = o(() => S.value ? "lucide:chevron-right" : "lucide:chevron-left"), Be = o(() => S.value ? "lucide:chevron-left" : "lucide:chevron-right"), $e = o(() => {
-      const e = r.variant === "line", n = {
+    }), Re = (e) => e.dropdown?.direction ?? V.value, Oe = l(() => z.value ? "right" : "left"), Me = l(() => z.value ? "left" : "right"), De = l(() => z.value ? "lucide:chevron-right" : "lucide:chevron-left"), Ae = l(() => z.value ? "lucide:chevron-left" : "lucide:chevron-right"), Fe = l(() => {
+      const e = r.variant === "line", a = {
         surface: "bg-secondary/80 p-1",
         primary: "bg-secondary p-1",
         secondary: "bg-secondary p-1",
@@ -155,51 +205,51 @@ const Ze = ["dir"], _e = ["data-variant"], et = ["aria-selected", "aria-expanded
         outline: "bg-transparent border border-border p-1",
         line: "bg-transparent gap-6 rounded-none p-0 border-b border-border"
       }, t = r.wrap && !e ? "flex-wrap" : "";
-      return [`${r.block || e ? "flex min-w-full w-max" : "inline-flex"} rounded-lg relative isolate ${t}`, n[r.variant]];
-    }), X = o(() => r.variant === "surface" || r.variant === "primary" || r.variant === "secondary" ? "var(--color-secondary)" : r.variant === "danger" ? "color-mix(in srgb, var(--color-danger) 10%, transparent)" : r.variant === "success" ? "color-mix(in srgb, var(--color-success) 10%, transparent)" : "var(--color-background)"), Y = {
+      return [`${r.block || e ? "flex min-w-full w-max" : "inline-flex"} rounded-lg relative isolate ${t}`, a[r.variant], r.sortable ? "is-sortable" : ""];
+    }), ee = l(() => r.variant === "surface" || r.variant === "primary" || r.variant === "secondary" ? "var(--color-secondary)" : r.variant === "danger" ? "color-mix(in srgb, var(--color-danger) 10%, transparent)" : r.variant === "success" ? "color-mix(in srgb, var(--color-success) 10%, transparent)" : "var(--color-background)"), te = {
       sm: "text-xs px-2.5 py-1",
       md: "-text-fs-2 px-3 py-1",
       lg: "-text-fs-1 px-4 py-1"
-    }, Re = o(() => {
-      const e = r.variant === "line", n = 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", t = (r.block || r.wrap) && !e ? "flex-1" : "";
-      return [n, t];
-    }), Z = (e) => {
-      const n = oe(e, r.modelValue), t = r.variant === "line";
-      let a = "";
-      if (n)
+    }, Ee = l(() => {
+      const e = r.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", t = (r.block || r.wrap) && !e ? "flex-1" : "";
+      return [a, t];
+    }), re = (e) => {
+      const a = ue(e, r.modelValue), t = r.variant === "line";
+      let n = "";
+      if (a)
         if (t)
-          a = r.wrap ? "text-primary !border-primary" : "text-primary";
+          n = r.wrap ? "text-primary !border-primary" : "text-primary";
         else
           switch (r.variant) {
             case "surface":
-              a = r.wrap ? "text-foreground bg-[#ffff] dark:bg-[#0B0B0B] shadow-sm" : "text-foreground";
+              n = r.wrap ? "text-foreground bg-[#ffff] dark:bg-[#0B0B0B] shadow-sm" : "text-foreground";
               break;
             case "primary":
-              a = r.wrap ? "text-primary-foreground bg-primary" : "text-primary-foreground";
+              n = r.wrap ? "text-primary-foreground bg-primary" : "text-primary-foreground";
               break;
             case "secondary":
-              a = r.wrap ? "text-secondary bg-secondary-foreground" : "text-secondary";
+              n = r.wrap ? "text-secondary bg-secondary-foreground" : "text-secondary";
               break;
             case "danger":
-              a = r.wrap ? "text-danger-fg bg-danger" : "text-danger-fg";
+              n = r.wrap ? "text-danger-fg bg-danger" : "text-danger-fg";
               break;
             case "success":
-              a = r.wrap ? "text-success-fg bg-success" : "text-success-fg";
+              n = r.wrap ? "text-success-fg bg-success" : "text-success-fg";
               break;
             case "outline":
-              a = r.wrap ? "text-accent-foreground bg-accent/50 ring-1 ring-border" : "text-accent-foreground";
+              n = r.wrap ? "text-accent-foreground bg-accent/50 ring-1 ring-border" : "text-accent-foreground";
               break;
             default:
-              a = "text-foreground";
+              n = "text-foreground";
           }
       else
-        a = t ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
-      const i = e.disabled ? "opacity-50 cursor-not-allowed" : "";
-      return [Re.value, a, r?.tabClass, i].join(" ");
-    }, Me = o(() => {
-      const n = `absolute z-0 pointer-events-none ${D.value ? "transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]" : ""}`;
-      return r.variant === "line" ? `${n} !h-[2px] !top-auto bottom-0` : `${n} rounded-md shadow-sm`;
-    }), Ae = () => ({
+        n = t ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
+      const s = e.disabled ? "opacity-50 cursor-not-allowed" : "";
+      return [Ee.value, n, r?.tabClass, s].join(" ");
+    }, Le = l(() => {
+      const a = `absolute z-0 pointer-events-none ${j.value ? "transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]" : ""}`;
+      return r.variant === "line" ? `${a} !h-[2px] !top-auto bottom-0` : `${a} rounded-md shadow-sm`;
+    }), Te = () => ({
       surface: "bg-[#ffff] dark:bg-[#0B0B0B]",
       primary: "bg-primary",
       secondary: "bg-secondary-foreground",
@@ -207,72 +257,74 @@ const Ze = ["dir"], _e = ["data-variant"], et = ["aria-selected", "aria-expanded
       success: "bg-success",
       outline: "bg-accent/50 ring-1 ring-border",
       line: "bg-primary"
-    })[r.variant], _ = (e) => e.labelI18n ? Je(e.labelI18n) : e.label, Fe = (e) => e.to ? "router-link" : e.href ? "a" : "button", Oe = (e) => e.to ? { to: e.to } : e.href ? { href: e.href, target: "_blank", rel: "noopener noreferrer" } : { type: "button" }, Le = (e) => [
+    })[r.variant], ae = (e) => e.labelI18n ? rt(e.labelI18n) : e.label, Ie = (e) => e.to ? "router-link" : e.href ? "a" : "button", je = (e) => e.to ? { to: e.to } : e.href ? { href: e.href, target: "_blank", rel: "noopener noreferrer" } : { type: "button" }, Pe = (e) => [
       r.size === "sm" ? "w-3 h-3" : "w-3.5 h-3.5",
       "opacity-70 shrink-0 transition-transform duration-200",
       e ? "rotate-180" : ""
     ].join(" ");
-    return (e, n) => (v(), M("div", {
+    return (e, a) => (h(), M("div", {
       ref_key: "rootRef",
-      ref: q,
-      class: l([he.value, "group"]),
-      dir: C.value
+      ref: H,
+      class: i([Ce.value, "group"]),
+      dir: V.value
     }, [
-      A(w(ce, {
-        direction: Se.value,
-        color: X.value,
+      D(C(me, {
+        direction: Oe.value,
+        color: ee.value,
         coverage: "100px",
         blur: "40px",
         easing: "smooth",
         tintOpacity: 1,
-        class: l(["z-10 pointer-events-none", r.variant === "line" ? "" : "rounded-s-lg"])
+        class: i(["z-10 pointer-events-none", r.variant === "line" ? "" : "rounded-s-lg"])
       }, null, 8, ["direction", "color", "class"]), [
-        [F, V.value]
+        [A, B.value]
       ]),
-      A(u("div", {
-        class: l(["start-0 ps-1", J.value])
+      D(g("div", {
+        class: i(["start-0 ps-1", _.value])
       }, [
-        u("button", {
-          onClick: me,
+        g("button", {
+          onClick: xe,
           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 backward"
         }, [
-          w(y, {
-            icon: ze.value,
+          C(S, {
+            icon: De.value,
             class: "w-5 h-5"
           }, null, 8, ["icon"])
         ])
       ], 2), [
-        [F, V.value]
+        [A, B.value]
       ]),
-      u("div", {
+      g("div", {
         ref_key: "scrollRef",
-        ref: d,
+        ref: p,
         class: "tabes-scroll flex-1 min-w-0 max-w-full overflow-x-auto scrollbar-hide scroll-smooth",
-        onScroll: fe
+        onScroll: he
       }, [
-        u("div", {
+        g("div", {
           ref_key: "containerRef",
           ref: k,
-          class: l([$e.value, "tabes-container"]),
+          class: i([Fe.value, "tabes-container"]),
           role: "tablist",
           "data-variant": r.variant,
           "data-tabes": ""
         }, [
-          s.modelValue !== void 0 && !s.wrap ? (v(), M("div", {
+          o.modelValue !== void 0 && !o.wrap ? (h(), M("div", {
             key: 0,
-            class: l(["tabes-marker", [Me.value, Ae()]]),
-            style: je(h.value)
-          }, null, 6)) : j("", !0),
-          (v(!0), M(ee, null, qe(s.options, (t) => (v(), M(ee, {
+            class: i(["tabes-marker", [Le.value, Te()]]),
+            style: He(w.value)
+          }, null, 6)) : N("", !0),
+          (h(!0), M(ne, null, We(m.value, (t) => (h(), M(ne, {
             key: t.value
           }, [
-            te(se)(t) ? (v(), O(Ue, {
+            se(ce)(t) ? (h(), F(tt, {
               key: 0,
               options: t.menu,
-              selected: s.modelValue,
+              selected: o.modelValue,
               disabled: t.disabled,
-              direction: Ce(t),
+              "data-tabes-sortable": "",
+              "data-tabes-disabled": t.disabled || void 0,
+              direction: Re(t),
               position: t.dropdown?.position,
               offset: t.dropdown?.offset ?? [0, 8],
               searchable: t.dropdown?.searchable ?? !1,
@@ -286,98 +338,100 @@ const Ze = ["dir"], _e = ["data-variant"], et = ["aria-selected", "aria-expanded
               "show-selected-icon": !1,
               "toggle-selection": !1,
               selectable: !0,
-              class: l(["tabes-menu", "inline-flex!", ke.value]),
-              onOnSelect: (a) => xe(t, a),
-              onOnOpen: () => we(t),
-              onOnClose: () => ye(t)
+              class: i(["tabes-menu", "inline-flex!", $e.value]),
+              onOnSelect: (n) => Ve(t, n),
+              onOnOpen: () => ze(t),
+              onOnClose: () => Be(t)
             }, {
-              trigger: re(({ isOpen: a }) => [
-                u("button", {
+              trigger: oe(({ isOpen: n }) => [
+                g("button", {
                   ref_for: !0,
-                  ref: (i) => K(i, t.value),
+                  ref: (s) => Y(s, t.value),
                   type: "button",
                   role: "tab",
                   "data-tabes-item": "",
                   "data-tabes-menu-trigger": "",
-                  "aria-selected": te(oe)(t, s.modelValue),
+                  "aria-selected": se(ue)(t, o.modelValue),
                   "aria-haspopup": !0,
-                  "aria-expanded": a,
+                  "aria-expanded": n,
                   disabled: t.disabled,
-                  class: l([Z(t), Y[r.size], "w-full"])
+                  class: i([re(t), te[r.size], "w-full"])
                 }, [
-                  t.icon ? (v(), O(y, {
+                  t.icon ? (h(), F(S, {
                     key: 0,
                     icon: t.icon,
-                    class: l(s.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
-                  }, null, 8, ["icon", "class"])) : j("", !0),
-                  u("span", {
-                    class: l(["whitespace-nowrap z-20 relative", s.textClass])
-                  }, ne(_(t)), 3),
-                  w(y, {
+                    class: i(o.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
+                  }, null, 8, ["icon", "class"])) : N("", !0),
+                  g("span", {
+                    class: i(["whitespace-nowrap z-20 relative", o.textClass])
+                  }, le(ae(t)), 3),
+                  C(S, {
                     icon: "lucide:chevron-down",
-                    class: l(Le(a)),
+                    class: i(Pe(n)),
                     "aria-hidden": "true"
                   }, null, 8, ["class"])
-                ], 10, et)
+                ], 10, it)
               ]),
               _: 2
-            }, 1032, ["options", "selected", "disabled", "direction", "position", "offset", "searchable", "close-on-select", "max-height", "min-width", "width", "menu-id", "teleport", "class", "onOnSelect", "onOnOpen", "onOnClose"])) : Pe([t, s.modelValue === t.value, s.size, s.variant, s.block, s.wrap, s.tabClass, s.textClass], () => (v(), O(He(Fe(t)), Ne({
+            }, 1032, ["options", "selected", "disabled", "data-tabes-disabled", "direction", "position", "offset", "searchable", "close-on-select", "max-height", "min-width", "width", "menu-id", "teleport", "class", "onOnSelect", "onOnOpen", "onOnClose"])) : Ge([t, o.modelValue === t.value, o.size, o.variant, o.block, o.wrap, o.tabClass, o.textClass, o.sortable], () => (h(), F(Qe(Ie(t)), Ue({
               key: 1,
               ref_for: !0,
-              ref: (a) => K(a, t.value),
+              ref: (n) => Y(n, t.value),
               role: "tab",
               "data-tabes-item": "",
-              "aria-selected": s.modelValue === t.value,
+              "data-tabes-sortable": "",
+              "data-tabes-disabled": t.disabled || void 0,
+              "aria-selected": o.modelValue === t.value,
               disabled: t.disabled,
-              class: [Z(t), Y[r.size]]
-            }, { ref_for: !0 }, Oe(t), {
-              onClick: (a) => pe(t)
+              class: [re(t), te[r.size]]
+            }, { ref_for: !0 }, je(t), {
+              onClick: (n) => Se(t)
             }), {
-              default: re(() => [
-                t.icon ? (v(), O(y, {
+              default: oe(() => [
+                t.icon ? (h(), F(S, {
                   key: 0,
                   icon: t.icon,
-                  class: l(s.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
-                }, null, 8, ["icon", "class"])) : j("", !0),
-                u("span", {
-                  class: l(["whitespace-nowrap z-20 relative", s.textClass])
-                }, ne(_(t)), 3)
+                  class: i(o.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
+                }, null, 8, ["icon", "class"])) : N("", !0),
+                g("span", {
+                  class: i(["whitespace-nowrap z-20 relative", o.textClass])
+                }, le(ae(t)), 3)
               ]),
               _: 2
-            }, 1040, ["aria-selected", "disabled", "class", "onClick"])), n, 0)
+            }, 1040, ["data-tabes-disabled", "aria-selected", "disabled", "class", "onClick"])), a, 0)
           ], 64))), 128))
-        ], 10, _e)
+        ], 10, lt)
       ], 544),
-      A(w(ce, {
-        direction: Ve.value,
-        color: X.value,
+      D(C(me, {
+        direction: Me.value,
+        color: ee.value,
         coverage: "100px",
         blur: "40",
         easing: "smooth",
         tintOpacity: 1,
-        class: l(["z-10 pointer-events-none", r.variant === "line" ? "" : "rounded-e-lg"])
+        class: i(["z-10 pointer-events-none", r.variant === "line" ? "" : "rounded-e-lg"])
       }, null, 8, ["direction", "color", "class"]), [
-        [F, z.value]
+        [A, $.value]
       ]),
-      A(u("div", {
-        class: l(["end-0 pe-1", J.value])
+      D(g("div", {
+        class: i(["end-0 pe-1", _.value])
       }, [
-        u("button", {
-          onClick: ve,
+        g("button", {
+          onClick: ye,
           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 forward"
         }, [
-          w(y, {
-            icon: Be.value,
+          C(S, {
+            icon: Ae.value,
             class: "w-5 h-5"
           }, null, 8, ["icon"])
         ])
       ], 2), [
-        [F, z.value]
+        [A, $.value]
       ])
-    ], 10, Ze));
+    ], 10, ot));
   }
 });
 export {
-  ut as default
+  yt as default
 };