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

@milaboratories/uikit 2.16.0 → 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 (1369) hide show

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

@@ -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: () => [] },
@@ -242,7 +242,6 @@ var ce = ["tabindex"], le = { class: "pl-dropdown-multi__container" }, ue = { cl
 		])], 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.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";

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlEditableTitle.js","names":[],"sources":["../../../src/components/PlEditableTitle/PlEditableTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTransformedModel } from \"../../composition/useTransformedModel\";\nimport style from \"./pl-editable-title.module.scss\";\nimport { computed, onMounted, ref } from \"vue\";\n\nconst model = defineModel<string>();\n\nconst props = withDefaults(\n defineProps<{\n /*\n Standard input placeholder\n /\n placeholder?: string;\n /\n Any css `width` value (px, %), default is 80%\n /\n maxWidth?: string;\n /\n Fixed non-editable prefix\n /\n prefix?: string;\n /\n Max title length (default is 1000)\n /\n maxLength?: number;\n /\n Min title length\n /\n minLength?: number;\n /\n If true, input will be focused on mount\n /\n autofocus?: boolean;\n /\n A function that validates the input value.\n * @example\n * ```ts\n * validate: (v: string) => {\n * if (v.length < 3) {\n * throw Error('Title must be at least 3 characters');\n * }\n * }\n * ```\n */\n validate?: (v: string) => unknown;\n }>(),\n {\n placeholder: \"Title\",\n maxWidth: \"80%\",\n prefix: undefined,\n maxLength: 1000,\n minLength: undefined,\n validate: undefined,\n },\n);\n\nconst local = useTransformedModel(model, {\n update() {\n return false;\n },\n parse: (v): string => {\n if (typeof v !== \"string\") {\n throw Error(\"value should be a string\");\n }\n\n if (props.maxLength && v.length > props.maxLength) {\n throw Error(`Max title length is ${props.maxLength} characters`);\n }\n\n if (props.minLength && v.length < props.minLength) {\n throw Error(`Min title length is ${props.minLength} characters`);\n }\n\n if (typeof props.validate === \"function\") {\n props.validate(v);\n }\n\n return v.trim();\n },\n});\n\nconst inputRef = ref<HTMLInputElement>();\n\nconst computedStyle = computed(() => ({\n maxWidth: props.maxWidth ?? \"80%\",\n}));\n\nconst save = () => {\n model.value = local.value && !local.error ? local.value : model.value;\n local.reset();\n};\n\nonMounted(() => {\n if (props.autofocus) {\n inputRef.value?.focus();\n }\n});\n</script>\n\n<template>\n <div\n class=\"pl-editable-title\"\n :class=\"style.component\"\n :style=\"computedStyle\"\n data-testid=\"pl-editable-title\"\n >\n <div :class=\"style.container\" @click=\"() => inputRef?.focus()\">\n <span v-if=\"prefix\" data-testid=\"pl-editable-title-prefix\">{{ prefix.trim() }} </span>\n <input\n ref=\"inputRef\"\n v-model=\"local.value\"\n :placeholder=\"placeholder\"\n data-testid=\"pl-editable-title-input\"\n @focusout=\"save\"\n @keydown.escape=\"local.reset\"\n @keydown.enter=\"(ev) => (ev.target as HTMLInputElement)?.blur()\"\n />\n </div>\n <div v-if=\"local.error\" :class=\"style.error\" data-testid=\"pl-editable-title-error\">\n {{ local.error }}\n </div>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"PlEditableTitle.js","names":["_sfc_main","PlEditableTitle_vue_vue_type_script_setup_true_lang_default","PlEditableTitle_default"],"sources":["../../../src/components/PlEditableTitle/PlEditableTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTransformedModel } from \"../../composition/useTransformedModel\";\nimport style from \"./pl-editable-title.module.scss\";\nimport { computed, onMounted, ref } from \"vue\";\n\nconst model = defineModel<string>();\n\nconst props = withDefaults(\n defineProps<{\n /*\n Standard input placeholder\n /\n placeholder?: string;\n /\n Any css `width` value (px, %), default is 80%\n /\n maxWidth?: string;\n /\n Fixed non-editable prefix\n /\n prefix?: string;\n /\n Max title length (default is 1000)\n /\n maxLength?: number;\n /\n Min title length\n /\n minLength?: number;\n /\n If true, input will be focused on mount\n /\n autofocus?: boolean;\n /\n A function that validates the input value.\n * @example\n * ```ts\n * validate: (v: string) => {\n * if (v.length < 3) {\n * throw Error('Title must be at least 3 characters');\n * }\n * }\n * ```\n */\n validate?: (v: string) => unknown;\n }>(),\n {\n placeholder: \"Title\",\n maxWidth: \"80%\",\n prefix: undefined,\n maxLength: 1000,\n minLength: undefined,\n validate: undefined,\n },\n);\n\nconst local = useTransformedModel(model, {\n update() {\n return false;\n },\n parse: (v): string => {\n if (typeof v !== \"string\") {\n throw Error(\"value should be a string\");\n }\n\n if (props.maxLength && v.length > props.maxLength) {\n throw Error(`Max title length is ${props.maxLength} characters`);\n }\n\n if (props.minLength && v.length < props.minLength) {\n throw Error(`Min title length is ${props.minLength} characters`);\n }\n\n if (typeof props.validate === \"function\") {\n props.validate(v);\n }\n\n return v.trim();\n },\n});\n\nconst inputRef = ref<HTMLInputElement>();\n\nconst computedStyle = computed(() => ({\n maxWidth: props.maxWidth ?? \"80%\",\n}));\n\nconst save = () => {\n model.value = local.value && !local.error ? local.value : model.value;\n local.reset();\n};\n\nonMounted(() => {\n if (props.autofocus) {\n inputRef.value?.focus();\n }\n});\n</script>\n\n<template>\n <div\n class=\"pl-editable-title\"\n :class=\"style.component\"\n :style=\"computedStyle\"\n data-testid=\"pl-editable-title\"\n >\n <div :class=\"style.container\" @click=\"() => inputRef?.focus()\">\n <span v-if=\"prefix\" data-testid=\"pl-editable-title-prefix\">{{ prefix.trim() }} </span>\n <input\n ref=\"inputRef\"\n v-model=\"local.value\"\n :placeholder=\"placeholder\"\n data-testid=\"pl-editable-title-input\"\n @focusout=\"save\"\n @keydown.escape=\"local.reset\"\n @keydown.enter=\"(ev) => (ev.target as HTMLInputElement)?.blur()\"\n />\n </div>\n <div v-if=\"local.error\" :class=\"style.error\" data-testid=\"pl-editable-title-error\">\n {{ local.error }}\n </div>\n </div>\n</template>\n"],"mappings":""}

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

@@ -1,13 +1,13 @@
 import { useTransformedModel as e } from "../../composition/useTransformedModel.js";
 import t from "./pl-editable-title.module.js";
 import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, normalizeStyle as l, onMounted as u, openBlock as d, ref as f, toDisplayString as p, unref as m, useModel as h, vModelText as g, withDirectives as _, withKeys as v } from "vue";
