vlite3 1.4.30 → 1.4.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -16,7 +16,7 @@ import "v-datepicker-lite/style.css";
16
16
  /* empty css */
17
17
  import "@jaames/iro";
18
18
  import "@vueuse/core";
19
- /* empty css */
19
+ /* empty css */
20
20
  import "iconify-icon-picker";
21
21
  import "iconify-icon-picker/style.css";
22
22
  /* empty css */
@@ -1,4 +1,4 @@
1
- import { TabesOption, TabesSize, TabesVariant } from './types';
1
+ import { TabesMenuSelectPayload, TabesOption, TabesSize, TabesVariant } from './types';
2
2
  interface Props {
3
3
  options: TabesOption[];
4
4
  modelValue: string | number;
@@ -12,17 +12,26 @@ interface Props {
12
12
  */
13
13
  wrap?: boolean;
14
14
  tabClass?: string;
15
+ /** Text direction forwarded to menu dropdowns (LTR/RTL). */
16
+ direction?: 'ltr' | 'rtl';
15
17
  }
16
18
  declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
17
19
  change: (value: string | number) => any;
18
20
  "update:modelValue": (value: string | number) => any;
21
+ "menu-select": (payload: TabesMenuSelectPayload) => any;
22
+ "menu-open": (tab: TabesOption) => any;
23
+ "menu-close": (tab: TabesOption) => any;
19
24
  }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
20
25
  onChange?: (value: string | number) => any;
21
26
  "onUpdate:modelValue"?: (value: string | number) => any;
