@7pmlabs/design-system 0.8.0 → 0.8.2
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/design-system10.mjs +9 -9
- package/dist/design-system10.mjs.map +1 -1
- package/dist/design-system100.mjs +6 -68
- package/dist/design-system100.mjs.map +1 -1
- package/dist/design-system101.mjs +67 -6
- package/dist/design-system101.mjs.map +1 -1
- package/dist/design-system102.mjs +16 -16
- package/dist/design-system105.mjs +9 -9
- package/dist/design-system106.mjs.map +1 -1
- package/dist/design-system107.mjs.map +1 -1
- package/dist/design-system108.mjs +16 -16
- package/dist/design-system109.mjs +16 -16
- package/dist/design-system11.mjs.map +1 -1
- package/dist/design-system111.mjs +16 -16
- package/dist/design-system111.mjs.map +1 -1
- package/dist/design-system112.mjs.map +1 -1
- package/dist/design-system114.mjs.map +1 -1
- package/dist/design-system117.mjs +1 -1
- package/dist/design-system118.mjs +5 -5
- package/dist/design-system118.mjs.map +1 -1
- package/dist/design-system12.mjs.map +1 -1
- package/dist/design-system123.mjs.map +1 -1
- package/dist/design-system125.mjs +7 -4
- package/dist/design-system125.mjs.map +1 -1
- package/dist/design-system126.mjs +5 -8
- package/dist/design-system126.mjs.map +1 -1
- package/dist/design-system127.mjs +6 -6
- package/dist/design-system127.mjs.map +1 -1
- package/dist/design-system13.mjs.map +1 -1
- package/dist/design-system14.mjs.map +1 -1
- package/dist/design-system15.mjs.map +1 -1
- package/dist/design-system16.mjs +1 -1
- package/dist/design-system16.mjs.map +1 -1
- package/dist/design-system17.mjs +92 -92
- package/dist/design-system17.mjs.map +1 -1
- package/dist/design-system18.mjs +2 -2
- package/dist/design-system18.mjs.map +1 -1
- package/dist/design-system19.mjs +64 -64
- package/dist/design-system19.mjs.map +1 -1
- package/dist/design-system20.mjs +78 -78
- package/dist/design-system20.mjs.map +1 -1
- package/dist/design-system21.mjs.map +1 -1
- package/dist/design-system22.mjs.map +1 -1
- package/dist/design-system23.mjs.map +1 -1
- package/dist/design-system24.mjs.map +1 -1
- package/dist/design-system25.mjs.map +1 -1
- package/dist/design-system40.mjs +46 -46
- package/dist/design-system40.mjs.map +1 -1
- package/dist/design-system43.mjs +10 -10
- package/dist/design-system45.mjs.map +1 -1
- package/dist/design-system49.mjs +2 -2
- package/dist/design-system49.mjs.map +1 -1
- package/dist/design-system51.mjs +68 -68
- package/dist/design-system51.mjs.map +1 -1
- package/dist/design-system54.mjs.map +1 -1
- package/dist/design-system57.mjs.map +1 -1
- package/dist/design-system64.mjs +10 -10
- package/dist/design-system64.mjs.map +1 -1
- package/dist/design-system66.mjs.map +1 -1
- package/dist/design-system72.mjs.map +1 -1
- package/dist/design-system76.mjs.map +1 -1
- package/dist/design-system79.mjs.map +1 -1
- package/dist/design-system83.mjs +43 -43
- package/dist/design-system83.mjs.map +1 -1
- package/dist/design-system85.mjs +75 -75
- package/dist/design-system85.mjs.map +1 -1
- package/dist/design-system88.mjs.map +1 -1
- package/dist/design-system90.mjs.map +1 -1
- package/dist/design-system95.mjs +42 -42
- package/dist/design-system95.mjs.map +1 -1
- package/dist/design-system96.mjs +2 -2
- package/dist/design-system96.mjs.map +1 -1
- package/dist/design-system97.mjs +1 -1
- package/dist/design-system97.mjs.map +1 -1
- package/dist/design-system98.mjs +12 -12
- package/dist/design-system98.mjs.map +1 -1
- package/dist/design-system99.mjs +63 -62
- package/dist/design-system99.mjs.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/components/BBreadcrumb/BBreadcrumb.vue.d.ts +4 -4
- package/dist/types/components/BBreadcrumb/BBreadcrumbSeparator.vue.d.ts +1 -1
- package/dist/types/components/BButton.vue.d.ts +4 -4
- package/dist/types/components/BCarousel/BCarousel.vue.d.ts +6 -6
- package/dist/types/components/BCarousel/BCarouselItem.vue.d.ts +1 -1
- package/dist/types/components/BCheckbox.vue.d.ts +5 -5
- package/dist/types/components/BCollapse.vue.d.ts +3 -3
- package/dist/types/components/BCurrencyField.vue.d.ts +6 -6
- package/dist/types/components/BDatePicker/BDatePicker.vue.d.ts +6 -6
- package/dist/types/components/BDatePicker/BDatePickerButtonNext.vue.d.ts +1 -1
- package/dist/types/components/BDatePicker/BDatePickerButtonPrevious.vue.d.ts +1 -1
- package/dist/types/components/BDatePicker/BDatePickerGridDate.vue.d.ts +3 -3
- package/dist/types/components/BDatePicker/BDatePickerGridDateRange.vue.d.ts +3 -3
- package/dist/types/components/BDatePicker/BDatePickerGridMonth.vue.d.ts +3 -3
- package/dist/types/components/BDatePicker/BDatePickerGridYear.vue.d.ts +3 -3
- package/dist/types/components/BDatePicker/BDatePickerHeading.vue.d.ts +1 -1
- package/dist/types/components/BDatePicker/BDatePickerIcon.vue.d.ts +1 -1
- package/dist/types/components/BDropdown/BDropdown.vue.d.ts +5 -5
- package/dist/types/components/BDropdown/BDropdownContent.vue.d.ts +1 -1
- package/dist/types/components/BDropdown/BDropdownItem.vue.d.ts +4 -4
- package/dist/types/components/BErrorMessage.vue.d.ts +4 -4
- package/dist/types/components/BImagePicker/BImagePicker.vue.d.ts +7 -7
- package/dist/types/components/BImagePicker/BImagePickerCloseButton.vue.d.ts +1 -1
- package/dist/types/components/BImagePicker/BImagePreview.vue.d.ts +3 -3
- package/dist/types/components/BLabel.vue.d.ts +5 -5
- package/dist/types/components/BLoadingBar.vue.d.ts +4 -4
- package/dist/types/components/BLoadingOverlay.vue.d.ts +4 -4
- package/dist/types/components/BModal/BModal.vue.d.ts +5 -5
- package/dist/types/components/BModal/BModalBody.vue.d.ts +1 -1
- package/dist/types/components/BModal/BModalContainer.vue.d.ts +5 -5
- package/dist/types/components/BModal/BModalFooter.vue.d.ts +1 -1
- package/dist/types/components/BModal/BModalHeader.vue.d.ts +1 -1
- package/dist/types/components/BMultiSelect.vue.d.ts +9 -9
- package/dist/types/components/BOtpField/BOtpField.vue.d.ts +7 -7
- package/dist/types/components/BOtpField/BOtpFieldBox.vue.d.ts +7 -7
- package/dist/types/components/BOverlay.vue.d.ts +1 -1
- package/dist/types/components/BPagination.vue.d.ts +5 -5
- package/dist/types/components/BRadio.vue.d.ts +6 -6
- package/dist/types/components/BSelect.vue.d.ts +9 -9
- package/dist/types/components/BStepper.vue.d.ts +3 -3
- package/dist/types/components/BSwitch.vue.d.ts +5 -5
- package/dist/types/components/BTabs/BTab.vue.d.ts +1 -1
- package/dist/types/components/BTabs/BTabs.vue.d.ts +5 -5
- package/dist/types/components/BTextField.vue.d.ts +8 -8
- package/dist/types/components/BTextarea.vue.d.ts +7 -7
- package/dist/types/components/BTimeline/BTimeline.vue.d.ts +1 -1
- package/dist/types/components/BTimeline/BTimelineItem.vue.d.ts +1 -1
- package/dist/types/components/BToast/BToast.vue.d.ts +3 -3
- package/dist/types/components/BToast/BToastItem.vue.d.ts +6 -6
- package/dist/types/components/BTooltip.vue.d.ts +6 -6
- package/dist/types/composables/Validation.d.ts +6 -1
- package/dist/types/constants/Common.d.ts +2 -2
- package/package.json +3 -3
package/dist/design-system17.mjs
CHANGED
|
@@ -1,19 +1,13 @@
|
|
|
1
|
-
import { defineComponent as ae, ref as v, computed as
|
|
1
|
+
import { defineComponent as ae, ref as v, computed as h, watch as q, nextTick as C, onMounted as oe, onBeforeUnmount as ne, openBlock as d, createElementBlock as n, createElementVNode as i, createVNode as F, normalizeClass as f, unref as M, Fragment as N, renderList as O, toDisplayString as I, createBlock as U, createCommentVNode as _, createTextVNode as ue, withDirectives as re, withModifiers as ie, vShow as ce } from "vue";
|
|
2
2
|
import { useValidationField as ve } from "./design-system3.mjs";
|
|
3
|
-
import { lockScrollBody as fe, unlockScrollBody as A, ensureVisiblePosition as pe, resetPosition as me, ensureVisibleY as
|
|
4
|
-
import { useI18n as
|
|
5
|
-
import
|
|
6
|
-
import
|
|
3
|
+
import { lockScrollBody as fe, unlockScrollBody as A, ensureVisiblePosition as pe, resetPosition as me, ensureVisibleY as ge } from "./design-system6.mjs";
|
|
4
|
+
import { useI18n as be } from "./design-system49.mjs";
|
|
5
|
+
import we from "./design-system28.mjs";
|
|
6
|
+
import he from "./design-system14.mjs";
|
|
7
7
|
import ke from "./design-system15.mjs";
|
|
8
8
|
import ye from "./design-system39.mjs";
|
|
9
9
|
import xe from "./design-system98.mjs";
|
|
10
|
-
const Ce = { class: "ds-absolute ds-right-3 ds-z-[1]" },
|
|
11
|
-
_e
|
|
12
|
-
], $e = ["onClick"], Ie = /* @__PURE__ */ r("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" }, null, -1), Be = [
|
|
13
|
-
Ie
|
|
14
|
-
], Ve = ["id", "disabled"], Ee = /* @__PURE__ */ r("path", { d: "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z" }, null, -1), Re = [
|
|
15
|
-
Ee
|
|
16
|
-
], De = ["id", "data-cy", "data-ut"], qe = { class: "ds-max-h-72 ds-overflow-y-auto ds-rounded-lg ds-bg-white ds-shadow" }, Le = { class: "ds-py-1 ds-text-sm ds-text-black/[0.85]" }, Se = ["onClick"], We = /* @__PURE__ */ ae({
|
|
10
|
+
const Ce = { class: "ds-absolute ds-right-3 ds-z-[1]" }, Me = ["onClick"], $e = ["id", "disabled"], Ie = ["id", "data-cy", "data-ut"], Be = { class: "ds-max-h-72 ds-overflow-y-auto ds-rounded-lg ds-bg-white ds-shadow" }, Ve = { class: "ds-py-1 ds-text-sm ds-text-black/[0.85]" }, Ee = ["onClick"], Oe = /* @__PURE__ */ ae({
|
|
17
11
|
__name: "BMultiSelect",
|
|
18
12
|
props: {
|
|
19
13
|
inputId: { default: "" },
|
|
@@ -33,101 +27,101 @@ const Ce = { class: "ds-absolute ds-right-3 ds-z-[1]" }, _e = /* @__PURE__ */ r(
|
|
|
33
27
|
},
|
|
34
28
|
emits: ["change", "open", "close", "change:input", "update:modelValue"],
|
|
35
29
|
setup(j, { expose: K, emit: W }) {
|
|
36
|
-
const l = j, m = W,
|
|
30
|
+
const l = j, m = W, g = v(null), B = v(null), b = v(null), u = v(!1), { t: L } = be(), Y = {
|
|
37
31
|
validateRule: (e) => !!e && e.length > 0,
|
|
38
|
-
errorMessage: () => l.requiredErrorMessage ||
|
|
39
|
-
},
|
|
32
|
+
errorMessage: () => l.requiredErrorMessage || L("ds.global.field_required")
|
|
33
|
+
}, V = v(""), p = v([]), k = h(() => l.inputId || `id-${xe()}`), a = h({
|
|
40
34
|
get() {
|
|
41
35
|
return l.modelValue;
|
|
42
36
|
},
|
|
43
37
|
set(e) {
|
|
44
38
|
m("update:modelValue", e);
|
|
45
39
|
}
|
|
46
|
-
}), G =
|
|
40
|
+
}), G = h(() => {
|
|
47
41
|
let e = "ds-border ds-drop-shadow-light ds-text-sm ds-h-[40px] ds-px-3 ds-rounded-lg ds-block ds-w-full ds-inline-flex ds-items-center ds-justify-between ";
|
|
48
|
-
return e += l.disabled ? "ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4] " : "ds-bg-white ds-text-black/[0.85] ", e +=
|
|
49
|
-
}), H =
|
|
42
|
+
return e += l.disabled ? "ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4] " : "ds-bg-white ds-text-black/[0.85] ", e += w.value.valid ? "ds-border-black/10 focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus " : "ds-border-error focus:ds-ring-1 focus:ds-ring-error ", e;
|
|
43
|
+
}), H = h(() => {
|
|
50
44
|
let e = [];
|
|
51
45
|
return l.required && e.push(Y), l.validationRules && (e = e.concat(l.validationRules)), e.length ? e : void 0;
|
|
52
|
-
}), J =
|
|
46
|
+
}), J = h(
|
|
53
47
|
() => {
|
|
54
48
|
var e, s;
|
|
55
|
-
return ((e = a.value) == null ? void 0 : e.length) > 1 ? ` (${
|
|
49
|
+
return ((e = a.value) == null ? void 0 : e.length) > 1 ? ` (${L("ds.components.base.multi_select.selected_item_count", {
|
|
56
50
|
count: (s = a.value) == null ? void 0 : s.length
|
|
57
51
|
})})` : "";
|
|
58
52
|
}
|
|
59
|
-
), Q =
|
|
53
|
+
), Q = h(
|
|
60
54
|
() => l.showSelectedItemCount ? `${l.label}${J.value}` : l.label
|
|
61
|
-
), { validate:
|
|
55
|
+
), { validate: E, validationResult: w } = ve(
|
|
62
56
|
k.value,
|
|
63
57
|
a,
|
|
64
58
|
H.value
|
|
65
59
|
);
|
|
66
|
-
|
|
67
|
-
e ? (fe(), se(), m("open")) : (A(),
|
|
68
|
-
}),
|
|
60
|
+
q(u, (e) => {
|
|
61
|
+
e ? (fe(), se(), m("open")) : (A(), T(), m("close"));
|
|
62
|
+
}), q(
|
|
69
63
|
a,
|
|
70
64
|
() => {
|
|
71
|
-
|
|
65
|
+
R();
|
|
72
66
|
},
|
|
73
67
|
{
|
|
74
68
|
deep: !0
|
|
75
69
|
}
|
|
76
|
-
),
|
|
70
|
+
), q(
|
|
77
71
|
() => l.items,
|
|
78
72
|
() => {
|
|
79
|
-
a.value.length !== 0 && p.value.length === 0 &&
|
|
73
|
+
a.value.length !== 0 && p.value.length === 0 && R();
|
|
80
74
|
},
|
|
81
75
|
{
|
|
82
76
|
deep: !0
|
|
83
77
|
}
|
|
84
78
|
);
|
|
85
|
-
const
|
|
79
|
+
const R = () => {
|
|
86
80
|
p.value = a.value.map((e) => {
|
|
87
|
-
let s = p.value.find((
|
|
88
|
-
return s || (s = l.items.find((
|
|
81
|
+
let s = p.value.find((r) => r.value === e);
|
|
82
|
+
return s || (s = l.items.find((r) => r.value === e)), { text: s == null ? void 0 : s.text, value: e, cssClass: s == null ? void 0 : s.cssClass };
|
|
89
83
|
});
|
|
90
84
|
}, X = () => {
|
|
91
|
-
document.addEventListener("keydown",
|
|
92
|
-
}, L = (e) => {
|
|
93
|
-
e.key === "Escape" && (R(), M());
|
|
94
|
-
}, Z = () => {
|
|
95
|
-
document.addEventListener("click", S);
|
|
85
|
+
document.addEventListener("keydown", S);
|
|
96
86
|
}, S = (e) => {
|
|
97
|
-
|
|
87
|
+
e.key === "Escape" && (D(), $());
|
|
88
|
+
}, Z = () => {
|
|
89
|
+
document.addEventListener("click", z);
|
|
98
90
|
}, z = (e) => {
|
|
99
|
-
|
|
91
|
+
[g.value, b.value].some((t) => e.composedPath().includes(t)) || (D(), $());
|
|
92
|
+
}, P = (e) => {
|
|
93
|
+
const s = a.value.findIndex((r) => r === e.value);
|
|
100
94
|
s !== -1 ? a.value.splice(s, 1) : a.value.push(e.value), m("change", e.value), C(() => {
|
|
101
|
-
|
|
102
|
-
}),
|
|
95
|
+
E();
|
|
96
|
+
}), ge(g.value, b.value);
|
|
103
97
|
}, ee = (e, s) => {
|
|
104
98
|
s.style.width = `${e.offsetWidth}px`;
|
|
105
99
|
}, se = () => {
|
|
106
100
|
C(() => {
|
|
107
|
-
pe(
|
|
101
|
+
pe(g.value, b.value), ee(g.value, b.value);
|
|
108
102
|
});
|
|
109
|
-
},
|
|
110
|
-
me(
|
|
103
|
+
}, T = () => {
|
|
104
|
+
me(g.value, b.value);
|
|
111
105
|
}, le = (e) => {
|
|
112
|
-
m("change:input", e),
|
|
113
|
-
},
|
|
106
|
+
m("change:input", e), $();
|
|
107
|
+
}, D = () => {
|
|
114
108
|
var e;
|
|
115
|
-
u.value = !1, (e =
|
|
109
|
+
u.value = !1, (e = B.value) == null || e.blur(), V.value = "";
|
|
116
110
|
}, te = (e) => {
|
|
117
|
-
const s = a.value.findIndex((
|
|
111
|
+
const s = a.value.findIndex((r) => r === e.value);
|
|
118
112
|
s !== -1 && (a.value.splice(s, 1), m("change", e.value), C(() => {
|
|
119
|
-
|
|
113
|
+
E();
|
|
120
114
|
}));
|
|
121
115
|
};
|
|
122
116
|
(() => {
|
|
123
117
|
var e;
|
|
124
|
-
((e = l.items) == null ? void 0 : e.length) > 0 &&
|
|
118
|
+
((e = l.items) == null ? void 0 : e.length) > 0 && R();
|
|
125
119
|
})(), oe(() => {
|
|
126
120
|
X(), Z();
|
|
127
121
|
}), ne(() => {
|
|
128
|
-
document.removeEventListener("keydown",
|
|
129
|
-
}), K({ validate:
|
|
130
|
-
const y = v(null), o = v(-1),
|
|
122
|
+
document.removeEventListener("keydown", S), document.removeEventListener("click", z), A(), T();
|
|
123
|
+
}), K({ validate: E, selectMenu: u });
|
|
124
|
+
const y = v(null), o = v(-1), $ = () => {
|
|
131
125
|
o.value = -1;
|
|
132
126
|
}, de = (e) => {
|
|
133
127
|
e.key === "ArrowDown" ? (e.preventDefault(), o.value < l.items.length - 1 && (o.value++, C(() => {
|
|
@@ -140,16 +134,16 @@ const Ce = { class: "ds-absolute ds-right-3 ds-z-[1]" }, _e = /* @__PURE__ */ r(
|
|
|
140
134
|
y.value && ((s = y.value[o.value]) == null || s.scrollIntoView({
|
|
141
135
|
block: "nearest"
|
|
142
136
|
}));
|
|
143
|
-
})) : o.value = -1) : e.key === "Enter" && o.value >= 0 ? (e.preventDefault(),
|
|
137
|
+
})) : o.value = -1) : e.key === "Enter" && o.value >= 0 ? (e.preventDefault(), P(l.items[o.value])) : e.key === "Tab" && D();
|
|
144
138
|
};
|
|
145
139
|
return (e, s) => {
|
|
146
|
-
var
|
|
140
|
+
var r;
|
|
147
141
|
return d(), n("div", null, [
|
|
148
|
-
|
|
142
|
+
i("div", {
|
|
149
143
|
ref_key: "selectEl",
|
|
150
|
-
ref:
|
|
144
|
+
ref: g
|
|
151
145
|
}, [
|
|
152
|
-
|
|
146
|
+
F(ke, {
|
|
153
147
|
id: k.value,
|
|
154
148
|
label: Q.value,
|
|
155
149
|
required: e.required
|
|
@@ -157,53 +151,57 @@ const Ce = { class: "ds-absolute ds-right-3 ds-z-[1]" }, _e = /* @__PURE__ */ r(
|
|
|
157
151
|
l.allowInput ? (d(), n("div", {
|
|
158
152
|
key: 0,
|
|
159
153
|
class: f([{
|
|
160
|
-
"ds-border-focus ds-ring-1 ds-ring-focus": u.value &&
|
|
161
|
-
"ds-ring-1 ds-ring-error": u.value && !
|
|
162
|
-
"ds-border-black/10":
|
|
163
|
-
"ds-border-error": !
|
|
154
|
+
"ds-border-focus ds-ring-1 ds-ring-focus": u.value && M(w).valid,
|
|
155
|
+
"ds-ring-1 ds-ring-error": u.value && !M(w).valid,
|
|
156
|
+
"ds-border-black/10": M(w).valid,
|
|
157
|
+
"ds-border-error": !M(w).valid
|
|
164
158
|
}, "ds-relative ds-flex ds-flex-wrap ds-items-center ds-gap-x-1 ds-rounded-lg ds-border ds-bg-white ds-px-3 ds-py-1 ds-drop-shadow-light"])
|
|
165
159
|
}, [
|
|
166
|
-
|
|
160
|
+
i("div", Ce, [
|
|
167
161
|
(d(), n("svg", {
|
|
168
162
|
class: f([[u.value ? "ds-rotate-180" : ""], "ds-h-4 ds-min-h-4 ds-w-4 ds-min-w-4 ds-transition-transform"]),
|
|
169
163
|
viewBox: "0 0 320 512",
|
|
170
164
|
xmlns: "http://www.w3.org/2000/svg",
|
|
171
165
|
onClick: s[0] || (s[0] = (t) => {
|
|
172
166
|
var c;
|
|
173
|
-
return (c =
|
|
167
|
+
return (c = B.value) == null ? void 0 : c.focus();
|
|
174
168
|
})
|
|
175
|
-
},
|
|
169
|
+
}, s[5] || (s[5] = [
|
|
170
|
+
i("path", { d: "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z" }, null, -1)
|
|
171
|
+
]), 2))
|
|
176
172
|
]),
|
|
177
|
-
(d(!0), n(
|
|
173
|
+
(d(!0), n(N, null, O(p.value, (t, c) => (d(), n("div", {
|
|
178
174
|
key: `item${c}`,
|
|
179
175
|
class: "ds-my-0.5 ds-flex-initial ds-space-x-1 ds-rounded-lg ds-bg-black/10 ds-px-2"
|
|
180
176
|
}, [
|
|
181
|
-
|
|
177
|
+
i("span", null, I(t.text), 1),
|
|
182
178
|
(d(), n("svg", {
|
|
183
179
|
class: "ds-mb-1 ds-inline ds-h-4 ds-w-4 ds-cursor-pointer ds-fill-black/60 hover:ds-fill-black/40",
|
|
184
180
|
viewBox: "0 0 512 512",
|
|
185
181
|
xmlns: "http://www.w3.org/2000/svg",
|
|
186
182
|
onClick: (x) => te(t)
|
|
187
|
-
},
|
|
183
|
+
}, s[6] || (s[6] = [
|
|
184
|
+
i("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" }, null, -1)
|
|
185
|
+
]), 8, Me))
|
|
188
186
|
]))), 128)),
|
|
189
|
-
l.allowInput ? (d(),
|
|
187
|
+
l.allowInput ? (d(), U(ye, {
|
|
190
188
|
key: 0,
|
|
191
189
|
id: k.value,
|
|
192
190
|
ref_key: "inputRef",
|
|
193
|
-
ref:
|
|
194
|
-
modelValue:
|
|
191
|
+
ref: B,
|
|
192
|
+
modelValue: V.value,
|
|
195
193
|
"onUpdate:modelValue": [
|
|
196
|
-
s[1] || (s[1] = (t) =>
|
|
194
|
+
s[1] || (s[1] = (t) => V.value = t),
|
|
197
195
|
le
|
|
198
196
|
],
|
|
199
197
|
disabled: l.disabled,
|
|
200
198
|
class: "ds-flex-auto",
|
|
201
199
|
"hide-details": "",
|
|
202
200
|
"input-css-class": "ds-drop-shadow-none ds-border-none !ds-ring-0 ds-px-0 !ds-h-[30px] ds-pl-0",
|
|
203
|
-
onChange:
|
|
201
|
+
onChange: $,
|
|
204
202
|
onFocus: s[2] || (s[2] = (t) => u.value = !0),
|
|
205
203
|
onKeydown: de
|
|
206
|
-
}, null, 8, ["id", "modelValue", "disabled"])) :
|
|
204
|
+
}, null, 8, ["id", "modelValue", "disabled"])) : _("", !0)
|
|
207
205
|
], 2)) : (d(), n("button", {
|
|
208
206
|
key: 1,
|
|
209
207
|
id: k.value,
|
|
@@ -215,36 +213,38 @@ const Ce = { class: "ds-absolute ds-right-3 ds-z-[1]" }, _e = /* @__PURE__ */ r(
|
|
|
215
213
|
p.value.length > 0 ? (d(), n("span", {
|
|
216
214
|
key: 0,
|
|
217
215
|
class: f([e.valueCssClass, "ds-truncate ds-text-sm"])
|
|
218
|
-
},
|
|
216
|
+
}, I((r = p.value) == null ? void 0 : r.map((t) => t.text).join(", ")), 3)) : (d(), n("span", {
|
|
219
217
|
key: 1,
|
|
220
218
|
class: f([e.valueCssClass, "ds-truncate ds-text-sm ds-text-black/[0.4]"])
|
|
221
|
-
},
|
|
222
|
-
ue(" "),
|
|
219
|
+
}, I(l.placeholder), 3)),
|
|
220
|
+
s[8] || (s[8] = ue(" ")),
|
|
223
221
|
(d(), n("svg", {
|
|
224
222
|
class: f([[u.value ? "ds-rotate-180" : ""], "ds-h-4 ds-min-h-4 ds-w-4 ds-min-w-4 ds-transition-transform"]),
|
|
225
223
|
viewBox: "0 0 320 512",
|
|
226
224
|
xmlns: "http://www.w3.org/2000/svg"
|
|
227
|
-
},
|
|
228
|
-
|
|
229
|
-
|
|
225
|
+
}, s[7] || (s[7] = [
|
|
226
|
+
i("path", { d: "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z" }, null, -1)
|
|
227
|
+
]), 2))
|
|
228
|
+
], 10, $e)),
|
|
229
|
+
re(i("div", {
|
|
230
230
|
id: `${k.value}Menu`,
|
|
231
231
|
ref_key: "selectMenuEl",
|
|
232
|
-
ref:
|
|
232
|
+
ref: b,
|
|
233
233
|
class: f([e.menuCssClass, "ds-absolute ds-z-50 ds-min-w-[8rem] ds-py-1"]),
|
|
234
234
|
"data-cy": e.$attrs["data-cy"] ? `${e.$attrs["data-cy"]}Menu` : void 0,
|
|
235
235
|
"data-ut": e.$attrs["data-ut"] ? `${e.$attrs["data-ut"]}Menu` : void 0
|
|
236
236
|
}, [
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
(d(!0), n(
|
|
237
|
+
i("div", Be, [
|
|
238
|
+
i("ul", Ve, [
|
|
239
|
+
(d(!0), n(N, null, O(e.items, (t, c) => (d(), n("li", {
|
|
240
240
|
key: `item${c}`,
|
|
241
241
|
ref_for: !0,
|
|
242
242
|
ref_key: "itemRefs",
|
|
243
243
|
ref: y,
|
|
244
244
|
class: "ds-cursor-pointer",
|
|
245
|
-
onClick:
|
|
245
|
+
onClick: ie((x) => P(t), ["prevent"])
|
|
246
246
|
}, [
|
|
247
|
-
|
|
247
|
+
i("a", {
|
|
248
248
|
class: f([[
|
|
249
249
|
t.cssClass,
|
|
250
250
|
{
|
|
@@ -253,24 +253,24 @@ const Ce = { class: "ds-absolute ds-right-3 ds-z-[1]" }, _e = /* @__PURE__ */ r(
|
|
|
253
253
|
}
|
|
254
254
|
], "ds-flex ds-items-center ds-space-x-2 ds-px-4 ds-py-2 hover:ds-bg-slate-300"])
|
|
255
255
|
}, [
|
|
256
|
-
|
|
256
|
+
F(we, {
|
|
257
257
|
modelValue: a.value,
|
|
258
258
|
"onUpdate:modelValue": s[4] || (s[4] = (x) => a.value = x),
|
|
259
259
|
value: t.value,
|
|
260
260
|
size: "sm"
|
|
261
261
|
}, null, 8, ["modelValue", "value"]),
|
|
262
|
-
|
|
262
|
+
i("span", null, I(t == null ? void 0 : t.text), 1)
|
|
263
263
|
], 2)
|
|
264
|
-
], 8,
|
|
264
|
+
], 8, Ee))), 128))
|
|
265
265
|
])
|
|
266
266
|
])
|
|
267
|
-
], 10,
|
|
267
|
+
], 10, Ie), [
|
|
268
268
|
[ce, u.value]
|
|
269
269
|
])
|
|
270
270
|
], 512),
|
|
271
|
-
e.hideDetails ?
|
|
271
|
+
e.hideDetails ? _("", !0) : (d(), U(he, {
|
|
272
272
|
key: 0,
|
|
273
|
-
"error-message":
|
|
273
|
+
"error-message": M(w).errorMessage(),
|
|
274
274
|
class: "ds-mt-1"
|
|
275
275
|
}, null, 8, ["error-message"]))
|
|
276
276
|
]);
|
|
@@ -278,6 +278,6 @@ const Ce = { class: "ds-absolute ds-right-3 ds-z-[1]" }, _e = /* @__PURE__ */ r(
|
|
|
278
278
|
}
|
|
279
279
|
});
|
|
280
280
|
export {
|
|
281
|
-
|
|
281
|
+
Oe as default
|
|
282
282
|
};
|
|
283
283
|
//# sourceMappingURL=design-system17.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"design-system17.mjs","sources":["../src/components/BMultiSelect.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, unref as _unref, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, renderList as _renderList, Fragment as _Fragment, toDisplayString as _toDisplayString, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, withModifiers as _withModifiers, vShow as _vShow, withDirectives as _withDirectives } from \"vue\"\n\nconst _hoisted_1 = { class: \"ds-absolute ds-right-3 ds-z-[1]\" }\nconst _hoisted_2 = /*#__PURE__*/_createElementVNode(\"path\", { d: \"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\" }, null, -1)\nconst _hoisted_3 = [\n _hoisted_2\n]\nconst _hoisted_4 = [\"onClick\"]\nconst _hoisted_5 = /*#__PURE__*/_createElementVNode(\"path\", { d: \"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z\" }, null, -1)\nconst _hoisted_6 = [\n _hoisted_5\n]\nconst _hoisted_7 = [\"id\", \"disabled\"]\nconst _hoisted_8 = /*#__PURE__*/_createElementVNode(\"path\", { d: \"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\" }, null, -1)\nconst _hoisted_9 = [\n _hoisted_8\n]\nconst _hoisted_10 = [\"id\", \"data-cy\", \"data-ut\"]\nconst _hoisted_11 = { class: \"ds-max-h-72 ds-overflow-y-auto ds-rounded-lg ds-bg-white ds-shadow\" }\nconst _hoisted_12 = { class: \"ds-py-1 ds-text-sm ds-text-black/[0.85]\" }\nconst _hoisted_13 = [\"onClick\"]\n\nimport {\n useValidationField,\n type ValidationRule,\n} from '@/composables/Validation';\nimport {\n ensureVisiblePosition,\n ensureVisibleY,\n lockScrollBody,\n resetPosition,\n unlockScrollBody,\n} from '@/helpers/ComponentHelper';\nimport { v4 as uuid } from 'uuid';\nimport {\n computed,\n nextTick,\n onBeforeUnmount,\n onMounted,\n ref,\n watch,\n} from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport BCheckbox from './BCheckbox.vue';\nimport BErrorMessage from './BErrorMessage.vue';\nimport BLabel from './BLabel.vue';\nimport BTextField from './BTextField.vue';\nimport type { DisplayItem } from '@/types';\n\n//#region Props\nexport interface BMultiSelectProps {\n inputId?: string;\n modelValue: Array<string | number>;\n label?: string;\n items: DisplayItem[];\n disabled?: boolean;\n placeholder?: string;\n valueCssClass?: string;\n menuCssClass?: string;\n /**\n * Array of custom validation rules.\n */\n validationRules?: ValidationRule[];\n /**\n * Validate if the field is left empty.\n */\n required?: boolean;\n requiredErrorMessage?: string;\n /**\n * Hide the validation error message.\n */\n hideDetails?: boolean;\n /**\n * Show number of selected items.\n */\n showSelectedItemCount?: boolean;\n /**\n * Allow to type to search.\n */\n allowInput?: boolean;\n}\n\n\nexport default /*#__PURE__*/_defineComponent({\n __name: 'BMultiSelect',\n props: {\n inputId: { default: '' },\n modelValue: {},\n label: { default: '' },\n items: {},\n disabled: { type: Boolean, default: false },\n placeholder: { default: '' },\n valueCssClass: { default: '' },\n menuCssClass: { default: '' },\n validationRules: { default: undefined },\n required: { type: Boolean, default: false },\n requiredErrorMessage: { default: '' },\n hideDetails: { type: Boolean, default: false },\n showSelectedItemCount: { type: Boolean, default: false },\n allowInput: { type: Boolean, default: false }\n },\n emits: [\"change\", \"open\", \"close\", \"change:input\", \"update:modelValue\"],\n setup(__props: any, { expose: __expose, emit: __emit }) {\n\n// https://vuejs.org/guide/essentials/event-handling.html#event-modifiers\nconst props = __props;\n//#endregion\n\n//#region Events\nconst emit = __emit;\n//#endregion\n\n//#region Data\nconst selectEl = ref<HTMLElement | null>(null);\nconst inputRef = ref<InstanceType<typeof BTextField> | null>(null);\nconst selectMenuEl = ref<HTMLElement | null>(null);\nconst selectMenu = ref(false);\nconst { t } = useI18n();\nconst validateRequired: ValidationRule = {\n validateRule: (val: Array<string | number>) => !!val && val.length > 0,\n errorMessage: () =>\n props.requiredErrorMessage || t('ds.global.field_required'),\n};\nconst inputText = ref('');\nconst selectedItems = ref<DisplayItem[]>([]);\nconst id = computed(() => props.inputId || `id-${uuid()}`);\nconst value = computed({\n get() {\n return props.modelValue;\n },\n set(val) {\n emit('update:modelValue', val);\n },\n});\nconst btnCssClass = computed(() => {\n let result = `ds-border ds-drop-shadow-light ds-text-sm ds-h-[40px] ds-px-3 ds-rounded-lg ds-block ds-w-full ds-inline-flex ds-items-center ds-justify-between `;\n result += props.disabled\n ? `ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4] `\n : `ds-bg-white ds-text-black/[0.85] `;\n result += !validationResult.value.valid\n ? `ds-border-error focus:ds-ring-1 focus:ds-ring-error `\n : `ds-border-black/10 focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus `;\n\n return result;\n});\nconst vRules = computed(() => {\n let result: ValidationRule[] = [];\n\n if (props.required) {\n result.push(validateRequired);\n }\n if (props.validationRules) {\n result = result.concat(props.validationRules);\n }\n\n return result.length ? result : undefined;\n});\nconst selectedItemCount = computed(() =>\n value.value?.length > 1\n ? ` (${t('ds.components.base.multi_select.selected_item_count', {\n count: value.value?.length,\n })})`\n : '',\n);\nconst labelDisplay = computed(() =>\n props.showSelectedItemCount\n ? `${props.label}${selectedItemCount.value}`\n : props.label,\n);\nconst { validate, validationResult } = useValidationField(\n id.value,\n value,\n vRules.value,\n);\n//#endregion\n\n//#region Watchers\nwatch(selectMenu, (val) => {\n if (val) {\n lockScrollBody();\n ensureMenuPosition();\n emit('open');\n } else {\n unlockScrollBody();\n resetMenuPosition();\n emit('close');\n }\n});\nwatch(\n value,\n () => {\n ensureSelectedItems();\n },\n {\n deep: true,\n },\n);\nwatch(\n () => props.items,\n () => {\n if (value.value.length !== 0 && selectedItems.value.length === 0) {\n ensureSelectedItems();\n }\n },\n {\n deep: true,\n },\n);\n//#endregion\n\n//#region Methods\nconst ensureSelectedItems = () => {\n selectedItems.value = value.value.map((v) => {\n let item = selectedItems.value.find((i) => i.value === v);\n if (!item) {\n item = props.items.find((i) => i.value === v);\n }\n return { text: item?.text, value: v, cssClass: item?.cssClass };\n });\n};\nconst initPressEscapeEventListener = () => {\n document.addEventListener('keydown', closeOnEscapePressed);\n};\nconst closeOnEscapePressed = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n closeSelectMenu();\n resetFocusedIndex();\n }\n};\nconst initClickOutsideEventListener = () => {\n document.addEventListener('click', closeOnClickOutside);\n};\nconst closeOnClickOutside = (event: any) => {\n const refs = [selectEl.value, selectMenuEl.value];\n const withinBoundaries = refs.some((r) => event.composedPath().includes(r));\n if (!withinBoundaries) {\n closeSelectMenu();\n resetFocusedIndex();\n }\n};\nconst onClickItem = (item: DisplayItem) => {\n const index = value.value.findIndex((v) => v === item.value);\n if (index !== -1) {\n value.value.splice(index, 1);\n } else {\n value.value.push(item.value);\n }\n emit('change', item.value);\n nextTick(() => {\n validate();\n });\n\n // Reset calculate the position of the menu\n ensureVisibleY(selectEl.value!, selectMenuEl.value!);\n};\nconst ensureMenuWidth = (parentEl: HTMLElement, menuEl: HTMLElement) => {\n menuEl.style.width = `${parentEl.offsetWidth}px`;\n};\nconst ensureMenuPosition = () => {\n nextTick(() => {\n ensureVisiblePosition(selectEl.value!, selectMenuEl.value!);\n ensureMenuWidth(selectEl.value!, selectMenuEl.value!);\n });\n};\nconst resetMenuPosition = () => {\n resetPosition(selectEl.value!, selectMenuEl.value!);\n};\nconst onChangeInputText = (text: string) => {\n emit('change:input', text);\n resetFocusedIndex();\n};\nconst closeSelectMenu = () => {\n selectMenu.value = false;\n inputRef.value?.blur();\n inputText.value = '';\n};\nconst deselectItem = (item: DisplayItem) => {\n const index = value.value.findIndex((v) => v === item.value);\n if (index !== -1) {\n value.value.splice(index, 1);\n emit('change', item.value);\n nextTick(() => {\n validate();\n });\n }\n};\nconst init = () => {\n if (props.items?.length > 0) {\n ensureSelectedItems();\n }\n};\ninit();\n//#endregion\n\n//#region Lifecycle Hooks\nonMounted(() => {\n initPressEscapeEventListener();\n initClickOutsideEventListener();\n});\nonBeforeUnmount(() => {\n document.removeEventListener('keydown', closeOnEscapePressed);\n document.removeEventListener('click', closeOnClickOutside);\n unlockScrollBody();\n // Make sure dropdown menu unmounted with itself\n resetMenuPosition();\n});\n//#endregion\n\n__expose({ validate, selectMenu });\n\nconst itemRefs = ref<HTMLLIElement[] | null>(null);\nconst focusedIndex = ref(-1);\nconst resetFocusedIndex = () => {\n focusedIndex.value = -1;\n};\nconst onKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n if (focusedIndex.value < props.items.length - 1) {\n focusedIndex.value++;\n nextTick(() => {\n if (itemRefs.value) {\n itemRefs.value[focusedIndex.value]?.scrollIntoView({\n block: 'nearest',\n });\n }\n });\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n if (focusedIndex.value > 0) {\n focusedIndex.value--;\n nextTick(() => {\n if (itemRefs.value) {\n itemRefs.value[focusedIndex.value]?.scrollIntoView({\n block: 'nearest',\n });\n }\n });\n } else {\n // If at the top of the list, leave the list\n focusedIndex.value = -1;\n }\n } else if (event.key === 'Enter' && focusedIndex.value >= 0) {\n event.preventDefault();\n onClickItem(props.items[focusedIndex.value]);\n } else if (event.key === 'Tab') {\n closeSelectMenu();\n }\n};\n\nreturn (_ctx: any,_cache: any) => {\n return (_openBlock(), _createElementBlock(\"div\", null, [\n _createElementVNode(\"div\", {\n ref_key: \"selectEl\",\n ref: selectEl\n }, [\n _createVNode(BLabel, {\n id: id.value,\n label: labelDisplay.value,\n required: _ctx.required\n }, null, 8, [\"id\", \"label\", \"required\"]),\n (props.allowInput)\n ? (_openBlock(), _createElementBlock(\"div\", {\n key: 0,\n class: _normalizeClass([{\n 'ds-border-focus ds-ring-1 ds-ring-focus':\n selectMenu.value && _unref(validationResult).valid,\n 'ds-ring-1 ds-ring-error': selectMenu.value && !_unref(validationResult).valid,\n 'ds-border-black/10': _unref(validationResult).valid,\n 'ds-border-error': !_unref(validationResult).valid,\n }, \"ds-relative ds-flex ds-flex-wrap ds-items-center ds-gap-x-1 ds-rounded-lg ds-border ds-bg-white ds-px-3 ds-py-1 ds-drop-shadow-light\"])\n }, [\n _createElementVNode(\"div\", _hoisted_1, [\n (_openBlock(), _createElementBlock(\"svg\", {\n class: _normalizeClass([[selectMenu.value ? 'ds-rotate-180' : ''], \"ds-h-4 ds-min-h-4 ds-w-4 ds-min-w-4 ds-transition-transform\"]),\n viewBox: \"0 0 320 512\",\n xmlns: \"http://www.w3.org/2000/svg\",\n onClick: _cache[0] || (_cache[0] = ($event: any) => (inputRef.value?.focus()))\n }, _hoisted_3, 2))\n ]),\n (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(selectedItems.value, (item, i) => {\n return (_openBlock(), _createElementBlock(\"div\", {\n key: `item${i}`,\n class: \"ds-my-0.5 ds-flex-initial ds-space-x-1 ds-rounded-lg ds-bg-black/10 ds-px-2\"\n }, [\n _createElementVNode(\"span\", null, _toDisplayString(item.text), 1),\n (_openBlock(), _createElementBlock(\"svg\", {\n class: \"ds-mb-1 ds-inline ds-h-4 ds-w-4 ds-cursor-pointer ds-fill-black/60 hover:ds-fill-black/40\",\n viewBox: \"0 0 512 512\",\n xmlns: \"http://www.w3.org/2000/svg\",\n onClick: ($event: any) => (deselectItem(item))\n }, _hoisted_6, 8, _hoisted_4))\n ]))\n }), 128)),\n (props.allowInput)\n ? (_openBlock(), _createBlock(BTextField, {\n key: 0,\n id: id.value,\n ref_key: \"inputRef\",\n ref: inputRef,\n modelValue: inputText.value,\n \"onUpdate:modelValue\": [\n _cache[1] || (_cache[1] = ($event: any) => ((inputText).value = $event)),\n onChangeInputText\n ],\n disabled: props.disabled,\n class: \"ds-flex-auto\",\n \"hide-details\": \"\",\n \"input-css-class\": \"ds-drop-shadow-none ds-border-none !ds-ring-0 ds-px-0 !ds-h-[30px] ds-pl-0\",\n onChange: resetFocusedIndex,\n onFocus: _cache[2] || (_cache[2] = ($event: any) => (selectMenu.value = true)),\n onKeydown: onKeyDown\n }, null, 8, [\"id\", \"modelValue\", \"disabled\"]))\n : _createCommentVNode(\"\", true)\n ], 2))\n : (_openBlock(), _createElementBlock(\"button\", {\n key: 1,\n id: id.value,\n class: _normalizeClass(btnCssClass.value),\n disabled: _ctx.disabled,\n type: \"button\",\n onClick: _cache[3] || (_cache[3] = ($event: any) => (selectMenu.value = !selectMenu.value))\n }, [\n (selectedItems.value.length > 0)\n ? (_openBlock(), _createElementBlock(\"span\", {\n key: 0,\n class: _normalizeClass([_ctx.valueCssClass, \"ds-truncate ds-text-sm\"])\n }, _toDisplayString(selectedItems.value?.map((s) => s.text).join(', ')), 3))\n : (_openBlock(), _createElementBlock(\"span\", {\n key: 1,\n class: _normalizeClass([_ctx.valueCssClass, \"ds-truncate ds-text-sm ds-text-black/[0.4]\"])\n }, _toDisplayString(props.placeholder), 3)),\n _createTextVNode(\" \"),\n (_openBlock(), _createElementBlock(\"svg\", {\n class: _normalizeClass([[selectMenu.value ? 'ds-rotate-180' : ''], \"ds-h-4 ds-min-h-4 ds-w-4 ds-min-w-4 ds-transition-transform\"]),\n viewBox: \"0 0 320 512\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, _hoisted_9, 2))\n ], 10, _hoisted_7)),\n _withDirectives(_createElementVNode(\"div\", {\n id: `${id.value}Menu`,\n ref_key: \"selectMenuEl\",\n ref: selectMenuEl,\n class: _normalizeClass([_ctx.menuCssClass, \"ds-absolute ds-z-50 ds-min-w-[8rem] ds-py-1\"]),\n \"data-cy\": _ctx.$attrs['data-cy'] ? `${_ctx.$attrs['data-cy']}Menu` : undefined,\n \"data-ut\": _ctx.$attrs['data-ut'] ? `${_ctx.$attrs['data-ut']}Menu` : undefined\n }, [\n _createElementVNode(\"div\", _hoisted_11, [\n _createElementVNode(\"ul\", _hoisted_12, [\n (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.items, (item, index) => {\n return (_openBlock(), _createElementBlock(\"li\", {\n key: `item${index}`,\n ref_for: true,\n ref_key: \"itemRefs\",\n ref: itemRefs,\n class: \"ds-cursor-pointer\",\n onClick: _withModifiers(($event: any) => (onClickItem(item)), [\"prevent\"])\n }, [\n _createElementVNode(\"a\", {\n class: _normalizeClass([[\n item.cssClass,\n {\n 'ds-bg-slate-100':\n focusedIndex.value !== index &&\n selectedItems.value.some((s) => s.value === item.value),\n 'ds-bg-slate-300': focusedIndex.value === index,\n },\n ], \"ds-flex ds-items-center ds-space-x-2 ds-px-4 ds-py-2 hover:ds-bg-slate-300\"])\n }, [\n _createVNode(BCheckbox, {\n modelValue: value.value,\n \"onUpdate:modelValue\": _cache[4] || (_cache[4] = ($event: any) => ((value).value = $event)),\n value: item.value,\n size: \"sm\"\n }, null, 8, [\"modelValue\", \"value\"]),\n _createElementVNode(\"span\", null, _toDisplayString(item?.text), 1)\n ], 2)\n ], 8, _hoisted_13))\n }), 128))\n ])\n ])\n ], 10, _hoisted_10), [\n [_vShow, selectMenu.value]\n ])\n ], 512),\n (!_ctx.hideDetails)\n ? (_openBlock(), _createBlock(BErrorMessage, {\n key: 0,\n \"error-message\": _unref(validationResult).errorMessage(),\n class: \"ds-mt-1\"\n }, null, 8, [\"error-message\"]))\n : _createCommentVNode(\"\", true)\n ]))\n}\n}\n\n})"],"names":["_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_sfc_main","_defineComponent","__props","__expose","__emit","props","emit","selectEl","ref","inputRef","selectMenuEl","selectMenu","t","useI18n","validateRequired","val","inputText","selectedItems","id","computed","uuid","value","btnCssClass","result","validationResult","vRules","selectedItemCount","_a","_b","labelDisplay","validate","useValidationField","watch","lockScrollBody","ensureMenuPosition","unlockScrollBody","resetMenuPosition","ensureSelectedItems","v","item","initPressEscapeEventListener","closeOnEscapePressed","event","closeSelectMenu","resetFocusedIndex","initClickOutsideEventListener","closeOnClickOutside","r","onClickItem","index","nextTick","ensureVisibleY","ensureMenuWidth","parentEl","menuEl","ensureVisiblePosition","resetPosition","onChangeInputText","text","deselectItem","onMounted","onBeforeUnmount","itemRefs","focusedIndex","onKeyDown","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_createVNode","BLabel","_normalizeClass","_unref","$event","_Fragment","_renderList","i","_toDisplayString","_createBlock","BTextField","_createCommentVNode","s","_createTextVNode","_withDirectives","_withModifiers","BCheckbox","_vShow","BErrorMessage"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"design-system17.mjs","sources":["../src/components/BMultiSelect.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, unref as _unref, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, renderList as _renderList, Fragment as _Fragment, toDisplayString as _toDisplayString, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, withModifiers as _withModifiers, vShow as _vShow, withDirectives as _withDirectives } from \"vue\"\n\nconst _hoisted_1 = { class: \"ds-absolute ds-right-3 ds-z-[1]\" }\nconst _hoisted_2 = [\"onClick\"]\nconst _hoisted_3 = [\"id\", \"disabled\"]\nconst _hoisted_4 = [\"id\", \"data-cy\", \"data-ut\"]\nconst _hoisted_5 = { class: \"ds-max-h-72 ds-overflow-y-auto ds-rounded-lg ds-bg-white ds-shadow\" }\nconst _hoisted_6 = { class: \"ds-py-1 ds-text-sm ds-text-black/[0.85]\" }\nconst _hoisted_7 = [\"onClick\"]\n\nimport {\n useValidationField,\n type ValidationRule,\n} from '@/composables/Validation';\nimport {\n ensureVisiblePosition,\n ensureVisibleY,\n lockScrollBody,\n resetPosition,\n unlockScrollBody,\n} from '@/helpers/ComponentHelper';\nimport { v4 as uuid } from 'uuid';\nimport {\n computed,\n nextTick,\n onBeforeUnmount,\n onMounted,\n ref,\n watch,\n} from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport BCheckbox from './BCheckbox.vue';\nimport BErrorMessage from './BErrorMessage.vue';\nimport BLabel from './BLabel.vue';\nimport BTextField from './BTextField.vue';\nimport type { DisplayItem } from '@/types';\n\n//#region Props\nexport interface BMultiSelectProps {\n inputId?: string;\n modelValue: Array<string | number>;\n label?: string;\n items: DisplayItem[];\n disabled?: boolean;\n placeholder?: string;\n valueCssClass?: string;\n menuCssClass?: string;\n /**\n * Array of custom validation rules.\n */\n validationRules?: ValidationRule[];\n /**\n * Validate if the field is left empty.\n */\n required?: boolean;\n requiredErrorMessage?: string;\n /**\n * Hide the validation error message.\n */\n hideDetails?: boolean;\n /**\n * Show number of selected items.\n */\n showSelectedItemCount?: boolean;\n /**\n * Allow to type to search.\n */\n allowInput?: boolean;\n}\n\n\nexport default /*@__PURE__*/_defineComponent({\n __name: 'BMultiSelect',\n props: {\n inputId: { default: '' },\n modelValue: {},\n label: { default: '' },\n items: {},\n disabled: { type: Boolean, default: false },\n placeholder: { default: '' },\n valueCssClass: { default: '' },\n menuCssClass: { default: '' },\n validationRules: { default: undefined },\n required: { type: Boolean, default: false },\n requiredErrorMessage: { default: '' },\n hideDetails: { type: Boolean, default: false },\n showSelectedItemCount: { type: Boolean, default: false },\n allowInput: { type: Boolean, default: false }\n },\n emits: [\"change\", \"open\", \"close\", \"change:input\", \"update:modelValue\"],\n setup(__props: any, { expose: __expose, emit: __emit }) {\n\n// https://vuejs.org/guide/essentials/event-handling.html#event-modifiers\nconst props = __props;\n//#endregion\n\n//#region Events\nconst emit = __emit;\n//#endregion\n\n//#region Data\nconst selectEl = ref<HTMLElement | null>(null);\nconst inputRef = ref<InstanceType<typeof BTextField> | null>(null);\nconst selectMenuEl = ref<HTMLElement | null>(null);\nconst selectMenu = ref(false);\nconst { t } = useI18n();\nconst validateRequired: ValidationRule = {\n validateRule: (val: Array<string | number>) => !!val && val.length > 0,\n errorMessage: () =>\n props.requiredErrorMessage || t('ds.global.field_required'),\n};\nconst inputText = ref('');\nconst selectedItems = ref<DisplayItem[]>([]);\nconst id = computed(() => props.inputId || `id-${uuid()}`);\nconst value = computed({\n get() {\n return props.modelValue;\n },\n set(val) {\n emit('update:modelValue', val);\n },\n});\nconst btnCssClass = computed(() => {\n let result = `ds-border ds-drop-shadow-light ds-text-sm ds-h-[40px] ds-px-3 ds-rounded-lg ds-block ds-w-full ds-inline-flex ds-items-center ds-justify-between `;\n result += props.disabled\n ? `ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4] `\n : `ds-bg-white ds-text-black/[0.85] `;\n result += !validationResult.value.valid\n ? `ds-border-error focus:ds-ring-1 focus:ds-ring-error `\n : `ds-border-black/10 focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus `;\n\n return result;\n});\nconst vRules = computed(() => {\n let result: ValidationRule[] = [];\n\n if (props.required) {\n result.push(validateRequired);\n }\n if (props.validationRules) {\n result = result.concat(props.validationRules);\n }\n\n return result.length ? result : undefined;\n});\nconst selectedItemCount = computed(() =>\n value.value?.length > 1\n ? ` (${t('ds.components.base.multi_select.selected_item_count', {\n count: value.value?.length,\n })})`\n : '',\n);\nconst labelDisplay = computed(() =>\n props.showSelectedItemCount\n ? `${props.label}${selectedItemCount.value}`\n : props.label,\n);\nconst { validate, validationResult } = useValidationField(\n id.value,\n value,\n vRules.value,\n);\n//#endregion\n\n//#region Watchers\nwatch(selectMenu, (val) => {\n if (val) {\n lockScrollBody();\n ensureMenuPosition();\n emit('open');\n } else {\n unlockScrollBody();\n resetMenuPosition();\n emit('close');\n }\n});\nwatch(\n value,\n () => {\n ensureSelectedItems();\n },\n {\n deep: true,\n },\n);\nwatch(\n () => props.items,\n () => {\n if (value.value.length !== 0 && selectedItems.value.length === 0) {\n ensureSelectedItems();\n }\n },\n {\n deep: true,\n },\n);\n//#endregion\n\n//#region Methods\nconst ensureSelectedItems = () => {\n selectedItems.value = value.value.map((v) => {\n let item = selectedItems.value.find((i) => i.value === v);\n if (!item) {\n item = props.items.find((i) => i.value === v);\n }\n return { text: item?.text, value: v, cssClass: item?.cssClass };\n });\n};\nconst initPressEscapeEventListener = () => {\n document.addEventListener('keydown', closeOnEscapePressed);\n};\nconst closeOnEscapePressed = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n closeSelectMenu();\n resetFocusedIndex();\n }\n};\nconst initClickOutsideEventListener = () => {\n document.addEventListener('click', closeOnClickOutside);\n};\nconst closeOnClickOutside = (event: any) => {\n const refs = [selectEl.value, selectMenuEl.value];\n const withinBoundaries = refs.some((r) => event.composedPath().includes(r));\n if (!withinBoundaries) {\n closeSelectMenu();\n resetFocusedIndex();\n }\n};\nconst onClickItem = (item: DisplayItem) => {\n const index = value.value.findIndex((v) => v === item.value);\n if (index !== -1) {\n value.value.splice(index, 1);\n } else {\n value.value.push(item.value);\n }\n emit('change', item.value);\n nextTick(() => {\n validate();\n });\n\n // Reset calculate the position of the menu\n ensureVisibleY(selectEl.value!, selectMenuEl.value!);\n};\nconst ensureMenuWidth = (parentEl: HTMLElement, menuEl: HTMLElement) => {\n menuEl.style.width = `${parentEl.offsetWidth}px`;\n};\nconst ensureMenuPosition = () => {\n nextTick(() => {\n ensureVisiblePosition(selectEl.value!, selectMenuEl.value!);\n ensureMenuWidth(selectEl.value!, selectMenuEl.value!);\n });\n};\nconst resetMenuPosition = () => {\n resetPosition(selectEl.value!, selectMenuEl.value!);\n};\nconst onChangeInputText = (text: string) => {\n emit('change:input', text);\n resetFocusedIndex();\n};\nconst closeSelectMenu = () => {\n selectMenu.value = false;\n inputRef.value?.blur();\n inputText.value = '';\n};\nconst deselectItem = (item: DisplayItem) => {\n const index = value.value.findIndex((v) => v === item.value);\n if (index !== -1) {\n value.value.splice(index, 1);\n emit('change', item.value);\n nextTick(() => {\n validate();\n });\n }\n};\nconst init = () => {\n if (props.items?.length > 0) {\n ensureSelectedItems();\n }\n};\ninit();\n//#endregion\n\n//#region Lifecycle Hooks\nonMounted(() => {\n initPressEscapeEventListener();\n initClickOutsideEventListener();\n});\nonBeforeUnmount(() => {\n document.removeEventListener('keydown', closeOnEscapePressed);\n document.removeEventListener('click', closeOnClickOutside);\n unlockScrollBody();\n // Make sure dropdown menu unmounted with itself\n resetMenuPosition();\n});\n//#endregion\n\n__expose({ validate, selectMenu });\n\nconst itemRefs = ref<HTMLLIElement[] | null>(null);\nconst focusedIndex = ref(-1);\nconst resetFocusedIndex = () => {\n focusedIndex.value = -1;\n};\nconst onKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n if (focusedIndex.value < props.items.length - 1) {\n focusedIndex.value++;\n nextTick(() => {\n if (itemRefs.value) {\n itemRefs.value[focusedIndex.value]?.scrollIntoView({\n block: 'nearest',\n });\n }\n });\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n if (focusedIndex.value > 0) {\n focusedIndex.value--;\n nextTick(() => {\n if (itemRefs.value) {\n itemRefs.value[focusedIndex.value]?.scrollIntoView({\n block: 'nearest',\n });\n }\n });\n } else {\n // If at the top of the list, leave the list\n focusedIndex.value = -1;\n }\n } else if (event.key === 'Enter' && focusedIndex.value >= 0) {\n event.preventDefault();\n onClickItem(props.items[focusedIndex.value]);\n } else if (event.key === 'Tab') {\n closeSelectMenu();\n }\n};\n\nreturn (_ctx: any,_cache: any) => {\n return (_openBlock(), _createElementBlock(\"div\", null, [\n _createElementVNode(\"div\", {\n ref_key: \"selectEl\",\n ref: selectEl\n }, [\n _createVNode(BLabel, {\n id: id.value,\n label: labelDisplay.value,\n required: _ctx.required\n }, null, 8, [\"id\", \"label\", \"required\"]),\n (props.allowInput)\n ? (_openBlock(), _createElementBlock(\"div\", {\n key: 0,\n class: _normalizeClass([{\n 'ds-border-focus ds-ring-1 ds-ring-focus':\n selectMenu.value && _unref(validationResult).valid,\n 'ds-ring-1 ds-ring-error': selectMenu.value && !_unref(validationResult).valid,\n 'ds-border-black/10': _unref(validationResult).valid,\n 'ds-border-error': !_unref(validationResult).valid,\n }, \"ds-relative ds-flex ds-flex-wrap ds-items-center ds-gap-x-1 ds-rounded-lg ds-border ds-bg-white ds-px-3 ds-py-1 ds-drop-shadow-light\"])\n }, [\n _createElementVNode(\"div\", _hoisted_1, [\n (_openBlock(), _createElementBlock(\"svg\", {\n class: _normalizeClass([[selectMenu.value ? 'ds-rotate-180' : ''], \"ds-h-4 ds-min-h-4 ds-w-4 ds-min-w-4 ds-transition-transform\"]),\n viewBox: \"0 0 320 512\",\n xmlns: \"http://www.w3.org/2000/svg\",\n onClick: _cache[0] || (_cache[0] = ($event: any) => (inputRef.value?.focus()))\n }, _cache[5] || (_cache[5] = [\n _createElementVNode(\"path\", { d: \"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\" }, null, -1)\n ]), 2))\n ]),\n (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(selectedItems.value, (item, i) => {\n return (_openBlock(), _createElementBlock(\"div\", {\n key: `item${i}`,\n class: \"ds-my-0.5 ds-flex-initial ds-space-x-1 ds-rounded-lg ds-bg-black/10 ds-px-2\"\n }, [\n _createElementVNode(\"span\", null, _toDisplayString(item.text), 1),\n (_openBlock(), _createElementBlock(\"svg\", {\n class: \"ds-mb-1 ds-inline ds-h-4 ds-w-4 ds-cursor-pointer ds-fill-black/60 hover:ds-fill-black/40\",\n viewBox: \"0 0 512 512\",\n xmlns: \"http://www.w3.org/2000/svg\",\n onClick: ($event: any) => (deselectItem(item))\n }, _cache[6] || (_cache[6] = [\n _createElementVNode(\"path\", { d: \"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z\" }, null, -1)\n ]), 8, _hoisted_2))\n ]))\n }), 128)),\n (props.allowInput)\n ? (_openBlock(), _createBlock(BTextField, {\n key: 0,\n id: id.value,\n ref_key: \"inputRef\",\n ref: inputRef,\n modelValue: inputText.value,\n \"onUpdate:modelValue\": [\n _cache[1] || (_cache[1] = ($event: any) => ((inputText).value = $event)),\n onChangeInputText\n ],\n disabled: props.disabled,\n class: \"ds-flex-auto\",\n \"hide-details\": \"\",\n \"input-css-class\": \"ds-drop-shadow-none ds-border-none !ds-ring-0 ds-px-0 !ds-h-[30px] ds-pl-0\",\n onChange: resetFocusedIndex,\n onFocus: _cache[2] || (_cache[2] = ($event: any) => (selectMenu.value = true)),\n onKeydown: onKeyDown\n }, null, 8, [\"id\", \"modelValue\", \"disabled\"]))\n : _createCommentVNode(\"\", true)\n ], 2))\n : (_openBlock(), _createElementBlock(\"button\", {\n key: 1,\n id: id.value,\n class: _normalizeClass(btnCssClass.value),\n disabled: _ctx.disabled,\n type: \"button\",\n onClick: _cache[3] || (_cache[3] = ($event: any) => (selectMenu.value = !selectMenu.value))\n }, [\n (selectedItems.value.length > 0)\n ? (_openBlock(), _createElementBlock(\"span\", {\n key: 0,\n class: _normalizeClass([_ctx.valueCssClass, \"ds-truncate ds-text-sm\"])\n }, _toDisplayString(selectedItems.value?.map((s) => s.text).join(', ')), 3))\n : (_openBlock(), _createElementBlock(\"span\", {\n key: 1,\n class: _normalizeClass([_ctx.valueCssClass, \"ds-truncate ds-text-sm ds-text-black/[0.4]\"])\n }, _toDisplayString(props.placeholder), 3)),\n _cache[8] || (_cache[8] = _createTextVNode(\" \")),\n (_openBlock(), _createElementBlock(\"svg\", {\n class: _normalizeClass([[selectMenu.value ? 'ds-rotate-180' : ''], \"ds-h-4 ds-min-h-4 ds-w-4 ds-min-w-4 ds-transition-transform\"]),\n viewBox: \"0 0 320 512\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, _cache[7] || (_cache[7] = [\n _createElementVNode(\"path\", { d: \"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\" }, null, -1)\n ]), 2))\n ], 10, _hoisted_3)),\n _withDirectives(_createElementVNode(\"div\", {\n id: `${id.value}Menu`,\n ref_key: \"selectMenuEl\",\n ref: selectMenuEl,\n class: _normalizeClass([_ctx.menuCssClass, \"ds-absolute ds-z-50 ds-min-w-[8rem] ds-py-1\"]),\n \"data-cy\": _ctx.$attrs['data-cy'] ? `${_ctx.$attrs['data-cy']}Menu` : undefined,\n \"data-ut\": _ctx.$attrs['data-ut'] ? `${_ctx.$attrs['data-ut']}Menu` : undefined\n }, [\n _createElementVNode(\"div\", _hoisted_5, [\n _createElementVNode(\"ul\", _hoisted_6, [\n (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.items, (item, index) => {\n return (_openBlock(), _createElementBlock(\"li\", {\n key: `item${index}`,\n ref_for: true,\n ref_key: \"itemRefs\",\n ref: itemRefs,\n class: \"ds-cursor-pointer\",\n onClick: _withModifiers(($event: any) => (onClickItem(item)), [\"prevent\"])\n }, [\n _createElementVNode(\"a\", {\n class: _normalizeClass([[\n item.cssClass,\n {\n 'ds-bg-slate-100':\n focusedIndex.value !== index &&\n selectedItems.value.some((s) => s.value === item.value),\n 'ds-bg-slate-300': focusedIndex.value === index,\n },\n ], \"ds-flex ds-items-center ds-space-x-2 ds-px-4 ds-py-2 hover:ds-bg-slate-300\"])\n }, [\n _createVNode(BCheckbox, {\n modelValue: value.value,\n \"onUpdate:modelValue\": _cache[4] || (_cache[4] = ($event: any) => ((value).value = $event)),\n value: item.value,\n size: \"sm\"\n }, null, 8, [\"modelValue\", \"value\"]),\n _createElementVNode(\"span\", null, _toDisplayString(item?.text), 1)\n ], 2)\n ], 8, _hoisted_7))\n }), 128))\n ])\n ])\n ], 10, _hoisted_4), [\n [_vShow, selectMenu.value]\n ])\n ], 512),\n (!_ctx.hideDetails)\n ? (_openBlock(), _createBlock(BErrorMessage, {\n key: 0,\n \"error-message\": _unref(validationResult).errorMessage(),\n class: \"ds-mt-1\"\n }, null, 8, [\"error-message\"]))\n : _createCommentVNode(\"\", true)\n ]))\n}\n}\n\n})"],"names":["_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_sfc_main","_defineComponent","__props","__expose","__emit","props","emit","selectEl","ref","inputRef","selectMenuEl","selectMenu","t","useI18n","validateRequired","val","inputText","selectedItems","id","computed","uuid","value","btnCssClass","result","validationResult","vRules","selectedItemCount","_a","_b","labelDisplay","validate","useValidationField","watch","lockScrollBody","ensureMenuPosition","unlockScrollBody","resetMenuPosition","ensureSelectedItems","v","item","i","initPressEscapeEventListener","closeOnEscapePressed","event","closeSelectMenu","resetFocusedIndex","initClickOutsideEventListener","closeOnClickOutside","r","onClickItem","index","nextTick","ensureVisibleY","ensureMenuWidth","parentEl","menuEl","ensureVisiblePosition","resetPosition","onChangeInputText","text","deselectItem","onMounted","onBeforeUnmount","itemRefs","focusedIndex","onKeyDown","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_createVNode","BLabel","_normalizeClass","_unref","$event","_Fragment","_renderList","_toDisplayString","_createBlock","BTextField","_createCommentVNode","s","_createTextVNode","_withDirectives","_withModifiers","BCheckbox","_vShow","BErrorMessage"],"mappings":"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"}
|
package/dist/design-system18.mjs
CHANGED
|
@@ -2,9 +2,9 @@ import { defineComponent as L, ref as f, computed as l, openBlock as d, createEl
|
|
|
2
2
|
import J from "./design-system14.mjs";
|
|
3
3
|
import { useValidationField as Q } from "./design-system3.mjs";
|
|
4
4
|
import { useI18n as T } from "./design-system49.mjs";
|
|
5
|
-
import X from "./design-
|
|
5
|
+
import X from "./design-system99.mjs";
|
|
6
6
|
import Y from "./design-system98.mjs";
|
|
7
|
-
import Z from "./design-
|
|
7
|
+
import Z from "./design-system100.mjs";
|
|
8
8
|
const ee = { class: "ds-flex ds-items-center ds-justify-center ds-space-x-2" }, re = /* @__PURE__ */ L({
|
|
9
9
|
__name: "BOtpField",
|
|
10
10
|
props: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"design-system18.mjs","sources":["../src/components/BOtpField/BOtpField.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, createBlock as _createBlock, createElementVNode as _createElementVNode, unref as _unref, createCommentVNode as _createCommentVNode } from \"vue\"\n\nconst _hoisted_1 = { class: \"ds-flex ds-items-center ds-justify-center ds-space-x-2\" }\n\nimport BErrorMessage from '@/components/BErrorMessage.vue';\nimport {\n useValidationField,\n type ValidationRule,\n} from '@/composables/Validation';\nimport { cloneDeep } from 'lodash-es';\nimport { v4 as uuid } from 'uuid';\nimport { computed, ref } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport BOtpFieldBox from './BOtpFieldBox.vue';\n\n//#region Props\nexport interface BOtpFieldProps {\n inputId?: string;\n modelValue: string;\n /**\n * Number of input boxes.\n */\n numInputs?: number;\n /**\n * Index of input box to be focused.\n */\n focusIndex?: number;\n disabled?: boolean;\n inputCssClass?: string | {};\n /**\n * Array of custom validation rules.\n */\n validationRules?: ValidationRule[];\n /**\n * Validate if the field is left empty.\n */\n required?: boolean;\n requiredErrorMessage?: string;\n /**\n * Hide the validation error message.\n */\n hideDetails?: boolean;\n}\n\n\nexport default /*#__PURE__*/_defineComponent({\n __name: 'BOtpField',\n props: {\n inputId: { default: '' },\n modelValue: { default: '' },\n numInputs: { default: 6 },\n focusIndex: { default: undefined },\n disabled: { type: Boolean, default: false },\n inputCssClass: { default: '' },\n validationRules: { default: undefined },\n required: { type: Boolean, default: false },\n requiredErrorMessage: { default: '' },\n hideDetails: { type: Boolean, default: false }\n },\n emits: [\"complete\", \"change\", \"update:focusIndex\", \"update:modelValue\"],\n setup(__props: any, { expose: __expose, emit: __emit }) {\n\n// Sourcecode: https://github.com/ejirocodes/vue3-otp-input\nconst props = __props;\n//#endregion\n\n//#region Events\nconst emit = __emit;\n//#endregion\n\n//#region Data\nconst { t } = useI18n();\nconst validateRequired: ValidationRule = {\n validateRule: (val: string) => !!val,\n errorMessage: () =>\n props.requiredErrorMessage || t('ds.global.field_required'),\n};\nconst fIndex = ref(0);\nconst oldOtp = ref<any[]>([]);\nconst boxRefs = ref<Array<InstanceType<typeof BOtpFieldBox>> | null>(null);\nconst handleOnFocus = (index: number) => {\n focusIndexValue.value = index;\n};\nconst handleOnBlur = () => {\n focusIndexValue.value = -1;\n};\nconst id = computed(() => props.inputId || `id-${uuid()}`);\nconst value = computed<any[]>({\n get() {\n return props.modelValue.split('');\n },\n set(val: any) {\n emit('update:modelValue', val.join(''));\n },\n});\nconst originalValue = computed(() => props.modelValue);\nconst focusIndexValue = computed({\n get() {\n return props.focusIndex !== undefined ? props.focusIndex : fIndex.value;\n },\n set(val: number) {\n if (props.focusIndex !== undefined) {\n emit('update:focusIndex', val);\n } else {\n fIndex.value = val;\n }\n },\n});\nconst vRules = computed(() => {\n let result: ValidationRule[] = [];\n\n if (props.required) {\n result.push(validateRequired);\n }\n if (props.validationRules) {\n result = result.concat(props.validationRules);\n }\n\n return result.length ? result : undefined;\n});\nconst inputCssClassValue = computed(() => [\n ...[\n props.disabled\n ? 'ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]'\n : 'ds-text-black/[0.85]',\n validationResult.value.valid\n ? 'ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus'\n : 'ds-border-error focus:ds-ring-1 focus:ds-ring-error',\n ],\n props.inputCssClass,\n]);\n\nconst { validate, validationResult } = useValidationField(\n id.value,\n originalValue,\n vRules.value,\n);\n//#endregion\n\n//#region Methods\nconst focus = () => {\n boxRefs.value![focusIndexValue.value].focus();\n};\nconst checkFilledAllInputs = () => {\n if (value.value.join('').length === props.numInputs) {\n return emit('complete', value.value.join(''));\n }\n return 'Wait until the user enters the required number of characters';\n};\n// Focus on input by index\nconst focusInput = (input: number) => {\n focusIndexValue.value = Math.max(Math.min(props.numInputs - 1, input), 0);\n};\n// Focus on next input\nconst focusNextInput = () => {\n focusInput(focusIndexValue.value + 1);\n};\n// Focus on previous input\nconst focusPrevInput = () => {\n focusInput(focusIndexValue.value - 1);\n};\n// Change OTP value at focused input\nconst changeCodeAtFocus = (val: number | string) => {\n oldOtp.value = [...value.value];\n\n value.value[focusIndexValue.value] = val;\n value.value = cloneDeep(value.value);\n\n const oldOtpStr = oldOtp.value.join('');\n const otpStr = value.value.join('');\n if (oldOtpStr !== otpStr) {\n emit('change', otpStr);\n checkFilledAllInputs();\n }\n};\n// Handle pasted OTP\nconst handleOnPaste = (event: any) => {\n event.preventDefault();\n const pastedData = event.clipboardData\n .getData('text/plain')\n .slice(0, props.numInputs - focusIndexValue.value)\n .split('');\n if (!pastedData.join('').match(/^\\d+$/)) {\n return 'Invalid pasted data';\n }\n\n // Paste data from focused input onwards\n const currentCharsInOtp = value.value.slice(0, focusIndexValue.value);\n const combinedWithPastedData = currentCharsInOtp.concat(pastedData);\n\n combinedWithPastedData.slice(0, props.numInputs).forEach((val, i) => {\n value.value[i] = val;\n });\n\n focusInput(combinedWithPastedData.slice(0, props.numInputs).length);\n\n // Update modelValue when data is pasted from keyboard\n emit('update:modelValue', value.value.join(''));\n // Check if `complete`\n return checkFilledAllInputs();\n};\nconst handleOnChange = (val: string) => {\n changeCodeAtFocus(val);\n focusNextInput();\n};\n// Handle cases of backspace, delete, left arrow, right arrow\nconst handleOnKeyDown = (event: KeyboardEvent) => {\n switch (event.key) {\n case 'Backspace':\n event.preventDefault();\n changeCodeAtFocus('');\n focusPrevInput();\n break;\n case 'Delete':\n event.preventDefault();\n changeCodeAtFocus('');\n break;\n case 'ArrowLeft':\n event.preventDefault();\n focusPrevInput();\n break;\n case 'ArrowRight':\n event.preventDefault();\n focusNextInput();\n break;\n default:\n break;\n }\n};\nconst handleOnKeyUp = () => {\n validate();\n};\n//#endregion\n\n__expose({ validate, focus });\n\nreturn (_ctx: any,_cache: any) => {\n return (_openBlock(), _createElementBlock(\"div\", null, [\n _createElementVNode(\"div\", _hoisted_1, [\n (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.numInputs, (_, i) => {\n return (_openBlock(), _createBlock(BOtpFieldBox, {\n key: i,\n ref_for: true,\n ref_key: \"boxRefs\",\n ref: boxRefs,\n class: _normalizeClass(inputCssClassValue.value),\n focus: focusIndexValue.value === i,\n \"is-disabled\": _ctx.disabled,\n value: value.value[i],\n onOnChange: handleOnChange,\n onOnKeydown: handleOnKeyDown,\n onOnKeyup: handleOnKeyUp,\n onOnPaste: handleOnPaste,\n onOnFocus: ($event: any) => (handleOnFocus(i)),\n onOnBlur: handleOnBlur\n }, null, 8, [\"class\", \"focus\", \"is-disabled\", \"value\", \"onOnFocus\"]))\n }), 128))\n ]),\n (!_ctx.hideDetails)\n ? (_openBlock(), _createBlock(BErrorMessage, {\n key: 0,\n \"error-message\": _unref(validationResult).errorMessage(),\n class: \"ds-mt-1\"\n }, null, 8, [\"error-message\"]))\n : _createCommentVNode(\"\", true)\n ]))\n}\n}\n\n})"],"names":["_hoisted_1","_sfc_main","_defineComponent","__props","__expose","__emit","props","emit","t","useI18n","validateRequired","val","fIndex","ref","oldOtp","boxRefs","handleOnFocus","index","focusIndexValue","handleOnBlur","id","computed","uuid","value","originalValue","vRules","result","inputCssClassValue","validationResult","validate","useValidationField","focus","checkFilledAllInputs","focusInput","input","focusNextInput","focusPrevInput","changeCodeAtFocus","cloneDeep","oldOtpStr","otpStr","handleOnPaste","event","pastedData","combinedWithPastedData","i","handleOnChange","handleOnKeyDown","handleOnKeyUp","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_","_createBlock","BOtpFieldBox","_normalizeClass","$event","_createCommentVNode","BErrorMessage","_unref"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"design-system18.mjs","sources":["../src/components/BOtpField/BOtpField.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, createBlock as _createBlock, createElementVNode as _createElementVNode, unref as _unref, createCommentVNode as _createCommentVNode } from \"vue\"\n\nconst _hoisted_1 = { class: \"ds-flex ds-items-center ds-justify-center ds-space-x-2\" }\n\nimport BErrorMessage from '@/components/BErrorMessage.vue';\nimport {\n useValidationField,\n type ValidationRule,\n} from '@/composables/Validation';\nimport { cloneDeep } from 'lodash-es';\nimport { v4 as uuid } from 'uuid';\nimport { computed, ref } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport BOtpFieldBox from './BOtpFieldBox.vue';\n\n//#region Props\nexport interface BOtpFieldProps {\n inputId?: string;\n modelValue: string;\n /**\n * Number of input boxes.\n */\n numInputs?: number;\n /**\n * Index of input box to be focused.\n */\n focusIndex?: number;\n disabled?: boolean;\n inputCssClass?: string | {};\n /**\n * Array of custom validation rules.\n */\n validationRules?: ValidationRule[];\n /**\n * Validate if the field is left empty.\n */\n required?: boolean;\n requiredErrorMessage?: string;\n /**\n * Hide the validation error message.\n */\n hideDetails?: boolean;\n}\n\n\nexport default /*@__PURE__*/_defineComponent({\n __name: 'BOtpField',\n props: {\n inputId: { default: '' },\n modelValue: { default: '' },\n numInputs: { default: 6 },\n focusIndex: { default: undefined },\n disabled: { type: Boolean, default: false },\n inputCssClass: { default: '' },\n validationRules: { default: undefined },\n required: { type: Boolean, default: false },\n requiredErrorMessage: { default: '' },\n hideDetails: { type: Boolean, default: false }\n },\n emits: [\"complete\", \"change\", \"update:focusIndex\", \"update:modelValue\"],\n setup(__props: any, { expose: __expose, emit: __emit }) {\n\n// Sourcecode: https://github.com/ejirocodes/vue3-otp-input\nconst props = __props;\n//#endregion\n\n//#region Events\nconst emit = __emit;\n//#endregion\n\n//#region Data\nconst { t } = useI18n();\nconst validateRequired: ValidationRule = {\n validateRule: (val: string) => !!val,\n errorMessage: () =>\n props.requiredErrorMessage || t('ds.global.field_required'),\n};\nconst fIndex = ref(0);\nconst oldOtp = ref<any[]>([]);\nconst boxRefs = ref<Array<InstanceType<typeof BOtpFieldBox>> | null>(null);\nconst handleOnFocus = (index: number) => {\n focusIndexValue.value = index;\n};\nconst handleOnBlur = () => {\n focusIndexValue.value = -1;\n};\nconst id = computed(() => props.inputId || `id-${uuid()}`);\nconst value = computed<any[]>({\n get() {\n return props.modelValue.split('');\n },\n set(val: any) {\n emit('update:modelValue', val.join(''));\n },\n});\nconst originalValue = computed(() => props.modelValue);\nconst focusIndexValue = computed({\n get() {\n return props.focusIndex !== undefined ? props.focusIndex : fIndex.value;\n },\n set(val: number) {\n if (props.focusIndex !== undefined) {\n emit('update:focusIndex', val);\n } else {\n fIndex.value = val;\n }\n },\n});\nconst vRules = computed(() => {\n let result: ValidationRule[] = [];\n\n if (props.required) {\n result.push(validateRequired);\n }\n if (props.validationRules) {\n result = result.concat(props.validationRules);\n }\n\n return result.length ? result : undefined;\n});\nconst inputCssClassValue = computed(() => [\n ...[\n props.disabled\n ? 'ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]'\n : 'ds-text-black/[0.85]',\n validationResult.value.valid\n ? 'ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus'\n : 'ds-border-error focus:ds-ring-1 focus:ds-ring-error',\n ],\n props.inputCssClass,\n]);\n\nconst { validate, validationResult } = useValidationField(\n id.value,\n originalValue,\n vRules.value,\n);\n//#endregion\n\n//#region Methods\nconst focus = () => {\n boxRefs.value![focusIndexValue.value].focus();\n};\nconst checkFilledAllInputs = () => {\n if (value.value.join('').length === props.numInputs) {\n return emit('complete', value.value.join(''));\n }\n return 'Wait until the user enters the required number of characters';\n};\n// Focus on input by index\nconst focusInput = (input: number) => {\n focusIndexValue.value = Math.max(Math.min(props.numInputs - 1, input), 0);\n};\n// Focus on next input\nconst focusNextInput = () => {\n focusInput(focusIndexValue.value + 1);\n};\n// Focus on previous input\nconst focusPrevInput = () => {\n focusInput(focusIndexValue.value - 1);\n};\n// Change OTP value at focused input\nconst changeCodeAtFocus = (val: number | string) => {\n oldOtp.value = [...value.value];\n\n value.value[focusIndexValue.value] = val;\n value.value = cloneDeep(value.value);\n\n const oldOtpStr = oldOtp.value.join('');\n const otpStr = value.value.join('');\n if (oldOtpStr !== otpStr) {\n emit('change', otpStr);\n checkFilledAllInputs();\n }\n};\n// Handle pasted OTP\nconst handleOnPaste = (event: any) => {\n event.preventDefault();\n const pastedData = event.clipboardData\n .getData('text/plain')\n .slice(0, props.numInputs - focusIndexValue.value)\n .split('');\n if (!pastedData.join('').match(/^\\d+$/)) {\n return 'Invalid pasted data';\n }\n\n // Paste data from focused input onwards\n const currentCharsInOtp = value.value.slice(0, focusIndexValue.value);\n const combinedWithPastedData = currentCharsInOtp.concat(pastedData);\n\n combinedWithPastedData.slice(0, props.numInputs).forEach((val, i) => {\n value.value[i] = val;\n });\n\n focusInput(combinedWithPastedData.slice(0, props.numInputs).length);\n\n // Update modelValue when data is pasted from keyboard\n emit('update:modelValue', value.value.join(''));\n // Check if `complete`\n return checkFilledAllInputs();\n};\nconst handleOnChange = (val: string) => {\n changeCodeAtFocus(val);\n focusNextInput();\n};\n// Handle cases of backspace, delete, left arrow, right arrow\nconst handleOnKeyDown = (event: KeyboardEvent) => {\n switch (event.key) {\n case 'Backspace':\n event.preventDefault();\n changeCodeAtFocus('');\n focusPrevInput();\n break;\n case 'Delete':\n event.preventDefault();\n changeCodeAtFocus('');\n break;\n case 'ArrowLeft':\n event.preventDefault();\n focusPrevInput();\n break;\n case 'ArrowRight':\n event.preventDefault();\n focusNextInput();\n break;\n default:\n break;\n }\n};\nconst handleOnKeyUp = () => {\n validate();\n};\n//#endregion\n\n__expose({ validate, focus });\n\nreturn (_ctx: any,_cache: any) => {\n return (_openBlock(), _createElementBlock(\"div\", null, [\n _createElementVNode(\"div\", _hoisted_1, [\n (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.numInputs, (_, i) => {\n return (_openBlock(), _createBlock(BOtpFieldBox, {\n key: i,\n ref_for: true,\n ref_key: \"boxRefs\",\n ref: boxRefs,\n class: _normalizeClass(inputCssClassValue.value),\n focus: focusIndexValue.value === i,\n \"is-disabled\": _ctx.disabled,\n value: value.value[i],\n onOnChange: handleOnChange,\n onOnKeydown: handleOnKeyDown,\n onOnKeyup: handleOnKeyUp,\n onOnPaste: handleOnPaste,\n onOnFocus: ($event: any) => (handleOnFocus(i)),\n onOnBlur: handleOnBlur\n }, null, 8, [\"class\", \"focus\", \"is-disabled\", \"value\", \"onOnFocus\"]))\n }), 128))\n ]),\n (!_ctx.hideDetails)\n ? (_openBlock(), _createBlock(BErrorMessage, {\n key: 0,\n \"error-message\": _unref(validationResult).errorMessage(),\n class: \"ds-mt-1\"\n }, null, 8, [\"error-message\"]))\n : _createCommentVNode(\"\", true)\n ]))\n}\n}\n\n})"],"names":["_hoisted_1","_sfc_main","_defineComponent","__props","__expose","__emit","props","emit","t","useI18n","validateRequired","val","fIndex","ref","oldOtp","boxRefs","handleOnFocus","index","focusIndexValue","handleOnBlur","id","computed","uuid","value","originalValue","vRules","result","inputCssClassValue","validationResult","validate","useValidationField","focus","checkFilledAllInputs","focusInput","input","focusNextInput","focusPrevInput","changeCodeAtFocus","cloneDeep","oldOtpStr","otpStr","handleOnPaste","event","pastedData","combinedWithPastedData","i","handleOnChange","handleOnKeyDown","handleOnKeyUp","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_","_createBlock","BOtpFieldBox","_normalizeClass","$event","_createCommentVNode","BErrorMessage","_unref"],"mappings":"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"}
|