npm - @milaboratories/uikit - Versions diffs - 2.6.1 → 2.6.3 - Mend

@milaboratories/uikit 2.6.1 → 2.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (215) hide show

package/dist/components/PlDropdownLegacy/PlDropdownLegacy.vue.js CHANGED Viewed

@@ -1,23 +1,25 @@
 (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.pl-dropdown-legacy{--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-legacy{--options-bg: #1b1b1f}.pl-dropdown-legacy__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown-legacy 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-legacy label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown-legacy__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);color:var(--txt-01)}.pl-dropdown-legacy__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-legacy__options{position:relative;background-color:var(--options-bg);border-radius:0 0 6px 6px;max-height:244px;border-top:1px solid var(--color-div-black);--thumb-color: var(--ic-02);overflow-y:auto}.pl-dropdown-legacy__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dropdown-legacy__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown-legacy__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dropdown-legacy__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:var(--control-height);background-color:#fff;opacity:.5;font-style:italic}.pl-dropdown-legacy__options .option{position:relative;padding:0 30px 0 10px;height:var(--control-height);line-height:var(--control-height);cursor:pointer;-webkit-user-select:none;user-select:none}.pl-dropdown-legacy__options .option .checkmark{position:absolute;display:none;right:10px;top:50%;transform:translateY(-50%)}.pl-dropdown-legacy__options .option>span{display:block;overflow:hidden;white-space:nowrap;max-width:100%;text-overflow:ellipsis}.pl-dropdown-legacy__options .option.selected{background-color:var(--color-active-select)}.pl-dropdown-legacy__options .option.selected .checkmark{display:block}.pl-dropdown-legacy__options .option.active:not(.selected){background-color:var(--option-hover-bg)}.pl-dropdown-legacy__options .option:hover{background-color:var(--option-hover-bg)}.pl-dropdown-legacy__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding:0 11px;min-height:var(--control-height);line-height:var(--control-height);display:flex;flex-direction:row;align-items:center}.pl-dropdown-legacy__field .input-value{outline:1px solid red;position:absolute;top:0;left:0;bottom:0;right:0;padding:0 60px 0 11px;pointer-events:none;line-height:var(--control-height);color:var(--contour-color);overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown-legacy__field input{min-height:calc(var(--control-height) - 2px);line-height:calc(var(--control-height) - 2px);font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 40px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-dropdown-legacy__field input:focus{outline:none}.pl-dropdown-legacy__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown-legacy__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown-legacy__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-legacy__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-legacy__controls{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:auto}.pl-dropdown-legacy__controls .mask-16,.pl-dropdown-legacy__controls .mask-24{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-dropdown-legacy__controls .clear{--icon-color: var(--ic-02)}.pl-dropdown-legacy__controls .mask-loading{--icon-color: var(#07AD3E);animation:spin 2.5s linear infinite}.pl-dropdown-legacy .arrow-icon{cursor:pointer}.pl-dropdown-legacy .arrow-icon.arrow-icon-default{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-legacy.open,.pl-dropdown-legacy:focus-within{z-index:1;--label-color: var(--txt-focus)}.pl-dropdown-legacy.open .pl-dropdown-legacy__container{z-index:1000}.pl-dropdown-legacy.open .pl-dropdown-legacy__field{border-radius:6px 6px 0 0}.pl-dropdown-legacy.open .arrow-icon{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-legacy:hover{--contour-color: var(--control-hover-color)}.pl-dropdown-legacy: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-legacy:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-dropdown-legacy.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-dropdown-legacy.disabled{--contour-color: var(--color-dis-01);--control-mask-fill: var(--color-dis-01);--label-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none;-webkit-user-select:none;user-select:none}
-.ui-lt-container{min-width:0;white-space:nowrap;overflow:hidden;position:relative;border-radius:5px}.ui-lt-container span{display:inline-block;overflow:hidden;text-overflow:ellipsis;width:100%;vertical-align:bottom;pointer-events:all!important}.ui-lt-container .ui-lt-animate{position:relative;animation:left-to-right var(--5deba9de) infinite alternate linear;overflow:unset!important;text-overflow:unset!important;width:fit-content!important}@keyframes left-to-right{0%{transform:translate(0);left:0%}to{transform:translate(-101%);left:101%}}`)),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { defineComponent as te, useSlots as ne, ref as V, reactive as re, computed as i, unref as u, watch as B, watchPostEffect as le, createElementBlock as s, openBlock as r, createElementVNode as c, createCommentVNode as d, normalizeClass as b, createVNode as F, withDirectives as se, vModelText as ie, withCtx as M, createTextVNode as ae, toDisplayString as v, createBlock as m, renderSlot as N, withModifiers as h, Fragment as de, renderList as ue } from "vue";
+.double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-right-radius:0;border-top-left-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.double-contour.top-right>div{border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0}.double-contour.bottom-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.double-contour.bottom-right>div{border-top-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0}.double-contour.middle>div{border-radius:0}
+.ui-lt-container{min-width:0;white-space:nowrap;overflow:hidden;position:relative;border-radius:5px}.ui-lt-container span{display:inline-block;overflow:hidden;text-overflow:ellipsis;width:100%;vertical-align:bottom;pointer-events:all!important}.ui-lt-container .ui-lt-animate{position:relative;animation:left-to-right var(--v5deba9de) infinite alternate linear;overflow:unset!important;text-overflow:unset!important;width:fit-content!important}@keyframes left-to-right{0%{transform:translate(0);left:0%}to{transform:translate(-101%);left:101%}}`)),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+import { defineComponent as te, useSlots as ne, ref as V, reactive as le, computed as s, unref as u, watch as F, watchPostEffect as re, createElementBlock as a, openBlock as l, createElementVNode as p, createCommentVNode as c, normalizeClass as b, createVNode as M, withDirectives as ie, vModelText as ae, withCtx as N, createTextVNode as se, toDisplayString as m, createBlock as h, renderSlot as P, withModifiers as w, Fragment as de, renderList as ce } from "vue";
-import { tap as ce, tapIf as pe } from "../../helpers/functions.js";
+import { tap as ue, tapIf as pe } from "../../helpers/functions.js";
 import fe from "../PlTooltip/PlTooltip.vue.js";
 import ve from "../../utils/DoubleContour.vue.js";
 import { useLabelNotch as me } from "../../utils/useLabelNotch.js";
 import { scrollIntoView as he } from "../../helpers/dom.js";
 import { deepEqual as C } from "../../helpers/objects.js";
-import _e from "../DropdownListItem.vue.js";
-import we from "../LongText.vue.js";
+import we from "../DropdownListItem.vue.js";
+import ke from "../LongText.vue.js";
-import ke from "../PlIcon16/PlIcon16.vue.js";
+import _e from "../PlIcon16/PlIcon16.vue.js";
 import ye from "../PlIcon24/PlIcon24.vue.js";
 import { normalizeListOptions as Ie } from "../../helpers/utils.js";
 import { getErrorMessage as ge } from "../../helpers/error.js";
-import Ve from "../PlSvg/PlSvg.vue.js";
-import be from "../../assets/images/required.svg.js";
-const Ce = { class: "ui-dropdown__envelope" }, Ee = ["tabindex"], Le = { class: "ui-dropdown__container" }, Se = { class: "ui-dropdown__field" }, xe = ["disabled", "placeholder"], Ae = { class: "ui-dropdown__controls" }, Oe = { key: 0 }, $e = {
+import xe from "../PlSvg/PlSvg.vue.js";
+import Ve from "../../assets/images/required.svg.js";
+const be = { class: "ui-dropdown__envelope" }, Ce = ["tabindex"], Ee = { class: "ui-dropdown__container" }, Le = { class: "ui-dropdown__field" }, Se = ["disabled", "placeholder"], $e = { class: "ui-dropdown__controls" }, Ae = { key: 0 }, Oe = {
   key: 0,
   class: "nothing-found"
 }, De = {
@@ -31,7 +33,7 @@ const Ce = { class: "ui-dropdown__envelope" }, Ee = ["tabindex"], Le = { class:
   class: "ui-dropdown__helper"
 }, Fe = {
   name: "PlDropdown"
-}, eo = /* @__PURE__ */ te({
+}, oo = /* @__PURE__ */ te({
   ...Fe,
   props: {
     modelValue: {},
@@ -49,182 +51,182 @@ const Ce = { class: "ui-dropdown__envelope" }, Ee = ["tabindex"], Le = { class:
     optionSize: { default: "small" }
   },
   emits: ["update:modelValue"],
-  setup(P, { emit: q }) {
-    const E = q, n = P, T = ne(), a = V(), L = V(), k = V(), t = re({
+  setup(r, { emit: q }) {
+    const E = q, n = r, T = ne(), d = V(), L = V(), y = V(), t = le({
       search: "",
       activeIndex: -1,
       open: !1
-    }), H = () => ce(
-      p.value.findIndex((e) => C(e.value, n.modelValue)),
+    }), H = () => ue(
+      f.value.findIndex((e) => C(e.value, n.modelValue)),
       (e) => e < 0 ? 0 : e
-    ), R = () => t.activeIndex = H(), _ = i(() => n.options === void 0), y = i(() => _.value ? !0 : n.disabled), S = i(() => (n.options ?? []).findIndex((e) => C(e.value, n.modelValue))), x = i(() => {
-      if (!_.value) {
+    ), R = () => t.activeIndex = H(), k = s(() => n.options === void 0), I = s(() => k.value ? !0 : n.disabled), S = s(() => (n.options ?? []).findIndex((e) => C(e.value, n.modelValue))), $ = s(() => {
+      if (!k.value) {
         if (n.error)
           return ge(n.error);
         if (n.modelValue !== void 0 && S.value === -1)
           return "The selected value is not one of the options";
       }
-    }), A = i(
+    }), A = s(
       () => Ie(n.options ?? []).map((e, o) => ({
         ...e,
         index: o,
         isSelected: o === S.value,
         isActive: o === t.activeIndex
       }))
-    ), O = i(() => {
-      const o = u(A).find((l) => C(l.value, n.modelValue));
+    ), O = s(() => {
+      const o = u(A).find((i) => C(i.value, n.modelValue));
       return (o == null ? void 0 : o.label) || n.modelValue;
-    }), U = i(() => !t.open && n.modelValue ? "" : n.modelValue ? String(O.value) : n.placeholder), K = i(() => n.modelValue !== void 0 && n.modelValue !== null), p = i(() => {
+    }), U = s(() => !t.open && n.modelValue ? "" : n.modelValue ? String(O.value) : n.placeholder), K = s(() => n.modelValue !== void 0 && n.modelValue !== null), f = s(() => {
       const e = A.value;
       return t.search ? e.filter((o) => {
-        const l = t.search.toLowerCase();
-        return o.label.toLowerCase().includes(l) || o.description && o.description.toLowerCase().includes(l) ? !0 : typeof o.value == "string" ? o.value.toLowerCase().includes(l) : o.value === t.search;
+        const i = t.search.toLowerCase();
+        return o.label.toLowerCase().includes(i) || o.description && o.description.toLowerCase().includes(i) ? !0 : typeof o.value == "string" ? o.value.toLowerCase().includes(i) : o.value === t.search;
       }) : e;
-    }), j = i(() => y.value ? void 0 : "0"), $ = (e) => {
+    }), j = s(() => I.value ? void 0 : "0"), D = (e) => {
       var o;
-      E("update:modelValue", e), t.search = "", t.open = !1, (o = a == null ? void 0 : a.value) == null || o.focus();
+      E("update:modelValue", e), t.search = "", t.open = !1, (o = d == null ? void 0 : d.value) == null || o.focus();
     }, G = () => E("update:modelValue", void 0), J = () => {
       var e;
-      return (e = k.value) == null ? void 0 : e.focus();
-    }, I = () => t.open = !t.open, Q = () => t.open = !0, W = (e) => {
+      return (e = y.value) == null ? void 0 : e.focus();
+    }, g = () => t.open = !t.open, Q = () => t.open = !0, W = (e) => {
       var o;
-      (o = a == null ? void 0 : a.value) != null && o.contains(e.relatedTarget) || (t.search = "", t.open = !1);
+      (o = d == null ? void 0 : d.value) != null && o.contains(e.relatedTarget) || (t.search = "", t.open = !1);
     }, X = () => {
       const e = L.value;
       e && pe(e.querySelector(".hovered-item"), (o) => {
         he(e, o);
       });
     }, Y = (e) => {
-      var D, z;
+      var z, B;
       if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.code))
         e.preventDefault();
       else
         return;
-      const { open: o, activeIndex: l } = t;
+      const { open: o, activeIndex: i } = t;
       if (!o) {
         e.code === "Enter" && (t.open = !0);
         return;
       }
-      e.code === "Escape" && (t.open = !1, (D = a.value) == null || D.focus());
-      const f = u(p), { length: w } = f;
-      if (!w)
+      e.code === "Escape" && (t.open = !1, (z = d.value) == null || z.focus());
+      const v = u(f), { length: _ } = v;
+      if (!_)
         return;
-      e.code === "Enter" && $((z = f.find((g) => g.index === l)) == null ? void 0 : z.value);
-      const Z = f.findIndex((g) => g.index === l) ?? -1, ee = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, oe = Math.abs(Z + ee + w) % w;
-      t.activeIndex = p.value[oe].index ?? -1;
+      e.code === "Enter" && D((B = v.find((x) => x.index === i)) == null ? void 0 : B.value);
+      const Z = v.findIndex((x) => x.index === i) ?? -1, ee = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, oe = Math.abs(Z + ee + _) % _;
+      t.activeIndex = f.value[oe].index ?? -1;
     };
-    return me(a), B(() => n.modelValue, R, { immediate: !0 }), B(
+    return me(d), F(() => n.modelValue, R, { immediate: !0 }), F(
       () => t.open,
       (e) => {
         var o;
-        return e ? (o = k.value) == null ? void 0 : o.focus() : "";
+        return e ? (o = y.value) == null ? void 0 : o.focus() : "";
       }
-    ), le(() => {
+    ), re(() => {
       t.search, t.activeIndex >= 0 && t.open && X();
-    }), (e, o) => (r(), s("div", Ce, [
-      c("div", {
+    }), (e, o) => (l(), a("div", be, [
+      p("div", {
         ref_key: "root",
-        ref: a,
+        ref: d,
         tabindex: j.value,
-        class: b(["ui-dropdown", { open: t.open, error: e.error, disabled: y.value }]),
+        class: b(["ui-dropdown", { open: t.open, error: r.error, disabled: I.value }]),
         onKeydown: Y,
         onFocusout: W
       }, [
-        c("div", Le, [
-          c("div", Se, [
-            se(c("input", {
+        p("div", Ee, [
+          p("div", Le, [
+            ie(p("input", {
               ref_key: "input",
-              ref: k,
-              "onUpdate:modelValue": o[0] || (o[0] = (l) => t.search = l),
+              ref: y,
+              "onUpdate:modelValue": o[0] || (o[0] = (i) => t.search = i),
               type: "text",
               tabindex: "-1",
-              disabled: y.value,
+              disabled: I.value,
               placeholder: U.value,
               spellcheck: "false",
               autocomplete: "chrome-off",
               onFocus: Q
-            }, null, 40, xe), [
-              [ie, t.search]
+            }, null, 40, Se), [
+              [ae, t.search]
             ]),
-            t.open ? d("", !0) : (r(), s("div", {
+            t.open ? c("", !0) : (l(), a("div", {
               key: 0,
               onClick: J
             }, [
-              F(we, { class: "input-value" }, {
-                default: M(() => [
-                  ae(v(O.value), 1)
+              M(ke, { class: "input-value" }, {
+                default: N(() => [
+                  se(m(O.value), 1)
                 ]),
                 _: 1
               })
             ])),
-            c("div", Ae, [
-              _.value ? (r(), m(u(ye), {
+            p("div", $e, [
+              k.value ? (l(), h(u(ye), {
                 key: 0,
                 name: "loading"
-              })) : d("", !0),
-              e.clearable && K.value ? (r(), m(u(ke), {
+              })) : c("", !0),
+              r.clearable && K.value ? (l(), h(u(_e), {
                 key: 1,
                 class: "clear",
                 name: "delete-clear",
-                onClick: h(G, ["stop"])
-              })) : d("", !0),
-              N(e.$slots, "append"),
-              e.arrowIconLarge ? (r(), s("div", {
+                onClick: w(G, ["stop"])
+              })) : c("", !0),
+              P(e.$slots, "append"),
+              r.arrowIconLarge ? (l(), a("div", {
                 key: 2,
-                class: b(["arrow-icon", [`icon-24 ${e.arrowIconLarge}`]]),
-                onClick: h(I, ["stop"])
-              }, null, 2)) : e.arrowIcon ? (r(), s("div", {
+                class: b(["arrow-icon", [`icon-24 ${r.arrowIconLarge}`]]),
+                onClick: w(g, ["stop"])
+              }, null, 2)) : r.arrowIcon ? (l(), a("div", {
                 key: 3,
-                class: b(["arrow-icon", [`icon-16 ${e.arrowIcon}`]]),
-                onClick: h(I, ["stop"])
-              }, null, 2)) : (r(), s("div", {
+                class: b(["arrow-icon", [`icon-16 ${r.arrowIcon}`]]),
+                onClick: w(g, ["stop"])
+              }, null, 2)) : (l(), a("div", {
                 key: 4,
                 class: "arrow-icon arrow-icon-default",
-                onClick: h(I, ["stop"])
+                onClick: w(g, ["stop"])
               }))
             ])
           ]),
-          e.label ? (r(), s("label", Oe, [
-            e.required ? (r(), m(u(Ve), {
+          r.label ? (l(), a("label", Ae, [
+            r.required ? (l(), h(u(xe), {
               key: 0,
-              uri: u(be)
-            }, null, 8, ["uri"])) : d("", !0),
-            c("span", null, v(e.label), 1),
-            u(T).tooltip ? (r(), m(u(fe), {
+              uri: u(Ve)
+            }, null, 8, ["uri"])) : c("", !0),
+            p("span", null, m(r.label), 1),
+            u(T).tooltip ? (l(), h(u(fe), {
               key: 1,
               class: "info",
               position: "top"
             }, {
-              tooltip: M(() => [
-                N(e.$slots, "tooltip")
+              tooltip: N(() => [
+                P(e.$slots, "tooltip")
               ]),
               _: 3
-            })) : d("", !0)
-          ])) : d("", !0),
-          t.open ? (r(), s("div", {
+            })) : c("", !0)
+          ])) : c("", !0),
+          t.open ? (l(), a("div", {
             key: 1,
             ref_key: "list",
             ref: L,
             class: "ui-dropdown__options"
           }, [
-            (r(!0), s(de, null, ue(p.value, (l, f) => (r(), m(_e, {
-              key: f,
-              option: l,
-              "is-selected": l.isSelected,
-              "is-hovered": l.isActive,
-              size: e.optionSize,
-              onClick: h((w) => $(l.value), ["stop"])
+            (l(!0), a(de, null, ce(f.value, (i, v) => (l(), h(we, {
+              key: v,
+              option: i,
+              "is-selected": i.isSelected,
+              "is-hovered": i.isActive,
+              size: r.optionSize,
+              onClick: w((_) => D(i.value), ["stop"])
             }, null, 8, ["option", "is-selected", "is-hovered", "size", "onClick"]))), 128)),
-            p.value.length ? d("", !0) : (r(), s("div", $e, "Nothing found"))
-          ], 512)) : d("", !0),
-          F(ve, { class: "ui-dropdown__contour" })
+            f.value.length ? c("", !0) : (l(), a("div", Oe, "Nothing found"))
+          ], 512)) : c("", !0),
+          M(ve, { class: "ui-dropdown__contour" })
         ])
-      ], 42, Ee),
-      x.value ? (r(), s("div", De, v(x.value), 1)) : _.value && e.loadingOptionsHelper ? (r(), s("div", ze, v(e.loadingOptionsHelper), 1)) : e.helper ? (r(), s("div", Be, v(e.helper), 1)) : d("", !0)
+      ], 42, Ce),
+      $.value ? (l(), a("div", De, m($.value), 1)) : k.value && r.loadingOptionsHelper ? (l(), a("div", ze, m(r.loadingOptionsHelper), 1)) : r.helper ? (l(), a("div", Be, m(r.helper), 1)) : c("", !0)
     ]));
   }
 });
 export {
-  eo as default
+  oo as default
 };
 //# sourceMappingURL=PlDropdownLegacy.vue.js.map

package/dist/components/PlDropdownLegacy/PlDropdownLegacy.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlDropdownLegacy.vue.js","sources":["../../../src/components/PlDropdownLegacy/PlDropdownLegacy.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A component for selecting one value from a list of options\n /\nexport default {\n name: 'PlDropdown',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport './pl-dropdown-legacy.scss';\nimport { computed, reactive, ref, unref, useSlots, watch, watchPostEffect } from 'vue';\nimport { tap, tapIf } from '../../helpers/functions';\nimport { PlTooltip } from '../PlTooltip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport type { ListOption, ListOptionNormalized } from '../../types';\nimport { scrollIntoView } from '../../helpers/dom';\nimport { deepEqual } from '../../helpers/objects';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport LongText from '../LongText.vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport { PlSvg } from '../PlSvg';\nimport SvgRequired from '../../assets/images/required.svg?raw';\n\nconst emit = defineEmits<{\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 value of the dropdown.\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 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 Custom icon (16px) class for the dropdown arrow (optional)\n /\n arrowIcon?: string;\n /\n Custom icon (24px) class for the dropdown arrow (optional)\n /\n arrowIconLarge?: string;\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 arrowIconLarge: undefined,\n optionSize: 'small',\n options: undefined,\n },\n);\n\nconst slots = useSlots();\n\nconst root = ref<HTMLElement \| undefined>();\nconst list = ref<HTMLElement \| undefined>();\nconst input = ref<HTMLInputElement \| undefined>();\n\nconst data = reactive({\n search: '',\n activeIndex: -1,\n open: false,\n});\n\nconst findActiveIndex = () =>\n tap(\n filteredRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n (v) => (v < 0 ? 0 : v),\n );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\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 selectedIndex = computed(() => {\n return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\n});\n\nconst computedError = computed(() => {\n if (isLoadingOptions.value) {\n return undefined;\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n if (props.modelValue !== undefined && selectedIndex.value === -1) {\n return 'The selected value is not one of the options';\n }\n\n return undefined;\n});\n\nconst optionsRef = computed(() =>\n normalizeListOptions(props.options ?? []).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n })),\n);\n\nconst textValue = computed(() => {\n const options = unref(optionsRef);\n\n const item: ListOption \| undefined = options.find((o) => deepEqual(o.value, props.modelValue));\n\n return item?.label \|\| props.modelValue; // @todo show inner value?\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && props.modelValue) {\n return '';\n }\n\n return props.modelValue ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst filteredRef = computed(() => {\n const options = optionsRef.value;\n\n if (data.search) {\n return options.filter((o: ListOptionNormalized) => {\n const search = data.search.toLowerCase();\n\n if (o.label.toLowerCase().includes(search)) {\n return true;\n }\n\n if (o.description && o.description.toLowerCase().includes(search)) {\n return true;\n }\n\n if (typeof o.value === 'string') {\n return o.value.toLowerCase().includes(search);\n }\n\n return o.value === data.search;\n });\n }\n\n return options;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst selectOption = (v: M \| undefined) => {\n emit('update:modelValue', v);\n data.search = '';\n data.open = false;\n root?.value?.focus();\n};\n\nconst clear = () => emit('update:modelValue', undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => (data.open = !data.open);\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n if (!root?.value?.contains(event.relatedTarget as Node \| null)) {\n data.search = '';\n data.open = false;\n }\n};\n\nconst scrollIntoActive = () => {\n const $list = list.value;\n\n if (!$list) {\n return;\n }\n\n tapIf($list.querySelector('.hovered-item') as HTMLElement, (opt) => {\n scrollIntoView($list, opt);\n });\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {\n return;\n } else {\n e.preventDefault();\n }\n\n const { open, activeIndex } = 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 root.value?.focus();\n }\n\n const filtered = unref(filteredRef);\n\n const { length } = filtered;\n\n if (!length) {\n return;\n }\n\n if (e.code === 'Enter') {\n selectOption(filtered.find((it) => it.index === activeIndex)?.value);\n }\n\n const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n const newIndex = Math.abs(localIndex + delta + length) % length;\n\n data.activeIndex = filteredRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(root);\n\nwatch(() => props.modelValue, updateActive, { immediate: true });\n\nwatch(\n () => data.open,\n (open) => (open ? input.value?.focus() : ''),\n);\n\nwatchPostEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n data.search; // to watch\n\n if (data.activeIndex >= 0 && data.open) {\n scrollIntoActive();\n }\n});\n</script>\n\n<template>\n <div class=\"ui-dropdown__envelope\">\n <div\n ref=\"root\"\n :tabindex=\"tabindex\"\n class=\"ui-dropdown\"\n :class=\"{ open: data.open, error, disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"ui-dropdown__container\">\n <div class=\"ui-dropdown__field\">\n <input\n ref=\"input\"\n v-model=\"data.search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"computedPlaceholder\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"onInputFocus\"\n />\n\n <div v-if=\"!data.open\" @click=\"setFocusOnInput\">\n <LongText class=\"input-value\"> {{ textValue }} </LongText>\n </div>\n\n <div class=\"ui-dropdown__controls\">\n <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n <PlIcon16 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n <slot name=\"append\" />\n <div v-if=\"arrowIconLarge\" class=\"arrow-icon\" :class=\"[`icon-24 ${arrowIconLarge}`]\" @click.stop=\"toggleOpen\" />\n <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" @click.stop=\"toggleOpen\" />\n <div v-else class=\"arrow-icon arrow-icon-default\" @click.stop=\"toggleOpen\" />\n </div>\n </div>\n <label v-if=\"label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\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 <div v-if=\"data.open\" ref=\"list\" class=\"ui-dropdown__options\">\n <DropdownListItem\n v-for=\"(item, index) in filteredRef\"\n :key=\"index\"\n :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"optionSize\"\n @click.stop=\"selectOption(item.value)\"\n />\n <div v-if=\"!filteredRef.length\" class=\"nothing-found\">Nothing found</div>\n </div>\n <DoubleContour class=\"ui-dropdown__contour\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"ui-dropdown__error\">{{ computedError }}</div>\n <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"ui-dropdown__helper\">{{ loadingOptionsHelper }}</div>\n <div v-else-if=\"helper\" class=\"ui-dropdown__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"names":["__default__","emit","__emit","props","__props","slots","useSlots","root","ref","list","input","data","reactive","findActiveIndex","tap","filteredRef","o","deepEqual","v","updateActive","isLoadingOptions","computed","isDisabled","selectedIndex","computedError","getErrorMessage","optionsRef","normalizeListOptions","opt","index","textValue","item","unref","computedPlaceholder","hasValue","options","search","tabindex","selectOption","_a","clear","setFocusOnInput","toggleOpen","onInputFocus","onFocusOut","event","scrollIntoActive","$list","tapIf","scrollIntoView","handleKeydown","open","activeIndex","filtered","length","_b","it","localIndex","delta","newIndex","useLabelNotch","watch","watchPostEffect"],"mappings":"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"}
1	+ {"version":3,"file":"PlDropdownLegacy.vue.js","sources":["../../../src/components/PlDropdownLegacy/PlDropdownLegacy.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A component for selecting one value from a list of options\n /\nexport default {\n name: 'PlDropdown',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport './pl-dropdown-legacy.scss';\nimport { computed, reactive, ref, unref, useSlots, watch, watchPostEffect } from 'vue';\nimport { tap, tapIf } from '../../helpers/functions';\nimport { PlTooltip } from '../PlTooltip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport type { ListOption, ListOptionNormalized } from '../../types';\nimport { scrollIntoView } from '../../helpers/dom';\nimport { deepEqual } from '../../helpers/objects';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport LongText from '../LongText.vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport { PlSvg } from '../PlSvg';\nimport SvgRequired from '../../assets/images/required.svg?raw';\n\nconst emit = defineEmits<{\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 value of the dropdown.\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 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 Custom icon (16px) class for the dropdown arrow (optional)\n /\n arrowIcon?: string;\n /\n Custom icon (24px) class for the dropdown arrow (optional)\n /\n arrowIconLarge?: string;\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 arrowIconLarge: undefined,\n optionSize: 'small',\n options: undefined,\n },\n);\n\nconst slots = useSlots();\n\nconst root = ref<HTMLElement \| undefined>();\nconst list = ref<HTMLElement \| undefined>();\nconst input = ref<HTMLInputElement \| undefined>();\n\nconst data = reactive({\n search: '',\n activeIndex: -1,\n open: false,\n});\n\nconst findActiveIndex = () =>\n tap(\n filteredRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n (v) => (v < 0 ? 0 : v),\n );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\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 selectedIndex = computed(() => {\n return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\n});\n\nconst computedError = computed(() => {\n if (isLoadingOptions.value) {\n return undefined;\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n if (props.modelValue !== undefined && selectedIndex.value === -1) {\n return 'The selected value is not one of the options';\n }\n\n return undefined;\n});\n\nconst optionsRef = computed(() =>\n normalizeListOptions(props.options ?? []).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n })),\n);\n\nconst textValue = computed(() => {\n const options = unref(optionsRef);\n\n const item: ListOption \| undefined = options.find((o) => deepEqual(o.value, props.modelValue));\n\n return item?.label \|\| props.modelValue; // @todo show inner value?\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && props.modelValue) {\n return '';\n }\n\n return props.modelValue ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst filteredRef = computed(() => {\n const options = optionsRef.value;\n\n if (data.search) {\n return options.filter((o: ListOptionNormalized) => {\n const search = data.search.toLowerCase();\n\n if (o.label.toLowerCase().includes(search)) {\n return true;\n }\n\n if (o.description && o.description.toLowerCase().includes(search)) {\n return true;\n }\n\n if (typeof o.value === 'string') {\n return o.value.toLowerCase().includes(search);\n }\n\n return o.value === data.search;\n });\n }\n\n return options;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst selectOption = (v: M \| undefined) => {\n emit('update:modelValue', v);\n data.search = '';\n data.open = false;\n root?.value?.focus();\n};\n\nconst clear = () => emit('update:modelValue', undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => (data.open = !data.open);\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n if (!root?.value?.contains(event.relatedTarget as Node \| null)) {\n data.search = '';\n data.open = false;\n }\n};\n\nconst scrollIntoActive = () => {\n const $list = list.value;\n\n if (!$list) {\n return;\n }\n\n tapIf($list.querySelector('.hovered-item') as HTMLElement, (opt) => {\n scrollIntoView($list, opt);\n });\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {\n return;\n } else {\n e.preventDefault();\n }\n\n const { open, activeIndex } = 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 root.value?.focus();\n }\n\n const filtered = unref(filteredRef);\n\n const { length } = filtered;\n\n if (!length) {\n return;\n }\n\n if (e.code === 'Enter') {\n selectOption(filtered.find((it) => it.index === activeIndex)?.value);\n }\n\n const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n const newIndex = Math.abs(localIndex + delta + length) % length;\n\n data.activeIndex = filteredRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(root);\n\nwatch(() => props.modelValue, updateActive, { immediate: true });\n\nwatch(\n () => data.open,\n (open) => (open ? input.value?.focus() : ''),\n);\n\nwatchPostEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n data.search; // to watch\n\n if (data.activeIndex >= 0 && data.open) {\n scrollIntoActive();\n }\n});\n</script>\n\n<template>\n <div class=\"ui-dropdown__envelope\">\n <div\n ref=\"root\"\n :tabindex=\"tabindex\"\n class=\"ui-dropdown\"\n :class=\"{ open: data.open, error, disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"ui-dropdown__container\">\n <div class=\"ui-dropdown__field\">\n <input\n ref=\"input\"\n v-model=\"data.search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"computedPlaceholder\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"onInputFocus\"\n />\n\n <div v-if=\"!data.open\" @click=\"setFocusOnInput\">\n <LongText class=\"input-value\"> {{ textValue }} </LongText>\n </div>\n\n <div class=\"ui-dropdown__controls\">\n <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n <PlIcon16 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n <slot name=\"append\" />\n <div v-if=\"arrowIconLarge\" class=\"arrow-icon\" :class=\"[`icon-24 ${arrowIconLarge}`]\" @click.stop=\"toggleOpen\" />\n <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" @click.stop=\"toggleOpen\" />\n <div v-else class=\"arrow-icon arrow-icon-default\" @click.stop=\"toggleOpen\" />\n </div>\n </div>\n <label v-if=\"label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\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 <div v-if=\"data.open\" ref=\"list\" class=\"ui-dropdown__options\">\n <DropdownListItem\n v-for=\"(item, index) in filteredRef\"\n :key=\"index\"\n :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"optionSize\"\n @click.stop=\"selectOption(item.value)\"\n />\n <div v-if=\"!filteredRef.length\" class=\"nothing-found\">Nothing found</div>\n </div>\n <DoubleContour class=\"ui-dropdown__contour\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"ui-dropdown__error\">{{ computedError }}</div>\n <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"ui-dropdown__helper\">{{ loadingOptionsHelper }}</div>\n <div v-else-if=\"helper\" class=\"ui-dropdown__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"names":["__default__","emit","__emit","props","__props","slots","useSlots","root","ref","list","input","data","reactive","findActiveIndex","tap","filteredRef","o","deepEqual","v","updateActive","isLoadingOptions","computed","isDisabled","selectedIndex","computedError","getErrorMessage","optionsRef","normalizeListOptions","opt","index","textValue","item","unref","computedPlaceholder","hasValue","options","search","tabindex","selectOption","_a","clear","setFocusOnInput","toggleOpen","onInputFocus","onFocusOut","event","scrollIntoActive","$list","tapIf","scrollIntoView","handleKeydown","open","activeIndex","filtered","length","_b","it","localIndex","delta","newIndex","useLabelNotch","watch","watchPostEffect","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_hoisted_3","_hoisted_4","_cache","$event","_vModelText","_createVNode","LongText","_hoisted_6","_createBlock","_unref","PlMaskIcon24","PlIcon16","_renderSlot","_ctx","_hoisted_7","PlSvg","SvgRequired","PlTooltip","_Fragment","_renderList","DropdownListItem","_withModifiers","_hoisted_8","DoubleContour","_hoisted_9","_toDisplayString","_hoisted_10","_hoisted_11"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIAA,KAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;;;AAsBA,UAAMC,IAAOC,GAOPC,IAAQC,GAuERC,IAAQC,GAAA,GAERC,IAAOC,EAAA,GACPC,IAAOD,EAAA,GACPE,IAAQF,EAAA,GAERG,IAAOC,GAAS;AAAA,MACpB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,MAAM;AAAA,IAAA,CACP,GAEKC,IAAkB,MACtBC;AAAA,MACEC,EAAY,MAAM,UAAU,CAACC,MAAMC,EAAUD,EAAE,OAAOb,EAAM,UAAU,CAAC;AAAA,MACvE,CAACe,MAAOA,IAAI,IAAI,IAAIA;AAAA,IAAA,GAGlBC,IAAe,MAAOR,EAAK,cAAcE,EAAA,GAEzCO,IAAmBC,EAAS,MACzBlB,EAAM,YAAY,MAC1B,GAEKmB,IAAaD,EAAS,MACtBD,EAAiB,QACZ,KAGFjB,EAAM,QACd,GAEKoB,IAAgBF,EAAS,OACrBlB,EAAM,WAAW,CAAA,GAAI,UAAU,CAACa,MAAMC,EAAUD,EAAE,OAAOb,EAAM,UAAU,CAAC,CACnF,GAEKqB,IAAgBH,EAAS,MAAM;AACnC,UAAI,CAAAD,EAAiB,OAIrB;AAAA,YAAIjB,EAAM;AACR,iBAAOsB,GAAgBtB,EAAM,KAAK;AAGpC,YAAIA,EAAM,eAAe,UAAaoB,EAAc,UAAU;AAC5D,iBAAO;AAAA;AAAA,IAIX,CAAC,GAEKG,IAAaL;AAAA,MAAS,MAC1BM,GAAqBxB,EAAM,WAAW,CAAA,CAAE,EAAE,IAAI,CAACyB,GAAKC,OAAW;AAAA,QAC7D,GAAGD;AAAA,QACH,OAAAC;AAAA,QACA,YAAYA,MAAUN,EAAc;AAAA,QACpC,UAAUM,MAAUlB,EAAK;AAAA,MAAA,EACzB;AAAA,IAAA,GAGEmB,IAAYT,EAAS,MAAM;AAG/B,YAAMU,IAFUC,EAAMN,CAAU,EAEa,KAAK,CAACV,MAAMC,EAAUD,EAAE,OAAOb,EAAM,UAAU,CAAC;AAE7F,cAAO4B,KAAA,gBAAAA,EAAM,UAAS5B,EAAM;AAAA,IAC9B,CAAC,GAEK8B,IAAsBZ,EAAS,MAC/B,CAACV,EAAK,QAAQR,EAAM,aACf,KAGFA,EAAM,aAAa,OAAO2B,EAAU,KAAK,IAAI3B,EAAM,WAC3D,GAEK+B,IAAWb,EAAS,MACjBlB,EAAM,eAAe,UAAaA,EAAM,eAAe,IAC/D,GAEKY,IAAcM,EAAS,MAAM;AACjC,YAAMc,IAAUT,EAAW;AAE3B,aAAIf,EAAK,SACAwB,EAAQ,OAAO,CAAC,MAA4B;AACjD,cAAMC,IAASzB,EAAK,OAAO,YAAA;AAM3B,eAJI,EAAE,MAAM,YAAA,EAAc,SAASyB,CAAM,KAIrC,EAAE,eAAe,EAAE,YAAY,cAAc,SAASA,CAAM,IACvD,KAGL,OAAO,EAAE,SAAU,WACd,EAAE,MAAM,YAAA,EAAc,SAASA,CAAM,IAGvC,EAAE,UAAUzB,EAAK;AAAA,MAC1B,CAAC,IAGIwB;AAAA,IACT,CAAC,GAEKE,IAAWhB,EAAS,MAAOC,EAAW,QAAQ,SAAY,GAAI,GAE9DgB,IAAe,CAACpB,MAAqB;;AACzC,MAAAjB,EAAK,qBAAqBiB,CAAC,GAC3BP,EAAK,SAAS,IACdA,EAAK,OAAO,KACZ4B,IAAAhC,KAAA,gBAAAA,EAAM,UAAN,QAAAgC,EAAa;AAAA,IACf,GAEMC,IAAQ,MAAMvC,EAAK,qBAAqB,MAAS,GAEjDwC,IAAkB,MAAA;;AAAM,cAAAF,IAAA7B,EAAM,UAAN,gBAAA6B,EAAa;AAAA,OAErCG,IAAa,MAAO/B,EAAK,OAAO,CAACA,EAAK,MAEtCgC,IAAe,MAAOhC,EAAK,OAAO,IAElCiC,IAAa,CAACC,MAAsB;;AACxC,OAAKN,IAAAhC,KAAA,gBAAAA,EAAM,UAAN,QAAAgC,EAAa,SAASM,EAAM,mBAC/BlC,EAAK,SAAS,IACdA,EAAK,OAAO;AAAA,IAEhB,GAEMmC,IAAmB,MAAM;AAC7B,YAAMC,IAAQtC,EAAK;AAEnB,MAAKsC,KAILC,GAAMD,EAAM,cAAc,eAAe,GAAkB,CAACnB,MAAQ;AAClE,QAAAqB,GAAeF,GAAOnB,CAAG;AAAA,MAC3B,CAAC;AAAA,IACH,GAEMsB,IAAgB,CAAC,MAAgD;;AACrE,UAAK,CAAC,aAAa,WAAW,SAAS,QAAQ,EAAE,SAAS,EAAE,IAAI;AAG9D,UAAE,eAAA;AAAA;AAFF;AAKF,YAAM,EAAE,MAAAC,GAAM,aAAAC,EAAA,IAAgBzC;AAE9B,UAAI,CAACwC,GAAM;AACT,QAAI,EAAE,SAAS,YACbxC,EAAK,OAAO;AAEd;AAAA,MACF;AAEA,MAAI,EAAE,SAAS,aACbA,EAAK,OAAO,KACZ4B,IAAAhC,EAAK,UAAL,QAAAgC,EAAY;AAGd,YAAMc,IAAWrB,EAAMjB,CAAW,GAE5B,EAAE,QAAAuC,MAAWD;AAEnB,UAAI,CAACC;AACH;AAGF,MAAI,EAAE,SAAS,WACbhB,GAAaiB,IAAAF,EAAS,KAAK,CAACG,MAAOA,EAAG,UAAUJ,CAAW,MAA9C,gBAAAG,EAAiD,KAAK;AAGrE,YAAME,IAAaJ,EAAS,UAAU,CAACG,MAAOA,EAAG,UAAUJ,CAAW,KAAK,IAErEM,KAAQ,EAAE,SAAS,cAAc,IAAI,EAAE,SAAS,YAAY,KAAK,GAEjEC,KAAW,KAAK,IAAIF,IAAaC,KAAQJ,CAAM,IAAIA;AAEzD,MAAA3C,EAAK,cAAcI,EAAY,MAAM4C,EAAQ,EAAE,SAAS;AAAA,IAC1D;AAEA,WAAAC,GAAcrD,CAAI,GAElBsD,EAAM,MAAM1D,EAAM,YAAYgB,GAAc,EAAE,WAAW,IAAM,GAE/D0C;AAAA,MACE,MAAMlD,EAAK;AAAA,MACX,CAACwC,MAAA;;AAAU,eAAAA,KAAOZ,IAAA7B,EAAM,UAAN,gBAAA6B,EAAa,UAAU;AAAA;AAAA,IAAA,GAG3CuB,GAAgB,MAAM;AAEpB,MAAAnD,EAAK,QAEDA,EAAK,eAAe,KAAKA,EAAK,QAChCmC,EAAA;AAAA,IAEJ,CAAC,cAICiB,EAAA,GAAAC,EA+DM,OA/DNC,IA+DM;AAAA,MA9DJC,EA0DM,OAAA;AAAA,iBAzDA;AAAA,QAAJ,KAAI3D;AAAA,QACH,UAAU8B,EAAA;AAAA,QACX,OAAK8B,EAAA,CAAC,eAAa,EAAA,MACHxD,EAAK,MAAI,OAAEP,EAAA,OAAK,UAAYkB,EAAA,MAAA,CAAU,CAAA;AAAA,QACrD,WAAS4B;AAAA,QACT,YAAUN;AAAA,MAAA;QAEXsB,EAiDM,OAjDNE,IAiDM;AAAA,UAhDJF,EAyBM,OAzBNG,IAyBM;AAAA,eAxBJH,EAUE,SAAA;AAAA,uBATI;AAAA,cAAJ,KAAIxD;AAAA,cACK,uBAAA4D,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAA5D,EAAK,SAAM4D;AAAA,cACpB,MAAK;AAAA,cACL,UAAS;AAAA,cACR,UAAUjD,EAAA;AAAA,cACV,aAAaW,EAAA;AAAA,cACd,YAAW;AAAA,cACX,cAAa;AAAA,cACZ,SAAOU;AAAA,YAAA;cAPC,CAAA6B,IAAA7D,EAAK,MAAM;AAAA,YAAA;YAUVA,EAAK,yBAAjBqD,EAEM,OAAA;AAAA;cAFkB,SAAOvB;AAAA,YAAA;cAC7BgC,EAA0DC,IAAA,EAAhD,OAAM,iBAAa;AAAA,2BAAE,MAAe;AAAA,uBAAZ5C,EAAA,KAAS,GAAA,CAAA;AAAA,gBAAA;;;;YAG7CoC,EAOM,OAPNS,IAOM;AAAA,cANgBvD,EAAA,cAApBwD,EAAuDC,EAAAC,EAAA,GAAA;AAAA;gBAAjB,MAAK;AAAA,cAAA;cAC3B1E,EAAA,aAAa8B,EAAA,cAA7B0C,EAA+FC,EAAAE,EAAA,GAAA;AAAA;gBAAxD,OAAM;AAAA,gBAAQ,MAAK;AAAA,gBAAgB,WAAYvC,GAAK,CAAA,MAAA,CAAA;AAAA,cAAA;cAC3FwC,EAAsBC,EAAA,QAAA,QAAA;AAAA,cACX7E,EAAA,uBAAX4D,EAAgH,OAAA;AAAA;gBAArF,OAAKG,EAAA,CAAC,cAAY,CAAA,WAAqB/D,EAAA,cAAc,EAAA,CAAA,CAAA;AAAA,gBAAM,WAAYsC,GAAU,CAAA,MAAA,CAAA;AAAA,cAAA,eAC5FtC,EAAA,kBAAhB4D,EAA2G,OAAA;AAAA;gBAAhF,OAAKG,EAAA,CAAC,cAAY,CAAA,WAAqB/D,EAAA,SAAS,EAAA,CAAA,CAAA;AAAA,gBAAM,WAAYsC,GAAU,CAAA,MAAA,CAAA;AAAA,cAAA,qBACvGsB,EAA6E,OAAA;AAAA;gBAAjE,OAAM;AAAA,gBAAiC,WAAYtB,GAAU,CAAA,MAAA,CAAA;AAAA,cAAA;;;UAGhEtC,EAAA,cAAb4D,EAQQ,SAAAkB,IAAA;AAAA,YAPO9E,EAAA,iBAAbwE,EAA4CC,EAAAM,EAAA,GAAA;AAAA;cAApB,KAAKN,EAAAO,EAAA;AAAA,YAAA;YAC7BlB,EAAwB,gBAAf9D,EAAA,KAAK,GAAA,CAAA;AAAA,YACGyE,EAAAxE,CAAA,EAAM,gBAAvBuE,EAIYC,EAAAQ,EAAA,GAAA;AAAA;cAJoB,OAAM;AAAA,cAAO,UAAS;AAAA,YAAA;cACzC,WACT,MAAuB;AAAA,gBAAvBL,EAAuBC,EAAA,QAAA,SAAA;AAAA,cAAA;;;;UAIlBtE,EAAK,aAAhBqD,EAWM,OAAA;AAAA;qBAXoB;AAAA,YAAJ,KAAIvD;AAAA,YAAO,OAAM;AAAA,UAAA;aACrCsD,EAAA,EAAA,GAAAC,EAQEsB,IAAA,MAAAC,GAPwBxE,EAAA,OAAW,CAA3BgB,GAAMF,YADhB+C,EAQEY,IAAA;AAAA,cANC,KAAK3D;AAAA,cACL,QAAQE;AAAA,cACR,eAAaA,EAAK;AAAA,cAClB,cAAYA,EAAK;AAAA,cACjB,MAAM3B,EAAA;AAAA,cACN,SAAKqF,EAAA,CAAAlB,MAAOjC,EAAaP,EAAK,KAAK,GAAA,CAAA,MAAA,CAAA;AAAA,YAAA;YAE1BhB,EAAA,MAAY,2BAAxBiD,EAAyE,OAAzE0B,IAAsD,eAAa;AAAA;UAErEjB,EAA8CkB,IAAA,EAA/B,OAAM,wBAAsB;AAAA,QAAA;;MAGpCnE,EAAA,cAAXwC,EAA8E,OAA9E4B,IAA8EC,EAAtBrE,EAAA,KAAa,GAAA,CAAA,KACrDJ,EAAA,SAAoBhB,EAAA,6BAApC4D,EAAsH,OAAtH8B,IAAsHD,EAA7BzF,EAAA,oBAAoB,GAAA,CAAA,KAC7FA,EAAA,eAAhB4D,EAAsE,OAAtE+B,IAAsEF,EAAfzF,EAAA,MAAM,GAAA,CAAA;;;;"}

package/dist/components/PlDropdownLine/PlDropdownLine.vue.d.ts CHANGED Viewed

@@ -39,8 +39,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    mode: "list" | "tabs";
     placeholder: string;
+    mode: "list" | "tabs";
     clearable: boolean;
     prefix: string;
     tabsContainerStyles: string | false | import('vue').CSSProperties | StyleValue[] | null;

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

@@ -193,9 +193,9 @@ const ce = { class: "pl-line-dropdown__prefix" }, fe = { class: "pl-line-dropdow
               onClick: f((V) => v(o), ["stop"])
             }, null, 8, ["option", "is-selected", "is-hovered", "onClick"])
           ])), 128)),
-          b(a).length === 0 ? (r(), d("div", ve, t[3] || (t[3] = [
+          b(a).length === 0 ? (r(), d("div", ve, [...t[3] || (t[3] = [
             c("div", { class: "pl-line-dropdown__no-item-title text-s" }, "Didn't find anything that matched", -1)
-          ]))) : k("", !0)
+          ])])) : k("", !0)
         ], 36)) : i.mode === "tabs" ? (r(), d("div", {
           key: 1,
           ref_key: "list",
@@ -221,9 +221,9 @@ const ce = { class: "pl-line-dropdown__prefix" }, fe = { class: "pl-line-dropdow
               onClick: f((V) => v(o), ["stop"])
             }, null, 8, ["option", "is-selected", "is-hovered", "onClick"])
           ])), 128)),
-          b(a).length === 0 ? (r(), d("div", he, t[4] || (t[4] = [
+          b(a).length === 0 ? (r(), d("div", he, [...t[4] || (t[4] = [
             c("div", { class: "pl-line-dropdown__no-item-title text-s" }, "Didn't find anything that matched", -1)
-          ]))) : k("", !0)
+          ])])) : k("", !0)
         ], 36)) : k("", !0)
       ])) : k("", !0)
     ], 34));

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

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

package/dist/components/PlDropdownLine/ResizableInput.vue.js CHANGED Viewed

@@ -1,7 +1,7 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".resizable-input{position:relative;box-sizing:border-box;padding:0 8px;display:inline-block;max-width:100%;text-overflow:ellipsis;overflow:hidden}.resizable-input__size-span{font-family:inherit;white-space:pre;display:inline-block;font-size:inherit;line-height:inherit;box-sizing:border-box;position:relative;left:0;opacity:0;min-width:2px;-webkit-user-select:none;user-select:none;vertical-align:top}.resizable-input input{border:none;outline:none;height:100%;text-overflow:ellipsis;font-family:inherit;background:none;color:inherit;top:0;left:0;right:0;font-size:inherit;line-height:inherit;position:absolute;box-sizing:border-box}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
-import { defineComponent as p, computed as a, createElementBlock as u, openBlock as c, createElementVNode as o, normalizeStyle as m, toDisplayString as h, mergeProps as _ } from "vue";
+import { defineComponent as p, computed as o, createElementBlock as u, openBlock as c, createElementVNode as d, normalizeStyle as m, toDisplayString as h, mergeProps as _ } from "vue";
-const f = { class: "resizable-input" }, b = ["placeholder", "value", "disabled"], x = /* @__PURE__ */ p({
+const f = { class: "resizable-input" }, b = ["placeholder", "value", "disabled"], V = /* @__PURE__ */ p({
   __name: "ResizableInput",
   props: {
     modelValue: {},
@@ -11,33 +11,33 @@ const f = { class: "resizable-input" }, b = ["placeholder", "value", "disabled"]
     width: {}
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: d }) {
-    const t = s, n = d, i = a(() => {
+  setup(l, { emit: n }) {
+    const t = l, s = n, i = o(() => {
       var e;
       return t.placeholder ? t.placeholder : (e = t.modelValue) == null ? void 0 : e.replace('"', "");
-    }), l = a(() => {
+    }), a = o(() => {
       const e = {};
       return t.width && (e.width = t.width), t.maxWidth && (e.maxWidth = t.maxWidth), e;
     });
     function r(e) {
-      n("update:modelValue", e.target.value);
+      s("update:modelValue", e.target.value);
     }
     return (e, v) => (c(), u("div", f, [
-      o("span", {
-        style: m(l.value),
+      d("span", {
+        style: m(a.value),
         class: "resizable-input__size-span"
       }, h(i.value), 5),
-      o("input", _(e.$attrs, {
-        placeholder: e.placeholder,
+      d("input", _(e.$attrs, {
+        placeholder: l.placeholder,
         value: t.modelValue,
         disabled: t.disabled,
-        style: l.value,
+        style: a.value,
         onInput: r
       }), null, 16, b)
     ]));
   }
 });
 export {
-  x as default
+  V as default
 };
 //# sourceMappingURL=ResizableInput.vue.js.map