npm - @milaboratories/uikit - Versions diffs - 2.11.6 → 2.11.8 - Mend

@milaboratories/uikit 2.11.6 → 2.11.8

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

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

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

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

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

@@ -1,5 +1,6 @@
 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({
 	__name: "PlDropdownMultiRef",
 	props: {
@@ -34,6 +35,7 @@ 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 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 required: false,\n disabled: false,\n options: undefined,\n },\n);\n\nconst options = computed(() =>\n props.options?.map((opt) => ({\n label: opt.label,\n value: opt.ref,\n })),\n);\n</script>\n\n<template>\n <PlDropdownMulti\n v-bind=\"props\"\n :options=\"options\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n >\n <template v-if=\"slots.tooltip\" #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlDropdownMulti>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;~~EAMA,IAAM,IAAa,GAAU,EASvB,IAAQ,GA+CR,IAAU,QACd,EAAM,SAAS,KAAK,OAAS;GAC3B,OAAO,EAAI;GACX,OAAO,EAAI;GACZ,EAAE,CACJ;yBAIC,EAQkB,GARlB,EACU,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"],"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 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 required: false,\n disabled: false,\n options: undefined,\n },\n);\n\nconst options = computed(() =>\n props.options?.map((opt) => ({\n label: opt.label,\n value: opt.ref,\n })),\n);\n</script>\n\n<template>\n <PlDropdownMulti\n v-bind=\"props\"\n :options=\"options\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n >\n <template v-if=\"slots.tooltip\" #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlDropdownMulti>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAM,IAAa,GAAU,EASvB,IAAQ,GA+CR,IAAU,QACd,EAAM,SAAS,KAAK,OAAS;GAC3B,OAAO,EAAI;GACX,OAAO,EAAI;GACZ,EAAE,CACJ;yBAIC,EAQkB,GARlB,EACU,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"}

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

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

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

@@ -48,6 +48,7 @@ var d = /* @__PURE__ */ i({
 		]));
 	}
 });
+//#endregion
 export { d as default };
 //# sourceMappingURL=PlDropdownRef.vue2.js.map

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

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

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

@@ -1,6 +1,7 @@
 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
 var y = { key: 0 }, b = ["placeholder"], x = /* @__PURE__ */ o({
 	__name: "PlEditableTitle",
 	props: /* @__PURE__ */ s({
@@ -54,6 +55,7 @@ var y = { key: 0 }, b = ["placeholder"], x = /* @__PURE__ */ o({
 		}, 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 class=\"pl-editable-title\" :class=\"style.component\" :style=\"computedStyle\">\n <div :class=\"style.container\" @click=\"() => inputRef?.focus()\">\n <span v-if=\"prefix\">{{ prefix.trim() }} </span>\n <input\n ref=\"inputRef\"\n v-model=\"local.value\"\n :placeholder=\"placeholder\"\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\">{{ local.error }}</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,EAaM,OAAA;GAbD,OAAK,EAAA,CAAC,qBAA4B,EAAA,EAAK,CAAC,UAAS,CAAA;GAAG,OAAK,EAAE,EAAA,MAAa;MAC3E,EAUM,OAAA;GAVA,OAAK,EAAE,EAAA,EAAK,CAAC,UAAS;GAAG,SAAK,AAAA,EAAA,aAAQ,EAAA,OAAU,OAAK;MAC7C,EAAA,UAAA,GAAA,EAAZ,EAAoD,QAAA,GAAA,EAA7B,EAAA,OAAO,MAAI,CAAA,GAAK,QAAM,EAAA,IAAA,EAAA,IAAA,GAAA,EAAA,EAC7C,EAOE,SAAA;YANI;GAAJ,KAAI;4CACK,EAAK,CAAC,QAAK;GACnB,aAAa,EAAA;GACb,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;wBAJpD,EAAA,EAAK,CAAC,MAAK,CAAA,CAAA,CAAA,EAAA,EAAA,EAOb,EAAA,EAAK,CAAC,SAAA,GAAA,EAAjB,EAAoE,OAAA;;GAA3C,OAAK,EAAE,EAAA,EAAK,CAAC,MAAK;OAAK,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":[],"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 class=\"pl-editable-title\" :class=\"style.component\" :style=\"computedStyle\">\n <div :class=\"style.container\" @click=\"() => inputRef?.focus()\">\n <span v-if=\"prefix\">{{ prefix.trim() }} </span>\n <input\n ref=\"inputRef\"\n v-model=\"local.value\"\n :placeholder=\"placeholder\"\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\">{{ local.error }}</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,EAaM,OAAA;GAbD,OAAK,EAAA,CAAC,qBAA4B,EAAA,EAAK,CAAC,UAAS,CAAA;GAAG,OAAK,EAAE,EAAA,MAAa;MAC3E,EAUM,OAAA;GAVA,OAAK,EAAE,EAAA,EAAK,CAAC,UAAS;GAAG,SAAK,AAAA,EAAA,aAAQ,EAAA,OAAU,OAAK;MAC7C,EAAA,UAAA,GAAA,EAAZ,EAAoD,QAAA,GAAA,EAA7B,EAAA,OAAO,MAAI,CAAA,GAAK,QAAM,EAAA,IAAA,EAAA,IAAA,GAAA,EAAA,EAC7C,EAOE,SAAA;YANI;GAAJ,KAAI;4CACK,EAAK,CAAC,QAAK;GACnB,aAAa,EAAA;GACb,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;wBAJpD,EAAA,EAAK,CAAC,MAAK,CAAA,CAAA,CAAA,EAAA,EAAA,EAOb,EAAA,EAAK,CAAC,SAAA,GAAA,EAAjB,EAAoE,OAAA;;GAA3C,OAAK,EAAE,EAAA,EAAK,CAAC,MAAK;OAAK,EAAA,EAAK,CAAC,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,EAAA"}

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

@@ -3,6 +3,7 @@ import './pl-editable-title.css';var e = {
 	container: "_container_1w6b3_15",
 	error: "_error_1w6b3_69"
 };
+//#endregion
 export { e as default };
 //# sourceMappingURL=pl-editable-title.module.js.map

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

@@ -2,6 +2,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
 export { r as default };
 //# sourceMappingURL=PlElementList.js.map

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

@@ -3,6 +3,7 @@ import './PlElementList.vue.css';var e = {
 	list: "_list_11nk6_3",
 	item: "_item_11nk6_10"
 };
+//#endregion
 export { e as default };
 //# sourceMappingURL=PlElementList.style.js.map

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

@@ -3,6 +3,7 @@ import { moveElements as t } from "./utils.js";
 import { Fragment as n, computed as r, createBlock as i, createCommentVNode as ee, createElementBlock as a, createElementVNode as te, createSlots as o, defineComponent as s, mergeModels as c, normalizeClass as l, openBlock as u, renderList as d, renderSlot as f, shallowRef as p, unref as m, useModel as h, useSlots as ne, watch as g, withCtx as _ } from "vue";
 import { isFunction as v, shallowHash as y } from "@milaboratories/helpers";
 import { useSortable as re } from "@vueuse/integrations/useSortable";
+//#region src/components/PlElementList/PlElementList.vue?vue&type=script&setup=true&lang.ts
 var b = /* @__PURE__ */ s({
 	__name: "PlElementList",
 	props: /* @__PURE__ */ c({
@@ -361,6 +362,7 @@ var b = /* @__PURE__ */ s({
 		]))), 128))], 2)) : ee("", !0)], 2));
 	}
 });