-//#region src/components/PlEditableTitle/PlEditableTitle.vue?vue&type=script&setup=true&lang.ts
+// src/components/PlEditableTitle/PlEditableTitle.vue?vue&type=script&setup=true&lang.ts
 var y = {
 	key: 0,
 	"data-testid": "pl-editable-title-prefix"
-}, b = ["placeholder"], x = /* @__PURE__ */ o({
+}, b = ["placeholder"], x = /*@__PURE__*/ o({
 	__name: "PlEditableTitle",
-	props: /* @__PURE__ */ s({
+	props: /*@__PURE__*/ s({
 		placeholder: { default: "Title" },
 		maxWidth: { default: "80%" },
 		prefix: { default: void 0 },
@@ -61,7 +61,6 @@ var y = {
 		}, p(m(S).error), 3)) : r("", !0)], 6));
 	}
 });
-//#endregion
 export { x as default };
 //# sourceMappingURL=PlEditableTitle.vue2.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlEditableTitle.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlEditableTitle/PlEditableTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTransformedModel } from \"../../composition/useTransformedModel\";\nimport style from \"./pl-editable-title.module.scss\";\nimport { computed, onMounted, ref } from \"vue\";\n\nconst model = defineModel<string>();\n\nconst props = withDefaults(\n defineProps<{\n /*\n Standard input placeholder\n /\n placeholder?: string;\n /\n Any css `width` value (px, %), default is 80%\n /\n maxWidth?: string;\n /\n Fixed non-editable prefix\n /\n prefix?: string;\n /\n Max title length (default is 1000)\n /\n maxLength?: number;\n /\n Min title length\n /\n minLength?: number;\n /\n If true, input will be focused on mount\n /\n autofocus?: boolean;\n /\n A function that validates the input value.\n * @example\n * ```ts\n * validate: (v: string) => {\n * if (v.length < 3) {\n * throw Error('Title must be at least 3 characters');\n * }\n * }\n * ```\n */\n validate?: (v: string) => unknown;\n }>(),\n {\n placeholder: \"Title\",\n maxWidth: \"80%\",\n prefix: undefined,\n maxLength: 1000,\n minLength: undefined,\n validate: undefined,\n },\n);\n\nconst local = useTransformedModel(model, {\n update() {\n return false;\n },\n parse: (v): string => {\n if (typeof v !== \"string\") {\n throw Error(\"value should be a string\");\n }\n\n if (props.maxLength && v.length > props.maxLength) {\n throw Error(`Max title length is ${props.maxLength} characters`);\n }\n\n if (props.minLength && v.length < props.minLength) {\n throw Error(`Min title length is ${props.minLength} characters`);\n }\n\n if (typeof props.validate === \"function\") {\n props.validate(v);\n }\n\n return v.trim();\n },\n});\n\nconst inputRef = ref<HTMLInputElement>();\n\nconst computedStyle = computed(() => ({\n maxWidth: props.maxWidth ?? \"80%\",\n}));\n\nconst save = () => {\n model.value = local.value && !local.error ? local.value : model.value;\n local.reset();\n};\n\nonMounted(() => {\n if (props.autofocus) {\n inputRef.value?.focus();\n }\n});\n</script>\n\n<template>\n <div\n class=\"pl-editable-title\"\n :class=\"style.component\"\n :style=\"computedStyle\"\n data-testid=\"pl-editable-title\"\n >\n <div :class=\"style.container\" @click=\"() => inputRef?.focus()\">\n <span v-if=\"prefix\" data-testid=\"pl-editable-title-prefix\">{{ prefix.trim() }} </span>\n <input\n ref=\"inputRef\"\n v-model=\"local.value\"\n :placeholder=\"placeholder\"\n data-testid=\"pl-editable-title-input\"\n @focusout=\"save\"\n @keydown.escape=\"local.reset\"\n @keydown.enter=\"(ev) => (ev.target as HTMLInputElement)?.blur()\"\n />\n </div>\n <div v-if=\"local.error\" :class=\"style.error\" data-testid=\"pl-editable-title-error\">\n {{ local.error }}\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,~~IAAM~~,~~IAAQ~~,~~EAAmB~~,GAAA,~~aAAE~~,~~EAE7B~~,~~IAAQ~~,~~GAiDR~~,~~IAAQ~~,~~EAAoB~~,GAAO;GACvC,SAAS;~~AACP~~,~~WAAO;;GAET~~,QAAQ,MAAc;~~AACpB~~,~~QAAI~~,~~OAAO~~,KAAM,~~SACf~~,~~OAAM~~,MAAM,~~2BAA2B~~;~~AAGzC~~,~~QAAI~~,EAAM,~~aAAa~~,EAAE,~~SAAS~~,EAAM,~~UACtC~~,~~OAAM~~,MAAM,~~uBAAuB~~,EAAM,UAAU,~~aAAa~~;~~AAGlE~~,~~QAAI~~,EAAM,~~aAAa~~,EAAE,~~SAAS~~,EAAM,~~UACtC~~,~~OAAM~~,MAAM,~~uBAAuB~~,EAAM,UAAU,~~aAAa~~;~~AAOlE~~,~~WAJI~~,~~OAAO~~,EAAM,YAAa,~~cAC5B~~,EAAM,~~SAAS~~,~~EAAE~~,~~EAGZ~~,EAAE,~~MAAM;;GAElB~~,CAAC,~~EAEI~~,~~IAAW~~,~~GAAuB~~,~~EAElC~~,~~IAAgB~~,SAAgB,EACpC,~~UAAU~~,EAAM,YAAY,~~OAC7B~~,EAAE,~~EAEG~~,UAAa;~~AAEjB~~,~~GADA~~,EAAM,~~QAAQ~~,EAAM,SAAS,~~CAAC~~,EAAM,~~QAAQ~~,EAAM,~~QAAQ~~,EAAM,~~OAChE~~,EAAM,~~OAAO;;SAGf~~,QAAgB;~~AACd~~,~~GAAI~~,EAAM,~~aACR~~,EAAS,OAAO,~~OAAO~~;~~IAEzB~~,~~kBAIA~~,EAqBM,OAAA;GApBJ,~~OAAK~~,EAAA,CAAC,~~qBACE~~,~~EAAA~~,~~EAAK~~,CAAC,~~UAAS~~,CAAA;GACtB,~~OAAK~~,~~EAAE~~,EAAA,~~MAAa~~;GACrB,eAAY;~~MAEZ~~,EAWM,OAAA;GAXA,~~OAAK~~,~~EAAE~~,~~EAAA~~,~~EAAK~~,CAAC,~~UAAS~~;GAAG,SAAK,~~AAAA~~,EAAA,~~aAAQ~~,EAAA,OAAU,~~OAAK~~;~~MAC7C~~,EAAA,~~UAAA~~,~~GAAA~~,~~EAAZ~~,EAA2F,~~QAA3F~~,~~GAA2F~~,~~EAA7B~~,EAAA,OAAO,~~MAAI~~,CAAA,~~GAAK~~,QAAM,~~EAAA~~,~~IAAA~~,~~EAAA~~,~~IAAA~~,~~GAAA,EAAA,EACpF,~~EAQE,SAAA;~~YAPI~~;GAAJ,~~KAAI~~;~~4CACK~~,~~EAAK~~,CAAC,~~QAAK~~;GACnB,~~aAAa~~,EAAA;GACd,eAAY;GACX,~~YAAU~~;GACV,WAAO,~~CAAA~~,~~AAAA~~,~~EAAA~~,~~OAAA~~,~~GAAA~~,~~GAAA~~,~~MAAS~~,~~EAAA~~,~~EAAK~~,~~CAAC~~,~~SAAN~~,~~EAAA~~,~~EAAK,~~CAAC,MAAK,~~GAAA~~,~~EAAA~~,~~EAAA~~,CAAA,~~SAAA~~,CAAA,~~EAAA~~,~~AAAA~~,EAAA,~~OAAA~~,~~GACX~~,~~MAAQ~~,EAAG,QAA6B,~~MAAI~~,~~EAAA~~,CAAA,~~QAAA~~,CAAA,~~CAAA~~;~~wBALpD~~,~~EAAA~~,~~EAAK~~,~~CAAC~~,~~MAAK~~,CAAA,~~CAAA~~,~~CAAA~~,~~EAAA~~,~~EAAA~~,~~EAQb~~,~~EAAA~~,~~EAAK~~,CAAC,~~SAAA~~,~~GAAA~~,~~EAAjB~~,EAEM,OAAA;;GAFmB,~~OAAK~~,~~EAAE~~,~~EAAA~~,~~EAAK~~,CAAC,~~MAAK~~;GAAE,eAAY;~~OACpD~~,~~EAAA~~,~~EAAK~~,~~CAAC~~,~~MAAK~~,~~EAAA~~,~~EAAA~~,~~IAAA~~,~~EAAA,IAAA,~~GAAA,CAAA,~~EAAA,EAAA~~"}
