@bridge-ui/vue 0.5.1 → 0.6.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.
- package/ai/skills/bridge-ui-components/SKILL.md +2 -2
- package/dist/Components/Alert/alertDefaultIcons.js +1 -0
- package/dist/Components/Autocomplete/composables/useAutocomplete.d.ts +1 -1
- package/dist/Components/Autocomplete/composables/useAutocomplete.js +150 -145
- package/dist/Components/Button/Button.vue_vue_type_script_setup_true_lang.js +1 -0
- package/dist/Components/Button/button.types.d.ts +6 -0
- package/dist/Components/Button/composables/useButton.d.ts +4 -1
- package/dist/Components/Button/composables/useButton.js +88 -69
- package/dist/Components/ButtonGroup/ButtonGroup.js +5 -0
- package/dist/Components/ButtonGroup/ButtonGroup.vue.d.ts +14 -0
- package/dist/Components/ButtonGroup/ButtonGroup.vue_vue_type_script_setup_true_lang.js +37 -0
- package/dist/Components/ButtonGroup/buttonGroup.types.d.ts +93 -0
- package/dist/Components/ButtonGroup/buttonGroupInjectionKey.d.ts +7 -0
- package/dist/Components/ButtonGroup/buttonGroupInjectionKey.js +4 -0
- package/dist/Components/ButtonGroup/composables/useButtonGroup.d.ts +16 -0
- package/dist/Components/ButtonGroup/composables/useButtonGroup.js +66 -0
- package/dist/Components/ButtonGroup/index.d.ts +4 -0
- package/dist/Components/ButtonGroup/index.js +4 -0
- package/dist/Components/Calendar/Calendar.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/Components/CalendarRange/CalendarRange.vue_vue_type_script_setup_true_lang.js +2 -2
- package/dist/Components/Checkbox/composables/useCheckbox.js +1 -1
- package/dist/Components/DataTable/DataTable.vue_vue_type_script_setup_true_lang.js +89 -90
- package/dist/Components/DataTable/DataTableColumnsMenu.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/Components/DataTable/DataTableFilterMenu.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/Components/DataTable/DataTableFilterOptions.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/Components/DataTable/DataTableSortButton.vue.d.ts +5 -11
- package/dist/Components/DataTable/DataTableSortButton.vue_vue_type_script_setup_true_lang.js +22 -26
- package/dist/Components/DataTable/composables/useDataTable.d.ts +0 -3
- package/dist/Components/DataTable/composables/useDataTable.js +199 -213
- package/dist/Components/FieldOverlay/composables/useFieldOverlay.js +4 -1
- package/dist/Components/List/composables/useList.js +1 -1
- package/dist/Components/ListItem/ListItem.vue.d.ts +1 -1
- package/dist/Components/ListItem/composables/useListItem.d.ts +2 -2
- package/dist/Components/ListItem/composables/useListItem.js +101 -86
- package/dist/Components/ListSection/composables/useListSection.js +34 -31
- package/dist/Components/ListSection/listSection.types.d.ts +2 -1
- package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js +82 -82
- package/dist/Components/Listbox/collectComposedListboxOptions.d.ts +5 -0
- package/dist/Components/Listbox/collectComposedListboxOptions.js +27 -0
- package/dist/Components/Radio/composables/useRadio.js +2 -1
- package/dist/Components/Select/composables/useSelect.d.ts +1 -1
- package/dist/Components/Select/composables/useSelect.js +104 -99
- package/dist/Components/Sidebar/composables/useSidebarListItem.js +29 -28
- package/dist/Components/Sidebar/composables/useSidebarTrigger.js +14 -14
- package/dist/Components/Slider/composables/useSlider.js +53 -53
- package/dist/Components/Snackbar/snackbarDefaultIcons.js +1 -0
- package/dist/Components/Tabs/Tabs.vue_vue_type_script_setup_true_lang.js +11 -10
- package/dist/Components/TimePanel/composables/useTimePanel.js +106 -106
- package/dist/augments.d.ts +5 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +150 -147
- package/docs/README.md +1 -0
- package/docs/components/Badge.md +2 -0
- package/docs/components/Button.md +5 -1
- package/docs/components/ButtonGroup.md +124 -0
- package/docs/components/DataTable.md +4 -0
- package/docs/components/Divider.md +1 -0
- package/docs/components/ToggleGroup.md +1 -1
- package/docs/examples/i18n-dictionary.ts +3 -0
- package/package.json +2 -2
|
@@ -3,14 +3,15 @@ import { hasNamedSlot as t } from "../../../Utils/slotOrProp.js";
|
|
|
3
3
|
import { useBreakpoint as n } from "../../../Utils/useBreakpoint.js";
|
|
4
4
|
import { mergePartBind as r, resolveFieldAdornmentIconSize as ee, useBridgeUIComponent as te, useBridgeUIMergedRegistryClasses as i, useFieldShowFooter as ne } from "../../../Utils/index.js";
|
|
5
5
|
import { formFieldBridgeKeys as re, useFormField as ie } from "../../FormField/composables/useFormField.js";
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
6
|
+
import { collectComposedListboxOptions as ae } from "../../Listbox/collectComposedListboxOptions.js";
|
|
7
|
+
import { useListboxNavigation as oe } from "../../Listbox/composables/useListboxNavigation.js";
|
|
8
|
+
import { Comment as se, Text as ce, computed as a, nextTick as o, onBeforeUnmount as le, onMounted as ue, ref as s, useAttrs as de, useId as fe, useSlots as pe, watch as c } from "vue";
|
|
9
|
+
import { get as me, isNil as he, isObjectLike as l, isSymbol as ge, omit as _e } from "es-toolkit/compat";
|
|
10
|
+
import { createSelectAsyncSearch as ve, filterListboxEntries as ye, flattenListboxOptions as u, mergeListboxOptionsByValue as be, normalizeListboxEntries as xe, normalizeSelectOptions as Se, resolveFieldOverlay as Ce, resolveSelectAsyncDebounce as we, resolveSelectAsyncOptions as Te, selectValuesEqual as d } from "@bridge-ui/core/Domain";
|
|
11
|
+
import { listboxColorProps as Ee } from "@bridge-ui/core/Tokens";
|
|
12
|
+
import { adjustAutosizeTextareaHeight as De, cn as f, getColorToken as Oe, mergeBridgeUILayeredClasses as ke, splitComponentProps as Ae } from "@bridge-ui/core/Utils";
|
|
12
13
|
//#region src/Components/Select/composables/useSelect.ts
|
|
13
|
-
var
|
|
14
|
+
var je = [
|
|
14
15
|
"classes",
|
|
15
16
|
"loading",
|
|
16
17
|
"options",
|
|
@@ -33,81 +34,81 @@ var De = [
|
|
|
33
34
|
"minItemsForSearch",
|
|
34
35
|
"optionDescription"
|
|
35
36
|
];
|
|
36
|
-
function p(p, m, h, g,
|
|
37
|
-
let
|
|
38
|
-
bridgeKeys:
|
|
37
|
+
function p(p, m, h, g, Me) {
|
|
38
|
+
let Ne = de(), _ = pe(), v = fe(), Pe = n(), y = e(), b = s(!1), x = s(""), S = s(!1), C = s(-1), w = s([]), T = s([]), E = s([]), D = s(null), O = null, k = a(() => Ae({
|
|
39
|
+
bridgeKeys: je,
|
|
39
40
|
props: {
|
|
40
|
-
...
|
|
41
|
+
...Ne,
|
|
41
42
|
...p
|
|
42
43
|
}
|
|
43
|
-
})), A = a(() => k.value.componentProps),
|
|
44
|
+
})), A = a(() => k.value.componentProps), Fe = a(() => ({ classes: A.value.classes })), { components: Ie, entry: Le } = te({
|
|
44
45
|
componentName: "Select",
|
|
45
|
-
props: () =>
|
|
46
|
+
props: () => Fe.value
|
|
46
47
|
}), j = i({
|
|
47
|
-
entry:
|
|
48
|
-
props: () =>
|
|
48
|
+
entry: Le,
|
|
49
|
+
props: () => Fe.value
|
|
49
50
|
}), M = a(() => !!A.value.multiple), N = a(() => ({
|
|
50
51
|
optionLabel: A.value.optionLabel ?? "label",
|
|
51
52
|
optionValue: A.value.optionValue ?? "value",
|
|
52
53
|
optionDescription: A.value.optionDescription ?? "description"
|
|
53
|
-
})), P = a(() =>
|
|
54
|
+
})), P = a(() => Me.value.length > 0 ? Me.value.map((e) => ({
|
|
54
55
|
option: e,
|
|
55
56
|
type: "option"
|
|
56
|
-
})) :
|
|
57
|
-
function
|
|
58
|
-
if (!e
|
|
57
|
+
})) : xe(A.value.options, N.value)), Re = a(() => u(P.value)), F = s([]);
|
|
58
|
+
function ze(e) {
|
|
59
|
+
if (!l(e)) return !1;
|
|
59
60
|
let t = e.type;
|
|
60
|
-
if (!t
|
|
61
|
+
if (!l(t)) return !1;
|
|
61
62
|
let n = t.name, r = t.__name;
|
|
62
63
|
return n === "SelectOption" || r === "SelectOption";
|
|
63
64
|
}
|
|
64
|
-
function
|
|
65
|
+
function Be() {
|
|
65
66
|
return t(_, "default") ? (_.default?.({}) ?? []).some((e) => {
|
|
66
|
-
if (!e
|
|
67
|
+
if (!l(e)) return !1;
|
|
67
68
|
let t = e.type;
|
|
68
|
-
return t ===
|
|
69
|
+
return t === se || t === ce || t === void 0 || ge(t) ? !1 : !ze(e);
|
|
69
70
|
}) : !1;
|
|
70
71
|
}
|
|
71
|
-
let I = a(() =>
|
|
72
|
+
let I = a(() => Be()), Ve = a(() => I.value ? ae(_.default?.({}) ?? []) : []), L = a(() => {
|
|
72
73
|
if (I.value) return [];
|
|
73
74
|
if (T.value.length > 0) {
|
|
74
|
-
let e =
|
|
75
|
+
let e = xe(T.value, N.value);
|
|
75
76
|
return A.value.flipOptions ? [...e].reverse() : e;
|
|
76
77
|
}
|
|
77
78
|
return A.value.flipOptions ? [...P.value].reverse().map((e) => e.type === "section" ? {
|
|
78
79
|
...e,
|
|
79
80
|
options: [...e.options].reverse()
|
|
80
81
|
} : e) : P.value;
|
|
81
|
-
}),
|
|
82
|
+
}), He = a(() => I.value ? be(F.value, Ve.value) : u(L.value)), R = a(() => {
|
|
82
83
|
let e = m.value;
|
|
83
|
-
return M.value ? Array.isArray(e) ? e : [] : !
|
|
84
|
-
}),
|
|
84
|
+
return M.value ? Array.isArray(e) ? e : [] : !he(e) && e !== "" ? [e] : [];
|
|
85
|
+
}), Ue = a(() => Ce(A.value.overlay, Pe.mobile)), z = ne({
|
|
85
86
|
componentName: "Select",
|
|
86
|
-
overlay:
|
|
87
|
+
overlay: Ue,
|
|
87
88
|
showFooter: () => A.value.showFooter
|
|
88
|
-
}),
|
|
89
|
+
}), We = a(() => z.value ? w.value : R.value), B = a(() => {
|
|
89
90
|
let e = /* @__PURE__ */ new Map();
|
|
90
|
-
for (let t of [...
|
|
91
|
+
for (let t of [...He.value, ...E.value]) e.set(t.value, t);
|
|
91
92
|
return R.value.map((t) => e.get(t) ?? {
|
|
92
93
|
value: t,
|
|
93
94
|
label: String(t)
|
|
94
95
|
});
|
|
95
|
-
}), V = a(() => R.value.length > 0),
|
|
96
|
+
}), V = a(() => R.value.length > 0), Ge = a(() => A.value.clearable !== !1), H = a(() => !!A.value.asyncData), U = a(() => {
|
|
96
97
|
if (H.value || A.value.searchable) return !0;
|
|
97
98
|
let e = A.value.minItemsForSearch ?? 11;
|
|
98
|
-
return
|
|
99
|
-
}), W = a(() => b.value && U.value),
|
|
99
|
+
return Re.value.length >= e;
|
|
100
|
+
}), W = a(() => b.value && U.value), Ke = a(() => !!A.value.loading || S.value), qe = a(() => {
|
|
100
101
|
if (I.value) return [];
|
|
101
102
|
if (!W.value || !x.value.trim()) return L.value;
|
|
102
103
|
let e = x.value.trim().toLowerCase();
|
|
103
|
-
return
|
|
104
|
-
}), G = a(() => I.value ? F.value :
|
|
104
|
+
return ye(L.value, (t) => t.label.toLowerCase().includes(e));
|
|
105
|
+
}), G = a(() => I.value ? F.value : u(qe.value)), K = oe(() => G.value, C, v), Je = a(() => p.readonly || p.disabled ? !0 : !W.value), Ye = a(() => W.value || M.value ? x.value : B.value[0]?.label ?? ""), Xe = (e) => {
|
|
105
106
|
D.value = e instanceof HTMLElement ? e : null;
|
|
106
107
|
};
|
|
107
|
-
function
|
|
108
|
+
function Ze(e) {
|
|
108
109
|
e.preventDefault();
|
|
109
110
|
}
|
|
110
|
-
function
|
|
111
|
+
function Qe(e) {
|
|
111
112
|
if (p.disabled || p.readonly) return;
|
|
112
113
|
let t = e.target;
|
|
113
114
|
if (!t.closest("[data-select-clear]") && !(t.closest(".wrapper-start-slot") || t.closest(".wrapper-end-slot"))) {
|
|
@@ -118,8 +119,8 @@ function p(p, m, h, g, Oe) {
|
|
|
118
119
|
W.value || (Q(), h.value?.focus({ preventScroll: !0 }));
|
|
119
120
|
}
|
|
120
121
|
}
|
|
121
|
-
let
|
|
122
|
-
let e =
|
|
122
|
+
let $e = a(() => {
|
|
123
|
+
let e = _e(k.value.inheritedAttrs, ["class"]), n = Ae({
|
|
123
124
|
bridgeKeys: re,
|
|
124
125
|
props: e
|
|
125
126
|
}).componentProps, ee = n.endIcon ?? (t(_, "end") ? void 0 : "chevronUpDown"), { listbox: te, ...i } = n.customProps ?? {};
|
|
@@ -130,13 +131,13 @@ function p(p, m, h, g, Oe) {
|
|
|
130
131
|
customProps: {
|
|
131
132
|
...i,
|
|
132
133
|
container: r(i.container, {}, {
|
|
133
|
-
ref:
|
|
134
|
-
onClick:
|
|
134
|
+
ref: Xe,
|
|
135
|
+
onClick: Qe,
|
|
135
136
|
class: f({ "cursor-pointer": !p.disabled && !p.readonly && !W.value })
|
|
136
137
|
})
|
|
137
138
|
}
|
|
138
139
|
};
|
|
139
|
-
}),
|
|
140
|
+
}), et = a(() => p.customProps?.listbox), q = ie(() => $e.value, {
|
|
140
141
|
size: "md",
|
|
141
142
|
rounded: "md",
|
|
142
143
|
color: "primary",
|
|
@@ -146,11 +147,11 @@ function p(p, m, h, g, Oe) {
|
|
|
146
147
|
componentName: "Select",
|
|
147
148
|
likeInput: () => M.value,
|
|
148
149
|
control: () => M.value ? "textarea" : "input"
|
|
149
|
-
}),
|
|
150
|
-
!e || !M.value ||
|
|
150
|
+
}), tt = a(() => V.value && Ge.value && !p.readonly && !q.isDisabled.value), J = (e) => {
|
|
151
|
+
!e || !M.value || De(e);
|
|
151
152
|
};
|
|
152
|
-
function
|
|
153
|
-
return
|
|
153
|
+
function nt(e) {
|
|
154
|
+
return We.value.some((t) => d(t, e));
|
|
154
155
|
}
|
|
155
156
|
function Y(e) {
|
|
156
157
|
m.value = e;
|
|
@@ -170,7 +171,7 @@ function p(p, m, h, g, Oe) {
|
|
|
170
171
|
function Q() {
|
|
171
172
|
O?.cancel(), b.value && (b.value = !1, x.value = "", C.value = -1, g("close"));
|
|
172
173
|
}
|
|
173
|
-
function
|
|
174
|
+
function rt(e) {
|
|
174
175
|
if (!e.disabled) {
|
|
175
176
|
if (z.value) {
|
|
176
177
|
if (M.value) {
|
|
@@ -193,7 +194,7 @@ function p(p, m, h, g, Oe) {
|
|
|
193
194
|
Y(e.value), X(e.value), g("select", e), Q();
|
|
194
195
|
}
|
|
195
196
|
}
|
|
196
|
-
function
|
|
197
|
+
function it() {
|
|
197
198
|
if (M.value) Y(w.value), X(w.value);
|
|
198
199
|
else {
|
|
199
200
|
let e = w.value[0] ?? null;
|
|
@@ -201,26 +202,26 @@ function p(p, m, h, g, Oe) {
|
|
|
201
202
|
}
|
|
202
203
|
Q(), g("apply");
|
|
203
204
|
}
|
|
204
|
-
function
|
|
205
|
+
function at() {
|
|
205
206
|
w.value = [...R.value], Q(), g("cancel");
|
|
206
207
|
}
|
|
207
|
-
function
|
|
208
|
+
function ot(e) {
|
|
208
209
|
e?.preventDefault(), e?.stopPropagation(), !(p.disabled || p.readonly) && (M.value ? (Y([]), X([])) : (Y(null), X(null)), g("clear"), Q());
|
|
209
210
|
}
|
|
210
|
-
function
|
|
211
|
+
function st(e, t) {
|
|
211
212
|
if (t.preventDefault(), t.stopPropagation(), !M.value) return;
|
|
212
213
|
let n = R.value.filter((t) => !d(t, e.value));
|
|
213
214
|
Y(n), X(n), g("deselect", e), o(() => J(h.value));
|
|
214
215
|
}
|
|
215
|
-
function
|
|
216
|
+
function ct() {
|
|
216
217
|
let e = K.getHighlightedOption();
|
|
217
|
-
e &&
|
|
218
|
+
e && rt(e);
|
|
218
219
|
}
|
|
219
|
-
function
|
|
220
|
+
function lt(e) {
|
|
220
221
|
let t = e.target;
|
|
221
222
|
x.value = t.value, g("search", x.value), b.value || Z(), K.resetHighlight(), H.value && O?.searchDebounced(x.value);
|
|
222
223
|
}
|
|
223
|
-
function
|
|
224
|
+
function ut(e) {
|
|
224
225
|
if (!(p.disabled || p.readonly)) switch (e.key) {
|
|
225
226
|
case "ArrowDown":
|
|
226
227
|
e.preventDefault(), b.value ? K.moveHighlight(1) : Z();
|
|
@@ -229,7 +230,7 @@ function p(p, m, h, g, Oe) {
|
|
|
229
230
|
e.preventDefault(), b.value ? K.moveHighlight(-1) : Z();
|
|
230
231
|
break;
|
|
231
232
|
case "Enter":
|
|
232
|
-
e.preventDefault(), b.value ?
|
|
233
|
+
e.preventDefault(), b.value ? ct() : Z();
|
|
233
234
|
break;
|
|
234
235
|
case "Escape":
|
|
235
236
|
e.preventDefault(), Q();
|
|
@@ -244,63 +245,63 @@ function p(p, m, h, g, Oe) {
|
|
|
244
245
|
if (M.value && !x.value && B.value.length > 0) {
|
|
245
246
|
e.preventDefault();
|
|
246
247
|
let t = B.value.at(-1);
|
|
247
|
-
t &&
|
|
248
|
+
t && st(t, e);
|
|
248
249
|
}
|
|
249
250
|
break;
|
|
250
251
|
case "Tab": Q();
|
|
251
252
|
}
|
|
252
253
|
}
|
|
253
|
-
async function
|
|
254
|
+
async function dt(e) {
|
|
254
255
|
let t = A.value.asyncData;
|
|
255
256
|
if (t) {
|
|
256
257
|
S.value = !0;
|
|
257
258
|
try {
|
|
258
|
-
let { options: n, resolvedSelected: r } = await
|
|
259
|
+
let { options: n, resolvedSelected: r } = await Te(t, e, R.value, (e) => Se(e, N.value));
|
|
259
260
|
r.length > 0 && (E.value = r), T.value = n;
|
|
260
261
|
} finally {
|
|
261
262
|
S.value = !1;
|
|
262
263
|
}
|
|
263
264
|
}
|
|
264
265
|
}
|
|
265
|
-
async function
|
|
266
|
+
async function ft() {
|
|
266
267
|
let e = A.value.asyncData;
|
|
267
|
-
!e?.resolve || R.value.length === 0 || (E.value =
|
|
268
|
+
!e?.resolve || R.value.length === 0 || (E.value = Se(await e.resolve(R.value), N.value));
|
|
268
269
|
}
|
|
269
270
|
let $ = a(() => {
|
|
270
|
-
let e =
|
|
271
|
+
let e = ke(Ee, me(Ie.value, [
|
|
271
272
|
"Select",
|
|
272
273
|
"tokens",
|
|
273
274
|
"listbox",
|
|
274
275
|
"color"
|
|
275
276
|
]));
|
|
276
|
-
return
|
|
277
|
+
return Oe({
|
|
277
278
|
tokens: e,
|
|
278
279
|
color: q.merged.value.color,
|
|
279
280
|
invalid: q.invalidated.value
|
|
280
281
|
});
|
|
281
|
-
}),
|
|
282
|
+
}), pt = a(() => $.value?.value), mt = a(() => {
|
|
282
283
|
let e = !p.disabled && !p.readonly && !W.value, t = !p.disabled && !p.readonly && W.value && U.value, n = V.value && !M.value && !W.value;
|
|
283
284
|
return r({
|
|
284
285
|
role: "combobox",
|
|
285
|
-
value:
|
|
286
|
+
value: Ye.value,
|
|
286
287
|
"aria-controls": v,
|
|
287
288
|
"aria-expanded": b.value,
|
|
288
|
-
readonly:
|
|
289
|
-
onKeydown:
|
|
289
|
+
readonly: Je.value,
|
|
290
|
+
onKeydown: ut,
|
|
290
291
|
placeholder: A.value.placeholder,
|
|
291
292
|
"aria-autocomplete": U.value ? "list" : void 0,
|
|
292
293
|
"aria-activedescendant": b.value ? K.activeDescendantId.value : void 0,
|
|
293
294
|
...M.value ? {
|
|
294
295
|
rows: 1,
|
|
295
296
|
onInput: (e) => {
|
|
296
|
-
|
|
297
|
+
lt(e), J(e.target);
|
|
297
298
|
}
|
|
298
|
-
} : { onInput:
|
|
299
|
+
} : { onInput: lt }
|
|
299
300
|
}, q.inputBind.value, f({
|
|
300
301
|
"cursor-text": t,
|
|
301
302
|
"cursor-pointer": e,
|
|
302
303
|
"resize-none overflow-hidden": M.value,
|
|
303
|
-
[f(
|
|
304
|
+
[f(pt.value, j.value.value) ?? ""]: n
|
|
304
305
|
}));
|
|
305
306
|
});
|
|
306
307
|
c(() => [
|
|
@@ -310,38 +311,38 @@ function p(p, m, h, g, Oe) {
|
|
|
310
311
|
], () => {
|
|
311
312
|
J(h.value);
|
|
312
313
|
}, { immediate: !0 }), c(() => m.value, () => {
|
|
313
|
-
|
|
314
|
+
ft();
|
|
314
315
|
}, { immediate: !0 }), c(() => A.value.asyncData, (e) => {
|
|
315
|
-
if (O?.cancel(), T.value = [],
|
|
316
|
+
if (O?.cancel(), T.value = [], ft(), !e) {
|
|
316
317
|
O = null;
|
|
317
318
|
return;
|
|
318
319
|
}
|
|
319
|
-
O =
|
|
320
|
-
}, { immediate: !0 }),
|
|
320
|
+
O = ve((e) => void dt(e), we(e));
|
|
321
|
+
}, { immediate: !0 }), le(() => {
|
|
321
322
|
O?.cancel();
|
|
322
|
-
}),
|
|
323
|
+
}), ue(() => {
|
|
323
324
|
J(h.value);
|
|
324
325
|
});
|
|
325
|
-
let
|
|
326
|
+
let ht = a(() => ee(q.merged.value.size)), gt = a(() => r({}, {}, {
|
|
326
327
|
tabindex: 0,
|
|
327
328
|
role: "button",
|
|
328
329
|
"data-select-clear": !0,
|
|
329
|
-
onMousedown:
|
|
330
|
+
onMousedown: Ze,
|
|
330
331
|
class: f({
|
|
331
332
|
"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
|
|
332
333
|
[$.value?.clear ?? ""]: !0,
|
|
333
334
|
[j.value.clear ?? ""]: !0
|
|
334
335
|
})
|
|
335
|
-
})),
|
|
336
|
+
})), _t = a(() => ({
|
|
336
337
|
listboxId: v,
|
|
337
|
-
isSelected:
|
|
338
|
+
isSelected: nt,
|
|
338
339
|
disableAutoFocus: !0,
|
|
339
340
|
overlay: p.overlay,
|
|
340
|
-
loading:
|
|
341
|
+
loading: Ke.value,
|
|
341
342
|
multiple: M.value,
|
|
342
343
|
maxHeight: p.maxHeight,
|
|
343
344
|
showFooter: z.value,
|
|
344
|
-
entries:
|
|
345
|
+
entries: qe.value,
|
|
345
346
|
options: G.value,
|
|
346
347
|
size: q.merged.value.size,
|
|
347
348
|
error: q.invalidated.value,
|
|
@@ -353,11 +354,15 @@ function p(p, m, h, g, Oe) {
|
|
|
353
354
|
hideEmptyMessage: A.value.hideEmptyMessage === !0,
|
|
354
355
|
emptyMessage: A.value.emptyMessage ?? y("No options"),
|
|
355
356
|
loadingMessage: A.value.loadingMessage ?? y("Loading..."),
|
|
356
|
-
...
|
|
357
|
+
...et.value
|
|
357
358
|
}));
|
|
358
|
-
function
|
|
359
|
+
function vt(e) {
|
|
360
|
+
if (e.length === 0) return;
|
|
359
361
|
let t = F.value;
|
|
360
|
-
t.length === e.length && t.every((t, n) =>
|
|
362
|
+
t.length === e.length && t.every((t, n) => {
|
|
363
|
+
let r = e[n];
|
|
364
|
+
return t.label === r?.label && t.description === r?.description && String(t.value) === String(r?.value) && !!t.disabled == !!r?.disabled;
|
|
365
|
+
}) || (F.value = e);
|
|
361
366
|
}
|
|
362
367
|
return {
|
|
363
368
|
open: b,
|
|
@@ -366,27 +371,27 @@ function p(p, m, h, g, Oe) {
|
|
|
366
371
|
multiple: M,
|
|
367
372
|
listboxId: v,
|
|
368
373
|
formField: q,
|
|
369
|
-
isLoading:
|
|
370
|
-
clearable:
|
|
371
|
-
clearBind:
|
|
372
|
-
isSelected:
|
|
373
|
-
clearValue:
|
|
374
|
-
removeChip:
|
|
375
|
-
triggerBind:
|
|
376
|
-
handleApply:
|
|
377
|
-
selectOption:
|
|
378
|
-
handleCancel:
|
|
374
|
+
isLoading: Ke,
|
|
375
|
+
clearable: Ge,
|
|
376
|
+
clearBind: gt,
|
|
377
|
+
isSelected: nt,
|
|
378
|
+
clearValue: ot,
|
|
379
|
+
removeChip: st,
|
|
380
|
+
triggerBind: mt,
|
|
381
|
+
handleApply: it,
|
|
382
|
+
selectOption: rt,
|
|
383
|
+
handleCancel: at,
|
|
379
384
|
containerRef: D,
|
|
380
|
-
listboxProps:
|
|
381
|
-
clearIconSize:
|
|
385
|
+
listboxProps: _t,
|
|
386
|
+
clearIconSize: ht,
|
|
382
387
|
mergedClasses: j,
|
|
383
|
-
showClearIcon:
|
|
388
|
+
showClearIcon: tt,
|
|
384
389
|
visibleOptions: G,
|
|
385
390
|
isSearchActive: W,
|
|
386
391
|
selectedOptions: B,
|
|
387
392
|
hasComposedList: I,
|
|
388
393
|
highlightedIndex: C,
|
|
389
|
-
handleRegisteredOptionsChange:
|
|
394
|
+
handleRegisteredOptionsChange: vt,
|
|
390
395
|
hideEmptyMessage: a(() => A.value.hideEmptyMessage === !0),
|
|
391
396
|
emptyMessage: a(() => A.value.emptyMessage ?? y("No options")),
|
|
392
397
|
loadingMessage: a(() => A.value.loadingMessage ?? y("Loading..."))
|
|
@@ -2,43 +2,44 @@ import { isPropPresent as e } from "../../../Utils/slotOrProp.js";
|
|
|
2
2
|
import { useSidebar as t } from "./useSidebar.js";
|
|
3
3
|
import { SIDEBAR_LIST_INJECTION_KEY as n } from "../sidebarListInjectionKey.js";
|
|
4
4
|
import { computed as r, inject as i } from "vue";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
5
|
+
import { isString as a } from "es-toolkit/compat";
|
|
6
|
+
import { isSidebarIconOnly as o, resolveSidebarListTooltipPlacement as s } from "@bridge-ui/core/Domain";
|
|
7
|
+
import { cn as c } from "@bridge-ui/core/Utils";
|
|
7
8
|
//#region src/Components/Sidebar/composables/useSidebarListItem.ts
|
|
8
|
-
function
|
|
9
|
-
let
|
|
10
|
-
state:
|
|
11
|
-
isMobile:
|
|
12
|
-
collapsible:
|
|
13
|
-
})),
|
|
14
|
-
if (
|
|
15
|
-
if (
|
|
16
|
-
if (
|
|
9
|
+
function l(l) {
|
|
10
|
+
let u = t(), d = i(n, null), f = r(() => d ? d.value.iconOnly : o({
|
|
11
|
+
state: u.value.state,
|
|
12
|
+
isMobile: u.value.isMobile,
|
|
13
|
+
collapsible: u.value.collapsible
|
|
14
|
+
})), p = r(() => {
|
|
15
|
+
if (f.value) {
|
|
16
|
+
if (l.tooltip !== void 0) return l.tooltip || void 0;
|
|
17
|
+
if (a(l.primary)) return l.primary;
|
|
17
18
|
}
|
|
18
|
-
}),
|
|
19
|
-
if (!(!
|
|
19
|
+
}), m = r(() => l.tooltipPlacement === void 0 ? s(u.value.side) : l.tooltipPlacement), h = r(() => {
|
|
20
|
+
if (!(!f.value || !a(l.primary))) return l.primary;
|
|
20
21
|
});
|
|
21
22
|
return {
|
|
22
|
-
tooltip:
|
|
23
|
+
tooltip: p,
|
|
23
24
|
itemClasses: r(() => {
|
|
24
|
-
let t = e(
|
|
25
|
+
let t = e(l.secondary);
|
|
25
26
|
return {
|
|
26
|
-
end:
|
|
27
|
-
content:
|
|
28
|
-
start:
|
|
29
|
-
interactive:
|
|
30
|
-
"gap-x-2 overflow-hidden rounded-lg px-2 transition-[width,height,padding] duration-200 ease-linear": !
|
|
31
|
-
"min-h-12 py-2": !
|
|
32
|
-
"min-h-8 py-0": !
|
|
33
|
-
"gap-0 overflow-hidden rounded-lg p-0":
|
|
34
|
-
"size-8 justify-center":
|
|
35
|
-
"h-8 w-full px-2":
|
|
27
|
+
end: c({ hidden: f.value }),
|
|
28
|
+
content: c({ hidden: f.value }),
|
|
29
|
+
start: c({ "items-center justify-center": !0 }),
|
|
30
|
+
interactive: c({
|
|
31
|
+
"gap-x-2 overflow-hidden rounded-lg px-2 transition-[width,height,padding] duration-200 ease-linear": !f.value,
|
|
32
|
+
"min-h-12 py-2": !f.value && t,
|
|
33
|
+
"min-h-8 py-0": !f.value && !t,
|
|
34
|
+
"gap-0 overflow-hidden rounded-lg p-0": f.value,
|
|
35
|
+
"size-8 justify-center": f.value && t,
|
|
36
|
+
"h-8 w-full px-2": f.value && !t
|
|
36
37
|
})
|
|
37
38
|
};
|
|
38
39
|
}),
|
|
39
|
-
accessibleName:
|
|
40
|
-
tooltipPlacement:
|
|
40
|
+
accessibleName: h,
|
|
41
|
+
tooltipPlacement: m
|
|
41
42
|
};
|
|
42
43
|
}
|
|
43
44
|
//#endregion
|
|
44
|
-
export {
|
|
45
|
+
export { l as useSidebarListItem };
|
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
import { hasNamedSlot as e } from "../../../Utils/slotOrProp.js";
|
|
2
2
|
import { useSidebar as t } from "./useSidebar.js";
|
|
3
3
|
import { computed as n, useAttrs as r } from "vue";
|
|
4
|
-
import {
|
|
4
|
+
import { isFunction as i, isString as a, omit as o } from "es-toolkit/compat";
|
|
5
5
|
//#region src/Components/Sidebar/composables/useSidebarTrigger.ts
|
|
6
|
-
function
|
|
7
|
-
let
|
|
6
|
+
function s(s) {
|
|
7
|
+
let c = t(), l = r(), u = n(() => e(s, "default"));
|
|
8
8
|
return {
|
|
9
9
|
icon: n(() => {
|
|
10
|
-
if (!
|
|
10
|
+
if (!u.value) return "panelLeft";
|
|
11
11
|
}),
|
|
12
|
-
expanded: n(() =>
|
|
13
|
-
iconClass: n(() =>
|
|
12
|
+
expanded: n(() => c.value.isMobile ? c.value.openMobile : c.value.open),
|
|
13
|
+
iconClass: n(() => c.value.side === "right" ? "rotate-180 rtl:rotate-0" : "rtl:rotate-180"),
|
|
14
14
|
ariaLabel: n(() => {
|
|
15
|
-
let e =
|
|
16
|
-
return
|
|
15
|
+
let e = l["aria-label"];
|
|
16
|
+
return a(e) ? e : "Toggle sidebar";
|
|
17
17
|
}),
|
|
18
18
|
handleClick: (e) => {
|
|
19
|
-
let t =
|
|
20
|
-
|
|
19
|
+
let t = l.onClick;
|
|
20
|
+
i(t) && t(e), !e.defaultPrevented && c.value.toggleSidebar();
|
|
21
21
|
},
|
|
22
|
-
hasDefaultSlot:
|
|
23
|
-
attrs: n(() =>
|
|
24
|
-
panelId: n(() =>
|
|
22
|
+
hasDefaultSlot: u,
|
|
23
|
+
attrs: n(() => o(l, ["onClick", "aria-label"])),
|
|
24
|
+
panelId: n(() => c.value.panelId)
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
27
|
//#endregion
|
|
28
|
-
export {
|
|
28
|
+
export { s as useSidebarTrigger };
|