+//#endregion
 export { b as default };
 //# sourceMappingURL=PlElementList.vue2.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlElementList.vue_vue_type_script_setup_true_lang.js","names":["$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\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(() => itemsRef.value.filter(isPinnedItem));\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() =>\n itemsRef.value.filter((item, index) => !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 = (item: T, index: number) => {\n return `${versionRef.value}-${props.getItemKey(item, index)}`;\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<T[]>,\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 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 = pinnedItemsRef.value.includes(item);\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.splice(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 :class=\"$style.root\">\n <div ref=\"pinnedContainerRef\" :class=\"$style.list\">\n <PlElementListItem\n v-for=\"(pinnedItem, pinnedIndex) in pinnedItemsRef\"\n :key=\"pinnedKeysRef[pinnedIndex]\"\n :class=\"[$style.item, getItemClass(pinnedItem, pinnedIndex)]\"\n :titleClass=\"getItemClassTitle(pinnedItem, pinnedIndex)\"\n :contentClass=\"getItemClassContent(pinnedItem, pinnedIndex)\"\n :beforeClass=\"getItemClassBefore(pinnedItem, pinnedIndex)\"\n :afterClass=\"getItemClassAfter(pinnedItem, pinnedIndex)\"\n :index=\"pinnedIndex\"\n :item=\"pinnedItem\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActiveItem(pinnedItem, pinnedIndex)\"\n :isDraggable=\"isDraggableItem(pinnedItem, pinnedIndex)\"\n :isRemovable=\"isRemovableItem(pinnedItem, pinnedIndex)\"\n :isToggable=\"isToggableItem(pinnedItem, pinnedIndex)\"\n :isToggled=\"isToggledItem(pinnedItem, pinnedIndex)\"\n :isPinnable=\"isPinnableItem(pinnedItem, pinnedIndex)\"\n :isPinned=\"true\"\n :isExpandable=\"isExpandableItem(pinnedItem, pinnedIndex)\"\n :isExpanded=\"isExpandedItem(pinnedItem, pinnedIndex)\"\n @click=\"emits('itemClick', pinnedItem)\"\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 v-if=\"hasUnpinnedItems\" ref=\"unpinnedContainerRef\" :class=\"$style.list\">\n <PlElementListItem\n v-for=\"(unpinnedItem, unpinnedIndex) in unpinnedItemsRef\"\n :key=\"unpinnedKeysRef[unpinnedIndex]\"\n :class=\"[$style.item, getItemClass(unpinnedItem, unpinnedIndex)]\"\n :titleClass=\"getItemClassTitle(unpinnedItem, unpinnedIndex)\"\n :contentClass=\"getItemClassContent(unpinnedItem, unpinnedIndex)\"\n :beforeClass=\"getItemClassBefore(unpinnedItem, unpinnedIndex)\"\n :afterClass=\"getItemClassAfter(unpinnedItem, unpinnedIndex)\"\n :index=\"unpinnedIndex + (pinnedItemsRef?.length ?? 0)\"\n :item=\"unpinnedItem\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActiveItem(unpinnedItem, unpinnedIndex)\"\n :isDraggable=\"isDraggableItem(unpinnedItem, unpinnedIndex)\"\n :isRemovable=\"isRemovableItem(unpinnedItem, unpinnedIndex)\"\n :isToggable=\"isToggableItem(unpinnedItem, unpinnedIndex)\"\n :isToggled=\"isToggledItem(unpinnedItem, unpinnedIndex)\"\n :isPinnable=\"isPinnableItem(unpinnedItem, unpinnedIndex)\"\n :isPinned=\"false\"\n :isExpandable=\"isExpandableItem(unpinnedItem, unpinnedIndex)\"\n :isExpanded=\"isExpandedItem(unpinnedItem, unpinnedIndex)\"\n @click=\"emits('itemClick', unpinnedItem)\"\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":"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"}