1	+ {"version":3,"file":"PlEditableTitle.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","style","_normalizeStyle","_createElementVNode","_toDisplayString","_createCommentVNode","_withDirectives","_withKeys","_vModelText","pl_editable_title_module_default","_hoisted_1","_hoisted_2","PlEditableTitle_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","model","useModel","__props","props","local","useTransformedModel","v","inputRef","ref","computedStyle","computed","save","onMounted","openBlock","createElementBlock","normalizeClass","unref","normalizeStyle","createElementVNode","_cache","toDisplayString","createCommentVNode","withDirectives","$event","withKeys","args","ev","vModelText"],"sources":["../../../src/components/PlEditableTitle/PlEditableTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTransformedModel } from \"../../composition/useTransformedModel\";\nimport style from \"./pl-editable-title.module.scss\";\nimport { computed, onMounted, ref } from \"vue\";\n\nconst model = defineModel<string>();\n\nconst props = withDefaults(\n defineProps<{\n /*\n Standard input placeholder\n /\n placeholder?: string;\n /\n Any css `width` value (px, %), default is 80%\n /\n maxWidth?: string;\n /\n Fixed non-editable prefix\n /\n prefix?: string;\n /\n Max title length (default is 1000)\n /\n maxLength?: number;\n /\n Min title length\n /\n minLength?: number;\n /\n If true, input will be focused on mount\n /\n autofocus?: boolean;\n /\n A function that validates the input value.\n * @example\n * ```ts\n * validate: (v: string) => {\n * if (v.length < 3) {\n * throw Error('Title must be at least 3 characters');\n * }\n * }\n * ```\n */\n validate?: (v: string) => unknown;\n }>(),\n {\n placeholder: \"Title\",\n maxWidth: \"80%\",\n prefix: undefined,\n maxLength: 1000,\n minLength: undefined,\n validate: undefined,\n },\n);\n\nconst local = useTransformedModel(model, {\n update() {\n return false;\n },\n parse: (v): string => {\n if (typeof v !== \"string\") {\n throw Error(\"value should be a string\");\n }\n\n if (props.maxLength && v.length > props.maxLength) {\n throw Error(`Max title length is ${props.maxLength} characters`);\n }\n\n if (props.minLength && v.length < props.minLength) {\n throw Error(`Min title length is ${props.minLength} characters`);\n }\n\n if (typeof props.validate === \"function\") {\n props.validate(v);\n }\n\n return v.trim();\n },\n});\n\nconst inputRef = ref<HTMLInputElement>();\n\nconst computedStyle = computed(() => ({\n maxWidth: props.maxWidth ?? \"80%\",\n}));\n\nconst save = () => {\n model.value = local.value && !local.error ? local.value : model.value;\n local.reset();\n};\n\nonMounted(() => {\n if (props.autofocus) {\n inputRef.value?.focus();\n }\n});\n</script>\n\n<template>\n <div\n class=\"pl-editable-title\"\n :class=\"style.component\"\n :style=\"computedStyle\"\n data-testid=\"pl-editable-title\"\n >\n <div :class=\"style.container\" @click=\"() => inputRef?.focus()\">\n <span v-if=\"prefix\" data-testid=\"pl-editable-title-prefix\">{{ prefix.trim() }} </span>\n <input\n ref=\"inputRef\"\n v-model=\"local.value\"\n :placeholder=\"placeholder\"\n data-testid=\"pl-editable-title-input\"\n @focusout=\"save\"\n @keydown.escape=\"local.reset\"\n @keydown.enter=\"(ev) => (ev.target as HTMLInputElement)?.blur()\"\n />\n </div>\n <div v-if=\"local.error\" :class=\"style.error\" data-testid=\"pl-editable-title-error\">\n {{ local.error }}\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,IAAMmB,IAAQnB,EAAmBqB,GAAA,YAAC,GAE5BC,IAAQD,GAiDRE,IAAQC,EAAoBL,GAAO;GACvC,SAAS;IACP,OAAO;GACT;GACA,QAAQ,MAAc;IACpB,IAAI,OAAOM,KAAM,UACf,MAAM,MAAM,0BAA0B;IAGxC,IAAIH,EAAM,aAAaG,EAAE,SAASH,EAAM,WACtC,MAAM,MAAM,uBAAuBA,EAAM,UAAU,YAAY;IAGjE,IAAIA,EAAM,aAAaG,EAAE,SAASH,EAAM,WACtC,MAAM,MAAM,uBAAuBA,EAAM,UAAU,YAAY;IAOjE,OAJI,OAAOA,EAAM,YAAa,cAC5BA,EAAM,SAASG,CAAC,GAGXA,EAAE,KAAK;GAChB;EACF,CAAC,GAEKC,IAAWC,EAAsB,GAEjCC,IAAgBC,SAAgB,EACpC,UAAUP,EAAM,YAAY,MAC9B,EAAE,GAEIQ,UAAa;GAEjB,AADA,EAAM,QAAQP,EAAM,SAAS,CAACA,EAAM,QAAQA,EAAM,QAAQJ,EAAM,OAChEI,EAAM,MAAM;EACd;E,OAEAQ,QAAgB;GACd,AAAIT,EAAM,aACRI,EAAS,OAAO,MAAM;EAE1B,CAAC,I,UAICzB,EAAA,GAAAC,EAqBM,OAAA;GApBJ,OAAKC,EAAA,CAAC,qBACEC,EAAAC,CAAA,CAAK,CAAC,SAAS,CAAA;GACtB,OAAKC,EAAEsB,EAAA,KAAa;GACrB,eAAY;E,IAEZrB,EAWM,OAAA;GAXA,OAAKJ,EAAEC,EAAAC,CAAA,CAAK,CAAC,SAAS;GAAG,SAAK,AAAAiC,EAAA,aAAQZ,EAAA,OAAU,MAAK;E,IAC7CL,EAAA,UAAZpB,EAAA,GAAAC,EAA2F,QAA3FY,GAA2FN,EAA7Ba,EAAA,OAAO,KAAI,CAAA,IAAK,QAAM,CAAA,K,WACpFX,EAAAH,EAQE,SAAA;GAPI,SAAA;GAAJ,KAAImB;GACK,uBAAA,AAAAY,EAAA,QAAA,MAAA,EAAAf,CAAA,CAAK,CAAC,QAAKmB;GACnB,aAAarB,EAAA;GACd,eAAY;GACX,YAAUS;GACV,WAAO,C,YAAS,GAAAc,MAAAxC,EAAAmB,CAAA,CAAK,CAAC,SAANnB,EAAAmB,CAAA,CAAK,CAAC,MAAK,GAAAqB,CAAA,GAAA,CAAA,QAAA,CAAA,GACX,AAAAN,EAAA,OAAA3B,GAAA,MAAQkC,EAAG,QAA6B,KAAI,GAAA,CAAA,OAAA,CAAA,C;E,kBALpD,CAAAjC,GAAAR,EAAAmB,CAAA,CAAK,CAAC,KAAK,C,SAQbnB,EAAAmB,CAAA,CAAK,CAAC,SAAjBtB,EAAA,GAAAC,EAEM,OAAA;;GAFmB,OAAKC,EAAEC,EAAAC,CAAA,CAAK,CAAC,KAAK;GAAE,eAAY;EACpD,GAAAG,EAAAJ,EAAAmB,CAAA,CAAK,CAAC,KAAK,GAAA,CAAA,K"}

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

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

