npm - @milaboratories/uikit - Versions diffs - 2.15.43 → 2.16.1 - Mend

@milaboratories/uikit 2.15.43 → 2.16.1

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 (1388) hide show

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 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":"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"}
1	+ {"version":3,"file":"PlDropdownLine.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_createVNode","ResizableInput","_withDirectives","_vShow","_createBlock","_Teleport","_normalizeStyle","_withModifiers","_Fragment","_renderList","_unref","_renderSlot","DropdownListItem","_createCommentVNode","TabItem","DropdownListItem_default","ResizableInput_default","TabItem_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","PlDropdownLine_vue_vue_type_script_setup_true_lang_default","__emit","emit","props","__props","data","reactive","container","ref","list","classes","computed","classesResult","searchPhrase","options","useFilteredList","toRef","canShowClearBtn","modelText","index","getIndexForModelInItems","normalizeListOptions","inputModel","v","placeholderVal","useClickOutside","watch","val","value","nextTick","scrollIntoActive","updateSelected","deepEqual","o","tap","resetSearchPhrase","toggleList","closePopupIfNeeded","selectItem","item","isItemSelected","onFocusOut","relatedTarget","event","handleKeydown","length","activeOption","d","$list","tapIf","scrollIntoView","el","clearModel","optionsStyle","rect","useElementPosition","downTopOffset","pos","openBlock","createElementBlock","normalizeClass","createElementVNode","toDisplayString","createVNode","_cache","$event","withDirectives","vShow","createBlock","Teleport","normalizeStyle","withModifiers","Fragment","renderList","unref","renderSlot","_ctx","createCommentVNode"],"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":"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"}

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

@@ -1,7 +1,6 @@
 import e from "./ResizableInput.vue2.js";
-//#region src/components/PlDropdownLine/ResizableInput.vue
+// src/components/PlDropdownLine/ResizableInput.vue
 var t = e;
-//#endregion
 export { t as default };
 //# sourceMappingURL=ResizableInput.js.map

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\" 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":""}
1	+ {"version":3,"file":"ResizableInput.js","names":["_sfc_main","ResizableInput_vue_vue_type_script_setup_true_lang_default","ResizableInput_default"],"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.vue2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 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
+// src/components/PlDropdownLine/ResizableInput.vue?vue&type=script&setup=true&lang.ts
 var c = {
 	class: "resizable-input",
 	"data-testid": "pl-resizable-input"
@@ -8,7 +8,7 @@ var c = {
 	"placeholder",
 	"value",
 	"disabled"
-], u = /* @__PURE__ */ r({
+], u = /*@__PURE__*/ r({
 	__name: "ResizableInput",
 	props: {
 		modelValue: {},
@@ -38,7 +38,6 @@ var c = {
 		}), null, 16, l)]));
 	}
 });
-//#endregion
 export { u as default };
 //# sourceMappingURL=ResizableInput.vue2.js.map

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\" 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~~"}
1	+ {"version":3,"file":"ResizableInput.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_createElementVNode","_normalizeStyle","_toDisplayString","_mergeProps","_hoisted_1","_hoisted_2","ResizableInput_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","text","computed","styles","stl","\"width\"","\"maxWidth\"","handleInput","event","openBlock","createElementBlock","createElementVNode","normalizeStyle","toDisplayString","mergeProps","_ctx"],"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,IAAMW,IAAQC,GAQRC,IAAOH,GAEPI,IAAOC,QACPJ,EAAM,cACDA,EAAM,cAERA,EAAM,YAAY,QAAQ,MAAK,EAAE,CACzC,GAEKK,IAASD,QAAe;GAC5B,IAAME,IAA8B,CAAC;GAOrC,OANIN,EAAM,UACR,EAAIO,QAAWP,EAAM,QAEnBA,EAAM,aACR,EAAIQ,WAAcR,EAAM,WAEnBM;EACT,CAAC;EAED,SAASG,EAAY,GAAc;GACjC,EAAK,qBAAsBC,EAAM,OAA4B,KAAK;EACpE;E,kBAIEpB,EAAA,GAAAC,EAWM,OAXNK,GAWM,CAVJJ,EAA0E,QAAA;GAAnE,OAAKC,EAAEY,EAAA,KAAM;GAAE,OAAM;EAAgC,GAAAX,EAAAS,EAAA,KAAI,GAAA,CAAA,GAChEX,EAQE,SARFG,EAQE,EAPA,eAAY,yBAAwB,GAC5BN,EAAAA,QAAM;GACb,aAAaY,EAAA;GACb,OAAOD,EAAM;GACb,UAAUA,EAAM;GAChB,OAAOK,EAAA;GACP,SAAOI"}

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

	@@ -1 +1 @@
