@profitliga/ui 2.0.3 → 2.0.4
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/components/AlertDialog/AlertDialogAction.vue.js +2 -3
- package/dist/components/AlertDialog/AlertDialogCancel.vue.js +8 -9
- package/dist/components/AlertDialog/AlertDialogTrigger.vue.js +7 -8
- package/dist/components/Button/Button.css +1 -1
- package/dist/components/Button/Button.vue.js +5 -52
- package/dist/components/Button/Button.vue2.js +52 -3
- package/dist/components/Calendar/CalendarNext.vue.js +3 -4
- package/dist/components/Calendar/CalendarPrev.vue.js +7 -8
- package/dist/components/ConfirmDialog/ConfirmDialog.vue2.js +11 -12
- package/dist/components/DatePicker/DatePickerNext.vue.js +1 -2
- package/dist/components/DatePicker/DatePickerPrev.vue.js +7 -8
- package/dist/components/DateRangePicker/DateRangePickerNext.vue.js +6 -7
- package/dist/components/DateRangePicker/DateRangePickerPrev.vue.js +7 -8
- package/dist/components/RangeCalendar/RangeCalendarNext.vue.js +3 -4
- package/dist/components/RangeCalendar/RangeCalendarPrev.vue.js +3 -4
- package/dist/components/Schedule/Schedule.vue2.js +38 -39
- package/dist/components/index.js +391 -392
- package/dist/components/v2/AlertDialog/AlertDialog.css +1 -1
- package/dist/components/v2/AlertDialog/AlertDialog.types.d.ts +2 -2
- package/dist/components/v2/AlertDialog/AlertDialog.vue.d.ts +2 -2
- package/dist/components/v2/AlertDialog/AlertDialog.vue.js +2 -2
- package/dist/components/v2/AlertDialog/AlertDialog.vue2.js +29 -29
- package/dist/components/v2/Checkbox/Checkbox.css +1 -1
- package/dist/components/v2/Checkbox/Checkbox.types.d.ts +11 -0
- package/dist/components/v2/Checkbox/Checkbox.vue.d.ts +2 -0
- package/dist/components/v2/Checkbox/Checkbox.vue.js +2 -2
- package/dist/components/v2/Checkbox/Checkbox.vue2.js +61 -49
- package/dist/components/v2/Combobox/Combobox.css +1 -1
- package/dist/components/v2/Combobox/Combobox.types.d.ts +14 -2
- package/dist/components/v2/Combobox/Combobox.vue.js +1 -1
- package/dist/components/v2/Combobox/Combobox.vue2.js +190 -181
- package/dist/components/v2/ConfirmDialog/ConfirmDialog.types.d.ts +2 -2
- package/dist/components/v2/ConfirmDialog/ConfirmDialog.vue.d.ts +2 -2
- package/dist/components/v2/ConfirmDialog/ConfirmDialog.vue.js +6 -6
- package/dist/components/v2/DatePicker/DatePicker.css +1 -1
- package/dist/components/v2/DatePicker/DatePicker.types.d.ts +2 -2
- package/dist/components/v2/DatePicker/DatePicker.vue.d.ts +2 -2
- package/dist/components/v2/DatePicker/DatePicker.vue.js +2 -2
- package/dist/components/v2/DatePicker/DatePicker.vue2.js +54 -54
- package/dist/components/v2/Divider/Divider.types.d.ts +8 -0
- package/dist/components/v2/DropdownMenu/DropdownMenu.types.d.ts +2 -2
- package/dist/components/v2/DropdownMenu/DropdownMenu.vue.d.ts +2 -2
- package/dist/components/v2/DropdownMenu/DropdownMenu.vue2.js +6 -6
- package/dist/components/v2/FileUpload/FileUpload.css +1 -1
- package/dist/components/v2/FileUpload/FileUpload.vue.js +2 -2
- package/dist/components/v2/FileUpload/FileUpload.vue2.js +16 -16
- package/dist/components/v2/FormField/FormField.css +1 -0
- package/dist/components/v2/FormField/FormField.types.d.ts +48 -0
- package/dist/components/v2/FormField/FormField.vue.d.ts +25 -0
- package/dist/components/v2/FormField/FormField.vue.js +8 -0
- package/dist/components/v2/FormField/FormField.vue2.js +54 -0
- package/dist/components/v2/FormField/index.d.ts +3 -0
- package/dist/components/v2/Image/Image.css +1 -0
- package/dist/components/v2/Image/Image.types.d.ts +26 -0
- package/dist/components/v2/Image/Image.vue.d.ts +16 -0
- package/dist/components/v2/Image/Image.vue.js +8 -0
- package/dist/components/v2/Image/Image.vue2.js +91 -0
- package/dist/components/v2/Image/ImageList.css +1 -0
- package/dist/components/v2/Image/ImageList.types.d.ts +28 -0
- package/dist/components/v2/Image/ImageList.vue.d.ts +15 -0
- package/dist/components/v2/Image/ImageList.vue.js +8 -0
- package/dist/components/v2/Image/ImageList.vue2.js +38 -0
- package/dist/components/v2/Image/index.d.ts +5 -0
- package/dist/components/v2/InputNumber/InputNumber.css +1 -1
- package/dist/components/v2/InputNumber/InputNumber.vue.js +2 -2
- package/dist/components/v2/InputNumber/InputNumber.vue2.js +22 -21
- package/dist/components/v2/InputSelect/InputSelect.types.d.ts +2 -2
- package/dist/components/v2/InputSelect/InputSelect.vue.d.ts +2 -2
- package/dist/components/v2/InputSelect/InputSelect.vue.js +14 -14
- package/dist/components/v2/InputSelect/InputSelectChip.css +1 -1
- package/dist/components/v2/InputSelect/InputSelectChip.vue.d.ts +3 -3
- package/dist/components/v2/InputSelect/InputSelectChip.vue.js +2 -2
- package/dist/components/v2/InputSelect/InputSelectChip.vue2.js +17 -17
- package/dist/components/v2/Popover/Popover.css +1 -1
- package/dist/components/v2/Popover/Popover.types.d.ts +2 -2
- package/dist/components/v2/Popover/Popover.vue.d.ts +2 -2
- package/dist/components/v2/Popover/Popover.vue.js +2 -2
- package/dist/components/v2/Popover/Popover.vue2.js +24 -24
- package/dist/components/v2/Radio/Radio.css +1 -1
- package/dist/components/v2/Radio/Radio.vue.d.ts +4 -0
- package/dist/components/v2/Radio/Radio.vue.js +1 -1
- package/dist/components/v2/Radio/Radio.vue2.js +57 -49
- package/dist/components/v2/Schedule/Schedule.css +1 -1
- package/dist/components/v2/Schedule/Schedule.types.d.ts +2 -2
- package/dist/components/v2/Schedule/Schedule.vue.d.ts +2 -2
- package/dist/components/v2/Schedule/Schedule.vue.js +3 -3
- package/dist/components/v2/Schedule/Schedule.vue2.js +55 -55
- package/dist/components/v2/Select/Select.css +1 -1
- package/dist/components/v2/Select/Select.types.d.ts +8 -2
- package/dist/components/v2/Select/Select.vue.js +3 -3
- package/dist/components/v2/Select/Select.vue2.js +102 -92
- package/dist/components/v2/Toast/Toast.types.d.ts +2 -2
- package/dist/components/v2/Toast/Toaster.css +1 -1
- package/dist/components/v2/Toast/Toaster.vue.d.ts +2 -2
- package/dist/components/v2/Toast/Toaster.vue.js +1 -1
- package/dist/components/v2/Toast/Toaster.vue2.js +17 -17
- package/dist/components/v2/Tooltip/Tooltip.css +1 -1
- package/dist/components/v2/Tooltip/Tooltip.types.d.ts +2 -2
- package/dist/components/v2/Tooltip/Tooltip.vue.d.ts +2 -2
- package/dist/components/v2/Tooltip/Tooltip.vue.js +1 -1
- package/dist/components/v2/Tooltip/Tooltip.vue2.js +39 -38
- package/dist/components/v2/Tooltip/TooltipContent.css +1 -1
- package/dist/components/v2/Tooltip/TooltipContent.vue.d.ts +2 -2
- package/dist/components/v2/Tooltip/TooltipContent.vue.js +2 -2
- package/dist/components/v2/Tooltip/TooltipContent.vue2.js +20 -20
- package/dist/components/v2/Tooltip/vTooltip.directive.js +40 -41
- package/dist/components/v2/index.d.ts +2 -0
- package/dist/components/v2/index.js +82 -76
- package/dist/components/v2/shared/isHtmlElement.util.d.ts +15 -0
- package/dist/components/v2/shared/isHtmlElement.util.js +10 -0
- package/dist/components/v2/shared/useIsMobile.util.d.ts +13 -0
- package/dist/components/v2/shared/useIsMobile.util.js +8 -0
- package/dist/components/v2/shared/useTriggerAria.util.js +4 -3
- package/dist/types/global.types.d.ts +10 -0
- package/package.json +3 -1
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { defineComponent as Ge, useModel as
|
|
2
|
-
import { Search as
|
|
3
|
-
import { breakpoints as Ze } from "../../../utils/breakpoints.util.js";
|
|
1
|
+
import { defineComponent as Ge, useModel as ge, useId as ze, useAttrs as Ue, computed as u, ref as E, useTemplateRef as I, shallowRef as Xe, watch as R, onMounted as Ke, nextTick as W, onBeforeUnmount as je, openBlock as r, createElementBlock as v, mergeProps as f, unref as s, createTextVNode as Y, toDisplayString as w, createCommentVNode as x, createVNode as M, withCtx as Z, createElementVNode as y, renderSlot as G, Fragment as ke, renderList as _e, createBlock as ee, resolveDynamicComponent as Qe, withModifiers as ae, mergeModels as we } from "vue";
|
|
2
|
+
import { Search as He, CircleX as Je, X as Ye, ChevronDown as Ze } from "@lucide/vue";
|
|
4
3
|
import ea from "../Input/Input.vue.js";
|
|
5
4
|
import aa from "../Popover/Popover.vue.js";
|
|
6
5
|
import la from "../Radio/RadioMarker.vue.js";
|
|
7
6
|
import ta from "../Select/SelectCheckMarker.vue.js";
|
|
8
|
-
import {
|
|
9
|
-
|
|
7
|
+
import { useIsMobile as oa } from "../shared/useIsMobile.util.js";
|
|
8
|
+
import { useTestId as ia } from "../shared/useTestId.util.js";
|
|
9
|
+
const sa = ["value", "placeholder", "disabled", "readonly", "aria-labelledby", "aria-label", "aria-describedby", "aria-activedescendant", "aria-required"], na = ["aria-hidden"], ua = ["src"], ra = { class: "combobox__chip-label" }, ca = ["disabled", "tabindex", "aria-label", "onClick"], da = ["aria-hidden"], va = ["aria-label"], fa = ["disabled"], ba = { class: "combobox-list" }, ma = {
|
|
10
10
|
key: 0,
|
|
11
11
|
class: "combobox-list__search"
|
|
12
|
-
},
|
|
12
|
+
}, ha = ["aria-label", "aria-multiselectable"], pa = ["id", "aria-selected", "aria-disabled", "onClick", "onMouseenter"], xa = { class: "combobox-list__label" }, ya = 64, Sa = /* @__PURE__ */ Ge({
|
|
13
13
|
inheritAttrs: !1,
|
|
14
14
|
__name: "Combobox",
|
|
15
15
|
props: /* @__PURE__ */ we({
|
|
@@ -18,6 +18,7 @@ const ia = ["value", "placeholder", "disabled", "readonly", "aria-labelledby", "
|
|
|
18
18
|
filter: { type: Boolean, default: !0 },
|
|
19
19
|
loading: { type: Boolean, default: !1 },
|
|
20
20
|
label: { default: void 0 },
|
|
21
|
+
required: { type: Boolean, default: !1 },
|
|
21
22
|
placeholder: { default: "Выберите значение" },
|
|
22
23
|
searchPlaceholder: { default: "Поиск" },
|
|
23
24
|
supportText: { default: void 0 },
|
|
@@ -35,7 +36,7 @@ const ia = ["value", "placeholder", "disabled", "readonly", "aria-labelledby", "
|
|
|
35
36
|
side: { default: "bottom" },
|
|
36
37
|
sideOffset: { default: 4 },
|
|
37
38
|
ariaLabel: { default: void 0 },
|
|
38
|
-
breakpointMobile: { default: "sm" },
|
|
39
|
+
breakpointMobile: { type: [String, Boolean], default: "sm" },
|
|
39
40
|
testId: { default: void 0 }
|
|
40
41
|
}, {
|
|
41
42
|
modelValue: {
|
|
@@ -47,148 +48,148 @@ const ia = ["value", "placeholder", "disabled", "readonly", "aria-labelledby", "
|
|
|
47
48
|
}),
|
|
48
49
|
emits: /* @__PURE__ */ we(["change", "select", "search", "clear"], ["update:modelValue", "update:search"]),
|
|
49
50
|
setup(i, { emit: Ce }) {
|
|
50
|
-
const o = i, p = Ce,
|
|
51
|
-
class:
|
|
52
|
-
style:
|
|
53
|
-
})),
|
|
54
|
-
const { class: e, style: a, ...l } =
|
|
51
|
+
const o = i, p = Ce, S = ge(i, "modelValue"), n = ge(i, "search"), V = ze(), le = `combobox-input-${V}`, te = `combobox-label-${V}`, C = `combobox-list-${V}`, oe = `combobox-message-${V}`, d = ia(() => o.testId), z = Ue(), Ie = u(() => ({
|
|
52
|
+
class: z.class,
|
|
53
|
+
style: z.style
|
|
54
|
+
})), Re = u(() => {
|
|
55
|
+
const { class: e, style: a, ...l } = z;
|
|
55
56
|
return l;
|
|
56
|
-
}), k =
|
|
57
|
-
const e =
|
|
57
|
+
}), k = oa(o.breakpointMobile), b = E(!1), ie = I("fieldRef"), N = I("contentRef"), se = I("chipsRef"), ne = I("counterRef"), L = I("inputRef"), ue = I("listRef"), _ = E(Number.MAX_SAFE_INTEGER), U = E(0), c = E(-1), m = u(() => {
|
|
58
|
+
const e = S.value;
|
|
58
59
|
return e == null ? [] : Array.isArray(e) ? e : [e];
|
|
59
|
-
}),
|
|
60
|
-
|
|
60
|
+
}), X = Xe(/* @__PURE__ */ new Map());
|
|
61
|
+
R(
|
|
61
62
|
[m, () => o.options],
|
|
62
63
|
() => {
|
|
63
64
|
const e = /* @__PURE__ */ new Map();
|
|
64
65
|
for (const a of m.value) {
|
|
65
|
-
const l = o.options.find((t) => t.value === a) ??
|
|
66
|
+
const l = o.options.find((t) => t.value === a) ?? X.value.get(a);
|
|
66
67
|
l && e.set(a, l);
|
|
67
68
|
}
|
|
68
|
-
|
|
69
|
+
X.value = e;
|
|
69
70
|
},
|
|
70
71
|
{ immediate: !0 }
|
|
71
72
|
);
|
|
72
|
-
const
|
|
73
|
+
const T = u(() => {
|
|
73
74
|
const e = o.options.filter(
|
|
74
75
|
(t) => m.value.includes(t.value)
|
|
75
76
|
);
|
|
76
77
|
if (e.length === m.value.length) return e;
|
|
77
|
-
const a = new Set(e.map((t) => t.value)), l = m.value.filter((t) => !a.has(t)).map((t) =>
|
|
78
|
+
const a = new Set(e.map((t) => t.value)), l = m.value.filter((t) => !a.has(t)).map((t) => X.value.get(t)).filter((t) => t !== void 0);
|
|
78
79
|
return [...e, ...l];
|
|
79
|
-
}),
|
|
80
|
-
() =>
|
|
80
|
+
}), re = u(
|
|
81
|
+
() => T.value.map((e) => e.label).join(", ")
|
|
81
82
|
), K = u(
|
|
82
|
-
() => o.multiple &&
|
|
83
|
+
() => o.multiple && T.value.length > 0
|
|
83
84
|
), Me = u(
|
|
84
85
|
() => !o.multiple && !o.disabled && m.value.length > 0
|
|
85
|
-
),
|
|
86
|
-
() => Math.max(0,
|
|
87
|
-
), $ = E(!1),
|
|
86
|
+
), Se = u(() => "Очистить поле"), D = u(
|
|
87
|
+
() => Math.max(0, T.value.length - _.value)
|
|
88
|
+
), $ = E(!1), Te = u(() => b.value && $.value ? n.value : o.multiple ? "" : re.value), $e = u(() => K.value ? "" : o.placeholder), g = u(() => {
|
|
88
89
|
const e = n.value.trim().toLowerCase();
|
|
89
90
|
return !o.filter || !e ? o.options : o.options.filter(
|
|
90
91
|
(a) => a.label.toLowerCase().includes(e)
|
|
91
92
|
);
|
|
92
|
-
}),
|
|
93
|
-
() => o.loading ||
|
|
94
|
-
),
|
|
95
|
-
get: () => b.value && (!o.hideEmptyList || k.value || Ae.value),
|
|
93
|
+
}), Be = u(
|
|
94
|
+
() => o.loading || g.value.length > 0
|
|
95
|
+
), Ae = u(() => n.value.trim().length > 0), q = u({
|
|
96
|
+
get: () => b.value && (!o.hideEmptyList || k.value || Be.value || Ae.value),
|
|
96
97
|
set: (e) => {
|
|
97
98
|
b.value = e;
|
|
98
99
|
}
|
|
99
100
|
}), j = u(
|
|
100
101
|
() => o.invalid ? o.errorText ?? o.supportText : o.supportText
|
|
101
|
-
),
|
|
102
|
-
() =>
|
|
103
|
-
),
|
|
102
|
+
), Ee = u(() => o.width ?? U.value), ce = u(
|
|
103
|
+
() => q.value && c.value !== -1 ? `${C}-option-${c.value}` : void 0
|
|
104
|
+
), Ve = u(() => [
|
|
104
105
|
"combobox",
|
|
105
106
|
`combobox--${o.size}`,
|
|
106
107
|
{
|
|
107
108
|
/* Стрелка и рамка следуют за видимым списком, а не за намерением открыть. */
|
|
108
|
-
"combobox--open":
|
|
109
|
+
"combobox--open": q.value,
|
|
109
110
|
"combobox--invalid": o.invalid,
|
|
110
111
|
"combobox--disabled": o.disabled,
|
|
111
112
|
"combobox--multiple": o.multiple
|
|
112
113
|
}
|
|
113
114
|
]);
|
|
114
|
-
function
|
|
115
|
+
function B(e) {
|
|
115
116
|
return m.value.includes(e);
|
|
116
117
|
}
|
|
117
118
|
function Q(e) {
|
|
118
|
-
const a =
|
|
119
|
+
const a = g.value[e];
|
|
119
120
|
return !!a && !a?.disabled;
|
|
120
121
|
}
|
|
121
|
-
function
|
|
122
|
-
return
|
|
122
|
+
function de() {
|
|
123
|
+
return g.value.findIndex((e, a) => Q(a));
|
|
123
124
|
}
|
|
124
|
-
function
|
|
125
|
-
for (let e =
|
|
125
|
+
function Ne() {
|
|
126
|
+
for (let e = g.value.length - 1; e >= 0; e -= 1)
|
|
126
127
|
if (Q(e)) return e;
|
|
127
128
|
return -1;
|
|
128
129
|
}
|
|
129
|
-
function
|
|
130
|
-
const l =
|
|
130
|
+
function ve(e, a) {
|
|
131
|
+
const l = g.value.length;
|
|
131
132
|
if (l === 0) return -1;
|
|
132
133
|
let t = e;
|
|
133
134
|
for (let h = 0; h < l; h += 1)
|
|
134
135
|
if (t = (t + a + l) % l, Q(t)) return t;
|
|
135
136
|
return -1;
|
|
136
137
|
}
|
|
137
|
-
function
|
|
138
|
+
function F() {
|
|
138
139
|
k.value || L.value?.focus();
|
|
139
140
|
}
|
|
140
|
-
function
|
|
141
|
+
function A() {
|
|
141
142
|
o.disabled || b.value || (b.value = !0);
|
|
142
143
|
}
|
|
143
|
-
function
|
|
144
|
+
function O() {
|
|
144
145
|
b.value = !1;
|
|
145
146
|
}
|
|
146
|
-
function
|
|
147
|
-
o.disabled || (
|
|
147
|
+
function Le() {
|
|
148
|
+
o.disabled || (S.value = void 0, p("change", void 0), p("clear"), $.value = !1, n.value && (n.value = "", p("search", "")), F());
|
|
148
149
|
}
|
|
149
|
-
function
|
|
150
|
-
e.stopPropagation(), !o.disabled && (
|
|
150
|
+
function De(e) {
|
|
151
|
+
e.stopPropagation(), !o.disabled && (A(), F());
|
|
151
152
|
}
|
|
152
|
-
function
|
|
153
|
+
function qe() {
|
|
153
154
|
if (!o.disabled) {
|
|
154
155
|
if (b.value) {
|
|
155
|
-
|
|
156
|
+
O();
|
|
156
157
|
return;
|
|
157
158
|
}
|
|
158
|
-
|
|
159
|
+
A(), F();
|
|
159
160
|
}
|
|
160
161
|
}
|
|
161
162
|
function fe(e) {
|
|
162
163
|
const a = e.target.value;
|
|
163
|
-
$.value = !0, n.value = a, p("search", a),
|
|
164
|
+
$.value = !0, n.value = a, p("search", a), A();
|
|
164
165
|
}
|
|
165
166
|
function Fe(e) {
|
|
166
167
|
k.value || e.preventDefault();
|
|
167
168
|
}
|
|
168
169
|
function Oe(e, a) {
|
|
169
|
-
a || (
|
|
170
|
+
a || (c.value = e);
|
|
170
171
|
}
|
|
171
|
-
function
|
|
172
|
+
function be(e) {
|
|
172
173
|
switch (e.key) {
|
|
173
174
|
case "ArrowDown":
|
|
174
175
|
if (e.preventDefault(), !b.value) {
|
|
175
|
-
|
|
176
|
+
A();
|
|
176
177
|
break;
|
|
177
178
|
}
|
|
178
|
-
|
|
179
|
+
c.value = ve(c.value, 1);
|
|
179
180
|
break;
|
|
180
181
|
case "ArrowUp":
|
|
181
182
|
if (e.preventDefault(), !b.value) {
|
|
182
|
-
|
|
183
|
+
A();
|
|
183
184
|
break;
|
|
184
185
|
}
|
|
185
|
-
|
|
186
|
+
c.value = c.value === -1 ? Ne() : ve(c.value, -1);
|
|
186
187
|
break;
|
|
187
188
|
case "Enter": {
|
|
188
189
|
if (!b.value) break;
|
|
189
|
-
const a =
|
|
190
|
+
const a = g.value[c.value];
|
|
190
191
|
if (!a) break;
|
|
191
|
-
e.preventDefault(),
|
|
192
|
+
e.preventDefault(), me(a);
|
|
192
193
|
break;
|
|
193
194
|
}
|
|
194
195
|
case "Escape":
|
|
@@ -199,35 +200,35 @@ const ia = ["value", "placeholder", "disabled", "readonly", "aria-labelledby", "
|
|
|
199
200
|
n.value && (n.value = "");
|
|
200
201
|
break;
|
|
201
202
|
case "Tab":
|
|
202
|
-
|
|
203
|
+
O();
|
|
203
204
|
break;
|
|
204
205
|
case "Backspace": {
|
|
205
206
|
if (!o.multiple || n.value) break;
|
|
206
207
|
const a = m.value[m.value.length - 1];
|
|
207
208
|
if (a === void 0) break;
|
|
208
|
-
|
|
209
|
+
he(a);
|
|
209
210
|
break;
|
|
210
211
|
}
|
|
211
212
|
}
|
|
212
213
|
}
|
|
213
|
-
function
|
|
214
|
+
function me(e) {
|
|
214
215
|
if (!(e.disabled || o.disabled)) {
|
|
215
216
|
if (o.multiple) {
|
|
216
|
-
const a =
|
|
217
|
-
|
|
217
|
+
const a = B(e.value) ? m.value.filter((l) => l !== e.value) : [...m.value, e.value];
|
|
218
|
+
S.value = a, p("change", a), n.value && (n.value = "", p("search", "")), F();
|
|
218
219
|
} else
|
|
219
|
-
|
|
220
|
+
S.value = e.value, p("change", e.value), O(), k.value || L.value?.focus();
|
|
220
221
|
p("select", e);
|
|
221
222
|
}
|
|
222
223
|
}
|
|
223
|
-
function
|
|
224
|
+
function he(e) {
|
|
224
225
|
if (o.disabled) return;
|
|
225
226
|
const a = m.value.filter((l) => l !== e);
|
|
226
|
-
|
|
227
|
+
S.value = a, p("change", a);
|
|
227
228
|
}
|
|
228
229
|
function H() {
|
|
229
230
|
if (!o.multiple) return;
|
|
230
|
-
const e = N.value, a =
|
|
231
|
+
const e = N.value, a = se.value;
|
|
231
232
|
if (!e || !a) return;
|
|
232
233
|
const l = Array.from(
|
|
233
234
|
a.querySelectorAll('[data-chip="item"]')
|
|
@@ -236,58 +237,65 @@ const ia = ["value", "placeholder", "disabled", "readonly", "aria-labelledby", "
|
|
|
236
237
|
_.value = Number.MAX_SAFE_INTEGER;
|
|
237
238
|
return;
|
|
238
239
|
}
|
|
239
|
-
const t = Number.parseFloat(getComputedStyle(a).columnGap) || 0, h = Number.parseFloat(getComputedStyle(e).columnGap) || 0,
|
|
240
|
-
let
|
|
240
|
+
const t = Number.parseFloat(getComputedStyle(a).columnGap) || 0, h = Number.parseFloat(getComputedStyle(e).columnGap) || 0, pe = D.value ? (ne.value?.offsetWidth ?? 0) + h : 0, Pe = e.clientWidth - pe - ya - h;
|
|
241
|
+
let xe = 0, J = 0;
|
|
241
242
|
for (const We of l) {
|
|
242
|
-
const
|
|
243
|
-
if (
|
|
244
|
-
|
|
243
|
+
const ye = xe + (J ? t : 0) + We.offsetWidth;
|
|
244
|
+
if (ye > Pe) break;
|
|
245
|
+
xe = ye, J += 1;
|
|
245
246
|
}
|
|
246
247
|
_.value = Math.max(J, 1);
|
|
247
248
|
}
|
|
248
|
-
let
|
|
249
|
-
return
|
|
250
|
-
const e =
|
|
251
|
-
e && (
|
|
249
|
+
let P;
|
|
250
|
+
return Ke(() => {
|
|
251
|
+
const e = ie.value;
|
|
252
|
+
e && (U.value = e.getBoundingClientRect().width, W(H), P = new ResizeObserver((a) => {
|
|
252
253
|
for (const l of a)
|
|
253
|
-
l.target === e && (
|
|
254
|
+
l.target === e && (U.value = l.borderBoxSize?.[0]?.inlineSize ?? e.getBoundingClientRect().width);
|
|
254
255
|
H();
|
|
255
|
-
}),
|
|
256
|
-
}),
|
|
257
|
-
() =>
|
|
256
|
+
}), P.observe(e), N.value && P.observe(N.value));
|
|
257
|
+
}), je(() => P?.disconnect()), R(
|
|
258
|
+
() => T.value.map((e) => e.value).join("|"),
|
|
258
259
|
() => {
|
|
259
|
-
_.value = Number.MAX_SAFE_INTEGER,
|
|
260
|
+
_.value = Number.MAX_SAFE_INTEGER, W(H);
|
|
260
261
|
}
|
|
261
|
-
),
|
|
262
|
-
|
|
263
|
-
}),
|
|
262
|
+
), R([g, n], () => {
|
|
263
|
+
c.value = n.value ? de() : -1;
|
|
264
|
+
}), R(b, (e) => {
|
|
264
265
|
if (e) {
|
|
265
|
-
|
|
266
|
+
c.value = n.value ? de() : -1, $.value = !1, !k.value && !o.multiple && re.value && W(() => L.value?.select());
|
|
266
267
|
return;
|
|
267
268
|
}
|
|
268
|
-
|
|
269
|
-
}),
|
|
270
|
-
e !== -1 &&
|
|
271
|
-
|
|
269
|
+
c.value = -1, $.value = !1, n.value && (n.value = "", p("search", ""));
|
|
270
|
+
}), R(c, (e) => {
|
|
271
|
+
e !== -1 && W(() => {
|
|
272
|
+
ue.value?.querySelector(
|
|
272
273
|
`#${CSS.escape(`${C}-option-${e}`)}`
|
|
273
274
|
)?.scrollIntoView({ block: "nearest" });
|
|
274
275
|
});
|
|
275
|
-
}),
|
|
276
|
+
}), R(
|
|
276
277
|
() => o.disabled,
|
|
277
278
|
(e) => {
|
|
278
|
-
e &&
|
|
279
|
+
e && O();
|
|
279
280
|
}
|
|
280
|
-
), (e, a) => (
|
|
281
|
-
i.label ? (
|
|
281
|
+
), (e, a) => (r(), v("div", f({ class: Ve.value }, { ...Ie.value, ...s(d)("root") }), [
|
|
282
|
+
i.label ? (r(), v("label", f({
|
|
282
283
|
key: 0,
|
|
283
|
-
id:
|
|
284
|
+
id: te,
|
|
284
285
|
class: "combobox__label",
|
|
285
|
-
for:
|
|
286
|
-
}, s(d)("label")),
|
|
286
|
+
for: le
|
|
287
|
+
}, s(d)("label")), [
|
|
288
|
+
Y(w(i.label) + " ", 1),
|
|
289
|
+
i.required ? (r(), v("span", f({
|
|
290
|
+
key: 0,
|
|
291
|
+
class: "combobox__required",
|
|
292
|
+
"aria-hidden": "true"
|
|
293
|
+
}, s(d)("required")), "*", 16)) : x("", !0)
|
|
294
|
+
], 16)) : x("", !0),
|
|
287
295
|
M(s(aa), {
|
|
288
|
-
open:
|
|
289
|
-
"onUpdate:open": a[1] || (a[1] = (l) =>
|
|
290
|
-
width:
|
|
296
|
+
open: q.value,
|
|
297
|
+
"onUpdate:open": a[1] || (a[1] = (l) => q.value = l),
|
|
298
|
+
width: Ee.value,
|
|
291
299
|
side: i.side,
|
|
292
300
|
"side-offset": i.sideOffset,
|
|
293
301
|
align: i.align,
|
|
@@ -299,19 +307,19 @@ const ia = ["value", "placeholder", "disabled", "readonly", "aria-labelledby", "
|
|
|
299
307
|
"trap-focus": !1,
|
|
300
308
|
"test-id": i.testId
|
|
301
309
|
}, {
|
|
302
|
-
trigger:
|
|
303
|
-
|
|
310
|
+
trigger: Z(({ props: l }) => [
|
|
311
|
+
y("div", f({
|
|
304
312
|
ref_key: "fieldRef",
|
|
305
|
-
ref:
|
|
313
|
+
ref: ie,
|
|
306
314
|
class: "combobox__field"
|
|
307
|
-
}, s(d)("field"), { onClick:
|
|
308
|
-
|
|
315
|
+
}, s(d)("field"), { onClick: De }), [
|
|
316
|
+
y("div", {
|
|
309
317
|
ref_key: "contentRef",
|
|
310
318
|
ref: N,
|
|
311
319
|
class: "combobox__content"
|
|
312
320
|
}, [
|
|
313
|
-
|
|
314
|
-
id:
|
|
321
|
+
y("input", f({
|
|
322
|
+
id: le,
|
|
315
323
|
ref_key: "inputRef",
|
|
316
324
|
ref: L,
|
|
317
325
|
role: "combobox",
|
|
@@ -320,29 +328,30 @@ const ia = ["value", "placeholder", "disabled", "readonly", "aria-labelledby", "
|
|
|
320
328
|
autocomplete: "off",
|
|
321
329
|
spellcheck: "false",
|
|
322
330
|
"aria-autocomplete": "list",
|
|
323
|
-
value:
|
|
331
|
+
value: Te.value,
|
|
324
332
|
placeholder: $e.value,
|
|
325
333
|
disabled: i.disabled,
|
|
326
334
|
readonly: s(k),
|
|
327
|
-
"aria-labelledby": i.label ?
|
|
335
|
+
"aria-labelledby": i.label ? te : void 0,
|
|
328
336
|
"aria-label": i.label ? void 0 : i.ariaLabel,
|
|
329
|
-
"aria-describedby": j.value ?
|
|
330
|
-
"aria-activedescendant":
|
|
337
|
+
"aria-describedby": j.value ? oe : void 0,
|
|
338
|
+
"aria-activedescendant": ce.value,
|
|
339
|
+
"aria-required": i.required || void 0
|
|
331
340
|
}, {
|
|
332
341
|
...l,
|
|
333
|
-
...
|
|
342
|
+
...Re.value,
|
|
334
343
|
...s(d)("input")
|
|
335
344
|
}, {
|
|
336
345
|
onInput: fe,
|
|
337
|
-
onKeydown:
|
|
338
|
-
}), null, 16,
|
|
339
|
-
K.value ? (
|
|
346
|
+
onKeydown: be
|
|
347
|
+
}), null, 16, sa),
|
|
348
|
+
K.value ? (r(), v("span", {
|
|
340
349
|
key: 0,
|
|
341
350
|
ref_key: "chipsRef",
|
|
342
|
-
ref:
|
|
351
|
+
ref: se,
|
|
343
352
|
class: "combobox__chips"
|
|
344
353
|
}, [
|
|
345
|
-
(
|
|
354
|
+
(r(!0), v(ke, null, _e(T.value, (t, h) => (r(), v("span", f({
|
|
346
355
|
key: t.value,
|
|
347
356
|
"data-chip": "item",
|
|
348
357
|
class: ["combobox__chip", {
|
|
@@ -350,177 +359,177 @@ const ia = ["value", "placeholder", "disabled", "readonly", "aria-labelledby", "
|
|
|
350
359
|
}],
|
|
351
360
|
"aria-hidden": h >= _.value || void 0
|
|
352
361
|
}, { ref_for: !0 }, s(d)("chip", t.value)), [
|
|
353
|
-
|
|
362
|
+
G(e.$slots, "chip", {
|
|
354
363
|
option: t,
|
|
355
364
|
index: h
|
|
356
365
|
}, () => [
|
|
357
|
-
t.avatar ? (
|
|
366
|
+
t.avatar ? (r(), v("img", {
|
|
358
367
|
key: 0,
|
|
359
368
|
class: "combobox__chip-avatar",
|
|
360
369
|
src: t.avatar,
|
|
361
370
|
alt: ""
|
|
362
|
-
}, null, 8,
|
|
371
|
+
}, null, 8, ua)) : t.icon ? (r(), ee(Qe(t.icon), {
|
|
363
372
|
key: 1,
|
|
364
373
|
class: "combobox__chip-icon",
|
|
365
374
|
"aria-hidden": "true"
|
|
366
|
-
})) :
|
|
367
|
-
|
|
375
|
+
})) : x("", !0),
|
|
376
|
+
y("span", ra, w(t.label), 1)
|
|
368
377
|
], !0),
|
|
369
|
-
|
|
378
|
+
y("button", f({
|
|
370
379
|
type: "button",
|
|
371
380
|
class: "combobox__chip-remove",
|
|
372
381
|
disabled: i.disabled,
|
|
373
382
|
tabindex: h >= _.value ? -1 : void 0,
|
|
374
383
|
"aria-label": `Убрать ${t.label}`
|
|
375
384
|
}, { ref_for: !0 }, s(d)("chip-remove", t.value), {
|
|
376
|
-
onClick:
|
|
385
|
+
onClick: ae((pe) => he(t.value), ["stop"])
|
|
377
386
|
}), [
|
|
378
|
-
M(s(
|
|
387
|
+
M(s(Je), {
|
|
379
388
|
class: "combobox__chip-icon",
|
|
380
389
|
"aria-hidden": "true"
|
|
381
390
|
})
|
|
382
|
-
], 16,
|
|
383
|
-
], 16,
|
|
384
|
-
], 512)) :
|
|
385
|
-
K.value ? (
|
|
391
|
+
], 16, ca)
|
|
392
|
+
], 16, na))), 128))
|
|
393
|
+
], 512)) : x("", !0),
|
|
394
|
+
K.value ? (r(), v("span", f({
|
|
386
395
|
key: 1,
|
|
387
396
|
ref_key: "counterRef",
|
|
388
|
-
ref:
|
|
397
|
+
ref: ne,
|
|
389
398
|
class: ["combobox__chip combobox__chip--counter", {
|
|
390
399
|
"combobox__chip--measured": !D.value
|
|
391
400
|
}],
|
|
392
401
|
"aria-hidden": !D.value || void 0
|
|
393
|
-
}, s(d)("chip-counter")), " +" + w(D.value || 1), 17,
|
|
402
|
+
}, s(d)("chip-counter")), " +" + w(D.value || 1), 17, da)) : x("", !0)
|
|
394
403
|
], 512),
|
|
395
|
-
Me.value ? (
|
|
404
|
+
Me.value ? (r(), v("button", f({
|
|
396
405
|
key: 0,
|
|
397
406
|
type: "button",
|
|
398
407
|
class: "combobox__clear-button",
|
|
399
|
-
"aria-label":
|
|
408
|
+
"aria-label": Se.value
|
|
400
409
|
}, s(d)("clear"), {
|
|
401
|
-
onClick:
|
|
410
|
+
onClick: ae(Le, ["stop"])
|
|
402
411
|
}), [
|
|
403
|
-
M(s(
|
|
412
|
+
M(s(Ye), {
|
|
404
413
|
class: "combobox__clear",
|
|
405
414
|
"aria-hidden": "true"
|
|
406
415
|
})
|
|
407
|
-
], 16,
|
|
408
|
-
|
|
416
|
+
], 16, va)) : x("", !0),
|
|
417
|
+
y("button", f({
|
|
409
418
|
type: "button",
|
|
410
419
|
class: "combobox__arrow-button",
|
|
411
420
|
tabindex: "-1",
|
|
412
421
|
"aria-hidden": "true",
|
|
413
422
|
disabled: i.disabled
|
|
414
423
|
}, s(d)("arrow"), {
|
|
415
|
-
onClick:
|
|
424
|
+
onClick: ae(qe, ["stop"])
|
|
416
425
|
}), [
|
|
417
|
-
M(s(
|
|
426
|
+
M(s(Ze), { class: "combobox__arrow" })
|
|
418
427
|
], 16, fa)
|
|
419
428
|
], 16)
|
|
420
429
|
]),
|
|
421
|
-
default:
|
|
422
|
-
|
|
423
|
-
s(k) ? (
|
|
424
|
-
M(s(ea),
|
|
430
|
+
default: Z(() => [
|
|
431
|
+
y("div", ba, [
|
|
432
|
+
s(k) ? (r(), v("div", ma, [
|
|
433
|
+
M(s(ea), f({
|
|
425
434
|
modelValue: n.value,
|
|
426
435
|
"onUpdate:modelValue": a[0] || (a[0] = (l) => n.value = l),
|
|
427
436
|
"native-type": "search",
|
|
428
437
|
placeholder: i.searchPlaceholder,
|
|
429
438
|
"aria-label": i.searchPlaceholder,
|
|
430
439
|
"aria-controls": C,
|
|
431
|
-
"aria-activedescendant":
|
|
440
|
+
"aria-activedescendant": ce.value,
|
|
432
441
|
"aria-autocomplete": "list",
|
|
433
442
|
autocomplete: "off",
|
|
434
443
|
spellcheck: "false"
|
|
435
444
|
}, s(d)("search"), {
|
|
436
445
|
onInput: fe,
|
|
437
|
-
onKeydown:
|
|
446
|
+
onKeydown: be
|
|
438
447
|
}), {
|
|
439
|
-
prefix:
|
|
440
|
-
M(s(
|
|
448
|
+
prefix: Z(() => [
|
|
449
|
+
M(s(He), { "aria-hidden": "true" })
|
|
441
450
|
]),
|
|
442
451
|
_: 1
|
|
443
452
|
}, 16, ["modelValue", "placeholder", "aria-label", "aria-activedescendant"])
|
|
444
|
-
])) :
|
|
445
|
-
|
|
453
|
+
])) : x("", !0),
|
|
454
|
+
y("div", {
|
|
446
455
|
ref_key: "listRef",
|
|
447
|
-
ref:
|
|
456
|
+
ref: ue,
|
|
448
457
|
class: "combobox-list__scroll",
|
|
449
458
|
onMousedown: Fe
|
|
450
459
|
}, [
|
|
451
|
-
|
|
460
|
+
y("div", {
|
|
452
461
|
id: C,
|
|
453
462
|
role: "listbox",
|
|
454
463
|
"aria-label": i.label ?? i.ariaLabel,
|
|
455
464
|
"aria-multiselectable": i.multiple || void 0,
|
|
456
465
|
class: "combobox-list__options"
|
|
457
466
|
}, [
|
|
458
|
-
i.loading ? (
|
|
467
|
+
i.loading ? (r(), v("p", f({
|
|
459
468
|
key: 0,
|
|
460
469
|
class: "combobox-list__status"
|
|
461
470
|
}, s(d)("loading")), [
|
|
462
|
-
|
|
463
|
-
|
|
471
|
+
G(e.$slots, "loading", {}, () => [
|
|
472
|
+
Y(w(i.loadingText), 1)
|
|
464
473
|
], !0)
|
|
465
|
-
], 16)) :
|
|
466
|
-
(
|
|
474
|
+
], 16)) : x("", !0),
|
|
475
|
+
(r(!0), v(ke, null, _e(g.value, (l, t) => (r(), v("div", f({
|
|
467
476
|
id: `${C}-option-${t}`,
|
|
468
477
|
key: l.value,
|
|
469
478
|
role: "option",
|
|
470
479
|
class: ["combobox-list__option", {
|
|
471
|
-
"combobox-list__option--active":
|
|
480
|
+
"combobox-list__option--active": c.value === t,
|
|
472
481
|
"combobox-list__option--disabled": l.disabled
|
|
473
482
|
}],
|
|
474
|
-
"aria-selected":
|
|
483
|
+
"aria-selected": B(l.value),
|
|
475
484
|
"aria-disabled": l.disabled || void 0
|
|
476
485
|
}, { ref_for: !0 }, s(d)("option", l.value), {
|
|
477
|
-
onClick: (h) =>
|
|
486
|
+
onClick: (h) => me(l),
|
|
478
487
|
onMouseenter: (h) => Oe(t, l.disabled)
|
|
479
488
|
}), [
|
|
480
|
-
i.multiple ? (
|
|
489
|
+
i.multiple ? (r(), ee(ta, {
|
|
481
490
|
key: 0,
|
|
482
|
-
checked:
|
|
491
|
+
checked: B(l.value),
|
|
483
492
|
disabled: l.disabled,
|
|
484
|
-
state:
|
|
485
|
-
}, null, 8, ["checked", "disabled", "state"])) : (
|
|
493
|
+
state: c.value === t ? "hover" : "default"
|
|
494
|
+
}, null, 8, ["checked", "disabled", "state"])) : (r(), ee(s(la), {
|
|
486
495
|
key: 1,
|
|
487
|
-
checked:
|
|
496
|
+
checked: B(l.value),
|
|
488
497
|
disabled: l.disabled,
|
|
489
|
-
state:
|
|
498
|
+
state: c.value === t ? "hover" : "default"
|
|
490
499
|
}, null, 8, ["checked", "disabled", "state"])),
|
|
491
|
-
|
|
500
|
+
G(e.$slots, "option", {
|
|
492
501
|
option: l,
|
|
493
|
-
selected:
|
|
494
|
-
active:
|
|
502
|
+
selected: B(l.value),
|
|
503
|
+
active: c.value === t,
|
|
495
504
|
index: t
|
|
496
505
|
}, () => [
|
|
497
|
-
|
|
506
|
+
y("span", xa, w(l.label), 1)
|
|
498
507
|
], !0)
|
|
499
|
-
], 16,
|
|
500
|
-
!i.loading && !
|
|
508
|
+
], 16, pa))), 128)),
|
|
509
|
+
!i.loading && !g.value.length ? (r(), v("p", f({
|
|
501
510
|
key: 1,
|
|
502
511
|
class: "combobox-list__status"
|
|
503
512
|
}, s(d)("empty")), [
|
|
504
|
-
|
|
513
|
+
G(e.$slots, "empty", {
|
|
505
514
|
notFound: !!i.options.length
|
|
506
515
|
}, () => [
|
|
507
|
-
|
|
516
|
+
Y(w(i.options.length ? i.notFoundText : i.emptyText), 1)
|
|
508
517
|
], !0)
|
|
509
|
-
], 16)) :
|
|
510
|
-
], 8,
|
|
518
|
+
], 16)) : x("", !0)
|
|
519
|
+
], 8, ha)
|
|
511
520
|
], 544)
|
|
512
521
|
])
|
|
513
522
|
]),
|
|
514
523
|
_: 3
|
|
515
524
|
}, 8, ["open", "width", "side", "side-offset", "align", "align-offset", "breakpoint-mobile", "test-id"]),
|
|
516
|
-
j.value ? (
|
|
525
|
+
j.value ? (r(), v("p", f({
|
|
517
526
|
key: 1,
|
|
518
|
-
id:
|
|
527
|
+
id: oe,
|
|
519
528
|
class: "combobox__message"
|
|
520
|
-
}, s(d)("message")), w(j.value), 17)) :
|
|
529
|
+
}, s(d)("message")), w(j.value), 17)) : x("", !0)
|
|
521
530
|
], 16));
|
|
522
531
|
}
|
|
523
532
|
});
|
|
524
533
|
export {
|
|
525
|
-
|
|
534
|
+
Sa as default
|
|
526
535
|
};
|