@platforma-sdk/ui-vue 1.42.10 → 1.42.14

package/dist/lib/ui/uikit/dist/components/PlDropdownLine/PlDropdownLine.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as Q, reactive as S, ref as g, computed as k, toRef as W, watch as h, nextTick as M, createElementBlock as p, openBlock as d, normalizeClass as X, createElementVNode as u, createVNode as z, createBlock as Y, createCommentVNode as _, toDisplayString as ee, withDirectives as F, vShow as Z, Teleport as oe, normalizeStyle as H, Fragment as I, renderList as j, unref as L, renderSlot as A, withModifiers as y } from "vue";
+import { defineComponent as Q, reactive as $, ref as k, computed as _, toRef as W, watch as f, nextTick as M, createElementBlock as p, openBlock as d, normalizeClass as X, createElementVNode as u, createVNode as z, createBlock as Y, createCommentVNode as L, toDisplayString as ee, withDirectives as F, vShow as Z, Teleport as oe, withModifiers as m, normalizeStyle as H, Fragment as I, renderList as j, unref as y, renderSlot as A } from "vue";
 import { deepEqual as B } from "../../helpers/objects.js";
 import { useClickOutside as te } from "../../composition/useClickOutside.js";
 import { useFilteredList as ie } from "../../composition/useFilteredList.js";