package/dist/components/PlEditableTitle/pl-editable-title.module.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import './pl-editable-title.css';var e = {
-	component: "_component_1w6b3_1",
-	container: "_container_1w6b3_15",
-	error: "_error_1w6b3_69"
+import './pl-editable-title.css';// src/components/PlEditableTitle/pl-editable-title.module.scss
+var e = "_component_1w6b3_1", t = "_container_1w6b3_15", n = "_error_1w6b3_69", r = {
+	component: e,
+	container: t,
+	error: n
 };
-//#endregion
-export { e as default };
+export { e as component, t as container, r as default, n as error };
 //# sourceMappingURL=pl-editable-title.module.js.map

package/dist/components/PlEditableTitle/pl-editable-title.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pl-editable-title.module.js","names":[],"sources":["../../../src/components/PlEditableTitle/pl-editable-title.module.scss"],"sourcesContent":["@use \"../../assets/mixins.scss\" as ;\n\n.component {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0;\n\n --mask-icon-bg-color: transparent;\n --mask-size: 24px;\n\n &:hover {\n --mask-icon-bg-color: var(--ic-02);\n }\n\n &:focus-within:not(&:hover) {\n --mask-icon-bg-color: transparent;\n }\n\n .container {\n position: relative;\n display: flex;\n flex-direction: row;\n gap: 0;\n align-items: center;\n margin-right: calc(var(--mask-size));\n\n span {\n font-size: 28px;\n font-weight: 500;\n line-height: 32px;\n letter-spacing: -0.56px;\n white-space: nowrap;\n }\n\n input {\n outline: none;\n border: none;\n text-overflow: ellipsis;\n cursor: text;\n field-sizing: content;\n font-size: 28px;\n font-weight: 500;\n line-height: 38px;\n letter-spacing: -0.56px;\n padding-top: 4px;\n padding-bottom: 4px;\n padding-right: 4px;\n margin: 0;\n font-family: var(--font-family-base);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n &::placeholder {\n color: var(--txt-mask);\n }\n }\n\n &::before {\n content: \"\";\n @include mask-var(url(../../assets/icons/icon-assets-min/24_edit.svg));\n position: absolute;\n right: calc((var(--mask-size)) -1);\n bottom: 6px;\n background-color: var(--mask-icon-bg-color);\n cursor: pointer;\n }\n }\n\n .error {\n position: absolute;\n bottom: -4px;\n transform: translateY(100%);\n white-space: nowrap;\n @include field-error();\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"pl-editable-title.module.js","names":["component","container","error","pl_editable_title_module_default"],"sources":["../../../src/components/PlEditableTitle/pl-editable-title.module.scss"],"sourcesContent":["@use \"../../assets/mixins.scss\" as ;\n\n.component {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0;\n\n --mask-icon-bg-color: transparent;\n --mask-size: 24px;\n\n &:hover {\n --mask-icon-bg-color: var(--ic-02);\n }\n\n &:focus-within:not(&:hover) {\n --mask-icon-bg-color: transparent;\n }\n\n .container {\n position: relative;\n display: flex;\n flex-direction: row;\n gap: 0;\n align-items: center;\n margin-right: calc(var(--mask-size));\n\n span {\n font-size: 28px;\n font-weight: 500;\n line-height: 32px;\n letter-spacing: -0.56px;\n white-space: nowrap;\n }\n\n input {\n outline: none;\n border: none;\n text-overflow: ellipsis;\n cursor: text;\n field-sizing: content;\n font-size: 28px;\n font-weight: 500;\n line-height: 38px;\n letter-spacing: -0.56px;\n padding-top: 4px;\n padding-bottom: 4px;\n padding-right: 4px;\n margin: 0;\n font-family: var(--font-family-base);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n &::placeholder {\n color: var(--txt-mask);\n }\n }\n\n &::before {\n content: \"\";\n @include mask-var(url(../../assets/icons/icon-assets-min/24_edit.svg));\n position: absolute;\n right: calc((var(--mask-size)) -1);\n bottom: 6px;\n background-color: var(--mask-icon-bg-color);\n cursor: pointer;\n }\n }\n\n .error {\n position: absolute;\n bottom: -4px;\n transform: translateY(100%);\n white-space: nowrap;\n @include field-error();\n }\n}\n"],"mappings":""}

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

@@ -1,8 +1,7 @@
 import e from "../../_virtual/_plugin-vue_export-helper.js";
 import t from "./PlElementList.vue2.js";
 import n from "./PlElementList.style.js";
