@milaboratories/uikit 2.10.37 → 2.10.39

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownLine.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"PlDropdownLine.vue_vue_type_script_setup_true_lang.js","names":[],"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>(\n  () => !!(props.clearable && data.isOpen && props.modelValue && modelText.value),\n);\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\n      v-model=\"inputModel\"\n      :placeholder=\"placeholderVal\"\n      :disabled=\"props.disabled\"\n      class=\"pl-line-dropdown__input\"\n    />\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\">\n            Didn't find anything that matched\n          </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\n            name=\"item\"\n            :item=\"item\"\n            :is-selected=\"isItemSelected(item)\"\n            :is-hovered=\"data.activeOption == index\"\n            @click.stop=\"selectItem(item)\"\n          >\n            <TabItem\n              :option=\"item\"\n              :is-selected=\"isItemSelected(item)\"\n              :is-hovered=\"data.activeOption == index\"\n              @click.stop=\"selectItem(item)\"\n            />\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\">\n            Didn't find anything that matched\n          </div>\n        </div>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/PlDropdownLine/ResizableInput.js

@@ -0,0 +1,5 @@
+import e from "./ResizableInput.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=ResizableInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResizableInput.js","names":[],"sources":["../../../src/components/PlDropdownLine/ResizableInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"./resizable-input.scss\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  modelValue?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  maxWidth?: string;\n  width?: string;\n}>();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst text = computed(() => {\n  if (props.placeholder) {\n    return props.placeholder;\n  }\n  return props.modelValue?.replace('\"', \"\");\n});\n\nconst styles = computed(() => {\n  const stl: Record<string, string> = {};\n  if (props.width) {\n    stl[\"width\"] = props.width;\n  }\n  if (props.maxWidth) {\n    stl[\"maxWidth\"] = props.maxWidth;\n  }\n  return stl;\n});\n\nfunction handleInput(event: Event) {\n  emit(\"update:modelValue\", (event.target as HTMLInputElement).value);\n}\n</script>\n\n<template>\n  <div class=\"resizable-input\">\n    <span :style=\"styles\" class=\"resizable-input__size-span\">{{ text }}</span>\n    <input\n      v-bind=\"$attrs\"\n      :placeholder=\"placeholder\"\n      :value=\"props.modelValue\"\n      :disabled=\"props.disabled\"\n      :style=\"styles\"\n      @input=\"handleInput\"\n    />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,5 +1,39 @@
-import f from "./ResizableInput.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=ResizableInput.vue2.js.map
+import './resizable-input.css';/* empty css                */
+import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, mergeProps as i, normalizeStyle as a, openBlock as o, toDisplayString as s } from "vue";
+var c = { class: "resizable-input" }, l = [
+	"placeholder",
+	"value",
+	"disabled"
+], u = /* @__PURE__ */ r({
+	__name: "ResizableInput",
+	props: {
+		modelValue: {},
+		placeholder: {},
+		disabled: { type: Boolean },
+		maxWidth: {},
+		width: {}
+	},
+	emits: ["update:modelValue"],
+	setup(r, { emit: u }) {
+		let d = r, f = u, p = e(() => d.placeholder ? d.placeholder : d.modelValue?.replace("\"", "")), m = e(() => {
+			let e = {};
+			return d.width && (e.width = d.width), d.maxWidth && (e.maxWidth = d.maxWidth), e;
+		});
+		function h(e) {
+			f("update:modelValue", e.target.value);
+		}
+		return (e, u) => (o(), t("div", c, [n("span", {
+			style: a(m.value),
+			class: "resizable-input__size-span"
+		}, s(p.value), 5), n("input", i(e.$attrs, {
+			placeholder: r.placeholder,
+			value: d.modelValue,
+			disabled: d.disabled,
+			style: m.value,
+			onInput: h
+		}), null, 16, l)]));
+	}
+});
+export { u as default };
+
+//# sourceMappingURL=ResizableInput.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ResizableInput.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"ResizableInput.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/PlDropdownLine/ResizableInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"./resizable-input.scss\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  modelValue?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  maxWidth?: string;\n  width?: string;\n}>();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst text = computed(() => {\n  if (props.placeholder) {\n    return props.placeholder;\n  }\n  return props.modelValue?.replace('\"', \"\");\n});\n\nconst styles = computed(() => {\n  const stl: Record<string, string> = {};\n  if (props.width) {\n    stl[\"width\"] = props.width;\n  }\n  if (props.maxWidth) {\n    stl[\"maxWidth\"] = props.maxWidth;\n  }\n  return stl;\n});\n\nfunction handleInput(event: Event) {\n  emit(\"update:modelValue\", (event.target as HTMLInputElement).value);\n}\n</script>\n\n<template>\n  <div class=\"resizable-input\">\n    <span :style=\"styles\" class=\"resizable-input__size-span\">{{ text }}</span>\n    <input\n      v-bind=\"$attrs\"\n      :placeholder=\"placeholder\"\n      :value=\"props.modelValue\"\n      :disabled=\"props.disabled\"\n      :style=\"styles\"\n      @input=\"handleInput\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAIA,IAAM,IAAQ,GAQR,IAAO,GAEP,IAAO,QACP,EAAM,cACD,EAAM,cAER,EAAM,YAAY,QAAQ,MAAK,GAAG,CACzC,EAEI,IAAS,QAAe;GAC5B,IAAM,IAA8B,EAAE;AAOtC,UANI,EAAM,UACR,EAAI,QAAW,EAAM,QAEnB,EAAM,aACR,EAAI,WAAc,EAAM,WAEnB;IACP;EAEF,SAAS,EAAY,GAAc;AACjC,KAAK,qBAAsB,EAAM,OAA4B,MAAM;;yBAKnE,EAUM,OAVN,GAUM,CATJ,EAA0E,QAAA;GAAnE,OAAK,EAAE,EAAA,MAAM;GAAE,OAAM;OAAgC,EAAA,MAAI,EAAA,EAAA,EAChE,EAOE,SAPF,EACUA,EAMR,QANc;GACb,aAAa,EAAA;GACb,OAAO,EAAM;GACb,UAAU,EAAM;GAChB,OAAO,EAAA;GACP,SAAO"}

package/dist/components/PlDropdownLine/pl-dropdown-line.css

@@ -1 +1 @@
-.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)}
+.pl-line-dropdown{box-sizing:border-box;outline:none;align-items:center;width:fit-content;max-width:256px;padding:8px 0;display:flex;position:relative}.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:"";border-bottom:2px solid var(--color-div-grey);width:100%;position:absolute;bottom:0}.pl-line-dropdown *{color:var(--txt-01);font-family:var(--font-family-base);letter-spacing:.52px;font-size:13px;font-style:normal;font-weight:600;line-height:14px}.pl-line-dropdown__input::placeholder{color:var(--txt-mask)}.pl-line-dropdown__icon{background-color:var(--control-mask-fill);align-items:center;width:16px;min-width:16px;height:16px;display:flex;-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-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-position:50%;mask-position:50%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.pl-line-dropdown__icon-clear{background-color:var(--color-ic-02);width:16px;height:16px;-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-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-position:50%;mask-position:50%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.pl-line-dropdown.open .pl-line-dropdown__icon{width:16px;height:16px;-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-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-position:50%;mask-position:50%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.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,.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{text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--txt-03)!important}.pl-line-dropdown__items{z-index:var(--z-dropdown-options);border:1px solid var(--color-div-grey);box-sizing:border-box;background-color:var(--bg-elevated-01);width:256px;max-height:320px;box-shadow:var(--shadow-m);--thumb-color:var(--ic-02);border-radius:6px;padding:12px 0;position:absolute;top:0;overflow-y:auto}.pl-line-dropdown__items::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;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{z-index:var(--z-dropdown-options);background-color:var(--color-div-bw);border:1px solid var(--color-div-grey);max-width:400px;box-shadow:var(--shadow-m);--thumb-color:var(--ic-02);border-radius:6px;padding:6px 12px 12px;display:flex;position:absolute;top:0;overflow-x:auto}.pl-line-dropdown__items-tabs::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;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)}

