npm - @milaboratories/uikit - Versions diffs - 2.15.37 → 2.15.38 - Mend

@milaboratories/uikit 2.15.37 → 2.15.38

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

Files changed (457) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlDropdownLine.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":""}
1	+ {"version":3,"file":"PlDropdownLine.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 data-testid=\"pl-dropdown-line\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n @click=\"toggleList\"\n >\n <div class=\"pl-line-dropdown__prefix\" data-testid=\"pl-dropdown-line-prefix\">\n {{ props?.prefix }}\n </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\n v-show=\"!canShowClearBtn\"\n class=\"pl-line-dropdown__icon\"\n data-testid=\"pl-dropdown-line-arrow\"\n />\n <div\n v-show=\"canShowClearBtn\"\n class=\"pl-line-dropdown__icon-clear\"\n data-testid=\"pl-dropdown-line-clear\"\n @click=\"clearModel\"\n />\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 data-testid=\"pl-dropdown-line-options\"\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 data-testid=\"pl-dropdown-line-option\"\n @click.stop=\"selectItem(item)\"\n />\n </slot>\n </template>\n\n <div\n v-if=\"options.length === 0\"\n class=\"pl-line-dropdown__no-item\"\n data-testid=\"pl-dropdown-line-options-empty\"\n >\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 data-testid=\"pl-dropdown-line-options\"\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 data-testid=\"pl-dropdown-line-option\"\n @click.stop=\"selectItem(item)\"\n />\n </slot>\n </template>\n <div\n v-if=\"options.length === 0\"\n class=\"pl-line-dropdown__no-item\"\n data-testid=\"pl-dropdown-line-options-empty\"\n >\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":""}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlDropdownLine.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownLine/PlDropdownLine.vue"],"names":[],"mappings":"~~AAkWA~~,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;~~AA2dJ~~,QAAA,IAAI,QAAQ;;;;;;CAAW,EAAE,QAAQ;;;;;CAAY,CAAE;AAC/C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC1C;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAQ7C,QAAA,MAAM,UAAU;;;;;~~UAzeL~~,MAAM,GAAG,MAAM;iBADR,MAAM;eAGR,OAAO;YALV,MAAM;;~~6EAgfjB~~,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"PlDropdownLine.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownLine/PlDropdownLine.vue"],"names":[],"mappings":"AA0XA,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;AAueJ,QAAA,IAAI,QAAQ;;;;;;CAAW,EAAE,QAAQ;;;;;CAAY,CAAE;AAC/C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC1C;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAQ7C,QAAA,MAAM,UAAU;;;;;UArfL,MAAM,GAAG,MAAM;iBADR,MAAM;eAGR,OAAO;YALV,MAAM;;6EA4fjB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -11,12 +11,20 @@ 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";
 //#region src/components/PlDropdownLine/PlDropdownLine.vue?vue&type=script&setup=true&lang.ts
