@milaboratories/uikit 2.3.29 → 2.4.1

package/dist/utils/DropdownOverlay/DropdownOverlay.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownOverlay.vue.d.ts","sourceRoot":"","sources":["../../../src/utils/DropdownOverlay/DropdownOverlay.vue"],"names":[],"mappings":"AAwFA,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,WAAW,GAAG,SAAS,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAuEF,iBAAS,cAAc;WA0CT,OAAO,IAA6B;;;;YAZrB,GAAG;;;;;;EAiB/B;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;OASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"DropdownOverlay.vue.d.ts","sourceRoot":"","sources":["../../../src/utils/DropdownOverlay/DropdownOverlay.vue"],"names":[],"mappings":"AA8FA,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,WAAW,GAAG,SAAS,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAuEF,iBAAS,cAAc;WA2CT,OAAO,IAA6B;;;;YAZrB,GAAG;;;;;;EAiB/B;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;OASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/utils/DropdownOverlay/DropdownOverlay.vue.js

@@ -1,25 +1,25 @@
-import { defineComponent as h, reactive as l, toRef as g, ref as u, watch as w, createBlock as v, openBlock as x, Teleport as y, createElementVNode as R, mergeProps as H, renderSlot as _ } from "vue";
-import { useElementPosition as b } from "../../composition/usePosition.js";
+import { defineComponent as g, reactive as c, toRef as h, ref as u, watch as w, createBlock as v, openBlock as x, Teleport as y, createElementVNode as R, mergeProps as C, withModifiers as H, renderSlot as b } from "vue";
+import { useElementPosition as k } from "../../composition/usePosition.js";
 import { scrollIntoView as B } from "../../helpers/dom.js";
