@milaboratories/uikit 2.2.89 → 2.2.91

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

@@ -0,0 +1,226 @@
+(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";
+
+import { tap as ce, 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 ke from "../PlIcon16/PlIcon16.vue.js";
+import ye from "../PlIcon24/PlIcon24.vue.js";
+import { normalizeListOptions as Ie } from "../../helpers/utils.js";
+import ge from "../../generated/components/svg/images/SvgRequired.vue2.js";
+import { getErrorMessage as Ve } from "../../helpers/error.js";
+const be = { class: "ui-dropdown__envelope" }, Ce = ["tabindex"], Ee = { class: "ui-dropdown__container" }, Le = { class: "ui-dropdown__field" }, Se = ["disabled", "placeholder"], xe = { class: "ui-dropdown__controls" }, Ae = { key: 0 }, Oe = {
+  key: 0,
+  class: "nothing-found"
+}, $e = {
+  key: 0,
+  class: "ui-dropdown__error"
+}, De = {
+  key: 1,
+  class: "ui-dropdown__helper"
+}, ze = {
+  key: 2,
+  class: "ui-dropdown__helper"
+}, Be = {
+  name: "PlDropdown"
+}, Ye = /* @__PURE__ */ te({
+  ...Be,
+  props: {
+    modelValue: {},
+    label: { default: "" },
+    options: { default: void 0 },
+    helper: { default: void 0 },
+    loadingOptionsHelper: { default: void 0 },
+    error: { default: void 0 },
+    placeholder: { default: "..." },
+    clearable: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    arrowIcon: { default: void 0 },
+    arrowIconLarge: { default: void 0 },
+    optionSize: { default: "small" }
+  },
+  emits: ["update:modelValue"],
+  setup(q, { emit: P }) {
+    const E = P, n = q, T = ne(), a = V(), L = V(), k = V(), t = re({
+      search: "",
+      activeIndex: -1,
+      open: !1
+    }), H = () => ce(
+      p.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) {
+        if (n.error)
+          return Ve(n.error);
+        if (n.modelValue !== void 0 && S.value === -1)
+          return "The selected value is not one of the options";
+      }
+    }), A = i(
+      () => 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));
+      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(() => {
+      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;
+      }) : e;
+    }), j = i(() => y.value ? void 0 : "0"), $ = (e) => {
+      var o;
+      E("update:modelValue", e), t.search = "", t.open = !1, (o = a == null ? void 0 : a.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) => {
+      var o;
+      (o = a == null ? void 0 : a.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;
+      if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.code))
+        e.preventDefault();
+      else
+        return;
+      const { open: o, activeIndex: l } = 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)
+        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;
+    };
+    return me(a), B(() => n.modelValue, R, { immediate: !0 }), B(
+      () => t.open,
+      (e) => {
+        var o;
+        return e ? (o = k.value) == null ? void 0 : o.focus() : "";
+      }
+    ), le(() => {
+      t.search, t.activeIndex >= 0 && t.open && X();
+    }), (e, o) => (r(), s("div", be, [
+      c("div", {
+        ref_key: "root",
+        ref: a,
+        tabindex: j.value,
+        class: b(["ui-dropdown", { open: t.open, error: e.error, disabled: y.value }]),
+        onKeydown: Y,
+        onFocusout: W
+      }, [
+        c("div", Ee, [
+          c("div", Le, [
+            se(c("input", {
+              ref_key: "input",
+              ref: k,
+              "onUpdate:modelValue": o[0] || (o[0] = (l) => t.search = l),
+              type: "text",
+              tabindex: "-1",
+              disabled: y.value,
+              placeholder: U.value,
+              spellcheck: "false",
+              autocomplete: "chrome-off",
+              onFocus: Q
+            }, null, 40, Se), [
+              [ie, t.search]
+            ]),
+            t.open ? d("", !0) : (r(), s("div", {
+              key: 0,
+              onClick: J
+            }, [
+              F(we, { class: "input-value" }, {
+                default: M(() => [
+                  ae(v(O.value), 1)
+                ]),
+                _: 1
+              })
+            ])),
+            c("div", xe, [
+              _.value ? (r(), m(u(ye), {
+                key: 0,
+                name: "loading"
+              })) : d("", !0),
+              e.clearable && K.value ? (r(), m(u(ke), {
+                key: 1,
+                class: "clear",
+                name: "delete-clear",
+                onClick: h(G, ["stop"])
+              })) : d("", !0),
+              N(e.$slots, "append"),
+              e.arrowIconLarge ? (r(), s("div", {
+                key: 2,
+                class: b(["arrow-icon", [`icon-24 ${e.arrowIconLarge}`]]),
+                onClick: h(I, ["stop"])
+              }, null, 2)) : e.arrowIcon ? (r(), s("div", {
+                key: 3,
+                class: b(["arrow-icon", [`icon-16 ${e.arrowIcon}`]]),
+                onClick: h(I, ["stop"])
+              }, null, 2)) : (r(), s("div", {
+                key: 4,
+                class: "arrow-icon arrow-icon-default",
+                onClick: h(I, ["stop"])
+              }))
+            ])
+          ]),
+          e.label ? (r(), s("label", Ae, [
+            e.required ? (r(), m(ge, { key: 0 })) : d("", !0),
+            c("span", null, v(e.label), 1),
+            u(T).tooltip ? (r(), m(u(fe), {
+              key: 1,
+              class: "info",
+              position: "top"
+            }, {
+              tooltip: M(() => [
+                N(e.$slots, "tooltip")
+              ]),
+              _: 3
+            })) : d("", !0)
+          ])) : d("", !0),
+          t.open ? (r(), s("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"])
+            }, null, 8, ["option", "is-selected", "is-hovered", "size", "onClick"]))), 128)),
+            p.value.length ? d("", !0) : (r(), s("div", Oe, "Nothing found"))
+          ], 512)) : d("", !0),
+          F(ve, { class: "ui-dropdown__contour" })
+        ])
+      ], 42, Ce),
+      x.value ? (r(), s("div", $e, v(x.value), 1)) : _.value && e.loadingOptionsHelper ? (r(), s("div", De, v(e.loadingOptionsHelper), 1)) : e.helper ? (r(), s("div", ze, v(e.helper), 1)) : d("", !0)
+    ]));
+  }
+});
+export {
+  Ye as default
+};
+//# sourceMappingURL=PlDropdownLegacy.vue.js.map

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

