@milaboratories/uikit 2.6.1 → 2.6.3

package/dist/components/PlDropdown/PlDropdown.vue.js

@@ -1,38 +1,40 @@
-(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.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%}}
+(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-right-radius:0;border-top-left-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.double-contour.top-right>div{border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0}.double-contour.bottom-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.double-contour.bottom-right>div{border-top-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0}.double-contour.middle>div{border-radius:0}
+.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(--v5deba9de) 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%}}
 .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{--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)}`)),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
-import { defineComponent as le, ref as D, useTemplateRef as ae, reactive as se, computed as s, unref as a, watch as S, watchPostEffect as ie, createElementBlock as m, openBlock as n, createElementVNode as p, createCommentVNode as d, normalizeClass as de, createBlock as u, createVNode as B, withDirectives as ue, vModelText as ce, withCtx as z, createTextVNode as pe, toDisplayString as v, renderSlot as M, withModifiers as P } from "vue";
+import { defineComponent as le, ref as B, useTemplateRef as ae, reactive as ie, computed as s, unref as i, watch as P, watchPostEffect as se, createElementBlock as v, openBlock as l, createElementVNode as f, createCommentVNode as c, normalizeClass as de, createBlock as u, createVNode as D, withDirectives as ce, vModelText as ue, withCtx as $, createTextVNode as pe, toDisplayString as h, renderSlot as z, withModifiers as M } from "vue";
 import fe from "../../assets/images/required.svg.js";
 import { getErrorMessage as me } from "../../helpers/error.js";
 import { tap as ve } from "../../helpers/functions.js";
-import { deepEqual as y } from "../../helpers/objects.js";
+import { deepEqual as x } from "../../helpers/objects.js";
 import { normalizeListOptions as he } from "../../helpers/utils.js";
 import we from "../../utils/DoubleContour.vue.js";
-import { useLabelNotch as _e } from "../../utils/useLabelNotch.js";
-import ge from "../LongText.vue.js";
 
-import I from "../PlIcon16/PlIcon16.vue.js";
+import { useLabelNotch as ge } from "../../utils/useLabelNotch.js";
+import ye from "../LongText.vue.js";
+
+import _ from "../PlIcon16/PlIcon16.vue.js";
 import T from "../PlIcon24/PlIcon24.vue.js";
 import ke from "../PlSvg/PlSvg.vue.js";
-import ye from "../PlTooltip/PlTooltip.vue.js";
-import Ie from "./OptionList.vue.js";
+import Ie from "../PlTooltip/PlTooltip.vue.js";
+import xe from "./OptionList.vue.js";
 
-import { useGroupBy as be } from "./useGroupBy.js";
-const Ve = ["tabindex"], Le = { class: "pl-dropdown__container" }, Ce = { class: "pl-dropdown__field" }, Ee = ["disabled", "placeholder"], Re = {
+import { useGroupBy as _e } from "./useGroupBy.js";
+const Ve = ["tabindex"], be = { class: "pl-dropdown__container" }, Le = { class: "pl-dropdown__field" }, Ce = ["disabled", "placeholder"], Ee = {
   key: 0,
   class: "input-value"
-}, Oe = { class: "pl-dropdown__controls" }, xe = { key: 0 }, Ae = {
+}, Re = { class: "pl-dropdown__controls" }, Oe = { key: 0 }, Se = {
   key: 0,
   class: "pl-dropdown__error"
-}, De = {
+}, Ae = {
   key: 1,
   class: "pl-dropdown__helper"
-}, Se = {
+}, Be = {
   key: 2,
   class: "pl-dropdown__helper"
-}, Be = {
+}, Pe = {
   name: "PlDropdown"
-}, Ye = /* @__PURE__ */ le({
-  ...Be,
+}, Ze = /* @__PURE__ */ le({
+  ...Pe,
   props: {
     modelValue: {},
     label: { default: "" },
@@ -40,150 +42,152 @@ const Ve = ["tabindex"], Le = { class: "pl-dropdown__container" }, Ce = { class:
     helper: { default: void 0 },
     loadingOptionsHelper: { default: void 0 },
     error: { default: void 0 },
+    errorStatus: { type: Boolean },
     placeholder: { default: "..." },
     clearable: { type: Boolean, default: !1 },
     required: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
     arrowIcon: { default: void 0 },
     arrowIconLarge: { default: void 0 },
-    optionSize: { default: "small" }
+    optionSize: { default: "small" },
+    groupPosition: { default: void 0 }
   },
   emits: ["update:modelValue"],
-  setup($, { emit: F }) {
-    const b = F, r = $, i = D(), w = D(), _ = ae("optionListRef"), o = se({
+  setup(n, { emit: F }) {
+    const V = F, r = n, d = B(), g = B(), y = ae("optionListRef"), o = ie({
       search: "",
       activeIndex: -1,
       open: !1,
       optionsHeight: 0
     }), N = () => ve(
-      R.value.findIndex((e) => y(e.value, r.modelValue)),
+      R.value.findIndex((e) => x(e.value, r.modelValue)),
       (e) => e < 0 ? 0 : e
-    ), q = () => o.activeIndex = N(), h = s(() => r.options === void 0), g = s(() => h.value ? !0 : r.disabled), V = s(() => (r.options ?? []).findIndex((e) => y(e.value, r.modelValue))), L = s(() => {
-      if (!h.value) {
+    ), q = () => o.activeIndex = N(), w = s(() => r.options === void 0), k = s(() => w.value ? !0 : r.disabled), b = s(() => (r.options ?? []).findIndex((e) => x(e.value, r.modelValue))), L = s(() => {
+      if (!w.value) {
         if (r.error)
           return me(r.error);
-        if (r.modelValue !== void 0 && V.value === -1)
+        if (r.modelValue !== void 0 && b.value === -1)
           return "The selected value is not one of the options";
       }
     }), C = s(
       () => he(r.options ?? []).map((e, t) => ({
         ...e,
         index: t,
-        isSelected: t === V.value,
+        isSelected: t === b.value,
         isActive: t === o.activeIndex
       }))
     ), E = s(() => {
-      const t = a(C).find((l) => y(l.value, r.modelValue));
+      const t = i(C).find((a) => x(a.value, r.modelValue));
       return (t == null ? void 0 : t.label) || r.modelValue;
     }), H = s(() => !o.open && r.modelValue !== void 0 ? "" : r.modelValue ? String(E.value) : r.placeholder), U = s(() => r.modelValue !== void 0 && r.modelValue !== null), K = s(() => {
       const e = C.value;
       return o.search ? e.filter((t) => {
-        const l = o.search.toLowerCase();
-        return t.label.toLowerCase().includes(l) || t.description && t.description.toLowerCase().includes(l) ? !0 : typeof t.value == "string" ? t.value.toLowerCase().includes(l) : t.value === o.search;
+        const a = o.search.toLowerCase();
+        return t.label.toLowerCase().includes(a) || t.description && t.description.toLowerCase().includes(a) ? !0 : typeof t.value == "string" ? t.value.toLowerCase().includes(a) : t.value === o.search;
       }) : e;
-    }), { orderedRef: R, groupsRef: G, restRef: W } = be(K, "group"), j = s(() => g.value ? void 0 : "0"), O = (e) => {
+    }), { orderedRef: R, groupsRef: G, restRef: W } = _e(K, "group"), j = s(() => k.value ? void 0 : "0"), O = (e) => {
       var t;
-      b("update:modelValue", e), o.search = "", o.open = !1, (t = i == null ? void 0 : i.value) == null || t.focus();
+      V("update:modelValue", e), o.search = "", o.open = !1, (t = d == null ? void 0 : d.value) == null || t.focus();
     }, J = (e) => {
       O(e);
-    }, Q = () => b("update:modelValue", void 0), X = () => {
+    }, Q = () => V("update:modelValue", void 0), X = () => {
       var e;
-      return (e = w.value) == null ? void 0 : e.focus();
+      return (e = g.value) == null ? void 0 : e.focus();
     }, Y = () => {
       o.open = !o.open, o.open || (o.search = "");
     }, Z = () => o.open = !0, ee = (e) => {
-      var l, c, f;
+      var a, p, m;
       const t = e.relatedTarget;
-      !((l = i.value) != null && l.contains(t)) && !((f = (c = _.value) == null ? void 0 : c.listRef) != null && f.contains(t)) && (o.search = "", o.open = !1);
+      !((a = d.value) != null && a.contains(t)) && !((m = (p = y.value) == null ? void 0 : p.listRef) != null && m.contains(t)) && (o.search = "", o.open = !1);
     }, oe = (e) => {
-      var x, A;
+      var S, A;
       if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.code))
         e.preventDefault();
       else
         return;
-      const { open: t, activeIndex: l } = o;
+      const { open: t, activeIndex: a } = o;
       if (!t) {
         e.code === "Enter" && (o.open = !0);
         return;
       }
-      e.code === "Escape" && (o.open = !1, (x = i.value) == null || x.focus());
-      const c = R.value, { length: f } = c;
-      if (!f)
+      e.code === "Escape" && (o.open = !1, (S = d.value) == null || S.focus());
+      const p = R.value, { length: m } = p;
+      if (!m)
         return;
-      e.code === "Enter" && O((A = c.find((k) => k.index === l)) == null ? void 0 : A.value);
-      const te = c.findIndex((k) => k.index === l) ?? -1, re = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, ne = Math.abs(te + re + f) % f;
-      o.activeIndex = c[ne].index ?? -1;
+      e.code === "Enter" && O((A = p.find((I) => I.index === a)) == null ? void 0 : A.value);
+      const te = p.findIndex((I) => I.index === a) ?? -1, ne = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, re = Math.abs(te + ne + m) % m;
+      o.activeIndex = p[re].index ?? -1;
     };
-    return _e(i), S(() => r.modelValue, q, { immediate: !0 }), S(
+    return ge(d), P(() => r.modelValue, q, { immediate: !0 }), P(
       () => o.open,
       (e) => {
         var t;
-        return e ? (t = w.value) == null ? void 0 : t.focus() : "";
+        return e ? (t = g.value) == null ? void 0 : t.focus() : "";
       }
-    ), ie(() => {
+    ), se(() => {
       var e;
-      o.search, o.activeIndex >= 0 && o.open && ((e = _.value) == null || e.scrollIntoActive());
-    }), (e, t) => (n(), m("div", {
+      o.search, o.activeIndex >= 0 && o.open && ((e = y.value) == null || e.scrollIntoActive());
+    }), (e, t) => (l(), v("div", {
       class: "pl-dropdown__envelope",
       onClick: X
     }, [
-      p("div", {
+      f("div", {
         ref_key: "rootRef",
-        ref: i,
+        ref: d,
         tabindex: j.value,
-        class: de(["pl-dropdown", { open: o.open, error: e.error, disabled: g.value }]),
+        class: de(["pl-dropdown", { open: o.open, error: n.error || n.errorStatus, disabled: k.value }]),
         onKeydown: oe,
         onFocusout: ee
       }, [
-        p("div", Le, [
-          p("div", Ce, [
-            ue(p("input", {
+        f("div", be, [
+          f("div", Le, [
+            ce(f("input", {
               ref_key: "input",
-              ref: w,
-              "onUpdate:modelValue": t[0] || (t[0] = (l) => o.search = l),
+              ref: g,
+              "onUpdate:modelValue": t[0] || (t[0] = (a) => o.search = a),
               type: "text",
               tabindex: "-1",
-              disabled: g.value,
+              disabled: k.value,
               placeholder: H.value,
               spellcheck: "false",
               autocomplete: "chrome-off",
               onFocus: Z
-            }, null, 40, Ee), [
-              [ce, o.search]
+            }, null, 40, Ce), [
+              [ue, o.search]
             ]),
-            o.open ? d("", !0) : (n(), m("div", Re, [
-              B(ge, null, {
-                default: z(() => [
-                  pe(v(E.value), 1)
+            o.open ? c("", !0) : (l(), v("div", Ee, [
+              D(ye, null, {
+                default: $(() => [
+                  pe(h(E.value), 1)
                 ]),
                 _: 1
               })
             ])),
-            p("div", Oe, [
-              h.value ? (n(), u(a(T), {
+            f("div", Re, [
+              w.value ? (l(), u(i(T), {
                 key: 0,
                 name: "loading"
-              })) : d("", !0),
-              e.clearable && U.value ? (n(), u(a(I), {
+              })) : c("", !0),
+              n.clearable && U.value ? (l(), u(i(_), {
                 key: 1,
                 class: "clear",
                 name: "delete-clear",
-                onClick: P(Q, ["stop"])
-              })) : d("", !0),
-              M(e.$slots, "append"),
-              p("div", {
+                onClick: M(Q, ["stop"])
+              })) : c("", !0),
+              z(e.$slots, "append"),
+              f("div", {
                 class: "pl-dropdown__arrow-wrapper",
-                onClick: P(Y, ["stop"])
+                onClick: M(Y, ["stop"])
               }, [
-                e.arrowIconLarge ? (n(), u(a(T), {
+                n.arrowIconLarge ? (l(), u(i(T), {
                   key: 0,
-                  name: e.arrowIconLarge,
+                  name: n.arrowIconLarge,
                   class: "arrow-icon"
-                }, null, 8, ["name"])) : e.arrowIcon ? (n(), u(a(I), {
+                }, null, 8, ["name"])) : n.arrowIcon ? (l(), u(i(_), {
                   key: 1,
-                  name: e.arrowIcon,
+                  name: n.arrowIcon,
                   class: "arrow-icon"
-                }, null, 8, ["name"])) : (n(), u(a(I), {
+                }, null, 8, ["name"])) : (l(), u(i(_), {
                   key: 2,
                   name: "chevron-down",
                   class: "arrow-icon arrow-icon-default"
@@ -191,41 +195,44 @@ const Ve = ["tabindex"], Le = { class: "pl-dropdown__container" }, Ce = { class:
               ])
             ])
           ]),
-          e.label ? (n(), m("label", xe, [
-            e.required ? (n(), u(a(ke), {
+          n.label ? (l(), v("label", Oe, [
+            n.required ? (l(), u(i(ke), {
               key: 0,
-              uri: a(fe)
-            }, null, 8, ["uri"])) : d("", !0),
-            p("span", null, v(e.label), 1),
-            e.$slots.tooltip ? (n(), u(a(ye), {
+              uri: i(fe)
+            }, null, 8, ["uri"])) : c("", !0),
+            f("span", null, h(n.label), 1),
+            e.$slots.tooltip ? (l(), u(i(Ie), {
               key: 1,
               class: "info",
               position: "top"
             }, {
-              tooltip: z(() => [
-                M(e.$slots, "tooltip")
+              tooltip: $(() => [
+                z(e.$slots, "tooltip")
               ]),
               _: 3
-            })) : d("", !0)
-          ])) : d("", !0),
-          o.open ? (n(), u(Ie, {
+            })) : c("", !0)
+          ])) : c("", !0),
+          o.open ? (l(), u(xe, {
             key: 1,
             ref_key: "optionListRef",
-            ref: _,
-            "root-ref": i.value,
-            groups: a(G),
-            rest: a(W),
-            "option-size": e.optionSize,
+            ref: y,
+            "root-ref": d.value,
+            groups: i(G),
+            rest: i(W),
+            "option-size": n.optionSize,
             "select-option": J
-          }, null, 8, ["root-ref", "groups", "rest", "option-size"])) : d("", !0),
-          B(we, { class: "pl-dropdown__contour" })
+          }, null, 8, ["root-ref", "groups", "rest", "option-size"])) : c("", !0),
+          D(we, {
+            class: "pl-dropdown__contour",
+            "group-position": n.groupPosition
+          }, null, 8, ["group-position"])
         ])
       ], 42, Ve),
-      L.value ? (n(), m("div", Ae, v(L.value), 1)) : h.value && e.loadingOptionsHelper ? (n(), m("div", De, v(e.loadingOptionsHelper), 1)) : e.helper ? (n(), m("div", Se, v(e.helper), 1)) : d("", !0)
+      L.value ? (l(), v("div", Se, h(L.value), 1)) : w.value && n.loadingOptionsHelper ? (l(), v("div", Ae, h(n.loadingOptionsHelper), 1)) : n.helper ? (l(), v("div", Be, h(n.helper), 1)) : c("", !0)
     ]));
   }
 });
 export {
-  Ye as default
+  Ze as default
 };
 //# sourceMappingURL=PlDropdown.vue.js.map

package/dist/components/PlDropdown/PlDropdown.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdown.vue.js","sources":["../../../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 { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport SvgRequired from '../../assets/images/required.svg?raw';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport { tap } from '../../helpers/functions';\nimport { deepEqual } from '../../helpers/objects';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from '../../types';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport LongText from '../LongText.vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\nimport { PlSvg } from '../PlSvg';\nimport { PlTooltip } from '../PlTooltip';\nimport OptionList from './OptionList.vue';\nimport './pl-dropdown.scss';\nimport type { LOption } from './types';\nimport { useGroupBy } from './useGroupBy';\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          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\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":["__default__","emit","__emit","props","__props","rootRef","ref","input","optionListRef","useTemplateRef","data","reactive","findActiveIndex","tap","orderedRef","o","deepEqual","v","updateActive","isLoadingOptions","computed","isDisabled","selectedIndex","computedError","getErrorMessage","optionsRef","normalizeListOptions","opt","index","textValue","item","unref","computedPlaceholder","hasValue","filteredRef","options","search","groupsRef","restRef","useGroupBy","tabindex","selectOption","_a","selectOptionWrapper","clear","setFocusOnInput","toggleOpen","onInputFocus","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","open","activeIndex","ordered","length","it","localIndex","delta","newIndex","useLabelNotch","watch","watchPostEffect"],"mappings":"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"}
+{"version":3,"file":"PlDropdown.vue.js","sources":["../../../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 { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport SvgRequired from '../../assets/images/required.svg?raw';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport { tap } from '../../helpers/functions';\nimport { deepEqual } from '../../helpers/objects';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from '../../types';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport LongText from '../LongText.vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\nimport { PlSvg } from '../PlSvg';\nimport { PlTooltip } from '../PlTooltip';\nimport OptionList from './OptionList.vue';\nimport './pl-dropdown.scss';\nimport type { LOption } from './types';\nimport { useGroupBy } from './useGroupBy';\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     * Shows red border even without an error message\n     */\n    errorStatus?: boolean;\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     * Makes some of corners not rounded\n     * */\n    groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';\n  }>(),\n  {\n    label: '',\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    showErrorMessage: true,\n    placeholder: '...',\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    arrowIconLarge: undefined,\n    optionSize: 'small',\n    options: undefined,\n    groupPosition: 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: error || errorStatus, 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          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\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\" :group-position=\"groupPosition\" />\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":["__default__","emit","__emit","props","__props","rootRef","ref","input","optionListRef","useTemplateRef","data","reactive","findActiveIndex","tap","orderedRef","o","deepEqual","v","updateActive","isLoadingOptions","computed","isDisabled","selectedIndex","computedError","getErrorMessage","optionsRef","normalizeListOptions","opt","index","textValue","item","unref","computedPlaceholder","hasValue","filteredRef","options","search","groupsRef","restRef","useGroupBy","tabindex","selectOption","_a","selectOptionWrapper","clear","setFocusOnInput","toggleOpen","onInputFocus","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","open","activeIndex","ordered","length","it","localIndex","delta","newIndex","useLabelNotch","watch","watchPostEffect","_createElementBlock","_createElementVNode","_normalizeClass","_hoisted_2","_hoisted_3","_cache","$event","_vModelText","_openBlock","_hoisted_5","_createVNode","LongText","_hoisted_6","_createBlock","_unref","PlIcon24","PlIcon16","_renderSlot","_ctx","_hoisted_7","PlSvg","SvgRequired","$slots","PlTooltip","OptionList","DoubleContour","_hoisted_8","_toDisplayString","_hoisted_9","_hoisted_10"],"mappings":"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"}