-var N = { class: "pl-line-dropdown__prefix" }, ne = { class: "pl-line-dropdown__icon-wrapper" }, re = { class: "pl-line-dropdown__icon" }, ie = {
+var N = {
+	class: "pl-line-dropdown__prefix",
+	"data-testid": "pl-dropdown-line-prefix"
+}, ne = { class: "pl-line-dropdown__icon-wrapper" }, re = {
+	class: "pl-line-dropdown__icon",
+	"data-testid": "pl-dropdown-line-arrow"
+}, ie = {
 	key: 0,
-	class: "pl-line-dropdown__no-item"
+	class: "pl-line-dropdown__no-item",
+	"data-testid": "pl-dropdown-line-options-empty"
 }, P = {
 	key: 0,
-	class: "pl-line-dropdown__no-item"
+	class: "pl-line-dropdown__no-item",
+	"data-testid": "pl-dropdown-line-options-empty"
 }, F = /* @__PURE__ */ _({
 	__name: "PlDropdownLine",
 	props: {
@@ -129,6 +137,7 @@ var N = { class: "pl-line-dropdown__prefix" }, ne = { class: "pl-line-dropdown__
 			ref: z,
 			tabindex: "0",
 			class: y([V.value, "pl-line-dropdown uc-pointer"]),
+			"data-testid": "pl-dropdown-line",
 			onKeydown: le,
 			onFocusout: Z,
 			onClick: se
@@ -147,6 +156,7 @@ var N = { class: "pl-line-dropdown__prefix" }, ne = { class: "pl-line-dropdown__
 			]),
 			h("div", ne, [j(h("div", re, null, 512), [[k, !W.value]]), j(h("div", {
 				class: "pl-line-dropdown__icon-clear",
+				"data-testid": "pl-dropdown-line-clear",
 				onClick: ue
 			}, null, 512), [[k, W.value]])]),
 			R.isOpen ? (x(), f(u, {
@@ -159,6 +169,7 @@ var N = { class: "pl-line-dropdown__prefix" }, ne = { class: "pl-line-dropdown__
 				style: b($),
 				tabindex: "-1",
 				class: "pl-line-dropdown__items",
+				"data-testid": "pl-dropdown-line-options",
 				onFocusout: Z,
 				onClick: n[1] ||= M(() => {}, ["stop"])
 			}, [(x(!0), m(l, null, w(O(U), (n, r) => T(t.$slots, "item", {
@@ -174,6 +185,7 @@ var N = { class: "pl-line-dropdown__prefix" }, ne = { class: "pl-line-dropdown__
 				"is-selected": X(n),
 				"is-hovered": R.activeOption == r,
 				size: "medium",
+				"data-testid": "pl-dropdown-line-option",
 				onClick: M((e) => Y(n), ["stop"])
 			}, null, 8, [
 				"option",
@@ -187,6 +199,7 @@ var N = { class: "pl-line-dropdown__prefix" }, ne = { class: "pl-line-dropdown__
 				style: b($),
 				tabindex: "-1",
 				class: "pl-line-dropdown__items-tabs",
+				"data-testid": "pl-dropdown-line-options",
 				onFocusout: Z,
 				onClick: n[2] ||= M(() => {}, ["stop"])
 			}, [(x(!0), m(l, null, w(O(U), (e, n) => T(t.$slots, "item", {
@@ -199,6 +212,7 @@ var N = { class: "pl-line-dropdown__prefix" }, ne = { class: "pl-line-dropdown__
 				option: e,
 				"is-selected": X(e),
 				"is-hovered": R.activeOption == n,
+				"data-testid": "pl-dropdown-line-option",
 				onClick: M((t) => Y(e), ["stop"])
 			}, null, 8, [
 				"option",

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

	@@ -1 +1 @@
1	- {"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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"}
1	+ {"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 data-testid=\"pl-dropdown-line\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n @click=\"toggleList\"\n >\n <div class=\"pl-line-dropdown__prefix\" data-testid=\"pl-dropdown-line-prefix\">\n {{ props?.prefix }}\n </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\n v-show=\"!canShowClearBtn\"\n class=\"pl-line-dropdown__icon\"\n data-testid=\"pl-dropdown-line-arrow\"\n />\n <div\n v-show=\"canShowClearBtn\"\n class=\"pl-line-dropdown__icon-clear\"\n data-testid=\"pl-dropdown-line-clear\"\n @click=\"clearModel\"\n />\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 data-testid=\"pl-dropdown-line-options\"\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 data-testid=\"pl-dropdown-line-option\"\n @click.stop=\"selectItem(item)\"\n />\n </slot>\n </template>\n\n <div\n v-if=\"options.length === 0\"\n class=\"pl-line-dropdown__no-item\"\n data-testid=\"pl-dropdown-line-options-empty\"\n >\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 data-testid=\"pl-dropdown-line-options\"\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 data-testid=\"pl-dropdown-line-option\"\n @click.stop=\"selectItem(item)\"\n />\n </slot>\n </template>\n <div\n v-if=\"options.length === 0\"\n class=\"pl-line-dropdown__no-item\"\n data-testid=\"pl-dropdown-line-options-empty\"\n >\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBA,IAAM,IAAO,GAEP,IAAQ,GAoBR,IAAO,EAAS;GACpB,QAAQ;GACR,cAAc;GACd,eAAe;GAChB,CAAC,EAEI,IAAY,GAAkB,EAE9B,IAAO,GAAkB,EAEzB,IAAU,QAAe;GAC7B,IAAM,IAAgB,EAAE;AAOxB,UANI,EAAK,UACP,EAAc,KAAK,OAAO,EAExB,EAAM,YACR,EAAc,KAAK,WAAW,EAEzB,EAAc,KAAK,IAAI;IAC9B,EAEI,IAAe,EAAY,GAAG,EAE9B,IAAU,GAAgB,EAAM,GAAO,UAAU,EAAE,EAAa,EAEhE,IAAkB,QAChB,CAAC,EAAE,EAAM,aAAa,EAAK,UAAU,EAAM,cAAc,EAAU,OAC1E,EAEK,IAAY,QAAuB;AACvC,OAAI,EAAM,eAAe,KAAA,GAAW;IAClC,IAAM,IAAQ,GAAyB;AACvC,QAAI,MAAU,GAEZ,QADa,EAAqB,EAAM,QAAQ,CAAC,GACrC;;AAGhB,UAAO;IACP,EAEI,IAAa,EAAI,EAAU,MAAM;AAEvC,IAAM,IAAY,MAAM;AACtB,KAAW,QAAQ;IACnB;EAEF,IAAM,IAAiB,QACjB,EAAK,UACH,EAAa,SAAS,EAAa,MAAM,UAAU,EAAU,MAAM,SAAS,IACvE,EAAa,QAIjB,EAAU,SAAS,MAC1B;AA6BF,EA3BA,EAAgB,SAAiB;AAC/B,GAAI,EAAM,SAAS,WACjB,EAAK,SAAS;IAEhB,EAEF,QACQ,EAAW,QAChB,MAAQ;AACP,GAAI,EAAU,UAAU,IAGtB,EAAa,QAAQ,KAFrB,EAAa,QAAQ;IAK1B,EAED,QACQ,EAAK,SACV,MAAmB;AAClB,GAAI,KAAS,EAAU,UACrB,EAAU,MAAM,cAAc,QAAQ,EAAE,OAAO,EAC/C,QAAe,GAAkB,CAAC;IAGvC,EAED,QACQ,EAAM,kBACN,IAAgB,EACtB,EAAE,WAAW,IAAM,CACpB;EAED,SAAS,IAAuC;AAC9C,UAAO,EAAM,QAAQ,WAAW,MACvB,EAAU,EAAE,OAAO,EAAM,WAAW,CAC3C;;EAGJ,SAAS,KAAiB;AACxB,KAAK,eAAe,EAClB,EAAQ,MAAM,WAAW,MAChB,EAAU,EAAE,OAAO,EAAM,WAAW,CAC3C,GACD,MAAO,IAAI,IAAI,IAAI,EACrB;;EAGH,SAAS,KAAoB;AAC3B,KAAa,QAAQ;;EAGvB,SAAS,KAAmB;AAC1B,GAAI,EAAM,WACR,EAAK,SAAS,KAEd,QAAe;AACb,MAAK,SAAS,CAAC,EAAK;KACpB;;EAIN,SAAS,KAAqB;AAC5B,GAAI,EAAM,SAAS,WACjB,EAAK,SAAS;;EAIlB,SAAS,EAAW,GAAyB;AAC3C,GAAI,MACF,EAAK,qBAAqB,EAAK,MAAM,EACrC,IAAoB,EACpB,IAAmB;;EAIvB,SAAS,EAAe,GAA2B;AACjD,UAAO,EAAU,EAAK,OAAO,EAAM,WAAW;;EAGhD,IAAM,KAAc,MAAsB;GACxC,IAAM,IAAgB,EAAM;AAE5B,GAAI,CAAC,EAAU,OAAO,SAAS,EAAc,IAAI,CAAC,EAAK,OAAO,SAAS,EAAc,KACnF,EAAa,QAAQ,IACrB,EAAK,SAAS;;EAIlB,SAAS,GAAc,GAA6C;GAClE,IAAM,EAAE,oBAAiB;AAEzB,OAAI,CAAC,EAAK,UAAU,EAAE,SAAS,SAAS;AACtC,MAAK,SAAS;AACd;;GAGF,IAAM,EAAE,cAAW,EAAQ;AAE3B,OAAI,CAAC,EACH;AAOF,GAJI;IAAC;IAAa;IAAW;IAAQ,CAAC,SAAS,EAAE,KAAK,IACpD,EAAE,gBAAgB,EAGhB,EAAE,SAAS,WACb,EAAW,EAAQ,MAAM,GAAc;GAGzC,IAAM,IAAI,EAAE,SAAS,cAAc,IAAI,EAAE,SAAS,YAAY,KAAK;AAInE,GAFA,EAAK,eAAe,KAAK,IAAI,IAAe,IAAI,EAAO,GAAG,GAE1D,sBAAsB,EAAiB;;EAGzC,SAAS,IAAmB;GAC1B,IAAM,IAAQ,EAAK;AACd,QAGL,EAAM,EAAM,cAAc,gBAAgB,GAAG,MAAgB;AAC3D,IAAI,EAAM,SAAS,SACjB,EAAe,GAAO,EAAkB,GAExC,EAAG,eAAe;KAAE,UAAU;KAAU,OAAO;KAAW,QAAQ;KAAU,CAAC;KAE/E;;EAGJ,SAAS,KAAa;AACpB,KAAK,qBAAqB,KAAA,EAAU;;EAGtC,IAAM,IAAe,EAAS;GAC5B,KAAK;GACL,MAAM;GACP,CAAC;SAEF,EAAM,IAAO,MAAO;AAClB,GAAI,MAEF,EAAK,gBADQ,EAAG,uBAAuB,CACb,QAC1B,OAAO,cAAc,IAAI,YAAY,SAAS,CAAC;IAEjD,EAEF,GAAmB,IAAY,MAAQ;GACrC,IAEM,IAAgB,EAAI,MAAM,EAAI,SAAS;AAQ7C,GANI,IAAgB,EAAK,gBAAgB,EAAI,eAC3C,EAAa,MAAM,EAAI,MAAM,EAAK,gBAAgB,IAAM,OAExD,EAAa,MAAM,IAAgB,MAGrC,EAAa,OAAO,EAAI,OAAO;IAC/B,kBAIA,EAkHM,OAAA;YAjHA;GAAJ,KAAI;GACJ,UAAS;GACR,OAAK,EAAA,CAAE,EAAA,OACF,8BAA6B,CAAA;GACnC,eAAY;GACX,WAAS;GACT,YAAU;GACV,SAAO;;GAER,EAEM,OAFN,GAEM,EADD,GAAO,OAAM,EAAA,EAAA;GAGlB,EAKE,GAAA;gBAJS,EAAA;6CAAU,QAAA;IAClB,aAAa,EAAA;IACb,UAAU,EAAM;IACjB,OAAM;;;;;;GAGR,EAYM,OAZN,IAYM,CAAA,EAXJ,EAIE,OAJF,IAIE,MAAA,IAAA,EAAA,CAAA,CAAA,GAAA,CAHS,EAAA,MAAe,CAAA,CAAA,EAAA,EAI1B,EAKE,OAAA;IAHA,OAAM;IACN,eAAY;IACX,SAAO;uBAHA,EAAA,MAAe,CAAA,CAAA,CAAA,CAAA;GAMX,EAAK,UAAA,GAAA,EAArB,EA+EW,GAAA;;IA/EkB,IAAG;OAEtB,EAAM,SAAI,UAAA,GAAA,EADlB,EAwCM,OAAA;;aAtCA;IAAJ,KAAI;IACH,OAAK,EAAE,EAAY;IACpB,UAAS;IACT,OAAM;IACN,eAAY;IACX,YAAU;IACV,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;eAEX,EAmBW,GAAA,MAAA,EAnBuB,EAAA,EAAO,GAAvB,GAAM,MACtB,EAiBO,EAAA,QAAA,QAAA;SAlBwC;IAGtC;IACN,UAAW;IACX,YAAa,EAAe,EAAI;IAChC,WAAY,EAAK,gBAAgB;IACjC,SAAK,GAAA,MAAO,EAAW,EAAI,EAAA,CAAA,OAAA,CAAA;YAWvB,CATL,EAQE,GAAA;IAPC,QAAQ;IACR,aAAW;IACX,eAAa,EAAe,EAAI;IAChC,cAAY,EAAK,gBAAgB;IAClC,MAAK;IACL,eAAY;IACX,SAAK,GAAA,MAAO,EAAW,EAAI,EAAA,CAAA,OAAA,CAAA;;;;;;iBAM1B,EAAA,EAAO,CAAC,WAAM,KAAA,GAAA,EADtB,EAQM,OARN,IAQM,CAAA,GAAA,AAAA,EAAA,OAAA,CAHJ,EAEM,OAAA,EAFD,OAAM,0CAAwC,EAAC,uCAEpD,GAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,GAAA,IAIS,EAAM,SAAI,UAAA,GAAA,EADvB,EAoCM,OAAA;;aAlCA;IAAJ,KAAI;IACH,OAAK,EAAE,EAAY;IACpB,UAAS;IACT,OAAM;IACN,eAAY;IACX,YAAU;IACV,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;eAEX,EAgBW,GAAA,MAAA,EAhBuB,EAAA,EAAO,GAAvB,GAAM,MACtB,EAcO,EAAA,QAAA,QAAA;SAfwC;IAGtC;IACN,YAAa,EAAe,EAAI;IAChC,WAAY,EAAK,gBAAgB;IACjC,SAAK,GAAA,MAAO,EAAW,EAAI,EAAA,CAAA,OAAA,CAAA;YASvB,CAPL,EAME,GAAA;IALC,QAAQ;IACR,eAAa,EAAe,EAAI;IAChC,cAAY,EAAK,gBAAgB;IAClC,eAAY;IACX,SAAK,GAAA,MAAO,EAAW,EAAI,EAAA,CAAA,OAAA,CAAA;;;;;;iBAK1B,EAAA,EAAO,CAAC,WAAM,KAAA,GAAA,EADtB,EAQM,OARN,GAQM,CAAA,GAAA,AAAA,EAAA,OAAA,CAHJ,EAEM,OAAA,EAFD,OAAM,0CAAwC,EAAC,uCAEpD,GAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,GAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}

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

	@@ -1 +1 @@
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":""}
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\" data-testid=\"pl-resizable-input\">\n <span :style=\"styles\" class=\"resizable-input__size-span\">{{ text }}</span>\n <input\n data-testid=\"pl-dropdown-line-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.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ResizableInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownLine/ResizableInput.vue"],"names":[],"mappings":"~~AAqDA~~,OAAO,wBAAwB,CAAC;AAGhC,KAAK,WAAW,GAAG;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;~~AAsEF~~,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
1	+ {"version":3,"file":"ResizableInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownLine/ResizableInput.vue"],"names":[],"mappings":"AAsDA,OAAO,wBAAwB,CAAC;AAGhC,KAAK,WAAW,GAAG;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAwEF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1,7 +1,10 @@
 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";
 //#region src/components/PlDropdownLine/ResizableInput.vue?vue&type=script&setup=true&lang.ts
-var c = { class: "resizable-input" }, l = [
+var c = {
+	class: "resizable-input",
+	"data-testid": "pl-resizable-input"
+}, l = [
 	"placeholder",
 	"value",
 	"disabled"
@@ -26,7 +29,7 @@ var c = { class: "resizable-input" }, l = [
 		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, {
+		}, s(p.value), 5), n("input", i({ "data-testid": "pl-dropdown-line-input" }, e.$attrs, {
 			placeholder: r.placeholder,
 			value: d.modelValue,
 			disabled: d.disabled,

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

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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\" data-testid=\"pl-resizable-input\">\n <span :style=\"styles\" class=\"resizable-input__size-span\">{{ text }}</span>\n <input\n data-testid=\"pl-dropdown-line-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,EAWM,OAXN,GAWM,CAVJ,EAA0E,QAAA;GAAnE,OAAK,EAAE,EAAA,MAAM;GAAE,OAAM;OAAgC,EAAA,MAAI,EAAA,EAAA,EAChE,EAQE,SARF,EAQE,EAPA,eAAY,0BAAwB,EAC5BA,EAAAA,QAAM;GACb,aAAa,EAAA;GACb,OAAO,EAAM;GACb,UAAU,EAAM;GAChB,OAAO,EAAA;GACP,SAAO"}

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

	@@ -1 +1 @@
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 Text shown in a chip when a `modelValue` entry is missing from `options` —\n * e.g. its upstream source was deleted. Rendered italic in error color.\n /\n missingValueLabel?: 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 missingValueLabel: \"Value not available\",\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 // While options load (`options === undefined`), hide chips for unresolved values\n // to avoid a \"missing\" flash that resolves once options arrive.\n const optionsLoaded = props.options !== undefined;\n return selectedValuesRef.value\n .map((v) => {\n const opt = normalizedOptionsRef.value.find((o) => deepEqual(o.value, v));\n if (opt) {\n // Found: render the option's own (normalized) label verbatim — matches\n // PlDropdown. `opt.label` is always a string (possibly \"\"), never an object,\n // so there is no raw-value leak to guard against.\n return { ...opt, isMissing: false };\n }\n if (!optionsLoaded) {\n return undefined;\n }\n // Honor empty `missingValueLabel` verbatim — caller's explicit \"render nothing\".\n return {\n value: v,\n label: props.missingValueLabel,\n isMissing: true,\n };\n })\n .filter((v): v is NonNullable<typeof 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 :class=\"{ 'pl-dropdown-multi__chip--missing': opt.isMissing }\"\n closeable\n small\n @click.stop=\"data.open = true\"\n @close=\"unselectOption(opt.value)\"\n >\n {{ opt.label }}\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 :class=\"{ 'pl-dropdown-multi__chip--missing': opt.isMissing }\"\n closeable\n small\n @close=\"unselectOption(opt.value)\"\n >\n {{ opt.label }}\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":""}
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 Text shown in a chip when a `modelValue` entry is missing from `options` —\n * e.g. its upstream source was deleted. Rendered italic in error color.\n /\n missingValueLabel?: 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 missingValueLabel: \"Value not available\",\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 // While options load (`options === undefined`), hide chips for unresolved values\n // to avoid a \"missing\" flash that resolves once options arrive.\n const optionsLoaded = props.options !== undefined;\n return selectedValuesRef.value\n .map((v) => {\n const opt = normalizedOptionsRef.value.find((o) => deepEqual(o.value, v));\n if (opt) {\n // Found: render the option's own (normalized) label verbatim — matches\n // PlDropdown. `opt.label` is always a string (possibly \"\"), never an object,\n // so there is no raw-value leak to guard against.\n return { ...opt, isMissing: false };\n }\n if (!optionsLoaded) {\n return undefined;\n }\n // Honor empty `missingValueLabel` verbatim — caller's explicit \"render nothing\".\n return {\n value: v,\n label: props.missingValueLabel,\n isMissing: true,\n };\n })\n .filter((v): v is NonNullable<typeof 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\" data-testid=\"pl-dropdown-multi\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-dropdown-multi\"\n data-testid=\"pl-dropdown-multi-control\"\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 data-testid=\"pl-dropdown-multi-input\"\n @focus=\"data.open = true\"\n />\n <div v-if=\"!data.open\" class=\"chips-container\" data-testid=\"pl-dropdown-multi-chips\">\n <PlChip\n v-for=\"(opt, i) in selectedOptionsRef\"\n :key=\"i\"\n :class=\"{ 'pl-dropdown-multi__chip--missing': opt.isMissing }\"\n closeable\n data-testid=\"pl-dropdown-multi-chip\"\n small\n @click.stop=\"data.open = true\"\n @close=\"unselectOption(opt.value)\"\n >\n {{ opt.label }}\n </PlChip>\n </div>\n\n <div class=\"pl-dropdown-multi__controls\">\n <PlIcon24\n v-if=\"showLoadingSpinner\"\n name=\"loading\"\n data-testid=\"pl-dropdown-multi-loading\"\n />\n <slot name=\"append\" />\n <div\n class=\"pl-dropdown-multi__arrow-wrapper\"\n data-testid=\"pl-dropdown-multi-arrow\"\n @click.stop=\"toggleModel\"\n >\n <div class=\"arrow-icon arrow-icon-default\" />\n </div>\n </div>\n </div>\n <label v-if=\"label\" data-testid=\"pl-dropdown-multi-label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-dropdown-multi-required\" />\n <span>{{ label }}</span>\n <PlTooltip\n v-if=\"slots.tooltip\"\n class=\"info\"\n position=\"top\"\n data-testid=\"pl-dropdown-multi-tooltip\"\n >\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 data-testid=\"pl-dropdown-multi-options\"\n :gap=\"5\"\n tabindex=\"-1\"\n @focusout=\"onFocusOut\"\n >\n <div\n class=\"pl-dropdown-multi__open-chips-container\"\n data-testid=\"pl-dropdown-multi-chips\"\n >\n <PlChip\n v-for=\"(opt, i) in selectedOptionsRef\"\n :key=\"i\"\n :class=\"{ 'pl-dropdown-multi__chip--missing': opt.isMissing }\"\n closeable\n data-testid=\"pl-dropdown-multi-chip\"\n small\n @close=\"unselectOption(opt.value)\"\n >\n {{ opt.label }}\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 data-testid=\"pl-dropdown-multi-option\"\n @click.stop=\"selectOption(item.value)\"\n />\n <div\n v-if=\"!filteredOptionsRef.length\"\n class=\"nothing-found\"\n data-testid=\"pl-dropdown-multi-options-empty\"\n >\n Nothing found\n </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\" data-testid=\"pl-dropdown-multi-error\">\n {{ getErrorMessage(error) }}\n </div>\n <div\n v-else-if=\"helper\"\n class=\"pl-dropdown-multi__helper\"\n data-testid=\"pl-dropdown-multi-helper\"\n >\n {{ helper }}\n </div>\n </div>\n</template>\n"],"mappings":""}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlDropdownMulti.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownMulti/PlDropdownMulti.vue"],"names":[],"mappings":"~~AAqZA~~,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAS9C,OAAO,0BAA0B,CAAC;AAGlC;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,GAAK,CAAC,GAAG,OAAO,EACjC,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,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;~~WA8nBO~~,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;~~QAnnBpD~~;;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;;;WAGG;4BACiB,MAAM;QAC1B;;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;;;~~KAkkB2E~~,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;iBAbE,CAAC,KAAK,IAAiB,KAAK,GAAG;;kBAC9B,CAAC,KAAK,IAAiB,KAAK,GAAG;;~~cAlnBvC~~,mBAAmB,KAAK,CAAC,EAAE,KAAG,IAAI;~~EAkoBpC~~,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
1	+ {"version":3,"file":"PlDropdownMulti.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownMulti/PlDropdownMulti.vue"],"names":[],"mappings":"AAybA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAS9C,OAAO,0BAA0B,CAAC;AAGlC;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,GAAK,CAAC,GAAG,OAAO,EACjC,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,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAspBO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QA3oBpD;;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;;;WAGG;4BACiB,MAAM;QAC1B;;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;;;KA0lB2E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;iBAbE,CAAC,KAAK,IAAiB,KAAK,GAAG;;kBAC9B,CAAC,KAAK,IAAiB,KAAK,GAAG;;cA1oBvC,mBAAmB,KAAK,CAAC,EAAE,KAAG,IAAI;EA0pBpC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

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

@@ -19,16 +19,26 @@ import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h
 //#region src/components/PlDropdownMulti/PlDropdownMulti.vue?vue&type=script&setup=true&lang.ts
 var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { class: "pl-dropdown-multi__field" }, de = ["disabled", "placeholder"], fe = {
 	key: 0,
-	class: "chips-container"
-}, pe = { class: "pl-dropdown-multi__controls" }, A = { key: 0 }, j = { class: "pl-dropdown-multi__open-chips-container" }, M = {
+	class: "chips-container",
+	"data-testid": "pl-dropdown-multi-chips"
+}, pe = { class: "pl-dropdown-multi__controls" }, A = {
 	key: 0,
-	class: "nothing-found"
+	"data-testid": "pl-dropdown-multi-label"
+}, j = {
+	class: "pl-dropdown-multi__open-chips-container",
+	"data-testid": "pl-dropdown-multi-chips"
+}, M = {
+	key: 0,
+	class: "nothing-found",
+	"data-testid": "pl-dropdown-multi-options-empty"
 }, N = {
 	key: 0,
-	class: "pl-dropdown-multi__error"
+	class: "pl-dropdown-multi__error",
+	"data-testid": "pl-dropdown-multi-error"
 }, P = {
 	key: 1,
-	class: "pl-dropdown-multi__helper"
+	class: "pl-dropdown-multi__helper",
+	"data-testid": "pl-dropdown-multi-helper"
 }, F = /* @__PURE__ */ y({
 	name: "PlDropdownMulti",
 	props: {
@@ -110,7 +120,8 @@ var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { cl
 			U.search, U.open && H.value?.scrollIntoActive();
 		}), (t, s) => (x(), g("div", {
 			class: "pl-dropdown-multi__envelope",
-			onClick: Q
+			onClick: Q,
+			"data-testid": "pl-dropdown-multi"
 		}, [_("div", {
 			ref_key: "rootRef",
 			ref: B,
@@ -120,6 +131,7 @@ var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { cl
 				error: y.error,
 				disabled: Y.value
 			}]),
+			"data-testid": "pl-dropdown-multi-control",
 			onKeydown: ye,
 			onFocusout: $
 		}, [_("div", le, [
@@ -134,12 +146,14 @@ var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { cl
 					placeholder: me.value,
 					spellcheck: "false",
 					autocomplete: "chrome-off",
+					"data-testid": "pl-dropdown-multi-input",
 					onFocus: s[1] ||= (e) => U.open = !0
 				}, null, 40, de), [[ie, U.search]]),
 				U.open ? h("", !0) : (x(), g("div", fe, [(x(!0), g(f, null, w(K.value, (e, t) => (x(), m(D(d), {
 					key: t,
 					class: b({ "pl-dropdown-multi__chip--missing": e.isMissing }),
 					closeable: "",
+					"data-testid": "pl-dropdown-multi-chip",
 					small: "",
 					onClick: s[2] ||= k((e) => U.open = !0, ["stop"]),
 					onClose: (t) => Z(e.value)
@@ -150,11 +164,13 @@ var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { cl
 				_("div", pe, [
 					he.value ? (x(), m(D(a), {
 						key: 0,
-						name: "loading"
+						name: "loading",
+						"data-testid": "pl-dropdown-multi-loading"
 					})) : h("", !0),
 					T(t.$slots, "append"),
 					_("div", {
 						class: "pl-dropdown-multi__arrow-wrapper",
+						"data-testid": "pl-dropdown-multi-arrow",
 						onClick: k(ve, ["stop"])
 					}, [...s[3] ||= [_("div", { class: "arrow-icon arrow-icon-default" }, null, -1)]])
 				])
@@ -162,13 +178,15 @@ var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { cl
 			y.label ? (x(), g("label", A, [
 				y.required ? (x(), m(D(i), {
 					key: 0,
-					uri: D(ee)
+					uri: D(ee),
+					"data-testid": "pl-dropdown-multi-required"
 				}, null, 8, ["uri"])) : h("", !0),
 				_("span", null, E(y.label), 1),
 				D(R).tooltip ? (x(), m(D(n), {
 					key: 1,
 					class: "info",
-					position: "top"
+					position: "top",
+					"data-testid": "pl-dropdown-multi-tooltip"
 				}, {
 					tooltip: O(() => [T(t.$slots, "tooltip")]),
 					_: 3
@@ -180,6 +198,7 @@ var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { cl
 				ref: H,
 				root: B.value,
 				class: "pl-dropdown-multi__options",
+				"data-testid": "pl-dropdown-multi-options",
 				gap: 5,
 				tabindex: "-1",
 				onFocusout: $
@@ -189,6 +208,7 @@ var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { cl
 						key: t,
 						class: b({ "pl-dropdown-multi__chip--missing": e.isMissing }),
 						closeable: "",
+						"data-testid": "pl-dropdown-multi-chip",
 						small: "",
 						onClose: (t) => Z(e.value)
 					}, {
@@ -203,6 +223,7 @@ var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { cl
 						"is-hovered": U.activeOption == n,
 						size: "medium",
 						"use-checkbox": "",
+						"data-testid": "pl-dropdown-multi-option",
 						onClick: k((e) => X(t.value), ["stop"])
 					}, null, 8, [
 						"option",
@@ -210,7 +231,7 @@ var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { cl
 						"is-hovered",
 						"onClick"
 					]))), 128)),
-					q.value.length ? h("", !0) : (x(), g("div", M, "Nothing found"))
+					q.value.length ? h("", !0) : (x(), g("div", M, " Nothing found "))
 				]),
 				_: 1
 			}, 8, ["root"])) : h("", !0),

package/dist/components/PlDropdownMulti/PlDropdownMulti.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlDropdownMulti.vue_vue_type_script_setup_true_lang.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 Text shown in a chip when a `modelValue` entry is missing from `options` —\n * e.g. its upstream source was deleted. Rendered italic in error color.\n /\n missingValueLabel?: 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 missingValueLabel: \"Value not available\",\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 // While options load (`options === undefined`), hide chips for unresolved values\n // to avoid a \"missing\" flash that resolves once options arrive.\n const optionsLoaded = props.options !== undefined;\n return selectedValuesRef.value\n .map((v) => {\n const opt = normalizedOptionsRef.value.find((o) => deepEqual(o.value, v));\n if (opt) {\n // Found: render the option's own (normalized) label verbatim — matches\n // PlDropdown. `opt.label` is always a string (possibly \"\"), never an object,\n // so there is no raw-value leak to guard against.\n return { ...opt, isMissing: false };\n }\n if (!optionsLoaded) {\n return undefined;\n }\n // Honor empty `missingValueLabel` verbatim — caller's explicit \"render nothing\".\n return {\n value: v,\n label: props.missingValueLabel,\n isMissing: true,\n };\n })\n .filter((v): v is NonNullable<typeof 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 :class=\"{ 'pl-dropdown-multi__chip--missing': opt.isMissing }\"\n closeable\n small\n @click.stop=\"data.open = true\"\n @close=\"unselectOption(opt.value)\"\n >\n {{ opt.label }}\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 :class=\"{ 'pl-dropdown-multi__chip--missing': opt.isMissing }\"\n closeable\n small\n @close=\"unselectOption(opt.value)\"\n >\n {{ opt.label }}\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":"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"}
1	+ {"version":3,"file":"PlDropdownMulti.vue_vue_type_script_setup_true_lang.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 Text shown in a chip when a `modelValue` entry is missing from `options` —\n * e.g. its upstream source was deleted. Rendered italic in error color.\n /\n missingValueLabel?: 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 missingValueLabel: \"Value not available\",\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 // While options load (`options === undefined`), hide chips for unresolved values\n // to avoid a \"missing\" flash that resolves once options arrive.\n const optionsLoaded = props.options !== undefined;\n return selectedValuesRef.value\n .map((v) => {\n const opt = normalizedOptionsRef.value.find((o) => deepEqual(o.value, v));\n if (opt) {\n // Found: render the option's own (normalized) label verbatim — matches\n // PlDropdown. `opt.label` is always a string (possibly \"\"), never an object,\n // so there is no raw-value leak to guard against.\n return { ...opt, isMissing: false };\n }\n if (!optionsLoaded) {\n return undefined;\n }\n // Honor empty `missingValueLabel` verbatim — caller's explicit \"render nothing\".\n return {\n value: v,\n label: props.missingValueLabel,\n isMissing: true,\n };\n })\n .filter((v): v is NonNullable<typeof 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\" data-testid=\"pl-dropdown-multi\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-dropdown-multi\"\n data-testid=\"pl-dropdown-multi-control\"\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 data-testid=\"pl-dropdown-multi-input\"\n @focus=\"data.open = true\"\n />\n <div v-if=\"!data.open\" class=\"chips-container\" data-testid=\"pl-dropdown-multi-chips\">\n <PlChip\n v-for=\"(opt, i) in selectedOptionsRef\"\n :key=\"i\"\n :class=\"{ 'pl-dropdown-multi__chip--missing': opt.isMissing }\"\n closeable\n data-testid=\"pl-dropdown-multi-chip\"\n small\n @click.stop=\"data.open = true\"\n @close=\"unselectOption(opt.value)\"\n >\n {{ opt.label }}\n </PlChip>\n </div>\n\n <div class=\"pl-dropdown-multi__controls\">\n <PlIcon24\n v-if=\"showLoadingSpinner\"\n name=\"loading\"\n data-testid=\"pl-dropdown-multi-loading\"\n />\n <slot name=\"append\" />\n <div\n class=\"pl-dropdown-multi__arrow-wrapper\"\n data-testid=\"pl-dropdown-multi-arrow\"\n @click.stop=\"toggleModel\"\n >\n <div class=\"arrow-icon arrow-icon-default\" />\n </div>\n </div>\n </div>\n <label v-if=\"label\" data-testid=\"pl-dropdown-multi-label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-dropdown-multi-required\" />\n <span>{{ label }}</span>\n <PlTooltip\n v-if=\"slots.tooltip\"\n class=\"info\"\n position=\"top\"\n data-testid=\"pl-dropdown-multi-tooltip\"\n >\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 data-testid=\"pl-dropdown-multi-options\"\n :gap=\"5\"\n tabindex=\"-1\"\n @focusout=\"onFocusOut\"\n >\n <div\n class=\"pl-dropdown-multi__open-chips-container\"\n data-testid=\"pl-dropdown-multi-chips\"\n >\n <PlChip\n v-for=\"(opt, i) in selectedOptionsRef\"\n :key=\"i\"\n :class=\"{ 'pl-dropdown-multi__chip--missing': opt.isMissing }\"\n closeable\n data-testid=\"pl-dropdown-multi-chip\"\n small\n @close=\"unselectOption(opt.value)\"\n >\n {{ opt.label }}\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 data-testid=\"pl-dropdown-multi-option\"\n @click.stop=\"selectOption(item.value)\"\n />\n <div\n v-if=\"!filteredOptionsRef.length\"\n class=\"nothing-found\"\n data-testid=\"pl-dropdown-multi-options-empty\"\n >\n Nothing found\n </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\" data-testid=\"pl-dropdown-multi-error\">\n {{ getErrorMessage(error) }}\n </div>\n <div\n v-else-if=\"helper\"\n class=\"pl-dropdown-multi__helper\"\n data-testid=\"pl-dropdown-multi-helper\"\n >\n {{ helper }}\n </div>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlDropdownMultiRef.js","names":[],"sources":["../../../src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ModelRef, RefOption } from \"../../types\";\nimport PlDropdownMulti from \"../PlDropdownMulti/PlDropdownMulti.vue\";\nimport { computed, useSlots } from \"vue\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n /*\n Emitted when the model value is updated.\n /\n (e: \"update:modelValue\", value: ModelRef[] \| undefined): void;\n}>();\n\nconst props = withDefaults(\n defineProps<{\n /\n The current selected values.\n /\n modelValue: ModelRef[] \| undefined;\n /\n The label text for the dropdown field (optional)\n /\n label?: string;\n /\n List of available options for the dropdown\n /\n options?: Readonly<RefOption[]>;\n /\n A helper text displayed below the dropdown when there are no errors (optional).\n /\n helper?: string;\n /\n Error message displayed below the dropdown (optional)\n /\n error?: unknown;\n /\n Placeholder text shown when no value is selected.\n /\n placeholder?: string;\n /\n Text shown in a chip when a `modelValue` entry's upstream block no longer\n * exists. Defaults to \"Upstream value removed\".\n /\n missingValueLabel?: string;\n /\n If `true`, the dropdown component is marked as required.\n /\n required?: boolean;\n /\n If `true`, the dropdown component is disabled and cannot be interacted with.\n */\n disabled?: boolean;\n }>(),\n {\n modelValue: () => [],\n label: undefined,\n helper: undefined,\n error: undefined,\n placeholder: \"...\",\n missingValueLabel: \"Upstream value removed\",\n required: false,\n disabled: false,\n options: undefined,\n },\n);\n\nconst options = computed(() =>\n props.options?.map((opt) => ({\n label: opt.label,\n value: opt.ref,\n })),\n);\n</script>\n\n<template>\n <PlDropdownMulti\n v-bind=\"props\"\n :options=\"options\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n >\n <template v-if=\"slots.tooltip\" #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlDropdownMulti>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"PlDropdownMultiRef.js","names":[],"sources":["../../../src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ModelRef, RefOption } from \"../../types\";\nimport PlDropdownMulti from \"../PlDropdownMulti/PlDropdownMulti.vue\";\nimport { computed, useSlots } from \"vue\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n /*\n Emitted when the model value is updated.\n /\n (e: \"update:modelValue\", value: ModelRef[] \| undefined): void;\n}>();\n\nconst props = withDefaults(\n defineProps<{\n /\n The current selected values.\n /\n modelValue: ModelRef[] \| undefined;\n /\n The label text for the dropdown field (optional)\n /\n label?: string;\n /\n List of available options for the dropdown\n /\n options?: Readonly<RefOption[]>;\n /\n A helper text displayed below the dropdown when there are no errors (optional).\n /\n helper?: string;\n /\n Error message displayed below the dropdown (optional)\n /\n error?: unknown;\n /\n Placeholder text shown when no value is selected.\n /\n placeholder?: string;\n /\n Text shown in a chip when a `modelValue` entry's upstream block no longer\n * exists. Defaults to \"Upstream value removed\".\n /\n missingValueLabel?: string;\n /\n If `true`, the dropdown component is marked as required.\n /\n required?: boolean;\n /\n If `true`, the dropdown component is disabled and cannot be interacted with.\n */\n disabled?: boolean;\n }>(),\n {\n modelValue: () => [],\n label: undefined,\n helper: undefined,\n error: undefined,\n placeholder: \"...\",\n missingValueLabel: \"Upstream value removed\",\n required: false,\n disabled: false,\n options: undefined,\n },\n);\n\nconst options = computed(() =>\n props.options?.map((opt) => ({\n label: opt.label,\n value: opt.ref,\n })),\n);\n</script>\n\n<template>\n <PlDropdownMulti\n data-testid=\"pl-dropdown-multi-ref\"\n v-bind=\"props\"\n :options=\"options\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n >\n <template v-if=\"slots.tooltip\" #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlDropdownMulti>\n</template>\n"],"mappings":""}

package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlDropdownMultiRef.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue"],"names":[],"mappings":"~~AA0FA~~,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAevD,KAAK,WAAW,GAAG;IACf;;OAEG;IACH,UAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;~~AA2FJ~~,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;~~aA5HF~~,QAAQ,CAAC,SAAS,EAAE,CAAC;WAJvB,MAAM;;gBAJF,QAAQ,EAAE,GAAG,SAAS;cA6BvB,OAAO;cAIP,OAAO;YArBT,MAAM;iBAQD,MAAM;uBAKA,MAAM;~~6EA+G5B~~,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"PlDropdownMultiRef.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue"],"names":[],"mappings":"AA2FA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAevD,KAAK,WAAW,GAAG;IACf;;OAEG;IACH,UAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA6FJ,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;aA9HF,QAAQ,CAAC,SAAS,EAAE,CAAC;WAJvB,MAAM;;gBAJF,QAAQ,EAAE,GAAG,SAAS;cA6BvB,OAAO;cAIP,OAAO;YArBT,MAAM;iBAQD,MAAM;uBAKA,MAAM;6EAiH5B,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue2.js CHANGED Viewed

@@ -26,7 +26,7 @@ var d = /* @__PURE__ */ i({
 			label: e.label,
 			value: e.ref
 		})));
-		return (t, i) => (o(), n(e, a(f, {
+		return (t, i) => (o(), n(e, a({ "data-testid": "pl-dropdown-multi-ref" }, f, {
 			options: p.value,
 			"onUpdate:modelValue": i[0] ||= (e) => t.$emit("update:modelValue", e)
 		}), r({ _: 2 }, [c(d).tooltip ? {