bitboss-ui 0.2.68 → 0.2.69
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.
- package/dist/index101.js +2 -2
- package/dist/index103.js +2 -2
- package/dist/index109.js +1 -1
- package/dist/index11.js +2 -2
- package/dist/index111.js +4 -4
- package/dist/index113.js +1 -1
- package/dist/index116.js +1 -1
- package/dist/index117.js +1 -1
- package/dist/index118.js +1 -1
- package/dist/index119.js +1 -1
- package/dist/index125.js +1 -1
- package/dist/index126.js +1 -1
- package/dist/index131.js +2 -2
- package/dist/index15.js +7 -7
- package/dist/index17.js +8 -8
- package/dist/index19.js +3 -3
- package/dist/index197.js +3 -235
- package/dist/index197.js.map +1 -1
- package/dist/index198.js +3 -2
- package/dist/index198.js.map +1 -1
- package/dist/index199.js +368 -4
- package/dist/index199.js.map +1 -1
- package/dist/index200.js +134 -10
- package/dist/index200.js.map +1 -1
- package/dist/index201.js +2 -2
- package/dist/index202.js +18 -15
- package/dist/index202.js.map +1 -1
- package/dist/index203.js +2 -16
- package/dist/index203.js.map +1 -1
- package/dist/index204.js +2 -19
- package/dist/index204.js.map +1 -1
- package/dist/index205.js +172 -18
- package/dist/index205.js.map +1 -1
- package/dist/index206.js +23 -29
- package/dist/index206.js.map +1 -1
- package/dist/index207.js +373 -8
- package/dist/index207.js.map +1 -1
- package/dist/index208.js +16 -2
- package/dist/index208.js.map +1 -1
- package/dist/index209.js +14 -366
- package/dist/index209.js.map +1 -1
- package/dist/index21.js +2 -2
- package/dist/index210.js +17 -131
- package/dist/index210.js.map +1 -1
- package/dist/index211.js +29 -2
- package/dist/index211.js.map +1 -1
- package/dist/index212.js +8 -174
- package/dist/index212.js.map +1 -1
- package/dist/index213.js +3 -23
- package/dist/index213.js.map +1 -1
- package/dist/index214.js +31 -369
- package/dist/index214.js.map +1 -1
- package/dist/index215.js +6 -3
- package/dist/index215.js.map +1 -1
- package/dist/index216.js +2 -35
- package/dist/index216.js.map +1 -1
- package/dist/index217.js +4 -6
- package/dist/index217.js.map +1 -1
- package/dist/index218.js +235 -3
- package/dist/index218.js.map +1 -1
- package/dist/index219.js +10 -3
- package/dist/index219.js.map +1 -1
- package/dist/index220.js +2 -121
- package/dist/index220.js.map +1 -1
- package/dist/index221.js +121 -2
- package/dist/index221.js.map +1 -1
- package/dist/index222.js +2 -2
- package/dist/index222.js.map +1 -1
- package/dist/index224.js +6 -79
- package/dist/index224.js.map +1 -1
- package/dist/index225.js +17 -6
- package/dist/index225.js.map +1 -1
- package/dist/index226.js +224 -17
- package/dist/index226.js.map +1 -1
- package/dist/index227.js +258 -2
- package/dist/index227.js.map +1 -1
- package/dist/index228.js +6 -4
- package/dist/index228.js.map +1 -1
- package/dist/index229.js +2 -69
- package/dist/index229.js.map +1 -1
- package/dist/index230.js +295 -2
- package/dist/index230.js.map +1 -1
- package/dist/index231.js +2 -6
- package/dist/index231.js.map +1 -1
- package/dist/index232.js +2 -2
- package/dist/index233.js +116 -294
- package/dist/index233.js.map +1 -1
- package/dist/index234.js +106 -2
- package/dist/index234.js.map +1 -1
- package/dist/index236.js +2 -117
- package/dist/index236.js.map +1 -1
- package/dist/index237.js +2 -106
- package/dist/index237.js.map +1 -1
- package/dist/index238.js +2 -160
- package/dist/index238.js.map +1 -1
- package/dist/index239.js +437 -1
- package/dist/index239.js.map +1 -1
- package/dist/index240.js +89 -5
- package/dist/index240.js.map +1 -1
- package/dist/index241.js +4 -2
- package/dist/index241.js.map +1 -1
- package/dist/index242.js +79 -2
- package/dist/index242.js.map +1 -1
- package/dist/index243.js +69 -2
- package/dist/index243.js.map +1 -1
- package/dist/index244.js +5 -2
- package/dist/index244.js.map +1 -1
- package/dist/index245.js +189 -424
- package/dist/index245.js.map +1 -1
- package/dist/index246.js +159 -88
- package/dist/index246.js.map +1 -1
- package/dist/index247.js +1 -226
- package/dist/index247.js.map +1 -1
- package/dist/index248.js +2 -258
- package/dist/index248.js.map +1 -1
- package/dist/index249.js +2 -200
- package/dist/index249.js.map +1 -1
- package/dist/index25.js +2 -2
- package/dist/index254.js +1 -1
- package/dist/index255.js +2 -2
- package/dist/index29.js +3 -3
- package/dist/index31.js +7 -7
- package/dist/index33.js +1 -1
- package/dist/index35.js +2 -2
- package/dist/index47.js +1 -1
- package/dist/index49.js +1 -1
- package/dist/index65.js +4 -4
- package/dist/index69.js +2 -2
- package/dist/index72.js +1 -1
- package/dist/index75.js +1 -1
- package/dist/index77.js +1 -1
- package/dist/index79.js +4 -4
- package/dist/index99.js +70 -70
- package/dist/index99.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/index99.js
CHANGED
|
@@ -5,10 +5,10 @@ import { useRouter as W } from "./index130.js";
|
|
|
5
5
|
import { wait as X } from "./index122.js";
|
|
6
6
|
import Y from "./index9.js";
|
|
7
7
|
import "./index10.js";
|
|
8
|
-
const Z = ["id"], ee = { class: "bb-tab__label-boundary" },
|
|
8
|
+
const Z = ["id"], ee = { class: "bb-tab__label-boundary" }, le = {
|
|
9
9
|
class: "bb-tab__label-container",
|
|
10
10
|
role: "tablist"
|
|
11
|
-
},
|
|
11
|
+
}, te = { class: "bb-tab__label" }, ae = { class: "bb-tab__panes-container" }, se = ["id", "aria-labelledby"], be = /* @__PURE__ */ D({
|
|
12
12
|
__name: "BbTab",
|
|
13
13
|
props: {
|
|
14
14
|
disabled: { type: Boolean },
|
|
@@ -23,46 +23,46 @@ const Z = ["id"], ee = { class: "bb-tab__label-boundary" }, te = {
|
|
|
23
23
|
emits: ["update:modelValue"],
|
|
24
24
|
setup(F, { expose: N, emit: A }) {
|
|
25
25
|
var T, S, x, I, V, L, C;
|
|
26
|
-
const
|
|
27
|
-
() =>
|
|
28
|
-
), y = p(() => i.value === 0), f = p(() => i.value ===
|
|
29
|
-
if (
|
|
26
|
+
const t = F, P = A, o = Q(), v = W(), k = t.id ?? M().id.value, b = `bb-tab_${k}`, $ = !!((S = (T = z()) == null ? void 0 : T.proxy) != null && S.$inertia), a = K(null), i = p(
|
|
27
|
+
() => t.items.findIndex((e) => e.key === a.value)
|
|
28
|
+
), y = p(() => i.value === 0), f = p(() => i.value === t.items.length - 1);
|
|
29
|
+
if (t.items.forEach((e) => {
|
|
30
30
|
if (!e.key)
|
|
31
31
|
throw console.error("A tab item has no key", e), new Error("A tab item has no key " + JSON.stringify(e));
|
|
32
|
-
}),
|
|
33
|
-
|
|
34
|
-
else if (
|
|
35
|
-
|
|
36
|
-
|
|
32
|
+
}), t.navigation && ((I = (x = o.value) == null ? void 0 : x.query) != null && I[t.querykey]))
|
|
33
|
+
a.value = (L = (V = o.value) == null ? void 0 : V.query) == null ? void 0 : L[t.querykey];
|
|
34
|
+
else if (t.navigation && $ && ((C = globalThis == null ? void 0 : globalThis.location) != null && C.href) && new URL(globalThis.location.href).searchParams.get(t.querykey))
|
|
35
|
+
a.value = new URL(globalThis.location.href).searchParams.get(
|
|
36
|
+
t.querykey
|
|
37
37
|
);
|
|
38
|
-
else if (
|
|
39
|
-
|
|
40
|
-
else if (
|
|
41
|
-
const e =
|
|
38
|
+
else if (t.modelValue)
|
|
39
|
+
a.value = t.modelValue;
|
|
40
|
+
else if (t.items[0]) {
|
|
41
|
+
const e = t.items.find((l) => !l.disabled);
|
|
42
42
|
if (!e)
|
|
43
43
|
throw new Error(
|
|
44
44
|
"No tab has been selected so it defaulted to the first available. Still, all the tabs are disabled so no tab can be selected."
|
|
45
45
|
);
|
|
46
46
|
const s = e.key;
|
|
47
|
-
|
|
47
|
+
a.value = s;
|
|
48
48
|
}
|
|
49
49
|
const c = async (e, s = !1) => {
|
|
50
|
-
var
|
|
51
|
-
if (
|
|
50
|
+
var l, n, E, R;
|
|
51
|
+
if (t.navigation && o.value && ((n = (l = o.value) == null ? void 0 : l.query) == null ? void 0 : n[t.querykey]) !== e)
|
|
52
52
|
v == null || v.push({
|
|
53
53
|
...o,
|
|
54
|
-
query: { ...(E = o.value) == null ? void 0 : E.query, [
|
|
54
|
+
query: { ...(E = o.value) == null ? void 0 : E.query, [t.querykey]: e },
|
|
55
55
|
replace: s
|
|
56
56
|
});
|
|
57
|
-
else if (
|
|
57
|
+
else if (t.navigation && $ && ((R = globalThis == null ? void 0 : globalThis.location) != null && R.href) && new URL(globalThis.location.href).searchParams.get(t.querykey) !== e) {
|
|
58
58
|
const h = new URL(globalThis.location.href);
|
|
59
|
-
h.searchParams.set(
|
|
59
|
+
h.searchParams.set(t.querykey, e), X(0).then(() => {
|
|
60
60
|
s ? history.replaceState({}, "", h.toString()) : history.pushState({}, "", h.toString());
|
|
61
61
|
});
|
|
62
62
|
}
|
|
63
|
-
|
|
63
|
+
t.modelValue !== e && P("update:modelValue", e), a.value = e;
|
|
64
64
|
};
|
|
65
|
-
|
|
65
|
+
a.value && c(a.value, !0);
|
|
66
66
|
const r = (e) => {
|
|
67
67
|
var s = null;
|
|
68
68
|
switch (e) {
|
|
@@ -70,25 +70,25 @@ const Z = ["id"], ee = { class: "bb-tab__label-boundary" }, te = {
|
|
|
70
70
|
s = 0;
|
|
71
71
|
break;
|
|
72
72
|
case "previous":
|
|
73
|
-
s = (i.value +
|
|
73
|
+
s = (i.value + t.items.length - 1) % t.items.length;
|
|
74
74
|
break;
|
|
75
75
|
case "next":
|
|
76
|
-
s = (i.value + 1) %
|
|
76
|
+
s = (i.value + 1) % t.items.length;
|
|
77
77
|
break;
|
|
78
78
|
case "last":
|
|
79
|
-
s =
|
|
79
|
+
s = t.items.length - 1;
|
|
80
80
|
break;
|
|
81
81
|
}
|
|
82
82
|
if (s === null)
|
|
83
83
|
throw new Error("Could not navigate to next tab");
|
|
84
|
-
if (
|
|
84
|
+
if (t.items[s].disabled)
|
|
85
85
|
return;
|
|
86
|
-
const
|
|
87
|
-
`#${b}_tab_${
|
|
86
|
+
const l = t.items[s].key, n = document.querySelector(
|
|
87
|
+
`#${b}_tab_${l}`
|
|
88
88
|
);
|
|
89
|
-
n == null || n.focus(), c(
|
|
89
|
+
n == null || n.focus(), c(l);
|
|
90
90
|
}, U = (e) => {
|
|
91
|
-
if (!
|
|
91
|
+
if (!t.disabled)
|
|
92
92
|
if (e.key === "ArrowRight")
|
|
93
93
|
r("next");
|
|
94
94
|
else if (e.key === "ArrowLeft")
|
|
@@ -101,31 +101,31 @@ const Z = ["id"], ee = { class: "bb-tab__label-boundary" }, te = {
|
|
|
101
101
|
return;
|
|
102
102
|
};
|
|
103
103
|
return _(
|
|
104
|
-
() =>
|
|
104
|
+
() => t.modelValue,
|
|
105
105
|
(e) => {
|
|
106
106
|
e && c(e);
|
|
107
107
|
}
|
|
108
108
|
), _(
|
|
109
109
|
() => {
|
|
110
110
|
var e, s;
|
|
111
|
-
return (s = (e = o.value) == null ? void 0 : e.query) == null ? void 0 : s[
|
|
111
|
+
return (s = (e = o.value) == null ? void 0 : e.query) == null ? void 0 : s[t.querykey];
|
|
112
112
|
},
|
|
113
113
|
(e) => {
|
|
114
114
|
e && typeof e == "string" && c(e);
|
|
115
115
|
}
|
|
116
116
|
), _(
|
|
117
|
-
|
|
117
|
+
a,
|
|
118
118
|
() => {
|
|
119
119
|
const e = document.querySelector(
|
|
120
120
|
`#${k} [role=tablist] .bb-tab__btn--active`
|
|
121
121
|
);
|
|
122
|
-
e
|
|
122
|
+
e ? (console.log("scrolling element into view"), e.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" })) : console.error("no element found");
|
|
123
123
|
},
|
|
124
124
|
{ flush: "post" }
|
|
125
125
|
), N({
|
|
126
126
|
isFirst: y,
|
|
127
127
|
isLast: f,
|
|
128
|
-
current:
|
|
128
|
+
current: a,
|
|
129
129
|
currentIndex: i,
|
|
130
130
|
goTo: r
|
|
131
131
|
}), (e, s) => (u(), d("div", {
|
|
@@ -136,45 +136,45 @@ const Z = ["id"], ee = { class: "bb-tab__label-boundary" }, te = {
|
|
|
136
136
|
}])
|
|
137
137
|
}, [
|
|
138
138
|
m("div", ee, [
|
|
139
|
-
m("ul",
|
|
140
|
-
(u(!0), d(w, null, B(e.items, (
|
|
141
|
-
key:
|
|
139
|
+
m("ul", le, [
|
|
140
|
+
(u(!0), d(w, null, B(e.items, (l) => (u(), d("li", {
|
|
141
|
+
key: l.key,
|
|
142
142
|
role: "presentation"
|
|
143
143
|
}, [
|
|
144
144
|
J(Y, {
|
|
145
|
-
id: `${b}_tab_${
|
|
146
|
-
"aria-selected":
|
|
147
|
-
class: g(["bb-tab__btn", { "bb-tab__btn--active":
|
|
148
|
-
disabled:
|
|
145
|
+
id: `${b}_tab_${l.key}`,
|
|
146
|
+
"aria-selected": a.value === l.key,
|
|
147
|
+
class: g(["bb-tab__btn", { "bb-tab__btn--active": a.value === l.key }]),
|
|
148
|
+
disabled: l.disabled || e.disabled,
|
|
149
149
|
role: "tab",
|
|
150
|
-
tabindex:
|
|
151
|
-
onClick: (n) => c(
|
|
150
|
+
tabindex: a.value === l.key ? 0 : -1,
|
|
151
|
+
onClick: (n) => c(l.key),
|
|
152
152
|
onKeydown: U
|
|
153
153
|
}, {
|
|
154
154
|
default: O(() => [
|
|
155
|
-
q(e.$slots, `label-${
|
|
156
|
-
current:
|
|
155
|
+
q(e.$slots, `label-${l.key}`, {
|
|
156
|
+
current: a.value,
|
|
157
157
|
currentIndex: i.value,
|
|
158
|
-
disabled: !!(
|
|
158
|
+
disabled: !!(l.disabled || e.disabled),
|
|
159
159
|
goTo: r,
|
|
160
160
|
isFirst: y.value,
|
|
161
161
|
isLast: f.value,
|
|
162
|
-
selected:
|
|
163
|
-
text:
|
|
164
|
-
value:
|
|
162
|
+
selected: a.value === l.key,
|
|
163
|
+
text: l.label,
|
|
164
|
+
value: l.key
|
|
165
165
|
}, () => [
|
|
166
166
|
q(e.$slots, "label", {
|
|
167
|
-
current:
|
|
167
|
+
current: a.value,
|
|
168
168
|
currentIndex: i.value,
|
|
169
|
-
disabled: !!(
|
|
169
|
+
disabled: !!(l.disabled || e.disabled),
|
|
170
170
|
goTo: r,
|
|
171
171
|
isFirst: y.value,
|
|
172
172
|
isLast: f.value,
|
|
173
|
-
selected:
|
|
174
|
-
text:
|
|
175
|
-
value:
|
|
173
|
+
selected: a.value === l.key,
|
|
174
|
+
text: l.label,
|
|
175
|
+
value: l.key
|
|
176
176
|
}, () => [
|
|
177
|
-
m("span",
|
|
177
|
+
m("span", te, j(l.label), 1)
|
|
178
178
|
])
|
|
179
179
|
])
|
|
180
180
|
]),
|
|
@@ -183,30 +183,30 @@ const Z = ["id"], ee = { class: "bb-tab__label-boundary" }, te = {
|
|
|
183
183
|
]))), 128))
|
|
184
184
|
])
|
|
185
185
|
]),
|
|
186
|
-
m("div",
|
|
187
|
-
(u(!0), d(w, null, B(e.items, (
|
|
188
|
-
key:
|
|
186
|
+
m("div", ae, [
|
|
187
|
+
(u(!0), d(w, null, B(e.items, (l) => (u(), d(w, {
|
|
188
|
+
key: l.key
|
|
189
189
|
}, [
|
|
190
|
-
|
|
190
|
+
a.value === l.key || e.eager || l.eager ? (u(), d("section", {
|
|
191
191
|
key: 0,
|
|
192
|
-
id: `${b}_tabpanel_${
|
|
193
|
-
"aria-labelledby": `${b}_tab_${
|
|
192
|
+
id: `${b}_tabpanel_${l.key}`,
|
|
193
|
+
"aria-labelledby": `${b}_tab_${l.key}`,
|
|
194
194
|
class: g(["bb-tab__pane", {
|
|
195
|
-
"bb-tab__pane--shown":
|
|
195
|
+
"bb-tab__pane--shown": a.value === l.key
|
|
196
196
|
}]),
|
|
197
197
|
role: "tabpanel",
|
|
198
198
|
tabindex: "0"
|
|
199
199
|
}, [
|
|
200
|
-
q(e.$slots,
|
|
201
|
-
current:
|
|
200
|
+
q(e.$slots, l.key, {
|
|
201
|
+
current: a.value,
|
|
202
202
|
currentIndex: i.value,
|
|
203
|
-
disabled: !!(
|
|
203
|
+
disabled: !!(l.disabled || e.disabled),
|
|
204
204
|
goTo: r,
|
|
205
205
|
isFirst: y.value,
|
|
206
206
|
isLast: f.value,
|
|
207
|
-
selected:
|
|
208
|
-
text:
|
|
209
|
-
value:
|
|
207
|
+
selected: a.value === l.key,
|
|
208
|
+
text: l.label,
|
|
209
|
+
value: l.key
|
|
210
210
|
})
|
|
211
211
|
], 10, se)) : G("", !0)
|
|
212
212
|
], 64))), 128))
|
package/dist/index99.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index99.js","sources":["../src/components/BbTab/BbTab.vue"],"sourcesContent":["<template>\n\t<div\n\t\t:id=\"id\"\n\t\tclass=\"bb-tab\"\n\t\t:class=\"{\n\t\t\t[`bb-tab--${direction}`]: true,\n\t\t\t'bb-tab--disabled': true,\n\t\t}\"\n\t>\n\t\t<div class=\"bb-tab__label-boundary\">\n\t\t\t<ul class=\"bb-tab__label-container\" role=\"tablist\">\n\t\t\t\t<li v-for=\"tab in items\" :key=\"tab.key\" role=\"presentation\">\n\t\t\t\t\t<BaseButton\n\t\t\t\t\t\t:id=\"`${instanceid}_tab_${tab.key}`\"\n\t\t\t\t\t\t:aria-selected=\"selectedTab === tab.key\"\n\t\t\t\t\t\tclass=\"bb-tab__btn\"\n\t\t\t\t\t\t:class=\"{ 'bb-tab__btn--active': selectedTab === tab.key }\"\n\t\t\t\t\t\t:disabled=\"tab.disabled || disabled\"\n\t\t\t\t\t\t:role=\"'tab'\"\n\t\t\t\t\t\t:tabindex=\"selectedTab === tab.key ? 0 : -1\"\n\t\t\t\t\t\t@click=\"onTabSelected(tab.key)\"\n\t\t\t\t\t\t@keydown=\"onKeydown\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot\n\t\t\t\t\t\t\t:current=\"selectedTab\"\n\t\t\t\t\t\t\t:current-index=\"currentTabIndex\"\n\t\t\t\t\t\t\t:disabled=\"!!(tab.disabled || disabled)\"\n\t\t\t\t\t\t\t:go-to=\"goTo\"\n\t\t\t\t\t\t\t:is-first=\"isFirst\"\n\t\t\t\t\t\t\t:is-last=\"isLast\"\n\t\t\t\t\t\t\t:name=\"`label-${tab.key}`\"\n\t\t\t\t\t\t\t:selected=\"selectedTab === tab.key\"\n\t\t\t\t\t\t\t:text=\"tab.label\"\n\t\t\t\t\t\t\t:value=\"tab.key\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot\n\t\t\t\t\t\t\t\t:current=\"selectedTab\"\n\t\t\t\t\t\t\t\t:current-index=\"currentTabIndex\"\n\t\t\t\t\t\t\t\t:disabled=\"!!(tab.disabled || disabled)\"\n\t\t\t\t\t\t\t\t:go-to=\"goTo\"\n\t\t\t\t\t\t\t\t:is-first=\"isFirst\"\n\t\t\t\t\t\t\t\t:is-last=\"isLast\"\n\t\t\t\t\t\t\t\tname=\"label\"\n\t\t\t\t\t\t\t\t:selected=\"selectedTab === tab.key\"\n\t\t\t\t\t\t\t\t:text=\"tab.label\"\n\t\t\t\t\t\t\t\t:value=\"tab.key\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span class=\"bb-tab__label\">{{ tab.label }}</span>\n\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t</slot>\n\t\t\t\t\t</BaseButton>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t\t<div class=\"bb-tab__panes-container\">\n\t\t\t<template v-for=\"tab in items\" :key=\"tab.key\">\n\t\t\t\t<section\n\t\t\t\t\tv-if=\"selectedTab === tab.key || eager || tab.eager\"\n\t\t\t\t\t:id=\"`${instanceid}_tabpanel_${tab.key}`\"\n\t\t\t\t\t:aria-labelledby=\"`${instanceid}_tab_${tab.key}`\"\n\t\t\t\t\tclass=\"bb-tab__pane\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t'bb-tab__pane--shown': selectedTab === tab.key,\n\t\t\t\t\t}\"\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\t:current=\"selectedTab\"\n\t\t\t\t\t\t:current-index=\"currentTabIndex\"\n\t\t\t\t\t\t:disabled=\"!!(tab.disabled || disabled)\"\n\t\t\t\t\t\t:go-to=\"goTo\"\n\t\t\t\t\t\t:is-first=\"isFirst\"\n\t\t\t\t\t\t:is-last=\"isLast\"\n\t\t\t\t\t\t:name=\"tab.key\"\n\t\t\t\t\t\t:selected=\"selectedTab === tab.key\"\n\t\t\t\t\t\t:text=\"tab.label\"\n\t\t\t\t\t\t:value=\"tab.key\"\n\t\t\t\t\t></slot>\n\t\t\t\t</section>\n\t\t\t</template>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, getCurrentInstance, computed } from 'vue';\nimport { useId } from '@/composables/useId';\nimport { useRoute } from '@/composables/useRoute';\nimport { useRouter } from '@/composables/useRouter';\nimport { wait } from '@/utilities/functions/wait';\nimport BaseButton from '../BaseButton/BaseButton.vue';\nimport type { CommonProps } from '@/types/CommonProps';\n\nexport type BbTabItem = Pick<CommonProps, 'disabled'> & {\n\t/**\n\t * Used to render a tab even when not visible.\n\t * It's useful if you want the content of a tab in the DOM\n\t * immediately rendered\n\t * even when not visible for SEO purposes.\n\t */\n\teager?: boolean;\n\t/**\n\t * String that identifies the tab.\n\t */\n\tkey: string;\n\t/**\n\t * Label to use as the tab text.\n\t */\n\tlabel?: string;\n};\n\nexport type BbTabProps = Pick<CommonProps, 'disabled' | 'eager' | 'id'> & {\n\t/**\n\t * Direction of the tabs component\n\t */\n\tdirection?: 'horizontal' | 'vertical';\n\t/**\n\t * Array of items that define the tabs in the component.\n\t */\n\titems: BbTabItem[];\n\t/**\n\t * The current tab. Used by v-model.\n\t */\n\tmodelValue?: null | BbTabItem['key'];\n\t/**\n\t * Synchronizes the current tab with the url.\n\t */\n\tnavigation?: boolean;\n\t/**\n\t * Defines the query key to reference for maintaining navigation\n\t */\n\tquerykey?: string;\n};\n\nconst props = withDefaults(defineProps<BbTabProps>(), {\n\tdirection: 'horizontal',\n\tquerykey: 'tab',\n});\n\nexport type BbTabEvents = {\n\t(e: 'update:modelValue', value: (typeof props.items)[number]['key']): void;\n};\nconst emit = defineEmits<BbTabEvents>();\n\ntype BbStepSlots = {\n\tlabel?: (props: {\n\t\tcurrent: string | null;\n\t\tcurrentIndex: number;\n\t\tdisabled: boolean;\n\t\tisFirst: boolean;\n\t\tisLast: boolean;\n\t\tselected: boolean;\n\t\ttext: BbTabItem['label'];\n\t\tvalue: string;\n\t\tgoTo: typeof goTo;\n\t}) => any;\n} & {\n\t[key: string]: (props: {\n\t\tcurrent: string | null;\n\t\tcurrentIndex: number;\n\t\tdisabled: boolean;\n\t\tisFirst: boolean;\n\t\tisLast: boolean;\n\t\tselected: boolean;\n\t\ttext: BbTabItem['label'];\n\t\tvalue: string;\n\t\tgoTo: typeof goTo;\n\t}) => any;\n};\n\ndefineSlots<BbStepSlots>();\n\nconst route = useRoute();\nconst router = useRouter();\n\nconst id = props.id ?? useId().id.value;\nconst instanceid = `bb-tab_${id}`;\n\n/* Ignore because possibly undefined */\n// @ts-expect-error possibly undef\nconst isInertia = !!getCurrentInstance()?.proxy?.$inertia;\n\nconst selectedTab = ref<BbTabItem['key'] | null>(null);\n\nconst currentTabIndex = computed(() =>\n\tprops.items.findIndex((el) => el.key === selectedTab.value)\n);\nconst isFirst = computed(() => currentTabIndex.value === 0);\nconst isLast = computed(() => currentTabIndex.value === props.items.length - 1);\n\nprops.items.forEach((item) => {\n\tif (!item.key) {\n\t\tconsole.error(`A tab item has no key`, item);\n\t\tthrow new Error('A tab item has no key ' + JSON.stringify(item));\n\t}\n});\n\n/* \nThis section retrieves the current tab that should be selected\n*/\n// Retrieve tab from url on load for vue apps\nif (props.navigation && route.value?.query?.[props.querykey]) {\n\tselectedTab.value = route.value?.query?.[props.querykey] as string;\n\t// Retrieve tab from url on load for inertia app\n} else if (\n\tprops.navigation &&\n\tisInertia &&\n\tglobalThis?.location?.href &&\n\tnew URL(globalThis.location.href).searchParams.get(props.querykey)\n) {\n\tselectedTab.value = new URL(globalThis.location.href).searchParams.get(\n\t\tprops.querykey\n\t) as string;\n\t// Else whatever tab is passed first\n} else if (props.modelValue) {\n\tselectedTab.value = props.modelValue;\n\t// Else whatever tab is passed first\n} else if (props.items[0]) {\n\tconst firstSelectableTab = props.items.find((item) => !item.disabled);\n\tif (!firstSelectableTab) {\n\t\tthrow new Error(\n\t\t\t'No tab has been selected so it defaulted to the first available. Still, all the tabs are disabled so no tab can be selected.'\n\t\t);\n\t}\n\tconst key = firstSelectableTab.key;\n\tselectedTab.value = key;\n}\n/* \nOnce the current tab is found update external variables\n*/\n\nconst onTabSelected = async (tab: BbTabItem['key'], replace = false) => {\n\t/* For Vue or Nuxt context */\n\tif (\n\t\tprops.navigation &&\n\t\troute.value &&\n\t\troute.value?.query?.[props.querykey] !== tab\n\t) {\n\t\trouter?.push({\n\t\t\t...route,\n\t\t\tquery: { ...route.value?.query, [props.querykey]: tab },\n\t\t\treplace,\n\t\t});\n\t\t/* Inertia context */\n\t} else if (\n\t\tprops.navigation &&\n\t\tisInertia &&\n\t\tglobalThis?.location?.href &&\n\t\tnew URL(globalThis.location.href).searchParams.get(props.querykey) !== tab\n\t) {\n\t\tconst url = new URL(globalThis.location.href);\n\t\turl.searchParams.set(props.querykey, tab);\n\t\twait(0).then(() => {\n\t\t\tif (replace) {\n\t\t\t\thistory.replaceState({}, '', url.toString());\n\t\t\t} else {\n\t\t\t\thistory.pushState({}, '', url.toString());\n\t\t\t}\n\t\t});\n\t}\n\tif (props.modelValue !== tab) {\n\t\temit('update:modelValue', tab);\n\t}\n\tselectedTab.value = tab;\n};\n\nif (selectedTab.value) {\n\tonTabSelected(selectedTab.value, true);\n}\n\nconst goTo = (target: 'first' | 'previous' | 'next' | 'last') => {\n\tvar nextTabIndex: number | null = null;\n\tswitch (target) {\n\t\tcase 'first':\n\t\t\tnextTabIndex = 0;\n\t\t\tbreak;\n\t\tcase 'previous':\n\t\t\tnextTabIndex =\n\t\t\t\t(currentTabIndex.value + props.items.length - 1) % props.items.length;\n\t\t\tbreak;\n\t\tcase 'next':\n\t\t\tnextTabIndex = (currentTabIndex.value + 1) % props.items.length;\n\t\t\tbreak;\n\t\tcase 'last':\n\t\t\tnextTabIndex = props.items.length - 1;\n\t\t\tbreak;\n\t\tdefault:\n\t\t\tbreak;\n\t}\n\tif (nextTabIndex === null) {\n\t\tthrow new Error('Could not navigate to next tab');\n\t}\n\tif (props.items[nextTabIndex].disabled) return;\n\tconst targetKey = props.items[nextTabIndex].key;\n\tconst button: HTMLButtonElement | null = document.querySelector(\n\t\t`#${instanceid}_tab_${targetKey}`\n\t);\n\tbutton?.focus();\n\tonTabSelected(targetKey);\n};\n\nconst onKeydown = (event: KeyboardEvent) => {\n\tif (props.disabled) return;\n\tif (event.key === 'ArrowRight') {\n\t\tgoTo('next');\n\t} else if (event.key === 'ArrowLeft') {\n\t\tgoTo('previous');\n\t} else if (event.key === 'Home') {\n\t\tevent.preventDefault();\n\t\tgoTo('first');\n\t} else if (event.key === 'End') {\n\t\tevent.preventDefault();\n\t\tgoTo('last');\n\t} else {\n\t\treturn;\n\t}\n};\n\nwatch(\n\t() => props.modelValue,\n\t(value) => {\n\t\tif (value) {\n\t\t\tonTabSelected(value);\n\t\t}\n\t}\n);\n\nwatch(\n\t() => route.value?.query?.[props.querykey],\n\t(value) => {\n\t\tif (value && typeof value === 'string') {\n\t\t\tonTabSelected(value);\n\t\t}\n\t}\n);\n\nwatch(\n\tselectedTab,\n\t() => {\n\t\tconst element = document.querySelector(\n\t\t\t`#${id} [role=tablist] .bb-tab__btn--active`\n\t\t);\n\t\telement?.scrollIntoView({ behavior: 'smooth', block: 'center' });\n\t},\n\t{ flush: 'post' }\n);\n\ndefineExpose({\n\tisFirst,\n\tisLast,\n\tcurrent: selectedTab,\n\tcurrentIndex: currentTabIndex,\n\tgoTo,\n});\n</script>\n\n<style lang=\"postcss\">\n@import '@/assets/css/BbTab';\n</style>\n"],"names":["props","__props","emit","__emit","route","useRoute","router","useRouter","id","useId","instanceid","isInertia","_b","_a","getCurrentInstance","selectedTab","ref","currentTabIndex","computed","el","isFirst","isLast","item","_d","_c","_f","_e","_g","firstSelectableTab","key","onTabSelected","tab","replace","url","wait","goTo","target","nextTabIndex","targetKey","button","onKeydown","event","watch","value","element","__expose"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index99.js","sources":["../src/components/BbTab/BbTab.vue"],"sourcesContent":["<template>\n\t<div\n\t\t:id=\"id\"\n\t\tclass=\"bb-tab\"\n\t\t:class=\"{\n\t\t\t[`bb-tab--${direction}`]: true,\n\t\t\t'bb-tab--disabled': true,\n\t\t}\"\n\t>\n\t\t<div class=\"bb-tab__label-boundary\">\n\t\t\t<ul class=\"bb-tab__label-container\" role=\"tablist\">\n\t\t\t\t<li v-for=\"tab in items\" :key=\"tab.key\" role=\"presentation\">\n\t\t\t\t\t<BaseButton\n\t\t\t\t\t\t:id=\"`${instanceid}_tab_${tab.key}`\"\n\t\t\t\t\t\t:aria-selected=\"selectedTab === tab.key\"\n\t\t\t\t\t\tclass=\"bb-tab__btn\"\n\t\t\t\t\t\t:class=\"{ 'bb-tab__btn--active': selectedTab === tab.key }\"\n\t\t\t\t\t\t:disabled=\"tab.disabled || disabled\"\n\t\t\t\t\t\t:role=\"'tab'\"\n\t\t\t\t\t\t:tabindex=\"selectedTab === tab.key ? 0 : -1\"\n\t\t\t\t\t\t@click=\"onTabSelected(tab.key)\"\n\t\t\t\t\t\t@keydown=\"onKeydown\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot\n\t\t\t\t\t\t\t:current=\"selectedTab\"\n\t\t\t\t\t\t\t:current-index=\"currentTabIndex\"\n\t\t\t\t\t\t\t:disabled=\"!!(tab.disabled || disabled)\"\n\t\t\t\t\t\t\t:go-to=\"goTo\"\n\t\t\t\t\t\t\t:is-first=\"isFirst\"\n\t\t\t\t\t\t\t:is-last=\"isLast\"\n\t\t\t\t\t\t\t:name=\"`label-${tab.key}`\"\n\t\t\t\t\t\t\t:selected=\"selectedTab === tab.key\"\n\t\t\t\t\t\t\t:text=\"tab.label\"\n\t\t\t\t\t\t\t:value=\"tab.key\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot\n\t\t\t\t\t\t\t\t:current=\"selectedTab\"\n\t\t\t\t\t\t\t\t:current-index=\"currentTabIndex\"\n\t\t\t\t\t\t\t\t:disabled=\"!!(tab.disabled || disabled)\"\n\t\t\t\t\t\t\t\t:go-to=\"goTo\"\n\t\t\t\t\t\t\t\t:is-first=\"isFirst\"\n\t\t\t\t\t\t\t\t:is-last=\"isLast\"\n\t\t\t\t\t\t\t\tname=\"label\"\n\t\t\t\t\t\t\t\t:selected=\"selectedTab === tab.key\"\n\t\t\t\t\t\t\t\t:text=\"tab.label\"\n\t\t\t\t\t\t\t\t:value=\"tab.key\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span class=\"bb-tab__label\">{{ tab.label }}</span>\n\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t</slot>\n\t\t\t\t\t</BaseButton>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t\t<div class=\"bb-tab__panes-container\">\n\t\t\t<template v-for=\"tab in items\" :key=\"tab.key\">\n\t\t\t\t<section\n\t\t\t\t\tv-if=\"selectedTab === tab.key || eager || tab.eager\"\n\t\t\t\t\t:id=\"`${instanceid}_tabpanel_${tab.key}`\"\n\t\t\t\t\t:aria-labelledby=\"`${instanceid}_tab_${tab.key}`\"\n\t\t\t\t\tclass=\"bb-tab__pane\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t'bb-tab__pane--shown': selectedTab === tab.key,\n\t\t\t\t\t}\"\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\t:current=\"selectedTab\"\n\t\t\t\t\t\t:current-index=\"currentTabIndex\"\n\t\t\t\t\t\t:disabled=\"!!(tab.disabled || disabled)\"\n\t\t\t\t\t\t:go-to=\"goTo\"\n\t\t\t\t\t\t:is-first=\"isFirst\"\n\t\t\t\t\t\t:is-last=\"isLast\"\n\t\t\t\t\t\t:name=\"tab.key\"\n\t\t\t\t\t\t:selected=\"selectedTab === tab.key\"\n\t\t\t\t\t\t:text=\"tab.label\"\n\t\t\t\t\t\t:value=\"tab.key\"\n\t\t\t\t\t></slot>\n\t\t\t\t</section>\n\t\t\t</template>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, getCurrentInstance, computed } from 'vue';\nimport { useId } from '@/composables/useId';\nimport { useRoute } from '@/composables/useRoute';\nimport { useRouter } from '@/composables/useRouter';\nimport { wait } from '@/utilities/functions/wait';\nimport BaseButton from '../BaseButton/BaseButton.vue';\nimport type { CommonProps } from '@/types/CommonProps';\n\nexport type BbTabItem = Pick<CommonProps, 'disabled'> & {\n\t/**\n\t * Used to render a tab even when not visible.\n\t * It's useful if you want the content of a tab in the DOM\n\t * immediately rendered\n\t * even when not visible for SEO purposes.\n\t */\n\teager?: boolean;\n\t/**\n\t * String that identifies the tab.\n\t */\n\tkey: string;\n\t/**\n\t * Label to use as the tab text.\n\t */\n\tlabel?: string;\n};\n\nexport type BbTabProps = Pick<CommonProps, 'disabled' | 'eager' | 'id'> & {\n\t/**\n\t * Direction of the tabs component\n\t */\n\tdirection?: 'horizontal' | 'vertical';\n\t/**\n\t * Array of items that define the tabs in the component.\n\t */\n\titems: BbTabItem[];\n\t/**\n\t * The current tab. Used by v-model.\n\t */\n\tmodelValue?: null | BbTabItem['key'];\n\t/**\n\t * Synchronizes the current tab with the url.\n\t */\n\tnavigation?: boolean;\n\t/**\n\t * Defines the query key to reference for maintaining navigation\n\t */\n\tquerykey?: string;\n};\n\nconst props = withDefaults(defineProps<BbTabProps>(), {\n\tdirection: 'horizontal',\n\tquerykey: 'tab',\n});\n\nexport type BbTabEvents = {\n\t(e: 'update:modelValue', value: (typeof props.items)[number]['key']): void;\n};\nconst emit = defineEmits<BbTabEvents>();\n\ntype BbStepSlots = {\n\tlabel?: (props: {\n\t\tcurrent: string | null;\n\t\tcurrentIndex: number;\n\t\tdisabled: boolean;\n\t\tisFirst: boolean;\n\t\tisLast: boolean;\n\t\tselected: boolean;\n\t\ttext: BbTabItem['label'];\n\t\tvalue: string;\n\t\tgoTo: typeof goTo;\n\t}) => any;\n} & {\n\t[key: string]: (props: {\n\t\tcurrent: string | null;\n\t\tcurrentIndex: number;\n\t\tdisabled: boolean;\n\t\tisFirst: boolean;\n\t\tisLast: boolean;\n\t\tselected: boolean;\n\t\ttext: BbTabItem['label'];\n\t\tvalue: string;\n\t\tgoTo: typeof goTo;\n\t}) => any;\n};\n\ndefineSlots<BbStepSlots>();\n\nconst route = useRoute();\nconst router = useRouter();\n\nconst id = props.id ?? useId().id.value;\nconst instanceid = `bb-tab_${id}`;\n\n/* Ignore because possibly undefined */\n// @ts-expect-error possibly undef\nconst isInertia = !!getCurrentInstance()?.proxy?.$inertia;\n\nconst selectedTab = ref<BbTabItem['key'] | null>(null);\n\nconst currentTabIndex = computed(() =>\n\tprops.items.findIndex((el) => el.key === selectedTab.value)\n);\nconst isFirst = computed(() => currentTabIndex.value === 0);\nconst isLast = computed(() => currentTabIndex.value === props.items.length - 1);\n\nprops.items.forEach((item) => {\n\tif (!item.key) {\n\t\tconsole.error(`A tab item has no key`, item);\n\t\tthrow new Error('A tab item has no key ' + JSON.stringify(item));\n\t}\n});\n\n/* \nThis section retrieves the current tab that should be selected\n*/\n// Retrieve tab from url on load for vue apps\nif (props.navigation && route.value?.query?.[props.querykey]) {\n\tselectedTab.value = route.value?.query?.[props.querykey] as string;\n\t// Retrieve tab from url on load for inertia app\n} else if (\n\tprops.navigation &&\n\tisInertia &&\n\tglobalThis?.location?.href &&\n\tnew URL(globalThis.location.href).searchParams.get(props.querykey)\n) {\n\tselectedTab.value = new URL(globalThis.location.href).searchParams.get(\n\t\tprops.querykey\n\t) as string;\n\t// Else whatever tab is passed first\n} else if (props.modelValue) {\n\tselectedTab.value = props.modelValue;\n\t// Else whatever tab is passed first\n} else if (props.items[0]) {\n\tconst firstSelectableTab = props.items.find((item) => !item.disabled);\n\tif (!firstSelectableTab) {\n\t\tthrow new Error(\n\t\t\t'No tab has been selected so it defaulted to the first available. Still, all the tabs are disabled so no tab can be selected.'\n\t\t);\n\t}\n\tconst key = firstSelectableTab.key;\n\tselectedTab.value = key;\n}\n/* \nOnce the current tab is found update external variables\n*/\n\nconst onTabSelected = async (tab: BbTabItem['key'], replace = false) => {\n\t/* For Vue or Nuxt context */\n\tif (\n\t\tprops.navigation &&\n\t\troute.value &&\n\t\troute.value?.query?.[props.querykey] !== tab\n\t) {\n\t\trouter?.push({\n\t\t\t...route,\n\t\t\tquery: { ...route.value?.query, [props.querykey]: tab },\n\t\t\treplace,\n\t\t});\n\t\t/* Inertia context */\n\t} else if (\n\t\tprops.navigation &&\n\t\tisInertia &&\n\t\tglobalThis?.location?.href &&\n\t\tnew URL(globalThis.location.href).searchParams.get(props.querykey) !== tab\n\t) {\n\t\tconst url = new URL(globalThis.location.href);\n\t\turl.searchParams.set(props.querykey, tab);\n\t\twait(0).then(() => {\n\t\t\tif (replace) {\n\t\t\t\thistory.replaceState({}, '', url.toString());\n\t\t\t} else {\n\t\t\t\thistory.pushState({}, '', url.toString());\n\t\t\t}\n\t\t});\n\t}\n\tif (props.modelValue !== tab) {\n\t\temit('update:modelValue', tab);\n\t}\n\tselectedTab.value = tab;\n};\n\nif (selectedTab.value) {\n\tonTabSelected(selectedTab.value, true);\n}\n\nconst goTo = (target: 'first' | 'previous' | 'next' | 'last') => {\n\tvar nextTabIndex: number | null = null;\n\tswitch (target) {\n\t\tcase 'first':\n\t\t\tnextTabIndex = 0;\n\t\t\tbreak;\n\t\tcase 'previous':\n\t\t\tnextTabIndex =\n\t\t\t\t(currentTabIndex.value + props.items.length - 1) % props.items.length;\n\t\t\tbreak;\n\t\tcase 'next':\n\t\t\tnextTabIndex = (currentTabIndex.value + 1) % props.items.length;\n\t\t\tbreak;\n\t\tcase 'last':\n\t\t\tnextTabIndex = props.items.length - 1;\n\t\t\tbreak;\n\t\tdefault:\n\t\t\tbreak;\n\t}\n\tif (nextTabIndex === null) {\n\t\tthrow new Error('Could not navigate to next tab');\n\t}\n\tif (props.items[nextTabIndex].disabled) return;\n\tconst targetKey = props.items[nextTabIndex].key;\n\tconst button: HTMLButtonElement | null = document.querySelector(\n\t\t`#${instanceid}_tab_${targetKey}`\n\t);\n\tbutton?.focus();\n\tonTabSelected(targetKey);\n};\n\nconst onKeydown = (event: KeyboardEvent) => {\n\tif (props.disabled) return;\n\tif (event.key === 'ArrowRight') {\n\t\tgoTo('next');\n\t} else if (event.key === 'ArrowLeft') {\n\t\tgoTo('previous');\n\t} else if (event.key === 'Home') {\n\t\tevent.preventDefault();\n\t\tgoTo('first');\n\t} else if (event.key === 'End') {\n\t\tevent.preventDefault();\n\t\tgoTo('last');\n\t} else {\n\t\treturn;\n\t}\n};\n\nwatch(\n\t() => props.modelValue,\n\t(value) => {\n\t\tif (value) {\n\t\t\tonTabSelected(value);\n\t\t}\n\t}\n);\n\nwatch(\n\t() => route.value?.query?.[props.querykey],\n\t(value) => {\n\t\tif (value && typeof value === 'string') {\n\t\t\tonTabSelected(value);\n\t\t}\n\t}\n);\n\nwatch(\n\tselectedTab,\n\t() => {\n\t\tconst element = document.querySelector(\n\t\t\t`#${id} [role=tablist] .bb-tab__btn--active`\n\t\t);\n\t\tif(element) {\n\t\t\tconsole.log('scrolling element into view')\n\t\t\telement.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });\n\t\t} else {\n\t\t\tconsole.error('no element found')\n\t\t}\n\t\t\n\t},\n\t{ flush: 'post' }\n);\n\ndefineExpose({\n\tisFirst,\n\tisLast,\n\tcurrent: selectedTab,\n\tcurrentIndex: currentTabIndex,\n\tgoTo,\n});\n</script>\n\n<style lang=\"postcss\">\n@import '@/assets/css/BbTab';\n</style>\n"],"names":["props","__props","emit","__emit","route","useRoute","router","useRouter","id","useId","instanceid","isInertia","_b","_a","getCurrentInstance","selectedTab","ref","currentTabIndex","computed","el","isFirst","isLast","item","_d","_c","_f","_e","_g","firstSelectableTab","key","onTabSelected","tab","replace","url","wait","goTo","target","nextTabIndex","targetKey","button","onKeydown","event","watch","value","element","__expose"],"mappings":"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"}
|