@platforma-sdk/ui-vue 1.42.10 → 1.42.14
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/.turbo/turbo-build.log +18 -18
- package/.turbo/turbo-test.log +565 -0
- package/.turbo/turbo-type-check.log +1 -1
- package/CHANGELOG.md +8 -0
- package/dist/components/PlAnnotations/components/DynamicForm.vue2.js +12 -12
- package/dist/lib/ui/uikit/dist/components/DataTable/TableComponent.vue.js +1 -1
- package/dist/lib/ui/uikit/dist/components/PlAccordion/ExpandTransition.vue.js +27 -0
- package/dist/lib/ui/uikit/dist/components/PlAccordion/ExpandTransition.vue.js.map +1 -0
- package/dist/lib/ui/uikit/dist/components/PlAccordion/PlAccordionSection.vue2.js +1 -1
- package/dist/lib/ui/uikit/dist/components/PlAutocomplete/PlAutocomplete.vue.js +22 -22
- package/dist/lib/ui/uikit/dist/components/PlAutocomplete/PlAutocomplete.vue.js.map +1 -1
- package/dist/lib/ui/uikit/dist/components/PlDropdown/OptionList.vue.js +2 -2
- package/dist/lib/ui/uikit/dist/components/PlDropdown/PlDropdown.vue.js +106 -103
- package/dist/lib/ui/uikit/dist/components/PlDropdown/PlDropdown.vue.js.map +1 -1
- package/dist/lib/ui/uikit/dist/components/PlDropdownLine/PlDropdownLine.vue.js +81 -77
- package/dist/lib/ui/uikit/dist/components/PlDropdownLine/PlDropdownLine.vue.js.map +1 -1
- package/dist/lib/ui/uikit/dist/components/PlDropdownMulti/PlDropdownMulti.vue.js +21 -21
- package/dist/lib/ui/uikit/dist/components/PlDropdownMulti/PlDropdownMulti.vue.js.map +1 -1
- package/dist/lib/ui/uikit/dist/components/PlDropdownRef/PlDropdownRef.vue.js +24 -22
- package/dist/lib/ui/uikit/dist/components/PlDropdownRef/PlDropdownRef.vue.js.map +1 -1
- package/dist/lib/ui/uikit/dist/components/PlFileDialog/Remote.vue.js +8 -8
- package/dist/lib/ui/uikit/dist/components/PlSlideModal/PlPureSlideModal.vue.js +1 -1
- package/dist/lib/ui/uikit/dist/utils/DropdownOverlay/DropdownOverlay.vue.js +13 -11
- package/dist/lib/ui/uikit/dist/utils/DropdownOverlay/DropdownOverlay.vue.js.map +1 -1
- package/dist/plugins/Monetization/MonetizationSidebar.vue.js +4 -4
- package/package.json +5 -5
|
@@ -1,47 +1,44 @@
|
|
|
1
|
-
import { defineComponent as no,
|
|
2
|
-
import { tap as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
1
|
+
import { defineComponent as no, ref as D, useTemplateRef as io, reactive as ao, computed as i, unref as a, createElementBlock as u, watch as N, watchPostEffect as po, openBlock as l, createElementVNode as c, createCommentVNode as d, normalizeClass as so, createBlock as p, createVNode as T, withDirectives as co, vModelText as uo, withCtx as O, createTextVNode as fo, toDisplayString as v, renderSlot as S, withModifiers as H } from "vue";
|
|
2
|
+
import { tap as vo } from "../../helpers/functions.js";
|
|
3
|
+
import ho from "../PlTooltip/PlTooltip.vue.js";
|
|
4
|
+
import wo from "../../utils/DoubleContour.vue.js";
|
|
5
5
|
import { useLabelNotch as mo } from "../../utils/useLabelNotch.js";
|
|
6
|
-
import { deepEqual as
|
|
6
|
+
import { deepEqual as z } from "../../helpers/objects.js";
|
|
7
7
|
import xo from "../LongText.vue.js";
|
|
8
|
-
import { normalizeListOptions as
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import { getErrorMessage as
|
|
13
|
-
import
|
|
14
|
-
import { useGroupBy as
|
|
8
|
+
import { normalizeListOptions as bo } from "../../helpers/utils.js";
|
|
9
|
+
import I from "../PlIcon16/PlIcon16.vue.js";
|
|
10
|
+
import M from "../PlIcon24/PlIcon24.vue.js";
|
|
11
|
+
import go from "../../generated/components/svg/images/SvgRequired.vue2.js";
|
|
12
|
+
import { getErrorMessage as _o } from "../../helpers/error.js";
|
|
13
|
+
import ko from "./OptionList.vue.js";
|
|
14
|
+
import { useGroupBy as yo } from "./useGroupBy.js";
|
|
15
15
|
(function() {
|
|
16
16
|
try {
|
|
17
17
|
if (typeof document < "u") {
|
|
18
|
-
var
|
|
19
|
-
|
|
20
|
-
.ui-lt-container{min-width:0;white-space:nowrap;overflow:hidden;position:relative;border-radius:5px}.ui-lt-container span{display:inline-block;overflow:hidden;text-overflow:ellipsis;width:100%;vertical-align:bottom;pointer-events:all!important}.ui-lt-container .ui-lt-animate{position:relative;animation:left-to-right var(--5deba9de) infinite alternate linear;overflow:unset!important;text-overflow:unset!important;width:fit-content!important}@keyframes left-to-right{0%{transform:translate(0);left:0%}to{transform:translate(-101%);left:101%}}`)), document.head.appendChild(
|
|
18
|
+
var h = document.createElement("style");
|
|
19
|
+
h.appendChild(document.createTextNode(`.pl-dropdown__options{--option-hover-bg: var(--btn-sec-hover-grey);z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);position:absolute;background-color:var(--pl-dropdown-options-bg);border-radius:6px;max-height:244px;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14;--thumb-color: var(--ic-02);overflow-y:auto}.pl-dropdown__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dropdown__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dropdown__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:var(--control-height);background-color:#fff;opacity:.5;font-style:italic}.pl-dropdown__options .group-container{padding:4px 0}.pl-dropdown__options .option{position:relative;padding:0 30px 0 10px;height:var(--control-height);line-height:var(--control-height);cursor:pointer;-webkit-user-select:none;user-select:none}.pl-dropdown__options .option .checkmark{position:absolute;display:none;right:10px;top:50%;transform:translateY(-50%)}.pl-dropdown__options .option>span{display:block;overflow:hidden;white-space:nowrap;max-width:100%;text-overflow:ellipsis}.pl-dropdown__options .option.selected{background-color:var(--color-active-select)}.pl-dropdown__options .option.selected .checkmark{display:block}.pl-dropdown__options .option.active:not(.selected){background-color:var(--option-hover-bg)}.pl-dropdown__options .option:hover{background-color:var(--option-hover-bg)}.pl-dropdown{--contour-color: var(--txt-01);--contour-border-width: 1px;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);position:relative;outline:none;min-height:var(--control-height);border-radius:6px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base)}.pl-dropdown__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-dropdown label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);color:var(--txt-01)}.pl-dropdown__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding-left:11px;min-height:var(--control-height);line-height:var(--control-height);display:flex;flex-direction:row;align-items:center;cursor:pointer}.pl-dropdown__field .input-value{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;flex-direction:row;align-items:center;padding:0 60px 0 11px;pointer-events:none;line-height:20px;color:var(--txt-01);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit}.pl-dropdown__field input{min-height:calc(var(--control-height) - 2px);line-height:20px;font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 40px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-dropdown__field input:focus{outline:none}.pl-dropdown__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown__controls{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:auto}.pl-dropdown__controls .mask-16,.pl-dropdown__controls .mask-24{cursor:pointer}.pl-dropdown__controls .clear{--icon-color: var(--ic-02)}.pl-dropdown__controls .mask-loading{--icon-color: var(--ic-accent);animation:spin 2.5s linear infinite}.pl-dropdown__arrow-wrapper{display:flex;align-items:center;min-height:var(--control-height);padding-right:11px}.pl-dropdown .arrow-icon{cursor:pointer}.pl-dropdown .arrow-icon.arrow-icon-default{transition:transform .2s}.pl-dropdown.open,.pl-dropdown:focus-within{z-index:1;--label-color: var(--txt-focus)}.pl-dropdown.open .pl-dropdown__container{z-index:1000}.pl-dropdown.open .pl-dropdown__field{border-radius:6px 6px 0 0}.pl-dropdown.open .arrow-icon.arrow-icon-default{transform:rotate(-180deg)}.pl-dropdown:hover{--contour-color: var(--control-hover-color)}.pl-dropdown:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-dropdown.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-dropdown.disabled{--contour-color: var(--color-dis-01);--icon-color: var(--color-dis-01);--label-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none;-webkit-user-select:none;user-select:none}.pl-dropdown.disabled .input-value{color:var(--dis-01)}
|
|
20
|
+
.ui-lt-container{min-width:0;white-space:nowrap;overflow:hidden;position:relative;border-radius:5px}.ui-lt-container span{display:inline-block;overflow:hidden;text-overflow:ellipsis;width:100%;vertical-align:bottom;pointer-events:all!important}.ui-lt-container .ui-lt-animate{position:relative;animation:left-to-right var(--5deba9de) infinite alternate linear;overflow:unset!important;text-overflow:unset!important;width:fit-content!important}@keyframes left-to-right{0%{transform:translate(0);left:0%}to{transform:translate(-101%);left:101%}}`)), document.head.appendChild(h);
|
|
21
21
|
}
|
|
22
|
-
} catch (
|
|
23
|
-
console.error("vite-plugin-css-injected-by-js",
|
|
22
|
+
} catch (b) {
|
|
23
|
+
console.error("vite-plugin-css-injected-by-js", b);
|
|
24
24
|
}
|
|
25
25
|
})();
|
|
26
|
-
const Vo = ["tabindex"],
|
|
26
|
+
const Vo = ["tabindex"], zo = { class: "pl-dropdown__container" }, Io = { class: "pl-dropdown__field" }, Co = ["disabled", "placeholder"], Eo = {
|
|
27
27
|
key: 0,
|
|
28
28
|
class: "input-value"
|
|
29
|
-
},
|
|
30
|
-
key: 2,
|
|
31
|
-
class: "arrow-icon arrow-icon-default"
|
|
32
|
-
}, Ao = { key: 0 }, No = {
|
|
29
|
+
}, Lo = { class: "pl-dropdown__controls" }, Ro = { key: 0 }, $o = {
|
|
33
30
|
key: 0,
|
|
34
31
|
class: "pl-dropdown__error"
|
|
35
|
-
},
|
|
32
|
+
}, Ao = {
|
|
36
33
|
key: 1,
|
|
37
34
|
class: "pl-dropdown__helper"
|
|
38
|
-
},
|
|
35
|
+
}, Bo = {
|
|
39
36
|
key: 2,
|
|
40
37
|
class: "pl-dropdown__helper"
|
|
41
|
-
},
|
|
38
|
+
}, Do = {
|
|
42
39
|
name: "PlDropdown"
|
|
43
|
-
},
|
|
44
|
-
...
|
|
40
|
+
}, Qo = /* @__PURE__ */ no({
|
|
41
|
+
...Do,
|
|
45
42
|
props: {
|
|
46
43
|
modelValue: {},
|
|
47
44
|
label: { default: "" },
|
|
@@ -58,174 +55,180 @@ const Vo = ["tabindex"], Io = { class: "pl-dropdown__container" }, Co = { class:
|
|
|
58
55
|
optionSize: { default: "small" }
|
|
59
56
|
},
|
|
60
57
|
emits: ["update:modelValue"],
|
|
61
|
-
setup(
|
|
62
|
-
const
|
|
58
|
+
setup(h, { emit: b }) {
|
|
59
|
+
const C = b, t = h, s = D(), g = D(), _ = io("optionListRef"), e = ao({
|
|
63
60
|
search: "",
|
|
64
61
|
activeIndex: -1,
|
|
65
62
|
open: !1,
|
|
66
63
|
optionsHeight: 0
|
|
67
|
-
}), q = () =>
|
|
68
|
-
|
|
64
|
+
}), q = () => vo(
|
|
65
|
+
A.value.findIndex((o) => z(o.value, t.modelValue)),
|
|
69
66
|
(o) => o < 0 ? 0 : o
|
|
70
|
-
), U = () => e.activeIndex = q(),
|
|
71
|
-
if (!
|
|
67
|
+
), U = () => e.activeIndex = q(), w = i(() => t.options === void 0), k = i(() => w.value ? !0 : t.disabled), E = i(() => (t.options ?? []).findIndex((o) => z(o.value, t.modelValue))), L = i(() => {
|
|
68
|
+
if (!w.value) {
|
|
72
69
|
if (t.error)
|
|
73
|
-
return
|
|
74
|
-
if (t.modelValue !== void 0 &&
|
|
70
|
+
return _o(t.error);
|
|
71
|
+
if (t.modelValue !== void 0 && E.value === -1)
|
|
75
72
|
return "The selected value is not one of the options";
|
|
76
73
|
}
|
|
77
|
-
}),
|
|
78
|
-
() =>
|
|
74
|
+
}), R = i(
|
|
75
|
+
() => bo(t.options ?? []).map((o, r) => ({
|
|
79
76
|
...o,
|
|
80
77
|
index: r,
|
|
81
|
-
isSelected: r ===
|
|
78
|
+
isSelected: r === E.value,
|
|
82
79
|
isActive: r === e.activeIndex
|
|
83
80
|
}))
|
|
84
|
-
),
|
|
85
|
-
const o =
|
|
81
|
+
), $ = i(() => {
|
|
82
|
+
const o = a(R).find((r) => z(r.value, t.modelValue));
|
|
86
83
|
return (o == null ? void 0 : o.label) || t.modelValue;
|
|
87
|
-
}),
|
|
88
|
-
const o =
|
|
84
|
+
}), j = i(() => !e.open && t.modelValue !== void 0 ? "" : t.modelValue ? String($.value) : t.placeholder), P = i(() => t.modelValue !== void 0 && t.modelValue !== null), Y = i(() => {
|
|
85
|
+
const o = R.value;
|
|
89
86
|
return e.search ? o.filter((r) => {
|
|
90
87
|
const n = e.search.toLowerCase();
|
|
91
88
|
return r.label.toLowerCase().includes(n) || r.description && r.description.toLowerCase().includes(n) ? !0 : typeof r.value == "string" ? r.value.toLowerCase().includes(n) : r.value === e.search;
|
|
92
89
|
}) : o;
|
|
93
|
-
}), { orderedRef:
|
|
90
|
+
}), { orderedRef: A, groupsRef: F, restRef: G } = yo(Y, "group"), K = i(() => k.value ? void 0 : "0"), B = (o) => {
|
|
94
91
|
var r;
|
|
95
|
-
|
|
96
|
-
},
|
|
97
|
-
|
|
98
|
-
}, J = () =>
|
|
92
|
+
C("update:modelValue", o), e.search = "", e.open = !1, (r = s == null ? void 0 : s.value) == null || r.focus();
|
|
93
|
+
}, Q = (o) => {
|
|
94
|
+
B(o);
|
|
95
|
+
}, J = () => C("update:modelValue", void 0), W = () => {
|
|
99
96
|
var o;
|
|
100
|
-
return (o =
|
|
101
|
-
},
|
|
97
|
+
return (o = g.value) == null ? void 0 : o.focus();
|
|
98
|
+
}, X = () => {
|
|
102
99
|
e.open = !e.open, e.open || (e.search = "");
|
|
103
|
-
},
|
|
100
|
+
}, Z = () => e.open = !0, oo = (o) => {
|
|
104
101
|
var r, n, m;
|
|
105
|
-
const
|
|
106
|
-
!((r =
|
|
102
|
+
const f = o.relatedTarget;
|
|
103
|
+
!((r = s.value) != null && r.contains(f)) && !((m = (n = _.value) == null ? void 0 : n.listRef) != null && m.contains(f)) && (e.search = "", e.open = !1);
|
|
107
104
|
}, eo = (o) => {
|
|
108
105
|
var r, n;
|
|
109
106
|
if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(o.code))
|
|
110
107
|
o.preventDefault();
|
|
111
108
|
else
|
|
112
109
|
return;
|
|
113
|
-
const { open: m, activeIndex:
|
|
110
|
+
const { open: m, activeIndex: f } = e;
|
|
114
111
|
if (!m) {
|
|
115
112
|
o.code === "Enter" && (e.open = !0);
|
|
116
113
|
return;
|
|
117
114
|
}
|
|
118
|
-
o.code === "Escape" && (e.open = !1, (r =
|
|
119
|
-
const x =
|
|
115
|
+
o.code === "Escape" && (e.open = !1, (r = s.value) == null || r.focus());
|
|
116
|
+
const x = A.value, { length: y } = x;
|
|
120
117
|
if (!y)
|
|
121
118
|
return;
|
|
122
|
-
o.code === "Enter" &&
|
|
123
|
-
const ro = x.findIndex((
|
|
119
|
+
o.code === "Enter" && B((n = x.find((V) => V.index === f)) == null ? void 0 : n.value);
|
|
120
|
+
const ro = x.findIndex((V) => V.index === f) ?? -1, to = o.code === "ArrowDown" ? 1 : o.code === "ArrowUp" ? -1 : 0, lo = Math.abs(ro + to + y) % y;
|
|
124
121
|
e.activeIndex = x[lo].index ?? -1;
|
|
125
122
|
};
|
|
126
|
-
return mo(
|
|
123
|
+
return mo(s), N(() => t.modelValue, U, { immediate: !0 }), N(
|
|
127
124
|
() => e.open,
|
|
128
125
|
(o) => {
|
|
129
126
|
var r;
|
|
130
|
-
return o ? (r =
|
|
127
|
+
return o ? (r = g.value) == null ? void 0 : r.focus() : "";
|
|
131
128
|
}
|
|
132
|
-
),
|
|
129
|
+
), po(() => {
|
|
133
130
|
var o;
|
|
134
131
|
e.search, e.activeIndex >= 0 && e.open && ((o = _.value) == null || o.scrollIntoActive());
|
|
135
|
-
}), (o, r) => (l(),
|
|
132
|
+
}), (o, r) => (l(), u("div", {
|
|
136
133
|
class: "pl-dropdown__envelope",
|
|
137
|
-
onClick:
|
|
134
|
+
onClick: W
|
|
138
135
|
}, [
|
|
139
|
-
|
|
136
|
+
c("div", {
|
|
140
137
|
ref_key: "rootRef",
|
|
141
|
-
ref:
|
|
142
|
-
tabindex:
|
|
143
|
-
class:
|
|
138
|
+
ref: s,
|
|
139
|
+
tabindex: K.value,
|
|
140
|
+
class: so(["pl-dropdown", { open: e.open, error: o.error, disabled: k.value }]),
|
|
144
141
|
onKeydown: eo,
|
|
145
142
|
onFocusout: oo
|
|
146
143
|
}, [
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
co(
|
|
144
|
+
c("div", zo, [
|
|
145
|
+
c("div", Io, [
|
|
146
|
+
co(c("input", {
|
|
150
147
|
ref_key: "input",
|
|
151
|
-
ref:
|
|
148
|
+
ref: g,
|
|
152
149
|
"onUpdate:modelValue": r[0] || (r[0] = (n) => e.search = n),
|
|
153
150
|
type: "text",
|
|
154
151
|
tabindex: "-1",
|
|
155
152
|
disabled: k.value,
|
|
156
|
-
placeholder:
|
|
153
|
+
placeholder: j.value,
|
|
157
154
|
spellcheck: "false",
|
|
158
155
|
autocomplete: "chrome-off",
|
|
159
|
-
onFocus:
|
|
160
|
-
}, null, 40,
|
|
156
|
+
onFocus: Z
|
|
157
|
+
}, null, 40, Co), [
|
|
161
158
|
[uo, e.search]
|
|
162
159
|
]),
|
|
163
|
-
e.open ? d("", !0) : (l(),
|
|
164
|
-
|
|
165
|
-
default:
|
|
166
|
-
|
|
160
|
+
e.open ? d("", !0) : (l(), u("div", Eo, [
|
|
161
|
+
T(xo, null, {
|
|
162
|
+
default: O(() => [
|
|
163
|
+
fo(v($.value), 1)
|
|
167
164
|
]),
|
|
168
165
|
_: 1
|
|
169
166
|
})
|
|
170
167
|
])),
|
|
171
|
-
|
|
172
|
-
|
|
168
|
+
c("div", Lo, [
|
|
169
|
+
w.value ? (l(), p(a(M), {
|
|
173
170
|
key: 0,
|
|
174
171
|
name: "loading"
|
|
175
172
|
})) : d("", !0),
|
|
176
|
-
o.clearable &&
|
|
173
|
+
o.clearable && P.value ? (l(), p(a(I), {
|
|
177
174
|
key: 1,
|
|
178
175
|
class: "clear",
|
|
179
176
|
name: "delete-clear",
|
|
180
|
-
onClick:
|
|
177
|
+
onClick: H(J, ["stop"])
|
|
181
178
|
})) : d("", !0),
|
|
182
|
-
|
|
183
|
-
|
|
179
|
+
S(o.$slots, "append"),
|
|
180
|
+
c("div", {
|
|
184
181
|
class: "pl-dropdown__arrow-wrapper",
|
|
185
|
-
onClick:
|
|
182
|
+
onClick: H(X, ["stop"])
|
|
186
183
|
}, [
|
|
187
|
-
o.arrowIconLarge ? (l(), a(
|
|
184
|
+
o.arrowIconLarge ? (l(), p(a(M), {
|
|
188
185
|
key: 0,
|
|
189
|
-
|
|
190
|
-
|
|
186
|
+
name: o.arrowIconLarge,
|
|
187
|
+
class: "arrow-icon"
|
|
188
|
+
}, null, 8, ["name"])) : o.arrowIcon ? (l(), p(a(I), {
|
|
191
189
|
key: 1,
|
|
192
|
-
|
|
193
|
-
|
|
190
|
+
name: o.arrowIcon,
|
|
191
|
+
class: "arrow-icon"
|
|
192
|
+
}, null, 8, ["name"])) : (l(), p(a(I), {
|
|
193
|
+
key: 2,
|
|
194
|
+
name: "chevron-down",
|
|
195
|
+
class: "arrow-icon arrow-icon-default"
|
|
196
|
+
}))
|
|
194
197
|
])
|
|
195
198
|
])
|
|
196
199
|
]),
|
|
197
|
-
o.label ? (l(),
|
|
198
|
-
o.required ? (l(),
|
|
199
|
-
|
|
200
|
-
|
|
200
|
+
o.label ? (l(), u("label", Ro, [
|
|
201
|
+
o.required ? (l(), p(go, { key: 0 })) : d("", !0),
|
|
202
|
+
c("span", null, v(o.label), 1),
|
|
203
|
+
o.$slots.tooltip ? (l(), p(a(ho), {
|
|
201
204
|
key: 1,
|
|
202
205
|
class: "info",
|
|
203
206
|
position: "top"
|
|
204
207
|
}, {
|
|
205
|
-
tooltip:
|
|
206
|
-
|
|
208
|
+
tooltip: O(() => [
|
|
209
|
+
S(o.$slots, "tooltip")
|
|
207
210
|
]),
|
|
208
211
|
_: 3
|
|
209
212
|
})) : d("", !0)
|
|
210
213
|
])) : d("", !0),
|
|
211
|
-
e.open ? (l(),
|
|
214
|
+
e.open ? (l(), p(ko, {
|
|
212
215
|
key: 1,
|
|
213
216
|
ref_key: "optionListRef",
|
|
214
217
|
ref: _,
|
|
215
|
-
"root-ref":
|
|
216
|
-
groups:
|
|
217
|
-
rest:
|
|
218
|
+
"root-ref": s.value,
|
|
219
|
+
groups: a(F),
|
|
220
|
+
rest: a(G),
|
|
218
221
|
"option-size": o.optionSize,
|
|
219
|
-
"select-option":
|
|
222
|
+
"select-option": Q
|
|
220
223
|
}, null, 8, ["root-ref", "groups", "rest", "option-size"])) : d("", !0),
|
|
221
|
-
|
|
224
|
+
T(wo, { class: "pl-dropdown__contour" })
|
|
222
225
|
])
|
|
223
226
|
], 42, Vo),
|
|
224
|
-
|
|
227
|
+
L.value ? (l(), u("div", $o, v(L.value), 1)) : w.value && o.loadingOptionsHelper ? (l(), u("div", Ao, v(o.loadingOptionsHelper), 1)) : o.helper ? (l(), u("div", Bo, v(o.helper), 1)) : d("", !0)
|
|
225
228
|
]));
|
|
226
229
|
}
|
|
227
230
|
});
|
|
228
231
|
export {
|
|
229
|
-
|
|
232
|
+
Qo as default
|
|
230
233
|
};
|
|
231
234
|
//# sourceMappingURL=PlDropdown.vue.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlDropdown.vue.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlDropdown/PlDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n name: 'PlDropdown',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport './pl-dropdown.scss';\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport { tap } from '../../helpers/functions';\nimport { PlTooltip } from '../PlTooltip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport type { ListOption, ListOptionNormalized } from '../../types';\nimport { deepEqual } from '../../helpers/objects';\nimport LongText from '../LongText.vue';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport OptionList from './OptionList.vue';\nimport { useGroupBy } from './useGroupBy';\nimport type { LOption } from './types';\n\nconst emit = defineEmits<{\n /**\n * Emitted when the model value is updated.\n */\n (e: 'update:modelValue', value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n defineProps<{\n /**\n * The current selected value of the dropdown.\n */\n modelValue: M;\n /**\n * The label text for the dropdown field (optional)\n */\n label?: string;\n /**\n * List of available options for the dropdown\n */\n options?: Readonly<ListOption<M>[]>;\n /**\n * A helper text displayed below the dropdown when there are no errors (optional).\n */\n helper?: string;\n /**\n * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n */\n loadingOptionsHelper?: string;\n /**\n * Error message displayed below the dropdown (optional)\n */\n error?: unknown;\n /**\n * Placeholder text shown when no value is selected.\n */\n placeholder?: string;\n /**\n * Enables a button to clear the selected value (default: false)\n */\n clearable?: boolean;\n /**\n * If `true`, the dropdown component is marked as required.\n */\n required?: boolean;\n /**\n * If `true`, the dropdown component is disabled and cannot be interacted with.\n */\n disabled?: boolean;\n /**\n * Custom icon (16px) class for the dropdown arrow (optional)\n */\n arrowIcon?: string;\n /**\n * Custom icon (24px) class for the dropdown arrow (optional)\n */\n arrowIconLarge?: string;\n /**\n * Option list item size\n */\n optionSize?: 'small' | 'medium';\n }>(),\n {\n label: '',\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n placeholder: '...',\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n arrowIconLarge: undefined,\n optionSize: 'small',\n options: undefined,\n },\n);\n\nconst slots = defineSlots<{\n [key: string]: unknown;\n}>();\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst optionListRef = useTemplateRef<InstanceType<typeof OptionList>>('optionListRef');\n\nconst data = reactive({\n search: '',\n activeIndex: -1,\n open: false,\n optionsHeight: 0,\n});\n\nconst findActiveIndex = () =>\n tap(\n orderedRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n (v) => (v < 0 ? 0 : v),\n );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst isLoadingOptions = computed(() => {\n return props.options === undefined;\n});\n\nconst isDisabled = computed(() => {\n if (isLoadingOptions.value) {\n return true;\n }\n\n return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\n});\n\nconst computedError = computed(() => {\n if (isLoadingOptions.value) {\n return undefined;\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n if (props.modelValue !== undefined && selectedIndex.value === -1) {\n return 'The selected value is not one of the options';\n }\n\n return undefined;\n});\n\nconst optionsRef = computed<LOption<M>[]>(() =>\n normalizeListOptions(props.options ?? []).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n })),\n);\n\nconst textValue = computed(() => {\n const options = unref(optionsRef);\n\n const item: ListOption | undefined = options.find((o) => deepEqual(o.value, props.modelValue));\n\n return item?.label || props.modelValue; // @todo show inner value?\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && props.modelValue !== undefined) {\n return '';\n }\n\n return props.modelValue ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst filteredRef = computed(() => {\n const options = optionsRef.value;\n\n if (data.search) {\n return options.filter((o: ListOptionNormalized) => {\n const search = data.search.toLowerCase();\n\n if (o.label.toLowerCase().includes(search)) {\n return true;\n }\n\n if (o.description && o.description.toLowerCase().includes(search)) {\n return true;\n }\n\n if (typeof o.value === 'string') {\n return o.value.toLowerCase().includes(search);\n }\n\n return o.value === data.search;\n });\n }\n\n return options;\n});\n\nconst { orderedRef, groupsRef, restRef } = useGroupBy(filteredRef, 'group');\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst selectOption = (v: M | undefined) => {\n emit('update:modelValue', v);\n data.search = '';\n data.open = false;\n rootRef?.value?.focus();\n};\n\nconst selectOptionWrapper = (v: unknown) => {\n selectOption(v as M | undefined);\n};\n\nconst clear = () => emit('update:modelValue', undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n data.open = !data.open;\n if (!data.open) {\n data.search = '';\n }\n};\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node | null;\n\n if (!rootRef.value?.contains(relatedTarget) && !optionListRef.value?.listRef?.contains(relatedTarget)) {\n data.search = '';\n data.open = false;\n }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {\n return;\n } else {\n e.preventDefault();\n }\n\n const { open, activeIndex } = data;\n\n if (!open) {\n if (e.code === 'Enter') {\n data.open = true;\n }\n return;\n }\n\n if (e.code === 'Escape') {\n data.open = false;\n rootRef.value?.focus();\n }\n\n const ordered = orderedRef.value;\n\n const { length } = ordered;\n\n if (!length) {\n return;\n }\n\n if (e.code === 'Enter') {\n selectOption(ordered.find((it) => it.index === activeIndex)?.value);\n }\n\n const localIndex = ordered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n const newIndex = Math.abs(localIndex + delta + length) % length;\n\n data.activeIndex = ordered[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => props.modelValue, updateActive, { immediate: true });\n\nwatch(\n () => data.open,\n (open) => (open ? input.value?.focus() : ''),\n);\n\nwatchPostEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n data.search; // to watch\n\n if (data.activeIndex >= 0 && data.open) {\n optionListRef.value?.scrollIntoActive();\n }\n});\n</script>\n\n<template>\n <div class=\"pl-dropdown__envelope\" @click=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-dropdown\"\n :class=\"{ open: data.open, error, disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-dropdown__container\">\n <div class=\"pl-dropdown__field\">\n <input\n ref=\"input\"\n v-model=\"data.search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"computedPlaceholder\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"onInputFocus\"\n />\n\n <div v-if=\"!data.open\" class=\"input-value\">\n <LongText> {{ textValue }} </LongText>\n </div>\n\n <div class=\"pl-dropdown__controls\">\n <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n <PlIcon16 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n <slot name=\"append\" />\n <div class=\"pl-dropdown__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <div v-if=\"arrowIconLarge\" class=\"arrow-icon\" :class=\"[`icon-24 ${arrowIconLarge}`]\" />\n <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" />\n <div v-else class=\"arrow-icon arrow-icon-default\" />\n </div>\n </div>\n </div>\n <label v-if=\"label\">\n <SvgRequired v-if=\"required\" />\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <OptionList\n v-if=\"data.open\"\n ref=\"optionListRef\"\n :root-ref=\"rootRef!\"\n :groups=\"groupsRef\"\n :rest=\"restRef\"\n :option-size=\"optionSize\"\n :select-option=\"selectOptionWrapper\"\n />\n <DoubleContour class=\"pl-dropdown__contour\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-dropdown__error\">{{ computedError }}</div>\n <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-dropdown__helper\">{{ loadingOptionsHelper }}</div>\n <div v-else-if=\"helper\" class=\"pl-dropdown__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"names":["ze","emit","_useSlots","T","F","b","r","N","se","i","D","w","ae","o","ie","findActiveIndex","orderedRef","v","fe","computed","e","q","P","h","s","k","V","I","L","getErrorMessage","props","Ie","C","opt","index","t","E","data","l","H","U","K","search","options","useGroupBy","tabindex","selectOption","Ve","j","_a","clear","Q","input","X","onInputFocus","Z","ee","rootRef","p","oe","x","A","length","c","localIndex","O","y","te","re","ne","useLabelNotch","he","S"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PlDropdown.vue.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlDropdown/PlDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n name: 'PlDropdown',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport './pl-dropdown.scss';\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport { tap } from '../../helpers/functions';\nimport { PlTooltip } from '../PlTooltip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from '../../types';\nimport { deepEqual } from '../../helpers/objects';\nimport LongText from '../LongText.vue';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport OptionList from './OptionList.vue';\nimport { useGroupBy } from './useGroupBy';\nimport type { LOption } from './types';\n\nconst emit = defineEmits<{\n /**\n * Emitted when the model value is updated.\n */\n (e: 'update:modelValue', value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n defineProps<{\n /**\n * The current selected value of the dropdown.\n */\n modelValue: M;\n /**\n * The label text for the dropdown field (optional)\n */\n label?: string;\n /**\n * List of available options for the dropdown\n */\n options?: Readonly<ListOption<M>[]>;\n /**\n * A helper text displayed below the dropdown when there are no errors (optional).\n */\n helper?: string;\n /**\n * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n */\n loadingOptionsHelper?: string;\n /**\n * Error message displayed below the dropdown (optional)\n */\n error?: unknown;\n /**\n * Placeholder text shown when no value is selected.\n */\n placeholder?: string;\n /**\n * Enables a button to clear the selected value (default: false)\n */\n clearable?: boolean;\n /**\n * If `true`, the dropdown component is marked as required.\n */\n required?: boolean;\n /**\n * If `true`, the dropdown component is disabled and cannot be interacted with.\n */\n disabled?: boolean;\n /**\n * Custom icon (16px) class for the dropdown arrow (optional)\n */\n arrowIcon?: MaskIconName16;\n /**\n * Custom icon (24px) class for the dropdown arrow (optional)\n */\n arrowIconLarge?: MaskIconName24;\n /**\n * Option list item size\n */\n optionSize?: 'small' | 'medium';\n }>(),\n {\n label: '',\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n placeholder: '...',\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n arrowIconLarge: undefined,\n optionSize: 'small',\n options: undefined,\n },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst optionListRef = useTemplateRef<InstanceType<typeof OptionList>>('optionListRef');\n\nconst data = reactive({\n search: '',\n activeIndex: -1,\n open: false,\n optionsHeight: 0,\n});\n\nconst findActiveIndex = () =>\n tap(\n orderedRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n (v) => (v < 0 ? 0 : v),\n );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst isLoadingOptions = computed(() => {\n return props.options === undefined;\n});\n\nconst isDisabled = computed(() => {\n if (isLoadingOptions.value) {\n return true;\n }\n\n return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\n});\n\nconst computedError = computed(() => {\n if (isLoadingOptions.value) {\n return undefined;\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n if (props.modelValue !== undefined && selectedIndex.value === -1) {\n return 'The selected value is not one of the options';\n }\n\n return undefined;\n});\n\nconst optionsRef = computed<LOption<M>[]>(() =>\n normalizeListOptions(props.options ?? []).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n })),\n);\n\nconst textValue = computed(() => {\n const options = unref(optionsRef);\n\n const item: ListOption | undefined = options.find((o) => deepEqual(o.value, props.modelValue));\n\n return item?.label || props.modelValue; // @todo show inner value?\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && props.modelValue !== undefined) {\n return '';\n }\n\n return props.modelValue ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst filteredRef = computed(() => {\n const options = optionsRef.value;\n\n if (data.search) {\n return options.filter((o: ListOptionNormalized) => {\n const search = data.search.toLowerCase();\n\n if (o.label.toLowerCase().includes(search)) {\n return true;\n }\n\n if (o.description && o.description.toLowerCase().includes(search)) {\n return true;\n }\n\n if (typeof o.value === 'string') {\n return o.value.toLowerCase().includes(search);\n }\n\n return o.value === data.search;\n });\n }\n\n return options;\n});\n\nconst { orderedRef, groupsRef, restRef } = useGroupBy(filteredRef, 'group');\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst selectOption = (v: M | undefined) => {\n emit('update:modelValue', v);\n data.search = '';\n data.open = false;\n rootRef?.value?.focus();\n};\n\nconst selectOptionWrapper = (v: unknown) => {\n selectOption(v as M | undefined);\n};\n\nconst clear = () => emit('update:modelValue', undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n data.open = !data.open;\n if (!data.open) {\n data.search = '';\n }\n};\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node | null;\n\n if (!rootRef.value?.contains(relatedTarget) && !optionListRef.value?.listRef?.contains(relatedTarget)) {\n data.search = '';\n data.open = false;\n }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {\n return;\n } else {\n e.preventDefault();\n }\n\n const { open, activeIndex } = data;\n\n if (!open) {\n if (e.code === 'Enter') {\n data.open = true;\n }\n return;\n }\n\n if (e.code === 'Escape') {\n data.open = false;\n rootRef.value?.focus();\n }\n\n const ordered = orderedRef.value;\n\n const { length } = ordered;\n\n if (!length) {\n return;\n }\n\n if (e.code === 'Enter') {\n selectOption(ordered.find((it) => it.index === activeIndex)?.value);\n }\n\n const localIndex = ordered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n const newIndex = Math.abs(localIndex + delta + length) % length;\n\n data.activeIndex = ordered[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => props.modelValue, updateActive, { immediate: true });\n\nwatch(\n () => data.open,\n (open) => (open ? input.value?.focus() : ''),\n);\n\nwatchPostEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n data.search; // to watch\n\n if (data.activeIndex >= 0 && data.open) {\n optionListRef.value?.scrollIntoActive();\n }\n});\n</script>\n\n<template>\n <div class=\"pl-dropdown__envelope\" @click=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-dropdown\"\n :class=\"{ open: data.open, error, disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-dropdown__container\">\n <div class=\"pl-dropdown__field\">\n <input\n ref=\"input\"\n v-model=\"data.search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"computedPlaceholder\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"onInputFocus\"\n />\n\n <div v-if=\"!data.open\" class=\"input-value\">\n <LongText> {{ textValue }} </LongText>\n </div>\n\n <div class=\"pl-dropdown__controls\">\n <PlIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n <PlIcon16 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n <slot name=\"append\" />\n <div class=\"pl-dropdown__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <PlIcon24 v-if=\"arrowIconLarge\" :name=\"arrowIconLarge\" class=\"arrow-icon\" />\n <PlIcon16 v-else-if=\"arrowIcon\" :name=\"arrowIcon\" class=\"arrow-icon\" />\n <PlIcon16 v-else name=\"chevron-down\" class=\"arrow-icon arrow-icon-default\" />\n </div>\n </div>\n </div>\n <label v-if=\"label\">\n <SvgRequired v-if=\"required\" />\n <span>{{ label }}</span>\n <PlTooltip v-if=\"$slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <OptionList\n v-if=\"data.open\"\n ref=\"optionListRef\"\n :root-ref=\"rootRef!\"\n :groups=\"groupsRef\"\n :rest=\"restRef\"\n :option-size=\"optionSize\"\n :select-option=\"selectOptionWrapper\"\n />\n <DoubleContour class=\"pl-dropdown__contour\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-dropdown__error\">{{ computedError }}</div>\n <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-dropdown__helper\">{{ loadingOptionsHelper }}</div>\n <div v-else-if=\"helper\" class=\"pl-dropdown__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"names":["Be","emit","F","N","b","r","i","D","w","ae","o","se","findActiveIndex","orderedRef","v","fe","computed","e","q","P","h","a","k","V","g","getErrorMessage","props","ye","C","opt","index","t","E","data","l","H","U","K","search","options","useGroupBy","tabindex","selectOption","Ie","j","_a","clear","Q","input","X","onInputFocus","ee","rootRef","f","oe","x","A","length","c","R","localIndex","O","y","te","re","ne","useLabelNotch","he","B"],"mappings":"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"}
|