package/dist/components/PlDropdownLine/resizable-input.css

@@ -1 +1 @@
-.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}
+.resizable-input{box-sizing:border-box;text-overflow:ellipsis;max-width:100%;padding:0 8px;display:inline-block;position:relative;overflow:hidden}.resizable-input__size-span{white-space:pre;font-family:inherit;font-size:inherit;line-height:inherit;box-sizing:border-box;opacity:0;-webkit-user-select:none;user-select:none;vertical-align:top;min-width:2px;display:inline-block;position:relative;left:0}.resizable-input input{text-overflow:ellipsis;height:100%;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;box-sizing:border-box;background:0 0;border:none;outline:none;position:absolute;top:0;left:0;right:0}

package/dist/components/PlDropdownMulti/PlDropdownMulti.js

@@ -0,0 +1,5 @@
+import e from "./PlDropdownMulti.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=PlDropdownMulti.js.map

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

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

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

@@ -50,9 +50,7 @@ declare const _default: <M = unknown>(__VLS_props: NonNullable<Awaited<typeof __
         tooltip?(_: {}): any;
     };
     emit: (e: "update:modelValue", v: M[]) => void;
-}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
-    [key: string]: any;
-}> & {
+}>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownMulti.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownMulti/PlDropdownMulti.vue"],"names":[],"mappings":"AAwXA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAS9C,OAAO,0BAA0B,CAAC;AAGlC;;GAEG;yBACc,CAAC,yBACJ,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WAqkB1D,mBAAmB,CAAC;;;QAzjBxB;;WAEG;oBACS,CAAC,EAAE;QACf;;WAEG;gBACK,MAAM;QACd;;WAEG;kBACO,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACnC;;WAEG;iBACM,MAAM;QACf;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,MAAM;QACpB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;aAEK;wBAED,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;mBA6gB8E,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;wBA5DkB,GAAG;yBACF,GAAG;;cAzgB3B,mBAAmB,KAAK,CAAC,EAAE,KAAG,IAAI;;;;YAykBI,OAAO,CAAC,OAAO,WAAW,CAAC;;AA/kBvE,wBA+kB4E;AAG5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"PlDropdownMulti.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownMulti/PlDropdownMulti.vue"],"names":[],"mappings":"AAwXA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAS9C,OAAO,0BAA0B,CAAC;AAGlC;;GAEG;yBACc,CAAC,GAAG,OAAO,EAC3B,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WAokBO,mBAAmB,CAAC;;;QAzjBxB;;WAEG;oBACS,CAAC,EAAE;QACf;;WAEG;gBACK,MAAM;QACd;;WAEG;kBACO,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACnC;;WAEG;iBACM,MAAM;QACf;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,MAAM;QACpB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;aAEK;wBAED,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;mBA6gB8E,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;wBA5DkB,GAAG;yBACF,GAAG;;cAzgB3B,mBAAmB,KAAK,CAAC,EAAE,KAAG,IAAI;EAwkBpC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AA/kBzE,wBA+kB4E;AAG5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/PlDropdownMulti/PlDropdownMulti.vue2.js