1	- ~~import~~ "./PlDropdownLine.js";
1	+ export { default as PlDropdownLine } from "./PlDropdownLine.js";

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

@@ -1,7 +1,6 @@
 import e from "./PlDropdownMulti.vue2.js";
-//#region src/components/PlDropdownMulti/PlDropdownMulti.vue
+// src/components/PlDropdownMulti/PlDropdownMulti.vue
 var t = e;
-//#endregion
 export { t as default };
 //# sourceMappingURL=PlDropdownMulti.js.map

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\" 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":""}
1	+ {"version":3,"file":"PlDropdownMulti.js","names":["_sfc_main","PlDropdownMulti_vue_vue_type_script_setup_true_lang_default","PlDropdownMulti_default"],"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.vue2.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import e from "../DropdownListItem.js";
+import e from "../PlSvg/PlSvg.js";
+import "../PlSvg/index.js";
 import { normalizeListOptions as t } from "../../helpers/utils.js";
 import n from "../PlTooltip/PlTooltip.js";
 import "../PlTooltip/index.js";
-import { getErrorMessage as r } from "../../helpers/error.js";
-import i from "../PlSvg/PlSvg.js";
-import "../PlSvg/index.js";
+import r from "../DropdownListItem.js";
+import { getErrorMessage as i } from "../../helpers/error.js";
 import a from "../PlIcon24/PlIcon24.js";
 import "../PlIcon24/index.js";
 import o from "../../utils/DoubleContour.js";
@@ -16,7 +16,7 @@ import d from "../PlChip/PlChip.js";
 import "../PlChip/index.js";
 import './pl-dropdown-multi.css';/* empty css                  */
 import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as te, defineComponent as y, normalizeClass as b, openBlock as x, reactive as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useSlots as ne, useTemplateRef as re, vModelText as ie, watch as ae, watchPostEffect as oe, withCtx as O, withDirectives as se, withModifiers as k } from "vue";
-//#region src/components/PlDropdownMulti/PlDropdownMulti.vue?vue&type=script&setup=true&lang.ts
+// 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",
@@ -39,7 +39,7 @@ var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { cl
 	key: 1,
 	class: "pl-dropdown-multi__helper",
 	"data-testid": "pl-dropdown-multi-helper"
-}, F = /* @__PURE__ */ y({
+}, F = /*@__PURE__*/ y({
 	name: "PlDropdownMulti",
 	props: {
 		modelValue: { default: () => [] },
@@ -176,7 +176,7 @@ var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { cl
 				])
 			]),
 			y.label ? (x(), g("label", A, [
-				y.required ? (x(), m(D(i), {
+				y.required ? (x(), m(D(e), {
 					key: 0,
 					uri: D(ee),
 					"data-testid": "pl-dropdown-multi-required"
@@ -215,16 +215,16 @@ var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { cl
 						default: O(() => [v(E(e.label), 1)]),
 						_: 2
 					}, 1032, ["class", "onClose"]))), 128))]),
-					(x(!0), g(f, null, w(q.value, (t, n) => (x(), m(e, {
-						key: n,
-						option: t,
+					(x(!0), g(f, null, w(q.value, (e, t) => (x(), m(r, {
+						key: t,
+						option: e,
 						"text-item": "text",
-						"is-selected": t.selected,
-						"is-hovered": U.activeOption == n,
+						"is-selected": e.selected,
+						"is-hovered": U.activeOption == t,
 						size: "medium",
 						"use-checkbox": "",
 						"data-testid": "pl-dropdown-multi-option",
-						onClick: k((e) => X(t.value), ["stop"])
+						onClick: k((t) => X(e.value), ["stop"])
 					}, null, 8, [
 						"option",
 						"is-selected",
@@ -239,10 +239,9 @@ var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { cl
 				class: "pl-dropdown-multi__contour",
 				"group-position": y.groupPosition
 			}, null, 8, ["group-position"])
-		])], 42, ce), y.error ? (x(), g("div", N, E(D(r)(y.error)), 1)) : y.helper ? (x(), g("div", P, E(y.helper), 1)) : h("", !0)]));
+		])], 42, ce), y.error ? (x(), g("div", N, E(D(i)(y.error)), 1)) : y.helper ? (x(), g("div", P, E(y.helper), 1)) : h("", !0)]));
 	}
 });
