@milaboratories/uikit 2.2.95 → 2.2.97

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

@@ -1,43 +1,40 @@
-(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.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 .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{--icon-color: var(--control-mask-fill);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;background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.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{background-color:var(--control-mask-fill);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);--control-mask-fill: 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)}
+(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.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{--icon-color: var(--control-mask-fill);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;background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.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{background-color:var(--control-mask-fill);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);--control-mask-fill: 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)}
 .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(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
-import { defineComponent as oe, useSlots as te, ref as z, useTemplateRef as ne, reactive as le, computed as s, unref as f, watch as B, watchPostEffect as re, createElementBlock as a, openBlock as r, createElementVNode as p, createCommentVNode as i, normalizeClass as g, createBlock as v, createVNode as F, withDirectives as ae, vModelText as se, withCtx as I, createTextVNode as ie, toDisplayString as h, renderSlot as M, withModifiers as b, Fragment as de, renderList as ce } from "vue";
+import { defineComponent as le, useSlots as se, ref as D, useTemplateRef as ae, reactive as ie, computed as s, unref as f, watch as S, watchPostEffect as de, createElementBlock as a, openBlock as n, createElementVNode as u, createCommentVNode as d, normalizeClass as g, createBlock as v, createVNode as B, withDirectives as ce, vModelText as ue, withCtx as $, createTextVNode as pe, toDisplayString as m, renderSlot as z, withModifiers as M } from "vue";
 
-import { tap as ue } from "../../helpers/functions.js";
-import pe from "../PlTooltip/PlTooltip.vue.js";
-import fe from "../../utils/DoubleContour.vue.js";
-import { useLabelNotch as ve } from "../../utils/useLabelNotch.js";
-import { deepEqual as V } from "../../helpers/objects.js";
-import me from "../DropdownListItem.vue.js";
-import he from "../LongText.vue.js";
+import { tap as fe } from "../../helpers/functions.js";
+import ve from "../PlTooltip/PlTooltip.vue.js";
+import me from "../../utils/DoubleContour.vue.js";
+import { useLabelNotch as he } from "../../utils/useLabelNotch.js";
+import { deepEqual as I } from "../../helpers/objects.js";
+import we from "../LongText.vue.js";
 
 import { normalizeListOptions as _e } from "../../helpers/utils.js";
-import we from "../PlIcon16/PlIcon16.vue.js";
-import ke from "../PlIcon24/PlIcon24.vue.js";
-import ye from "../../utils/DropdownOverlay/DropdownOverlay.vue.js";
+import ke from "../PlIcon16/PlIcon16.vue.js";
+import ye from "../PlIcon24/PlIcon24.vue.js";
 import ge from "../../generated/components/svg/images/SvgRequired.vue2.js";
 import { getErrorMessage as Ie } from "../../helpers/error.js";
-const be = ["tabindex"], Ve = { class: "pl-dropdown__container" }, Ce = { class: "pl-dropdown__field" }, Ee = ["disabled", "placeholder"], Le = {
+import be from "./OptionList.vue.js";
+import { useGroupBy as Ve } from "./useGroupBy.js";
+const Le = ["tabindex"], Ce = { class: "pl-dropdown__container" }, Ee = { class: "pl-dropdown__field" }, Re = ["disabled", "placeholder"], Oe = {
   key: 0,
   class: "input-value"
 }, xe = { class: "pl-dropdown__controls" }, Ae = {
   key: 2,
   class: "arrow-icon arrow-icon-default"
-}, Oe = { key: 0 }, Se = {
-  key: 0,
-  class: "nothing-found"
-}, $e = {
+}, De = { key: 0 }, Se = {
   key: 0,
   class: "pl-dropdown__error"
-}, De = {
+}, Be = {
   key: 1,
   class: "pl-dropdown__helper"
-}, ze = {
+}, $e = {
   key: 2,
   class: "pl-dropdown__helper"
-}, Be = {
+}, ze = {
   name: "PlDropdown"
-}, Ye = /* @__PURE__ */ oe({
-  ...Be,
+}, Ze = /* @__PURE__ */ le({
+  ...ze,
   props: {
     modelValue: {},
     label: { default: "" },
@@ -54,183 +51,174 @@ const be = ["tabindex"], Ve = { class: "pl-dropdown__container" }, Ce = { class:
     optionSize: { default: "small" }
   },
   emits: ["update:modelValue"],
-  setup(N, { emit: R }) {
-    const C = R, l = N, T = te(), d = z(), w = z(), E = ne("overlay"), o = le({
+  setup(T, { emit: F }) {
+    const b = F, r = T, N = se(), i = D(), w = D(), _ = ae("optionListRef"), o = ie({
       search: "",
       activeIndex: -1,
       open: !1,
       optionsHeight: 0
-    }), P = () => ue(
-      m.value.findIndex((e) => V(e.value, l.modelValue)),
+    }), P = () => fe(
+      R.value.findIndex((e) => I(e.value, r.modelValue)),
       (e) => e < 0 ? 0 : e
-    ), q = () => o.activeIndex = P(), _ = s(() => l.options === void 0), k = s(() => _.value ? !0 : l.disabled), L = s(() => (l.options ?? []).findIndex((e) => V(e.value, l.modelValue))), x = s(() => {
-      if (!_.value) {
-        if (l.error)
-          return Ie(l.error);
-        if (l.modelValue !== void 0 && L.value === -1)
+    ), q = () => o.activeIndex = P(), h = s(() => r.options === void 0), k = s(() => h.value ? !0 : r.disabled), V = s(() => (r.options ?? []).findIndex((e) => I(e.value, r.modelValue))), L = s(() => {
+      if (!h.value) {
+        if (r.error)
+          return Ie(r.error);
+        if (r.modelValue !== void 0 && V.value === -1)
           return "The selected value is not one of the options";
       }
-    }), A = s(
-      () => _e(l.options ?? []).map((e, t) => ({
+    }), C = s(
+      () => _e(r.options ?? []).map((e, t) => ({
         ...e,
         index: t,
-        isSelected: t === L.value,
+        isSelected: t === V.value,
         isActive: t === o.activeIndex
       }))
-    ), O = s(() => {
-      const t = f(A).find((n) => V(n.value, l.modelValue));
-      return (t == null ? void 0 : t.label) || l.modelValue;
-    }), H = s(() => !o.open && l.modelValue ? "" : l.modelValue ? String(O.value) : l.placeholder), U = s(() => l.modelValue !== void 0 && l.modelValue !== null), m = s(() => {
-      const e = A.value;
+    ), E = s(() => {
+      const t = f(C).find((l) => I(l.value, r.modelValue));
+      return (t == null ? void 0 : t.label) || r.modelValue;
+    }), H = s(() => !o.open && r.modelValue ? "" : 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 n = o.search.toLowerCase();
-        return t.label.toLowerCase().includes(n) || t.description && t.description.toLowerCase().includes(n) ? !0 : typeof t.value == "string" ? t.value.toLowerCase().includes(n) : t.value === o.search;
+        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;
       }) : e;
-    }), K = s(() => k.value ? void 0 : "0"), S = (e) => {
+    }), { orderedRef: R, groupsRef: G, restRef: W } = Ve(K, "group"), j = s(() => k.value ? void 0 : "0"), O = (e) => {
       var t;
-      C("update:modelValue", e), o.search = "", o.open = !1, (t = d == null ? void 0 : d.value) == null || t.focus();
-    }, j = () => C("update:modelValue", void 0), G = () => {
+      b("update:modelValue", e), o.search = "", o.open = !1, (t = i == null ? void 0 : i.value) == null || t.focus();
+    }, J = (e) => {
+      O(e);
+    }, Q = () => b("update:modelValue", void 0), X = () => {
       var e;
       return (e = w.value) == null ? void 0 : e.focus();
-    }, J = () => {
+    }, Y = () => {
       o.open = !o.open, o.open || (o.search = "");
-    }, Q = () => o.open = !0, W = (e) => {
-      var n, c, u;
+    }, Z = () => o.open = !0, ee = (e) => {
+      var l, c, p;
       const t = e.relatedTarget;
-      !((n = d.value) != null && n.contains(t)) && !((u = (c = E.value) == null ? void 0 : c.listRef) != null && u.contains(t)) && (o.search = "", o.open = !1);
-    }, X = (e) => {
-      var $, D;
+      !((l = i.value) != null && l.contains(t)) && !((p = (c = _.value) == null ? void 0 : c.listRef) != null && p.contains(t)) && (o.search = "", o.open = !1);
+    }, oe = (e) => {
+      var x, A;
       if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.code))
         e.preventDefault();
       else
         return;
-      const { open: t, activeIndex: n } = o;
+      const { open: t, activeIndex: l } = o;
       if (!t) {
         e.code === "Enter" && (o.open = !0);
         return;
       }
-      e.code === "Escape" && (o.open = !1, ($ = d.value) == null || $.focus());
-      const c = f(m), { length: u } = c;
-      if (!u)
+      e.code === "Escape" && (o.open = !1, (x = i.value) == null || x.focus());
+      const c = R.value, { length: p } = c;
+      if (!p)
         return;
-      e.code === "Enter" && S((D = c.find((y) => y.index === n)) == null ? void 0 : D.value);
-      const Y = c.findIndex((y) => y.index === n) ?? -1, Z = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, ee = Math.abs(Y + Z + u) % u;
-      o.activeIndex = m.value[ee].index ?? -1;
+      e.code === "Enter" && O((A = c.find((y) => y.index === l)) == null ? void 0 : A.value);
+      const te = c.findIndex((y) => y.index === l) ?? -1, re = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, ne = Math.abs(te + re + p) % p;
+      o.activeIndex = c[ne].index ?? -1;
     };
-    return ve(d), B(() => l.modelValue, q, { immediate: !0 }), B(
+    return he(i), S(() => r.modelValue, q, { immediate: !0 }), S(
       () => o.open,
       (e) => {
         var t;
         return e ? (t = w.value) == null ? void 0 : t.focus() : "";
       }
-    ), re(() => {
+    ), de(() => {
       var e;
-      o.search, o.activeIndex >= 0 && o.open && ((e = E.value) == null || e.scrollIntoActive());
-    }), (e, t) => (r(), a("div", {
+      o.search, o.activeIndex >= 0 && o.open && ((e = _.value) == null || e.scrollIntoActive());
+    }), (e, t) => (n(), a("div", {
       class: "pl-dropdown__envelope",
-      onClick: G
+      onClick: X
     }, [
-      p("div", {
+      u("div", {
         ref_key: "rootRef",
-        ref: d,
-        tabindex: K.value,
+        ref: i,
+        tabindex: j.value,
         class: g(["pl-dropdown", { open: o.open, error: e.error, disabled: k.value }]),
-        onKeydown: X,
-        onFocusout: W
+        onKeydown: oe,
+        onFocusout: ee
       }, [
-        p("div", Ve, [
-          p("div", Ce, [
-            ae(p("input", {
+        u("div", Ce, [
+          u("div", Ee, [
+            ce(u("input", {
               ref_key: "input",
               ref: w,
-              "onUpdate:modelValue": t[0] || (t[0] = (n) => o.search = n),
+              "onUpdate:modelValue": t[0] || (t[0] = (l) => o.search = l),
               type: "text",
               tabindex: "-1",
               disabled: k.value,
               placeholder: H.value,
               spellcheck: "false",
               autocomplete: "chrome-off",
-              onFocus: Q
-            }, null, 40, Ee), [
-              [se, o.search]
+              onFocus: Z
+            }, null, 40, Re), [
+              [ue, o.search]
             ]),
-            o.open ? i("", !0) : (r(), a("div", Le, [
-              F(he, null, {
-                default: I(() => [
-                  ie(h(O.value), 1)
+            o.open ? d("", !0) : (n(), a("div", Oe, [
+              B(we, null, {
+                default: $(() => [
+                  pe(m(E.value), 1)
                 ]),
                 _: 1
               })
             ])),
-            p("div", xe, [
-              _.value ? (r(), v(f(ke), {
+            u("div", xe, [
+              h.value ? (n(), v(f(ye), {
                 key: 0,
                 name: "loading"
-              })) : i("", !0),
-              e.clearable && U.value ? (r(), v(f(we), {
+              })) : d("", !0),
+              e.clearable && U.value ? (n(), v(f(ke), {
                 key: 1,
                 class: "clear",
                 name: "delete-clear",
-                onClick: b(j, ["stop"])
-              })) : i("", !0),
-              M(e.$slots, "append"),
-              p("div", {
+                onClick: M(Q, ["stop"])
+              })) : d("", !0),
+              z(e.$slots, "append"),
+              u("div", {
                 class: "pl-dropdown__arrow-wrapper",
-                onClick: b(J, ["stop"])
+                onClick: M(Y, ["stop"])
               }, [
-                e.arrowIconLarge ? (r(), a("div", {
+                e.arrowIconLarge ? (n(), a("div", {
                   key: 0,
                   class: g(["arrow-icon", [`icon-24 ${e.arrowIconLarge}`]])
-                }, null, 2)) : e.arrowIcon ? (r(), a("div", {
+                }, null, 2)) : e.arrowIcon ? (n(), a("div", {
                   key: 1,
                   class: g(["arrow-icon", [`icon-16 ${e.arrowIcon}`]])
-                }, null, 2)) : (r(), a("div", Ae))
+                }, null, 2)) : (n(), a("div", Ae))
               ])
             ])
           ]),
-          e.label ? (r(), a("label", Oe, [
-            e.required ? (r(), v(ge, { key: 0 })) : i("", !0),
-            p("span", null, h(e.label), 1),
-            T.tooltip ? (r(), v(f(pe), {
+          e.label ? (n(), a("label", De, [
+            e.required ? (n(), v(ge, { key: 0 })) : d("", !0),
+            u("span", null, m(e.label), 1),
+            N.tooltip ? (n(), v(f(ve), {
               key: 1,
               class: "info",
               position: "top"
             }, {
-              tooltip: I(() => [
-                M(e.$slots, "tooltip")
+              tooltip: $(() => [
+                z(e.$slots, "tooltip")
               ]),
               _: 3
-            })) : i("", !0)
-          ])) : i("", !0),
-          o.open ? (r(), v(f(ye), {
+            })) : d("", !0)
+          ])) : d("", !0),
+          o.open ? (n(), v(be, {
             key: 1,
-            ref: "overlay",
-            root: d.value,
-            class: "pl-dropdown__options",
-            tabindex: "-1",
-            gap: 3
-          }, {
-            default: I(() => [
-              (r(!0), a(de, null, ce(m.value, (n, c) => (r(), v(me, {
-                key: c,
-                option: n,
-                "is-selected": n.isSelected,
-                "is-hovered": n.isActive,
-                size: e.optionSize,
-                onClick: b((u) => S(n.value), ["stop"])
-              }, null, 8, ["option", "is-selected", "is-hovered", "size", "onClick"]))), 128)),
-              m.value.length ? i("", !0) : (r(), a("div", Se, "Nothing found"))
-            ]),
-            _: 1
-          }, 8, ["root"])) : i("", !0),
-          F(fe, { class: "pl-dropdown__contour" })
+            ref_key: "optionListRef",
+            ref: _,
+            "root-ref": i.value,
+            groups: f(G),
+            rest: f(W),
+            "option-size": e.optionSize,
+            "select-option": J
+          }, null, 8, ["root-ref", "groups", "rest", "option-size"])) : d("", !0),
+          B(me, { class: "pl-dropdown__contour" })
         ])
-      ], 42, be),
-      x.value ? (r(), a("div", $e, h(x.value), 1)) : _.value && e.loadingOptionsHelper ? (r(), a("div", De, h(e.loadingOptionsHelper), 1)) : e.helper ? (r(), a("div", ze, h(e.helper), 1)) : i("", !0)
+      ], 42, Le),
+      L.value ? (n(), a("div", Se, m(L.value), 1)) : h.value && e.loadingOptionsHelper ? (n(), a("div", Be, m(e.loadingOptionsHelper), 1)) : e.helper ? (n(), a("div", $e, m(e.helper), 1)) : d("", !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 './pl-dropdown.scss';\nimport { computed, reactive, ref, unref, useSlots, 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 DropdownListItem from '../DropdownListItem.vue';\nimport LongText from '../LongText.vue';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { DropdownOverlay } from '../../utils/DropdownOverlay';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\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 overlayRef = useTemplateRef('overlay');\n\nconst data = reactive({\n  search: '',\n  activeIndex: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nconst findActiveIndex = () =>\n  tap(\n    filteredRef.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(() =>\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) {\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 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 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) && !overlayRef.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 filtered = unref(filteredRef);\n\n  const { length } = filtered;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === 'Enter') {\n    selectOption(filtered.find((it) => it.index === activeIndex)?.value);\n  }\n\n  const localIndex = filtered.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 = filteredRef.value[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    overlayRef.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        <DropdownOverlay v-if=\"data.open\" ref=\"overlay\" :root=\"rootRef\" class=\"pl-dropdown__options\" tabindex=\"-1\" :gap=\"3\">\n          <DropdownListItem\n            v-for=\"(item, index) in filteredRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :is-selected=\"item.isSelected\"\n            :is-hovered=\"item.isActive\"\n            :size=\"optionSize\"\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div v-if=\"!filteredRef.length\" class=\"nothing-found\">Nothing found</div>\n        </DropdownOverlay>\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","slots","_useSlots","rootRef","ref","input","overlayRef","useTemplateRef","data","reactive","findActiveIndex","tap","filteredRef","o","deepEqual","v","updateActive","isLoadingOptions","computed","isDisabled","selectedIndex","computedError","getErrorMessage","optionsRef","normalizeListOptions","opt","index","textValue","item","unref","computedPlaceholder","hasValue","options","search","tabindex","selectOption","_a","clear","setFocusOnInput","toggleOpen","onInputFocus","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","open","activeIndex","filtered","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 './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) {\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":["__default__","emit","__emit","props","__props","slots","_useSlots","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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"}

package/dist/components/PlDropdown/types.d.ts

@@ -0,0 +1,7 @@
+import { ListOptionNormalized } from '../../types';
+export type LOption<M = unknown> = ListOptionNormalized<M> & {
+    isSelected: boolean;
+    isActive: boolean;
+    index: number;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/PlDropdown/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdown/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,OAAO,CAAC,CAAC,GAAG,OAAO,IAAI,oBAAoB,CAAC,CAAC,CAAC,GAAG;IAAE,UAAU,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC"}

package/dist/components/PlDropdown/useGroupBy.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+export declare function useGroupBy<T, K extends keyof T>(list: Ref<T[]>, byKey: K): {
+    orderedRef: import('vue').ComputedRef<T[]>;
+    groupsRef: import('vue').ComputedRef<Map<NonNullable<T[K]>, T[]>>;
+    restRef: import('vue').ComputedRef<T[]>;
+};
+//# sourceMappingURL=useGroupBy.d.ts.map

package/dist/components/PlDropdown/useGroupBy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGroupBy.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdown/useGroupBy.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AA6C/B,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,EAC7C,IAAI,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,EACd,KAAK,EAAE,CAAC;;;;EAeT"}

package/dist/components/PlDropdown/useGroupBy.js

@@ -0,0 +1,36 @@
+import { computed as c } from "vue";
+function d(o, t) {
+  var u;
+  const e = /* @__PURE__ */ new Map();
+  if (!o)
+    return {
+      grouped: e,
+      rest: [],
+      ordered: []
+    };
+  for (const s of o) {
+    const r = s[t];
+    r !== void 0 && r !== null && (e.has(r) || e.set(r, []), (u = e.get(r)) == null || u.push(s));
+  }
+  const n = o.filter((s) => {
+    const r = s[t];
+    return r == null;
+  }), f = [...Array.from(e.values()).flat(), ...n];
+  return {
+    grouped: e,
+    rest: n,
+    ordered: f
+  };
+}
+function l(o, t) {
+  const e = c(() => d(o.value, t)), n = c(() => e.value.ordered), f = c(() => e.value.grouped), u = c(() => e.value.rest);
+  return {
+    orderedRef: n,
+    groupsRef: f,
+    restRef: u
+  };
+}
+export {
+  l as useGroupBy
+};
+//# sourceMappingURL=useGroupBy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useGroupBy.js","sources":["../../../src/components/PlDropdown/useGroupBy.ts"],"sourcesContent":["import type { Ref } from 'vue';\nimport { computed } from 'vue';\n\nfunction groupBy<T, K extends keyof T>(\n  list: T[],\n  groupBy: K,\n): {\n    grouped: Map<NonNullable<T[K]>, T[]>;\n    rest: T[];\n    ordered: T[];\n  } {\n  const grouped: Map<NonNullable<T[K]>, T[]> = new Map();\n\n  if (!list) {\n    return {\n      grouped,\n      rest: [],\n      ordered: [],\n    };\n  }\n\n  // Group items by the specified key\n  for (const item of list) {\n    const key = item[groupBy];\n    if (key === undefined) continue;\n    if (key === null) continue;\n    if (!grouped.has(key)) grouped.set(key, []);\n    grouped.get(key)?.push(item);\n  }\n\n  // Items without a group key\n  const rest = list.filter((item: T) => {\n    const key = item[groupBy];\n    return key === undefined || key === null;\n  });\n\n  const ordered = [...Array.from(grouped.values()).flat(), ...rest];\n\n  return {\n    grouped,\n    rest,\n    ordered,\n  };\n}\n\nexport function useGroupBy<T, K extends keyof T>(\n  list: Ref<T[]>,\n  byKey: K,\n) {\n  const result = computed(() => groupBy(list.value, byKey));\n\n  const orderedRef = computed(() => result.value.ordered);\n\n  const groupsRef = computed(() => result.value.grouped);\n\n  const restRef = computed(() => result.value.rest);\n\n  return {\n    orderedRef,\n    groupsRef,\n    restRef,\n  };\n}\n"],"names":["groupBy","list","grouped","item","key","_a","rest","ordered","useGroupBy","byKey","result","computed","orderedRef","groupsRef","restRef"],"mappings":";AAGA,SAASA,EACPC,GACAD,GAKE;;AACI,QAAAE,wBAA2C,IAAI;AAErD,MAAI,CAACD;AACI,WAAA;AAAA,MACL,SAAAC;AAAA,MACA,MAAM,CAAC;AAAA,MACP,SAAS,CAAA;AAAA,IACX;AAIF,aAAWC,KAAQF,GAAM;AACjB,UAAAG,IAAMD,EAAKH,CAAO;AACxB,IAAII,MAAQ,UACRA,MAAQ,SACPF,EAAQ,IAAIE,CAAG,KAAWF,EAAA,IAAIE,GAAK,EAAE,IAC1CC,IAAAH,EAAQ,IAAIE,CAAG,MAAf,QAAAC,EAAkB,KAAKF;AAAA,EAAI;AAI7B,QAAMG,IAAOL,EAAK,OAAO,CAACE,MAAY;AAC9B,UAAAC,IAAMD,EAAKH,CAAO;AACjB,WAAqBI,KAAQ;AAAA,EAAA,CACrC,GAEKG,IAAU,CAAC,GAAG,MAAM,KAAKL,EAAQ,OAAO,CAAC,EAAE,QAAQ,GAAGI,CAAI;AAEzD,SAAA;AAAA,IACL,SAAAJ;AAAA,IACA,MAAAI;AAAA,IACA,SAAAC;AAAA,EACF;AACF;AAEgB,SAAAC,EACdP,GACAQ,GACA;AACA,QAAMC,IAASC,EAAS,MAAMX,EAAQC,EAAK,OAAOQ,CAAK,CAAC,GAElDG,IAAaD,EAAS,MAAMD,EAAO,MAAM,OAAO,GAEhDG,IAAYF,EAAS,MAAMD,EAAO,MAAM,OAAO,GAE/CI,IAAUH,EAAS,MAAMD,EAAO,MAAM,IAAI;AAEzC,SAAA;AAAA,IACL,YAAAE;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,EACF;AACF;"}

package/dist/components/PlDropdownRef/PlDropdownRef.vue.d.ts

@@ -115,8 +115,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     helper: string;
     placeholder: string;
     clearable: boolean;
-    loadingOptionsHelper: string;
     optionSize: "small" | "medium";
+    loadingOptionsHelper: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
     tooltip?(_: {}): any;
 }>;

package/dist/components/PlDropdownRef/PlDropdownRef.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownRef.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"names":[],"mappings":"AA+GA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAKvD;;GAEG;;IAcC;;OAEG;gBACS,QAAQ,GAAG,SAAS;IAChC;;OAEG;YACK,MAAM;IACd;;OAEG;cACO,QAAQ,CAAC,SAAS,EAAE,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf;;OAEG;2BACoB,MAAM;IAC7B;;OAEG;YACK,OAAO;IACf;;OAEG;kBACW,MAAM;IACpB;;OAEG;gBACS,OAAO;IACnB;;OAEG;eACQ,OAAO;IAClB;;OAEG;eACQ,OAAO;IAClB;;OAEG;iBACU,OAAO,GAAG,QAAQ;;;;;;;;;IA3C/B;;OAEG;gBACS,QAAQ,GAAG,SAAS;IAChC;;OAEG;YACK,MAAM;IACd;;OAEG;cACO,QAAQ,CAAC,SAAS,EAAE,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf;;OAEG;2BACoB,MAAM;IAC7B;;OAEG;YACK,OAAO;IACf;;OAEG;kBACW,MAAM;IACpB;;OAEG;gBACS,OAAO;IACnB;;OAEG;eACQ,OAAO;IAClB;;OAEG;eACQ,OAAO;IAClB;;OAEG;iBACU,OAAO,GAAG,QAAQ;;;;;;;;;aAhCrB,QAAQ,CAAC,SAAS,EAAE,CAAC;;WAJvB,MAAM;cA4BH,OAAO;cAIP,OAAO;YAxBT,MAAM;iBAYD,MAAM;eAIR,OAAO;0BAZI,MAAM;gBAwBhB,OAAO,GAAG,QAAQ;;qBAsFN,GAAG;;AA9IhC,wBA2LK;AAcL,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"PlDropdownRef.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"names":[],"mappings":"AAgHA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAKvD;;GAEG;;IAcC;;OAEG;gBACS,QAAQ,GAAG,SAAS;IAChC;;OAEG;YACK,MAAM;IACd;;OAEG;cACO,QAAQ,CAAC,SAAS,EAAE,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf;;OAEG;2BACoB,MAAM;IAC7B;;OAEG;YACK,OAAO;IACf;;OAEG;kBACW,MAAM;IACpB;;OAEG;gBACS,OAAO;IACnB;;OAEG;eACQ,OAAO;IAClB;;OAEG;eACQ,OAAO;IAClB;;OAEG;iBACU,OAAO,GAAG,QAAQ;;;;;;;;;IA3C/B;;OAEG;gBACS,QAAQ,GAAG,SAAS;IAChC;;OAEG;YACK,MAAM;IACd;;OAEG;cACO,QAAQ,CAAC,SAAS,EAAE,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf;;OAEG;2BACoB,MAAM;IAC7B;;OAEG;YACK,OAAO;IACf;;OAEG;kBACW,MAAM;IACpB;;OAEG;gBACS,OAAO;IACnB;;OAEG;eACQ,OAAO;IAClB;;OAEG;eACQ,OAAO;IAClB;;OAEG;iBACU,OAAO,GAAG,QAAQ;;;;;;;;;aAhCrB,QAAQ,CAAC,SAAS,EAAE,CAAC;;WAJvB,MAAM;cA4BH,OAAO;cAIP,OAAO;YAxBT,MAAM;iBAYD,MAAM;eAIR,OAAO;gBAYN,OAAO,GAAG,QAAQ;0BAxBR,MAAM;;qBA+GJ,GAAG;;AA/IhC,wBA4LK;AAcL,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/PlDropdownRef/PlDropdownRef.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as s, useSlots as u, computed as t, createBlock as f, openBlock as m, unref as a, mergeProps as c, createSlots as v, withCtx as b, renderSlot as g } from "vue";
+import { defineComponent as s, useSlots as u, computed as t, createBlock as f, openBlock as m, unref as a, mergeProps as c, createSlots as g, withCtx as v, renderSlot as b } from "vue";
 import _ from "../PlDropdown/PlDropdown.vue.js";
 const k = {
   name: "PlDropdownRef"
@@ -19,25 +19,26 @@ const k = {
   },
   emits: ["update:modelValue"],
   setup(n) {
-    const i = u(), l = n, d = t(
+    const r = u(), l = n, i = t(
       () => {
         var e;
         return (e = l.options) == null ? void 0 : e.map((o) => ({
           label: o.label,
-          value: o.ref
+          value: o.ref,
+          group: o.group
         }));
       }
-    ), r = t(() => l.disabled ? "icon-link-disabled" : "icon-link");
+    ), d = t(() => l.disabled ? "icon-link-disabled" : "icon-link");
     return (e, o) => (m(), f(a(_), c(l, {
-      options: d.value,
+      options: i.value,
       "loading-options-helper": e.loadingOptionsHelper,
-      "arrow-icon-large": r.value,
+      "arrow-icon-large": d.value,
       "onUpdate:modelValue": o[0] || (o[0] = (p) => e.$emit("update:modelValue", p))
-    }), v({ _: 2 }, [
-      a(i).tooltip ? {
+    }), g({ _: 2 }, [
+      a(r).tooltip ? {
         name: "tooltip",
-        fn: b(() => [
-          g(e.$slots, "tooltip")
+        fn: v(() => [
+          b(e.$slots, "tooltip")
         ]),
         key: "0"
       } : void 0

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

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownRef.vue.js","sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: 'PlDropdownRef',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport type { ModelRef, RefOption } from '../../types';\nimport { PlDropdown } from '../PlDropdown';\nimport { computed, useSlots } from 'vue';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: 'update:modelValue', value: ModelRef | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected ref of the dropdown.\n     */\n    modelValue: ModelRef | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available ref options for the dropdown\n     */\n    options?: Readonly<RefOption[]>;\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     * 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    optionSize: 'small',\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) => ({\n    label: opt.label,\n    value: opt.ref,\n  })),\n);\n\nconst arrowIcon = computed(() => (props.disabled ? 'icon-link-disabled' : 'icon-link'));\n</script>\n\n<template>\n  <PlDropdown\n    v-bind=\"props\"\n    :options=\"options\"\n    :loading-options-helper=\"loadingOptionsHelper\"\n    :arrow-icon-large=\"arrowIcon\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdown>\n</template>\n"],"names":["__default__","slots","useSlots","props","__props","options","computed","_a","opt","arrowIcon"],"mappings":";;AAIA,MAAeA,IAAA;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;AASA,UAAMC,IAAaC,EAAS,GAStBC,IAAQC,GA8DRC,IAAUC;AAAA,MAAS,MAAA;;AACvB,gBAAAC,IAAAJ,EAAM,YAAN,gBAAAI,EAAe,IAAI,CAACC,OAAS;AAAA,UAC3B,OAAOA,EAAI;AAAA,UACX,OAAOA,EAAI;AAAA,QAAA;AAAA;AAAA,IAEf,GAEMC,IAAYH,EAAS,MAAOH,EAAM,WAAW,uBAAuB,WAAY;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlDropdownRef.vue.js","sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: 'PlDropdownRef',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport type { ModelRef, RefOption } from '../../types';\nimport { PlDropdown } from '../PlDropdown';\nimport { computed, useSlots } from 'vue';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: 'update:modelValue', value: ModelRef | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected ref of the dropdown.\n     */\n    modelValue: ModelRef | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available ref options for the dropdown\n     */\n    options?: Readonly<RefOption[]>;\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     * 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    optionSize: 'small',\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) => ({\n    label: opt.label,\n    value: opt.ref,\n    group: opt.group,\n  })),\n);\n\nconst arrowIcon = computed(() => (props.disabled ? 'icon-link-disabled' : 'icon-link'));\n</script>\n\n<template>\n  <PlDropdown\n    v-bind=\"props\"\n    :options=\"options\"\n    :loading-options-helper=\"loadingOptionsHelper\"\n    :arrow-icon-large=\"arrowIcon\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdown>\n</template>\n"],"names":["__default__","slots","useSlots","props","__props","options","computed","_a","opt","arrowIcon"],"mappings":";;AAIA,MAAeA,IAAA;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;AASA,UAAMC,IAAaC,EAAS,GAStBC,IAAQC,GA8DRC,IAAUC;AAAA,MAAS,MAAA;;AACvB,gBAAAC,IAAAJ,EAAM,YAAN,gBAAAI,EAAe,IAAI,CAACC,OAAS;AAAA,UAC3B,OAAOA,EAAI;AAAA,UACX,OAAOA,EAAI;AAAA,UACX,OAAOA,EAAI;AAAA,QAAA;AAAA;AAAA,IAEf,GAEMC,IAAYH,EAAS,MAAOH,EAAM,WAAW,uBAAuB,WAAY;;;;;;;;;;;;;;;;;"}