1	+ {"version":3,"file":"PlElementList.vue_vue_type_script_setup_true_lang.js","names":["$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\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(() => itemsRef.value.filter(isPinnedItem));\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() =>\n itemsRef.value.filter((item, index) => !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 = (item: T, index: number) => {\n return `${versionRef.value}-${props.getItemKey(item, index)}`;\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<T[]>,\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 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 = pinnedItemsRef.value.includes(item);\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.splice(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 :class=\"$style.root\">\n <div ref=\"pinnedContainerRef\" :class=\"$style.list\">\n <PlElementListItem\n v-for=\"(pinnedItem, pinnedIndex) in pinnedItemsRef\"\n :key=\"pinnedKeysRef[pinnedIndex]\"\n :class=\"[$style.item, getItemClass(pinnedItem, pinnedIndex)]\"\n :titleClass=\"getItemClassTitle(pinnedItem, pinnedIndex)\"\n :contentClass=\"getItemClassContent(pinnedItem, pinnedIndex)\"\n :beforeClass=\"getItemClassBefore(pinnedItem, pinnedIndex)\"\n :afterClass=\"getItemClassAfter(pinnedItem, pinnedIndex)\"\n :index=\"pinnedIndex\"\n :item=\"pinnedItem\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActiveItem(pinnedItem, pinnedIndex)\"\n :isDraggable=\"isDraggableItem(pinnedItem, pinnedIndex)\"\n :isRemovable=\"isRemovableItem(pinnedItem, pinnedIndex)\"\n :isToggable=\"isToggableItem(pinnedItem, pinnedIndex)\"\n :isToggled=\"isToggledItem(pinnedItem, pinnedIndex)\"\n :isPinnable=\"isPinnableItem(pinnedItem, pinnedIndex)\"\n :isPinned=\"true\"\n :isExpandable=\"isExpandableItem(pinnedItem, pinnedIndex)\"\n :isExpanded=\"isExpandedItem(pinnedItem, pinnedIndex)\"\n @click=\"emits('itemClick', pinnedItem)\"\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 v-if=\"hasUnpinnedItems\" ref=\"unpinnedContainerRef\" :class=\"$style.list\">\n <PlElementListItem\n v-for=\"(unpinnedItem, unpinnedIndex) in unpinnedItemsRef\"\n :key=\"unpinnedKeysRef[unpinnedIndex]\"\n :class=\"[$style.item, getItemClass(unpinnedItem, unpinnedIndex)]\"\n :titleClass=\"getItemClassTitle(unpinnedItem, unpinnedIndex)\"\n :contentClass=\"getItemClassContent(unpinnedItem, unpinnedIndex)\"\n :beforeClass=\"getItemClassBefore(unpinnedItem, unpinnedIndex)\"\n :afterClass=\"getItemClassAfter(unpinnedItem, unpinnedIndex)\"\n :index=\"unpinnedIndex + (pinnedItemsRef?.length ?? 0)\"\n :item=\"unpinnedItem\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActiveItem(unpinnedItem, unpinnedIndex)\"\n :isDraggable=\"isDraggableItem(unpinnedItem, unpinnedIndex)\"\n :isRemovable=\"isRemovableItem(unpinnedItem, unpinnedIndex)\"\n :isToggable=\"isToggableItem(unpinnedItem, unpinnedIndex)\"\n :isToggled=\"isToggledItem(unpinnedItem, unpinnedIndex)\"\n :isPinnable=\"isPinnableItem(unpinnedItem, unpinnedIndex)\"\n :isPinned=\"false\"\n :isExpandable=\"isExpandableItem(unpinnedItem, unpinnedIndex)\"\n :isExpanded=\"isExpandedItem(unpinnedItem, unpinnedIndex)\"\n @click=\"emits('itemClick', unpinnedItem)\"\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":"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"}

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

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

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

@@ -16,6 +16,7 @@ import './PlElementListItem.vue.css';var e = {
 	draggable: "_draggable_1bqtz_140",
 	showOnHover: "_showOnHover_1bqtz_144"
 };
+//#endregion
 export { e as default };
 //# sourceMappingURL=PlElementListItem.style.js.map

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

@@ -3,6 +3,7 @@ import "../PlIcon24/index.js";
 import t from "../PlIcon16/PlIcon16.js";
 import "../PlIcon16/index.js";
 import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderSlot as d, unref as f, useSlots as p, withModifiers as m } from "vue";
+//#region src/components/PlElementList/PlElementListItem.vue?vue&type=script&setup=true&lang.ts
 var h = ["data-draggable"], g = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "PlElementListItem",
@@ -131,6 +132,7 @@ var h = ["data-draggable"], g = /* @__PURE__ */ c({
 		]));
 	}
 });
+//#endregion
 export { g as default };
 //# sourceMappingURL=PlElementListItem.vue2.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlElementListItem.vue_vue_type_script_setup_true_lang.js","names":["$style","$attrs"],"sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\n\nconst props = defineProps<{\n item: T;\n index: number;\n showDragHandle: boolean;\n isActive: boolean;\n isDraggable: boolean;\n isRemovable: boolean;\n isExpandable: boolean;\n isExpanded: boolean;\n isToggable: boolean;\n isToggled: boolean;\n isPinnable: boolean;\n isPinned: boolean;\n titleClass: string \| string[] \| null;\n contentClass: string \| string[] \| null;\n afterClass: string \| string[] \| null;\n beforeClass: string \| string[] \| null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n title: (props: { item: T; index: number }) => unknown;\n content?: (props: { item: T; index: number }) => unknown;\n after?: (props: { item: T; index: number }) => unknown;\n before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots[\"content\"] !== undefined);\nconst hasAfterSlot = computed(() => slots[\"after\"] !== undefined);\nconst hasBeforeSlot = computed(() => slots[\"before\"] !== undefined);\n\nconst emit = defineEmits<{\n (e: \"click\", item: MouseEvent): void;\n (e: \"expand\", item: T, index: number): void;\n (e: \"toggle\", item: T, index: number): void;\n (e: \"pin\", item: T, index: number): void;\n (e: \"remove\", item: T, index: number): void;\n}>();\n</script>\n\n<template>\n <div @click=\"(event) => emit('click', event)\">\n <div v-if=\"hasBeforeSlot\" :class=\"beforeClass\">\n <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n <div\n :class=\"[\n $style.root,\n $attrs.class,\n {\n [$style.active]: props.isActive,\n [$style.pinned]: props.isPinned,\n [$style.opened]: props.isExpanded,\n [$style.disabled]: props.isToggled,\n },\n ]\"\n >\n <div\n :class=\"[\n $style.head,\n titleClass,\n {\n [$style.clickable]: hasContentSlot,\n },\n ]\"\n @click=\"isExpandable && emit('expand', props.item, props.index)\"\n >\n <div\n v-if=\"props.showDragHandle\"\n :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable }]\"\n :data-draggable=\"props.isDraggable\"\n >\n <PlIcon16 name=\"drag-dots\" />\n </div>\n <PlIcon16\n v-if=\"isExpandable\"\n :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n name=\"chevron-down\"\n />\n\n <div :class=\"$style.title\">\n <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n\n <div :class=\"[$style.actions, $style.showOnHover]\">\n <div\n v-if=\"props.isToggable\"\n :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n @click.stop=\"emit('toggle', props.item, props.index)\"\n >\n <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n </div>\n <div\n v-if=\"props.isPinnable\"\n :class=\"[\n $style.action,\n $style.clickable,\n {\n [$style.disable]: !props.isPinnable,\n [$style.activated]: props.isPinned,\n },\n ]\"\n @click.stop=\"emit('pin', props.item, props.index)\"\n >\n <PlIcon24 name=\"pin\" size=\"16\" />\n </div>\n <div\n v-if=\"props.isRemovable\"\n :class=\"[$style.action, $style.clickable]\"\n @click.stop=\"emit('remove', props.item, props.index)\"\n >\n <PlIcon16 name=\"close\" />\n </div>\n </div>\n </div>\n <div\n v-if=\"hasContentSlot && props.isExpanded\"\n :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n >\n <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n </div>\n <div v-if=\"hasAfterSlot\" :class=\"afterClass\">\n <slot name=\"after\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n </div>\n</template>\n\n<style module>\n@use \"../../assets/variables.scss\" as ;\n\n.root {\n --background: rgba(255, 255, 255, 0.8);\n --border-color: var(--color-div-grey);\n --head-background: unset;\n --box-shadow: none;\n --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n &:global(.sortable-drag),\n &:global(.sortable-chosen) {\n --head-background: var(--gradient-light-lime);\n --border-color: var(--border-color-focus);\n --box-shadow: var(--box-shadow-active);\n }\n}\n.root {\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-radius: var(--border-radius);\n border: 1px solid var(--border-color);\n background-color: var(--background);\n transition: box-shadow 0.15s;\n box-shadow: var(--box-shadow);\n overflow: hidden;\n\n &:hover {\n --border-color: var(--border-color-focus);\n --head-background: var(--gradient-light-lime);\n }\n\n &.opened {\n --head-background: var(--gradient-light-lime);\n }\n\n &.disabled {\n --icon-color: var(--ic-02);\n --border-color: var(--border-color-div-grey);\n color: var(--txt-03);\n filter: grayscale(1);\n }\n\n &.pinned {\n --background: var(--bg-base-light);\n }\n\n &.active {\n --border-color: var(--border-color-focus);\n --head-background: var(--btn-accent-positive-500);\n }\n}\n\n.head {\n position: relative;\n display: flex;\n align-items: center;\n padding: 8px;\n min-height: 40px;\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n background: var(--head-background);\n}\n\n.contentChevron {\n display: block;\n width: 16px;\n height: 16px;\n margin-right: 4px;\n transform: rotate(-90deg);\n transition: transform 0.15s;\n\n &.opened {\n transform: rotate(0deg);\n }\n}\n\n.title {\n display: flex;\n flex-direction: row;\n flex: 1 1 0;\n gap: 8px;\n overflow: hidden;\n}\n\n.body {\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 24px;\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n\n &.disabled {\n pointer-events: none;\n }\n}\n\n.actions {\n position: absolute;\n top: 8px;\n right: 8px;\n display: flex;\n align-items: center;\n background-color: var(--background);\n border-radius: var(--border-radius);\n}\n\n.action {\n width: 24px;\n height: 24px;\n padding: 4px; / use padding instead of gap on parent, for better accessibility */\n opacity: 0.6;\n border-radius: var(--border-radius);\n transition: all 0.15s;\n\n svg {\n width: 16px;\n height: 16px;\n }\n\n &:hover {\n opacity: 1;\n background-color: var(--bg-elevated-02);\n }\n\n &.activated {\n opacity: 0.8;\n }\n\n &.disable {\n cursor: not-allowed;\n opacity: 0.4;\n }\n}\n\n.clickable {\n cursor: pointer;\n}\n\n.draggable {\n cursor: grab;\n}\n\n.showOnHover {\n opacity: 0;\n transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n opacity: 1;\n}\n</style>\n"],"mappings":"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"}