-//#endregion
 export { F as default };
 //# sourceMappingURL=PlDropdownMulti.vue2.js.map

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\" 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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"}
1	+ {"version":3,"file":"PlDropdownMulti.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_withDirectives","_vModelText","_Fragment","_renderList","_createBlock","_unref","PlChip","_withModifiers","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","PlIcon24","_renderSlot","PlSvg","SvgRequired","PlTooltip","DropdownOverlay","DropdownListItem","_createVNode","DoubleContour","PlSvg_default","PlTooltip_default","DropdownListItem_default","PlIcon24_default","DoubleContour_default","DropdownOverlay_default","required_default","PlChip_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","PlDropdownMulti_vue_vue_type_script_setup_true_lang_default","__emit","emit","emitModel","v","slots","useSlots","props","__props","rootRef","ref","input","overlay","useTemplateRef","data","reactive","selectedValuesRef","computed","placeholderRef","normalizedOptionsRef","normalizeListOptions","selectedOptionsRef","optionsLoaded","opt","deepEqual","o","filteredOptionsRef","selectedValues","unref","options","search","deepIncludes","isLoadingOptions","showLoadingSpinner","isDisabled","tabindex","updateActiveOption","selectOption","values","it","unselectOption","d","setFocusOnInput","toggleModel","onFocusOut","relatedTarget","event","handleKeydown","open","filteredOptions","length","activeOption","useLabelNotch","watch","watchPostEffect","openBlock","createElementBlock","createElementVNode","normalizeClass","withDirectives","_cache","$event","vModelText","createCommentVNode","Fragment","renderList","createBlock","i","withModifiers","withCtx","createTextVNode","toDisplayString","renderSlot","_ctx","index","item","createVNode","getErrorMessage"],"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/PlDropdownMulti/index.js CHANGED Viewed

	@@ -1 +1 @@
1	- ~~import~~ "./PlDropdownMulti.js";
1	+ export { default as PlDropdownMulti } from "./PlDropdownMulti.js";

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

@@ -1,7 +1,6 @@
 import e from "./PlDropdownMultiRef.vue2.js";
-//#region src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue
+// src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue
 var t = e;
-//#endregion
 export { t as default };
 //# sourceMappingURL=PlDropdownMultiRef.js.map

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 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":""}
1	+ {"version":3,"file":"PlDropdownMultiRef.js","names":["_sfc_main","PlDropdownMultiRef_vue_vue_type_script_setup_true_lang_default","PlDropdownMultiRef_default"],"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 CHANGED Viewed

@@ -61,8 +61,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     label: string;
     error: undefined;
     modelValue: ModelRef[] | undefined;
-    required: boolean;
     disabled: boolean;
+    required: boolean;
     helper: string;
     placeholder: string;
     missingValueLabel: string;

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":"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"}
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;cAiCvB,OAAO;cAJP,OAAO;YAjBT,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

@@ -1,7 +1,7 @@
 import e from "../PlDropdownMulti/PlDropdownMulti.js";
 import { computed as t, createBlock as n, createSlots as r, defineComponent as i, mergeProps as a, openBlock as o, renderSlot as s, unref as c, useSlots as l, withCtx as u } from "vue";
-//#region src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue?vue&type=script&setup=true&lang.ts
-var d = /* @__PURE__ */ i({
+// src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue?vue&type=script&setup=true&lang.ts
+var d = /*@__PURE__*/ i({
 	__name: "PlDropdownMultiRef",
 	props: {
 		modelValue: { default: () => [] },
@@ -36,7 +36,6 @@ var d = /* @__PURE__ */ i({
 		} : void 0]), 1040, ["options"]));
 	}
 });
