@nubisco/ui 5.19.1 → 5.20.0

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.
Files changed (62) hide show
  1. package/dist/BarChart-Bnkibwcl.js +294 -0
  2. package/dist/BarChart-CjxY_3RM.cjs +1 -0
  3. package/dist/DataTable-CQBI0wcg.js +412 -0
  4. package/dist/DataTable-DN4SbClx.cjs +1 -0
  5. package/dist/{DatePicker-DMiiGKYY.js → DatePicker-ViTSDX6d.js} +113 -86
  6. package/dist/DatePicker-lv4wQxf8.cjs +1 -0
  7. package/dist/LineChart-Bol60gtX.cjs +1 -0
  8. package/dist/{LineChart-DG_ows6r.js → LineChart-CsBHPIUF.js} +25 -21
  9. package/dist/{Pagination-Br-k9zuG.js → Pagination-BveCRx-Z.js} +1 -1
  10. package/dist/{Pagination-CCMhqtoz.cjs → Pagination-DlTqW-zR.cjs} +1 -1
  11. package/dist/Select-D4Il1NaM.js +489 -0
  12. package/dist/Select-MwbDOqbP.cjs +1 -0
  13. package/dist/Tabs-Bmw1hFrN.cjs +1 -0
  14. package/dist/Tabs-CjXOZ3K6.js +196 -0
  15. package/dist/all.cjs +1 -1
  16. package/dist/all.mjs +7 -7
  17. package/dist/components/Charts/BarChart.cjs +1 -1
  18. package/dist/components/Charts/BarChart.d.ts +8 -1
  19. package/dist/components/Charts/BarChart.mjs +1 -1
  20. package/dist/components/Charts/BarChart.vue.d.ts.map +1 -1
  21. package/dist/components/Charts/LineChart.cjs +1 -1
  22. package/dist/components/Charts/LineChart.d.ts +8 -1
  23. package/dist/components/Charts/LineChart.mjs +1 -1
  24. package/dist/components/Charts/LineChart.vue.d.ts.map +1 -1
  25. package/dist/components/Charts/shared/types.d.ts +7 -0
  26. package/dist/components/DataTable.cjs +1 -1
  27. package/dist/components/DataTable.mjs +1 -1
  28. package/dist/components/DataTable.vue.d.ts.map +1 -1
  29. package/dist/components/DatePicker.cjs +1 -1
  30. package/dist/components/DatePicker.mjs +1 -1
  31. package/dist/components/DatePicker.vue.d.ts.map +1 -1
  32. package/dist/components/Pagination.cjs +1 -1
  33. package/dist/components/Pagination.mjs +1 -1
  34. package/dist/components/Select.cjs +1 -1
  35. package/dist/components/Select.d.ts +8 -0
  36. package/dist/components/Select.mjs +1 -1
  37. package/dist/components/Select.vue.d.ts +9 -7
  38. package/dist/components/Select.vue.d.ts.map +1 -1
  39. package/dist/components/Tabs.cjs +1 -1
  40. package/dist/components/Tabs.mjs +1 -1
  41. package/dist/components/Tabs.vue.d.ts.map +1 -1
  42. package/dist/index.cjs +1 -1
  43. package/dist/index.mjs +7 -7
  44. package/dist/main.d.ts +1 -1
  45. package/dist/main.d.ts.map +1 -1
  46. package/dist/styles/BarChart.css +1 -1
  47. package/dist/styles/DataTable.css +1 -1
  48. package/dist/styles/LineChart.css +1 -1
  49. package/dist/styles/Select.css +1 -1
  50. package/dist/styles/Tabs.css +1 -1
  51. package/dist/ui.css +5 -5
  52. package/package.json +1 -1
  53. package/dist/BarChart-DTStA9jd.js +0 -290
  54. package/dist/BarChart-Dvrl4xeX.cjs +0 -1
  55. package/dist/DataTable-CWMlmjMi.cjs +0 -1
  56. package/dist/DataTable-DaNZAixf.js +0 -389
  57. package/dist/DatePicker-tAhXSR2o.cjs +0 -1
  58. package/dist/LineChart-C5bQNxQ-.cjs +0 -1
  59. package/dist/Select-ClkEzw5T.cjs +0 -1
  60. package/dist/Select-DIw08nte.js +0 -437
  61. package/dist/Tabs-CrrG1hvh.cjs +0 -1
  62. package/dist/Tabs-D3pdOieX.js +0 -180
