@milaboratories/uikit 2.3.29 → 2.4.0

package/dist/components/PlDropdownLine/PlDropdownLine.vue.js

@@ -1,17 +1,17 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(`.pl-line-dropdown{display:flex;align-items:center;width:fit-content;padding:8px 0;box-sizing:border-box;position:relative;outline:none;max-width:256px}.pl-line-dropdown:focus-within:after{border-bottom:2px solid var(--border-color-focus)}.pl-line-dropdown__prefix,.pl-line-dropdown__input{text-transform:uppercase}.pl-line-dropdown:hover:after{border-bottom:2px solid var(--border-color-focus)}.pl-line-dropdown:after{content:"";position:absolute;bottom:0;border-bottom:2px solid var(--color-div-grey);width:100%}.pl-line-dropdown *{color:var(--txt-01);font-family:var(--font-family-base);font-size:13px;font-style:normal;font-weight:600;line-height:14px;letter-spacing:.52px}.pl-line-dropdown__input::placeholder{color:var(--txt-mask)}.pl-line-dropdown__icon{display:flex;align-items:center;min-width:16px;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-line-dropdown__icon-clear{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%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%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%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%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;background-color:var(--color-ic-02)}.pl-line-dropdown.open .pl-line-dropdown__icon{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='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%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='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%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-line-dropdown.open:after{border-bottom:2px solid var(--border-color-focus)}.pl-line-dropdown__icon-wrapper{padding:4px 2px 4px 0}.pl-line-dropdown.disabled *{color:var(--txt-mask);cursor:not-allowed}.pl-line-dropdown.disabled .pl-line-dropdown__icon{background-color:var(--color-div-grey)!important}.pl-line-dropdown.disabled:after{border-bottom:2px solid var(--color-div-grey)!important}.pl-line-dropdown.disabled:hover:after{border-bottom:2px solid var(--color-div-grey)!important}.pl-line-dropdown__no-item{padding:8px 12px}.pl-line-dropdown__no-item-title{color:var(--txt-03)!important;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}.pl-line-dropdown__items{position:absolute;top:0;z-index:var(--z-dropdown-options);border-radius:6px;padding:12px 0;border:1px solid var(--color-div-grey);width:256px;box-sizing:border-box;max-height:320px;background-color:var(--bg-elevated-01);box-shadow:var(--shadow-m);--thumb-color: var(--ic-02);overflow-y:auto}.pl-line-dropdown__items::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-line-dropdown__items::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-line-dropdown__items::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-line-dropdown__items-tabs{display:flex;position:absolute;top:0;z-index:var(--z-dropdown-options);background-color:var(--color-div-bw);overflow-x:scroll;max-width:400px;padding:6px 12px 12px;border:1px solid var(--color-div-grey);border-radius:6px;box-shadow:var(--shadow-m);--thumb-color: var(--ic-02);overflow-x:auto}.pl-line-dropdown__items-tabs::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-line-dropdown__items-tabs::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-line-dropdown__items-tabs::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}`)),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-import { defineComponent as W, reactive as B, ref as g, computed as y, toRef as X, watch as h, nextTick as D, createElementBlock as d, openBlock as a, normalizeClass as Y, createElementVNode as p, createVNode as C, createBlock as Z, createCommentVNode as O, toDisplayString as ee, withDirectives as F, vShow as A, Teleport as te, normalizeStyle as H, Fragment as T, renderList as L, unref as k, renderSlot as M, withModifiers as b } from "vue";
+import { defineComponent as W, reactive as B, ref as y, computed as O, toRef as X, watch as _, nextTick as D, createElementBlock as d, openBlock as r, normalizeClass as Y, createElementVNode as c, createVNode as C, createBlock as Z, createCommentVNode as k, toDisplayString as ee, withDirectives as F, vShow as A, Teleport as te, withModifiers as f, normalizeStyle as H, Fragment as T, renderList as L, unref as b, renderSlot as M } from "vue";
 
 import { deepEqual as S } from "../../helpers/objects.js";
 import { useClickOutside as oe } from "../../composition/useClickOutside.js";
 import { useFilteredList as ne } from "../../composition/useFilteredList.js";
 import ie from "./ResizableInput.vue.js";
 import { tap as le, tapIf as se } from "../../helpers/functions.js";
-import { scrollIntoView as ae } from "../../helpers/dom.js";
-import re from "../DropdownListItem.vue.js";
+import { scrollIntoView as re } from "../../helpers/dom.js";
+import ae from "../DropdownListItem.vue.js";
 import de from "../TabItem.vue.js";