-//#endregion
 export { d as default };
 //# sourceMappingURL=PlDropdownMultiRef.vue2.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlDropdownMultiRef.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"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":";;;;;;;;;;;;;;;;;;;;;;;;EAMA,~~IAAM~~,~~IAAa~~,~~GAAU~~,~~EASvB~~,~~IAAQ~~,~~GAqDR~~,~~IAAU~~,~~QACd~~,EAAM,SAAS,KAAK,OAAS;GAC3B,~~OAAO~~,EAAI;GACX,~~OAAO~~,EAAI;~~GACZ~~,EAAE,CACJ;~~yBAIC~~,~~EASkB~~,~~GATlB~~,EASkB,EARhB,eAAY,~~yBAAuB~~,~~EAC3B~~,GAAK;GACZ,~~SAAS~~,EAAA;GACT,uBAAkB,~~AAAA~~,EAAA,QAAA,~~MAAEA~~,EAAAA,MAAK,~~qBAAsB~~,~~EAAM~~;~~mBAEtC~~,~~EAAA~~,~~EAAK~~,CAAC,~~UAAA~~;~~SAAU~~;~~eACP~~,~~CAAvB~~,~~EAAuB~~,EAAA,QAAA,~~UAAA~~,~~CAAA,CAAA~~"}
1	+ {"version":3,"file":"PlDropdownMultiRef.vue_vue_type_script_setup_true_lang.js","names":["$emit","_openBlock","_createBlock","PlDropdownMulti","_mergeProps","_createSlots","_unref","_withCtx","_renderSlot","PlDropdownMulti_default","PlDropdownMultiRef_vue_vue_type_script_setup_true_lang_default","slots","useSlots","props","__props","options","computed","opt","openBlock","createBlock","mergeProps","_cache","_ctx","$event","createSlots","unref","withCtx","renderSlot"],"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":";;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAMW,IAAaC,EAAS,GAStBC,IAAQC,GAqDRC,IAAUC,QACdH,EAAM,SAAS,KAAK,OAAS;GAC3B,OAAOI,EAAI;GACX,OAAOA,EAAI;EACb,EAAE,CACJ;E,kBAIEhB,EAAA,GAAAC,EASkBC,GATlBC,EASkB,EARhB,eAAY,wBAAuB,GAC3BS,GAAK;GACZ,SAASE,EAAA;GACT,uBAAkB,AAAAM,EAAA,QAAA,MAAErB,EAAAA,MAAK,qBAAsBuB,CAAM;E,iBAEtCjB,EAAAK,CAAA,CAAK,CAAC,U;GAAU,MAAA;GAC9B,IAAAJ,QAAuB,CAAvBC,EAAuBc,EAAA,QAAA,SAAA,C"}

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

	@@ -1 +1 @@
1	- ~~import~~ "./PlDropdownMultiRef.js";
1	+ export { default as PlDropdownMultiRef } from "./PlDropdownMultiRef.js";

package/dist/components/PlDropdownRef/PlDropdownRef.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import e from "./PlDropdownRef.vue2.js";
-//#region src/components/PlDropdownRef/PlDropdownRef.vue
+// src/components/PlDropdownRef/PlDropdownRef.vue
 var t = e;