-var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
-//#endregion
+var r = /*#__PURE__*/ e(t, [["__cssModules", { $style: n }]]);
 export { r as default };
 //# sourceMappingURL=PlElementList.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlElementList.js","names":[],"sources":["../../../src/components/PlElementList/PlElementList.vue"],"sourcesContent":["<script\n generic=\"T extends unknown = unknown, K extends number \| string = number \| string\"\n lang=\"ts\"\n setup\n>\nimport { isFunction, shallowHash } from \"@milaboratories/helpers\";\nimport { useSortable } from \"@vueuse/integrations/useSortable\";\nimport { type SortableEvent } from \"sortablejs\";\nimport type { ShallowRef } from \"vue\";\nimport { computed, shallowRef, watch } from \"vue\";\nimport PlElementListItem from \"./PlElementListItem.vue\";\nimport { moveElements } from \"./utils.ts\";\n\ntype ItemEntry = [idx: number, item: T];\n\nconst itemsRef = defineModel<T[]>(\"items\", { required: true });\n\nconst props = withDefaults(\n defineProps<{\n getItemKey?: (item: T, index: number) => K;\n\n itemClass?: string \| string[] \| ((item: T, index: number) => string \| string[]);\n itemClassTitle?: string \| string[] \| ((item: T, index: number) => string \| string[]);\n itemClassBefore?: string \| string[] \| ((item: T, index: number) => string \| string[]);\n itemClassAfter?: string \| string[] \| ((item: T, index: number) => string \| string[]);\n itemClassContent?: string \| string[] \| ((item: T, index: number) => string \| string[]);\n isActive?: (item: T, index: number) => boolean;\n\n disableDragging?: boolean;\n isDraggable?: (item: T, index: number) => boolean;\n onDragEnd?: (oldIndex: number, newIndex: number) => void \| boolean;\n onSort?: (oldIndex: number, newIndex: number) => void \| boolean;\n\n disableRemoving?: boolean;\n isRemovable?: (item: T, index: number) => boolean;\n onRemove?: (item: T, index: number) => void \| boolean;\n\n disableExpanding?: boolean;\n isExpandable?: (item: T, index: number) => boolean;\n isExpanded?: (item: T, index: number) => boolean;\n onExpand?: (item: T, index: number) => unknown;\n\n disableToggling?: boolean;\n isToggable?: (item: T, index: number) => boolean;\n isToggled?: (item: T, index: number) => boolean;\n onToggle?: (item: T, index: number) => unknown;\n\n disablePinning?: boolean;\n isPinnable?: (item: T, index: number) => boolean;\n isPinned?: (item: T, index: number) => boolean;\n onPin?: (item: T, index: number) => void \| boolean;\n }>(),\n {\n getItemKey: (item: T) => JSON.stringify(item) as K,\n\n itemClass: undefined,\n itemClassTitle: undefined,\n itemClassContent: undefined,\n itemClassBefore: undefined,\n itemClassAfter: undefined,\n isActive: undefined,\n\n disableDragging: undefined,\n isDraggable: undefined,\n onDragEnd: undefined,\n onSort: undefined,\n\n disableRemoving: undefined,\n isRemovable: undefined,\n onRemove: undefined,\n\n disableExpanding: undefined,\n isExpandable: undefined,\n isExpanded: undefined,\n onExpand: undefined,\n\n disableToggling: undefined,\n isToggable: undefined,\n isToggled: undefined,\n onToggle: undefined,\n\n disablePinning: undefined,\n isPinnable: undefined,\n isPinned: undefined,\n onPin: undefined,\n },\n);\n\nconst emits = defineEmits<{\n (e: \"itemClick\", item: T): void;\n}>();\n\nconst slots = defineSlots<{\n [\"item-title\"]: (props: { item: T; index: number }) => unknown;\n [\"item-content\"]?: (props: { item: T; index: number }) => unknown;\n [\"item-before\"]?: (props: { item: T; index: number }) => unknown;\n [\"item-after\"]?: (props: { item: T; index: number }) => unknown;\n}>();\n\nconst dndSortingEnabled = computed((): boolean => {\n return props.disableDragging !== true;\n});\n\nconst pinnedItemsRef = computed(() =>\n itemsRef.value\n .map((item, index) => [index, item] as ItemEntry)\n .filter(([index, item]) => isPinnedItem(item, index)),\n);\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() =>\n itemsRef.value\n .map((item, index) => [index, item] as ItemEntry)\n .filter(([index, item]) => !isPinnedItem(item, index)),\n);\nconst hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);\n\nconst domProjectionItemsRef = shallowRef<undefined \| T[]>();\nconst pinnedContainerRef = shallowRef<HTMLElement>();\nconst unpinnedContainerRef = shallowRef<HTMLElement>();\n\n// version fix problem with sync between data and rendered values\nconst getKey = (entry: ItemEntry) => {\n return `${versionRef.value}-${props.getItemKey(entry[1], entry[0])}`;\n};\nconst pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));\nconst unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));\n\n// version fix problem with sync between data and rendered values when items have been changed\nconst versionRef = computed<number>((oldVersion) => {\n const currentKeys = itemsRef.value.map(props.getItemKey);\n\n if (domProjectionItemsRef.value === undefined) return oldVersion ?? shallowHash(...currentKeys);\n if (currentKeys.length !== domProjectionItemsRef.value.length) return shallowHash(...currentKeys);\n\n const domProjectionKeys = domProjectionItemsRef.value.map(props.getItemKey);\n const domProjectionKeysSet = new Set(domProjectionKeys);\n\n for (let i = 0; i < currentKeys.length; i++) {\n const hasInconsistentPosition =\n domProjectionKeysSet.has(currentKeys[i]) && domProjectionKeys[i] !== currentKeys[i];\n\n if (hasInconsistentPosition) {\n return shallowHash(...currentKeys);\n }\n }\n\n return oldVersion ?? shallowHash(...currentKeys);\n});\n\ncreateSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);\ncreateSortable(\n hasUnpinnedItems,\n unpinnedContainerRef,\n unpinnedItemsRef,\n () => pinnedItemsRef.value.length,\n);\n\nfunction createSortable(\n toggler: ShallowRef<boolean>,\n elRef: ShallowRef<undefined \| HTMLElement>,\n itemsRef: ShallowRef<ItemEntry[]>,\n getOffset: () => number,\n) {\n const sortable = useSortable(elRef, itemsRef, {\n handle: `[data-draggable=\"true\"]`,\n animation: 150,\n forceFallback: true,\n fallbackOnBody: true,\n scrollSensitivity: 80,\n forceAutoScrollFallback: true,\n onUpdate: (evt: SortableEvent) => {\n if (evt.oldIndex == null \|\| evt.newIndex == null) {\n throw new Error(\"Sortable event has no index\");\n }\n if (props.onDragEnd?.(evt.oldIndex, evt.newIndex) !== false) {\n moveItems(getOffset() + evt.oldIndex, getOffset() + evt.newIndex, true);\n }\n },\n });\n watch(\n [elRef, () => props.disableDragging, toggler],\n ([elRef, disabled, on]) => {\n if (!elRef \|\| disabled \|\| !on) {\n sortable.stop();\n } else {\n sortable.start();\n }\n },\n { immediate: true },\n );\n\n return sortable;\n}\n\nfunction moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean) {\n if (oldIndex === newIndex) return;\n\n if (afterUpdateDom) {\n domProjectionItemsRef.value = moveElements(itemsRef.value.slice(), oldIndex, newIndex);\n }\n\n const preventDefault = props.onSort?.(oldIndex, newIndex) === false;\n\n if (!preventDefault) {\n itemsRef.value = moveElements(itemsRef.value, oldIndex, newIndex);\n }\n}\n\nfunction isActiveItem(item: T, index: number): boolean {\n return props.isActive?.(item, index) ?? false;\n}\n\nfunction isDraggableItem(item: T, index: number): boolean {\n if (props.disableDragging === true) return false;\n return props.isDraggable?.(item, index) ?? true;\n}\n\nfunction isRemovableItem(item: T, index: number): boolean {\n if (props.disableRemoving === true) return false;\n return props.isRemovable?.(item, index) ?? true;\n}\n\nfunction isToggableItem(item: T, index: number): boolean {\n if (props.disableToggling === true) return false;\n return (\n props.isToggable?.(item, index) ?? (isFunction(props.isToggled) \|\| isFunction(props.onToggle))\n );\n}\n\nfunction isToggledItem(item: T, index: number): boolean {\n return props.isToggled?.(item, index) ?? false;\n}\n\nfunction isPinnableItem(item: T, index: number): boolean {\n if (props.disablePinning === true) return false;\n return props.isPinnable?.(item, index) ?? (isFunction(props.isPinned) \|\| isFunction(props.onPin));\n}\n\nfunction isPinnedItem(item: T, index: number): boolean {\n return props.isPinned?.(item, index) ?? false;\n}\n\nfunction isExpandableItem(item: T, index: number): boolean {\n if (props.disableExpanding === true) return false;\n return (\n props.isExpandable?.(item, index) ??\n (isFunction(props.isExpanded) \|\| isFunction(props.onExpand))\n );\n}\n\nfunction isExpandedItem(item: T, index: number): boolean {\n return props.isExpanded?.(item, index) ?? false;\n}\n\nfunction handleExpand(item: T, index: number) {\n props.onExpand?.(item, index);\n}\n\nfunction handleToggle(item: T, index: number) {\n props.onToggle?.(item, index);\n}\n\nfunction handlePin(item: T, index: number) {\n if (index === -1) {\n throw new Error(\"Pinnable item not found\");\n }\n\n const alreadyPinned =\n pinnedItemsRef.value.findIndex(([originalIndex]) => originalIndex === index) !== -1;\n\n if (props.onPin?.(item, index) === false) return;\n\n moveItems(index, pinnedItemsRef.value.length + (alreadyPinned ? 0 : -1), false);\n}\n\nfunction handleRemove(item: T, index: number) {\n if (props.onRemove?.(item, index) === false) return;\n itemsRef.value = [...itemsRef.value.slice(0, index), ...itemsRef.value.slice(index + 1)];\n}\n\nfunction getClassFunction(\n propsItemClass: string \| string[] \| ((item: T, index: number) => string \| string[]) \| undefined,\n): (item: T, index: number) => null \| string \| string[] {\n return (item: T, index: number): null \| string \| string[] => {\n if (typeof propsItemClass === \"function\") {\n return propsItemClass(item, index);\n }\n return propsItemClass ?? null;\n };\n}\nconst getItemClass = getClassFunction(props.itemClass);\nconst getItemClassTitle = getClassFunction(props.itemClassTitle);\nconst getItemClassContent = getClassFunction(props.itemClassContent);\nconst getItemClassBefore = getClassFunction(props.itemClassBefore);\nconst getItemClassAfter = getClassFunction(props.itemClassAfter);\n</script>\n\n<template>\n <div data-testid=\"pl-element-list\" :class=\"$style.root\">\n <div ref=\"pinnedContainerRef\" data-testid=\"pl-element-list-pinned\" :class=\"$style.list\">\n <PlElementListItem\n v-for=\"([originalIndex, item], pinnedIndex) in pinnedItemsRef\"\n :key=\"pinnedKeysRef[pinnedIndex]\"\n :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n :titleClass=\"getItemClassTitle(item, originalIndex)\"\n :contentClass=\"getItemClassContent(item, originalIndex)\"\n :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n :afterClass=\"getItemClassAfter(item, originalIndex)\"\n :index=\"originalIndex\"\n :item=\"item\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActiveItem(item, originalIndex)\"\n :isDraggable=\"isDraggableItem(item, originalIndex)\"\n :isRemovable=\"isRemovableItem(item, originalIndex)\"\n :isToggable=\"isToggableItem(item, originalIndex)\"\n :isToggled=\"isToggledItem(item, originalIndex)\"\n :isPinnable=\"isPinnableItem(item, originalIndex)\"\n :isPinned=\"true\"\n :isExpandable=\"isExpandableItem(item, originalIndex)\"\n :isExpanded=\"isExpandedItem(item, originalIndex)\"\n @click=\"emits('itemClick', item)\"\n @remove=\"handleRemove\"\n @toggle=\"handleToggle\"\n @pin=\"handlePin\"\n @expand=\"handleExpand\"\n >\n <template v-if=\"slots['item-before']\" #before=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-before\" />\n </template>\n <template #title=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n </template>\n <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n </template>\n <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n </template>\n </PlElementListItem>\n </div>\n <div\n v-if=\"hasUnpinnedItems\"\n ref=\"unpinnedContainerRef\"\n data-testid=\"pl-element-list-unpinned\"\n :class=\"$style.list\"\n >\n <PlElementListItem\n v-for=\"([originalIndex, item], unpinnedIndex) in unpinnedItemsRef\"\n :key=\"unpinnedKeysRef[unpinnedIndex]\"\n :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n :titleClass=\"getItemClassTitle(item, originalIndex)\"\n :contentClass=\"getItemClassContent(item, originalIndex)\"\n :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n :afterClass=\"getItemClassAfter(item, originalIndex)\"\n :index=\"originalIndex\"\n :item=\"item\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActiveItem(item, originalIndex)\"\n :isDraggable=\"isDraggableItem(item, originalIndex)\"\n :isRemovable=\"isRemovableItem(item, originalIndex)\"\n :isToggable=\"isToggableItem(item, originalIndex)\"\n :isToggled=\"isToggledItem(item, originalIndex)\"\n :isPinnable=\"isPinnableItem(item, originalIndex)\"\n :isPinned=\"false\"\n :isExpandable=\"isExpandableItem(item, originalIndex)\"\n :isExpanded=\"isExpandedItem(item, originalIndex)\"\n @click=\"emits('itemClick', item)\"\n @remove=\"handleRemove\"\n @toggle=\"handleToggle\"\n @pin=\"handlePin\"\n @expand=\"handleExpand\"\n >\n <template #title=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n </template>\n <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n </template>\n <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n </template>\n </PlElementListItem>\n </div>\n </div>\n</template>\n\n<style module>\n.root,\n.list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n min-width: 180px;\n}\n\n.item {\n width: 100%;\n}\n\n:global(.sortable-ghost) {\n visibility: hidden;\n}\n:global(.sortable-drag) {\n opacity: 1;\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"PlElementList.js","names":["style0","_sfc_main","_plugin_vue_export_helper_default","PlElementList_vue_vue_type_script_setup_true_lang_default","PlElementList_vue_vue_type_style_index_0_lang_module_default","PlElementList_default","\"$style\""],"sources":["../../../src/components/PlElementList/PlElementList.vue"],"sourcesContent":["<script\n generic=\"T extends unknown = unknown, K extends number \| string = number \| string\"\n lang=\"ts\"\n setup\n>\nimport { isFunction, shallowHash } from \"@milaboratories/helpers\";\nimport { useSortable } from \"@vueuse/integrations/useSortable\";\nimport { type SortableEvent } from \"sortablejs\";\nimport type { ShallowRef } from \"vue\";\nimport { computed, shallowRef, watch } from \"vue\";\nimport PlElementListItem from \"./PlElementListItem.vue\";\nimport { moveElements } from \"./utils.ts\";\n\ntype ItemEntry = [idx: number, item: T];\n\nconst itemsRef = defineModel<T[]>(\"items\", { required: true });\n\nconst props = withDefaults(\n defineProps<{\n getItemKey?: (item: T, index: number) => K;\n\n itemClass?: string \| string[] \| ((item: T, index: number) => string \| string[]);\n itemClassTitle?: string \| string[] \| ((item: T, index: number) => string \| string[]);\n itemClassBefore?: string \| string[] \| ((item: T, index: number) => string \| string[]);\n itemClassAfter?: string \| string[] \| ((item: T, index: number) => string \| string[]);\n itemClassContent?: string \| string[] \| ((item: T, index: number) => string \| string[]);\n isActive?: (item: T, index: number) => boolean;\n\n disableDragging?: boolean;\n isDraggable?: (item: T, index: number) => boolean;\n onDragEnd?: (oldIndex: number, newIndex: number) => void \| boolean;\n onSort?: (oldIndex: number, newIndex: number) => void \| boolean;\n\n disableRemoving?: boolean;\n isRemovable?: (item: T, index: number) => boolean;\n onRemove?: (item: T, index: number) => void \| boolean;\n\n disableExpanding?: boolean;\n isExpandable?: (item: T, index: number) => boolean;\n isExpanded?: (item: T, index: number) => boolean;\n onExpand?: (item: T, index: number) => unknown;\n\n disableToggling?: boolean;\n isToggable?: (item: T, index: number) => boolean;\n isToggled?: (item: T, index: number) => boolean;\n onToggle?: (item: T, index: number) => unknown;\n\n disablePinning?: boolean;\n isPinnable?: (item: T, index: number) => boolean;\n isPinned?: (item: T, index: number) => boolean;\n onPin?: (item: T, index: number) => void \| boolean;\n }>(),\n {\n getItemKey: (item: T) => JSON.stringify(item) as K,\n\n itemClass: undefined,\n itemClassTitle: undefined,\n itemClassContent: undefined,\n itemClassBefore: undefined,\n itemClassAfter: undefined,\n isActive: undefined,\n\n disableDragging: undefined,\n isDraggable: undefined,\n onDragEnd: undefined,\n onSort: undefined,\n\n disableRemoving: undefined,\n isRemovable: undefined,\n onRemove: undefined,\n\n disableExpanding: undefined,\n isExpandable: undefined,\n isExpanded: undefined,\n onExpand: undefined,\n\n disableToggling: undefined,\n isToggable: undefined,\n isToggled: undefined,\n onToggle: undefined,\n\n disablePinning: undefined,\n isPinnable: undefined,\n isPinned: undefined,\n onPin: undefined,\n },\n);\n\nconst emits = defineEmits<{\n (e: \"itemClick\", item: T): void;\n}>();\n\nconst slots = defineSlots<{\n [\"item-title\"]: (props: { item: T; index: number }) => unknown;\n [\"item-content\"]?: (props: { item: T; index: number }) => unknown;\n [\"item-before\"]?: (props: { item: T; index: number }) => unknown;\n [\"item-after\"]?: (props: { item: T; index: number }) => unknown;\n}>();\n\nconst dndSortingEnabled = computed((): boolean => {\n return props.disableDragging !== true;\n});\n\nconst pinnedItemsRef = computed(() =>\n itemsRef.value\n .map((item, index) => [index, item] as ItemEntry)\n .filter(([index, item]) => isPinnedItem(item, index)),\n);\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() =>\n itemsRef.value\n .map((item, index) => [index, item] as ItemEntry)\n .filter(([index, item]) => !isPinnedItem(item, index)),\n);\nconst hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);\n\nconst domProjectionItemsRef = shallowRef<undefined \| T[]>();\nconst pinnedContainerRef = shallowRef<HTMLElement>();\nconst unpinnedContainerRef = shallowRef<HTMLElement>();\n\n// version fix problem with sync between data and rendered values\nconst getKey = (entry: ItemEntry) => {\n return `${versionRef.value}-${props.getItemKey(entry[1], entry[0])}`;\n};\nconst pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));\nconst unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));\n\n// version fix problem with sync between data and rendered values when items have been changed\nconst versionRef = computed<number>((oldVersion) => {\n const currentKeys = itemsRef.value.map(props.getItemKey);\n\n if (domProjectionItemsRef.value === undefined) return oldVersion ?? shallowHash(...currentKeys);\n if (currentKeys.length !== domProjectionItemsRef.value.length) return shallowHash(...currentKeys);\n\n const domProjectionKeys = domProjectionItemsRef.value.map(props.getItemKey);\n const domProjectionKeysSet = new Set(domProjectionKeys);\n\n for (let i = 0; i < currentKeys.length; i++) {\n const hasInconsistentPosition =\n domProjectionKeysSet.has(currentKeys[i]) && domProjectionKeys[i] !== currentKeys[i];\n\n if (hasInconsistentPosition) {\n return shallowHash(...currentKeys);\n }\n }\n\n return oldVersion ?? shallowHash(...currentKeys);\n});\n\ncreateSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);\ncreateSortable(\n hasUnpinnedItems,\n unpinnedContainerRef,\n unpinnedItemsRef,\n () => pinnedItemsRef.value.length,\n);\n\nfunction createSortable(\n toggler: ShallowRef<boolean>,\n elRef: ShallowRef<undefined \| HTMLElement>,\n itemsRef: ShallowRef<ItemEntry[]>,\n getOffset: () => number,\n) {\n const sortable = useSortable(elRef, itemsRef, {\n handle: `[data-draggable=\"true\"]`,\n animation: 150,\n forceFallback: true,\n fallbackOnBody: true,\n scrollSensitivity: 80,\n forceAutoScrollFallback: true,\n onUpdate: (evt: SortableEvent) => {\n if (evt.oldIndex == null \|\| evt.newIndex == null) {\n throw new Error(\"Sortable event has no index\");\n }\n if (props.onDragEnd?.(evt.oldIndex, evt.newIndex) !== false) {\n moveItems(getOffset() + evt.oldIndex, getOffset() + evt.newIndex, true);\n }\n },\n });\n watch(\n [elRef, () => props.disableDragging, toggler],\n ([elRef, disabled, on]) => {\n if (!elRef \|\| disabled \|\| !on) {\n sortable.stop();\n } else {\n sortable.start();\n }\n },\n { immediate: true },\n );\n\n return sortable;\n}\n\nfunction moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean) {\n if (oldIndex === newIndex) return;\n\n if (afterUpdateDom) {\n domProjectionItemsRef.value = moveElements(itemsRef.value.slice(), oldIndex, newIndex);\n }\n\n const preventDefault = props.onSort?.(oldIndex, newIndex) === false;\n\n if (!preventDefault) {\n itemsRef.value = moveElements(itemsRef.value, oldIndex, newIndex);\n }\n}\n\nfunction isActiveItem(item: T, index: number): boolean {\n return props.isActive?.(item, index) ?? false;\n}\n\nfunction isDraggableItem(item: T, index: number): boolean {\n if (props.disableDragging === true) return false;\n return props.isDraggable?.(item, index) ?? true;\n}\n\nfunction isRemovableItem(item: T, index: number): boolean {\n if (props.disableRemoving === true) return false;\n return props.isRemovable?.(item, index) ?? true;\n}\n\nfunction isToggableItem(item: T, index: number): boolean {\n if (props.disableToggling === true) return false;\n return (\n props.isToggable?.(item, index) ?? (isFunction(props.isToggled) \|\| isFunction(props.onToggle))\n );\n}\n\nfunction isToggledItem(item: T, index: number): boolean {\n return props.isToggled?.(item, index) ?? false;\n}\n\nfunction isPinnableItem(item: T, index: number): boolean {\n if (props.disablePinning === true) return false;\n return props.isPinnable?.(item, index) ?? (isFunction(props.isPinned) \|\| isFunction(props.onPin));\n}\n\nfunction isPinnedItem(item: T, index: number): boolean {\n return props.isPinned?.(item, index) ?? false;\n}\n\nfunction isExpandableItem(item: T, index: number): boolean {\n if (props.disableExpanding === true) return false;\n return (\n props.isExpandable?.(item, index) ??\n (isFunction(props.isExpanded) \|\| isFunction(props.onExpand))\n );\n}\n\nfunction isExpandedItem(item: T, index: number): boolean {\n return props.isExpanded?.(item, index) ?? false;\n}\n\nfunction handleExpand(item: T, index: number) {\n props.onExpand?.(item, index);\n}\n\nfunction handleToggle(item: T, index: number) {\n props.onToggle?.(item, index);\n}\n\nfunction handlePin(item: T, index: number) {\n if (index === -1) {\n throw new Error(\"Pinnable item not found\");\n }\n\n const alreadyPinned =\n pinnedItemsRef.value.findIndex(([originalIndex]) => originalIndex === index) !== -1;\n\n if (props.onPin?.(item, index) === false) return;\n\n moveItems(index, pinnedItemsRef.value.length + (alreadyPinned ? 0 : -1), false);\n}\n\nfunction handleRemove(item: T, index: number) {\n if (props.onRemove?.(item, index) === false) return;\n itemsRef.value = [...itemsRef.value.slice(0, index), ...itemsRef.value.slice(index + 1)];\n}\n\nfunction getClassFunction(\n propsItemClass: string \| string[] \| ((item: T, index: number) => string \| string[]) \| undefined,\n): (item: T, index: number) => null \| string \| string[] {\n return (item: T, index: number): null \| string \| string[] => {\n if (typeof propsItemClass === \"function\") {\n return propsItemClass(item, index);\n }\n return propsItemClass ?? null;\n };\n}\nconst getItemClass = getClassFunction(props.itemClass);\nconst getItemClassTitle = getClassFunction(props.itemClassTitle);\nconst getItemClassContent = getClassFunction(props.itemClassContent);\nconst getItemClassBefore = getClassFunction(props.itemClassBefore);\nconst getItemClassAfter = getClassFunction(props.itemClassAfter);\n</script>\n\n<template>\n <div data-testid=\"pl-element-list\" :class=\"$style.root\">\n <div ref=\"pinnedContainerRef\" data-testid=\"pl-element-list-pinned\" :class=\"$style.list\">\n <PlElementListItem\n v-for=\"([originalIndex, item], pinnedIndex) in pinnedItemsRef\"\n :key=\"pinnedKeysRef[pinnedIndex]\"\n :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n :titleClass=\"getItemClassTitle(item, originalIndex)\"\n :contentClass=\"getItemClassContent(item, originalIndex)\"\n :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n :afterClass=\"getItemClassAfter(item, originalIndex)\"\n :index=\"originalIndex\"\n :item=\"item\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActiveItem(item, originalIndex)\"\n :isDraggable=\"isDraggableItem(item, originalIndex)\"\n :isRemovable=\"isRemovableItem(item, originalIndex)\"\n :isToggable=\"isToggableItem(item, originalIndex)\"\n :isToggled=\"isToggledItem(item, originalIndex)\"\n :isPinnable=\"isPinnableItem(item, originalIndex)\"\n :isPinned=\"true\"\n :isExpandable=\"isExpandableItem(item, originalIndex)\"\n :isExpanded=\"isExpandedItem(item, originalIndex)\"\n @click=\"emits('itemClick', item)\"\n @remove=\"handleRemove\"\n @toggle=\"handleToggle\"\n @pin=\"handlePin\"\n @expand=\"handleExpand\"\n >\n <template v-if=\"slots['item-before']\" #before=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-before\" />\n </template>\n <template #title=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n </template>\n <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n </template>\n <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n </template>\n </PlElementListItem>\n </div>\n <div\n v-if=\"hasUnpinnedItems\"\n ref=\"unpinnedContainerRef\"\n data-testid=\"pl-element-list-unpinned\"\n :class=\"$style.list\"\n >\n <PlElementListItem\n v-for=\"([originalIndex, item], unpinnedIndex) in unpinnedItemsRef\"\n :key=\"unpinnedKeysRef[unpinnedIndex]\"\n :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n :titleClass=\"getItemClassTitle(item, originalIndex)\"\n :contentClass=\"getItemClassContent(item, originalIndex)\"\n :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n :afterClass=\"getItemClassAfter(item, originalIndex)\"\n :index=\"originalIndex\"\n :item=\"item\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActiveItem(item, originalIndex)\"\n :isDraggable=\"isDraggableItem(item, originalIndex)\"\n :isRemovable=\"isRemovableItem(item, originalIndex)\"\n :isToggable=\"isToggableItem(item, originalIndex)\"\n :isToggled=\"isToggledItem(item, originalIndex)\"\n :isPinnable=\"isPinnableItem(item, originalIndex)\"\n :isPinned=\"false\"\n :isExpandable=\"isExpandableItem(item, originalIndex)\"\n :isExpanded=\"isExpandedItem(item, originalIndex)\"\n @click=\"emits('itemClick', item)\"\n @remove=\"handleRemove\"\n @toggle=\"handleToggle\"\n @pin=\"handlePin\"\n @expand=\"handleExpand\"\n >\n <template #title=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n </template>\n <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n </template>\n <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n </template>\n </PlElementListItem>\n </div>\n </div>\n</template>\n\n<style module>\n.root,\n.list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n min-width: 180px;\n}\n\n.item {\n width: 100%;\n}\n\n:global(.sortable-ghost) {\n visibility: hidden;\n}\n:global(.sortable-drag) {\n opacity: 1;\n}\n</style>\n"],"mappings":""}