1	+ {"version":3,"file":"PlElementListItem.vue_vue_type_script_setup_true_lang.js","names":["$style","$attrs"],"sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\n\nconst props = defineProps<{\n item: T;\n index: number;\n showDragHandle: boolean;\n isActive: boolean;\n isDraggable: boolean;\n isRemovable: boolean;\n isExpandable: boolean;\n isExpanded: boolean;\n isToggable: boolean;\n isToggled: boolean;\n isPinnable: boolean;\n isPinned: boolean;\n titleClass: string \| string[] \| null;\n contentClass: string \| string[] \| null;\n afterClass: string \| string[] \| null;\n beforeClass: string \| string[] \| null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n title: (props: { item: T; index: number }) => unknown;\n content?: (props: { item: T; index: number }) => unknown;\n after?: (props: { item: T; index: number }) => unknown;\n before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots[\"content\"] !== undefined);\nconst hasAfterSlot = computed(() => slots[\"after\"] !== undefined);\nconst hasBeforeSlot = computed(() => slots[\"before\"] !== undefined);\n\nconst emit = defineEmits<{\n (e: \"click\", item: MouseEvent): void;\n (e: \"expand\", item: T, index: number): void;\n (e: \"toggle\", item: T, index: number): void;\n (e: \"pin\", item: T, index: number): void;\n (e: \"remove\", item: T, index: number): void;\n}>();\n</script>\n\n<template>\n <div @click=\"(event) => emit('click', event)\">\n <div v-if=\"hasBeforeSlot\" :class=\"beforeClass\">\n <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n <div\n :class=\"[\n $style.root,\n $attrs.class,\n {\n [$style.active]: props.isActive,\n [$style.pinned]: props.isPinned,\n [$style.opened]: props.isExpanded,\n [$style.disabled]: props.isToggled,\n },\n ]\"\n >\n <div\n :class=\"[\n $style.head,\n titleClass,\n {\n [$style.clickable]: hasContentSlot,\n },\n ]\"\n @click=\"isExpandable && emit('expand', props.item, props.index)\"\n >\n <div\n v-if=\"props.showDragHandle\"\n :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable }]\"\n :data-draggable=\"props.isDraggable\"\n >\n <PlIcon16 name=\"drag-dots\" />\n </div>\n <PlIcon16\n v-if=\"isExpandable\"\n :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n name=\"chevron-down\"\n />\n\n <div :class=\"$style.title\">\n <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n\n <div :class=\"[$style.actions, $style.showOnHover]\">\n <div\n v-if=\"props.isToggable\"\n :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n @click.stop=\"emit('toggle', props.item, props.index)\"\n >\n <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n </div>\n <div\n v-if=\"props.isPinnable\"\n :class=\"[\n $style.action,\n $style.clickable,\n {\n [$style.disable]: !props.isPinnable,\n [$style.activated]: props.isPinned,\n },\n ]\"\n @click.stop=\"emit('pin', props.item, props.index)\"\n >\n <PlIcon24 name=\"pin\" size=\"16\" />\n </div>\n <div\n v-if=\"props.isRemovable\"\n :class=\"[$style.action, $style.clickable]\"\n @click.stop=\"emit('remove', props.item, props.index)\"\n >\n <PlIcon16 name=\"close\" />\n </div>\n </div>\n </div>\n <div\n v-if=\"hasContentSlot && props.isExpanded\"\n :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n >\n <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n </div>\n <div v-if=\"hasAfterSlot\" :class=\"afterClass\">\n <slot name=\"after\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n </div>\n</template>\n\n<style module>\n@use \"../../assets/variables.scss\" as ;\n\n.root {\n --background: rgba(255, 255, 255, 0.8);\n --border-color: var(--color-div-grey);\n --head-background: unset;\n --box-shadow: none;\n --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n &:global(.sortable-drag),\n &:global(.sortable-chosen) {\n --head-background: var(--gradient-light-lime);\n --border-color: var(--border-color-focus);\n --box-shadow: var(--box-shadow-active);\n }\n}\n.root {\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-radius: var(--border-radius);\n border: 1px solid var(--border-color);\n background-color: var(--background);\n transition: box-shadow 0.15s;\n box-shadow: var(--box-shadow);\n overflow: hidden;\n\n &:hover {\n --border-color: var(--border-color-focus);\n --head-background: var(--gradient-light-lime);\n }\n\n &.opened {\n --head-background: var(--gradient-light-lime);\n }\n\n &.disabled {\n --icon-color: var(--ic-02);\n --border-color: var(--border-color-div-grey);\n color: var(--txt-03);\n filter: grayscale(1);\n }\n\n &.pinned {\n --background: var(--bg-base-light);\n }\n\n &.active {\n --border-color: var(--border-color-focus);\n --head-background: var(--btn-accent-positive-500);\n }\n}\n\n.head {\n position: relative;\n display: flex;\n align-items: center;\n padding: 8px;\n min-height: 40px;\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n background: var(--head-background);\n}\n\n.contentChevron {\n display: block;\n width: 16px;\n height: 16px;\n margin-right: 4px;\n transform: rotate(-90deg);\n transition: transform 0.15s;\n\n &.opened {\n transform: rotate(0deg);\n }\n}\n\n.title {\n display: flex;\n flex-direction: row;\n flex: 1 1 0;\n gap: 8px;\n overflow: hidden;\n}\n\n.body {\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 24px;\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n\n &.disabled {\n pointer-events: none;\n }\n}\n\n.actions {\n position: absolute;\n top: 8px;\n right: 8px;\n display: flex;\n align-items: center;\n background-color: var(--background);\n border-radius: var(--border-radius);\n}\n\n.action {\n width: 24px;\n height: 24px;\n padding: 4px; / use padding instead of gap on parent, for better accessibility */\n opacity: 0.6;\n border-radius: var(--border-radius);\n transition: all 0.15s;\n\n svg {\n width: 16px;\n height: 16px;\n }\n\n &:hover {\n opacity: 1;\n background-color: var(--bg-elevated-02);\n }\n\n &.activated {\n opacity: 0.8;\n }\n\n &.disable {\n cursor: not-allowed;\n opacity: 0.4;\n }\n}\n\n.clickable {\n cursor: pointer;\n}\n\n.draggable {\n cursor: grab;\n}\n\n.showOnHover {\n opacity: 0;\n transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n opacity: 1;\n}\n</style>\n"],"mappings":"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"}

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