-//#endregion
 export { t as default };
 //# sourceMappingURL=PlDropdownRef.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlDropdownRef.js","names":[],"sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A component for selecting one value from a list of options\n /\nexport default {\n name: \"PlDropdownRef\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from \"vue\";\nimport type { ListOption, ModelRef, RefOption } from \"../../types\";\nimport { PlDropdown } from \"../PlDropdown\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n /\n Emitted when the model value is updated.\n /\n (e: \"update:modelValue\", value: M \| undefined): void;\n}>();\n\nconst props = withDefaults(\n defineProps<{\n /\n The current selected ref of the dropdown.\n /\n modelValue: M \| undefined;\n /\n The label text for the dropdown field (optional)\n /\n label?: string;\n /\n List of available ref options for the dropdown\n /\n options?: Readonly<RefOption[] \| ListOption<M>[]>;\n /\n A helper text displayed below the dropdown when there are no errors (optional).\n /\n helper?: string;\n /\n A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n /\n loadingOptionsHelper?: string;\n /\n Error message displayed below the dropdown (optional)\n /\n error?: unknown;\n /\n Placeholder text shown when no value is selected.\n /\n placeholder?: string;\n /\n Text shown in the field when the referenced upstream block / output no longer\n * exists. Defaults to \"Upstream value removed\".\n /\n missingValueLabel?: string;\n /\n Enables a button to clear the selected value (default: false)\n /\n clearable?: boolean;\n /\n If `true`, the dropdown component is marked as required.\n /\n required?: boolean;\n /\n If `true`, the dropdown component is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n Option list item size\n */\n optionSize?: \"small\" \| \"medium\";\n }>(),\n {\n label: \"\",\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n placeholder: \"...\",\n missingValueLabel: \"Upstream value removed\",\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n optionSize: \"small\",\n options: undefined,\n },\n);\n\nconst options = computed(() =>\n props.options?.map((opt) =>\n \"ref\" in opt\n ? ({\n label: opt.label,\n value: opt.ref,\n group: opt.group,\n } as ListOption<M>)\n : opt,\n ),\n);\n</script>\n\n<template>\n <PlDropdown\n data-testid=\"pl-dropdown-ref\"\n v-bind=\"props\"\n :options=\"options\"\n :loading-options-helper=\"loadingOptionsHelper\"\n :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n >\n <template v-if=\"slots.tooltip\" #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlDropdown>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"PlDropdownRef.js","names":["_sfc_main","PlDropdownRef_vue_vue_type_script_setup_true_lang_default","PlDropdownRef_default"],"sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A component for selecting one value from a list of options\n /\nexport default {\n name: \"PlDropdownRef\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from \"vue\";\nimport type { ListOption, ModelRef, RefOption } from \"../../types\";\nimport { PlDropdown } from \"../PlDropdown\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n /\n Emitted when the model value is updated.\n /\n (e: \"update:modelValue\", value: M \| undefined): void;\n}>();\n\nconst props = withDefaults(\n defineProps<{\n /\n The current selected ref of the dropdown.\n /\n modelValue: M \| undefined;\n /\n The label text for the dropdown field (optional)\n /\n label?: string;\n /\n List of available ref options for the dropdown\n /\n options?: Readonly<RefOption[] \| ListOption<M>[]>;\n /\n A helper text displayed below the dropdown when there are no errors (optional).\n /\n helper?: string;\n /\n A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n /\n loadingOptionsHelper?: string;\n /\n Error message displayed below the dropdown (optional)\n /\n error?: unknown;\n /\n Placeholder text shown when no value is selected.\n /\n placeholder?: string;\n /\n Text shown in the field when the referenced upstream block / output no longer\n * exists. Defaults to \"Upstream value removed\".\n /\n missingValueLabel?: string;\n /\n Enables a button to clear the selected value (default: false)\n /\n clearable?: boolean;\n /\n If `true`, the dropdown component is marked as required.\n /\n required?: boolean;\n /\n If `true`, the dropdown component is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n Option list item size\n */\n optionSize?: \"small\" \| \"medium\";\n }>(),\n {\n label: \"\",\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n placeholder: \"...\",\n missingValueLabel: \"Upstream value removed\",\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n optionSize: \"small\",\n options: undefined,\n },\n);\n\nconst options = computed(() =>\n props.options?.map((opt) =>\n \"ref\" in opt\n ? ({\n label: opt.label,\n value: opt.ref,\n group: opt.group,\n } as ListOption<M>)\n : opt,\n ),\n);\n</script>\n\n<template>\n <PlDropdown\n data-testid=\"pl-dropdown-ref\"\n v-bind=\"props\"\n :options=\"options\"\n :loading-options-helper=\"loadingOptionsHelper\"\n :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n >\n <template v-if=\"slots.tooltip\" #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlDropdown>\n</template>\n"],"mappings":""}

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

@@ -1,7 +1,7 @@
 import e from "../PlDropdown/PlDropdown.js";
 import "../PlDropdown/index.js";
 import { computed as t, createBlock as n, createSlots as r, defineComponent as i, mergeProps as a, openBlock as o, renderSlot as s, unref as c, useSlots as l, withCtx as u } from "vue";