-import { tapIf as C } from "../../lib/util/helpers/dist/index.js";
-const $ = /* @__PURE__ */ h({
+import { tapIf as E } from "../../lib/util/helpers/dist/index.js";
+const q = /* @__PURE__ */ g({
   __name: "DropdownOverlay",
   props: {
     root: {},
     gap: {}
   },
-  setup(f, { expose: a }) {
-    const r = f, i = l({
+  setup(f, { expose: d }) {
+    const r = f, i = c({
       optionsHeight: 0
-    }), o = l({
+    }), o = c({
       top: "0px",
       left: "0px",
       width: "0px"
-    }), d = g(r, "root"), n = u();
-    return a({
+    }), a = h(r, "root"), n = u();
+    return d({
       scrollIntoActive: () => {
         const t = n.value;
-        t && C(t.querySelector(".hovered-item"), (e) => {
+        t && E(t.querySelector(".hovered-item"), (e) => {
           B(t, e);
         });
       },
@@ -29,23 +29,25 @@ const $ = /* @__PURE__ */ h({
         const e = t.getBoundingClientRect();
         i.optionsHeight = e.height, window.dispatchEvent(new CustomEvent("adjust"));
       });
-    }), b(d, (t) => {
-      const e = document.body.getBoundingClientRect(), s = t.top - e.top, m = t.left - e.left, p = r.gap ?? 0, c = s + t.height + p;
-      c + i.optionsHeight > t.clientHeight ? o.top = s - i.optionsHeight - p + "px" : o.top = c + "px", o.left = m + "px", o.width = t.width + "px";
+    }), k(a, (t) => {
+      const e = document.body.getBoundingClientRect(), s = t.top - e.top, m = t.left - e.left, p = r.gap ?? 0, l = s + t.height + p;
+      l + i.optionsHeight > t.clientHeight ? o.top = s - i.optionsHeight - p + "px" : o.top = l + "px", o.left = m + "px", o.width = t.width + "px";
     }), (t, e) => (x(), v(y, { to: "body" }, [
-      R("div", H({
+      R("div", C({
         ref_key: "listRef",
         ref: n
       }, t.$attrs, {
         style: o,
-        tabindex: "-1"
+        tabindex: "-1",
+        onClick: e[0] || (e[0] = H(() => {
+        }, ["stop"]))
       }), [
-        _(t.$slots, "default", { ref: "list" })
+        b(t.$slots, "default", { ref: "list" })
       ], 16)
     ]));
   }
 });
 export {
-  $ as default
+  q as default
 };
 //# sourceMappingURL=DropdownOverlay.vue.js.map

package/dist/utils/DropdownOverlay/DropdownOverlay.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownOverlay.vue.js","sources":["../../../src/utils/DropdownOverlay/DropdownOverlay.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useElementPosition } from '../../composition/usePosition';\nimport { scrollIntoView } from '../../helpers/dom';\nimport { tapIf } from '@milaboratories/helpers';\nimport { reactive, ref, toRef, watch } from 'vue';\n\nconst props = defineProps<{\n  root: HTMLElement | undefined; // element to \"track\"\n  gap?: number; // additional gap between overlay and \"root\" component\n}>();\n\nconst data = reactive({\n  optionsHeight: 0,\n});\n\nconst optionsStyle = reactive({\n  top: '0px',\n  left: '0px',\n  width: '0px',\n});\n\nconst rootRef = toRef(props, 'root');\n\nconst listRef = ref<HTMLElement>();\n\nconst scrollIntoActive = () => {\n  const $list = listRef.value;\n\n  if (!$list) {\n    return;\n  }\n\n  tapIf($list.querySelector('.hovered-item') as HTMLElement, (opt) => {\n    scrollIntoView($list, opt);\n  });\n};\n\ndefineExpose({\n  scrollIntoActive,\n  listRef,\n});\n\nwatch(listRef, (el) => {\n  if (el) {\n    requestAnimationFrame(() => {\n      const rect = el.getBoundingClientRect();\n      data.optionsHeight = rect.height;\n      window.dispatchEvent(new CustomEvent('adjust'));\n    });\n  }\n});\n\nuseElementPosition(rootRef, (pos) => {\n  const bodyRect = document.body.getBoundingClientRect();\n\n  const top = pos.top - bodyRect.top;\n\n  const left = pos.left - bodyRect.left;\n\n  const gap = props.gap ?? 0;\n\n  const downTopOffset = top + pos.height + gap;\n\n  if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n    optionsStyle.top = top - data.optionsHeight - gap + 'px';\n  } else {\n    optionsStyle.top = downTopOffset + 'px';\n  }\n\n  optionsStyle.left = left + 'px';\n  optionsStyle.width = pos.width + 'px';\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div ref=\"listRef\" v-bind=\"$attrs\" :style=\"optionsStyle\" tabindex=\"-1\">\n      <slot ref=\"list\" />\n    </div>\n  </Teleport>\n</template>\n"],"names":["props","__props","data","reactive","optionsStyle","rootRef","toRef","listRef","ref","__expose","$list","tapIf","opt","scrollIntoView","watch","el","rect","useElementPosition","pos","bodyRect","top","left","gap","downTopOffset"],"mappings":";;;;;;;;;;;AAMA,UAAMA,IAAQC,GAKRC,IAAOC,EAAS;AAAA,MACpB,eAAe;AAAA,IAAA,CAChB,GAEKC,IAAeD,EAAS;AAAA,MAC5B,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,IAAA,CACR,GAEKE,IAAUC,EAAMN,GAAO,MAAM,GAE7BO,IAAUC,EAAiB;AAcpB,WAAAC,EAAA;AAAA,MACX,kBAbuB,MAAM;AAC7B,cAAMC,IAAQH,EAAQ;AAEtB,QAAKG,KAILC,EAAMD,EAAM,cAAc,eAAe,GAAkB,CAACE,MAAQ;AAClE,UAAAC,EAAeH,GAAOE,CAAG;AAAA,QAAA,CAC1B;AAAA,MACH;AAAA,MAIE,SAAAL;AAAA,IAAA,CACD,GAEKO,EAAAP,GAAS,CAACQ,MAAO;AACrB,MAAIA,KACF,sBAAsB,MAAM;AACpB,cAAAC,IAAOD,EAAG,sBAAsB;AACtC,QAAAb,EAAK,gBAAgBc,EAAK,QAC1B,OAAO,cAAc,IAAI,YAAY,QAAQ,CAAC;AAAA,MAAA,CAC/C;AAAA,IACH,CACD,GAEkBC,EAAAZ,GAAS,CAACa,MAAQ;AAC7B,YAAAC,IAAW,SAAS,KAAK,sBAAsB,GAE/CC,IAAMF,EAAI,MAAMC,EAAS,KAEzBE,IAAOH,EAAI,OAAOC,EAAS,MAE3BG,IAAMtB,EAAM,OAAO,GAEnBuB,IAAgBH,IAAMF,EAAI,SAASI;AAEzC,MAAIC,IAAgBrB,EAAK,gBAAgBgB,EAAI,eAC3Cd,EAAa,MAAMgB,IAAMlB,EAAK,gBAAgBoB,IAAM,OAEpDlB,EAAa,MAAMmB,IAAgB,MAGrCnB,EAAa,OAAOiB,IAAO,MACdjB,EAAA,QAAQc,EAAI,QAAQ;AAAA,IAAA,CAClC;;;;;;;;;;;;;"}
+{"version":3,"file":"DropdownOverlay.vue.js","sources":["../../../src/utils/DropdownOverlay/DropdownOverlay.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useElementPosition } from '../../composition/usePosition';\nimport { scrollIntoView } from '../../helpers/dom';\nimport { tapIf } from '@milaboratories/helpers';\nimport { reactive, ref, toRef, watch } from 'vue';\n\nconst props = defineProps<{\n  root: HTMLElement | undefined; // element to \"track\"\n  gap?: number; // additional gap between overlay and \"root\" component\n}>();\n\nconst data = reactive({\n  optionsHeight: 0,\n});\n\nconst optionsStyle = reactive({\n  top: '0px',\n  left: '0px',\n  width: '0px',\n});\n\nconst rootRef = toRef(props, 'root');\n\nconst listRef = ref<HTMLElement>();\n\nconst scrollIntoActive = () => {\n  const $list = listRef.value;\n\n  if (!$list) {\n    return;\n  }\n\n  tapIf($list.querySelector('.hovered-item') as HTMLElement, (opt) => {\n    scrollIntoView($list, opt);\n  });\n};\n\ndefineExpose({\n  scrollIntoActive,\n  listRef,\n});\n\nwatch(listRef, (el) => {\n  if (el) {\n    requestAnimationFrame(() => {\n      const rect = el.getBoundingClientRect();\n      data.optionsHeight = rect.height;\n      window.dispatchEvent(new CustomEvent('adjust'));\n    });\n  }\n});\n\nuseElementPosition(rootRef, (pos) => {\n  const bodyRect = document.body.getBoundingClientRect();\n\n  const top = pos.top - bodyRect.top;\n\n  const left = pos.left - bodyRect.left;\n\n  const gap = props.gap ?? 0;\n\n  const downTopOffset = top + pos.height + gap;\n\n  if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n    optionsStyle.top = top - data.optionsHeight - gap + 'px';\n  } else {\n    optionsStyle.top = downTopOffset + 'px';\n  }\n\n  optionsStyle.left = left + 'px';\n  optionsStyle.width = pos.width + 'px';\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div\n      ref=\"listRef\"\n      v-bind=\"$attrs\"\n      :style=\"optionsStyle\"\n      tabindex=\"-1\"\n      @click.stop\n    >\n      <slot ref=\"list\" />\n    </div>\n  </Teleport>\n</template>\n"],"names":["props","__props","data","reactive","optionsStyle","rootRef","toRef","listRef","ref","__expose","$list","tapIf","opt","scrollIntoView","watch","el","rect","useElementPosition","pos","bodyRect","top","left","gap","downTopOffset"],"mappings":";;;;;;;;;;;AAMA,UAAMA,IAAQC,GAKRC,IAAOC,EAAS;AAAA,MACpB,eAAe;AAAA,IAAA,CAChB,GAEKC,IAAeD,EAAS;AAAA,MAC5B,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,IAAA,CACR,GAEKE,IAAUC,EAAMN,GAAO,MAAM,GAE7BO,IAAUC,EAAiB;AAcpB,WAAAC,EAAA;AAAA,MACX,kBAbuB,MAAM;AAC7B,cAAMC,IAAQH,EAAQ;AAEtB,QAAKG,KAILC,EAAMD,EAAM,cAAc,eAAe,GAAkB,CAACE,MAAQ;AAClE,UAAAC,EAAeH,GAAOE,CAAG;AAAA,QAAA,CAC1B;AAAA,MACH;AAAA,MAIE,SAAAL;AAAA,IAAA,CACD,GAEKO,EAAAP,GAAS,CAACQ,MAAO;AACrB,MAAIA,KACF,sBAAsB,MAAM;AACpB,cAAAC,IAAOD,EAAG,sBAAsB;AACtC,QAAAb,EAAK,gBAAgBc,EAAK,QAC1B,OAAO,cAAc,IAAI,YAAY,QAAQ,CAAC;AAAA,MAAA,CAC/C;AAAA,IACH,CACD,GAEkBC,EAAAZ,GAAS,CAACa,MAAQ;AAC7B,YAAAC,IAAW,SAAS,KAAK,sBAAsB,GAE/CC,IAAMF,EAAI,MAAMC,EAAS,KAEzBE,IAAOH,EAAI,OAAOC,EAAS,MAE3BG,IAAMtB,EAAM,OAAO,GAEnBuB,IAAgBH,IAAMF,EAAI,SAASI;AAEzC,MAAIC,IAAgBrB,EAAK,gBAAgBgB,EAAI,eAC3Cd,EAAa,MAAMgB,IAAMlB,EAAK,gBAAgBoB,IAAM,OAEpDlB,EAAa,MAAMmB,IAAgB,MAGrCnB,EAAa,OAAOiB,IAAO,MACdjB,EAAA,QAAQc,EAAI,QAAQ;AAAA,IAAA,CAClC;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.3.29",
+  "version": "2.4.1",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -30,7 +30,7 @@
     "d3-selection": "^3.0.0",
     "d3-axis": "^3.0.0",
     "resize-observer-polyfill": "^1.5.1",
-    "@platforma-sdk/model": "^1.42.10",
+    "@platforma-sdk/model": "^1.42.15",
     "@milaboratories/helpers": "^1.6.19"
   },
   "devDependencies": {
@@ -41,8 +41,8 @@
     "vue-tsc": "^2.2.10",
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
-    "@milaboratories/ts-configs": "1.0.5",
     "@milaboratories/eslint-config": "^1.0.4",
+    "@milaboratories/ts-configs": "1.0.5",
     "@milaboratories/build-configs": "1.0.5"
   },
   "scripts": {

package/src/components/PlDropdown/PlDropdown.vue

@@ -14,12 +14,12 @@ import { tap } from '../../helpers/functions';
 import { PlTooltip } from '../PlTooltip';
 import DoubleContour from '../../utils/DoubleContour.vue';
 import { useLabelNotch } from '../../utils/useLabelNotch';
-import type { ListOption, ListOptionNormalized } from '../../types';
+import type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from '../../types';
 import { deepEqual } from '../../helpers/objects';
 import LongText from '../LongText.vue';
 import { normalizeListOptions } from '../../helpers/utils';
 import { PlIcon16 } from '../PlIcon16';
-import { PlMaskIcon24 } from '../PlMaskIcon24';
+import { PlIcon24 } from '../PlIcon24';
 import SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';
 import { getErrorMessage } from '../../helpers/error.ts';
 import OptionList from './OptionList.vue';
@@ -78,11 +78,11 @@ const props = withDefaults(
     /**
      * Custom icon (16px) class for the dropdown arrow (optional)
      */
-    arrowIcon?: string;
+    arrowIcon?: MaskIconName16;
     /**
      * Custom icon (24px) class for the dropdown arrow (optional)
      */
-    arrowIconLarge?: string;
+    arrowIconLarge?: MaskIconName24;
     /**
      * Option list item size
      */
@@ -104,10 +104,6 @@ const props = withDefaults(
   },
 );
 
-const slots = defineSlots<{
-  [key: string]: unknown;
-}>();
-
 const rootRef = ref<HTMLElement | undefined>();
 const input = ref<HTMLInputElement | undefined>();
 
@@ -342,20 +338,20 @@ watchPostEffect(() => {
           </div>
 
           <div class="pl-dropdown__controls">
-            <PlMaskIcon24 v-if="isLoadingOptions" name="loading" />
+            <PlIcon24 v-if="isLoadingOptions" name="loading" />
             <PlIcon16 v-if="clearable && hasValue" class="clear" name="delete-clear" @click.stop="clear" />
             <slot name="append" />
             <div class="pl-dropdown__arrow-wrapper" @click.stop="toggleOpen">
-              <div v-if="arrowIconLarge" class="arrow-icon" :class="[`icon-24 ${arrowIconLarge}`]" />
-              <div v-else-if="arrowIcon" class="arrow-icon" :class="[`icon-16 ${arrowIcon}`]" />
-              <div v-else class="arrow-icon arrow-icon-default" />
+              <PlIcon24 v-if="arrowIconLarge" :name="arrowIconLarge" class="arrow-icon" />
+              <PlIcon16 v-else-if="arrowIcon" :name="arrowIcon" class="arrow-icon" />
+              <PlIcon16 v-else name="chevron-down" class="arrow-icon arrow-icon-default" />
             </div>
           </div>
         </div>
         <label v-if="label">
           <SvgRequired v-if="required" />
           <span>{{ label }}</span>
-          <PlTooltip v-if="slots.tooltip" class="info" position="top">
+          <PlTooltip v-if="$slots.tooltip" class="info" position="top">
             <template #tooltip>
               <slot name="tooltip" />
             </template>

package/src/components/PlDropdown/pl-dropdown.scss

@@ -1,4 +1,4 @@
-@use "../../assets/mixins.scss" as *;
+@use '../../assets/mixins.scss' as *;
 
 .pl-dropdown__options {
   --option-hover-bg: var(--btn-sec-hover-grey);
@@ -41,7 +41,7 @@
       @include abs-center-y();
     }
 
-    >span {
+    > span {
       display: block;
       overflow: hidden;
       white-space: nowrap;
@@ -187,10 +187,8 @@
     gap: 6px;
     margin-left: auto;
 
-    
     .mask-16,
     .mask-24 {
-      --icon-color: var(--control-mask-fill);
       cursor: pointer;
     }
 
@@ -214,11 +212,9 @@
   .arrow-icon {
     cursor: pointer;
 
-    // Default "arrow" icon (16x16) 
+    // Default "arrow" icon (16x16)
     &.arrow-icon-default {
-      transition: transform .2s;
-      background-color: var(--control-mask-fill);
-      @include mask(url('../../assets/images/16_chevron-down.svg'), 16px);
+      transition: transform 0.2s;
     }
   }
 
@@ -239,7 +235,6 @@
 
     .arrow-icon {
       &.arrow-icon-default {
-        background-color: var(--control-mask-fill);
         transform: rotate(-180deg);
       }
     }
@@ -268,7 +263,7 @@
 
   &.disabled {
     --contour-color: var(--color-dis-01);
-    --control-mask-fill: var(--color-dis-01);
+    --icon-color: var(--color-dis-01);
     --label-color: var(--color-dis-01);
     cursor: not-allowed;
     pointer-events: none;
@@ -278,4 +273,4 @@
       color: var(--dis-01);
     }
   }
-}
+}

package/src/components/PlDropdownLine/PlDropdownLine.vue

@@ -273,7 +273,15 @@ useElementPosition(container, (pos) => {
       <div v-show="canShowClearBtn" class="pl-line-dropdown__icon-clear" @click="clearModel" />
     </div>
     <Teleport v-if="data.isOpen" to="body">
-      <div v-if="props.mode === 'list'" ref="list" :style="optionsStyle" tabindex="-1" class="pl-line-dropdown__items" @focusout="onFocusOut">
+      <div
+        v-if="props.mode === 'list'"
+        ref="list"
+        :style="optionsStyle"
+        tabindex="-1"
+        class="pl-line-dropdown__items"
+        @focusout="onFocusOut"
+        @click.stop
+      >
         <template v-for="(item, index) in options" :key="index">
           <slot
             name="item"
@@ -305,6 +313,7 @@ useElementPosition(container, (pos) => {
         tabindex="-1"
         class="pl-line-dropdown__items-tabs"
         @focusout="onFocusOut"
+        @click.stop
       >
         <template v-for="(item, index) in options" :key="index">
           <slot name="item" :item="item" :is-selected="isItemSelected(item)" :is-hovered="data.activeOption == index" @click.stop="selectItem(item)">

package/src/components/PlDropdownRef/PlDropdownRef.vue

@@ -7,10 +7,10 @@ export default {
 };
 </script>
 
-<script lang="ts" setup>
-import type { ModelRef, RefOption } from '../../types';
-import { PlDropdown } from '../PlDropdown';
+<script lang="ts" setup generic="M = ModelRef">
 import { computed, useSlots } from 'vue';
+import type { ListOption, ModelRef, RefOption } from '../../types';
+import { PlDropdown } from '../PlDropdown';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const slots: any = useSlots();
@@ -19,7 +19,7 @@ defineEmits<{
   /**
    * Emitted when the model value is updated.
    */
-  (e: 'update:modelValue', value: ModelRef | undefined): void;
+  (e: 'update:modelValue', value: M | undefined): void;
 }>();
 
 const props = withDefaults(
@@ -27,7 +27,7 @@ const props = withDefaults(
     /**
      * The current selected ref of the dropdown.
      */
-    modelValue: ModelRef | undefined;
+    modelValue: M | undefined;
     /**
      * The label text for the dropdown field (optional)
      */
@@ -35,7 +35,7 @@ const props = withDefaults(
     /**
      * List of available ref options for the dropdown
      */
-    options?: Readonly<RefOption[]>;
+    options?: Readonly<RefOption[] | ListOption<M>[]>;
     /**
      * A helper text displayed below the dropdown when there are no errors (optional).
      */
@@ -85,14 +85,16 @@ const props = withDefaults(
 );
 
 const options = computed(() =>
-  props.options?.map((opt) => ({
-    label: opt.label,
-    value: opt.ref,
-    group: opt.group,
-  })),
+  props.options?.map((opt) =>
+    'ref' in opt
+      ? {
+          label: opt.label,
+          value: opt.ref,
+          group: opt.group,
+        } as ListOption<M>
+      : opt,
+  ),
 );
-
-const arrowIcon = computed(() => (props.disabled ? 'icon-link-disabled' : 'icon-link'));
 </script>
 
 <template>
@@ -100,7 +102,7 @@ const arrowIcon = computed(() => (props.disabled ? 'icon-link-disabled' : 'icon-
     v-bind="props"
     :options="options"
     :loading-options-helper="loadingOptionsHelper"
-    :arrow-icon-large="arrowIcon"
+    :arrow-icon-large="disabled ? 'link-disabled' : 'link'"
     @update:model-value="$emit('update:modelValue', $event)"
   >
     <template v-if="slots.tooltip" #tooltip>

package/src/utils/DropdownOverlay/DropdownOverlay.vue

@@ -74,7 +74,13 @@ useElementPosition(rootRef, (pos) => {
 
 <template>
   <Teleport to="body">
-    <div ref="listRef" v-bind="$attrs" :style="optionsStyle" tabindex="-1">
+    <div
+      ref="listRef"
+      v-bind="$attrs"
+      :style="optionsStyle"
+      tabindex="-1"
+      @click.stop
+    >
       <slot ref="list" />
     </div>
   </Teleport>

package/dist/components/PlAccordion/ExpandTransition.vue2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExpandTransition.vue2.js","sources":["../../../src/components/PlAccordion/ExpandTransition.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst onStart = (el: Element) => {\n  el.classList.add('expand-collapse-fix');\n  (el as HTMLElement).style.setProperty('--component-height', el.scrollHeight + 'px');\n};\n\nconst onAfter = (el: Element) => {\n  (el as HTMLElement).style.removeProperty('--component-height');\n  el.classList.remove('expand-collapse-fix');\n};\n</script>\n\n<template>\n  <Transition name=\"expand-collapse\" @enter=\"onStart\" @leave=\"onStart\" @after-enter=\"onAfter\" @after-leave=\"onAfter\">\n    <slot/>\n  </Transition>\n</template>\n\n<style>\n.expand-collapse-fix {\n  overflow: hidden;\n}\n\n.expand-collapse-enter-active,\n.expand-collapse-leave-active {\n  transition:\n    height 0.2s ease-in-out,\n    opacity 0.2s ease-in-out;\n  height: var(--component-height);\n}\n\n.expand-collapse-enter-from,\n.expand-collapse-leave-to {\n  opacity: 0.5;\n  height: 0;\n}\n</style>\n"],"names":["onStart","el","onAfter"],"mappings":";;;;AACM,UAAAA,IAAU,CAACC,MAAgB;AAC5B,MAAAA,EAAA,UAAU,IAAI,qBAAqB,GACrCA,EAAmB,MAAM,YAAY,sBAAsBA,EAAG,eAAe,IAAI;AAAA,IACpF,GAEMC,IAAU,CAACD,MAAgB;AAC9B,MAAAA,EAAmB,MAAM,eAAe,oBAAoB,GAC1DA,EAAA,UAAU,OAAO,qBAAqB;AAAA,IAC3C;;;;;;;;;;;;;;;"}

package/dist/generated/components/svg/images/SvgRequired.vue2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SvgRequired.vue2.js","sources":["../../../../../src/generated/components/svg/images/SvgRequired.vue"],"sourcesContent":["<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->\n<script lang=\"ts\">\nimport '../svg-styles.css';\nexport default { name: 'SvgRequired' };\n</script>\n\n<template>\n  <div class=\"svg-icon SvgRequired\" style=\"width: 5px; height: 12px\" />\n</template>\n\n<style>\n  .SvgRequired { background-image: url(\"data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%225%22%20height%3D%2212%22%20viewBox%3D%220%200%205%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.51685%204.8L2.5%203.34159L3.47612%204.8L4.39607%204.12743L3.31461%202.7469L5%202.25133L4.64888%201.16106L3.00562%201.77699L3.06882%200H1.93118L1.99438%201.77699L0.351124%201.16106L0%202.25133L1.68539%202.7469L0.59691%204.12743L1.51685%204.8Z%22%20fill%3D%22%23F1222F%22%2F%3E%3C%2Fsvg%3E\"); }\n</style>\n"],"names":["_hoisted_1"],"mappings":";;;;AAOoC,MAAAA,IAAA;AAAA,EAAA,OAAA;AAAA;;;;;;"}