@@ -1,10 +1,12 @@
-const e = (e, t, n) => {
+//#region src/components/PlElementList/utils.ts
+var e = (e, t, n) => {
 	if (n >= 0 && n < e.length) {
 		let r = e.splice(t, 1)[0];
 		e.splice(n, 0, r);
 	} else console.warn(`Invalid move operation: from ${t} to ${n} in array of length ${e.length}`);
 	return e;
 };
+//#endregion
 export { e as moveElements };
 //# sourceMappingURL=utils.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/PlElementList/utils.ts"],"sourcesContent":["export const moveElements = <T>(array: T[], from: number, to: number): T[] => {\n if (to >= 0 && to < array.length) {\n const element = array.splice(from, 1)[0];\n array.splice(to, 0, element);\n } else {\n console.warn(\n `Invalid move operation: from ${from} to ${to} in array of length ${array.length}`,\n );\n }\n\n return array;\n};\n"],"mappings":"AAAA,~~MAAa~~,KAAmB,GAAY,GAAc,MAAoB;AAC5E,KAAI,KAAM,KAAK,IAAK,EAAM,QAAQ;EAChC,IAAM,IAAU,EAAM,OAAO,GAAM,EAAE,CAAC;AACtC,IAAM,OAAO,GAAI,GAAG,EAAQ;OAE5B,SAAQ,KACN,gCAAgC,EAAK,MAAM,EAAG,sBAAsB,EAAM,SAC3E;AAGH,QAAO"}
1	+ {"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/PlElementList/utils.ts"],"sourcesContent":["export const moveElements = <T>(array: T[], from: number, to: number): T[] => {\n if (to >= 0 && to < array.length) {\n const element = array.splice(from, 1)[0];\n array.splice(to, 0, element);\n } else {\n console.warn(\n `Invalid move operation: from ${from} to ${to} in array of length ${array.length}`,\n );\n }\n\n return array;\n};\n"],"mappings":";AAAA,IAAa,KAAmB,GAAY,GAAc,MAAoB;AAC5E,KAAI,KAAM,KAAK,IAAK,EAAM,QAAQ;EAChC,IAAM,IAAU,EAAM,OAAO,GAAM,EAAE,CAAC;AACtC,IAAM,OAAO,GAAI,GAAG,EAAQ;OAE5B,SAAQ,KACN,gCAAgC,EAAK,MAAM,EAAG,sBAAsB,EAAM,SAC3E;AAGH,QAAO"}

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

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

package/dist/components/PlErrorAlert/PlErrorAlert.style.js CHANGED Viewed

@@ -6,6 +6,7 @@ import './PlErrorAlert.vue.css';var e = {
 	titleText: "_titleText_o15c5_42",
 	message: "_message_o15c5_48"
 };
+//#endregion
 export { e as default };
 //# sourceMappingURL=PlErrorAlert.style.js.map

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

@@ -33,6 +33,7 @@ var f = /* @__PURE__ */ a({
 		], 6));
 	}
 });
+//#endregion
 export { f as default };
 //# sourceMappingURL=PlErrorAlert.vue2.js.map

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

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

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

@@ -2,6 +2,7 @@ import e from "../PlErrorAlert/PlErrorAlert.js";
 import "../PlErrorAlert/index.js";
 import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, defineComponent as o, onBeforeUpdate as s, onErrorCaptured as c, openBlock as l, ref as u, renderSlot as d, unref as f } from "vue";
 import { isErrorLike as p, tryDo as m } from "@milaboratories/helpers";
+//#region src/components/PlErrorBoundary/PlErrorBoundary.vue?vue&type=script&setup=true&lang.ts
 var h = /* @__PURE__ */ o({
 	__name: "PlErrorBoundary",
 	setup(o, { expose: h }) {
@@ -29,6 +30,7 @@ var h = /* @__PURE__ */ o({
 		}, null, 8, ["message", "title"])) : i("", !0)], 64));
 	}
 });