-var d = /* @__PURE__ */ i({
+var d = /*@__PURE__*/ i({
 	name: "PlDropdownRef",
 	props: {
 		modelValue: {},
@@ -49,7 +49,6 @@ var d = /* @__PURE__ */ i({
 		]));
 	}
 });
-//#endregion
 export { d as default };
 //# sourceMappingURL=PlDropdownRef.vue2.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlDropdownRef.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A component for selecting one value from a list of options\n /\nexport default {\n name: \"PlDropdownRef\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from \"vue\";\nimport type { ListOption, ModelRef, RefOption } from \"../../types\";\nimport { PlDropdown } from \"../PlDropdown\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n /\n Emitted when the model value is updated.\n /\n (e: \"update:modelValue\", value: M \| undefined): void;\n}>();\n\nconst props = withDefaults(\n defineProps<{\n /\n The current selected ref of the dropdown.\n /\n modelValue: M \| undefined;\n /\n The label text for the dropdown field (optional)\n /\n label?: string;\n /\n List of available ref options for the dropdown\n /\n options?: Readonly<RefOption[] \| ListOption<M>[]>;\n /\n A helper text displayed below the dropdown when there are no errors (optional).\n /\n helper?: string;\n /\n A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n /\n loadingOptionsHelper?: string;\n /\n Error message displayed below the dropdown (optional)\n /\n error?: unknown;\n /\n Placeholder text shown when no value is selected.\n /\n placeholder?: string;\n /\n Text shown in the field when the referenced upstream block / output no longer\n * exists. Defaults to \"Upstream value removed\".\n /\n missingValueLabel?: string;\n /\n Enables a button to clear the selected value (default: false)\n /\n clearable?: boolean;\n /\n If `true`, the dropdown component is marked as required.\n /\n required?: boolean;\n /\n If `true`, the dropdown component is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n Option list item size\n */\n optionSize?: \"small\" \| \"medium\";\n }>(),\n {\n label: \"\",\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n placeholder: \"...\",\n missingValueLabel: \"Upstream value removed\",\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n optionSize: \"small\",\n options: undefined,\n },\n);\n\nconst options = computed(() =>\n props.options?.map((opt) =>\n \"ref\" in opt\n ? ({\n label: opt.label,\n value: opt.ref,\n group: opt.group,\n } as ListOption<M>)\n : opt,\n ),\n);\n</script>\n\n<template>\n <PlDropdown\n data-testid=\"pl-dropdown-ref\"\n v-bind=\"props\"\n :options=\"options\"\n :loading-options-helper=\"loadingOptionsHelper\"\n :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n >\n <template v-if=\"slots.tooltip\" #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlDropdown>\n</template>\n"],"mappings":";;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;EAUR,~~IAAM~~,~~IAAa~~,~~GAAU~~,~~EASvB~~,~~IAAQ~~,~~GAoER~~,~~IAAU~~,~~QACd~~,EAAM,SAAS,KAAK,MAClB,~~SAAS~~,IACJ;GACC,~~OAAO~~,EAAI;GACX,~~OAAO~~,EAAI;GACX,~~OAAO~~,EAAI;~~GACZ~~,~~GACD~~,~~EACL~~,CACF;~~yBAIC~~,~~EAWa~~,EAAA,~~EAAA~~,~~EAXb~~,EAWa,EAVX,eAAY,~~mBAAiB~~,~~EACrB~~,GAAK;GACZ,~~SAAS~~,EAAA;GACT,~~0BAAwB~~,EAAA;GACxB,~~oBAAkB~~,EAAA,WAAQ,kBAAA;GAC1B,uBAAkB,~~AAAA~~,EAAA,QAAA,~~MAAEA~~,EAAAA,MAAK,~~qBAAsB~~,~~EAAM~~;~~mBAEtC~~,~~EAAA~~,~~EAAK~~,CAAC,~~UAAA~~;~~SAAU~~;~~eACP~~,~~CAAvB~~,~~EAAuB~~,EAAA,QAAA,~~UAAA~~,~~CAAA,CAAA~~"}
1	+ {"version":3,"file":"PlDropdownRef.vue_vue_type_script_setup_true_lang.js","names":["$emit","_openBlock","_createBlock","_unref","PlDropdown","_mergeProps","_createSlots","_withCtx","_renderSlot","PlDropdown_default","PlDropdownRef_vue_vue_type_script_setup_true_lang_default","slots","useSlots","props","__props","options","computed","opt","openBlock","createBlock","unref","mergeProps","_cache","_ctx","$event","createSlots","withCtx","renderSlot"],"sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A component for selecting one value from a list of options\n /\nexport default {\n name: \"PlDropdownRef\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from \"vue\";\nimport type { ListOption, ModelRef, RefOption } from \"../../types\";\nimport { PlDropdown } from \"../PlDropdown\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n /\n Emitted when the model value is updated.\n /\n (e: \"update:modelValue\", value: M \| undefined): void;\n}>();\n\nconst props = withDefaults(\n defineProps<{\n /\n The current selected ref of the dropdown.\n /\n modelValue: M \| undefined;\n /\n The label text for the dropdown field (optional)\n /\n label?: string;\n /\n List of available ref options for the dropdown\n /\n options?: Readonly<RefOption[] \| ListOption<M>[]>;\n /\n A helper text displayed below the dropdown when there are no errors (optional).\n /\n helper?: string;\n /\n A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n /\n loadingOptionsHelper?: string;\n /\n Error message displayed below the dropdown (optional)\n /\n error?: unknown;\n /\n Placeholder text shown when no value is selected.\n /\n placeholder?: string;\n /\n Text shown in the field when the referenced upstream block / output no longer\n * exists. Defaults to \"Upstream value removed\".\n /\n missingValueLabel?: string;\n /\n Enables a button to clear the selected value (default: false)\n /\n clearable?: boolean;\n /\n If `true`, the dropdown component is marked as required.\n /\n required?: boolean;\n /\n If `true`, the dropdown component is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n Option list item size\n */\n optionSize?: \"small\" \| \"medium\";\n }>(),\n {\n label: \"\",\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n placeholder: \"...\",\n missingValueLabel: \"Upstream value removed\",\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n optionSize: \"small\",\n options: undefined,\n },\n);\n\nconst options = computed(() =>\n props.options?.map((opt) =>\n \"ref\" in opt\n ? ({\n label: opt.label,\n value: opt.ref,\n group: opt.group,\n } as ListOption<M>)\n : opt,\n ),\n);\n</script>\n\n<template>\n <PlDropdown\n data-testid=\"pl-dropdown-ref\"\n v-bind=\"props\"\n :options=\"options\"\n :loading-options-helper=\"loadingOptionsHelper\"\n :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n >\n <template v-if=\"slots.tooltip\" #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlDropdown>\n</template>\n"],"mappings":";;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;EAUR,IAAMW,IAAaC,EAAS,GAStBC,IAAQC,GAoERC,IAAUC,QACdH,EAAM,SAAS,KAAK,MAClB,SAASI,IACJ;GACC,OAAOA,EAAI;GACX,OAAOA,EAAI;GACX,OAAOA,EAAI;EACb,IACAA,CACN,CACF;E,kBAIEhB,EAAA,GAAAC,EAWaC,EAAAC,CAAA,GAXbC,EAWa,EAVX,eAAY,kBAAiB,GACrBQ,GAAK;GACZ,SAASE,EAAA;GACT,0BAAwBD,EAAA;GACxB,oBAAkBA,EAAA,WAAQ,kBAAA;GAC1B,uBAAkB,AAAAQ,EAAA,QAAA,MAAEtB,EAAAA,MAAK,qBAAsBwB,CAAM;E,iBAEtCrB,EAAAQ,CAAA,CAAK,CAAC,U;GAAU,MAAA;GAC9B,IAAAJ,QAAuB,CAAvBC,EAAuBe,EAAA,QAAA,SAAA,C"}

package/dist/components/PlDropdownRef/index.js CHANGED Viewed

	@@ -1 +1 @@
1	- ~~import~~ "./PlDropdownRef.js";
1	+ export { default as PlDropdownRef } from "./PlDropdownRef.js";