@@ -12,8 +12,8 @@ import { useElementPosition as ce } from "../../composition/usePosition.js";
 (function() {
   try {
     if (typeof document < "u") {
-      var f = document.createElement("style");
-      f.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(f);
+      var b = document.createElement("style");
+      b.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(b);
     }
   } catch (C) {
     console.error("vite-plugin-css-injected-by-js", C);
@@ -38,40 +38,40 @@ const ue = { class: "pl-line-dropdown__prefix" }, me = { class: "pl-line-dropdow
     clearable: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(f, { emit: C }) {
-    const $ = C, l = f, o = S({
+  setup(b, { emit: C }) {
+    const D = C, l = b, t = $({
       isOpen: !1,
       activeOption: -1,
       optionsHeight: 0
-    }), s = g(), m = g(), P = k(() => {
+    }), s = k(), v = k(), P = _(() => {
       const e = [];
-      return o.isOpen && e.push("open"), l.disabled && e.push("disabled"), e.join(" ");
-    }), r = g(""), a = ie(W(l, "options"), r), D = k(() => !!(l.clearable && o.isOpen && l.modelValue && c.value)), c = k(() => {
+      return t.isOpen && e.push("open"), l.disabled && e.push("disabled"), e.join(" ");
+    }), r = k(""), a = ie(W(l, "options"), r), E = _(() => !!(l.clearable && t.isOpen && l.modelValue && c.value)), c = _(() => {
       if (l.modelValue !== void 0) {
         const e = q();
         if (e !== -1)
           return se(l.options)[e].label;
       }
       return "";
-    }), b = g(c.value);
-    h(c, (e) => {
-      b.value = e;
+    }), x = k(c.value);
+    f(c, (e) => {
+      x.value = e;
     });
-    const N = k(() => o.isOpen && r.value && r.value.length >= c.value.length - 1 ? r.value : c.value || "...");
+    const N = _(() => t.isOpen && r.value && r.value.length >= c.value.length - 1 ? r.value : c.value || "...");
     te(s, () => {
-      l.mode === "list" && (o.isOpen = !1);
-    }), h(
-      () => b.value,
+      l.mode === "list" && (t.isOpen = !1);
+    }), f(
+      () => x.value,
       (e) => {
         c.value !== e ? r.value = e : r.value = "";
       }
-    ), h(
-      () => o.isOpen,
+    ), f(
+      () => t.isOpen,
       (e) => {
-        var t;
-        e && s.value && ((t = s.value.querySelector("input")) == null || t.focus(), M(() => E()));
+        var o;
+        e && s.value && ((o = s.value.querySelector("input")) == null || o.focus(), M(() => S()));
       }
-    ), h(
+    ), f(
       () => l.modelValue,
       () => T(),
       { immediate: !0 }
@@ -80,7 +80,7 @@ const ue = { class: "pl-line-dropdown__prefix" }, me = { class: "pl-line-dropdow
       return l.options.findIndex((e) => B(e.value, l.modelValue));
     }
     function T() {
-      o.activeOption = ne(
+      t.activeOption = ne(
         a.value.findIndex((e) => B(e.value, l.modelValue)),
         (e) => e < 0 ? 0 : e
       );
@@ -89,59 +89,59 @@ const ue = { class: "pl-line-dropdown__prefix" }, me = { class: "pl-line-dropdow
       r.value = "";
     }
     function R() {
-      l.disabled ? o.isOpen = !1 : M(() => {
-        o.isOpen = !o.isOpen;
+      l.disabled ? t.isOpen = !1 : M(() => {
+        t.isOpen = !t.isOpen;
       });
     }
     function K() {
-      l.mode === "list" && (o.isOpen = !1);
+      l.mode === "list" && (t.isOpen = !1);
     }
-    function v(e) {
-      e && ($("update:modelValue", e.value), K(), U());
+    function w(e) {
+      e && (D("update:modelValue", e.value), K(), U());
     }
-    function x(e) {
+    function g(e) {
       return B(e.value, l.modelValue);
     }
     const O = (e) => {
-      var t, i;
+      var o, i;
       const n = e.relatedTarget;
-      !((t = s.value) != null && t.contains(n)) && !((i = m.value) != null && i.contains(n)) && (r.value = "", o.isOpen = !1);
+      !((o = s.value) != null && o.contains(n)) && !((i = v.value) != null && i.contains(n)) && (r.value = "", t.isOpen = !1);
     };
     function G(e) {
-      const { activeOption: t } = o;
-      if (!o.isOpen && e.code === "Enter") {
-        o.isOpen = !0;
+      const { activeOption: o } = t;
+      if (!t.isOpen && e.code === "Enter") {
+        t.isOpen = !0;
         return;
       }
       const { length: i } = a.value;
       if (!i)
         return;
-      ["ArrowDown", "ArrowUp", "Enter"].includes(e.code) && e.preventDefault(), e.code === "Enter" && v(a.value[t]);
+      ["ArrowDown", "ArrowUp", "Enter"].includes(e.code) && e.preventDefault(), e.code === "Enter" && w(a.value[o]);
       const n = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
-      o.activeOption = Math.abs(t + n + i) % i, requestAnimationFrame(E);
+      t.activeOption = Math.abs(o + n + i) % i, requestAnimationFrame(S);
     }
-    function E() {
-      const e = m.value;
-      e && re(e.querySelector(".hovered-item"), (t) => {
-        l.mode === "list" ? de(e, t) : t.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+    function S() {
+      const e = v.value;
+      e && re(e.querySelector(".hovered-item"), (o) => {
+        l.mode === "list" ? de(e, o) : o.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
       });
     }
     function J() {
-      $("update:modelValue", void 0);
+      D("update:modelValue", void 0);
     }
-    const w = S({
+    const h = $({
       top: "0px",
       left: "0px"
     });
-    return h(m, (e) => {
+    return f(v, (e) => {
       if (e) {
-        const t = e.getBoundingClientRect();
-        o.optionsHeight = t.height, window.dispatchEvent(new CustomEvent("adjust"));
+        const o = e.getBoundingClientRect();
+        t.optionsHeight = o.height, window.dispatchEvent(new CustomEvent("adjust"));
       }
     }), ce(s, (e) => {
-      const t = e.top + e.height + 2;
-      t + o.optionsHeight > e.clientHeight ? w.top = e.top - o.optionsHeight - 2 + "px" : w.top = t + "px", w.left = e.left + "px";
-    }), (e, t) => (d(), p("div", {
+      const o = e.top + e.height + 2;
+      o + t.optionsHeight > e.clientHeight ? h.top = e.top - t.optionsHeight - 2 + "px" : h.top = o + "px", h.left = e.left + "px";
+    }), (e, o) => (d(), p("div", {
       ref_key: "container",
       ref: s,
       tabindex: "0",
@@ -152,84 +152,88 @@ const ue = { class: "pl-line-dropdown__prefix" }, me = { class: "pl-line-dropdow
     }, [
       u("div", ue, ee(l == null ? void 0 : l.prefix), 1),
       z(le, {
-        modelValue: b.value,
-        "onUpdate:modelValue": t[0] || (t[0] = (i) => b.value = i),
+        modelValue: x.value,
+        "onUpdate:modelValue": o[0] || (o[0] = (i) => x.value = i),
         placeholder: N.value,
         disabled: l.disabled,
         class: "pl-line-dropdown__input"
       }, null, 8, ["modelValue", "placeholder", "disabled"]),
       u("div", me, [
         F(u("div", ve, null, 512), [
-          [Z, !D.value]
+          [Z, !E.value]
         ]),
         F(u("div", {
           class: "pl-line-dropdown__icon-clear",
           onClick: J
         }, null, 512), [
-          [Z, D.value]
+          [Z, E.value]
         ])
       ]),
-      o.isOpen ? (d(), Y(oe, {
+      t.isOpen ? (d(), Y(oe, {
         key: 0,
         to: "body"
       }, [
         l.mode === "list" ? (d(), p("div", {
           key: 0,
           ref_key: "list",
-          ref: m,
-          style: H(w),
+          ref: v,
+          style: H(h),
           tabindex: "-1",
           class: "pl-line-dropdown__items",
-          onFocusout: O
+          onFocusout: O,
+          onClick: o[1] || (o[1] = m(() => {
+          }, ["stop"]))
         }, [
-          (d(!0), p(I, null, j(L(a), (i, n) => A(e.$slots, "item", {
+          (d(!0), p(I, null, j(y(a), (i, n) => A(e.$slots, "item", {
             key: n,
             item: i,
             textItem: "text",
-            isSelected: x(i),
-            isHovered: o.activeOption == n,
-            onClick: y((V) => v(i), ["stop"])
+            isSelected: g(i),
+            isHovered: t.activeOption == n,
+            onClick: m((V) => w(i), ["stop"])
           }, () => [
             z(ae, {
               option: i,
               "text-item": "text",
-              "is-selected": x(i),
-              "is-hovered": o.activeOption == n,
+              "is-selected": g(i),
+              "is-hovered": t.activeOption == n,
               size: "medium",
-              onClick: y((V) => v(i), ["stop"])
+              onClick: m((V) => w(i), ["stop"])
             }, null, 8, ["option", "is-selected", "is-hovered", "onClick"])
           ])), 128)),
-          L(a).length === 0 ? (d(), p("div", we, t[1] || (t[1] = [
+          y(a).length === 0 ? (d(), p("div", we, o[3] || (o[3] = [
             u("div", { class: "pl-line-dropdown__no-item-title text-s" }, "Didn't find anything that matched", -1)
-          ]))) : _("", !0)
+          ]))) : L("", !0)
         ], 36)) : l.mode === "tabs" ? (d(), p("div", {
           key: 1,
           ref_key: "list",
-          ref: m,
-          style: H(w),
+          ref: v,
+          style: H(h),
           tabindex: "-1",
           class: "pl-line-dropdown__items-tabs",
-          onFocusout: O
+          onFocusout: O,
+          onClick: o[2] || (o[2] = m(() => {
+          }, ["stop"]))
         }, [
-          (d(!0), p(I, null, j(L(a), (i, n) => A(e.$slots, "item", {
+          (d(!0), p(I, null, j(y(a), (i, n) => A(e.$slots, "item", {
             key: n,
             item: i,
-            isSelected: x(i),
-            isHovered: o.activeOption == n,
-            onClick: y((V) => v(i), ["stop"])
+            isSelected: g(i),
+            isHovered: t.activeOption == n,
+            onClick: m((V) => w(i), ["stop"])
           }, () => [
             z(pe, {
               option: i,
-              "is-selected": x(i),
-              "is-hovered": o.activeOption == n,
-              onClick: y((V) => v(i), ["stop"])
+              "is-selected": g(i),
+              "is-hovered": t.activeOption == n,
+              onClick: m((V) => w(i), ["stop"])
             }, null, 8, ["option", "is-selected", "is-hovered", "onClick"])
           ])), 128)),
-          L(a).length === 0 ? (d(), p("div", he, t[2] || (t[2] = [
+          y(a).length === 0 ? (d(), p("div", he, o[4] || (o[4] = [
             u("div", { class: "pl-line-dropdown__no-item-title text-s" }, "Didn't find anything that matched", -1)
-          ]))) : _("", !0)
-        ], 36)) : _("", !0)
-      ])) : _("", !0)
+          ]))) : L("", !0)
+        ], 36)) : L("", !0)
+      ])) : L("", !0)
     ], 34));
   }
 });

package/dist/lib/ui/uikit/dist/components/PlDropdownLine/PlDropdownLine.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownLine.vue.js","sources":["../../../../../../../../../lib/ui/uikit/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":["P","__emit","__props","data","I","q","i","B","container","ref","c","classesResult","f","g","z","y","useFilteredList","props","searchPhrase","s","$","u","j","ce","watch","_","h","inputModel","v","useClickOutside","oe","val","value","n","D","updateSelected","S","tap","options","le","r","G","item","deepEqual","l","J","length","t","d","m","$list","se","scrollIntoView","ae","emit","rect","ue","pos","downTopOffset"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAAA,GAAaC,EAAAA,MAECC,EAAAA,GAoBRC;AAAgB,UACZC,IAAAC,GAAAC,IAAAN,GAAA,IAAAO,EAAA;AAAA,MACR,QAAc;AAAA,MACd,cAAe;AAAA,MAGXC,eAEOC;AAAAA,IAGX,CAAA,GAAAC,IAAMC,KAAiBC,IAAAC,KAAAC,IAAAC,EAAA,MAAA;AACvB,YAAA,IAAS,CAAA;AAOV,aAEoBN,EAAc,UAEnBO,EAAsBC,KAAgB,MAAA,GAAAX,EAAGY,YAEf,EAAA,KAASD,UAAM,GAAA,EAAad,KAAK,GAAA;AAAA,IAGrEc,CAAAA,GAAAA,IAAMJ,gBAA0BP,GAAA,SAAA,GAAAa,CAAA,GAAAC,IAAAL,EAAA,MAAA,CAAA,EAAAT,EAAA,aAAA,EAAA,UAAAA,EAAA,cAAAe,EAAA,MAAA,GAAAA,IAAAN,EAAA,MAAA;AAClC,UAAAT,EAAA,eAAsC,QAAA;AACtC,cAAc,IAAAgB,EAAA;AAEZ,YAAA,MADkCL;AAEpC,iBAAAM,GAAAjB,EAAA,OAAA,EAAA,CAAA,EAAA;AAAA,MAEK;AACR,aAEkBG;AAAAA,IAEbe,CAAAA,GAAWC,IAAOZ,EAAAQ,EAAA,KAAA;AACtBK,IAAAA,EAAAC,GAAmBC,CAAAA,MAAAA;AACpB,MAAAH,EAAA,QAAA;AAAA,IAEK,CAAA;AAUNI,UAA2B,IAAMd,EAAA,MAAA,EAAA,UAAAI,EAAA,SAAAA,EAAA,MAAA,UAAAE,EAAA,MAAA,SAAA,IAAAF,EAAA,QAAAE,EAAA,SAAA,KAAA;AAC3BS,IAAAA,GAAMpB,GAAA,MAAA;AAKZc,MAAAA,EAAAA,SAAAA,WAAAA,EAAAA,SAAAA;AAAAA,IAAA,CAAA;MAEE,MAASC,EAAA;AAAA,MACH,CAAA,MAAoBM;AAIxBV,QAAAA,EAAA,UAAA,IAAAF,EAAA,QAAA,IAAAA,EAAA,QAAA;AAAA,MAAA;AAAA,IAIJ;MAEE,MAAoB,EAAA;AAAA;AACda,YAASxB;AAGb,aAAAE,EAAA,WAAAuB,IAAAvB,EAAA,MAAA,cAAA,OAAA,MAAA,QAAAuB,EAAA,MAAA,GAAAC,EAAA,MAAA,EAAA,CAAA;AAAA,MAAA;AAAA,IAIJ;MAEE,MAAMC,EAAe;AAAA,MACrB;MACF,EAAA,WAAA,GAAA;AAAA,IAEA;AACSlB,aAAAA,IAAc;AAEpB,aAAAX,EAAA,QAAA,UAAA,CAAA,MAAA8B,EAAA,EAAA,OAAA9B,EAAA,UAAA,CAAA;AAAA,IAGH;AACE,aAAoB+B,IAAAA;AAClBC,QAAAA,eAAcC;AAAAA,QAGdC,EAACZ,MAAW,UAAQA,CAAAA,MAAAA,EAAAA,EAAAA,OAAAA,EAAAA,UAAAA,CAAAA;AAAAA,QACtB,CAAA,MAAA,IAAA,IAAA,IAAA;AAAA,MAAA;AAAA,IAGF;AACE,aAAqB,IAAA;AAAAT,MAAAA,EAAA,QAAA;AAAA,IAGvB;AACE,aACEhB,IAAAA;AAGOA,MAAAA,EAAAA,WAAS,EAAM,SAAA,KAAA+B,EAAA,MAAA;AACrB,UAAA,SAAA,CAAA,EAAA;AAAA,MAAA,CACH;AAAA,IAGF;AACM,aAAMO,IAAS;AAEnB,MAAAnC,EAAA,SAAA,WAAA,EAAA,SAAA;AAAA,IAGF;AACMoC,eACwBA,GAAAA;AAG5B,YAAAtC,EAAA,qBAAA,EAAA,KAAA,GAAAqC,EAAA,GAAA;IAGF;AACE,aAAOE,EAAUD,GAAYzB;AAAgB,aAAAmB,EAAA,EAAA,OAAA9B,EAAA,UAAA;AAAA,IAGzC;;AACJ,UAAA;AAEI,gBAAW,EAAA;AAIjB,SAAA,IAAAI,EAAA,UAAA,QAAA,EAAA,SAAA,CAAA,MAAA,GAAAkC,IAAAhC,EAAA,UAAA,QAAAgC,EAAA,SAAA,CAAA,OAAAzB,EAAA,QAAA,IAAA,EAAA,SAAA;AAAA,IAEA;AACQ,aAAA0B;AAEN,YAAK1C,EAAe,oBAAW;AAC7B,UAAK,CAAS,EAAA,UAAA,EAAA,SAAA,SAAA;AACd,UAAA,SAAA;AAAA;AAAA,MAGI;AAEN,YAAK2C,EAAAA,QAAAA,EAAAA,IAAAA,EAAAA;AACH,UAAA,CAAAC;AAGgB;AAQZC,OAAAA,aAAe,WAAA,OAAA,EAAA,SAAoB,EAAA,IAAA,sBAA0B,GAAA,EAAA,SAAA,WAAAC,EAAAT,EAAA,MAAAP,CAAA,CAAA;AAEnE9B,YAAoByC,IAAA,EAAA,SAAA,cAAkC,IAAIE,EAE1D,SAAA,YAAA,KAAsC;AAAA,QAAA,eAAA,KAAA,IAAAb,IAAAW,IAAAG,CAAA,IAAAA,GAAA,sBAAA,CAAA;AAAA,IAGxC;AACE,iBAAmB;AACdG,YAGCA,IAAMtC;AACN,WAAMuC,GAAA,EAAA,cACRC,eAEG,GAAA,CAAAnB,MAAA;AAEN,QAAA3B,EAAA,SAAA,SAAA+C,GAAA,GAAApB,CAAA,IAAAA,EAAA,eAAA,EAAA,UAAA,UAAA,OAAA,WAAA,QAAA,UAAA;AAAA,MAAA,CAAA;AAAA,IAGH;AACEqB;AAAmC,MAAAlD,EAAA,qBAAA,MAAA;AAAA,IAGrC;AAA8B,UACvBwB,IAAArB,EAAA;AAAA,MACL,KAAM;AAAA,MACP,MAAA;AAAA,IAEK,CAAAiB;AACJ,WAAQE,EAAAd,GAAA,CAAA,MAAA;AACA2C,UAAAA,GAAAA;AACNpD,0CACO;AAAuC,UAAA,gBAAA8B,EAAA,QAAA,OAAA,cAAA,IAAA,YAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAOhD,CAAA,GAAAuB,GAAA9C,GAAsB+C,CAAAA,MAAUA;AAE5BC,YAAqB,IAAgBD,EAAAA,MAAAA,EAAAA;AAO1C,UAAA,EAAA,gBAAA,EAAA,eAAA7B,EAAA,MAAA,EAAA,MAAA,EAAA,gBAAA,IAAA,OAAAA,EAAA,MAAA,IAAA,MAAAA,EAAA,OAAA,EAAA,OAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlDropdownLine.vue.js","sources":["../../../../../../../../../lib/ui/uikit/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":["P","__emit","__props","data","I","q","i","n","B","container","ref","u","classesResult","m","y","z","O","useFilteredList","props","searchPhrase","s","$","p","j","ue","watch","w","_","inputModel","v","useClickOutside","oe","val","value","t","D","E","updateSelected","S","tap","options","le","G","item","deepEqual","l","J","length","o","d","$list","se","scrollIntoView","re","emit","rect","pe","pos","downTopOffset"],"mappings":"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"}

package/dist/lib/ui/uikit/dist/components/PlDropdownMulti/PlDropdownMulti.vue.js

@@ -1,11 +1,11 @@
-import { defineComponent as Q, useSlots as W, ref as N, useTemplateRef as X, reactive as oo, computed as c, unref as a, createElementBlock as d, watch as eo, watchPostEffect as lo, openBlock as i, createElementVNode as s, createCommentVNode as u, normalizeClass as ro, createBlock as m, createVNode as to, withDirectives as io, vModelText as no, Fragment as C, renderList as V, withModifiers as z, withCtx as b, createTextVNode as O, toDisplayString as v, renderSlot as I } from "vue";
+import { defineComponent as Q, useSlots as W, ref as N, useTemplateRef as X, reactive as oo, computed as c, unref as a, createElementBlock as d, watch as eo, watchPostEffect as lo, openBlock as i, createElementVNode as s, createCommentVNode as u, normalizeClass as ro, createBlock as m, createVNode as to, withDirectives as io, vModelText as no, Fragment as C, renderList as V, withModifiers as z, withCtx as b, createTextVNode as O, toDisplayString as v, renderSlot as q } from "vue";
 import { tap as ao } from "../../helpers/functions.js";
 import po from "../PlTooltip/PlTooltip.vue.js";
-import P from "../PlChip/PlChip.vue.js";
+import I from "../PlChip/PlChip.vue.js";
 import so from "../../utils/DoubleContour.vue.js";
 import { useLabelNotch as co } from "../../utils/useLabelNotch.js";
 import uo from "../DropdownListItem.vue.js";
-import { deepEqual as _, deepIncludes as T } from "../../helpers/objects.js";
+import { deepEqual as _, deepIncludes as P } from "../../helpers/objects.js";
 import { normalizeListOptions as ho } from "../../helpers/utils.js";
 import mo from "../../utils/DropdownOverlay/DropdownOverlay.vue.js";
 import vo from "../PlIcon24/PlIcon24.vue.js";
@@ -35,7 +35,7 @@ const go = ["tabindex"], xo = { class: "pl-dropdown-multi__container" }, bo = {
   class: "pl-dropdown-multi__helper"
 }, Mo = {
   name: "PlDropdownMulti"
-}, qo = /* @__PURE__ */ Q({
+}, Uo = /* @__PURE__ */ Q({
   ...Mo,
   props: {
     modelValue: { default: () => [] },
@@ -49,7 +49,7 @@ const go = ["tabindex"], xo = { class: "pl-dropdown-multi__container" }, bo = {
   },
   emits: ["update:modelValue"],
   setup(w, { emit: k }) {
-    const U = k, B = (o) => U("update:modelValue", o), q = W(), n = w, h = N(), M = N(), f = X("overlay"), l = oo({
+    const T = k, B = (o) => T("update:modelValue", o), U = W(), n = w, h = N(), M = N(), f = X("overlay"), l = oo({
       search: "",
       activeOption: -1,
       open: !1,
@@ -61,18 +61,18 @@ const go = ["tabindex"], xo = { class: "pl-dropdown-multi__container" }, bo = {
         return e.label.toLowerCase().includes(t) ? !0 : typeof e.value == "string" ? e.value.toLowerCase().includes(t) : e.value === l.search;
       }) : [...r]).map((e) => ({
         ...e,
-        selected: T(o, e.value)
+        selected: P(o, e.value)
       }));
-    }), $ = c(() => n.options === void 0), L = c(() => $.value ? !0 : n.disabled), j = c(() => L.value ? void 0 : "0"), S = () => {
+    }), A = c(() => n.options === void 0), L = c(() => A.value ? !0 : n.disabled), j = c(() => L.value ? void 0 : "0"), S = () => {
       l.activeOption = ao(
         x.value.findIndex((o) => _(o.value, n.modelValue)),
         (o) => o < 0 ? 0 : o
       );
-    }, A = (o) => {
+    }, H = (o) => {
       var r;
       const e = a(g);
-      B(T(e, o) ? e.filter((t) => !_(t, o)) : [...e, o]), l.search = "", (r = h == null ? void 0 : h.value) == null || r.focus();
-    }, H = (o) => B(a(g).filter((r) => !_(r, o))), K = () => {
+      B(P(e, o) ? e.filter((t) => !_(t, o)) : [...e, o]), l.search = "", (r = h == null ? void 0 : h.value) == null || r.focus();
+    }, $ = (o) => B(a(g).filter((r) => !_(r, o))), K = () => {
       var o;
       return (o = M.value) == null ? void 0 : o.focus();
     }, Y = () => {
@@ -92,7 +92,7 @@ const go = ["tabindex"], xo = { class: "pl-dropdown-multi__container" }, bo = {
       const p = a(x), { length: y } = p;
       if (!y)
         return;
-      ["ArrowDown", "ArrowUp", "Enter"].includes(o.code) && o.preventDefault(), o.code === "Enter" && A(p[t].value);
+      ["ArrowDown", "ArrowUp", "Enter"].includes(o.code) && o.preventDefault(), o.code === "Enter" && H(p[t].value);
       const J = o.code === "ArrowDown" ? 1 : o.code === "ArrowUp" ? -1 : 0;
       l.activeOption = Math.abs(t + J + y) % y, requestAnimationFrame(() => {
         var F;
@@ -135,12 +135,12 @@ const go = ["tabindex"], xo = { class: "pl-dropdown-multi__container" }, bo = {
               [no, l.search]
             ]),
             l.open ? u("", !0) : (i(), d("div", ko, [
-              (i(!0), d(C, null, V(Z.value, (e, t) => (i(), m(a(P), {
+              (i(!0), d(C, null, V(Z.value, (e, t) => (i(), m(a(I), {
                 key: t,
                 closeable: "",
                 small: "",
                 onClick: r[2] || (r[2] = z((p) => l.open = !0, ["stop"])),
-                onClose: (p) => H(e.value)
+                onClose: (p) => $(e.value)
               }, {
                 default: b(() => [
                   O(v(e.label || e.value), 1)
@@ -149,11 +149,11 @@ const go = ["tabindex"], xo = { class: "pl-dropdown-multi__container" }, bo = {
               }, 1032, ["onClose"]))), 128))
             ])),
             s("div", Lo, [
-              $.value ? (i(), m(a(vo), {
+              A.value ? (i(), m(a(vo), {
                 key: 0,
                 name: "loading"
               })) : u("", !0),
-              I(o.$slots, "append"),
+              q(o.$slots, "append"),
               s("div", {
                 class: "pl-dropdown-multi__arrow-wrapper",
                 onClick: z(Y, ["stop"])
@@ -165,13 +165,13 @@ const go = ["tabindex"], xo = { class: "pl-dropdown-multi__container" }, bo = {
           o.label ? (i(), d("label", yo, [
             o.required ? (i(), m(wo, { key: 0 })) : u("", !0),
             s("span", null, v(o.label), 1),
-            a(q).tooltip ? (i(), m(a(po), {
+            a(U).tooltip ? (i(), m(a(po), {
               key: 1,
               class: "info",
               position: "top"
             }, {
               tooltip: b(() => [
-                I(o.$slots, "tooltip")
+                q(o.$slots, "tooltip")
               ]),
               _: 3
             })) : u("", !0)
@@ -188,11 +188,11 @@ const go = ["tabindex"], xo = { class: "pl-dropdown-multi__container" }, bo = {
           }, {
             default: b(() => [
               s("div", Co, [
-                (i(!0), d(C, null, V(Z.value, (e, t) => (i(), m(a(P), {
+                (i(!0), d(C, null, V(Z.value, (e, t) => (i(), m(a(I), {
                   key: t,
                   closeable: "",
                   small: "",
-                  onClose: (p) => H(e.value)
+                  onClose: (p) => $(e.value)
                 }, {
                   default: b(() => [
                     O(v(e.label || e.value), 1)
@@ -208,7 +208,7 @@ const go = ["tabindex"], xo = { class: "pl-dropdown-multi__container" }, bo = {
                 "is-hovered": l.activeOption == t,
                 size: "medium",
                 "use-checkbox": "",
-                onClick: z((p) => A(e.value), ["stop"])
+                onClick: z((p) => H(e.value), ["stop"])
               }, null, 8, ["option", "is-selected", "is-hovered", "onClick"]))), 128)),
               x.value.length ? u("", !0) : (i(), d("div", Vo, "Nothing found"))
             ]),
@@ -222,6 +222,6 @@ const go = ["tabindex"], xo = { class: "pl-dropdown-multi__container" }, bo = {
   }
 });
 export {
-  qo as default
+  Uo as default
 };
 //# sourceMappingURL=PlDropdownMulti.vue.js.map

package/dist/lib/ui/uikit/dist/components/PlDropdownMulti/PlDropdownMulti.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownMulti.vue.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlDropdownMulti/PlDropdownMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting multiple values from a list of options\n */\nexport default {\n  name: 'PlDropdownMulti',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport './pl-dropdown-multi.scss';\nimport { computed, reactive, ref, unref, useSlots, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport { tap } from '../../helpers/functions';\nimport { PlTooltip } from '../PlTooltip';\nimport { PlChip } from '../PlChip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport type { ListOption } from '../../types';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport { deepEqual, deepIncludes } from '../../helpers/objects';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport DropdownOverlay from '../../utils/DropdownOverlay/DropdownOverlay.vue';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit('update:modelValue', v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: M[];\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n  }>(),\n  {\n    modelValue: () => [],\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    placeholder: '...',\n    required: false,\n    disabled: false,\n    options: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlay = useTemplateRef('overlay');\n\nconst data = reactive({\n  search: '',\n  activeOption: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n  if (data.open && props.modelValue.length > 0) {\n    return props.placeholder;\n  }\n\n  return props.modelValue.length > 0 ? '' : props.placeholder;\n});\n\nconst normalizedOptionsRef = computed(() => normalizeListOptions(props.options ?? []));\n\nconst selectedOptionsRef = computed(() => {\n  return selectedValuesRef.value.map((v) => normalizedOptionsRef.value.find((opt) => deepEqual(opt.value, v))).filter((v) => v !== undefined);\n});\n\nconst filteredOptionsRef = computed(() => {\n  const selectedValues = unref(selectedValuesRef);\n\n  const options = unref(normalizedOptionsRef);\n\n  return (\n    data.search\n      ? options.filter((opt) => {\n        const search = data.search.toLowerCase();\n\n        if (opt.label.toLowerCase().includes(search)) {\n          return true;\n        }\n\n        if (typeof opt.value === 'string') {\n          return opt.value.toLowerCase().includes(search);\n        }\n\n        return opt.value === data.search;\n      })\n      : [...options]\n  ).map((opt) => ({\n    ...opt,\n    selected: deepIncludes(selectedValues, opt.value),\n  }));\n});\n\nconst isLoadingOptions = computed(() => {\n  return props.options === undefined;\n});\n\nconst isDisabled = computed(() => {\n  if (isLoadingOptions.value) {\n    return true;\n  }\n\n  return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst updateActiveOption = () => {\n  data.activeOption = tap(\n    filteredOptionsRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n    (v) => (v < 0 ? 0 : v),\n  );\n};\n\nconst selectOption = (v: M) => {\n  const values = unref(selectedValuesRef);\n  emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n  data.search = '';\n  rootRef?.value?.focus();\n};\n\nconst unselectOption = (d: M) => emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleModel = () => {\n  data.open = !data.open;\n  if (!data.open) {\n    data.search = '';\n  }\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n    data.search = '';\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  const { open, activeOption } = data;\n\n  if (!open) {\n    if (e.code === 'Enter') {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === 'Escape') {\n    data.open = false;\n    rootRef.value?.focus();\n  }\n\n  const filteredOptions = unref(filteredOptionsRef);\n\n  const { length } = filteredOptions;\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    selectOption(filteredOptions[activeOption].value);\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(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n  () => props.modelValue,\n  () => updateActiveOption(),\n  { immediate: true },\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  data.search;\n\n  if (data.open) {\n    overlay.value?.scrollIntoActive();\n  }\n});\n</script>\n\n<template>\n  <div class=\"pl-dropdown-multi__envelope\" @click=\"setFocusOnInput\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-dropdown-multi\"\n      :class=\"{ open: data.open, error, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-dropdown-multi__container\">\n        <div class=\"pl-dropdown-multi__field\">\n          <input\n            ref=\"input\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"placeholderRef\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            @focus=\"data.open = true\"\n          />\n          <div v-if=\"!data.open\" class=\"chips-container\">\n            <PlChip v-for=\"(opt, i) in selectedOptionsRef\" :key=\"i\" closeable small @click.stop=\"data.open = true\" @close=\"unselectOption(opt.value)\">\n              {{ opt.label || opt.value }}\n            </PlChip>\n          </div>\n\n          <div class=\"pl-dropdown-multi__controls\">\n            <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n            <slot name=\"append\" />\n            <div class=\"pl-dropdown-multi__arrow-wrapper\" @click.stop=\"toggleModel\">\n              <div class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\">\n          <SvgRequired v-if=\"required\" />\n          <span>{{ label }}</span>\n          <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <DropdownOverlay\n          v-if=\"data.open\"\n          ref=\"overlay\"\n          :root=\"rootRef\"\n          class=\"pl-dropdown-multi__options\"\n          :gap=\"5\"\n          tabindex=\"-1\"\n          @focusout=\"onFocusOut\"\n        >\n          <div class=\"pl-dropdown-multi__open-chips-container\">\n            <PlChip v-for=\"(opt, i) in selectedOptionsRef\" :key=\"i\" closeable small @close=\"unselectOption(opt.value)\">\n              {{ opt.label || opt.value }}\n            </PlChip>\n          </div>\n          <DropdownListItem\n            v-for=\"(item, index) in filteredOptionsRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :text-item=\"'text'\"\n            :is-selected=\"item.selected\"\n            :is-hovered=\"data.activeOption == index\"\n            size=\"medium\"\n            use-checkbox\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div v-if=\"!filteredOptionsRef.length\" class=\"nothing-found\">Nothing found</div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-dropdown-multi__contour\" />\n      </div>\n    </div>\n    <div v-if=\"error\" class=\"pl-dropdown-multi__error\">{{ getErrorMessage(error) }}</div>\n    <div v-else-if=\"helper\" class=\"pl-dropdown-multi__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"names":["Ee","emit","emitModel","v","P","S","V","e","U","Y","s","z","c","N","$","h","Z","t","ee","_","selectedValues","options","unref","K","p","A","pe","E","l","k","w","a","search","o","opt","n","deepIncludes","x","isLoadingOptions","D","tap","filteredOptionsRef","ae","selectOption","values","deepEqual","data","event","rootRef","i","L","length","filteredOptions","d","M","W","I","useLabelNotch","oe","updateActiveOption"],"mappings":"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"}
+{"version":3,"file":"PlDropdownMulti.vue.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlDropdownMulti/PlDropdownMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting multiple values from a list of options\n */\nexport default {\n  name: 'PlDropdownMulti',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport './pl-dropdown-multi.scss';\nimport { computed, reactive, ref, unref, useSlots, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport { tap } from '../../helpers/functions';\nimport { PlTooltip } from '../PlTooltip';\nimport { PlChip } from '../PlChip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport type { ListOption } from '../../types';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport { deepEqual, deepIncludes } from '../../helpers/objects';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport DropdownOverlay from '../../utils/DropdownOverlay/DropdownOverlay.vue';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit('update:modelValue', v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: M[];\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n  }>(),\n  {\n    modelValue: () => [],\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    placeholder: '...',\n    required: false,\n    disabled: false,\n    options: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlay = useTemplateRef('overlay');\n\nconst data = reactive({\n  search: '',\n  activeOption: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n  if (data.open && props.modelValue.length > 0) {\n    return props.placeholder;\n  }\n\n  return props.modelValue.length > 0 ? '' : props.placeholder;\n});\n\nconst normalizedOptionsRef = computed(() => normalizeListOptions(props.options ?? []));\n\nconst selectedOptionsRef = computed(() => {\n  return selectedValuesRef.value.map((v) => normalizedOptionsRef.value.find((opt) => deepEqual(opt.value, v))).filter((v) => v !== undefined);\n});\n\nconst filteredOptionsRef = computed(() => {\n  const selectedValues = unref(selectedValuesRef);\n\n  const options = unref(normalizedOptionsRef);\n\n  return (\n    data.search\n      ? options.filter((opt) => {\n        const search = data.search.toLowerCase();\n\n        if (opt.label.toLowerCase().includes(search)) {\n          return true;\n        }\n\n        if (typeof opt.value === 'string') {\n          return opt.value.toLowerCase().includes(search);\n        }\n\n        return opt.value === data.search;\n      })\n      : [...options]\n  ).map((opt) => ({\n    ...opt,\n    selected: deepIncludes(selectedValues, opt.value),\n  }));\n});\n\nconst isLoadingOptions = computed(() => {\n  return props.options === undefined;\n});\n\nconst isDisabled = computed(() => {\n  if (isLoadingOptions.value) {\n    return true;\n  }\n\n  return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst updateActiveOption = () => {\n  data.activeOption = tap(\n    filteredOptionsRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n    (v) => (v < 0 ? 0 : v),\n  );\n};\n\nconst selectOption = (v: M) => {\n  const values = unref(selectedValuesRef);\n  emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n  data.search = '';\n  rootRef?.value?.focus();\n};\n\nconst unselectOption = (d: M) => emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleModel = () => {\n  data.open = !data.open;\n  if (!data.open) {\n    data.search = '';\n  }\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n    data.search = '';\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  const { open, activeOption } = data;\n\n  if (!open) {\n    if (e.code === 'Enter') {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === 'Escape') {\n    data.open = false;\n    rootRef.value?.focus();\n  }\n\n  const filteredOptions = unref(filteredOptionsRef);\n\n  const { length } = filteredOptions;\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    selectOption(filteredOptions[activeOption].value);\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(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n  () => props.modelValue,\n  () => updateActiveOption(),\n  { immediate: true },\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  data.search;\n\n  if (data.open) {\n    overlay.value?.scrollIntoActive();\n  }\n});\n</script>\n\n<template>\n  <div class=\"pl-dropdown-multi__envelope\" @click=\"setFocusOnInput\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-dropdown-multi\"\n      :class=\"{ open: data.open, error, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-dropdown-multi__container\">\n        <div class=\"pl-dropdown-multi__field\">\n          <input\n            ref=\"input\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"placeholderRef\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            @focus=\"data.open = true\"\n          />\n          <div v-if=\"!data.open\" class=\"chips-container\">\n            <PlChip v-for=\"(opt, i) in selectedOptionsRef\" :key=\"i\" closeable small @click.stop=\"data.open = true\" @close=\"unselectOption(opt.value)\">\n              {{ opt.label || opt.value }}\n            </PlChip>\n          </div>\n\n          <div class=\"pl-dropdown-multi__controls\">\n            <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n            <slot name=\"append\" />\n            <div class=\"pl-dropdown-multi__arrow-wrapper\" @click.stop=\"toggleModel\">\n              <div class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\">\n          <SvgRequired v-if=\"required\" />\n          <span>{{ label }}</span>\n          <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <DropdownOverlay\n          v-if=\"data.open\"\n          ref=\"overlay\"\n          :root=\"rootRef\"\n          class=\"pl-dropdown-multi__options\"\n          :gap=\"5\"\n          tabindex=\"-1\"\n          @focusout=\"onFocusOut\"\n        >\n          <div class=\"pl-dropdown-multi__open-chips-container\">\n            <PlChip v-for=\"(opt, i) in selectedOptionsRef\" :key=\"i\" closeable small @close=\"unselectOption(opt.value)\">\n              {{ opt.label || opt.value }}\n            </PlChip>\n          </div>\n          <DropdownListItem\n            v-for=\"(item, index) in filteredOptionsRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :text-item=\"'text'\"\n            :is-selected=\"item.selected\"\n            :is-hovered=\"data.activeOption == index\"\n            size=\"medium\"\n            use-checkbox\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div v-if=\"!filteredOptionsRef.length\" class=\"nothing-found\">Nothing found</div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-dropdown-multi__contour\" />\n      </div>\n    </div>\n    <div v-if=\"error\" class=\"pl-dropdown-multi__error\">{{ getErrorMessage(error) }}</div>\n    <div v-else-if=\"helper\" class=\"pl-dropdown-multi__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"names":["Ee","emit","emitModel","v","P","S","V","e","Y","s","z","c","N","$","h","Z","t","ee","_","selectedValues","options","unref","K","p","A","pe","E","l","k","w","a","search","o","opt","n","deepIncludes","x","isLoadingOptions","D","tap","filteredOptionsRef","ae","selectOption","values","deepEqual","data","event","rootRef","i","L","length","filteredOptions","d","M","W","I","useLabelNotch","oe","updateActiveOption"],"mappings":"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"}