@milaboratories/uikit 2.2.95 → 2.2.96

package/dist/components/PlDropdown/OptionList.vue.d.ts

@@ -0,0 +1,77 @@
+import { LOption } from './types';
+type __VLS_Props = {
+    rootRef: HTMLElement;
+    groups: Map<string, LOption[]>;
+    rest: LOption[];
+    optionSize: 'small' | 'medium';
+    selectOption: (v: unknown) => void;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    scrollIntoActive: () => void;
+    listRef: import('vue').ComputedRef<HTMLElement | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    overlay: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly root: HTMLElement | undefined;
+            readonly gap?: number | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            listRef: HTMLDivElement;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<{
+            root: HTMLElement | undefined;
+            gap?: number;
+        }> & Readonly<{}>, {
+            scrollIntoActive: () => void;
+            listRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{}> & Omit<Readonly<{
+        root: HTMLElement | undefined;
+        gap?: number;
+    }> & Readonly<{}>, "scrollIntoActive" | "listRef"> & import('vue').ShallowUnwrapRef<{
+        scrollIntoActive: () => void;
+        listRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    }> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {
+                ref: string;
+            }): any;
+        };
+    }) | null;
+}, any>;
+export default _default;
+//# sourceMappingURL=OptionList.vue.d.ts.map

package/dist/components/PlDropdown/OptionList.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdown/OptionList.vue"],"names":[],"mappings":"AA6EA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEvC,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;IAC/B,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,UAAU,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC/B,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA6MwygB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;AAjBh6gB,wBASG"}

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

@@ -0,0 +1,88 @@
+import { defineComponent as I, useTemplateRef as L, computed as c, createBlock as u, openBlock as o, unref as O, withCtx as f, createElementBlock as s, createCommentVNode as m, Fragment as a, renderList as p, normalizeClass as h, createVNode as g, createElementVNode as k, createTextVNode as V, toDisplayString as $, withModifiers as y } from "vue";
+import z from "../DropdownListItem.vue.js";
+import w from "../../utils/DropdownOverlay/DropdownOverlay.vue.js";
+import _ from "../../utils/TextLabel.vue.js";
+const B = {
+  key: 1,
+  class: "nothing-found"
+}, M = /* @__PURE__ */ I({
+  __name: "OptionList",
+  props: {
+    rootRef: {},
+    groups: {},
+    rest: {},
+    optionSize: {},
+    selectOption: { type: Function }
+  },
+  setup(C, { expose: S }) {
+    const r = C, l = L("overlay"), A = c(() => {
+      var e;
+      return (e = l.value) == null ? void 0 : e.listRef;
+    }), d = c(() => r.groups.size > 0), N = c(() => {
+      let e = 0;
+      for (const v of r.groups.values())
+        e += v.length;
+      return e + r.rest.length;
+    });
+    return S({
+      scrollIntoActive: () => {
+        var e;
+        (e = l.value) == null || e.scrollIntoActive();
+      },
+      listRef: A
+    }), (e, v) => (o(), u(O(w), {
+      ref_key: "overlay",
+      ref: l,
+      root: e.rootRef,
+      class: "pl-dropdown__options",
+      tabindex: "-1",
+      gap: 3
+    }, {
+      default: f(() => [
+        (o(!0), s(a, null, p(e.groups.entries(), ([t, i]) => (o(), s("div", {
+          key: t,
+          class: h({ "group-container": d.value })
+        }, [
+          g(_, null, {
+            default: f(() => [
+              V($(t), 1)
+            ]),
+            _: 2
+          }, 1024),
+          k("div", null, [
+            (o(!0), s(a, null, p(i, (n, R) => (o(), u(z, {
+              key: R,
+              option: n,
+              "is-selected": n.isSelected,
+              "is-hovered": n.isActive,
+              size: e.optionSize,
+              onClick: y((b) => e.selectOption(n.value), ["stop"])
+            }, null, 8, ["option", "is-selected", "is-hovered", "size", "onClick"]))), 128))
+          ])
+        ], 2))), 128)),
+        e.rest.length ? (o(), s("div", {
+          key: 0,
+          class: h({ "group-container": d.value })
+        }, [
+          g(_),
+          k("div", null, [
+            (o(!0), s(a, null, p(e.rest, (t, i) => (o(), u(z, {
+              key: i,
+              option: t,
+              "is-selected": t.isSelected,
+              "is-hovered": t.isActive,
+              size: e.optionSize,
+              onClick: y((n) => e.selectOption(t.value), ["stop"])
+            }, null, 8, ["option", "is-selected", "is-hovered", "size", "onClick"]))), 128))
+          ])
+        ], 2)) : m("", !0),
+        N.value ? m("", !0) : (o(), s("div", B, "Nothing found"))
+      ]),
+      _: 1
+    }, 8, ["root"]));
+  }
+});
+export {
+  M as default
+};
+//# sourceMappingURL=OptionList.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionList.vue.js","sources":["../../../src/components/PlDropdown/OptionList.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport DropdownListItem from '../DropdownListItem.vue';\nimport { DropdownOverlay } from '../../utils/DropdownOverlay';\nimport TextLabel from '../../utils/TextLabel.vue';\nimport { computed, useTemplateRef } from 'vue';\nimport type { LOption } from './types';\n\nconst props = defineProps<{\n  rootRef: HTMLElement;\n  groups: Map<string, LOption[]>;\n  rest: LOption[];\n  optionSize: 'small' | 'medium';\n  selectOption: (v: unknown) => void;\n}>();\n\nconst overlay = useTemplateRef('overlay');\n\nconst listRef = computed(() => overlay.value?.listRef);\n\nconst hasGroups = computed(() => props.groups.size > 0);\n\nconst optionsLength = computed(() => {\n  let totalGroupItems = 0;\n  for (const items of props.groups.values()) {\n    totalGroupItems += items.length;\n  }\n  return totalGroupItems + props.rest.length;\n});\n\nconst scrollIntoActive = () => {\n  overlay.value?.scrollIntoActive();\n};\n\ndefineExpose({\n  scrollIntoActive,\n  listRef,\n});\n</script>\n\n<template>\n  <DropdownOverlay ref=\"overlay\" :root=\"rootRef\" class=\"pl-dropdown__options\" tabindex=\"-1\" :gap=\"3\">\n    <div v-for=\"[group, items] in groups.entries()\" :key=\"group\" :class=\"{ 'group-container': hasGroups }\">\n      <TextLabel>{{ group }}</TextLabel>\n      <div>\n        <DropdownListItem\n          v-for=\"(item, index) in items\"\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>\n    </div>\n    <div v-if=\"rest.length\" :class=\"{ 'group-container': hasGroups }\">\n      <TextLabel />\n      <div>\n        <DropdownListItem\n          v-for=\"(item, index) in rest\"\n          :key=\"index\" :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"optionSize\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </div>\n    <div v-if=\"!optionsLength\" class=\"nothing-found\">Nothing found</div>\n  </DropdownOverlay>\n</template>\n"],"names":["props","__props","overlay","useTemplateRef","listRef","computed","_a","hasGroups","optionsLength","totalGroupItems","items","__expose"],"mappings":";;;;;;;;;;;;;;;;;AAOA,UAAMA,IAAQC,GAQRC,IAAUC,EAAe,SAAS,GAElCC,IAAUC,EAAS,MAAM;;AAAA,cAAAC,IAAAJ,EAAQ,UAAR,gBAAAI,EAAe;AAAA,KAAO,GAE/CC,IAAYF,EAAS,MAAML,EAAM,OAAO,OAAO,CAAC,GAEhDQ,IAAgBH,EAAS,MAAM;AACnC,UAAII,IAAkB;AACtB,iBAAWC,KAASV,EAAM,OAAO,OAAA;AAC/B,QAAAS,KAAmBC,EAAM;AAEpB,aAAAD,IAAkBT,EAAM,KAAK;AAAA,IAAA,CACrC;AAMY,WAAAW,EAAA;AAAA,MACX,kBALuB,MAAM;;AAC7B,SAAAL,IAAAJ,EAAQ,UAAR,QAAAI,EAAe;AAAA,MACjB;AAAA,MAIE,SAAAF;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlDropdown/OptionList.vue2.js