+//#endregion
 export { h as default };
 //# sourceMappingURL=PlErrorBoundary.vue2.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlErrorBoundary.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlErrorBoundary/PlErrorBoundary.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onErrorCaptured, ref, onBeforeUpdate } from \"vue\";\nimport { PlErrorAlert } from \"../PlErrorAlert\";\nimport { isErrorLike, tryDo } from \"@milaboratories/helpers\";\n\nconst extractMessage = (err: unknown): undefined \| string => {\n if (err == null) {\n return undefined;\n }\n\n if (isErrorLike(err)) {\n return err.stack == null \|\| err.stack.length === 0\n ? err.message\n : err.stack.includes(err.message)\n ? err.stack\n : err.message + \"\\n\" + err.stack;\n }\n\n return tryDo(\n () => JSON.stringify(err, null, 4),\n () => err.toString(),\n );\n};\n\nconst data = ref<null \| {\n title: undefined \| string;\n error: Error;\n}>(null);\n\nconst error = computed(() => data.value?.error);\nconst message = computed(() => extractMessage(error.value));\n\nfunction reset() {\n data.value = null;\n}\n\nconst errorAlert = ref<InstanceType<typeof PlErrorAlert> \| null>(null);\n\nonBeforeUpdate(() => {\n // If an error is currently displayed, and the component updates (e.g., due to slot content changing),\n // reset the error state.\n if (data.value !== null && errorAlert.value) {\n reset();\n }\n});\n\nonErrorCaptured((err, instance) => {\n data.value = {\n title: instance?.$?.type?.name ?? undefined,\n error: err,\n };\n // stop error propagation\n return false;\n});\n\ndefineExpose({ error, reset });\n</script>\n\n<template>\n <slot />\n <PlErrorAlert v-if=\"error\" ref=\"errorAlert\" :message=\"message\" :title=\"data?.title\" />\n</template>\n"],"mappings":"~~;;;;;;;~~EAKA,IAAM,KAAkB,MAAqC;AACvD,YAAO,KAYX,QARI,EAAY,EAAI,GACX,EAAI,SAAS,QAAQ,EAAI,MAAM,WAAW,IAC7C,EAAI,UACJ,EAAI,MAAM,SAAS,EAAI,QAAO,GAC5B,EAAI,QACJ,EAAI,UAAU,OAAO,EAAI,QAG1B,QACC,KAAK,UAAU,GAAK,MAAM,EAAE,QAC5B,EAAI,UAAU,CACrB;KAGG,IAAO,EAGV,KAAK,EAEF,IAAQ,QAAe,EAAK,OAAO,MAAM,EACzC,IAAU,QAAe,EAAe,EAAM,MAAM,CAAC;EAE3D,SAAS,IAAQ;AACf,KAAK,QAAQ;;EAGf,IAAM,IAAa,EAA8C,KAAK;SAEtE,QAAqB;AAGnB,GAAI,EAAK,UAAU,QAAQ,EAAW,SACpC,GAAO;IAET,EAEF,GAAiB,GAAK,OACpB,EAAK,QAAQ;GACX,OAAO,GAAU,GAAG,MAAM,QAAQ,KAAA;GAClC,OAAO;GACR,EAEM,IACP,EAEF,EAAa;GAAE;GAAO;GAAO,CAAC,8BAI5B,EAAQ,EAAA,QAAA,UAAA,EACY,EAAA,SAAA,GAAA,EAApB,EAAsF,EAAA,EAAA,EAAA;;YAAvD;GAAJ,KAAI;GAAc,SAAS,EAAA;GAAU,OAAO,EAAA,OAAM"}
1	+ {"version":3,"file":"PlErrorBoundary.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlErrorBoundary/PlErrorBoundary.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onErrorCaptured, ref, onBeforeUpdate } from \"vue\";\nimport { PlErrorAlert } from \"../PlErrorAlert\";\nimport { isErrorLike, tryDo } from \"@milaboratories/helpers\";\n\nconst extractMessage = (err: unknown): undefined \| string => {\n if (err == null) {\n return undefined;\n }\n\n if (isErrorLike(err)) {\n return err.stack == null \|\| err.stack.length === 0\n ? err.message\n : err.stack.includes(err.message)\n ? err.stack\n : err.message + \"\\n\" + err.stack;\n }\n\n return tryDo(\n () => JSON.stringify(err, null, 4),\n () => err.toString(),\n );\n};\n\nconst data = ref<null \| {\n title: undefined \| string;\n error: Error;\n}>(null);\n\nconst error = computed(() => data.value?.error);\nconst message = computed(() => extractMessage(error.value));\n\nfunction reset() {\n data.value = null;\n}\n\nconst errorAlert = ref<InstanceType<typeof PlErrorAlert> \| null>(null);\n\nonBeforeUpdate(() => {\n // If an error is currently displayed, and the component updates (e.g., due to slot content changing),\n // reset the error state.\n if (data.value !== null && errorAlert.value) {\n reset();\n }\n});\n\nonErrorCaptured((err, instance) => {\n data.value = {\n title: instance?.$?.type?.name ?? undefined,\n error: err,\n };\n // stop error propagation\n return false;\n});\n\ndefineExpose({ error, reset });\n</script>\n\n<template>\n <slot />\n <PlErrorAlert v-if=\"error\" ref=\"errorAlert\" :message=\"message\" :title=\"data?.title\" />\n</template>\n"],"mappings":";;;;;;;;EAKA,IAAM,KAAkB,MAAqC;AACvD,YAAO,KAYX,QARI,EAAY,EAAI,GACX,EAAI,SAAS,QAAQ,EAAI,MAAM,WAAW,IAC7C,EAAI,UACJ,EAAI,MAAM,SAAS,EAAI,QAAO,GAC5B,EAAI,QACJ,EAAI,UAAU,OAAO,EAAI,QAG1B,QACC,KAAK,UAAU,GAAK,MAAM,EAAE,QAC5B,EAAI,UAAU,CACrB;KAGG,IAAO,EAGV,KAAK,EAEF,IAAQ,QAAe,EAAK,OAAO,MAAM,EACzC,IAAU,QAAe,EAAe,EAAM,MAAM,CAAC;EAE3D,SAAS,IAAQ;AACf,KAAK,QAAQ;;EAGf,IAAM,IAAa,EAA8C,KAAK;SAEtE,QAAqB;AAGnB,GAAI,EAAK,UAAU,QAAQ,EAAW,SACpC,GAAO;IAET,EAEF,GAAiB,GAAK,OACpB,EAAK,QAAQ;GACX,OAAO,GAAU,GAAG,MAAM,QAAQ,KAAA;GAClC,OAAO;GACR,EAEM,IACP,EAEF,EAAa;GAAE;GAAO;GAAO,CAAC,8BAI5B,EAAQ,EAAA,QAAA,UAAA,EACY,EAAA,SAAA,GAAA,EAApB,EAAsF,EAAA,EAAA,EAAA;;YAAvD;GAAJ,KAAI;GAAc,SAAS,EAAA;GAAU,OAAO,EAAA,OAAM"}

package/dist/components/PlFileDialog/Local.js CHANGED Viewed

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

package/dist/components/PlFileDialog/Local.vue2.js CHANGED Viewed