27
+ "onMenu-select"?: (payload: TabesMenuSelectPayload) => any;
28
+ "onMenu-open"?: (tab: TabesOption) => any;
29
+ "onMenu-close"?: (tab: TabesOption) => any;
22
30
  }>, {
23
31
  variant: TabesVariant;
24
32
  size: TabesSize;
25
33
  block: boolean;
34
+ direction: "ltr" | "rtl";
26
35
  wrap: boolean;
27
36
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
28
37
  scrollRef: HTMLDivElement;
@@ -1,7 +1,7 @@
1
1
  import o from "./Tabes.vue2.js";
2
2
  /* empty css */
3
3
  import t from "../../_virtual/_plugin-vue_export-helper.js";
4
- const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-2e086e79"]]);
4
+ const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-cdf6b045"]]);
5
5
  export {
6
6
  m as default
7
7
  };
@@ -1,9 +1,11 @@
1
- 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";
2
- import { useResizeObserver as T } from "@vueuse/core";
3
- import R from "../Icon.vue.js";
4
- import A from "../FadeOverlay/FadeOverlay.vue.js";
5
- import { $t as ie } from "../../utils/i18n.js";
6
- const ce = ["data-variant"], me = /* @__PURE__ */ Y({
1
+ 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";
2
+ import { useResizeObserver as G } from "@vueuse/core";
3
+ import { getActiveMarkerKey as xe, isMenuTab as H, isTabActive as q } from "./tabes.utils.js";
4
+ import x from "../Icon.vue.js";
5
+ import J from "../FadeOverlay/FadeOverlay.vue.js";
6
+ import we from "../Dropdown/Dropdown.vue.js";
7
+ import { $t as ye } from "../../utils/i18n.js";
8
+ const ke = ["dir"], Ce = ["data-variant"], ze = ["aria-selected", "aria-expanded", "disabled"], Le = /* @__PURE__ */ fe({
7
9
  __name: "Tabes",
8
10
  props: {
9
11
  options: {},
@@ -13,95 +15,109 @@ const ce = ["data-variant"], me = /* @__PURE__ */ Y({
13
15
  block: { type: Boolean, default: !1 },
14
16
  textClass: {},
15
17
  wrap: { type: Boolean, default: !1 },
16
- tabClass: {}
18
+ tabClass: {},
19
+ direction: { default: "ltr" }
17
20
  },
18
- emits: ["update:modelValue", "change"],
19
- setup(c, { emit: E }) {
20
- const t = c, $ = E, b = d(null), i = d(null), p = d(/* @__PURE__ */ new Map()), w = d(!1), C = d(!1), o = () => {
21
- if (!i.value) return;
22
- const { scrollLeft: e, scrollWidth: a, clientWidth: r } = i.value;
23
- w.value = e > 1, C.value = Math.ceil(e + r) < a - 1;
24
- }, S = (e) => {
25
- i.value && i.value.scrollBy({ left: e, behavior: "smooth" });
26
- }, V = () => {
27
- if (!i.value || !b.value) return;
28
- const e = p.value.get(t.modelValue);
29
- if (!e) return;
30
- const a = i.value, r = e.getBoundingClientRect(), n = a.getBoundingClientRect(), s = 40;
31
- r.left < n.left + s ? a.scrollBy({
32
- left: r.left - n.left - s,
21
+ emits: ["update:modelValue", "change", "menu-select", "menu-open", "menu-close"],
22
+ setup(l, { emit: Q }) {
23
+ const n = l, v = Q, w = g(null), u = g(null), y = g(/* @__PURE__ */ new Map()), S = g(!1), $ = g(!1), i = () => {
24
+ if (!u.value) return;
25
+ const { scrollLeft: t, scrollWidth: a, clientWidth: e } = u.value;
26
+ S.value = t > 1, $.value = Math.ceil(t + e) < a - 1;
27
+ }, M = (t) => {
28
+ u.value && u.value.scrollBy({ left: t, behavior: "smooth" });
29
+ }, L = f(() => xe(n.options, n.modelValue)), I = () => {
30
+ if (!u.value || !w.value) return;
31
+ const t = L.value;
32
+ if (t === void 0) return;
33
+ const a = y.value.get(t);
34
+ if (!a) return;
35
+ const e = u.value, r = a.getBoundingClientRect(), s = e.getBoundingClientRect(), b = 40;
36
+ r.left < s.left + b ? e.scrollBy({
37
+ left: r.left - s.left - b,
33
38
  behavior: "smooth"
34
- }) : r.right > n.right - s && a.scrollBy({
35
- left: r.right - n.right + s,
39
+ }) : r.right > s.right - b && e.scrollBy({
40
+ left: r.right - s.right + b,
36
41
  behavior: "smooth"
37
42
  });
38
43
  };
39
- T(i, o);
40
- const O = (e, a) => {
41
- e ? p.value.set(a, e) : p.value.delete(a);
42
- }, k = d({
44
+ G(u, i);
45
+ const T = (t, a) => {
46
+ t ? y.value.set(a, t) : y.value.delete(a);
47
+ }, R = g({
43
48
  width: "0px",
44
49
  height: "0px",
45
50
  transform: "translate(0px, 0px)",
46
51
  opacity: 0
47
- }), B = d(!1), u = async () => {
48
- await le();
49
- const e = b.value, a = p.value.get(t.modelValue);
50
- if (!e || !a) {
51
- k.value.opacity = 0;
52
+ }), V = g(!1), d = async () => {
53
+ await he();
54
+ const t = w.value, a = L.value, e = a !== void 0 ? y.value.get(a) : void 0;
55
+ if (!t || !e) {
56
+ R.value.opacity = 0;
52
57
  return;
53
58
  }
54
- const r = e.getBoundingClientRect(), n = a.getBoundingClientRect(), s = n.left - r.left, Q = n.top - r.top, U = n.width, X = n.height;
55
- k.value = {
56
- width: `${U}px`,
57
- height: `${X}px`,
58
- transform: `translate(${s}px, ${Q}px)`,
59
+ const r = t.getBoundingClientRect(), s = e.getBoundingClientRect(), b = s.left - r.left, ce = s.top - r.top, ue = s.width, de = s.height;
60
+ R.value = {
61
+ width: `${ue}px`,
62
+ height: `${de}px`,
63
+ transform: `translate(${b}px, ${ce}px)`,
59
64
  opacity: 1
60
- }, B.value || setTimeout(() => {
61
- B.value = !0;
65
+ }, V.value || setTimeout(() => {
66
+ V.value = !0;
62
67
  }, 50);
63
68
  };
64
- T(b, () => {
65
- u(), o();
66
- }), g(
67
- () => t.modelValue,
69
+ G(w, () => {
70
+ d(), i();
71
+ }), p(
72
+ () => n.modelValue,
68
73
  async () => {
69
- await u(), V();
74
+ await d(), I();
70
75
  }
71
- ), g(
72
- () => t.options,
76
+ ), p(
77
+ () => n.options,
73
78
  async () => {
74
- await u(), o();
79
+ await d(), i();
75
80
  },
76
81
  { deep: !0 }
77
- ), g(
78
- () => t.size,
82
+ ), p(
83
+ () => n.size,
79
84
  async () => {
80
- await u(), o();
85
+ await d(), i();
81
86
  }
82
- ), g(
83
- () => t.block,
87
+ ), p(
88
+ () => n.block,
84
89
  async () => {
85
- await u(), o();
90
+ await d(), i();
86
91
  }
87
- ), g(
88
- () => t.wrap,
92
+ ), p(
93
+ () => n.wrap,
89
94
  async () => {
90
- await u(), o();
95
+ await d(), i();
91
96
  }
92
- ), Z(async () => {
93
- await u(), o(), setTimeout(o, 100), setTimeout(V, 100);
97
+ ), me(async () => {
98
+ await d(), i(), setTimeout(i, 100), setTimeout(I, 100);
94
99
  });
95
- const D = v(() => {
96
- const e = t.variant === "line";
97
- return t.block || e ? "flex w-full relative" : "inline-flex max-w-full relative";
98
- }), L = v(() => [
100
+ const U = f(() => {
101
+ const t = n.variant === "line";
102
+ return n.block || t ? "flex w-full relative" : "inline-flex max-w-full relative";
103
+ }), j = f(() => [
99
104
  "absolute top-0 bottom-0 z-20 flex items-center pointer-events-none transition-opacity duration-200",
100
- t.variant === "line" ? "pb-[10px]" : ""
101
- ]), N = (e) => {
102
- e.disabled || ($("update:modelValue", e.value), $("change", e.value));
103
- }, P = v(() => {
104
- const e = t.variant === "line", a = {
105
+ n.variant === "line" ? "pb-[10px]" : ""
106
+ ]), X = (t) => {
107
+ t.disabled || H(t) || (v("update:modelValue", t.value), v("change", t.value));
108
+ }, Y = (t, a) => {
109
+ if (t.disabled) return;
110
+ const e = a.value;
111
+ e != null && (v("update:modelValue", e), v("change", e), v("menu-select", { value: e, option: a.option, tab: t }));
112
+ }, Z = (t) => {
113
+ v("menu-open", t);
114
+ }, _ = (t) => {
115
+ v("menu-close", t), d();
116
+ }, ee = f(() => {
117
+ const t = n.variant === "line";
118
+ return (n.block || n.wrap) && !t ? "flex-1 min-w-max" : "shrink-0";
119
+ }), te = (t) => t.dropdown?.direction ?? n.direction, ne = f(() => {
120
+ const t = n.variant === "line", a = {
105
121
  surface: "bg-secondary/80 p-1",
106
122
  primary: "bg-secondary p-1",
107
123
  secondary: "bg-secondary p-1",
@@ -109,52 +125,52 @@ const ce = ["data-variant"], me = /* @__PURE__ */ Y({
109
125
  success: "bg-success/10 p-1",
110
126
  outline: "bg-transparent border border-border p-1",
111
127
  line: "bg-transparent gap-6 rounded-none p-0 border-b border-border"
112
- }, r = t.wrap && !e ? "flex-wrap" : "";
113
- return [`${t.block || e ? "flex min-w-full w-max" : "inline-flex"} rounded-lg relative isolate ${r}`, a[t.variant]];
114
- }), 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 = {
128
+ }, e = n.wrap && !t ? "flex-wrap" : "";
129
+ return [`${n.block || t ? "flex min-w-full w-max" : "inline-flex"} rounded-lg relative isolate ${e}`, a[n.variant]];
130
+ }), 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 = {
115
131
  sm: "text-xs px-2.5 py-1",
116
132
  md: "-text-fs-2 px-3 py-1",
117
133
  lg: "-text-fs-1 px-4 py-1"
118
- }, _ = v(() => {
119
- 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" : "";
120
- return [a, r];
121
- }), F = (e) => {
122
- const a = e.value === t.modelValue, r = t.variant === "line";
123
- let n = "";
134
+ }, re = f(() => {
135
+ 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" : "";
136
+ return [a, e];
137
+ }), E = (t) => {
138
+ const a = q(t, n.modelValue), e = n.variant === "line";
139
+ let r = "";
124
140
  if (a)
125
- if (r)
126
- n = t.wrap ? "text-primary !border-primary" : "text-primary";
141
+ if (e)
142
+ r = n.wrap ? "text-primary !border-primary" : "text-primary";
127
143
  else
128
- switch (t.variant) {
144
+ switch (n.variant) {
129
145
  case "surface":
130
- n = t.wrap ? "text-foreground bg-[#ffff] dark:bg-[#0B0B0B] shadow-sm" : "text-foreground";
146
+ r = n.wrap ? "text-foreground bg-[#ffff] dark:bg-[#0B0B0B] shadow-sm" : "text-foreground";
131
147
  break;
132
148
  case "primary":
133
- n = t.wrap ? "text-primary-foreground bg-primary" : "text-primary-foreground";
149
+ r = n.wrap ? "text-primary-foreground bg-primary" : "text-primary-foreground";
134
150
  break;
135
151
  case "secondary":
136
- n = t.wrap ? "text-secondary bg-secondary-foreground" : "text-secondary";
152
+ r = n.wrap ? "text-secondary bg-secondary-foreground" : "text-secondary";
137
153
  break;
138
154
  case "danger":
139
- n = t.wrap ? "text-danger-fg bg-danger" : "text-danger-fg";
155
+ r = n.wrap ? "text-danger-fg bg-danger" : "text-danger-fg";
140
156
  break;
141
157
  case "success":
142
- n = t.wrap ? "text-success-fg bg-success" : "text-success-fg";
158
+ r = n.wrap ? "text-success-fg bg-success" : "text-success-fg";
143
159
  break;
144
160
  case "outline":
145
- n = t.wrap ? "text-accent-foreground bg-accent/50 ring-1 ring-border" : "text-accent-foreground";
161
+ r = n.wrap ? "text-accent-foreground bg-accent/50 ring-1 ring-border" : "text-accent-foreground";
146
162
  break;
147
163
  default:
148
- n = "text-foreground";
164
+ r = "text-foreground";
149
165
  }
150
166
  else
151
- n = r ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
152
- const s = e.disabled ? "opacity-50 cursor-not-allowed" : "";
153
- return [_.value, n, t?.tabClass, s].join(" ");
154
- }, q = v(() => {
155
- 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)]" : ""}`;
156
- return t.variant === "line" ? `${a} !h-[2px] !top-auto bottom-0` : `${a} rounded-md shadow-sm`;
157
- }), G = () => ({
167
+ r = e ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
168
+ const s = t.disabled ? "opacity-50 cursor-not-allowed" : "";
169
+ return [re.value, r, n?.tabClass, s].join(" ");
170
+ }, ae = f(() => {
171
+ 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)]" : ""}`;
172
+ return n.variant === "line" ? `${a} !h-[2px] !top-auto bottom-0` : `${a} rounded-md shadow-sm`;
173
+ }), se = () => ({
158
174
  surface: "bg-[#ffff] dark:bg-[#0B0B0B]",
159
175
  primary: "bg-primary",
160
176
  secondary: "bg-secondary-foreground",
@@ -162,112 +178,175 @@ const ce = ["data-variant"], me = /* @__PURE__ */ Y({
162
178
  success: "bg-success",
163
179
  outline: "bg-accent/50 ring-1 ring-border",
164
180
  line: "bg-primary"
165
- })[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" };
166
- return (e, a) => (m(), z("div", {
167
- class: l([D.value, "group"])
181
+ })[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) => [
182
+ n.size === "sm" ? "w-3 h-3" : "w-3.5 h-3.5",
183
+ "opacity-70 shrink-0 transition-transform duration-200",
184
+ t ? "rotate-180" : ""
185
+ ].join(" ");
186
+ return (t, a) => (m(), k("div", {
187
+ class: o([U.value, "group"]),
188
+ dir: l.direction
168
189
  }, [
169
- x(y(A, {
190
+ C(h(J, {
170
191
  direction: "left",
171
- color: I.value,
192
+ color: A.value,
172
193
  coverage: "100px",
173
194
  blur: "40px",
174
195
  easing: "smooth",
175
196
  tintOpacity: 1,
176
- class: l(["z-10 pointer-events-none", t.variant === "line" ? "" : "rounded-l-lg"])
197
+ class: o(["z-10 pointer-events-none", n.variant === "line" ? "" : "rounded-l-lg"])
177
198
  }, null, 8, ["color", "class"]), [
178
- [h, w.value]
199
+ [z, S.value]
179
200
  ]),
180
- x(f("div", {
181
- class: l(["left-0 pl-1", L.value])
201
+ C(c("div", {
202
+ class: o(["left-0 pl-1", j.value])
182
203
  }, [
183
- f("button", {
184
- onClick: a[0] || (a[0] = (r) => S(-200)),
204
+ c("button", {
205
+ onClick: a[0] || (a[0] = (e) => M(-200)),
185
206
  class: "pointer-events-auto h-full px-1 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors focus:outline-none",
186
207
  "aria-label": "Scroll left"
187
208
  }, [
188
- y(R, {
209
+ h(x, {
189
210
  icon: "lucide:chevron-left",
190
211
  class: "w-5 h-5"
191
212
  })
192
213
  ])
193
214
  ], 2), [
194
- [h, w.value]
215
+ [z, S.value]
195
216
  ]),
196
- f("div", {
217
+ c("div", {
197
218
  ref_key: "scrollRef",
198
- ref: i,
219
+ ref: u,
199
220
  class: "flex-1 min-w-0 max-w-full overflow-x-auto scrollbar-hide scroll-smooth",
200
- onScroll: o
221
+ onScroll: i
201
222
  }, [
202
- f("div", {
223
+ c("div", {
203
224
  ref_key: "containerRef",
204
- ref: b,
205
- class: l([P.value, "tabes-container"]),
225
+ ref: w,
226
+ class: o([ne.value, "tabes-container"]),
206
227
  role: "tablist",
207
- "data-variant": t.variant,
228
+ "data-variant": n.variant,
208
229
  "data-tabes": ""
209
230
  }, [
210
- c.modelValue !== void 0 && !c.wrap ? (m(), z("div", {
231
+ l.modelValue !== void 0 && !l.wrap ? (m(), k("div", {
211
232
  key: 0,
212
- class: l([q.value, G()]),
213
- style: ee(k.value)
214
- }, null, 6)) : j("", !0),
215
- (m(!0), z(te, null, re(c.options, (r) => (m(), M(ae(J(r)), ne({
216
- key: r.value,
217
- ref_for: !0,
218
- ref: (n) => O(n?.$el || n, r.value),
219
- role: "tab",
220
- "data-tabes-item": "",
221
- "aria-selected": c.modelValue === r.value,
222
- disabled: r.disabled,
223
- class: [F(r), W[t.size]]
224
- }, { ref_for: !0 }, K(r), {
225
- onClick: (n) => N(r)
226
- }), {
227
- default: oe(() => [
228
- r.icon ? (m(), M(R, {
229
- key: 0,
230
- icon: r.icon,
231
- class: l(c.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
232
- }, null, 8, ["icon", "class"])) : j("", !0),
233
- f("span", {
234
- class: l(["whitespace-nowrap z-20 relative", c.textClass])
235
- }, se(H(r)), 3)
236
- ]),
237
- _: 2
238
- }, 1040, ["aria-selected", "disabled", "class", "onClick"]))), 128))
239
- ], 10, ce)
233
+ class: o([ae.value, se()]),
234
+ style: ve(R.value)
235
+ }, null, 6)) : O("", !0),
236
+ (m(!0), k(W, null, ge(l.options, (e) => (m(), k(W, {
237
+ key: e.value
238
+ }, [
239
+ K(H)(e) ? (m(), B(we, {
240
+ key: 0,
241
+ options: e.menu,
242
+ selected: l.modelValue,
243
+ disabled: e.disabled,
244
+ direction: te(e),
245
+ position: e.dropdown?.position,
246
+ offset: e.dropdown?.offset ?? [0, 8],
247
+ searchable: e.dropdown?.searchable ?? !1,
248
+ "close-on-select": e.dropdown?.closeOnSelect ?? !0,
249
+ "max-height": e.dropdown?.maxHeight ?? "300px",
250
+ "min-width": e.dropdown?.minWidth ?? "160px",
251
+ width: e.dropdown?.width,
252
+ "menu-id": e.dropdown?.menuId ?? `tabes-menu-${e.value}`,
253
+ teleport: e.dropdown?.teleport ?? !0,
254
+ "show-selected-label": !1,
255
+ "show-selected-icon": !1,
256
+ "toggle-selection": !1,
257
+ selectable: !0,
258
+ class: o(["tabes-menu", "inline-flex!", ee.value]),
259
+ onOnSelect: (r) => Y(e, r),
260
+ onOnOpen: () => Z(e),
261
+ onOnClose: () => _(e)
262
+ }, {
263
+ trigger: P(({ isOpen: r }) => [
264
+ c("button", {
265
+ ref_for: !0,
266
+ ref: (s) => T(s, e.value),
267
+ type: "button",
268
+ role: "tab",
269
+ "data-tabes-item": "",
270
+ "data-tabes-menu-trigger": "",
271
+ "aria-selected": K(q)(e, l.modelValue),
272
+ "aria-haspopup": !0,
273
+ "aria-expanded": r,
274
+ disabled: e.disabled,
275
+ class: o([E(e), D[n.size], "w-full"])
276
+ }, [
277
+ e.icon ? (m(), B(x, {
278
+ key: 0,
279
+ icon: e.icon,
280
+ class: o(l.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
281
+ }, null, 8, ["icon", "class"])) : O("", !0),
282
+ c("span", {
283
+ class: o(["whitespace-nowrap z-20 relative", l.textClass])
284
+ }, F(N(e)), 3),
285
+ h(x, {
286
+ icon: "lucide:chevron-down",
287
+ class: o(ie(r)),
288
+ "aria-hidden": "true"
289
+ }, null, 8, ["class"])
290
+ ], 10, ze)
291
+ ]),
292
+ _: 2
293
+ }, 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({
294
+ key: 1,
295
+ ref_for: !0,
296
+ ref: (r) => T(r?.$el || r, e.value),
297
+ role: "tab",
298
+ "data-tabes-item": "",
299
+ "aria-selected": l.modelValue === e.value,
300
+ disabled: e.disabled,
301
+ class: [E(e), D[n.size]]
302
+ }, { ref_for: !0 }, le(e), {
303
+ onClick: (r) => X(e)
304
+ }), {
305
+ default: P(() => [
306
+ e.icon ? (m(), B(x, {
307
+ key: 0,
308
+ icon: e.icon,
309
+ class: o(l.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
310
+ }, null, 8, ["icon", "class"])) : O("", !0),
311
+ c("span", {
312
+ class: o(["whitespace-nowrap z-20 relative", l.textClass])
313
+ }, F(N(e)), 3)
314
+ ]),
315
+ _: 2
316
+ }, 1040, ["aria-selected", "disabled", "class", "onClick"]))
317
+ ], 64))), 128))
318
+ ], 10, Ce)
240
319
  ], 544),
241
- x(y(A, {
320
+ C(h(J, {
242
321
  direction: "right",
243
- color: I.value,
322
+ color: A.value,
244
323
  coverage: "100px",
245
324
  blur: "40",
246
325
  easing: "smooth",
247
326
  tintOpacity: 1,
248
- class: l(["z-10 pointer-events-none", t.variant === "line" ? "" : "rounded-r-lg"])
327
+ class: o(["z-10 pointer-events-none", n.variant === "line" ? "" : "rounded-r-lg"])
249
328
  }, null, 8, ["color", "class"]), [
250
- [h, C.value]
329
+ [z, $.value]
251
330
  ]),
252
- x(f("div", {
253
- class: l(["right-0 pr-1", L.value])
331
+ C(c("div", {
332
+ class: o(["right-0 pr-1", j.value])
254
333
  }, [
255
- f("button", {
256
- onClick: a[1] || (a[1] = (r) => S(200)),
334
+ c("button", {
335
+ onClick: a[1] || (a[1] = (e) => M(200)),
257
336
  class: "pointer-events-auto h-full px-1 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors focus:outline-none",
258
337
  "aria-label": "Scroll right"
259
338
  }, [
260
- y(R, {
339
+ h(x, {
261
340
  icon: "lucide:chevron-right",
262
341
  class: "w-5 h-5"
263
342
  })
264
343
  ])
265
344
  ], 2), [
266
- [h, C.value]
345
+ [z, $.value]
267
346
  ])
268
- ], 2));
347
+ ], 10, ke));
269
348
  }
270
349
  });
271
350
  export {
272
- me as default
351
+ Le as default
273
352
  };
@@ -0,0 +1,14 @@
1
+ import { IDropdownOption } from '../../types';
2
+ import { TabesOption } from './types';
3
+ /** Whether the tab option is a dropdown menu trigger */
4
+ export declare function isMenuTab(option: TabesOption): boolean;
5
+ export declare function getMenuOptionValue(option: IDropdownOption): string | number | undefined;
6
+ /** Recursively check if a menu tree contains the given value */
7
+ export declare function menuContainsValue(menu: IDropdownOption[] | undefined, value: string | number): boolean;
8
+ /** Whether a tab (standard or menu parent) should appear active for the current modelValue */
9
+ export declare function isTabActive(option: TabesOption, modelValue: string | number): boolean;
10
+ /**
11
+ * Resolve which tab option value should own the animated marker.
12
+ * For menu tabs, returns the parent tab's value when a child is selected.
13
+ */
14
+ export declare function getActiveMarkerKey(options: TabesOption[], modelValue: string | number): string | number | undefined;
@@ -0,0 +1,26 @@
1
+ function t(e) {
2
+ return Array.isArray(e.menu) && e.menu.length > 0;
3
+ }
4
+ function f(e) {
5
+ return e.value !== void 0 && e.value !== null ? e.value : e.label;
6
+ }
7
+ function u(e, r) {
8
+ if (!e?.length) return !1;
9
+ for (const n of e)
10
+ if (f(n) === r || n.children?.length && u(n.children, r)) return !0;
11
+ return !1;
12
+ }
13
+ function i(e, r) {
14
+ return t(e) ? e.value === r || u(e.menu, r) : e.value === r;
15
+ }
16
+ function a(e, r) {
17
+ for (const n of e)
18
+ if (i(n, r)) return n.value;
19
+ }
20
+ export {
21
+ a as getActiveMarkerKey,
22
+ f as getMenuOptionValue,
23
+ t as isMenuTab,
24
+ i as isTabActive,
25
+ u as menuContainsValue
26
+ };