@@ -0,0 +1,5 @@
+import f from "./OptionList.vue.js";
+export {
+  f as default
+};
+//# sourceMappingURL=OptionList.vue2.js.map

package/dist/components/PlDropdown/OptionList.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionList.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -1 +1 @@
-{"version":3,"file":"PlDropdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdown/PlDropdown.vue"],"names":[],"mappings":"AAAA,OA0XO,oBAAoB,CAAC;AAM5B,OAAO,KAAK,EAAE,UAAU,EAAwB,MAAM,aAAa,CAAC;AAYpE;;GAEG;yBACc,CAAC,yBACJ,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WAslB1D,mBAAmB,CAAC;;;QA3kBxB;;WAEG;oBACS,CAAC;QACb;;WAEG;gBACK,MAAM;QACd;;WAEG;kBACO,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACnC;;WAEG;iBACM,MAAM;QACf;;WAEG;+BACoB,MAAM;QAC7B;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,MAAM;QACpB;;WAEG;oBACS,OAAO;QACnB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;oBACS,MAAM;QAClB;;WAEG;yBACc,MAAM;QACvB;;WAEG;qBACU,OAAO,GAAG,QAAQ;mBAwhB2D,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;;;;cAllBL,mBAAmB,SAAS,CAAC,GAAG,SAAS,KAAG,IAAI;;;;YAulBV,OAAO,CAAC,OAAO,WAAW,CAAC;;AAhmBvE,wBAgmB4E;AAG5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"PlDropdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdown/PlDropdown.vue"],"names":[],"mappings":"AAAA,OA8XO,oBAAoB,CAAC;AAM5B,OAAO,KAAK,EAAE,UAAU,EAAwB,MAAM,aAAa,CAAC;AAapE;;GAEG;yBACc,CAAC,yBACJ,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA2jB1D,mBAAmB,CAAC;;;QAhjBxB;;WAEG;oBACS,CAAC;QACb;;WAEG;gBACK,MAAM;QACd;;WAEG;kBACO,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACnC;;WAEG;iBACM,MAAM;QACf;;WAEG;+BACoB,MAAM;QAC7B;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,MAAM;QACpB;;WAEG;oBACS,OAAO;QACnB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;oBACS,MAAM;QAClB;;WAEG;yBACc,MAAM;QACvB;;WAEG;qBACU,OAAO,GAAG,QAAQ;mBA6f2D,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;;;;cAvjBL,mBAAmB,SAAS,CAAC,GAAG,SAAS,KAAG,IAAI;;;;YA4jBV,OAAO,CAAC,OAAO,WAAW,CAAC;;AArkBvE,wBAqkB4E;AAG5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

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