@@ -4,6 +4,7 @@ import t from "./pl-file-dialog.module.js";
 import { normalizeExtensions as n } from "./utils.js";
 import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, reactive as d, toDisplayString as f, unref as p, withModifiers as m } from "vue";
 import { getRawPlatformaInstance as h } from "@platforma-sdk/model";
+//#region src/components/PlFileDialog/Local.vue?vue&type=script&setup=true&lang.ts
 var g = {
 	key: 1,
 	class: "alert-error"
@@ -53,6 +54,7 @@ var g = {
 		], 34));
 	}
 });
+//#endregion
 export { _ as default };
 //# sourceMappingURL=Local.vue2.js.map

package/dist/components/PlFileDialog/Local.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Local.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlFileDialog/Local.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport style from \"./pl-file-dialog.module.scss\";\nimport type { ImportedFiles } from \"../../types\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed, reactive } from \"vue\";\nimport { getRawPlatformaInstance, type OpenDialogFilter } from \"@platforma-sdk/model\";\nimport { normalizeExtensions } from \"./utils\";\n\nconst props = defineProps<{\n importFiles: (value: ImportedFiles) => void;\n multi?: boolean;\n extensions?: string[];\n}>();\n\nconst data = reactive({\n error: undefined as unknown,\n});\n\nconst label = computed(() =>\n props.multi ? \"Drag & Drop files here or click to add\" : \"Drag & Drop file here or click to add\",\n);\n\nconst onDrop = async (ev: DragEvent) => {\n const fileToImportHandle = getRawPlatformaInstance()?.lsDriver?.fileToImportHandle;\n\n if (!fileToImportHandle) {\n return console.error(\n \"API getPlatformaRawInstance().lsDriver.fileToImportHandle is not available\",\n );\n }\n\n const extensions = normalizeExtensions(props.extensions);\n\n const files = await Promise.all(\n [...(ev.dataTransfer?.files ?? [])]\n .filter((f) => !!f)\n .filter((f) => (extensions ? extensions.some((ext) => f.name.endsWith(ext)) : true))\n .map((file) => {\n return fileToImportHandle(file);\n }),\n );\n\n if (files.length) {\n props.importFiles({\n files,\n });\n }\n};\n\nconst openNativeDialog = async () => {\n const filters: OpenDialogFilter[] = props.extensions\n ? [\n {\n name: \"All Files\",\n extensions: [...props.extensions],\n },\n ]\n : [];\n\n if (props.multi) {\n getRawPlatformaInstance()\n ?.lsDriver.showOpenMultipleFilesDialog({\n title: \"Select files to import\",\n filters,\n })\n .then(({ files }) => {\n if (files) {\n props.importFiles({\n files,\n });\n }\n })\n .catch((err) => (data.error = err));\n } else {\n getRawPlatformaInstance()\n ?.lsDriver.showOpenSingleFileDialog({\n title: \"Select file to import\",\n filters,\n })\n .then(({ file }) => {\n if (file) {\n props.importFiles({\n files: [file],\n });\n }\n })\n .catch((err) => (data.error = err));\n }\n};\n</script>\n\n<template>\n <div :class=\"style.local\" @drop=\"onDrop\" @dragover.prevent @click=\"openNativeDialog\">\n <PlIcon24 name=\"cloud-upload\" />\n <span>{{ label }}</span>\n <span v-if=\"extensions\" :class=\"style.supported\"\n >Supported formats: {{ extensions.join(\", \") }}</span\n >\n <span v-if=\"data.error\" class=\"alert-error\">{{ data.error }}</span>\n </div>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;~~EAQA,IAAM,IAAQ,GAMR,IAAO,EAAS,EACpB,OAAO,KAAA,GACR,CAAC,EAEI,IAAQ,QACZ,EAAM,QAAQ,2CAA2C,wCAC1D,EAEK,IAAS,OAAO,MAAkB;GACtC,IAAM,IAAqB,GAAyB,EAAE,UAAU;AAEhE,OAAI,CAAC,EACH,QAAO,QAAQ,MACb,6EACD;GAGH,IAAM,IAAa,EAAoB,EAAM,WAAW,EAElD,IAAQ,MAAM,QAAQ,IAC1B,CAAC,GAAI,EAAG,cAAc,SAAS,EAAE,CAAC,CAC/B,QAAQ,MAAM,CAAC,CAAC,EAAC,CACjB,QAAQ,MAAO,IAAa,EAAW,MAAM,MAAQ,EAAE,KAAK,SAAS,EAAI,CAAC,GAAG,GAAK,CAClF,KAAK,MACG,EAAmB,EAAK,CAC/B,CACL;AAED,GAAI,EAAM,UACR,EAAM,YAAY,EAChB,UACD,CAAC;KAIA,IAAmB,YAAY;GACnC,IAAM,IAA8B,EAAM,aACtC,CACE;IACE,MAAM;IACN,YAAY,CAAC,GAAG,EAAM,WAAW;IAClC,CACH,GACA,EAAE;AAEN,GAAI,EAAM,QACR,GAAwB,EACpB,SAAS,4BAA4B;IACrC,OAAO;IACP;IACD,CAAA,CACA,MAAM,EAAE,eAAY;AACnB,IAAI,KACF,EAAM,YAAY,EAChB,UACD,CAAC;KAEL,CACA,OAAO,MAAS,EAAK,QAAQ,EAAK,GAErC,GAAwB,EACpB,SAAS,yBAAyB;IAClC,OAAO;IACP;IACD,CAAA,CACA,MAAM,EAAE,cAAW;AAClB,IAAI,KACF,EAAM,YAAY,EAChB,OAAO,CAAC,EAAK,EACd,CAAC;KAEL,CACA,OAAO,MAAS,EAAK,QAAQ,EAAK;;yBAMvC,EAOM,OAAA;GAPA,OAAK,EAAE,EAAA,EAAK,CAAC,MAAK;GAAS;GAAS,YAAQ,AAAA,EAAA,OAAA,QAAT,IAAiB,CAAA,UAAA,CAAA;GAAE,SAAO;;GACjE,EAAgC,EAAA,EAAA,EAAA,EAAtB,MAAK,gBAAc,CAAA;GAC7B,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;GACF,EAAA,cAAA,GAAA,EAAZ,EAEC,QAAA;;IAFwB,OAAK,EAAE,EAAA,EAAK,CAAC,UAAS;MAC5C,wBAAmB,EAAG,EAAA,WAAW,KAAI,KAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAE5B,EAAK,SAAA,GAAA,EAAjB,EAAmE,QAAnE,GAAmE,EAApB,EAAK,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}
1	+ {"version":3,"file":"Local.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlFileDialog/Local.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport style from \"./pl-file-dialog.module.scss\";\nimport type { ImportedFiles } from \"../../types\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed, reactive } from \"vue\";\nimport { getRawPlatformaInstance, type OpenDialogFilter } from \"@platforma-sdk/model\";\nimport { normalizeExtensions } from \"./utils\";\n\nconst props = defineProps<{\n importFiles: (value: ImportedFiles) => void;\n multi?: boolean;\n extensions?: string[];\n}>();\n\nconst data = reactive({\n error: undefined as unknown,\n});\n\nconst label = computed(() =>\n props.multi ? \"Drag & Drop files here or click to add\" : \"Drag & Drop file here or click to add\",\n);\n\nconst onDrop = async (ev: DragEvent) => {\n const fileToImportHandle = getRawPlatformaInstance()?.lsDriver?.fileToImportHandle;\n\n if (!fileToImportHandle) {\n return console.error(\n \"API getPlatformaRawInstance().lsDriver.fileToImportHandle is not available\",\n );\n }\n\n const extensions = normalizeExtensions(props.extensions);\n\n const files = await Promise.all(\n [...(ev.dataTransfer?.files ?? [])]\n .filter((f) => !!f)\n .filter((f) => (extensions ? extensions.some((ext) => f.name.endsWith(ext)) : true))\n .map((file) => {\n return fileToImportHandle(file);\n }),\n );\n\n if (files.length) {\n props.importFiles({\n files,\n });\n }\n};\n\nconst openNativeDialog = async () => {\n const filters: OpenDialogFilter[] = props.extensions\n ? [\n {\n name: \"All Files\",\n extensions: [...props.extensions],\n },\n ]\n : [];\n\n if (props.multi) {\n getRawPlatformaInstance()\n ?.lsDriver.showOpenMultipleFilesDialog({\n title: \"Select files to import\",\n filters,\n })\n .then(({ files }) => {\n if (files) {\n props.importFiles({\n files,\n });\n }\n })\n .catch((err) => (data.error = err));\n } else {\n getRawPlatformaInstance()\n ?.lsDriver.showOpenSingleFileDialog({\n title: \"Select file to import\",\n filters,\n })\n .then(({ file }) => {\n if (file) {\n props.importFiles({\n files: [file],\n });\n }\n })\n .catch((err) => (data.error = err));\n }\n};\n</script>\n\n<template>\n <div :class=\"style.local\" @drop=\"onDrop\" @dragover.prevent @click=\"openNativeDialog\">\n <PlIcon24 name=\"cloud-upload\" />\n <span>{{ label }}</span>\n <span v-if=\"extensions\" :class=\"style.supported\"\n >Supported formats: {{ extensions.join(\", \") }}</span\n >\n <span v-if=\"data.error\" class=\"alert-error\">{{ data.error }}</span>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAQA,IAAM,IAAQ,GAMR,IAAO,EAAS,EACpB,OAAO,KAAA,GACR,CAAC,EAEI,IAAQ,QACZ,EAAM,QAAQ,2CAA2C,wCAC1D,EAEK,IAAS,OAAO,MAAkB;GACtC,IAAM,IAAqB,GAAyB,EAAE,UAAU;AAEhE,OAAI,CAAC,EACH,QAAO,QAAQ,MACb,6EACD;GAGH,IAAM,IAAa,EAAoB,EAAM,WAAW,EAElD,IAAQ,MAAM,QAAQ,IAC1B,CAAC,GAAI,EAAG,cAAc,SAAS,EAAE,CAAC,CAC/B,QAAQ,MAAM,CAAC,CAAC,EAAC,CACjB,QAAQ,MAAO,IAAa,EAAW,MAAM,MAAQ,EAAE,KAAK,SAAS,EAAI,CAAC,GAAG,GAAK,CAClF,KAAK,MACG,EAAmB,EAAK,CAC/B,CACL;AAED,GAAI,EAAM,UACR,EAAM,YAAY,EAChB,UACD,CAAC;KAIA,IAAmB,YAAY;GACnC,IAAM,IAA8B,EAAM,aACtC,CACE;IACE,MAAM;IACN,YAAY,CAAC,GAAG,EAAM,WAAW;IAClC,CACH,GACA,EAAE;AAEN,GAAI,EAAM,QACR,GAAwB,EACpB,SAAS,4BAA4B;IACrC,OAAO;IACP;IACD,CAAA,CACA,MAAM,EAAE,eAAY;AACnB,IAAI,KACF,EAAM,YAAY,EAChB,UACD,CAAC;KAEL,CACA,OAAO,MAAS,EAAK,QAAQ,EAAK,GAErC,GAAwB,EACpB,SAAS,yBAAyB;IAClC,OAAO;IACP;IACD,CAAA,CACA,MAAM,EAAE,cAAW;AAClB,IAAI,KACF,EAAM,YAAY,EAChB,OAAO,CAAC,EAAK,EACd,CAAC;KAEL,CACA,OAAO,MAAS,EAAK,QAAQ,EAAK;;yBAMvC,EAOM,OAAA;GAPA,OAAK,EAAE,EAAA,EAAK,CAAC,MAAK;GAAS;GAAS,YAAQ,AAAA,EAAA,OAAA,QAAT,IAAiB,CAAA,UAAA,CAAA;GAAE,SAAO;;GACjE,EAAgC,EAAA,EAAA,EAAA,EAAtB,MAAK,gBAAc,CAAA;GAC7B,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;GACF,EAAA,cAAA,GAAA,EAAZ,EAEC,QAAA;;IAFwB,OAAK,EAAE,EAAA,EAAK,CAAC,UAAS;MAC5C,wBAAmB,EAAG,EAAA,WAAW,KAAI,KAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAE5B,EAAK,SAAA,GAAA,EAAjB,EAAmE,QAAnE,GAAmE,EAApB,EAAK,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}

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

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

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

@@ -11,6 +11,7 @@ import a from "./Remote.js";
 import o from "./Local.js";
 import { computed as s, createBlock as c, createCommentVNode as l, createElementVNode as u, createSlots as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeProps as h, normalizeClass as g, openBlock as _, ref as v, toDisplayString as y, unref as b, useTemplateRef as x, withCtx as S, withModifiers as C } from "vue";
 import { notEmpty as w } from "@milaboratories/helpers";
+//#region src/components/PlFileDialog/PlFileDialog.vue?vue&type=script&setup=true&lang.ts
 var T = { style: { margin: "0 24px" } }, E = /* @__PURE__ */ m({
 	__name: "PlFileDialog",
 	props: {
@@ -91,6 +92,7 @@ var T = { style: { margin: "0 24px" } }, E = /* @__PURE__ */ m({
 		]));
 	}
 });
+//#endregion
 export { E as default };
 //# sourceMappingURL=PlFileDialog.vue2.js.map