@@ -1,5 +1,204 @@
-import f from "./PlDropdownMulti.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=PlDropdownMulti.vue2.js.map
+import e from "../DropdownListItem.js";
+import { normalizeListOptions as t } from "../../helpers/utils.js";
+import n from "../PlTooltip/PlTooltip.js";
+import { getErrorMessage as r } from "../../helpers/error.js";
+import i from "../PlSvg/PlSvg.js";
+import a from "../PlIcon24/PlIcon24.js";
+import ee from "../../utils/DoubleContour.js";
+import { useLabelNotch as o } from "../../utils/useLabelNotch.js";
+import { deepEqual as s, deepIncludes as c } from "../../helpers/objects.js";
+import te from "../../utils/DropdownOverlay/DropdownOverlay.js";
+import l from "../../assets/images/required.js";
+import u from "../PlChip/PlChip.js";
+import './pl-dropdown-multi.css';/* empty css                  */
+import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, normalizeClass as b, openBlock as x, reactive as ne, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, useSlots as re, useTemplateRef as ie, vModelText as ae, watch as oe, watchPostEffect as se, withCtx as D, withDirectives as ce, withModifiers as O } from "vue";
+var le = ["tabindex"], ue = { class: "pl-dropdown-multi__container" }, de = { class: "pl-dropdown-multi__field" }, fe = ["disabled", "placeholder"], pe = {
+	key: 0,
+	class: "chips-container"
+}, k = { class: "pl-dropdown-multi__controls" }, A = { key: 0 }, j = { class: "pl-dropdown-multi__open-chips-container" }, M = {
+	key: 0,
+	class: "nothing-found"
+}, N = {
+	key: 0,
+	class: "pl-dropdown-multi__error"
+}, P = {
+	key: 1,
+	class: "pl-dropdown-multi__helper"
+}, F = /* @__PURE__ */ y({
+	name: "PlDropdownMulti",
+	props: {
+		modelValue: { default: () => [] },
+		label: { default: void 0 },
+		options: { default: void 0 },
+		helper: { default: void 0 },
+		error: { default: void 0 },
+		placeholder: { default: "..." },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		groupPosition: { default: void 0 }
+	},
+	emits: ["update:modelValue"],
+	setup(y, { emit: F }) {
+		let I = F, L = (e) => I("update:modelValue", e), R = re(), z = y, B = S(), V = S(), H = ie("overlay"), U = ne({
+			search: "",
+			activeOption: -1,
+			open: !1,
+			optionsHeight: 0
+		}), W = f(() => Array.isArray(z.modelValue) ? z.modelValue : []), me = f(() => U.open && z.modelValue.length > 0 ? z.placeholder : z.modelValue.length > 0 ? "" : z.placeholder), G = f(() => t(z.options ?? [])), K = f(() => W.value.map((e) => G.value.find((t) => s(t.value, e))).filter((e) => e !== void 0)), q = f(() => {
+			let e = E(W), t = E(G);
+			return (U.search ? t.filter((e) => {
+				let t = U.search.toLowerCase();
+				return e.label.toLowerCase().includes(t) ? !0 : typeof e.value == "string" ? e.value.toLowerCase().includes(t) : e.value === U.search;
+			}) : [...t]).map((t) => ({
+				...t,
+				selected: c(e, t.value)
+			}));
+		}), J = f(() => z.options === void 0), he = f(() => !z.disabled && J.value), Y = f(() => J.value ? !0 : z.disabled), ge = f(() => Y.value ? void 0 : "0"), _e = () => {
+			U.activeOption = 0;
+		}, X = (e) => {
+			let t = E(W);
+			L(c(t, e) ? t.filter((t) => !s(t, e)) : [...t, e]), U.search = "", B?.value?.focus();
+		}, Z = (e) => L(E(W).filter((t) => !s(t, e))), Q = () => V.value?.focus(), ve = () => {
+			U.open = !U.open, U.open || (U.search = "");
+		}, $ = (e) => {
+			let t = e.relatedTarget;
+			!B.value?.contains(t) && !H.value?.listRef?.contains(t) && (U.search = "", U.open = !1);
+		}, ye = (e) => {
+			let { open: t, activeOption: n } = U;
+			if (!t) {
+				e.code === "Enter" && (U.open = !0);
+				return;
+			}
+			e.code === "Escape" && (U.open = !1, B.value?.focus());
+			let r = E(q), { length: i } = r;
+			if (!i) return;
+			[
+				"ArrowDown",
+				"ArrowUp",
+				"Enter"
+			].includes(e.code) && e.preventDefault(), e.code === "Enter" && X(r[n].value);
+			let a = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
+			U.activeOption = Math.abs(n + a + i) % i, requestAnimationFrame(() => H.value?.scrollIntoActive());
+		};
+		return o(B), oe(() => z.modelValue, () => _e(), { immediate: !0 }), se(() => {
+			U.search, U.open && H.value?.scrollIntoActive();
+		}), (t, o) => (x(), h("div", {
+			class: "pl-dropdown-multi__envelope",
+			onClick: Q
+		}, [g("div", {
+			ref_key: "rootRef",
+			ref: B,
+			tabindex: ge.value,
+			class: b(["pl-dropdown-multi", {
+				open: U.open,
+				error: y.error,
+				disabled: Y.value
+			}]),
+			onKeydown: ye,
+			onFocusout: $
+		}, [g("div", ue, [
+			g("div", de, [
+				ce(g("input", {
+					ref_key: "input",
+					ref: V,
+					"onUpdate:modelValue": o[0] ||= (e) => U.search = e,
+					type: "text",
+					tabindex: "-1",
+					disabled: Y.value,
+					placeholder: me.value,
+					spellcheck: "false",
+					autocomplete: "chrome-off",
+					onFocus: o[1] ||= (e) => U.open = !0
+				}, null, 40, fe), [[ae, U.search]]),
+				U.open ? m("", !0) : (x(), h("div", pe, [(x(!0), h(d, null, C(K.value, (e, t) => (x(), p(E(u), {
+					key: t,
+					closeable: "",
+					small: "",
+					onClick: o[2] ||= O((e) => U.open = !0, ["stop"]),
+					onClose: (t) => Z(e.value)
+				}, {
+					default: D(() => [_(T(e.label || e.value), 1)]),
+					_: 2
+				}, 1032, ["onClose"]))), 128))])),
+				g("div", k, [
+					he.value ? (x(), p(E(a), {
+						key: 0,
+						name: "loading"
+					})) : m("", !0),
+					w(t.$slots, "append"),
+					g("div", {
+						class: "pl-dropdown-multi__arrow-wrapper",
+						onClick: O(ve, ["stop"])
+					}, [...o[3] ||= [g("div", { class: "arrow-icon arrow-icon-default" }, null, -1)]])
+				])
+			]),
+			y.label ? (x(), h("label", A, [
+				y.required ? (x(), p(E(i), {
+					key: 0,
+					uri: E(l)
+				}, null, 8, ["uri"])) : m("", !0),
+				g("span", null, T(y.label), 1),
+				E(R).tooltip ? (x(), p(E(n), {
+					key: 1,
+					class: "info",
+					position: "top"
+				}, {
+					tooltip: D(() => [w(t.$slots, "tooltip")]),
+					_: 3
+				})) : m("", !0)
+			])) : m("", !0),
+			U.open ? (x(), p(te, {
+				key: 1,
+				ref_key: "overlay",
+				ref: H,
+				root: B.value,
+				class: "pl-dropdown-multi__options",
+				gap: 5,
+				tabindex: "-1",
+				onFocusout: $
+			}, {
+				default: D(() => [
+					g("div", j, [(x(!0), h(d, null, C(K.value, (e, t) => (x(), p(E(u), {
+						key: t,
+						closeable: "",
+						small: "",
+						onClose: (t) => Z(e.value)
+					}, {
+						default: D(() => [_(T(e.label || e.value), 1)]),
+						_: 2
+					}, 1032, ["onClose"]))), 128))]),
+					(x(!0), h(d, null, C(q.value, (t, n) => (x(), p(e, {
+						key: n,
+						option: t,
+						"text-item": "text",
+						"is-selected": t.selected,
+						"is-hovered": U.activeOption == n,
+						size: "medium",
+						"use-checkbox": "",
+						onClick: O((e) => X(t.value), ["stop"])
+					}, null, 8, [
+						"option",
+						"is-selected",
+						"is-hovered",
+						"onClick"
+					]))), 128)),
+					q.value.length ? m("", !0) : (x(), h("div", M, "Nothing found"))
+				]),
+				_: 1
+			}, 8, ["root"])) : m("", !0),
+			v(ee, {
+				class: "pl-dropdown-multi__contour",
+				"group-position": y.groupPosition
+			}, null, 8, ["group-position"])
+		])], 42, le), y.error ? (x(), h("div", N, T(E(r)(y.error)), 1)) : y.helper ? (x(), h("div", P, T(y.helper), 1)) : m("", !0)]));
+	}
+});
+export { F as default };
+
+//# sourceMappingURL=PlDropdownMulti.vue2.js.map