@milaboratories/uikit 2.4.2 → 2.4.3

package/dist/components/PlDropdownMulti/PlDropdownMulti.vue.js

@@ -1,34 +1,33 @@
 (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.pl-dropdown-multi{--contour-color: var(--txt-01);--contour-border-width: 1px;--options-bg: #fff;--option-hover-bg: var(--btn-sec-hover-grey);--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);position:relative;outline:none;min-height:var(--control-height);border-radius:6px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base)}[data-theme=dark] .pl-dropdown-multi{--options-bg: #1B1B1F}.pl-dropdown-multi__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown-multi label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-dropdown-multi label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown-multi__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);padding:1px;color:var(--txt-01)}.pl-dropdown-multi__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown-multi__options{position:absolute;top:0;z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);border-radius:6px;max-height:244px;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14;--thumb-color: var(--ic-02);overflow-y:auto}.pl-dropdown-multi__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dropdown-multi__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown-multi__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dropdown-multi__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:20px;background-color:#fff;opacity:.5;font-style:italic}.pl-dropdown-multi__options .option{position:relative;padding:0 10px;height:var(--control-height);line-height:20px;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:12px;--base-icon: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M19.5%204.5H4.5L4.5%2019.5H19.5V4.5ZM4.5%203C3.67157%203%203%203.67157%203%204.5V19.5C3%2020.3284%203.67157%2021%204.5%2021H19.5C20.3284%2021%2021%2020.3284%2021%2019.5V4.5C21%203.67157%2020.3284%203%2019.5%203H4.5Z'%20fill='%23110529'/%3e%3c/svg%3e");--checked-icon: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='2'%20fill='%23110529'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M17.5431%208.51739L10.3333%2016.0877L6.45691%2012.0174L7.54312%2010.9829L10.3333%2013.9127L16.4569%207.48291L17.5431%208.51739Z'%20fill='white'/%3e%3c/svg%3e")}.pl-dropdown-multi__options .option .pl-dropdown-multi__checkmark{cursor:pointer;outline:none;border-radius:4px;background:var(--base-icon) no-repeat center;width:24px;height:24px}[data-theme=dark] .pl-dropdown-multi__options .option .pl-dropdown-multi__checkmark{--base-icon: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M19.5%204.5H4.5L4.5%2019.5H19.5V4.5ZM4.5%203C3.67157%203%203%203.67157%203%204.5V19.5C3%2020.3284%203.67157%2021%204.5%2021H19.5C20.3284%2021%2021%2020.3284%2021%2019.5V4.5C21%203.67157%2020.3284%203%2019.5%203H4.5Z'%20fill='white'/%3e%3c/svg%3e");--checked-icon: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='2'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M17.5431%208.51739L10.3333%2016.0877L6.45691%2012.0174L7.54312%2010.9829L10.3333%2013.9127L16.4569%207.48291L17.5431%208.51739Z'%20fill='%23110529'/%3e%3c/svg%3e")}.pl-dropdown-multi__options .option>span{display:block;overflow:hidden;white-space:nowrap;max-width:100%;text-overflow:ellipsis}.pl-dropdown-multi__options .option.selected{background-color:var(--color-active-select)}.pl-dropdown-multi__options .option.selected .pl-dropdown-multi__checkmark{background:var(--checked-icon) no-repeat center;width:24px;height:24px}.pl-dropdown-multi__options .option.active:not(.selected){background-color:var(--option-hover-bg)}.pl-dropdown-multi__options .option:hover{background-color:var(--option-hover-bg)}.pl-dropdown-multi__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding-left:11px;min-height:var(--control-height);line-height:20px;cursor:pointer;display:flex;flex-direction:row;align-items:center}.pl-dropdown-multi__field .chips-container{position:absolute;top:0;left:0;bottom:0;right:30px;overflow:hidden;padding:0 60px 0 11px;line-height:20px;color:var(--contour-color);display:flex;gap:8px;align-items:center}.pl-dropdown-multi__field input{min-height:calc(var(--control-height) - 2px);line-height:20px;font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 20px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-dropdown-multi__field input:focus{outline:none}.pl-dropdown-multi__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown-multi__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown-multi__field:hover .clear{display:block}.pl-dropdown-multi__controls{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:auto}.pl-dropdown-multi__controls .mask-16,.pl-dropdown-multi__controls .mask-24{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-dropdown-multi__controls .mask-loading{--icon-color: var(--ic-accent);animation:spin 2.5s linear infinite}.pl-dropdown-multi__arrow-wrapper{display:flex;align-items:center;min-height:var(--control-height);padding-right:11px}.pl-dropdown-multi .arrow-icon{cursor:pointer}.pl-dropdown-multi .arrow-icon.arrow-icon-default{transition:transform .2s;background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown-multi__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown-multi__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown-multi.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-dropdown-multi .clear{display:none;position:absolute;top:50%;transform:translateY(-50%);right:36px;z-index:1;background: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") no-repeat center;width:16px;height:16px;cursor:pointer}.pl-dropdown-multi.open,.pl-dropdown-multi:focus-within{z-index:1}.pl-dropdown-multi.open .pl-dropdown-multi__container .label,.pl-dropdown-multi:focus-within .pl-dropdown-multi__container .label{color:var(--txt-focus)}.pl-dropdown-multi.open .pl-dropdown-multi__container{z-index:1000}.pl-dropdown-multi.open .pl-dropdown-multi__field{border-radius:6px 6px 0 0}.pl-dropdown-multi.open .arrow{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='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-dropdown-multi:hover{--contour-color: var(--control-hover-color)}.pl-dropdown-multi:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown-multi:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-dropdown-multi.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-dropdown-multi.disabled{--contour-color: var(--color-dis-01);--control-mask-fill: var(--color-dis-01);--label-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none}.pl-dropdown-multi.disabled .mask-loading{animation:spin 2.5s linear infinite;--icon-color: var(--ic-accent)}.pl-dropdown-multi__open-chips-container{padding:12px}.pl-dropdown-multi__open-chips-container .pl-chip{margin-right:4px;margin-bottom:4px}`)),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { defineComponent as X, useSlots as Y, ref as N, useTemplateRef as Z, reactive as ee, computed as p, unref as a, watch as oe, watchPostEffect as te, createElementBlock as d, openBlock as r, createElementVNode as u, createCommentVNode as f, normalizeClass as le, createBlock as m, createVNode as ne, withDirectives as re, vModelText as se, Fragment as g, renderList as C, withModifiers as O, withCtx as y, createTextVNode as q, toDisplayString as v, renderSlot as B } from "vue";
+import { defineComponent as X, useSlots as Y, ref as q, useTemplateRef as Z, reactive as ee, computed as p, unref as s, watch as oe, watchPostEffect as te, createElementBlock as d, openBlock as r, createElementVNode as u, createCommentVNode as f, normalizeClass as le, createBlock as m, createVNode as ne, withDirectives as re, vModelText as se, Fragment as b, renderList as g, withModifiers as C, withCtx as w, createTextVNode as B, toDisplayString as v, renderSlot as I } from "vue";
 
-import { tap as ae } from "../../helpers/functions.js";
-import ie from "../PlTooltip/PlTooltip.vue.js";
+import ae from "../PlTooltip/PlTooltip.vue.js";
 import T from "../PlChip/PlChip.vue.js";
-import de from "../../utils/DoubleContour.vue.js";
-import { useLabelNotch as ue } from "../../utils/useLabelNotch.js";
-import ce from "../DropdownListItem.vue.js";
-import { deepEqual as k, deepIncludes as x } from "../../helpers/objects.js";
-import { normalizeListOptions as pe } from "../../helpers/utils.js";
-import fe from "../../utils/DropdownOverlay/DropdownOverlay.vue.js";
-import me from "../PlIcon24/PlIcon24.vue.js";
-import ve from "../../generated/components/svg/images/SvgRequired.vue2.js";
-import { getErrorMessage as he } from "../../helpers/error.js";
-const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = { class: "pl-dropdown-multi__field" }, ke = ["disabled", "placeholder"], be = {
+import ie from "../../utils/DoubleContour.vue.js";
+import { useLabelNotch as de } from "../../utils/useLabelNotch.js";
+import ue from "../DropdownListItem.vue.js";
+import { deepEqual as O, deepIncludes as z } from "../../helpers/objects.js";
+import { normalizeListOptions as ce } from "../../helpers/utils.js";
+import pe from "../../utils/DropdownOverlay/DropdownOverlay.vue.js";
+import fe from "../PlIcon24/PlIcon24.vue.js";
+import me from "../../generated/components/svg/images/SvgRequired.vue.js";
+import { getErrorMessage as ve } from "../../helpers/error.js";
+const he = ["tabindex"], _e = { class: "pl-dropdown-multi__container" }, we = { class: "pl-dropdown-multi__field" }, ye = ["disabled", "placeholder"], ke = {
   key: 0,
   class: "chips-container"
-}, ge = { class: "pl-dropdown-multi__controls" }, Ce = { key: 0 }, Oe = { class: "pl-dropdown-multi__open-chips-container" }, Ve = {
+}, be = { class: "pl-dropdown-multi__controls" }, ge = { key: 0 }, Ce = { class: "pl-dropdown-multi__open-chips-container" }, Oe = {
   key: 0,
   class: "nothing-found"
-}, $e = {
+}, Ve = {
   key: 0,
   class: "pl-dropdown-multi__error"
-}, Ae = {
+}, $e = {
   key: 1,
   class: "pl-dropdown-multi__helper"
-}, Ee = {
+}, Ae = {
   name: "PlDropdownMulti"
-}, Ue = /* @__PURE__ */ X({
-  ...Ee,
+}, xe = /* @__PURE__ */ X({
+  ...Ae,
   props: {
     modelValue: { default: () => [] },
     label: { default: void 0 },
@@ -40,31 +39,28 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(z, { emit: S }) {
-    const P = S, V = (e) => P("update:modelValue", e), U = Y(), s = z, c = N(), $ = N(), h = Z("overlay"), t = ee({
+  setup(S, { emit: x }) {
+    const P = x, V = (e) => P("update:modelValue", e), U = Y(), a = S, c = q(), $ = q(), h = Z("overlay"), t = ee({
       search: "",
       activeOption: -1,
       open: !1,
       optionsHeight: 0
-    }), _ = p(() => Array.isArray(s.modelValue) ? s.modelValue : []), K = p(() => t.open && s.modelValue.length > 0 ? s.placeholder : s.modelValue.length > 0 ? "" : s.placeholder), A = p(() => pe(s.options ?? [])), E = p(() => _.value.map((e) => A.value.find((l) => k(l.value, e))).filter((e) => e !== void 0)), w = p(() => {
-      const e = a(_), l = a(A);
+    }), _ = p(() => Array.isArray(a.modelValue) ? a.modelValue : []), K = p(() => t.open && a.modelValue.length > 0 ? a.placeholder : a.modelValue.length > 0 ? "" : a.placeholder), A = p(() => ce(a.options ?? [])), E = p(() => _.value.map((e) => A.value.find((l) => O(l.value, e))).filter((e) => e !== void 0)), y = p(() => {
+      const e = s(_), l = s(A);
       return (t.search ? l.filter((o) => {
         const n = t.search.toLowerCase();
         return o.label.toLowerCase().includes(n) ? !0 : typeof o.value == "string" ? o.value.toLowerCase().includes(n) : o.value === t.search;
       }) : [...l]).map((o) => ({
         ...o,
-        selected: x(e, o.value)
+        selected: z(e, o.value)
       }));
-    }), D = p(() => s.options === void 0), b = p(() => D.value ? !0 : s.disabled), H = p(() => b.value ? void 0 : "0"), j = () => {
-      t.activeOption = ae(
-        w.value.findIndex((e) => k(e.value, s.modelValue)),
-        (e) => e < 0 ? 0 : e
-      );
+    }), D = p(() => a.options === void 0), k = p(() => D.value ? !0 : a.disabled), H = p(() => k.value ? void 0 : "0"), j = () => {
+      t.activeOption = 0;
     }, M = (e) => {
       var o;
-      const l = a(_);
-      V(x(l, e) ? l.filter((n) => !k(n, e)) : [...l, e]), t.search = "", (o = c == null ? void 0 : c.value) == null || o.focus();
-    }, R = (e) => V(a(_).filter((l) => !k(l, e))), G = () => {
+      const l = s(_);
+      V(z(l, e) ? l.filter((n) => !O(n, e)) : [...l, e]), t.search = "", (o = c == null ? void 0 : c.value) == null || o.focus();
+    }, R = (e) => V(s(_).filter((l) => !O(l, e))), G = () => {
       var e;
       return (e = $.value) == null ? void 0 : e.focus();
     }, J = () => {
@@ -81,18 +77,18 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
         return;
       }
       e.code === "Escape" && (t.open = !1, (L = c.value) == null || L.focus());
-      const n = a(w), { length: i } = n;
+      const n = s(y), { length: i } = n;
       if (!i)
         return;
       ["ArrowDown", "ArrowUp", "Enter"].includes(e.code) && e.preventDefault(), e.code === "Enter" && M(n[o].value);
       const W = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
       t.activeOption = Math.abs(o + W + i) % i, requestAnimationFrame(() => {
-        var I;
-        return (I = h.value) == null ? void 0 : I.scrollIntoActive();
+        var N;
+        return (N = h.value) == null ? void 0 : N.scrollIntoActive();
       });
     };
-    return ue(c), oe(
-      () => s.modelValue,
+    return de(c), oe(
+      () => a.modelValue,
       () => j(),
       { immediate: !0 }
     ), te(() => {
@@ -106,69 +102,69 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
         ref_key: "rootRef",
         ref: c,
         tabindex: H.value,
-        class: le(["pl-dropdown-multi", { open: t.open, error: e.error, disabled: b.value }]),
+        class: le(["pl-dropdown-multi", { open: t.open, error: e.error, disabled: k.value }]),
         onKeydown: Q,
         onFocusout: F
       }, [
-        u("div", we, [
-          u("div", ye, [
+        u("div", _e, [
+          u("div", we, [
             re(u("input", {
               ref_key: "input",
               ref: $,
               "onUpdate:modelValue": l[0] || (l[0] = (o) => t.search = o),
               type: "text",
               tabindex: "-1",
-              disabled: b.value,
+              disabled: k.value,
               placeholder: K.value,
               spellcheck: "false",
               autocomplete: "chrome-off",
               onFocus: l[1] || (l[1] = (o) => t.open = !0)
-            }, null, 40, ke), [
+            }, null, 40, ye), [
               [se, t.search]
             ]),
-            t.open ? f("", !0) : (r(), d("div", be, [
-              (r(!0), d(g, null, C(E.value, (o, n) => (r(), m(a(T), {
+            t.open ? f("", !0) : (r(), d("div", ke, [
+              (r(!0), d(b, null, g(E.value, (o, n) => (r(), m(s(T), {
                 key: n,
                 closeable: "",
                 small: "",
-                onClick: l[2] || (l[2] = O((i) => t.open = !0, ["stop"])),
+                onClick: l[2] || (l[2] = C((i) => t.open = !0, ["stop"])),
                 onClose: (i) => R(o.value)
               }, {
-                default: y(() => [
-                  q(v(o.label || o.value), 1)
+                default: w(() => [
+                  B(v(o.label || o.value), 1)
                 ]),
                 _: 2
               }, 1032, ["onClose"]))), 128))
             ])),
-            u("div", ge, [
-              D.value ? (r(), m(a(me), {
+            u("div", be, [
+              D.value ? (r(), m(s(fe), {
                 key: 0,
                 name: "loading"
               })) : f("", !0),
-              B(e.$slots, "append"),
+              I(e.$slots, "append"),
               u("div", {
                 class: "pl-dropdown-multi__arrow-wrapper",
-                onClick: O(J, ["stop"])
+                onClick: C(J, ["stop"])
               }, l[3] || (l[3] = [
                 u("div", { class: "arrow-icon arrow-icon-default" }, null, -1)
               ]))
             ])
           ]),
-          e.label ? (r(), d("label", Ce, [
-            e.required ? (r(), m(ve, { key: 0 })) : f("", !0),
+          e.label ? (r(), d("label", ge, [
+            e.required ? (r(), m(me, { key: 0 })) : f("", !0),
             u("span", null, v(e.label), 1),
-            a(U).tooltip ? (r(), m(a(ie), {
+            s(U).tooltip ? (r(), m(s(ae), {
               key: 1,
               class: "info",
               position: "top"
             }, {
-              tooltip: y(() => [
-                B(e.$slots, "tooltip")
+              tooltip: w(() => [
+                I(e.$slots, "tooltip")
               ]),
               _: 3
             })) : f("", !0)
           ])) : f("", !0),
-          t.open ? (r(), m(fe, {
+          t.open ? (r(), m(pe, {
             key: 1,
             ref_key: "overlay",
             ref: h,
@@ -178,21 +174,21 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
             tabindex: "-1",
             onFocusout: F
           }, {
-            default: y(() => [
-              u("div", Oe, [
-                (r(!0), d(g, null, C(E.value, (o, n) => (r(), m(a(T), {
+            default: w(() => [
+              u("div", Ce, [
+                (r(!0), d(b, null, g(E.value, (o, n) => (r(), m(s(T), {
                   key: n,
                   closeable: "",
                   small: "",
                   onClose: (i) => R(o.value)
                 }, {
-                  default: y(() => [
-                    q(v(o.label || o.value), 1)
+                  default: w(() => [
+                    B(v(o.label || o.value), 1)
                   ]),
                   _: 2
                 }, 1032, ["onClose"]))), 128))
               ]),
-              (r(!0), d(g, null, C(w.value, (o, n) => (r(), m(ce, {
+              (r(!0), d(b, null, g(y.value, (o, n) => (r(), m(ue, {
                 key: n,
                 option: o,
                 "text-item": "text",
@@ -200,20 +196,20 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
                 "is-hovered": t.activeOption == n,
                 size: "medium",
                 "use-checkbox": "",
-                onClick: O((i) => M(o.value), ["stop"])
+                onClick: C((i) => M(o.value), ["stop"])
               }, null, 8, ["option", "is-selected", "is-hovered", "onClick"]))), 128)),
-              w.value.length ? f("", !0) : (r(), d("div", Ve, "Nothing found"))
+              y.value.length ? f("", !0) : (r(), d("div", Oe, "Nothing found"))
             ]),
             _: 1
           }, 8, ["root"])) : f("", !0),
-          ne(de, { class: "pl-dropdown-multi__contour" })
+          ne(ie, { class: "pl-dropdown-multi__contour" })
         ])
-      ], 42, _e),
-      e.error ? (r(), d("div", $e, v(a(he)(e.error)), 1)) : e.helper ? (r(), d("div", Ae, v(e.helper), 1)) : f("", !0)
+      ], 42, he),
+      e.error ? (r(), d("div", Ve, v(s(ve)(e.error)), 1)) : e.helper ? (r(), d("div", $e, v(e.helper), 1)) : f("", !0)
     ]));
   }
 });
 export {
-  Ue as default
+  xe as default
 };
 //# sourceMappingURL=PlDropdownMulti.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownMulti.vue.js","sources":["../../../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":["__default__","emit","__emit","emitModel","v","slots","useSlots","props","__props","rootRef","ref","input","overlay","useTemplateRef","data","reactive","selectedValuesRef","computed","placeholderRef","normalizedOptionsRef","normalizeListOptions","selectedOptionsRef","opt","deepEqual","filteredOptionsRef","selectedValues","unref","options","search","deepIncludes","isLoadingOptions","isDisabled","tabindex","updateActiveOption","tap","o","selectOption","values","it","_a","unselectOption","d","setFocusOnInput","toggleModel","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","open","activeOption","filteredOptions","length","useLabelNotch","watch","watchPostEffect"],"mappings":"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"}
+{"version":3,"file":"PlDropdownMulti.vue.js","sources":["../../../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 = 0;\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":["__default__","emit","__emit","emitModel","v","slots","useSlots","props","__props","rootRef","ref","input","overlay","useTemplateRef","data","reactive","selectedValuesRef","computed","placeholderRef","normalizedOptionsRef","normalizeListOptions","selectedOptionsRef","opt","deepEqual","filteredOptionsRef","selectedValues","unref","options","search","deepIncludes","isLoadingOptions","isDisabled","tabindex","updateActiveOption","selectOption","values","it","_a","unselectOption","d","setFocusOnInput","toggleModel","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","open","activeOption","filteredOptions","length","useLabelNotch","watch","watchPostEffect"],"mappings":"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"}

package/dist/components/PlDropdownMulti/__tests__/PlDropdownMulti.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/PlDropdownMulti/index.d.ts

@@ -1,2 +1 @@
 export { default as PlDropdownMulti } from './PlDropdownMulti.vue';
-//# sourceMappingURL=index.d.ts.map

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

@@ -73,4 +73,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=PlDropdownMultiRef.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownMultiRef.vue.js","sources":["../../../src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ModelRef, RefOption } from '../../types';\nimport PlDropdownMulti from '../PlDropdownMulti/PlDropdownMulti.vue';\nimport { computed, useSlots } from 'vue';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: 'update:modelValue', value: ModelRef[] | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: ModelRef[] | undefined;\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<RefOption[]>;\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 options = computed(() =>\n  props.options?.map((opt) => ({\n    label: opt.label,\n    value: opt.ref,\n  })),\n);\n</script>\n\n<template>\n  <PlDropdownMulti\n    v-bind=\"props\"\n    :options=\"options\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdownMulti>\n</template>\n"],"names":["slots","useSlots","props","__props","options","computed","_a","opt"],"mappings":";;;;;;;;;;;;;;;;AAMA,UAAMA,IAAaC,EAAS,GAStBC,IAAQC,GA+CRC,IAAUC;AAAA,MAAS,MAAA;;AACvB,gBAAAC,IAAAJ,EAAM,YAAN,gBAAAI,EAAe,IAAI,CAACC,OAAS;AAAA,UAC3B,OAAOA,EAAI;AAAA,UACX,OAAOA,EAAI;AAAA,QAAA;AAAA;AAAA,IAEf;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlDropdownMultiRef.vue.js","sources":["../../../src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ModelRef, RefOption } from '../../types';\nimport PlDropdownMulti from '../PlDropdownMulti/PlDropdownMulti.vue';\nimport { computed, useSlots } from 'vue';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: 'update:modelValue', value: ModelRef[] | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: ModelRef[] | undefined;\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<RefOption[]>;\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 options = computed(() =>\n  props.options?.map((opt) => ({\n    label: opt.label,\n    value: opt.ref,\n  })),\n);\n</script>\n\n<template>\n  <PlDropdownMulti\n    v-bind=\"props\"\n    :options=\"options\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdownMulti>\n</template>\n"],"names":["slots","useSlots","props","__props","options","computed","_a","opt"],"mappings":";;;;;;;;;;;;;;;;AAMA,UAAMA,IAAaC,EAAA,GASbC,IAAQC,GA+CRC,IAAUC;AAAA,MAAS,MAAA;;AACvB,gBAAAC,IAAAJ,EAAM,YAAN,gBAAAI,EAAe,IAAI,CAACC,OAAS;AAAA,UAC3B,OAAOA,EAAI;AAAA,UACX,OAAOA,EAAI;AAAA,QAAA;AAAA;AAAA,IACX;;;;;;;;;;;;;;;"}

package/dist/components/PlDropdownMultiRef/__tests__/PlDropdownMultiRef.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/PlDropdownMultiRef/index.d.ts

@@ -1,2 +1 @@
 export { default as PlDropdownMultiRef } from './PlDropdownMultiRef.vue';
-//# sourceMappingURL=index.d.ts.map

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

@@ -71,4 +71,3 @@ 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.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownRef.vue.js","sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: 'PlDropdownRef',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from 'vue';\nimport type { ListOption, ModelRef, RefOption } from '../../types';\nimport { PlDropdown } from '../PlDropdown';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: 'update:modelValue', value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected ref of the dropdown.\n     */\n    modelValue: M | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available ref options for the dropdown\n     */\n    options?: Readonly<RefOption[] | ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Option list item size\n     */\n    optionSize?: 'small' | 'medium';\n  }>(),\n  {\n    label: '',\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: '...',\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    optionSize: 'small',\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) =>\n    'ref' in opt\n      ? {\n          label: opt.label,\n          value: opt.ref,\n          group: opt.group,\n        } as ListOption<M>\n      : opt,\n  ),\n);\n</script>\n\n<template>\n  <PlDropdown\n    v-bind=\"props\"\n    :options=\"options\"\n    :loading-options-helper=\"loadingOptionsHelper\"\n    :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdown>\n</template>\n"],"names":["__default__","slots","useSlots","props","__props","options","computed","_a","opt"],"mappings":";;AAIA,MAAeA,IAAA;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;AASA,UAAMC,IAAaC,EAAS,GAStBC,IAAQC,GA8DRC,IAAUC;AAAA,MAAS,MACvB;;AAAA,gBAAAC,IAAAJ,EAAM,YAAN,gBAAAI,EAAe;AAAA,UAAI,CAACC,MAClB,SAASA,IACL;AAAA,YACE,OAAOA,EAAI;AAAA,YACX,OAAOA,EAAI;AAAA,YACX,OAAOA,EAAI;AAAA,UAAA,IAEbA;AAAA;AAAA;AAAA,IAER;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlDropdownRef.vue.js","sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: 'PlDropdownRef',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from 'vue';\nimport type { ListOption, ModelRef, RefOption } from '../../types';\nimport { PlDropdown } from '../PlDropdown';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: 'update:modelValue', value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected ref of the dropdown.\n     */\n    modelValue: M | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available ref options for the dropdown\n     */\n    options?: Readonly<RefOption[] | ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Option list item size\n     */\n    optionSize?: 'small' | 'medium';\n  }>(),\n  {\n    label: '',\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: '...',\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    optionSize: 'small',\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) =>\n    'ref' in opt\n      ? {\n          label: opt.label,\n          value: opt.ref,\n          group: opt.group,\n        } as ListOption<M>\n      : opt,\n  ),\n);\n</script>\n\n<template>\n  <PlDropdown\n    v-bind=\"props\"\n    :options=\"options\"\n    :loading-options-helper=\"loadingOptionsHelper\"\n    :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdown>\n</template>\n"],"names":["__default__","slots","useSlots","props","__props","options","computed","_a","opt"],"mappings":";;AAIA,MAAAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;AASA,UAAMC,IAAaC,EAAA,GASbC,IAAQC,GA8DRC,IAAUC;AAAA,MAAS,MAAA;;AACvB,gBAAAC,IAAAJ,EAAM,YAAN,gBAAAI,EAAe;AAAA,UAAI,CAACC,MAClB,SAASA,IACL;AAAA,YACE,OAAOA,EAAI;AAAA,YACX,OAAOA,EAAI;AAAA,YACX,OAAOA,EAAI;AAAA,UAAA,IAEbA;AAAA;AAAA;AAAA,IACN;;;;;;;;;;;;;;;;;"}

package/dist/components/PlDropdownRef/__tests__/PlDropdownRef.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,2 +1 @@
 export { default as PlDropdownRef } from './PlDropdownRef.vue';
-//# sourceMappingURL=index.d.ts.map

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

@@ -41,4 +41,3 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     inputRef: HTMLInputElement;
 }, HTMLDivElement>;
 export default _default;
-//# sourceMappingURL=PlEditableTitle.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlEditableTitle.vue.js","sources":["../../../src/components/PlEditableTitle/PlEditableTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTransformedModel } from '../../composition/useTransformedModel';\nimport style from './pl-editable-title.module.scss';\nimport { computed, onMounted, ref } from 'vue';\n\nconst model = defineModel<string>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Standard input placeholder\n     */\n    placeholder?: string;\n    /**\n     * Any css `width` value (px, %), default is 80%\n     */\n    maxWidth?: string;\n    /**\n     * Fixed non-editable prefix\n     */\n    prefix?: string;\n    /**\n     * Max title length (default is 1000)\n     */\n    maxLength?: number;\n    /**\n     * Min title length\n     */\n    minLength?: number;\n    /**\n     * If true, input will be focused on mount\n     */\n    autofocus?: boolean;\n  }>(),\n  {\n    placeholder: 'Title',\n    maxWidth: '80%',\n    prefix: undefined,\n    maxLength: 1000,\n    minLength: undefined,\n  },\n);\n\nconst local = useTransformedModel(model, {\n  update() {\n    return false;\n  },\n  parse: (v): string => {\n    if (typeof v !== 'string') {\n      throw Error('value should be a string');\n    }\n\n    if (props.maxLength && v.length > props.maxLength) {\n      throw Error(`Max title length is ${props.maxLength} characters`);\n    }\n\n    if (props.minLength && v.length < props.minLength) {\n      throw Error(`Min title length is ${props.minLength} characters`);\n    }\n\n    return v.trim();\n  },\n});\n\nconst inputRef = ref<HTMLInputElement>();\n\nconst computedStyle = computed(() => ({\n  maxWidth: props.maxWidth ?? '80%',\n}));\n\nconst save = () => {\n  model.value = local.value && !local.error ? local.value : model.value;\n  local.reset();\n};\n\nonMounted(() => {\n  if (props.autofocus) {\n    inputRef.value?.focus();\n  }\n});\n\n</script>\n\n<template>\n  <div class=\"pl-editable-title\" :class=\"style.component\" :style=\"computedStyle\">\n    <div :class=\"style.container\" @click=\"() => inputRef?.focus()\">\n      <span v-if=\"prefix\">{{ prefix.trim() }}&nbsp;</span>\n      <input\n        ref=\"inputRef\"\n        v-model=\"local.value\"\n        :placeholder=\"placeholder\"\n        @focusout=\"save\"\n        @keydown.escape=\"local.reset\"\n        @keydown.enter=\"(ev) => (ev.target as HTMLInputElement)?.blur()\"\n      />\n    </div>\n    <div v-if=\"local.error\" :class=\"style.error\">{{ local.error }}</div>\n  </div>\n</template>\n"],"names":["model","_useModel","__props","props","local","useTransformedModel","v","inputRef","ref","computedStyle","computed","save","onMounted","_a"],"mappings":";;;;;;;;;;;;;;;;;;AAKM,UAAAA,IAAQC,EAAmBC,GAAA,YAAC,GAE5BC,IAAQD,GAoCRE,IAAQC,EAAoBL,GAAO;AAAA,MACvC,SAAS;AACA,eAAA;AAAA,MACT;AAAA,MACA,OAAO,CAACM,MAAc;AAChB,YAAA,OAAOA,KAAM;AACf,gBAAM,MAAM,0BAA0B;AAGxC,YAAIH,EAAM,aAAaG,EAAE,SAASH,EAAM;AACtC,gBAAM,MAAM,uBAAuBA,EAAM,SAAS,aAAa;AAGjE,YAAIA,EAAM,aAAaG,EAAE,SAASH,EAAM;AACtC,gBAAM,MAAM,uBAAuBA,EAAM,SAAS,aAAa;AAGjE,eAAOG,EAAE,KAAK;AAAA,MAAA;AAAA,IAChB,CACD,GAEKC,IAAWC,EAAsB,GAEjCC,IAAgBC,EAAS,OAAO;AAAA,MACpC,UAAUP,EAAM,YAAY;AAAA,IAAA,EAC5B,GAEIQ,IAAO,MAAM;AACX,MAAAX,EAAA,QAAQI,EAAM,SAAS,CAACA,EAAM,QAAQA,EAAM,QAAQJ,EAAM,OAChEI,EAAM,MAAM;AAAA,IACd;AAEA,WAAAQ,EAAU,MAAM;;AACd,MAAIT,EAAM,eACRU,IAAAN,EAAS,UAAT,QAAAM,EAAgB;AAAA,IAClB,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlEditableTitle.vue.js","sources":["../../../src/components/PlEditableTitle/PlEditableTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTransformedModel } from '../../composition/useTransformedModel';\nimport style from './pl-editable-title.module.scss';\nimport { computed, onMounted, ref } from 'vue';\n\nconst model = defineModel<string>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Standard input placeholder\n     */\n    placeholder?: string;\n    /**\n     * Any css `width` value (px, %), default is 80%\n     */\n    maxWidth?: string;\n    /**\n     * Fixed non-editable prefix\n     */\n    prefix?: string;\n    /**\n     * Max title length (default is 1000)\n     */\n    maxLength?: number;\n    /**\n     * Min title length\n     */\n    minLength?: number;\n    /**\n     * If true, input will be focused on mount\n     */\n    autofocus?: boolean;\n  }>(),\n  {\n    placeholder: 'Title',\n    maxWidth: '80%',\n    prefix: undefined,\n    maxLength: 1000,\n    minLength: undefined,\n  },\n);\n\nconst local = useTransformedModel(model, {\n  update() {\n    return false;\n  },\n  parse: (v): string => {\n    if (typeof v !== 'string') {\n      throw Error('value should be a string');\n    }\n\n    if (props.maxLength && v.length > props.maxLength) {\n      throw Error(`Max title length is ${props.maxLength} characters`);\n    }\n\n    if (props.minLength && v.length < props.minLength) {\n      throw Error(`Min title length is ${props.minLength} characters`);\n    }\n\n    return v.trim();\n  },\n});\n\nconst inputRef = ref<HTMLInputElement>();\n\nconst computedStyle = computed(() => ({\n  maxWidth: props.maxWidth ?? '80%',\n}));\n\nconst save = () => {\n  model.value = local.value && !local.error ? local.value : model.value;\n  local.reset();\n};\n\nonMounted(() => {\n  if (props.autofocus) {\n    inputRef.value?.focus();\n  }\n});\n\n</script>\n\n<template>\n  <div class=\"pl-editable-title\" :class=\"style.component\" :style=\"computedStyle\">\n    <div :class=\"style.container\" @click=\"() => inputRef?.focus()\">\n      <span v-if=\"prefix\">{{ prefix.trim() }}&nbsp;</span>\n      <input\n        ref=\"inputRef\"\n        v-model=\"local.value\"\n        :placeholder=\"placeholder\"\n        @focusout=\"save\"\n        @keydown.escape=\"local.reset\"\n        @keydown.enter=\"(ev) => (ev.target as HTMLInputElement)?.blur()\"\n      />\n    </div>\n    <div v-if=\"local.error\" :class=\"style.error\">{{ local.error }}</div>\n  </div>\n</template>\n"],"names":["model","_useModel","__props","props","local","useTransformedModel","v","inputRef","ref","computedStyle","computed","save","onMounted","_a"],"mappings":";;;;;;;;;;;;;;;;;;AAKA,UAAMA,IAAQC,EAAmBC,GAAA,YAAC,GAE5BC,IAAQD,GAoCRE,IAAQC,EAAoBL,GAAO;AAAA,MACvC,SAAS;AACP,eAAO;AAAA,MACT;AAAA,MACA,OAAO,CAACM,MAAc;AACpB,YAAI,OAAOA,KAAM;AACf,gBAAM,MAAM,0BAA0B;AAGxC,YAAIH,EAAM,aAAaG,EAAE,SAASH,EAAM;AACtC,gBAAM,MAAM,uBAAuBA,EAAM,SAAS,aAAa;AAGjE,YAAIA,EAAM,aAAaG,EAAE,SAASH,EAAM;AACtC,gBAAM,MAAM,uBAAuBA,EAAM,SAAS,aAAa;AAGjE,eAAOG,EAAE,KAAA;AAAA,MACX;AAAA,IAAA,CACD,GAEKC,IAAWC,EAAA,GAEXC,IAAgBC,EAAS,OAAO;AAAA,MACpC,UAAUP,EAAM,YAAY;AAAA,IAAA,EAC5B,GAEIQ,IAAO,MAAM;AACjB,MAAAX,EAAM,QAAQI,EAAM,SAAS,CAACA,EAAM,QAAQA,EAAM,QAAQJ,EAAM,OAChEI,EAAM,MAAA;AAAA,IACR;AAEA,WAAAQ,EAAU,MAAM;;AACd,MAAIT,EAAM,eACRU,IAAAN,EAAS,UAAT,QAAAM,EAAgB;AAAA,IAEpB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlEditableTitle/index.d.ts

@@ -1,2 +1 @@
 export { default as PlEditableTitle } from './PlEditableTitle.vue';
-//# sourceMappingURL=index.d.ts.map

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

@@ -59,4 +59,3 @@ export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T]: T[K];
 } & {};
-//# sourceMappingURL=PlElementList.vue.d.ts.map

package/dist/components/PlElementList/PlElementList.vue2.js

@@ -1,6 +1,6 @@
 import { defineComponent as ae, mergeModels as Q, useModel as ne, useSlots as oe, computed as u, shallowRef as R, watch as se, createElementBlock as y, openBlock as f, normalizeClass as d, createElementVNode as re, createCommentVNode as ue, Fragment as W, renderList as X, createBlock as Y, createSlots as Z, withCtx as E, renderSlot as h } from "vue";
-import { shallowHash as P, isFunction as g } from "../../lib/util/helpers/dist/index.js";
-import { useSortable as ce } from "../../node_modules/.pnpm/@vueuse_integrations@13.3.0_axios@1.8.1_focus-trap@7.6.0_sortablejs@1.15.6_vue@3.5.13_typescript@5.6.3_/node_modules/@vueuse/integrations/useSortable.js";
+import { shallowHash as P, isFunction as g } from "@milaboratories/helpers";
+import { useSortable as ce } from "@vueuse/integrations/useSortable";
 import x from "./PlElementListItem.vue.js";
 import { moveElements as _ } from "./utils.js";
 const be = /* @__PURE__ */ ae({

package/dist/components/PlElementList/PlElementList.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlElementList.vue2.js","sources":["../../../src/components/PlElementList/PlElementList.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown, K extends number | string = number | string\" lang=\"ts\" setup>\nimport { isFunction, shallowHash } from '@milaboratories/helpers';\nimport { useSortable } from '@vueuse/integrations/useSortable';\nimport { type SortableEvent } from 'sortablejs';\nimport type { ShallowRef } from 'vue';\nimport { computed, shallowRef, watch } from 'vue';\nimport PlElementListItem from './PlElementListItem.vue';\nimport { moveElements } from './utils.ts';\n\nconst itemsRef = defineModel<T[]>('items', { required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    getItemKey?: (item: T, index: number) => K;\n\n    itemClass?: string | string[] | ((item: T, index: number) => string | string[]);\n    isActive?: (item: T, index: number) => boolean;\n\n    disableDragging?: boolean;\n    isDraggable?: (item: T, index: number) => boolean;\n    onDragEnd?: (oldIndex: number, newIndex: number) => void | boolean;\n    onSort?: (oldIndex: number, newIndex: number) => void | boolean;\n\n    disableRemoving?: boolean;\n    isRemovable?: (item: T, index: number) => boolean;\n    onRemove?: (item: T, index: number) => void | boolean;\n\n    disableExpanding?: boolean;\n    isExpandable?: (item: T, index: number) => boolean;\n    isExpanded?: (item: T, index: number) => boolean;\n    onExpand?: (item: T, index: number) => unknown;\n\n    disableToggling?: boolean;\n    isToggable?: (item: T, index: number) => boolean;\n    isToggled?: (item: T, index: number) => boolean;\n    onToggle?: (item: T, index: number) => unknown;\n\n    disablePinning?: boolean;\n    isPinnable?: (item: T, index: number) => boolean;\n    isPinned?: (item: T, index: number) => boolean;\n    onPin?: (item: T, index: number) => void | boolean;\n  }>(), {\n    getItemKey: (item: T) => JSON.stringify(item) as K,\n\n    itemClass: undefined,\n    isActive: undefined,\n\n    disableDragging: undefined,\n    isDraggable: undefined,\n    onDragEnd: undefined,\n    onSort: undefined,\n\n    disableRemoving: undefined,\n    isRemovable: undefined,\n    onRemove: undefined,\n\n    disableExpanding: undefined,\n    isExpandable: undefined,\n    isExpanded: undefined,\n    onExpand: undefined,\n\n    disableToggling: undefined,\n    isToggable: undefined,\n    isToggled: undefined,\n    onToggle: undefined,\n\n    disablePinning: undefined,\n    isPinnable: undefined,\n    isPinned: undefined,\n    onPin: undefined,\n  },\n);\n\nconst emits = defineEmits<{\n  (e: 'itemClick', item: T): void;\n}>();\n\nconst slots = defineSlots<{\n  ['item-title']: (props: { item: T; index: number }) => unknown;\n  ['item-content']?: (props: { item: T; index: number }) => unknown;\n}>();\n\nconst dndSortingEnabled = computed((): boolean => {\n  return props.disableDragging !== true;\n});\n\nconst pinnedItemsRef = computed(() => itemsRef.value.filter(isPinnedItem));\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() => itemsRef.value.filter((item, index) => !isPinnedItem(item, index)));\nconst hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);\n\nconst domProjectionItemsRef = shallowRef<undefined | T[]>();\nconst pinnedContainerRef = shallowRef<HTMLElement>();\nconst unpinnedContainerRef = shallowRef<HTMLElement>();\n\n// version fix problem with sync between data and rendered values\nconst getKey = (item: T, index: number) => {\n  return `${versionRef.value}-${props.getItemKey(item, index)}`;\n};\nconst pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));\nconst unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));\n\n// version fix problem with sync between data and rendered values when items have been changed\nconst versionRef = computed<number>((oldVersion) => {\n  const currentKeys = itemsRef.value.map(props.getItemKey);\n\n  if (domProjectionItemsRef.value === undefined) return oldVersion ?? shallowHash(...currentKeys);\n  if (currentKeys.length !== domProjectionItemsRef.value.length) return shallowHash(...currentKeys);\n\n  const domProjectionKeys = domProjectionItemsRef.value.map(props.getItemKey);\n  const domProjectionKeysSet = new Set(domProjectionKeys);\n\n  for (let i = 0; i < currentKeys.length; i++) {\n    const hasInconsistentPosition = domProjectionKeysSet.has(currentKeys[i]) && domProjectionKeys[i] !== currentKeys[i];\n\n    if (hasInconsistentPosition) {\n      return shallowHash(...currentKeys);\n    }\n  }\n\n  return oldVersion ?? shallowHash(...currentKeys);\n});\n\ncreateSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);\ncreateSortable(hasUnpinnedItems, unpinnedContainerRef, unpinnedItemsRef, () => pinnedItemsRef.value.length);\n\nfunction createSortable(toggler: ShallowRef<boolean>, elRef: ShallowRef<undefined | HTMLElement>, itemsRef: ShallowRef<T[]>, getOffset: () => number) {\n  const sortable = useSortable(elRef, itemsRef, {\n    handle: `[data-draggable=\"true\"]`,\n    animation: 150,\n    forceFallback: true,\n    fallbackOnBody: true,\n    scrollSensitivity: 80,\n    forceAutoScrollFallback: true,\n    onUpdate: (evt: SortableEvent) => {\n      if (evt.oldIndex == null || evt.newIndex == null) {\n        throw new Error('Sortable event has no index');\n      }\n      if (props.onDragEnd?.(evt.oldIndex, evt.newIndex) !== false) {\n        moveItems(getOffset() + evt.oldIndex, getOffset() + evt.newIndex, true);\n      }\n    },\n  });\n  watch(\n    [elRef, () => props.disableDragging, toggler],\n    ([elRef, disabled, on]) => {\n      if (!elRef || disabled || !on) {\n        sortable.stop();\n      } else {\n        sortable.start();\n      }\n    },\n    { immediate: true },\n  );\n\n  return sortable;\n}\n\nfunction moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean) {\n  if (oldIndex === newIndex) return;\n\n  if (afterUpdateDom) {\n    domProjectionItemsRef.value = moveElements(itemsRef.value.slice(), oldIndex, newIndex);\n  }\n\n  const preventDefault = props.onSort?.(oldIndex, newIndex) === false;\n\n  if (!preventDefault) {\n    moveElements(itemsRef.value, oldIndex, newIndex);\n  }\n}\n\nfunction isActiveItem(item: T, index: number): boolean {\n  return props.isActive?.(item, index) ?? false;\n}\n\nfunction isDraggableItem(item: T, index: number): boolean {\n  if (props.disableDragging === true) return false;\n  return (props.isDraggable?.(item, index) ?? true);\n}\n\nfunction isRemovableItem(item: T, index: number): boolean {\n  if (props.disableRemoving === true) return false;\n  return (props.isRemovable?.(item, index) ?? true);\n}\n\nfunction isToggableItem(item: T, index: number): boolean {\n  if (props.disableToggling === true) return false;\n  return (props.isToggable?.(item, index) ?? (isFunction(props.isToggled) || isFunction(props.onToggle)));\n}\n\nfunction isToggledItem(item: T, index: number): boolean {\n  return props.isToggled?.(item, index) ?? false;\n}\n\nfunction isPinnableItem(item: T, index: number): boolean {\n  if (props.disablePinning === true) return false;\n  return (props.isPinnable?.(item, index) ?? (isFunction(props.isPinned) || isFunction(props.onPin)));\n}\n\nfunction isPinnedItem(item: T, index: number): boolean {\n  return props.isPinned?.(item, index) ?? false;\n}\n\nfunction isExpandableItem(item: T, index: number): boolean {\n  if (props.disableExpanding === true) return false;\n  return (props.isExpandable?.(item, index) ?? (isFunction(props.isExpanded) || isFunction(props.onExpand)));\n}\n\nfunction isExpandedItem(item: T, index: number): boolean {\n  return props.isExpanded?.(item, index) ?? false;\n}\n\nfunction handleExpand(item: T, index: number) {\n  props.onExpand?.(item, index);\n}\n\nfunction handleToggle(item: T, index: number) {\n  props.onToggle?.(item, index);\n}\n\nfunction handlePin(item: T, index: number) {\n  if (index === -1) {\n    throw new Error('Pinnable item not found');\n  }\n\n  const alreadyPinned = pinnedItemsRef.value.includes(item);\n\n  if (props.onPin?.(item, index) === false) return;\n\n  moveItems(index, pinnedItemsRef.value.length + (alreadyPinned ? 0 : -1), false);\n}\n\nfunction handleRemove(item: T, index: number) {\n  if (props.onRemove?.(item, index) === false) return;\n  itemsRef.value.splice(index, 1);\n}\n\nconst getItemClass = (item: T, index: number): null | string | string[] => {\n  if (typeof props.itemClass === 'function') {\n    return props.itemClass(item, index);\n  }\n  return props.itemClass ?? null;\n};\n\n</script>\n\n<template>\n  <div :class=\"$style.root\">\n    <div ref=\"pinnedContainerRef\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"(pinnedItem, pinnedIndex) in pinnedItemsRef\" :key=\"pinnedKeysRef[pinnedIndex]\"\n        :class=\"[$style.item, getItemClass(pinnedItem, pinnedIndex)]\"\n\n        :index=\"pinnedIndex\"\n        :item=\"pinnedItem\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(pinnedItem, pinnedIndex)\"\n        :isDraggable=\"isDraggableItem(pinnedItem, pinnedIndex)\"\n        :isRemovable=\"isRemovableItem(pinnedItem, pinnedIndex)\"\n        :isToggable=\"isToggableItem(pinnedItem, pinnedIndex)\"\n        :isToggled=\"isToggledItem(pinnedItem, pinnedIndex)\"\n        :isPinnable=\"isPinnableItem(pinnedItem, pinnedIndex)\"\n        :isPinned=\"true\"\n        :isExpandable=\"isExpandableItem(pinnedItem, pinnedIndex)\"\n        :isExpanded=\"isExpandedItem(pinnedItem, pinnedIndex)\"\n\n        @click=\"emits('itemClick', pinnedItem)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n      </PlElementListItem>\n    </div>\n    <div v-if=\"hasUnpinnedItems\" ref=\"unpinnedContainerRef\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"(unpinnedItem, unpinnedIndex) in unpinnedItemsRef\" :key=\"unpinnedKeysRef[unpinnedIndex]\"\n        :class=\"[$style.item, getItemClass(unpinnedItem, unpinnedIndex)]\"\n\n        :index=\"unpinnedIndex + (pinnedItemsRef?.length ?? 0)\"\n        :item=\"unpinnedItem\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(unpinnedItem, unpinnedIndex)\"\n        :isDraggable=\"isDraggableItem(unpinnedItem, unpinnedIndex)\"\n        :isRemovable=\"isRemovableItem(unpinnedItem, unpinnedIndex)\"\n        :isToggable=\"isToggableItem(unpinnedItem, unpinnedIndex)\"\n        :isToggled=\"isToggledItem(unpinnedItem, unpinnedIndex)\"\n        :isPinnable=\"isPinnableItem(unpinnedItem, unpinnedIndex)\"\n        :isPinned=\"false\"\n        :isExpandable=\"isExpandableItem(unpinnedItem, unpinnedIndex)\"\n        :isExpanded=\"isExpandedItem(unpinnedItem, unpinnedIndex)\"\n\n        @click=\"emits('itemClick', unpinnedItem)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n      </PlElementListItem>\n    </div>\n  </div>\n</template>\n\n<style module>\n.root, .list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 180px;\n}\n\n.item {\n  width: 100%;\n}\n\n:global(.sortable-ghost) {\n  visibility: hidden;\n}\n:global(.sortable-drag) {\n  opacity: 1;\n}\n</style>\n"],"names":["itemsRef","_useModel","__props","props","emits","__emit","slots","_useSlots","dndSortingEnabled","computed","pinnedItemsRef","isPinnedItem","hasPinnedItems","unpinnedItemsRef","item","index","hasUnpinnedItems","domProjectionItemsRef","shallowRef","pinnedContainerRef","unpinnedContainerRef","getKey","versionRef","pinnedKeysRef","unpinnedKeysRef","oldVersion","currentKeys","shallowHash","domProjectionKeys","domProjectionKeysSet","i","createSortable","toggler","elRef","getOffset","sortable","useSortable","evt","_a","moveItems","watch","disabled","on","oldIndex","newIndex","afterUpdateDom","moveElements","isActiveItem","isDraggableItem","isRemovableItem","isToggableItem","isFunction","isToggledItem","isPinnableItem","isExpandableItem","isExpandedItem","handleExpand","handleToggle","handlePin","alreadyPinned","handleRemove","getItemClass"],"mappings":"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"}
+{"version":3,"file":"PlElementList.vue2.js","sources":["../../../src/components/PlElementList/PlElementList.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown, K extends number | string = number | string\" lang=\"ts\" setup>\nimport { isFunction, shallowHash } from '@milaboratories/helpers';\nimport { useSortable } from '@vueuse/integrations/useSortable';\nimport { type SortableEvent } from 'sortablejs';\nimport type { ShallowRef } from 'vue';\nimport { computed, shallowRef, watch } from 'vue';\nimport PlElementListItem from './PlElementListItem.vue';\nimport { moveElements } from './utils.ts';\n\nconst itemsRef = defineModel<T[]>('items', { required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    getItemKey?: (item: T, index: number) => K;\n\n    itemClass?: string | string[] | ((item: T, index: number) => string | string[]);\n    isActive?: (item: T, index: number) => boolean;\n\n    disableDragging?: boolean;\n    isDraggable?: (item: T, index: number) => boolean;\n    onDragEnd?: (oldIndex: number, newIndex: number) => void | boolean;\n    onSort?: (oldIndex: number, newIndex: number) => void | boolean;\n\n    disableRemoving?: boolean;\n    isRemovable?: (item: T, index: number) => boolean;\n    onRemove?: (item: T, index: number) => void | boolean;\n\n    disableExpanding?: boolean;\n    isExpandable?: (item: T, index: number) => boolean;\n    isExpanded?: (item: T, index: number) => boolean;\n    onExpand?: (item: T, index: number) => unknown;\n\n    disableToggling?: boolean;\n    isToggable?: (item: T, index: number) => boolean;\n    isToggled?: (item: T, index: number) => boolean;\n    onToggle?: (item: T, index: number) => unknown;\n\n    disablePinning?: boolean;\n    isPinnable?: (item: T, index: number) => boolean;\n    isPinned?: (item: T, index: number) => boolean;\n    onPin?: (item: T, index: number) => void | boolean;\n  }>(), {\n    getItemKey: (item: T) => JSON.stringify(item) as K,\n\n    itemClass: undefined,\n    isActive: undefined,\n\n    disableDragging: undefined,\n    isDraggable: undefined,\n    onDragEnd: undefined,\n    onSort: undefined,\n\n    disableRemoving: undefined,\n    isRemovable: undefined,\n    onRemove: undefined,\n\n    disableExpanding: undefined,\n    isExpandable: undefined,\n    isExpanded: undefined,\n    onExpand: undefined,\n\n    disableToggling: undefined,\n    isToggable: undefined,\n    isToggled: undefined,\n    onToggle: undefined,\n\n    disablePinning: undefined,\n    isPinnable: undefined,\n    isPinned: undefined,\n    onPin: undefined,\n  },\n);\n\nconst emits = defineEmits<{\n  (e: 'itemClick', item: T): void;\n}>();\n\nconst slots = defineSlots<{\n  ['item-title']: (props: { item: T; index: number }) => unknown;\n  ['item-content']?: (props: { item: T; index: number }) => unknown;\n}>();\n\nconst dndSortingEnabled = computed((): boolean => {\n  return props.disableDragging !== true;\n});\n\nconst pinnedItemsRef = computed(() => itemsRef.value.filter(isPinnedItem));\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() => itemsRef.value.filter((item, index) => !isPinnedItem(item, index)));\nconst hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);\n\nconst domProjectionItemsRef = shallowRef<undefined | T[]>();\nconst pinnedContainerRef = shallowRef<HTMLElement>();\nconst unpinnedContainerRef = shallowRef<HTMLElement>();\n\n// version fix problem with sync between data and rendered values\nconst getKey = (item: T, index: number) => {\n  return `${versionRef.value}-${props.getItemKey(item, index)}`;\n};\nconst pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));\nconst unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));\n\n// version fix problem with sync between data and rendered values when items have been changed\nconst versionRef = computed<number>((oldVersion) => {\n  const currentKeys = itemsRef.value.map(props.getItemKey);\n\n  if (domProjectionItemsRef.value === undefined) return oldVersion ?? shallowHash(...currentKeys);\n  if (currentKeys.length !== domProjectionItemsRef.value.length) return shallowHash(...currentKeys);\n\n  const domProjectionKeys = domProjectionItemsRef.value.map(props.getItemKey);\n  const domProjectionKeysSet = new Set(domProjectionKeys);\n\n  for (let i = 0; i < currentKeys.length; i++) {\n    const hasInconsistentPosition = domProjectionKeysSet.has(currentKeys[i]) && domProjectionKeys[i] !== currentKeys[i];\n\n    if (hasInconsistentPosition) {\n      return shallowHash(...currentKeys);\n    }\n  }\n\n  return oldVersion ?? shallowHash(...currentKeys);\n});\n\ncreateSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);\ncreateSortable(hasUnpinnedItems, unpinnedContainerRef, unpinnedItemsRef, () => pinnedItemsRef.value.length);\n\nfunction createSortable(toggler: ShallowRef<boolean>, elRef: ShallowRef<undefined | HTMLElement>, itemsRef: ShallowRef<T[]>, getOffset: () => number) {\n  const sortable = useSortable(elRef, itemsRef, {\n    handle: `[data-draggable=\"true\"]`,\n    animation: 150,\n    forceFallback: true,\n    fallbackOnBody: true,\n    scrollSensitivity: 80,\n    forceAutoScrollFallback: true,\n    onUpdate: (evt: SortableEvent) => {\n      if (evt.oldIndex == null || evt.newIndex == null) {\n        throw new Error('Sortable event has no index');\n      }\n      if (props.onDragEnd?.(evt.oldIndex, evt.newIndex) !== false) {\n        moveItems(getOffset() + evt.oldIndex, getOffset() + evt.newIndex, true);\n      }\n    },\n  });\n  watch(\n    [elRef, () => props.disableDragging, toggler],\n    ([elRef, disabled, on]) => {\n      if (!elRef || disabled || !on) {\n        sortable.stop();\n      } else {\n        sortable.start();\n      }\n    },\n    { immediate: true },\n  );\n\n  return sortable;\n}\n\nfunction moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean) {\n  if (oldIndex === newIndex) return;\n\n  if (afterUpdateDom) {\n    domProjectionItemsRef.value = moveElements(itemsRef.value.slice(), oldIndex, newIndex);\n  }\n\n  const preventDefault = props.onSort?.(oldIndex, newIndex) === false;\n\n  if (!preventDefault) {\n    moveElements(itemsRef.value, oldIndex, newIndex);\n  }\n}\n\nfunction isActiveItem(item: T, index: number): boolean {\n  return props.isActive?.(item, index) ?? false;\n}\n\nfunction isDraggableItem(item: T, index: number): boolean {\n  if (props.disableDragging === true) return false;\n  return (props.isDraggable?.(item, index) ?? true);\n}\n\nfunction isRemovableItem(item: T, index: number): boolean {\n  if (props.disableRemoving === true) return false;\n  return (props.isRemovable?.(item, index) ?? true);\n}\n\nfunction isToggableItem(item: T, index: number): boolean {\n  if (props.disableToggling === true) return false;\n  return (props.isToggable?.(item, index) ?? (isFunction(props.isToggled) || isFunction(props.onToggle)));\n}\n\nfunction isToggledItem(item: T, index: number): boolean {\n  return props.isToggled?.(item, index) ?? false;\n}\n\nfunction isPinnableItem(item: T, index: number): boolean {\n  if (props.disablePinning === true) return false;\n  return (props.isPinnable?.(item, index) ?? (isFunction(props.isPinned) || isFunction(props.onPin)));\n}\n\nfunction isPinnedItem(item: T, index: number): boolean {\n  return props.isPinned?.(item, index) ?? false;\n}\n\nfunction isExpandableItem(item: T, index: number): boolean {\n  if (props.disableExpanding === true) return false;\n  return (props.isExpandable?.(item, index) ?? (isFunction(props.isExpanded) || isFunction(props.onExpand)));\n}\n\nfunction isExpandedItem(item: T, index: number): boolean {\n  return props.isExpanded?.(item, index) ?? false;\n}\n\nfunction handleExpand(item: T, index: number) {\n  props.onExpand?.(item, index);\n}\n\nfunction handleToggle(item: T, index: number) {\n  props.onToggle?.(item, index);\n}\n\nfunction handlePin(item: T, index: number) {\n  if (index === -1) {\n    throw new Error('Pinnable item not found');\n  }\n\n  const alreadyPinned = pinnedItemsRef.value.includes(item);\n\n  if (props.onPin?.(item, index) === false) return;\n\n  moveItems(index, pinnedItemsRef.value.length + (alreadyPinned ? 0 : -1), false);\n}\n\nfunction handleRemove(item: T, index: number) {\n  if (props.onRemove?.(item, index) === false) return;\n  itemsRef.value.splice(index, 1);\n}\n\nconst getItemClass = (item: T, index: number): null | string | string[] => {\n  if (typeof props.itemClass === 'function') {\n    return props.itemClass(item, index);\n  }\n  return props.itemClass ?? null;\n};\n\n</script>\n\n<template>\n  <div :class=\"$style.root\">\n    <div ref=\"pinnedContainerRef\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"(pinnedItem, pinnedIndex) in pinnedItemsRef\" :key=\"pinnedKeysRef[pinnedIndex]\"\n        :class=\"[$style.item, getItemClass(pinnedItem, pinnedIndex)]\"\n\n        :index=\"pinnedIndex\"\n        :item=\"pinnedItem\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(pinnedItem, pinnedIndex)\"\n        :isDraggable=\"isDraggableItem(pinnedItem, pinnedIndex)\"\n        :isRemovable=\"isRemovableItem(pinnedItem, pinnedIndex)\"\n        :isToggable=\"isToggableItem(pinnedItem, pinnedIndex)\"\n        :isToggled=\"isToggledItem(pinnedItem, pinnedIndex)\"\n        :isPinnable=\"isPinnableItem(pinnedItem, pinnedIndex)\"\n        :isPinned=\"true\"\n        :isExpandable=\"isExpandableItem(pinnedItem, pinnedIndex)\"\n        :isExpanded=\"isExpandedItem(pinnedItem, pinnedIndex)\"\n\n        @click=\"emits('itemClick', pinnedItem)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n      </PlElementListItem>\n    </div>\n    <div v-if=\"hasUnpinnedItems\" ref=\"unpinnedContainerRef\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"(unpinnedItem, unpinnedIndex) in unpinnedItemsRef\" :key=\"unpinnedKeysRef[unpinnedIndex]\"\n        :class=\"[$style.item, getItemClass(unpinnedItem, unpinnedIndex)]\"\n\n        :index=\"unpinnedIndex + (pinnedItemsRef?.length ?? 0)\"\n        :item=\"unpinnedItem\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(unpinnedItem, unpinnedIndex)\"\n        :isDraggable=\"isDraggableItem(unpinnedItem, unpinnedIndex)\"\n        :isRemovable=\"isRemovableItem(unpinnedItem, unpinnedIndex)\"\n        :isToggable=\"isToggableItem(unpinnedItem, unpinnedIndex)\"\n        :isToggled=\"isToggledItem(unpinnedItem, unpinnedIndex)\"\n        :isPinnable=\"isPinnableItem(unpinnedItem, unpinnedIndex)\"\n        :isPinned=\"false\"\n        :isExpandable=\"isExpandableItem(unpinnedItem, unpinnedIndex)\"\n        :isExpanded=\"isExpandedItem(unpinnedItem, unpinnedIndex)\"\n\n        @click=\"emits('itemClick', unpinnedItem)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n      </PlElementListItem>\n    </div>\n  </div>\n</template>\n\n<style module>\n.root, .list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 180px;\n}\n\n.item {\n  width: 100%;\n}\n\n:global(.sortable-ghost) {\n  visibility: hidden;\n}\n:global(.sortable-drag) {\n  opacity: 1;\n}\n</style>\n"],"names":["itemsRef","_useModel","__props","props","emits","__emit","slots","_useSlots","dndSortingEnabled","computed","pinnedItemsRef","isPinnedItem","hasPinnedItems","unpinnedItemsRef","item","index","hasUnpinnedItems","domProjectionItemsRef","shallowRef","pinnedContainerRef","unpinnedContainerRef","getKey","versionRef","pinnedKeysRef","unpinnedKeysRef","oldVersion","currentKeys","shallowHash","domProjectionKeys","domProjectionKeysSet","i","createSortable","toggler","elRef","getOffset","sortable","useSortable","evt","_a","moveItems","watch","disabled","on","oldIndex","newIndex","afterUpdateDom","moveElements","isActiveItem","isDraggableItem","isRemovableItem","isToggableItem","isFunction","isToggledItem","isPinnableItem","isExpandableItem","isExpandedItem","handleExpand","handleToggle","handlePin","alreadyPinned","handleRemove","getItemClass"],"mappings":"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"}

package/dist/components/PlElementList/PlElementListItem.vue.d.ts

@@ -54,4 +54,3 @@ export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T]: T[K];
 } & {};
-//# sourceMappingURL=PlElementListItem.vue.d.ts.map