@@ -0,0 +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 SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\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          <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        <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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"}

package/dist/components/PlDropdownLegacy/PlDropdownLegacy.vue2.js

@@ -0,0 +1,5 @@
+import f from "./PlDropdownLegacy.vue.js";
+export {
+  f as default
+};
+//# sourceMappingURL=PlDropdownLegacy.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlDropdownLegacy.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/PlDropdownLegacy/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownLegacy/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}

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

@@ -0,0 +1,58 @@
+import { StyleValue } from 'vue';
+import { ListOption } from '../../types';
+type __VLS_Props = {
+    modelValue: unknown;
+    disabled?: boolean;
+    prefix?: string;
+    options: ListOption[];
+    placeholder?: string;
+    mode?: 'list' | 'tabs';
+    tabsContainerStyles?: StyleValue;
+    clearable?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        item?(_: {
+            item: import('../../types').ListOptionNormalized<unknown>;
+            textItem: string;
+            isSelected: boolean;
+            isHovered: boolean;
+            onClick: (__0_0: any) => void;
+        }): any;
+        item?(_: {
+            item: import('../../types').ListOptionNormalized<unknown>;
+            isSelected: boolean;
+            isHovered: boolean;
+            onClick: (__0_0: any) => void;
+        }): any;
+    };
+    refs: {
+        container: HTMLDivElement;
+        list: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    mode: "list" | "tabs";
+    placeholder: string;
+    prefix: string;
+    clearable: boolean;
+    tabsContainerStyles: string | false | import('vue').CSSProperties | StyleValue[] | null;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    container: HTMLDivElement;
+    list: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=PlDropdownLine.vue.d.ts.map

package/dist/components/PlDropdownLine/PlDropdownLine.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlDropdownLine.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownLine/PlDropdownLine.vue"],"names":[],"mappings":"AAkUA,OAAO,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAUtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,KAAK,WAAW,GAAG;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AA8OJ,iBAAS,cAAc;WAsMT,OAAO,IAA6B;;;;;;;;YAbvB,GAAG;;;;;;YACH,GAAG;;;;;;;EAiB7B;AA4BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;UAzdV,MAAM,GAAG,MAAM;iBADR,MAAM;YAFX,MAAM;eAKH,OAAO;;;;;kBAierB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

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

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

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

package/dist/components/PlDropdownLine/PlDropdownLine.vue2.js

@@ -0,0 +1,5 @@
+import f from "./PlDropdownLine.vue.js";
+export {
+  f as default
+};
+//# sourceMappingURL=PlDropdownLine.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlDropdownLine.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}