-import { normalizeListOptions as ce } from "../../helpers/utils.js";
-import { useElementPosition as ue } from "../../composition/usePosition.js";
-const pe = { class: "pl-line-dropdown__prefix" }, fe = { class: "pl-line-dropdown__icon-wrapper" }, me = { class: "pl-line-dropdown__icon" }, ve = {
+import { normalizeListOptions as ue } from "../../helpers/utils.js";
+import { useElementPosition as pe } from "../../composition/usePosition.js";
+const ce = { class: "pl-line-dropdown__prefix" }, fe = { class: "pl-line-dropdown__icon-wrapper" }, me = { class: "pl-line-dropdown__icon" }, ve = {
   key: 0,
   class: "pl-line-dropdown__no-item"
 }, he = {
@@ -31,39 +31,39 @@ const pe = { class: "pl-line-dropdown__prefix" }, fe = { class: "pl-line-dropdow
   },
   emits: ["update:modelValue"],
   setup(P, { emit: q }) {
-    const I = q, i = P, o = B({
+    const I = q, i = P, n = B({
       isOpen: !1,
       activeOption: -1,
       optionsHeight: 0
-    }), c = g(), f = g(), z = y(() => {
+    }), u = y(), m = y(), z = O(() => {
       const e = [];
-      return o.isOpen && e.push("open"), i.disabled && e.push("disabled"), e.join(" ");
-    }), s = g(""), r = ne(X(i, "options"), s), $ = y(() => !!(i.clearable && o.isOpen && i.modelValue && u.value)), u = y(() => {
+      return n.isOpen && e.push("open"), i.disabled && e.push("disabled"), e.join(" ");
+    }), s = y(""), a = ne(X(i, "options"), s), $ = O(() => !!(i.clearable && n.isOpen && i.modelValue && p.value)), p = O(() => {
       if (i.modelValue !== void 0) {
         const e = j();
         if (e !== -1)
-          return ce(i.options)[e].label;
+          return ue(i.options)[e].label;
       }
       return "";
-    }), _ = g(u.value);
-    h(u, (e) => {
-      _.value = e;
+    }), w = y(p.value);
+    _(p, (e) => {
+      w.value = e;
     });
-    const N = y(() => o.isOpen && s.value && s.value.length >= u.value.length - 1 ? s.value : u.value || "...");
-    oe(c, () => {
-      i.mode === "list" && (o.isOpen = !1);
-    }), h(
-      () => _.value,
+    const N = O(() => n.isOpen && s.value && s.value.length >= p.value.length - 1 ? s.value : p.value || "...");
+    oe(u, () => {
+      i.mode === "list" && (n.isOpen = !1);
+    }), _(
+      () => w.value,
       (e) => {
-        u.value !== e ? s.value = e : s.value = "";
+        p.value !== e ? s.value = e : s.value = "";
       }
-    ), h(
-      () => o.isOpen,
+    ), _(
+      () => n.isOpen,
       (e) => {
-        var n;
-        e && c.value && ((n = c.value.querySelector("input")) == null || n.focus(), D(() => E()));
+        var t;
+        e && u.value && ((t = u.value.querySelector("input")) == null || t.focus(), D(() => E()));
       }
-    ), h(
+    ), _(
       () => i.modelValue,
       () => R(),
       { immediate: !0 }
@@ -72,8 +72,8 @@ const pe = { class: "pl-line-dropdown__prefix" }, fe = { class: "pl-line-dropdow
       return i.options.findIndex((e) => S(e.value, i.modelValue));
     }
     function R() {
-      o.activeOption = le(
-        r.value.findIndex((e) => S(e.value, i.modelValue)),
+      n.activeOption = le(
+        a.value.findIndex((e) => S(e.value, i.modelValue)),
         (e) => e < 0 ? 0 : e
       );
     }
@@ -81,147 +81,151 @@ const pe = { class: "pl-line-dropdown__prefix" }, fe = { class: "pl-line-dropdow
       s.value = "";
     }
     function K() {
-      i.disabled ? o.isOpen = !1 : D(() => {
-        o.isOpen = !o.isOpen;
+      i.disabled ? n.isOpen = !1 : D(() => {
+        n.isOpen = !n.isOpen;
       });
     }
     function G() {
-      i.mode === "list" && (o.isOpen = !1);
+      i.mode === "list" && (n.isOpen = !1);
     }
-    function m(e) {
+    function v(e) {
       e && (I("update:modelValue", e.value), G(), U());
     }
-    function w(e) {
+    function g(e) {
       return S(e.value, i.modelValue);
     }
     const x = (e) => {
-      var t, l;
-      const n = e.relatedTarget;
-      !((t = c.value) != null && t.contains(n)) && !((l = f.value) != null && l.contains(n)) && (s.value = "", o.isOpen = !1);
+      var o, l;
+      const t = e.relatedTarget;
+      !((o = u.value) != null && o.contains(t)) && !((l = m.value) != null && l.contains(t)) && (s.value = "", n.isOpen = !1);
     };
     function J(e) {
-      const { activeOption: n } = o;
-      if (!o.isOpen && e.code === "Enter") {
-        o.isOpen = !0;
+      const { activeOption: t } = n;
+      if (!n.isOpen && e.code === "Enter") {
+        n.isOpen = !0;
         return;
       }
-      const { length: t } = r.value;
-      if (!t)
+      const { length: o } = a.value;
+      if (!o)
         return;
-      ["ArrowDown", "ArrowUp", "Enter"].includes(e.code) && e.preventDefault(), e.code === "Enter" && m(r.value[n]);
+      ["ArrowDown", "ArrowUp", "Enter"].includes(e.code) && e.preventDefault(), e.code === "Enter" && v(a.value[t]);
       const l = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
-      o.activeOption = Math.abs(n + l + t) % t, requestAnimationFrame(E);
+      n.activeOption = Math.abs(t + l + o) % o, requestAnimationFrame(E);
     }
     function E() {
-      const e = f.value;
-      e && se(e.querySelector(".hovered-item"), (n) => {
-        i.mode === "list" ? ae(e, n) : n.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+      const e = m.value;
+      e && se(e.querySelector(".hovered-item"), (t) => {
+        i.mode === "list" ? re(e, t) : t.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
       });
     }
     function Q() {
       I("update:modelValue", void 0);
     }
-    const v = B({
+    const h = B({
       top: "0px",
       left: "0px"
     });
-    return h(f, (e) => {
+    return _(m, (e) => {
       if (e) {
-        const n = e.getBoundingClientRect();
-        o.optionsHeight = n.height, window.dispatchEvent(new CustomEvent("adjust"));
+        const t = e.getBoundingClientRect();
+        n.optionsHeight = t.height, window.dispatchEvent(new CustomEvent("adjust"));
       }
-    }), ue(c, (e) => {
-      const t = e.top + e.height + 2;
-      t + o.optionsHeight > e.clientHeight ? v.top = e.top - o.optionsHeight - 2 + "px" : v.top = t + "px", v.left = e.left + "px";
-    }), (e, n) => (a(), d("div", {
+    }), pe(u, (e) => {
+      const o = e.top + e.height + 2;
+      o + n.optionsHeight > e.clientHeight ? h.top = e.top - n.optionsHeight - 2 + "px" : h.top = o + "px", h.left = e.left + "px";
+    }), (e, t) => (r(), d("div", {
       ref_key: "container",
-      ref: c,
+      ref: u,
       tabindex: "0",
       class: Y([z.value, "pl-line-dropdown uc-pointer"]),
       onKeydown: J,
       onFocusout: x,
       onClick: K
     }, [
-      p("div", pe, ee(i == null ? void 0 : i.prefix), 1),
+      c("div", ce, ee(i == null ? void 0 : i.prefix), 1),
       C(ie, {
-        modelValue: _.value,
-        "onUpdate:modelValue": n[0] || (n[0] = (t) => _.value = t),
+        modelValue: w.value,
+        "onUpdate:modelValue": t[0] || (t[0] = (o) => w.value = o),
         placeholder: N.value,
         disabled: i.disabled,
         class: "pl-line-dropdown__input"
       }, null, 8, ["modelValue", "placeholder", "disabled"]),
-      p("div", fe, [
-        F(p("div", me, null, 512), [
+      c("div", fe, [
+        F(c("div", me, null, 512), [
           [A, !$.value]
         ]),
-        F(p("div", {
+        F(c("div", {
           class: "pl-line-dropdown__icon-clear",
           onClick: Q
         }, null, 512), [
           [A, $.value]
         ])
       ]),
-      o.isOpen ? (a(), Z(te, {
+      n.isOpen ? (r(), Z(te, {
         key: 0,
         to: "body"
       }, [
-        i.mode === "list" ? (a(), d("div", {
+        i.mode === "list" ? (r(), d("div", {
           key: 0,
           ref_key: "list",
-          ref: f,
-          style: H(v),
+          ref: m,
+          style: H(h),
           tabindex: "-1",
           class: "pl-line-dropdown__items",
-          onFocusout: x
+          onFocusout: x,
+          onClick: t[1] || (t[1] = f(() => {
+          }, ["stop"]))
         }, [
-          (a(!0), d(T, null, L(k(r), (t, l) => M(e.$slots, "item", {
+          (r(!0), d(T, null, L(b(a), (o, l) => M(e.$slots, "item", {
             key: l,
-            item: t,
+            item: o,
             textItem: "text",
-            isSelected: w(t),
-            isHovered: o.activeOption == l,
-            onClick: b((V) => m(t), ["stop"])
+            isSelected: g(o),
+            isHovered: n.activeOption == l,
+            onClick: f((V) => v(o), ["stop"])
           }, () => [
-            C(re, {
-              option: t,
+            C(ae, {
+              option: o,
               "text-item": "text",
-              "is-selected": w(t),
-              "is-hovered": o.activeOption == l,
+              "is-selected": g(o),
+              "is-hovered": n.activeOption == l,
               size: "medium",
-              onClick: b((V) => m(t), ["stop"])
+              onClick: f((V) => v(o), ["stop"])
             }, null, 8, ["option", "is-selected", "is-hovered", "onClick"])
           ])), 128)),
-          k(r).length === 0 ? (a(), d("div", ve, n[1] || (n[1] = [
-            p("div", { class: "pl-line-dropdown__no-item-title text-s" }, "Didn't find anything that matched", -1)
-          ]))) : O("", !0)
-        ], 36)) : i.mode === "tabs" ? (a(), d("div", {
+          b(a).length === 0 ? (r(), d("div", ve, t[3] || (t[3] = [
+            c("div", { class: "pl-line-dropdown__no-item-title text-s" }, "Didn't find anything that matched", -1)
+          ]))) : k("", !0)
+        ], 36)) : i.mode === "tabs" ? (r(), d("div", {
           key: 1,
           ref_key: "list",
-          ref: f,
-          style: H(v),
+          ref: m,
+          style: H(h),
           tabindex: "-1",
           class: "pl-line-dropdown__items-tabs",
-          onFocusout: x
+          onFocusout: x,
+          onClick: t[2] || (t[2] = f(() => {
+          }, ["stop"]))
         }, [
-          (a(!0), d(T, null, L(k(r), (t, l) => M(e.$slots, "item", {
+          (r(!0), d(T, null, L(b(a), (o, l) => M(e.$slots, "item", {
             key: l,
-            item: t,
-            isSelected: w(t),
-            isHovered: o.activeOption == l,
-            onClick: b((V) => m(t), ["stop"])
+            item: o,
+            isSelected: g(o),
+            isHovered: n.activeOption == l,
+            onClick: f((V) => v(o), ["stop"])
           }, () => [
             C(de, {
-              option: t,
-              "is-selected": w(t),
-              "is-hovered": o.activeOption == l,
-              onClick: b((V) => m(t), ["stop"])
+              option: o,
+              "is-selected": g(o),
+              "is-hovered": n.activeOption == l,
+              onClick: f((V) => v(o), ["stop"])
             }, null, 8, ["option", "is-selected", "is-hovered", "onClick"])
           ])), 128)),
-          k(r).length === 0 ? (a(), d("div", he, n[2] || (n[2] = [
-            p("div", { class: "pl-line-dropdown__no-item-title text-s" }, "Didn't find anything that matched", -1)
-          ]))) : O("", !0)
-        ], 36)) : O("", !0)
-      ])) : O("", !0)
+          b(a).length === 0 ? (r(), d("div", he, t[4] || (t[4] = [
+            c("div", { class: "pl-line-dropdown__no-item-title text-s" }, "Didn't find anything that matched", -1)
+          ]))) : k("", !0)
+        ], 36)) : k("", !0)
+      ])) : k("", !0)
     ], 34));
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownLine.vue.js","sources":["../../../src/components/PlDropdownLine/PlDropdownLine.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport './pl-dropdown-line.scss';\nimport type { StyleValue } from 'vue';\nimport { computed, nextTick, reactive, ref, toRef, watch } from 'vue';\nimport { deepEqual } from '../../helpers/objects';\nimport { useClickOutside } from '../../composition/useClickOutside';\nimport { useFilteredList } from '../../composition/useFilteredList';\nimport ResizableInput from './ResizableInput.vue';\nimport { tapIf, tap } from '../../helpers/functions';\nimport { scrollIntoView } from '../../helpers/dom';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport TabItem from '../TabItem.vue';\nimport type { ListOption } from '../../types';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { useElementPosition } from '../../composition/usePosition';\n\nconst emit = defineEmits(['update:modelValue']); // at the top always\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: unknown;\n    disabled?: boolean;\n    prefix?: string;\n    options: ListOption[]; // @todo extend with size field\n    placeholder?: string;\n    mode?: 'list' | 'tabs';\n    tabsContainerStyles?: StyleValue;\n    clearable?: boolean;\n  }>(),\n  {\n    mode: 'list',\n    placeholder: 'Select..',\n    prefix: '',\n    tabsContainerStyles: undefined,\n    clearable: false,\n  },\n);\n\nconst data = reactive({\n  isOpen: false,\n  activeOption: -1,\n  optionsHeight: 0,\n});\n\nconst container = ref<HTMLElement>();\n\nconst list = ref<HTMLElement>();\n\nconst classes = computed(() => {\n  const classesResult = [];\n  if (data.isOpen) {\n    classesResult.push('open');\n  }\n  if (props.disabled) {\n    classesResult.push('disabled');\n  }\n  return classesResult.join(' ');\n});\n\nconst searchPhrase = ref<string>('');\n\nconst options = useFilteredList(toRef(props, 'options'), searchPhrase);\n\nconst canShowClearBtn = computed<boolean>(() => !!(props.clearable && data.isOpen && props.modelValue && modelText.value));\n\nconst modelText = computed<string>(() => {\n  if (props.modelValue !== undefined) {\n    const index = getIndexForModelInItems();\n    if (index !== -1) {\n      const item = normalizeListOptions(props.options)[index];\n      return item.label;\n    }\n  }\n  return '';\n});\n\nconst inputModel = ref(modelText.value);\n\nwatch(modelText, (v) => {\n  inputModel.value = v;\n});\n\nconst placeholderVal = computed(() => {\n  if (data.isOpen) {\n    if (searchPhrase.value && searchPhrase.value.length >= modelText.value.length - 1) {\n      return searchPhrase.value;\n    }\n  }\n\n  return modelText.value || '...';\n});\n\nuseClickOutside(container, () => {\n  if (props.mode === 'list') {\n    data.isOpen = false;\n  }\n});\n\nwatch(\n  () => inputModel.value,\n  (val) => {\n    if (modelText.value !== val) {\n      searchPhrase.value = val;\n    } else {\n      searchPhrase.value = '';\n    }\n  },\n);\n\nwatch(\n  () => data.isOpen,\n  (value: boolean) => {\n    if (value && container.value) {\n      container.value.querySelector('input')?.focus();\n      nextTick(() => scrollIntoActive());\n    }\n  },\n);\n\nwatch(\n  () => props.modelValue,\n  () => updateSelected(),\n  { immediate: true },\n);\n\nfunction getIndexForModelInItems(): number | -1 {\n  return props.options.findIndex((o: ListOption) => {\n    return deepEqual(o.value, props.modelValue);\n  });\n}\n\nfunction updateSelected() {\n  data.activeOption = tap(\n    options.value.findIndex((o: ListOption) => {\n      return deepEqual(o.value, props.modelValue);\n    }),\n    (v) => (v < 0 ? 0 : v),\n  );\n}\n\nfunction resetSearchPhrase() {\n  searchPhrase.value = '';\n}\n\nfunction toggleList(): void {\n  if (props.disabled) {\n    data.isOpen = false;\n  } else {\n    nextTick(() => {\n      data.isOpen = !data.isOpen;\n    });\n  }\n}\n\nfunction closePopupIfNeeded() {\n  if (props.mode === 'list') {\n    data.isOpen = false;\n  }\n}\n\nfunction selectItem(item?: ListOption): void {\n  if (item) {\n    emit('update:modelValue', item.value);\n    closePopupIfNeeded();\n    resetSearchPhrase();\n  }\n}\n\nfunction isItemSelected(item: ListOption): boolean {\n  return deepEqual(item.value, props.modelValue);\n}\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!container.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {\n    searchPhrase.value = '';\n    data.isOpen = false;\n  }\n};\n\nfunction handleKeydown(e: { code: string; preventDefault(): void }) {\n  const { activeOption } = data;\n\n  if (!data.isOpen && e.code === 'Enter') {\n    data.isOpen = true;\n    return;\n  }\n\n  const { length } = options.value;\n\n  if (!length) {\n    return;\n  }\n\n  if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  if (e.code === 'Enter') {\n    selectItem(options.value[activeOption]);\n  }\n\n  const d = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n  data.activeOption = Math.abs(activeOption + d + length) % length;\n\n  requestAnimationFrame(scrollIntoActive);\n}\n\nfunction scrollIntoActive() {\n  const $list = list.value;\n  if (!$list) {\n    return;\n  }\n  tapIf($list.querySelector('.hovered-item'), (el: Element) => {\n    if (props.mode === 'list') {\n      scrollIntoView($list, el as HTMLElement);\n    } else {\n      el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\n    }\n  });\n}\n\nfunction clearModel() {\n  emit('update:modelValue', undefined);\n}\n\nconst optionsStyle = reactive({\n  top: '0px',\n  left: '0px',\n});\n\nwatch(list, (el) => {\n  if (el) {\n    const rect = el.getBoundingClientRect();\n    data.optionsHeight = rect.height;\n    window.dispatchEvent(new CustomEvent('adjust'));\n  }\n});\n\nuseElementPosition(container, (pos) => {\n  const gap = 2;\n\n  const downTopOffset = pos.top + pos.height + gap;\n\n  if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n    optionsStyle.top = pos.top - data.optionsHeight - gap + 'px';\n  } else {\n    optionsStyle.top = downTopOffset + 'px';\n  }\n\n  optionsStyle.left = pos.left + 'px';\n});\n</script>\n\n<template>\n  <div\n    ref=\"container\"\n    tabindex=\"0\"\n    :class=\"classes\"\n    class=\"pl-line-dropdown uc-pointer\"\n    @keydown=\"handleKeydown\"\n    @focusout=\"onFocusOut\"\n    @click=\"toggleList\"\n  >\n    <div class=\"pl-line-dropdown__prefix\">{{ props?.prefix }}</div>\n\n    <ResizableInput v-model=\"inputModel\" :placeholder=\"placeholderVal\" :disabled=\"props.disabled\" class=\"pl-line-dropdown__input\" />\n\n    <div class=\"pl-line-dropdown__icon-wrapper\">\n      <div v-show=\"!canShowClearBtn\" class=\"pl-line-dropdown__icon\" />\n      <div v-show=\"canShowClearBtn\" class=\"pl-line-dropdown__icon-clear\" @click=\"clearModel\" />\n    </div>\n    <Teleport v-if=\"data.isOpen\" to=\"body\">\n      <div v-if=\"props.mode === 'list'\" ref=\"list\" :style=\"optionsStyle\" tabindex=\"-1\" class=\"pl-line-dropdown__items\" @focusout=\"onFocusOut\">\n        <template v-for=\"(item, index) in options\" :key=\"index\">\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :text-item=\"'text'\"\n            :is-selected=\"isItemSelected(item)\"\n            :is-hovered=\"data.activeOption == index\"\n            @click.stop=\"selectItem(item)\"\n          >\n            <DropdownListItem\n              :option=\"item\"\n              :text-item=\"'text'\"\n              :is-selected=\"isItemSelected(item)\"\n              :is-hovered=\"data.activeOption == index\"\n              size=\"medium\"\n              @click.stop=\"selectItem(item)\"\n            />\n          </slot>\n        </template>\n\n        <div v-if=\"options.length === 0\" class=\"pl-line-dropdown__no-item\">\n          <div class=\"pl-line-dropdown__no-item-title text-s\">Didn't find anything that matched</div>\n        </div>\n      </div>\n      <div\n        v-else-if=\"props.mode === 'tabs'\"\n        ref=\"list\"\n        :style=\"optionsStyle\"\n        tabindex=\"-1\"\n        class=\"pl-line-dropdown__items-tabs\"\n        @focusout=\"onFocusOut\"\n      >\n        <template v-for=\"(item, index) in options\" :key=\"index\">\n          <slot name=\"item\" :item=\"item\" :is-selected=\"isItemSelected(item)\" :is-hovered=\"data.activeOption == index\" @click.stop=\"selectItem(item)\">\n            <TabItem :option=\"item\" :is-selected=\"isItemSelected(item)\" :is-hovered=\"data.activeOption == index\" @click.stop=\"selectItem(item)\" />\n          </slot>\n        </template>\n        <div v-if=\"options.length === 0\" class=\"pl-line-dropdown__no-item\">\n          <div class=\"pl-line-dropdown__no-item-title text-s\">Didn't find anything that matched</div>\n        </div>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"names":["emit","__emit","props","__props","data","reactive","container","ref","list","classes","computed","classesResult","searchPhrase","options","useFilteredList","toRef","canShowClearBtn","modelText","index","getIndexForModelInItems","normalizeListOptions","inputModel","watch","v","placeholderVal","useClickOutside","val","value","_a","nextTick","scrollIntoActive","updateSelected","o","deepEqual","tap","resetSearchPhrase","toggleList","closePopupIfNeeded","selectItem","item","isItemSelected","onFocusOut","event","relatedTarget","_b","handleKeydown","activeOption","length","d","$list","tapIf","el","scrollIntoView","clearModel","optionsStyle","rect","useElementPosition","pos","downTopOffset"],"mappings":"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"}
+{"version":3,"file":"PlDropdownLine.vue.js","sources":["../../../src/components/PlDropdownLine/PlDropdownLine.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport './pl-dropdown-line.scss';\nimport type { StyleValue } from 'vue';\nimport { computed, nextTick, reactive, ref, toRef, watch } from 'vue';\nimport { deepEqual } from '../../helpers/objects';\nimport { useClickOutside } from '../../composition/useClickOutside';\nimport { useFilteredList } from '../../composition/useFilteredList';\nimport ResizableInput from './ResizableInput.vue';\nimport { tapIf, tap } from '../../helpers/functions';\nimport { scrollIntoView } from '../../helpers/dom';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport TabItem from '../TabItem.vue';\nimport type { ListOption } from '../../types';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { useElementPosition } from '../../composition/usePosition';\n\nconst emit = defineEmits(['update:modelValue']); // at the top always\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: unknown;\n    disabled?: boolean;\n    prefix?: string;\n    options: ListOption[]; // @todo extend with size field\n    placeholder?: string;\n    mode?: 'list' | 'tabs';\n    tabsContainerStyles?: StyleValue;\n    clearable?: boolean;\n  }>(),\n  {\n    mode: 'list',\n    placeholder: 'Select..',\n    prefix: '',\n    tabsContainerStyles: undefined,\n    clearable: false,\n  },\n);\n\nconst data = reactive({\n  isOpen: false,\n  activeOption: -1,\n  optionsHeight: 0,\n});\n\nconst container = ref<HTMLElement>();\n\nconst list = ref<HTMLElement>();\n\nconst classes = computed(() => {\n  const classesResult = [];\n  if (data.isOpen) {\n    classesResult.push('open');\n  }\n  if (props.disabled) {\n    classesResult.push('disabled');\n  }\n  return classesResult.join(' ');\n});\n\nconst searchPhrase = ref<string>('');\n\nconst options = useFilteredList(toRef(props, 'options'), searchPhrase);\n\nconst canShowClearBtn = computed<boolean>(() => !!(props.clearable && data.isOpen && props.modelValue && modelText.value));\n\nconst modelText = computed<string>(() => {\n  if (props.modelValue !== undefined) {\n    const index = getIndexForModelInItems();\n    if (index !== -1) {\n      const item = normalizeListOptions(props.options)[index];\n      return item.label;\n    }\n  }\n  return '';\n});\n\nconst inputModel = ref(modelText.value);\n\nwatch(modelText, (v) => {\n  inputModel.value = v;\n});\n\nconst placeholderVal = computed(() => {\n  if (data.isOpen) {\n    if (searchPhrase.value && searchPhrase.value.length >= modelText.value.length - 1) {\n      return searchPhrase.value;\n    }\n  }\n\n  return modelText.value || '...';\n});\n\nuseClickOutside(container, () => {\n  if (props.mode === 'list') {\n    data.isOpen = false;\n  }\n});\n\nwatch(\n  () => inputModel.value,\n  (val) => {\n    if (modelText.value !== val) {\n      searchPhrase.value = val;\n    } else {\n      searchPhrase.value = '';\n    }\n  },\n);\n\nwatch(\n  () => data.isOpen,\n  (value: boolean) => {\n    if (value && container.value) {\n      container.value.querySelector('input')?.focus();\n      nextTick(() => scrollIntoActive());\n    }\n  },\n);\n\nwatch(\n  () => props.modelValue,\n  () => updateSelected(),\n  { immediate: true },\n);\n\nfunction getIndexForModelInItems(): number | -1 {\n  return props.options.findIndex((o: ListOption) => {\n    return deepEqual(o.value, props.modelValue);\n  });\n}\n\nfunction updateSelected() {\n  data.activeOption = tap(\n    options.value.findIndex((o: ListOption) => {\n      return deepEqual(o.value, props.modelValue);\n    }),\n    (v) => (v < 0 ? 0 : v),\n  );\n}\n\nfunction resetSearchPhrase() {\n  searchPhrase.value = '';\n}\n\nfunction toggleList(): void {\n  if (props.disabled) {\n    data.isOpen = false;\n  } else {\n    nextTick(() => {\n      data.isOpen = !data.isOpen;\n    });\n  }\n}\n\nfunction closePopupIfNeeded() {\n  if (props.mode === 'list') {\n    data.isOpen = false;\n  }\n}\n\nfunction selectItem(item?: ListOption): void {\n  if (item) {\n    emit('update:modelValue', item.value);\n    closePopupIfNeeded();\n    resetSearchPhrase();\n  }\n}\n\nfunction isItemSelected(item: ListOption): boolean {\n  return deepEqual(item.value, props.modelValue);\n}\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!container.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {\n    searchPhrase.value = '';\n    data.isOpen = false;\n  }\n};\n\nfunction handleKeydown(e: { code: string; preventDefault(): void }) {\n  const { activeOption } = data;\n\n  if (!data.isOpen && e.code === 'Enter') {\n    data.isOpen = true;\n    return;\n  }\n\n  const { length } = options.value;\n\n  if (!length) {\n    return;\n  }\n\n  if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  if (e.code === 'Enter') {\n    selectItem(options.value[activeOption]);\n  }\n\n  const d = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n  data.activeOption = Math.abs(activeOption + d + length) % length;\n\n  requestAnimationFrame(scrollIntoActive);\n}\n\nfunction scrollIntoActive() {\n  const $list = list.value;\n  if (!$list) {\n    return;\n  }\n  tapIf($list.querySelector('.hovered-item'), (el: Element) => {\n    if (props.mode === 'list') {\n      scrollIntoView($list, el as HTMLElement);\n    } else {\n      el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\n    }\n  });\n}\n\nfunction clearModel() {\n  emit('update:modelValue', undefined);\n}\n\nconst optionsStyle = reactive({\n  top: '0px',\n  left: '0px',\n});\n\nwatch(list, (el) => {\n  if (el) {\n    const rect = el.getBoundingClientRect();\n    data.optionsHeight = rect.height;\n    window.dispatchEvent(new CustomEvent('adjust'));\n  }\n});\n\nuseElementPosition(container, (pos) => {\n  const gap = 2;\n\n  const downTopOffset = pos.top + pos.height + gap;\n\n  if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n    optionsStyle.top = pos.top - data.optionsHeight - gap + 'px';\n  } else {\n    optionsStyle.top = downTopOffset + 'px';\n  }\n\n  optionsStyle.left = pos.left + 'px';\n});\n</script>\n\n<template>\n  <div\n    ref=\"container\"\n    tabindex=\"0\"\n    :class=\"classes\"\n    class=\"pl-line-dropdown uc-pointer\"\n    @keydown=\"handleKeydown\"\n    @focusout=\"onFocusOut\"\n    @click=\"toggleList\"\n  >\n    <div class=\"pl-line-dropdown__prefix\">{{ props?.prefix }}</div>\n\n    <ResizableInput v-model=\"inputModel\" :placeholder=\"placeholderVal\" :disabled=\"props.disabled\" class=\"pl-line-dropdown__input\" />\n\n    <div class=\"pl-line-dropdown__icon-wrapper\">\n      <div v-show=\"!canShowClearBtn\" class=\"pl-line-dropdown__icon\" />\n      <div v-show=\"canShowClearBtn\" class=\"pl-line-dropdown__icon-clear\" @click=\"clearModel\" />\n    </div>\n    <Teleport v-if=\"data.isOpen\" to=\"body\">\n      <div\n        v-if=\"props.mode === 'list'\"\n        ref=\"list\"\n        :style=\"optionsStyle\"\n        tabindex=\"-1\"\n        class=\"pl-line-dropdown__items\"\n        @focusout=\"onFocusOut\"\n        @click.stop\n      >\n        <template v-for=\"(item, index) in options\" :key=\"index\">\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :text-item=\"'text'\"\n            :is-selected=\"isItemSelected(item)\"\n            :is-hovered=\"data.activeOption == index\"\n            @click.stop=\"selectItem(item)\"\n          >\n            <DropdownListItem\n              :option=\"item\"\n              :text-item=\"'text'\"\n              :is-selected=\"isItemSelected(item)\"\n              :is-hovered=\"data.activeOption == index\"\n              size=\"medium\"\n              @click.stop=\"selectItem(item)\"\n            />\n          </slot>\n        </template>\n\n        <div v-if=\"options.length === 0\" class=\"pl-line-dropdown__no-item\">\n          <div class=\"pl-line-dropdown__no-item-title text-s\">Didn't find anything that matched</div>\n        </div>\n      </div>\n      <div\n        v-else-if=\"props.mode === 'tabs'\"\n        ref=\"list\"\n        :style=\"optionsStyle\"\n        tabindex=\"-1\"\n        class=\"pl-line-dropdown__items-tabs\"\n        @focusout=\"onFocusOut\"\n        @click.stop\n      >\n        <template v-for=\"(item, index) in options\" :key=\"index\">\n          <slot name=\"item\" :item=\"item\" :is-selected=\"isItemSelected(item)\" :is-hovered=\"data.activeOption == index\" @click.stop=\"selectItem(item)\">\n            <TabItem :option=\"item\" :is-selected=\"isItemSelected(item)\" :is-hovered=\"data.activeOption == index\" @click.stop=\"selectItem(item)\" />\n          </slot>\n        </template>\n        <div v-if=\"options.length === 0\" class=\"pl-line-dropdown__no-item\">\n          <div class=\"pl-line-dropdown__no-item-title text-s\">Didn't find anything that matched</div>\n        </div>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"names":["emit","__emit","props","__props","data","reactive","container","ref","list","classes","computed","classesResult","searchPhrase","options","useFilteredList","toRef","canShowClearBtn","modelText","index","getIndexForModelInItems","normalizeListOptions","inputModel","watch","v","placeholderVal","useClickOutside","val","value","_a","nextTick","scrollIntoActive","updateSelected","o","deepEqual","tap","resetSearchPhrase","toggleList","closePopupIfNeeded","selectItem","item","isItemSelected","onFocusOut","event","relatedTarget","_b","handleKeydown","activeOption","length","d","$list","tapIf","el","scrollIntoView","clearModel","optionsStyle","rect","useElementPosition","pos","downTopOffset"],"mappings":"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"}

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

@@ -1,129 +1,74 @@
-import { ModelRef, RefOption } from '../../types';
+import { ListOption, RefOption } from '../../types';
 /**
  * A component for selecting one value from a list of options
  */
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
-    /**
-     * The current selected ref of the dropdown.
-     */
-    modelValue: ModelRef | undefined;
-    /**
-     * The label text for the dropdown field (optional)
-     */
-    label?: string;
-    /**
-     * List of available ref options for the dropdown
-     */
-    options?: Readonly<RefOption[]>;
-    /**
-     * A helper text displayed below the dropdown when there are no errors (optional).
-     */
-    helper?: string;
-    /**
-     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).
-     */
-    loadingOptionsHelper?: string;
-    /**
-     * Error message displayed below the dropdown (optional)
-     */
-    error?: unknown;
-    /**
-     * Placeholder text shown when no value is selected.
-     */
-    placeholder?: string;
-    /**
-     * Enables a button to clear the selected value (default: false)
-     */
-    clearable?: boolean;
-    /**
-     * If `true`, the dropdown component is marked as required.
-     */
-    required?: boolean;
-    /**
-     * If `true`, the dropdown component is disabled and cannot be interacted with.
-     */
-    disabled?: boolean;
-    /**
-     * Option list item size
-     */
-    optionSize?: "small" | "medium";
-}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "update:modelValue": (value: Readonly<{
-        __isRef: true;
-        blockId: string;
-        name: string;
-        requireEnrichments?: true | undefined;
-    }> | undefined) => any;
-}, string, import('vue').PublicProps, Readonly<{
-    /**
-     * The current selected ref of the dropdown.
-     */
-    modelValue: ModelRef | undefined;
-    /**
-     * The label text for the dropdown field (optional)
-     */
-    label?: string;
-    /**
-     * List of available ref options for the dropdown
-     */
-    options?: Readonly<RefOption[]>;
-    /**
-     * A helper text displayed below the dropdown when there are no errors (optional).
-     */
-    helper?: string;
-    /**
-     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).
-     */
-    loadingOptionsHelper?: string;
-    /**
-     * Error message displayed below the dropdown (optional)
-     */
-    error?: unknown;
-    /**
-     * Placeholder text shown when no value is selected.
-     */
-    placeholder?: string;
-    /**
-     * Enables a button to clear the selected value (default: false)
-     */
-    clearable?: boolean;
-    /**
-     * If `true`, the dropdown component is marked as required.
-     */
-    required?: boolean;
-    /**
-     * If `true`, the dropdown component is disabled and cannot be interacted with.
-     */
-    disabled?: boolean;
-    /**
-     * Option list item size
-     */
-    optionSize?: "small" | "medium";
-}> & Readonly<{
-    "onUpdate:modelValue"?: ((value: Readonly<{
-        __isRef: true;
-        blockId: string;
-        name: string;
-        requireEnrichments?: true | undefined;
-    }> | undefined) => any) | undefined;
-}>, {
-    options: Readonly<RefOption[]>;
-    label: string;
-    error: undefined;
-    required: boolean;
-    disabled: boolean;
-    helper: string;
-    loadingOptionsHelper: string;
-    placeholder: string;
-    clearable: boolean;
-    optionSize: "small" | "medium";
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
-    tooltip?(_: {}): any;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
+declare const _default: <M = Readonly<{
+    __isRef: true;
+    blockId: string;
+    name: string;
+    requireEnrichments?: true | undefined;
+}>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: M | undefined) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & {
+        /**
+         * The current selected ref of the dropdown.
+         */
+        modelValue: M | undefined;
+        /**
+         * The label text for the dropdown field (optional)
+         */
+        label?: string;
+        /**
+         * List of available ref options for the dropdown
+         */
+        options?: Readonly<RefOption[] | ListOption<M>[]>;
+        /**
+         * A helper text displayed below the dropdown when there are no errors (optional).
+         */
+        helper?: string;
+        /**
+         * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).
+         */
+        loadingOptionsHelper?: string;
+        /**
+         * Error message displayed below the dropdown (optional)
+         */
+        error?: unknown;
+        /**
+         * Placeholder text shown when no value is selected.
+         */
+        placeholder?: string;
+        /**
+         * Enables a button to clear the selected value (default: false)
+         */
+        clearable?: boolean;
+        /**
+         * If `true`, the dropdown component is marked as required.
+         */
+        required?: boolean;
+        /**
+         * If `true`, the dropdown component is disabled and cannot be interacted with.
+         */
+        disabled?: boolean;
+        /**
+         * Option list item size
+         */
+        optionSize?: "small" | "medium";
+    } & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        tooltip?(_: {}): any;
     };
+    emit: (e: "update:modelValue", value: M | undefined) => void;
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};
 //# sourceMappingURL=PlDropdownRef.vue.d.ts.map

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":"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;0BAIQ,MAAM;iBAQf,MAAM;eAIR,OAAO;gBAYN,OAAO,GAAG,QAAQ;;qBAuFN,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"}
+{"version":3,"file":"PlDropdownRef.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"names":[],"mappings":"AAmHA,OAAO,KAAK,EAAE,UAAU,EAAY,SAAS,EAAE,MAAM,aAAa,CAAC;AAInE;;GAEG;yBACc,CAAC;;;;;iBACJ,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;WAuL1D,mBAAmB,CAAC;;;QAzKxB;;WAEG;oBACS,CAAC,GAAG,SAAS;QACzB;;WAEG;gBACK,MAAM;QACd;;WAEG;kBACO,QAAQ,CAAC,SAAS,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACjD;;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;qBACU,OAAO,GAAG,QAAQ;mBA8H2D,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBAlCkB,GAAG;;cA9I1B,mBAAmB,SAAS,CAAC,GAAG,SAAS,KAAG,IAAI;;;;YAqLV,OAAO,CAAC,OAAO,WAAW,CAAC;;AAjMvE,wBAiM4E;AAG5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}