@@ -1,437 +0,0 @@
1
- import { t as e } from "./Icon-rREAqsu0.js";
2
- import { t } from "./Label-DGK5nxFy.js";
3
- import { t as n } from "./Message-CHkTWe0K.js";
4
- import { t as r } from "./Grid-iox-7xyH.js";
5
- import { useMenuSurface as i } from "./composables/useMenuSurface.composable.mjs";
6
- import { Fragment as a, Teleport as ee, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, nextTick as m, normalizeClass as h, normalizeStyle as te, onBeforeUnmount as g, openBlock as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useId as C, vModelText as ne, watch as re, withCtx as w, withDirectives as ie, withKeys as ae, withModifiers as T } from "vue";
7
- import { regular as E } from "@nubisco/ui/icons/caret-down";
8
- import { regular as D } from "@nubisco/ui/icons/caret-up";
9
- //#region src/components/Select.vue?vue&type=script&setup=true&lang.ts
10
- var oe = [
11
- "id",
12
- "aria-expanded",
13
- "aria-disabled",
14
- "aria-required",
15
- "disabled"
16
- ], se = [
17
- "id",
18
- "aria-expanded",
19
- "aria-disabled",
20
- "aria-required",
21
- "disabled"
22
- ], O = {
23
- key: 1,
24
- class: "nb-select__inner-label"
25
- }, ce = {
26
- key: 0,
27
- class: "nb-select__asterisk",
28
- "aria-hidden": "true"
29
- }, le = ["aria-multiselectable"], ue = ["aria-labelledby"], de = ["id"], fe = [
30
- "aria-selected",
31
- "aria-disabled",
32
- "onMouseenter",
33
- "onClick"
34
- ], pe = {
35
- key: 0,
36
- class: "nb-select__option-check",
37
- "aria-hidden": "true"
38
- }, me = {
39
- key: 0,
40
- viewBox: "0 0 10 8",
41
- fill: "none",
42
- width: "10",
43
- height: "8"
44
- }, he = { class: "nb-select__option-label" }, ge = {
45
- key: 0,
46
- class: "nb-select__empty"
47
- }, _e = ["placeholder", "onKeydown"], k = /* @__PURE__ */ p({
48
- __name: "Select",
49
- props: {
50
- modelValue: { default: null },
51
- options: { default: () => [] },
52
- multiple: {
53
- type: Boolean,
54
- default: !1
55
- },
56
- creatable: {
57
- type: Boolean,
58
- default: !1
59
- },
60
- createPlaceholder: { default: "" },
61
- placeholder: { default: "Select…" },
62
- name: { default: "" },
63
- disabled: {
64
- type: Boolean,
65
- default: !1
66
- },
67
- required: {
68
- type: Boolean,
69
- default: !1
70
- },
71
- id: { default: void 0 },
72
- label: { default: "" },
73
- error: { default: "" },
74
- warning: { default: "" },
75
- helper: { default: "" },
76
- variant: { default: "default" },
77
- size: { default: "md" }
78
- },
79
- emits: [
80
- "update:modelValue",
81
- "change",
82
- "create"
83
- ],
84
- setup(p, { expose: k, emit: ve }) {
85
- let A = p, j = ve, M = v("");
86
- function ye() {
87
- let e = M.value.trim();
88
- e && (j("create", e), M.value = "");
89
- }
90
- let N = v(!1), P = v(!1), F = v(-1), I = v(null), L = v(null), R = v(null);
91
- i(R);
92
- let z = v({
93
- position: "fixed",
94
- top: "0px",
95
- left: "0px",
96
- width: "0px",
97
- zIndex: "9999"
98
- }), be = `nb-select-${C()}`, B = o(() => A.id ?? be), V = o(() => A.modelValue == null ? [] : Array.isArray(A.modelValue) ? A.modelValue : [A.modelValue]), H = o(() => {
99
- if (!(A.multiple || V.value.length !== 1)) return (A.options ?? []).find((e) => e.value === V.value[0])?.icon;
100
- }), U = o(() => {
101
- if (V.value.length === 0) return "";
102
- let e = A.options ?? [];
103
- return A.multiple ? V.value.length === 1 ? e.find((e) => e.value === V.value[0])?.label ?? String(V.value[0]) : V.value.length === 2 ? V.value.map((t) => e.find((e) => e.value === t)?.label ?? String(t)).join(", ") : `${V.value.length} selected` : e.find((e) => e.value === V.value[0])?.label ?? String(V.value[0]);
104
- });
105
- function W(e) {
106
- return V.value.includes(e);
107
- }
108
- let xe = o(() => {
109
- let e = [];
110
- return (A.options ?? []).forEach((t, n) => {
111
- let r = e[e.length - 1];
112
- (!r || r.name !== t.group) && e.push({
113
- key: `${e.length}:${t.group ?? ""}`,
114
- name: t.group,
115
- labelId: `${B.value}-group-${e.length}`,
116
- entries: []
117
- }), e[e.length - 1].entries.push({
118
- option: t,
119
- index: n
120
- });
121
- }), e;
122
- });
123
- function G(e, t) {
124
- let n = A.options ?? [];
125
- for (let r = e + t; r >= 0 && r < n.length; r += t) if (!n[r].disabled) return r;
126
- return e;
127
- }
128
- function K(e) {
129
- if (e.disabled) return;
130
- let t;
131
- if (A.multiple) {
132
- let n = [...V.value], r = n.indexOf(e.value);
133
- r >= 0 ? n.splice(r, 1) : n.push(e.value), t = n;
134
- } else t = e.value, Y();
135
- j("update:modelValue", t), j("change", t);
136
- }
137
- function q() {
138
- if (!L.value) return;
139
- let e = L.value.getBoundingClientRect(), t = R.value?.offsetHeight ?? 0, n = window.innerHeight - e.bottom, r = e.top;
140
- z.value = {
141
- position: "fixed",
142
- top: t > 0 && n < t && r > n ? `${e.top - t}px` : `${e.bottom}px`,
143
- left: `${e.left}px`,
144
- width: `${e.width}px`,
145
- zIndex: "9999"
146
- };
147
- }
148
- function J() {
149
- if (A.disabled) return;
150
- N.value = !0, q();
151
- let e = A.options ?? [];
152
- F.value = V.value.length > 0 ? Math.max(0, e.findIndex((e) => e.value === V.value[0])) : -1, m(() => {
153
- q(), $();
154
- });
155
- }
156
- function Y() {
157
- N.value = !1, F.value = -1;
158
- }
159
- function X() {
160
- N.value ? Y() : J();
161
- }
162
- function Z(e) {
163
- let t = e.target, n = I.value?.contains(t) ?? !1, r = R.value?.contains(t) ?? !1;
164
- !n && !r && Y();
165
- }
166
- function Q() {
167
- N.value && q();
168
- }
169
- re(N, (e) => {
170
- e ? (document.addEventListener("mousedown", Z), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q)) : (document.removeEventListener("mousedown", Z), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q));
171
- }), g(() => {
172
- document.removeEventListener("mousedown", Z), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
173
- });
174
- function Se(e) {
175
- let t = A.options ?? [];
176
- if (!N.value) {
177
- (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), J());
178
- return;
179
- }
180
- e.key === "Escape" ? (Y(), e.preventDefault()) : e.key === "Tab" ? Y() : e.key === "ArrowDown" ? (e.preventDefault(), F.value = G(F.value, 1), $()) : e.key === "ArrowUp" ? (e.preventDefault(), F.value > 0 && (F.value = G(F.value, -1)), $()) : (e.key === "Enter" || e.key === " ") && F.value >= 0 && (e.preventDefault(), K(t[F.value]));
181
- }
182
- function $() {
183
- m(() => {
184
- !R.value || F.value < 0 || R.value.querySelectorAll(".nb-select__option")[F.value]?.scrollIntoView({ block: "nearest" });
185
- });
186
- }
187
- let Ce = o(() => [
188
- "nb-select",
189
- `nb-select--${A.variant}`,
190
- `nb-select--${A.size}`,
191
- {
192
- "nb-select--open": N.value,
193
- "nb-select--focused": P.value && !N.value,
194
- "nb-select--error": !!A.error,
195
- "nb-select--warning": !A.error && !!A.warning,
196
- "nb-select--multiple": A.multiple
197
- }
198
- ]);
199
- return k({
200
- open: J,
201
- close: Y
202
- }), (i, o) => (_(), l(a, null, [u("div", {
203
- ref_key: "rootRef",
204
- ref: I,
205
- class: h(Ce.value),
206
- onKeydown: Se
207
- }, [p.variant === "default" ? (_(), l(a, { key: 0 }, [
208
- i.$slots.label ? b(i.$slots, "label", { key: 0 }) : p.label ? (_(), s(t, {
209
- key: 1,
210
- for: B.value,
211
- required: p.required,
212
- disabled: p.disabled
213
- }, {
214
- default: w(() => [d(x(p.label), 1)]),
215
- _: 1
216
- }, 8, [
217
- "for",
218
- "required",
219
- "disabled"
220
- ])) : c("", !0),
221
- u("button", {
222
- id: B.value,
223
- ref_key: "triggerRef",
224
- ref: L,
225
- type: "button",
226
- class: "nb-select__trigger",
227
- role: "combobox",
228
- "aria-expanded": N.value,
229
- "aria-haspopup": "listbox",
230
- "aria-disabled": p.disabled || void 0,
231
- "aria-required": p.required || void 0,
232
- disabled: p.disabled || void 0,
233
- onClick: X,
234
- onFocus: o[0] ||= (e) => P.value = !0,
235
- onBlur: o[1] ||= (e) => P.value = !1
236
- }, [
237
- u("span", { class: h(["nb-select__value", {
238
- "nb-select__value--placeholder": !U.value,
239
- "nb-select__value--with-icon": !!H.value
240
- }]) }, [H.value ? (_(), s(e, {
241
- key: 0,
242
- class: "nb-select__value-icon",
243
- name: H.value,
244
- size: 16
245
- }, null, 8, ["name"])) : c("", !0), U.value ? b(i.$slots, "value", {
246
- key: 1,
247
- values: V.value
248
- }, () => [d(x(U.value), 1)]) : (_(), l(a, { key: 2 }, [d(x(p.placeholder), 1)], 64))], 2),
249
- p.error ? (_(), s(n, {
250
- key: 0,
251
- variant: "error",
252
- "icon-only": !0,
253
- class: "nb-select__status-icon"
254
- }, {
255
- default: w(() => [d(x(p.error), 1)]),
256
- _: 1
257
- })) : p.warning ? (_(), s(n, {
258
- key: 1,
259
- variant: "warning",
260
- "icon-only": !0,
261
- class: "nb-select__status-icon"
262
- }, {
263
- default: w(() => [d(x(p.warning), 1)]),
264
- _: 1
265
- })) : c("", !0),
266
- f(r, {
267
- align: "center",
268
- justify: "center",
269
- class: "nb-select__caret"
270
- }, {
271
- default: w(() => [f(e, {
272
- name: N.value ? S(D) : S(E),
273
- size: 16
274
- }, null, 8, ["name"])]),
275
- _: 1
276
- })
277
- ], 40, oe),
278
- p.error ? (_(), s(n, {
279
- key: 2,
280
- variant: "error",
281
- class: "nb-select__message"
282
- }, {
283
- default: w(() => [d(x(p.error), 1)]),
284
- _: 1
285
- })) : p.warning ? (_(), s(n, {
286
- key: 3,
287
- variant: "warning",
288
- class: "nb-select__message"
289
- }, {
290
- default: w(() => [d(x(p.warning), 1)]),
291
- _: 1
292
- })) : p.helper ? (_(), s(n, {
293
- key: 4,
294
- variant: "helper",
295
- class: "nb-select__message"
296
- }, {
297
- default: w(() => [d(x(p.helper), 1)]),
298
- _: 1
299
- })) : c("", !0)
300
- ], 64)) : p.variant === "fluid" ? (_(), l(a, { key: 1 }, [u("button", {
301
- id: B.value,
302
- ref_key: "triggerRef",
303
- ref: L,
304
- type: "button",
305
- class: "nb-select__trigger",
306
- role: "combobox",
307
- "aria-expanded": N.value,
308
- "aria-haspopup": "listbox",
309
- "aria-disabled": p.disabled || void 0,
310
- "aria-required": p.required || void 0,
311
- disabled: p.disabled || void 0,
312
- onClick: X,
313
- onFocus: o[2] ||= (e) => P.value = !0,
314
- onBlur: o[3] ||= (e) => P.value = !1
315
- }, [p.label || i.$slots.label ? (_(), s(r, {
316
- key: 0,
317
- dir: "row",
318
- align: "center",
319
- gap: "xs",
320
- class: "nb-select__inner-header"
321
- }, {
322
- default: w(() => [i.$slots.label ? b(i.$slots, "label", { key: 0 }) : (_(), l("label", O, [d(x(p.label) + " ", 1), p.required ? (_(), l("span", ce, "*")) : c("", !0)])), p.helper && !p.error && !p.warning ? (_(), s(n, {
323
- key: 2,
324
- variant: "helper",
325
- "icon-only": !0,
326
- class: "nb-select__inner-message"
327
- }, {
328
- default: w(() => [d(x(p.helper), 1)]),
329
- _: 1
330
- })) : c("", !0)]),
331
- _: 3
332
- })) : c("", !0), f(r, {
333
- dir: "row",
334
- align: "end",
335
- flex: "",
336
- class: "nb-select__value-row"
337
- }, {
338
- default: w(() => [u("span", { class: h(["nb-select__value", {
339
- "nb-select__value--placeholder": !U.value,
340
- "nb-select__value--with-icon": !!H.value
341
- }]) }, [H.value ? (_(), s(e, {
342
- key: 0,
343
- class: "nb-select__value-icon",
344
- name: H.value,
345
- size: 16
346
- }, null, 8, ["name"])) : c("", !0), U.value ? b(i.$slots, "value", {
347
- key: 1,
348
- values: V.value
349
- }, () => [d(x(U.value), 1)]) : (_(), l(a, { key: 2 }, [d(x(p.placeholder), 1)], 64))], 2), f(r, {
350
- align: "center",
351
- justify: "center",
352
- class: "nb-select__caret"
353
- }, {
354
- default: w(() => [f(e, {
355
- name: N.value ? S(D) : S(E),
356
- size: 16
357
- }, null, 8, ["name"])]),
358
- _: 1
359
- })]),
360
- _: 3
361
- })], 40, se), p.error ? (_(), s(n, {
362
- key: 0,
363
- variant: "error",
364
- class: "nb-select__fluid-message"
365
- }, {
366
- default: w(() => [d(x(p.error), 1)]),
367
- _: 1
368
- })) : p.warning ? (_(), s(n, {
369
- key: 1,
370
- variant: "warning",
371
- class: "nb-select__fluid-message"
372
- }, {
373
- default: w(() => [d(x(p.warning), 1)]),
374
- _: 1
375
- })) : c("", !0)], 64)) : c("", !0)], 34), (_(), s(ee, { to: "body" }, [N.value ? (_(), l("div", {
376
- key: 0,
377
- ref_key: "dropdownRef",
378
- ref: R,
379
- class: "nb-select__dropdown",
380
- style: te(z.value),
381
- role: "listbox",
382
- "aria-multiselectable": p.multiple || void 0
383
- }, [
384
- (_(!0), l(a, null, y(xe.value, (t) => (_(), l("div", {
385
- key: t.key,
386
- class: "nb-select__group",
387
- role: "group",
388
- "aria-labelledby": t.name ? t.labelId : void 0
389
- }, [t.name ? (_(), l("div", {
390
- key: 0,
391
- id: t.labelId,
392
- class: "nb-select__group-label"
393
- }, x(t.name), 9, de)) : c("", !0), (_(!0), l(a, null, y(t.entries, (t) => (_(), l("div", {
394
- key: t.option.value,
395
- class: h(["nb-select__option", {
396
- "nb-select__option--selected": W(t.option.value),
397
- "nb-select__option--highlighted": F.value === t.index,
398
- "nb-select__option--disabled": t.option.disabled
399
- }]),
400
- role: "option",
401
- "aria-selected": W(t.option.value),
402
- "aria-disabled": t.option.disabled || void 0,
403
- onMouseenter: (e) => F.value = t.index,
404
- onClick: (e) => K(t.option)
405
- }, [
406
- p.multiple ? (_(), l("span", pe, [W(t.option.value) ? (_(), l("svg", me, [...o[7] ||= [u("path", {
407
- d: "M1 4l3 3 5-6",
408
- stroke: "currentColor",
409
- "stroke-width": "1.5",
410
- "stroke-linecap": "round",
411
- "stroke-linejoin": "round"
412
- }, null, -1)]])) : c("", !0)])) : c("", !0),
413
- t.option.icon ? (_(), s(e, {
414
- key: 1,
415
- class: "nb-select__option-icon",
416
- name: t.option.icon,
417
- size: 16
418
- }, null, 8, ["name"])) : c("", !0),
419
- u("span", he, [b(i.$slots, "option", { option: t.option }, () => [d(x(t.option.label), 1)])])
420
- ], 42, fe))), 128))], 8, ue))), 128)),
421
- !p.options || p.options.length === 0 ? (_(), l("div", ge, " No options ")) : c("", !0),
422
- p.creatable ? (_(), l("div", {
423
- key: 1,
424
- class: "nb-select__create",
425
- onMousedown: o[6] ||= T(() => {}, ["prevent"])
426
- }, [ie(u("input", {
427
- "onUpdate:modelValue": o[4] ||= (e) => M.value = e,
428
- type: "text",
429
- class: "nb-select__create-input",
430
- placeholder: p.createPlaceholder || "Add new…",
431
- onKeydown: [ae(T(ye, ["prevent"]), ["enter"]), o[5] ||= T(() => {}, ["stop"])]
432
- }, null, 40, _e), [[ne, M.value]])], 32)) : c("", !0)
433
- ], 12, le)) : c("", !0)]))], 64));
434
- }
435
- });
436
- //#endregion
437
- export { k as t };
@@ -1 +0,0 @@
1
- require(`./chunk-D-qHiVGv.cjs`);const e=require(`./_plugin-vue_export-helper-tagjRzOz.cjs`),t=require(`./Icon-C8R_r_In.cjs`),n=require(`./composables/useStableId.composable.cjs`),r=require(`./composables/usePhoneLayout.composable.cjs`),i=require(`./utils/slotContent.helper.cjs`),a=require(`./Badge-Dkm7PBJ8.cjs`);let o=require(`vue`);var s=function(e){return e.Line=`line`,e.Contained=`contained`,e}(s||{}),c=function(e){return e.Small=`sm`,e.Medium=`md`,e.Large=`lg`,e}(c||{}),l=[`aria-label`],u=[`id`,`data-tab-id`,`aria-selected`,`aria-controls`,`tabindex`,`disabled`,`onClick`],d={class:`nb-tabs__label`},f=[`id`,`aria-labelledby`],p=24,m=(0,o.defineComponent)({__name:`Tabs`,props:{items:{},ariaLabel:{default:void 0},modelValue:{default:void 0},variant:{default:s.Line},size:{default:c.Medium},disabled:{type:Boolean,default:!1},fullWidth:{type:Boolean,default:!1},id:{default:void 0}},emits:[`update:modelValue`,`change`],setup(e,{emit:s}){let m=e,h=s,g=(0,o.useSlots)(),_=n.useStableId(m),v=(0,o.ref)(null),y=(0,o.computed)(()=>m.items.filter(e=>!w(e))),b=(0,o.ref)(m.modelValue??y.value[0]?.id);(0,o.watch)(()=>m.modelValue,e=>{e!=null&&(b.value=e)});let x=(0,o.computed)(()=>{let e=m.modelValue??b.value,t=m.items.find(t=>t.id===e);return t&&!w(t)?t.id:y.value[0]?.id}),S=(0,o.computed)(()=>m.size===c.Large?18:16),C=(0,o.computed)(()=>[`nb-tabs`,`nb-tabs--${m.variant}`,`nb-tabs--${m.size}`,{"nb-tabs--full-width":m.fullWidth,"nb-tabs--disabled":m.disabled}]);function w(e){return m.disabled||!!e.disabled}function T(e){return`${_}-tab-${e}`}function E(e){return`${_}-panel-${e}`}function D(e){return i.hasSlotContent(g,e)}function O(e){w(e)||e.id===x.value||(b.value=e.id,h(`update:modelValue`,e.id),h(`change`,e.id,e))}function k(e){(v.value?.querySelectorAll(`[data-tab-id]`))?.forEach(t=>{t.dataset.tabId===e&&t.focus()})}function A(e){let t=y.value;if(!t.length)return;let n=t[(t.findIndex(e=>e.id===x.value)+e+t.length)%t.length];O(n),k(n.id)}function j(e){e&&(O(e),k(e.id))}let{phone:M}=r.usePhoneLayout(),N=(0,o.ref)(!1),P=(0,o.ref)(!1);function F(){let e=v.value;if(!M.value||!e)return;let t=e.scrollWidth-e.clientWidth;N.value=e.scrollLeft>1,P.value=e.scrollLeft<t-1}function I(){let e=v.value;if(!M.value||!e)return;let t=[...e.querySelectorAll(`[data-tab-id]`)].find(e=>e.dataset.tabId===x.value);if(t){let n=e.getBoundingClientRect(),r=t.getBoundingClientRect(),i=r.left-n.left+e.scrollLeft,a=i+r.width,o=t===e.firstElementChild,s=t===e.lastElementChild;i<e.scrollLeft+(o?0:p)?e.scrollLeft=Math.max(0,o?0:i-p):a>e.scrollLeft+e.clientWidth-(s?0:p)&&(e.scrollLeft=a-e.clientWidth+(s?0:p))}F()}(0,o.watch)([x,M],()=>(0,o.nextTick)(I));function L(){I()}(0,o.onMounted)(()=>{I(),window.addEventListener(`resize`,L,{passive:!0})}),(0,o.onBeforeUnmount)(()=>{window.removeEventListener(`resize`,L)});function R(e){switch(e.key){case`ArrowRight`:A(1);break;case`ArrowLeft`:A(-1);break;case`Home`:j(y.value[0]);break;case`End`:j(y.value[y.value.length-1]);break;default:return}e.preventDefault()}return(n,r)=>((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{class:(0,o.normalizeClass)(C.value)},[(0,o.createElementVNode)(`div`,{ref_key:`listRef`,ref:v,class:(0,o.normalizeClass)([`nb-tabs__list`,{"nb-tabs__list--fade-start":(0,o.unref)(M)&&N.value,"nb-tabs__list--fade-end":(0,o.unref)(M)&&P.value}]),role:`tablist`,"aria-label":e.ariaLabel||void 0,onKeydown:R,onScrollPassive:F},[((0,o.openBlock)(!0),(0,o.createElementBlock)(o.Fragment,null,(0,o.renderList)(e.items,e=>((0,o.openBlock)(),(0,o.createElementBlock)(`button`,{id:T(e.id),key:e.id,"data-tab-id":e.id,type:`button`,role:`tab`,class:(0,o.normalizeClass)([`nb-tabs__tab`,{"nb-tabs__tab--active":e.id===x.value}]),"aria-selected":e.id===x.value,"aria-controls":D(e.id)?E(e.id):void 0,tabindex:e.id===x.value?0:-1,disabled:w(e),onClick:t=>O(e)},[e.icon?((0,o.openBlock)(),(0,o.createBlock)(t.t,{key:0,name:e.icon,size:S.value,class:`nb-tabs__icon`},null,8,[`name`,`size`])):(0,o.createCommentVNode)(``,!0),(0,o.createElementVNode)(`span`,d,(0,o.toDisplayString)(e.label),1),e.badge==null?(0,o.createCommentVNode)(``,!0):((0,o.openBlock)(),(0,o.createBlock)(a.t,{key:1,size:`sm`,class:`nb-tabs__badge`},{default:(0,o.withCtx)(()=>[(0,o.createTextVNode)((0,o.toDisplayString)(e.badge),1)]),_:2},1024))],10,u))),128))],42,l),((0,o.openBlock)(!0),(0,o.createElementBlock)(o.Fragment,null,(0,o.renderList)(e.items,e=>((0,o.openBlock)(),(0,o.createElementBlock)(o.Fragment,{key:`panel-${e.id}`},[e.id===x.value&&D(e.id)?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:0,id:E(e.id),class:`nb-tabs__panel`,role:`tabpanel`,"aria-labelledby":T(e.id),tabindex:`0`},[(0,o.renderSlot)(n.$slots,e.id,{item:e},void 0,!0)],8,f)):(0,o.createCommentVNode)(``,!0)],64))),128))],2))}}),h=e.t(m,[[`__scopeId`,`data-v-fecb01d1`]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return h}});
@@ -1,180 +0,0 @@
1
- import { t as e } from "./_plugin-vue_export-helper-O4QQSku4.js";
2
- import { t } from "./Icon-rREAqsu0.js";
3
- import { useStableId as n } from "./composables/useStableId.composable.mjs";
4
- import { usePhoneLayout as r } from "./composables/usePhoneLayout.composable.mjs";
5
- import { hasSlotContent as i } from "./utils/slotContent.helper.mjs";
6
- import { t as a } from "./Badge-D3oJVwDo.js";
7
- import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, defineComponent as p, nextTick as m, normalizeClass as h, onBeforeUnmount as g, onMounted as _, openBlock as v, ref as y, renderList as b, renderSlot as x, toDisplayString as S, unref as C, useSlots as w, watch as T, withCtx as E } from "vue";
8
- //#region src/components/Tabs.d.ts
9
- var D = /* @__PURE__ */ function(e) {
10
- return e.Line = "line", e.Contained = "contained", e;
11
- }(D || {}), O = /* @__PURE__ */ function(e) {
12
- return e.Small = "sm", e.Medium = "md", e.Large = "lg", e;
13
- }(O || {}), k = ["aria-label"], A = [
14
- "id",
15
- "data-tab-id",
16
- "aria-selected",
17
- "aria-controls",
18
- "tabindex",
19
- "disabled",
20
- "onClick"
21
- ], ee = { class: "nb-tabs__label" }, j = ["id", "aria-labelledby"], M = 24, N = /* @__PURE__ */ e(/* @__PURE__ */ p({
22
- __name: "Tabs",
23
- props: {
24
- items: {},
25
- ariaLabel: { default: void 0 },
26
- modelValue: { default: void 0 },
27
- variant: { default: D.Line },
28
- size: { default: O.Medium },
29
- disabled: {
30
- type: Boolean,
31
- default: !1
32
- },
33
- fullWidth: {
34
- type: Boolean,
35
- default: !1
36
- },
37
- id: { default: void 0 }
38
- },
39
- emits: ["update:modelValue", "change"],
40
- setup(e, { emit: p }) {
41
- let D = e, N = p, P = w(), F = n(D), I = y(null), L = s(() => D.items.filter((e) => !B(e))), R = y(D.modelValue ?? L.value[0]?.id);
42
- T(() => D.modelValue, (e) => {
43
- e != null && (R.value = e);
44
- });
45
- let z = s(() => {
46
- let e = D.modelValue ?? R.value, t = D.items.find((t) => t.id === e);
47
- return t && !B(t) ? t.id : L.value[0]?.id;
48
- }), te = s(() => D.size === O.Large ? 18 : 16), ne = s(() => [
49
- "nb-tabs",
50
- `nb-tabs--${D.variant}`,
51
- `nb-tabs--${D.size}`,
52
- {
53
- "nb-tabs--full-width": D.fullWidth,
54
- "nb-tabs--disabled": D.disabled
55
- }
56
- ]);
57
- function B(e) {
58
- return D.disabled || !!e.disabled;
59
- }
60
- function V(e) {
61
- return `${F}-tab-${e}`;
62
- }
63
- function H(e) {
64
- return `${F}-panel-${e}`;
65
- }
66
- function U(e) {
67
- return i(P, e);
68
- }
69
- function W(e) {
70
- B(e) || e.id === z.value || (R.value = e.id, N("update:modelValue", e.id), N("change", e.id, e));
71
- }
72
- function G(e) {
73
- (I.value?.querySelectorAll("[data-tab-id]"))?.forEach((t) => {
74
- t.dataset.tabId === e && t.focus();
75
- });
76
- }
77
- function K(e) {
78
- let t = L.value;
79
- if (!t.length) return;
80
- let n = t[(t.findIndex((e) => e.id === z.value) + e + t.length) % t.length];
81
- W(n), G(n.id);
82
- }
83
- function q(e) {
84
- e && (W(e), G(e.id));
85
- }
86
- let { phone: J } = r(), Y = y(!1), X = y(!1);
87
- function Z() {
88
- let e = I.value;
89
- if (!J.value || !e) return;
90
- let t = e.scrollWidth - e.clientWidth;
91
- Y.value = e.scrollLeft > 1, X.value = e.scrollLeft < t - 1;
92
- }
93
- function Q() {
94
- let e = I.value;
95
- if (!J.value || !e) return;
96
- let t = [...e.querySelectorAll("[data-tab-id]")].find((e) => e.dataset.tabId === z.value);
97
- if (t) {
98
- let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = r.left - n.left + e.scrollLeft, a = i + r.width, o = t === e.firstElementChild, s = t === e.lastElementChild;
99
- i < e.scrollLeft + (o ? 0 : M) ? e.scrollLeft = Math.max(0, o ? 0 : i - M) : a > e.scrollLeft + e.clientWidth - (s ? 0 : M) && (e.scrollLeft = a - e.clientWidth + (s ? 0 : M));
100
- }
101
- Z();
102
- }
103
- T([z, J], () => m(Q));
104
- function $() {
105
- Q();
106
- }
107
- _(() => {
108
- Q(), window.addEventListener("resize", $, { passive: !0 });
109
- }), g(() => {
110
- window.removeEventListener("resize", $);
111
- });
112
- function re(e) {
113
- switch (e.key) {
114
- case "ArrowRight":
115
- K(1);
116
- break;
117
- case "ArrowLeft":
118
- K(-1);
119
- break;
120
- case "Home":
121
- q(L.value[0]);
122
- break;
123
- case "End":
124
- q(L.value[L.value.length - 1]);
125
- break;
126
- default: return;
127
- }
128
- e.preventDefault();
129
- }
130
- return (n, r) => (v(), u("div", { class: h(ne.value) }, [d("div", {
131
- ref_key: "listRef",
132
- ref: I,
133
- class: h(["nb-tabs__list", {
134
- "nb-tabs__list--fade-start": C(J) && Y.value,
135
- "nb-tabs__list--fade-end": C(J) && X.value
136
- }]),
137
- role: "tablist",
138
- "aria-label": e.ariaLabel || void 0,
139
- onKeydown: re,
140
- onScrollPassive: Z
141
- }, [(v(!0), u(o, null, b(e.items, (e) => (v(), u("button", {
142
- id: V(e.id),
143
- key: e.id,
144
- "data-tab-id": e.id,
145
- type: "button",
146
- role: "tab",
147
- class: h(["nb-tabs__tab", { "nb-tabs__tab--active": e.id === z.value }]),
148
- "aria-selected": e.id === z.value,
149
- "aria-controls": U(e.id) ? H(e.id) : void 0,
150
- tabindex: e.id === z.value ? 0 : -1,
151
- disabled: B(e),
152
- onClick: (t) => W(e)
153
- }, [
154
- e.icon ? (v(), c(t, {
155
- key: 0,
156
- name: e.icon,
157
- size: te.value,
158
- class: "nb-tabs__icon"
159
- }, null, 8, ["name", "size"])) : l("", !0),
160
- d("span", ee, S(e.label), 1),
161
- e.badge == null ? l("", !0) : (v(), c(a, {
162
- key: 1,
163
- size: "sm",
164
- class: "nb-tabs__badge"
165
- }, {
166
- default: E(() => [f(S(e.badge), 1)]),
167
- _: 2
168
- }, 1024))
169
- ], 10, A))), 128))], 42, k), (v(!0), u(o, null, b(e.items, (e) => (v(), u(o, { key: `panel-${e.id}` }, [e.id === z.value && U(e.id) ? (v(), u("div", {
170
- key: 0,
171
- id: H(e.id),
172
- class: "nb-tabs__panel",
173
- role: "tabpanel",
174
- "aria-labelledby": V(e.id),
175
- tabindex: "0"
176
- }, [x(n.$slots, e.id, { item: e }, void 0, !0)], 8, j)) : l("", !0)], 64))), 128))], 2));
177
- }
178
- }), [["__scopeId", "data-v-fecb01d1"]]);
179
- //#endregion
180
- export { N as t };