npm - @milaboratories/uikit - Versions diffs - 2.10.39 → 2.10.41 - Mend

@milaboratories/uikit 2.10.39 → 2.10.41

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

package/dist/components/PlDropdown/pl-dropdown.css CHANGED Viewed

	@@ -1 +1 @@
1	- .pl-dropdown__options{--option-hover-bg:var(--btn-sec-hover-grey);z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);--thumb-color:var(--ic-02);border-radius:6px;max-height:244px;position:absolute;overflow-y:auto;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14}.pl-dropdown__options::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-dropdown__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown__options::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-dropdown__options .nothing-found{height:var(--control-height);line-height:var(--control-height);opacity:.5;background-color:#fff;padding:0 10px;font-style:italic}.pl-dropdown__options .group-container{padding:4px 0}.pl-dropdown{--contour-color:var(--txt-01);--contour-border-width:1px;--label-offset-left-x:8px;--label-offset-right-x:8px;--label-color:var(--txt-01);min-height:var(--control-height);font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base);border-radius:6px;outline:none;position:relative}.pl-dropdown__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown label{top:-8px;left:var(--label-offset-left-x);white-space:pre;text-overflow:ellipsis;max-width:calc(100% - 16px);cursor:inherit;color:var(--label-color);background:var(--bg-elevated-01);border-bottom-right-radius:4px;border-bottom-left-radius:4px;align-items:center;gap:4px;padding:0 4px;font-size:12px;font-weight:500;display:flex;position:absolute;overflow:hidden}.pl-dropdown label>span{white-space:pre;text-overflow:ellipsis;overflow:hidden}.pl-dropdown__container{min-height:var(--control-height);color:var(--txt-01);border-radius:6px;position:absolute;top:0;left:0;right:0}.pl-dropdown__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown__field{min-height:var(--control-height);line-height:var(--control-height);cursor:pointer;background:0 0;border-radius:6px;flex-direction:row;align-items:center;padding-left:11px;display:flex;position:relative;overflow:hidden}.pl-dropdown__field .input-value{pointer-events:none;color:var(--txt-01);white-space:pre;text-overflow:ellipsis;cursor:inherit;flex-direction:row;align-items:center;padding:0 60px 0 11px;line-height:20px;display:flex;position:absolute;inset:0;overflow:hidden}.pl-dropdown__field input{min-height:calc(var(--control-height) - 2px);font-family:inherit;line-height:20px;font-size:inherit;width:calc(100% - 40px);color:var(--txt-01);caret-color:var(--border-color-focus);background-color:#0000;border:none;padding:0}.pl-dropdown__field input:focus{outline:none}.pl-dropdown__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown__helper{color:var(--txt-03);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-dropdown__error{color:var(--txt-error);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-dropdown__controls{flex-direction:row;align-items:center;gap:6px;margin-left:auto;display:flex}.pl-dropdown__controls .mask-16,.pl-dropdown__controls .mask-24{cursor:pointer}.pl-dropdown__controls .clear{--icon-color:var(--ic-02)}.pl-dropdown__controls .mask-loading{--icon-color:var(--ic-accent);animation:2.5s linear infinite spin}.pl-dropdown__arrow-wrapper{min-height:var(--control-height);align-items:center;padding-right:11px;display:flex}.pl-dropdown .arrow-icon{cursor:pointer}.pl-dropdown .arrow-icon.arrow-icon-default{transition:transform .2s}.pl-dropdown.open,.pl-dropdown:focus-within{z-index:1;--label-color:var(--txt-focus)}.pl-dropdown.open .pl-dropdown__container{z-index:1000}.pl-dropdown.open .pl-dropdown__field{border-radius:6px 6px 0 0}.pl-dropdown.open .arrow-icon.arrow-icon-default{transform:rotate(-180deg)}.pl-dropdown:hover{--contour-color:var(--control-hover-color)}.pl-dropdown:focus-within:not(.error){--label-color:var(--txt-focus);--contour-color:var(--border-color-focus);--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown:focus-within.error{--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--color-error-shadow)}.pl-dropdown.error{--contour-color:var(--txt-error);--label-color:var(--txt-error)}.pl-dropdown.disabled{--contour-color:var(--color-dis-01);--icon-color:var(--color-dis-01);--label-color:var(--color-dis-01);cursor:not-allowed;pointer-events:none~~;-webkit-user-select:none~~;user-select:none}.pl-dropdown.disabled .input-value{color:var(--dis-01)}
1	+ .pl-dropdown__options{--option-hover-bg:var(--btn-sec-hover-grey);z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);--thumb-color:var(--ic-02);border-radius:6px;max-height:244px;position:absolute;overflow-y:auto;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14}.pl-dropdown__options::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-dropdown__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown__options::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-dropdown__options .nothing-found{height:var(--control-height);line-height:var(--control-height);opacity:.5;background-color:#fff;padding:0 10px;font-style:italic}.pl-dropdown__options .group-container{padding:4px 0}.pl-dropdown{--contour-color:var(--txt-01);--contour-border-width:1px;--label-offset-left-x:8px;--label-offset-right-x:8px;--label-color:var(--txt-01);min-height:var(--control-height);font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base);border-radius:6px;outline:none;position:relative}.pl-dropdown__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown label{top:-8px;left:var(--label-offset-left-x);white-space:pre;text-overflow:ellipsis;max-width:calc(100% - 16px);cursor:inherit;color:var(--label-color);background:var(--bg-elevated-01);border-bottom-right-radius:4px;border-bottom-left-radius:4px;align-items:center;gap:4px;padding:0 4px;font-size:12px;font-weight:500;display:flex;position:absolute;overflow:hidden}.pl-dropdown label>span{white-space:pre;text-overflow:ellipsis;overflow:hidden}.pl-dropdown__container{min-height:var(--control-height);color:var(--txt-01);border-radius:6px;position:absolute;top:0;left:0;right:0}.pl-dropdown__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown__field{min-height:var(--control-height);line-height:var(--control-height);cursor:pointer;background:0 0;border-radius:6px;flex-direction:row;align-items:center;padding-left:11px;display:flex;position:relative;overflow:hidden}.pl-dropdown__field .input-value{pointer-events:none;color:var(--txt-01);white-space:pre;text-overflow:ellipsis;cursor:inherit;flex-direction:row;align-items:center;padding:0 60px 0 11px;line-height:20px;display:flex;position:absolute;inset:0;overflow:hidden}.pl-dropdown__field input{min-height:calc(var(--control-height) - 2px);font-family:inherit;line-height:20px;font-size:inherit;width:calc(100% - 40px);color:var(--txt-01);caret-color:var(--border-color-focus);background-color:#0000;border:none;padding:0}.pl-dropdown__field input:focus{outline:none}.pl-dropdown__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown__helper{color:var(--txt-03);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-dropdown__error{color:var(--txt-error);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-dropdown__controls{flex-direction:row;align-items:center;gap:6px;margin-left:auto;display:flex}.pl-dropdown__controls .mask-16,.pl-dropdown__controls .mask-24{cursor:pointer}.pl-dropdown__controls .clear{--icon-color:var(--ic-02)}.pl-dropdown__controls .mask-loading{--icon-color:var(--ic-accent);animation:2.5s linear infinite spin}.pl-dropdown__arrow-wrapper{min-height:var(--control-height);align-items:center;padding-right:11px;display:flex}.pl-dropdown .arrow-icon{cursor:pointer}.pl-dropdown .arrow-icon.arrow-icon-default{transition:transform .2s}.pl-dropdown.open,.pl-dropdown:focus-within{z-index:1;--label-color:var(--txt-focus)}.pl-dropdown.open .pl-dropdown__container{z-index:1000}.pl-dropdown.open .pl-dropdown__field{border-radius:6px 6px 0 0}.pl-dropdown.open .arrow-icon.arrow-icon-default{transform:rotate(-180deg)}.pl-dropdown:hover{--contour-color:var(--control-hover-color)}.pl-dropdown:focus-within:not(.error){--label-color:var(--txt-focus);--contour-color:var(--border-color-focus);--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown:focus-within.error{--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--color-error-shadow)}.pl-dropdown.error{--contour-color:var(--txt-error);--label-color:var(--txt-error)}.pl-dropdown.disabled{--contour-color:var(--color-dis-01);--icon-color:var(--color-dis-01);--label-color:var(--color-dis-01);cursor:not-allowed;pointer-events:none;user-select:none}.pl-dropdown.disabled .input-value{color:var(--dis-01)}

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

@@ -2,15 +2,19 @@ import e from "../DropdownListItem.js";
 import { tap as t, tapIf as n } from "../../helpers/functions.js";
 import { normalizeListOptions as r } from "../../helpers/utils.js";
 import i from "../PlTooltip/PlTooltip.js";
+import "../PlTooltip/index.js";
 import { getErrorMessage as a } from "../../helpers/error.js";
 import o from "../LongText.js";
 import { scrollIntoView as s } from "../../helpers/dom.js";
 import c from "../PlSvg/PlSvg.js";
+import "../PlSvg/index.js";
 import l from "../PlIcon24/PlIcon24.js";
 import ee from "../PlIcon16/PlIcon16.js";
 import te from "../../utils/DoubleContour.js";
 import { useLabelNotch as ne } from "../../utils/useLabelNotch.js";
 import { deepEqual as u } from "../../helpers/objects.js";
+import "../PlIcon16/index.js";
+import "../PlMaskIcon24/index.js";
 import re from "../../assets/images/required.js";
 /* empty css                   */
 import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as ie, createVNode as _, defineComponent as v, normalizeClass as y, openBlock as b, reactive as ae, ref as x, renderList as oe, renderSlot as S, toDisplayString as C, unref as w, useSlots as se, vModelText as ce, watch as T, watchPostEffect as E, withCtx as D, withDirectives as le, withModifiers as O } from "vue";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlDropdownLegacy.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlDropdownLegacy/PlDropdownLegacy.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A component for selecting one value from a list of options\n /\nexport default {\n name: \"PlDropdown\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport \"./pl-dropdown-legacy.scss\";\nimport { computed, reactive, ref, unref, useSlots, watch, watchPostEffect } from \"vue\";\nimport { tap, tapIf } from \"../../helpers/functions\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport type { ListOption, ListOptionNormalized } from \"../../types\";\nimport { scrollIntoView } from \"../../helpers/dom\";\nimport { deepEqual } from \"../../helpers/objects\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport LongText from \"../LongText.vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { PlSvg } from \"../PlSvg\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\n\nconst emit = defineEmits<{\n /\n Emitted when the model value is updated.\n /\n (e: \"update:modelValue\", value: M \| undefined): void;\n}>();\n\nconst props = withDefaults(\n defineProps<{\n /\n The current selected value of the dropdown.\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 A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n /\n loadingOptionsHelper?: string;\n /\n Error message displayed below the dropdown (optional)\n /\n error?: unknown;\n /\n Placeholder text shown when no value is selected.\n /\n placeholder?: string;\n /\n Enables a button to clear the selected value (default: false)\n /\n clearable?: boolean;\n /\n If `true`, the dropdown component is marked as required.\n /\n required?: boolean;\n /\n If `true`, the dropdown component is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n Custom icon (16px) class for the dropdown arrow (optional)\n /\n arrowIcon?: string;\n /\n Custom icon (24px) class for the dropdown arrow (optional)\n /\n arrowIconLarge?: string;\n /\n Option list item size\n */\n optionSize?: \"small\" \| \"medium\";\n }>(),\n {\n label: \"\",\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n placeholder: \"...\",\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n arrowIconLarge: undefined,\n optionSize: \"small\",\n options: undefined,\n },\n);\n\nconst slots = useSlots();\n\nconst root = ref<HTMLElement \| undefined>();\nconst list = ref<HTMLElement \| undefined>();\nconst input = ref<HTMLInputElement \| undefined>();\n\nconst data = reactive({\n search: \"\",\n activeIndex: -1,\n open: false,\n});\n\nconst findActiveIndex = () =>\n tap(\n filteredRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n (v) => (v < 0 ? 0 : v),\n );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst isLoadingOptions = computed(() => {\n return props.options === undefined;\n});\n\nconst isDisabled = computed(() => {\n if (isLoadingOptions.value) {\n return true;\n }\n\n return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\n});\n\nconst computedError = computed(() => {\n if (isLoadingOptions.value) {\n return undefined;\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n if (props.modelValue !== undefined && selectedIndex.value === -1) {\n return \"The selected value is not one of the options\";\n }\n\n return undefined;\n});\n\nconst optionsRef = computed(() =>\n normalizeListOptions(props.options ?? []).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n })),\n);\n\nconst textValue = computed(() => {\n const options = unref(optionsRef);\n\n const item: ListOption \| undefined = options.find((o) => deepEqual(o.value, props.modelValue));\n\n return item?.label \|\| props.modelValue; // @todo show inner value?\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && props.modelValue) {\n return \"\";\n }\n\n return props.modelValue ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst filteredRef = computed(() => {\n const options = optionsRef.value;\n\n if (data.search) {\n return options.filter((o: ListOptionNormalized) => {\n const search = data.search.toLowerCase();\n\n if (o.label.toLowerCase().includes(search)) {\n return true;\n }\n\n if (o.description && o.description.toLowerCase().includes(search)) {\n return true;\n }\n\n if (typeof o.value === \"string\") {\n return o.value.toLowerCase().includes(search);\n }\n\n return o.value === data.search;\n });\n }\n\n return options;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst selectOption = (v: M \| undefined) => {\n emit(\"update:modelValue\", v);\n data.search = \"\";\n data.open = false;\n root?.value?.focus();\n};\n\nconst clear = () => emit(\"update:modelValue\", undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => (data.open = !data.open);\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n if (!root?.value?.contains(event.relatedTarget as Node \| null)) {\n data.search = \"\";\n data.open = false;\n }\n};\n\nconst scrollIntoActive = () => {\n const $list = list.value;\n\n if (!$list) {\n return;\n }\n\n tapIf($list.querySelector(\".hovered-item\") as HTMLElement, (opt) => {\n scrollIntoView($list, opt);\n });\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n return;\n } else {\n e.preventDefault();\n }\n\n const { open, activeIndex } = 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 root.value?.focus();\n }\n\n const filtered = unref(filteredRef);\n\n const { length } = filtered;\n\n if (!length) {\n return;\n }\n\n if (e.code === \"Enter\") {\n selectOption(filtered.find((it) => it.index === activeIndex)?.value);\n }\n\n const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n const newIndex = Math.abs(localIndex + delta + length) % length;\n\n data.activeIndex = filteredRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(root);\n\nwatch(() => props.modelValue, updateActive, { immediate: true });\n\nwatch(\n () => data.open,\n (open) => (open ? input.value?.focus() : \"\"),\n);\n\nwatchPostEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n data.search; // to watch\n\n if (data.activeIndex >= 0 && data.open) {\n scrollIntoActive();\n }\n});\n</script>\n\n<template>\n <div class=\"ui-dropdown__envelope\">\n <div\n ref=\"root\"\n :tabindex=\"tabindex\"\n class=\"ui-dropdown\"\n :class=\"{ open: data.open, error, disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"ui-dropdown__container\">\n <div class=\"ui-dropdown__field\">\n <input\n ref=\"input\"\n v-model=\"data.search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"computedPlaceholder\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"onInputFocus\"\n />\n\n <div v-if=\"!data.open\" @click=\"setFocusOnInput\">\n <LongText class=\"input-value\"> {{ textValue }} </LongText>\n </div>\n\n <div class=\"ui-dropdown__controls\">\n <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n <PlIcon16\n v-if=\"clearable && hasValue\"\n class=\"clear\"\n name=\"delete-clear\"\n @click.stop=\"clear\"\n />\n <slot name=\"append\" />\n <div\n v-if=\"arrowIconLarge\"\n class=\"arrow-icon\"\n :class=\"[`icon-24 ${arrowIconLarge}`]\"\n @click.stop=\"toggleOpen\"\n />\n <div\n v-else-if=\"arrowIcon\"\n class=\"arrow-icon\"\n :class=\"[`icon-16 ${arrowIcon}`]\"\n @click.stop=\"toggleOpen\"\n />\n <div v-else class=\"arrow-icon arrow-icon-default\" @click.stop=\"toggleOpen\" />\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 <div v-if=\"data.open\" ref=\"list\" class=\"ui-dropdown__options\">\n <DropdownListItem\n v-for=\"(item, index) in filteredRef\"\n :key=\"index\"\n :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"optionSize\"\n @click.stop=\"selectOption(item.value)\"\n />\n <div v-if=\"!filteredRef.length\" class=\"nothing-found\">Nothing found</div>\n </div>\n <DoubleContour class=\"ui-dropdown__contour\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"ui-dropdown__error\">{{ computedError }}</div>\n <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"ui-dropdown__helper\">\n {{ loadingOptionsHelper }}\n </div>\n <div v-else-if=\"helper\" class=\"ui-dropdown__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"PlDropdownLegacy.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlDropdownLegacy/PlDropdownLegacy.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A component for selecting one value from a list of options\n /\nexport default {\n name: \"PlDropdown\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport \"./pl-dropdown-legacy.scss\";\nimport { computed, reactive, ref, unref, useSlots, watch, watchPostEffect } from \"vue\";\nimport { tap, tapIf } from \"../../helpers/functions\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport type { ListOption, ListOptionNormalized } from \"../../types\";\nimport { scrollIntoView } from \"../../helpers/dom\";\nimport { deepEqual } from \"../../helpers/objects\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport LongText from \"../LongText.vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { PlSvg } from \"../PlSvg\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\n\nconst emit = defineEmits<{\n /\n Emitted when the model value is updated.\n /\n (e: \"update:modelValue\", value: M \| undefined): void;\n}>();\n\nconst props = withDefaults(\n defineProps<{\n /\n The current selected value of the dropdown.\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 A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n /\n loadingOptionsHelper?: string;\n /\n Error message displayed below the dropdown (optional)\n /\n error?: unknown;\n /\n Placeholder text shown when no value is selected.\n /\n placeholder?: string;\n /\n Enables a button to clear the selected value (default: false)\n /\n clearable?: boolean;\n /\n If `true`, the dropdown component is marked as required.\n /\n required?: boolean;\n /\n If `true`, the dropdown component is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n Custom icon (16px) class for the dropdown arrow (optional)\n /\n arrowIcon?: string;\n /\n Custom icon (24px) class for the dropdown arrow (optional)\n /\n arrowIconLarge?: string;\n /\n Option list item size\n */\n optionSize?: \"small\" \| \"medium\";\n }>(),\n {\n label: \"\",\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n placeholder: \"...\",\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n arrowIconLarge: undefined,\n optionSize: \"small\",\n options: undefined,\n },\n);\n\nconst slots = useSlots();\n\nconst root = ref<HTMLElement \| undefined>();\nconst list = ref<HTMLElement \| undefined>();\nconst input = ref<HTMLInputElement \| undefined>();\n\nconst data = reactive({\n search: \"\",\n activeIndex: -1,\n open: false,\n});\n\nconst findActiveIndex = () =>\n tap(\n filteredRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n (v) => (v < 0 ? 0 : v),\n );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst isLoadingOptions = computed(() => {\n return props.options === undefined;\n});\n\nconst isDisabled = computed(() => {\n if (isLoadingOptions.value) {\n return true;\n }\n\n return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\n});\n\nconst computedError = computed(() => {\n if (isLoadingOptions.value) {\n return undefined;\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n if (props.modelValue !== undefined && selectedIndex.value === -1) {\n return \"The selected value is not one of the options\";\n }\n\n return undefined;\n});\n\nconst optionsRef = computed(() =>\n normalizeListOptions(props.options ?? []).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n })),\n);\n\nconst textValue = computed(() => {\n const options = unref(optionsRef);\n\n const item: ListOption \| undefined = options.find((o) => deepEqual(o.value, props.modelValue));\n\n return item?.label \|\| props.modelValue; // @todo show inner value?\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && props.modelValue) {\n return \"\";\n }\n\n return props.modelValue ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst filteredRef = computed(() => {\n const options = optionsRef.value;\n\n if (data.search) {\n return options.filter((o: ListOptionNormalized) => {\n const search = data.search.toLowerCase();\n\n if (o.label.toLowerCase().includes(search)) {\n return true;\n }\n\n if (o.description && o.description.toLowerCase().includes(search)) {\n return true;\n }\n\n if (typeof o.value === \"string\") {\n return o.value.toLowerCase().includes(search);\n }\n\n return o.value === data.search;\n });\n }\n\n return options;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst selectOption = (v: M \| undefined) => {\n emit(\"update:modelValue\", v);\n data.search = \"\";\n data.open = false;\n root?.value?.focus();\n};\n\nconst clear = () => emit(\"update:modelValue\", undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => (data.open = !data.open);\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n if (!root?.value?.contains(event.relatedTarget as Node \| null)) {\n data.search = \"\";\n data.open = false;\n }\n};\n\nconst scrollIntoActive = () => {\n const $list = list.value;\n\n if (!$list) {\n return;\n }\n\n tapIf($list.querySelector(\".hovered-item\") as HTMLElement, (opt) => {\n scrollIntoView($list, opt);\n });\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n return;\n } else {\n e.preventDefault();\n }\n\n const { open, activeIndex } = 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 root.value?.focus();\n }\n\n const filtered = unref(filteredRef);\n\n const { length } = filtered;\n\n if (!length) {\n return;\n }\n\n if (e.code === \"Enter\") {\n selectOption(filtered.find((it) => it.index === activeIndex)?.value);\n }\n\n const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n const newIndex = Math.abs(localIndex + delta + length) % length;\n\n data.activeIndex = filteredRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(root);\n\nwatch(() => props.modelValue, updateActive, { immediate: true });\n\nwatch(\n () => data.open,\n (open) => (open ? input.value?.focus() : \"\"),\n);\n\nwatchPostEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n data.search; // to watch\n\n if (data.activeIndex >= 0 && data.open) {\n scrollIntoActive();\n }\n});\n</script>\n\n<template>\n <div class=\"ui-dropdown__envelope\">\n <div\n ref=\"root\"\n :tabindex=\"tabindex\"\n class=\"ui-dropdown\"\n :class=\"{ open: data.open, error, disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"ui-dropdown__container\">\n <div class=\"ui-dropdown__field\">\n <input\n ref=\"input\"\n v-model=\"data.search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"computedPlaceholder\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"onInputFocus\"\n />\n\n <div v-if=\"!data.open\" @click=\"setFocusOnInput\">\n <LongText class=\"input-value\"> {{ textValue }} </LongText>\n </div>\n\n <div class=\"ui-dropdown__controls\">\n <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n <PlIcon16\n v-if=\"clearable && hasValue\"\n class=\"clear\"\n name=\"delete-clear\"\n @click.stop=\"clear\"\n />\n <slot name=\"append\" />\n <div\n v-if=\"arrowIconLarge\"\n class=\"arrow-icon\"\n :class=\"[`icon-24 ${arrowIconLarge}`]\"\n @click.stop=\"toggleOpen\"\n />\n <div\n v-else-if=\"arrowIcon\"\n class=\"arrow-icon\"\n :class=\"[`icon-16 ${arrowIcon}`]\"\n @click.stop=\"toggleOpen\"\n />\n <div v-else class=\"arrow-icon arrow-icon-default\" @click.stop=\"toggleOpen\" />\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 <div v-if=\"data.open\" ref=\"list\" class=\"ui-dropdown__options\">\n <DropdownListItem\n v-for=\"(item, index) in filteredRef\"\n :key=\"index\"\n :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"optionSize\"\n @click.stop=\"selectOption(item.value)\"\n />\n <div v-if=\"!filteredRef.length\" class=\"nothing-found\">Nothing found</div>\n </div>\n <DoubleContour class=\"ui-dropdown__contour\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"ui-dropdown__error\">{{ computedError }}</div>\n <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"ui-dropdown__helper\">\n {{ loadingOptionsHelper }}\n </div>\n <div v-else-if=\"helper\" class=\"ui-dropdown__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/PlDropdownLegacy/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./PlDropdownLegacy.js";

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

	@@ -0,0 +1 @@
1	+ import "./PlDropdownLine.js";

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

	@@ -1 +1 @@
1	- .pl-line-dropdown{box-sizing:border-box;outline:none;align-items:center;width:fit-content;max-width:256px;padding:8px 0;display:flex;position:relative}.pl-line-dropdown:focus-within:after{border-bottom:2px solid var(--border-color-focus)}.pl-line-dropdown__prefix,.pl-line-dropdown__input{text-transform:uppercase}.pl-line-dropdown:hover:after{border-bottom:2px solid var(--border-color-focus)}.pl-line-dropdown:after{content:"";border-bottom:2px solid var(--color-div-grey);width:100%;position:absolute;bottom:0}.pl-line-dropdown {color:var(--txt-01);font-family:var(--font-family-base);letter-spacing:.52px;font-size:13px;font-style:normal;font-weight:600;line-height:14px}.pl-line-dropdown__input::placeholder{color:var(--txt-mask)}.pl-line-dropdown__icon{background-color:var(--control-mask-fill);align-items:center;width:16px;min-width:16px;height:16px;display:flex~~;-webkit-~~mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-position:50%;mask-~~position:50%;-webkit-mask-~~size:16px;mask-~~size:16px;-webkit-mask-~~repeat:no-repeat~~;mask-repeat:no-repeat~~}.pl-line-dropdown__icon-clear{background-color:var(--color-ic-02);width:16px;height:16px~~;-webkit-~~mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");-webkit-mask-position:50%;mask-~~position:50%;-webkit-mask-~~size:16px;mask-~~size:16px;-webkit-mask-~~repeat:no-repeat~~;mask-repeat:no-repeat~~}.pl-line-dropdown.open .pl-line-dropdown__icon{width:16px;height:16px~~;-webkit-~~mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-position:50%;mask-~~position:50%;-webkit-mask-~~size:16px;mask-~~size:16px;-webkit-mask-~~repeat:no-repeat~~;mask-repeat:no-repeat~~}.pl-line-dropdown.open:after{border-bottom:2px solid var(--border-color-focus)}.pl-line-dropdown__icon-wrapper{padding:4px 2px 4px 0}.pl-line-dropdown.disabled {color:var(--txt-mask);cursor:not-allowed}.pl-line-dropdown.disabled .pl-line-dropdown__icon{background-color:var(--color-div-grey)!important}.pl-line-dropdown.disabled:after,.pl-line-dropdown.disabled:hover:after{border-bottom:2px solid var(--color-div-grey)!important}.pl-line-dropdown__no-item{padding:8px 12px}.pl-line-dropdown__no-item-title{text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--txt-03)!important}.pl-line-dropdown__items{z-index:var(--z-dropdown-options);border:1px solid var(--color-div-grey);box-sizing:border-box;background-color:var(--bg-elevated-01);width:256px;max-height:320px;box-shadow:var(--shadow-m);--thumb-color:var(--ic-02);border-radius:6px;padding:12px 0;position:absolute;top:0;overflow-y:auto}.pl-line-dropdown__items::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-line-dropdown__items::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-line-dropdown__items::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-line-dropdown__items-tabs{z-index:var(--z-dropdown-options);background-color:var(--color-div-bw);border:1px solid var(--color-div-grey);max-width:400px;box-shadow:var(--shadow-m);--thumb-color:var(--ic-02);border-radius:6px;padding:6px 12px 12px;display:flex;position:absolute;top:0;overflow-x:auto}.pl-line-dropdown__items-tabs::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-line-dropdown__items-tabs::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-line-dropdown__items-tabs::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}
1	+ .pl-line-dropdown{box-sizing:border-box;outline:none;align-items:center;width:fit-content;max-width:256px;padding:8px 0;display:flex;position:relative}.pl-line-dropdown:focus-within:after{border-bottom:2px solid var(--border-color-focus)}.pl-line-dropdown__prefix,.pl-line-dropdown__input{text-transform:uppercase}.pl-line-dropdown:hover:after{border-bottom:2px solid var(--border-color-focus)}.pl-line-dropdown:after{content:"";border-bottom:2px solid var(--color-div-grey);width:100%;position:absolute;bottom:0}.pl-line-dropdown {color:var(--txt-01);font-family:var(--font-family-base);letter-spacing:.52px;font-size:13px;font-style:normal;font-weight:600;line-height:14px}.pl-line-dropdown__input::placeholder{color:var(--txt-mask)}.pl-line-dropdown__icon{background-color:var(--control-mask-fill);align-items:center;width:16px;min-width:16px;height:16px;display:flex;mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-position:50%;mask-size:16px;mask-repeat:no-repeat}.pl-line-dropdown__icon-clear{background-color:var(--color-ic-02);width:16px;height:16px;mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");mask-position:50%;mask-size:16px;mask-repeat:no-repeat}.pl-line-dropdown.open .pl-line-dropdown__icon{width:16px;height:16px;mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-position:50%;mask-size:16px;mask-repeat:no-repeat}.pl-line-dropdown.open:after{border-bottom:2px solid var(--border-color-focus)}.pl-line-dropdown__icon-wrapper{padding:4px 2px 4px 0}.pl-line-dropdown.disabled {color:var(--txt-mask);cursor:not-allowed}.pl-line-dropdown.disabled .pl-line-dropdown__icon{background-color:var(--color-div-grey)!important}.pl-line-dropdown.disabled:after,.pl-line-dropdown.disabled:hover:after{border-bottom:2px solid var(--color-div-grey)!important}.pl-line-dropdown__no-item{padding:8px 12px}.pl-line-dropdown__no-item-title{text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--txt-03)!important}.pl-line-dropdown__items{z-index:var(--z-dropdown-options);border:1px solid var(--color-div-grey);box-sizing:border-box;background-color:var(--bg-elevated-01);width:256px;max-height:320px;box-shadow:var(--shadow-m);--thumb-color:var(--ic-02);border-radius:6px;padding:12px 0;position:absolute;top:0;overflow-y:auto}.pl-line-dropdown__items::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-line-dropdown__items::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-line-dropdown__items::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-line-dropdown__items-tabs{z-index:var(--z-dropdown-options);background-color:var(--color-div-bw);border:1px solid var(--color-div-grey);max-width:400px;box-shadow:var(--shadow-m);--thumb-color:var(--ic-02);border-radius:6px;padding:6px 12px 12px;display:flex;position:absolute;top:0;overflow-x:auto}.pl-line-dropdown__items-tabs::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-line-dropdown__items-tabs::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-line-dropdown__items-tabs::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}

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

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

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

@@ -1,15 +1,19 @@
 import e from "../DropdownListItem.js";
 import { normalizeListOptions as t } from "../../helpers/utils.js";
 import n from "../PlTooltip/PlTooltip.js";
+import "../PlTooltip/index.js";
 import { getErrorMessage as r } from "../../helpers/error.js";
 import i from "../PlSvg/PlSvg.js";
+import "../PlSvg/index.js";
 import a from "../PlIcon24/PlIcon24.js";
+import "../PlIcon24/index.js";
 import ee from "../../utils/DoubleContour.js";
 import { useLabelNotch as o } from "../../utils/useLabelNotch.js";
 import { deepEqual as s, deepIncludes as c } from "../../helpers/objects.js";
 import te from "../../utils/DropdownOverlay/DropdownOverlay.js";
 import l from "../../assets/images/required.js";
 import u from "../PlChip/PlChip.js";
+import "../PlChip/index.js";
 import './pl-dropdown-multi.css';/* empty css                  */
 import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, normalizeClass as b, openBlock as x, reactive as ne, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, useSlots as re, useTemplateRef as ie, vModelText as ae, watch as oe, watchPostEffect as se, withCtx as D, withDirectives as ce, withModifiers as O } from "vue";
 var le = ["tabindex"], ue = { class: "pl-dropdown-multi__container" }, de = { class: "pl-dropdown-multi__field" }, fe = ["disabled", "placeholder"], pe = {

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/PlDropdownMulti/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./PlDropdownMulti.js";

package/dist/components/PlDropdownMulti/pl-dropdown-multi.css CHANGED Viewed

	@@ -1 +1 @@
1	- .pl-dropdown-multi{--contour-color:var(--txt-01);--contour-border-width:1px;--options-bg:#fff;--option-hover-bg:var(--btn-sec-hover-grey);--label-offset-left-x:8px;--label-offset-right-x:8px;--label-color:var(--txt-01);min-height:var(--control-height);font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base);border-radius:6px;outline:none;position:relative}[data-theme=dark] .pl-dropdown-multi{--options-bg:#1b1b1f}.pl-dropdown-multi__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown-multi label{top:-8px;left:var(--label-offset-left-x);white-space:pre;text-overflow:ellipsis;max-width:calc(100% - 16px);cursor:inherit;color:var(--label-color);background:var(--bg-elevated-01);border-bottom-right-radius:4px;border-bottom-left-radius:4px;align-items:center;gap:4px;padding:0 4px;font-size:12px;font-weight:500;display:flex;position:absolute;overflow:hidden}.pl-dropdown-multi label>span{white-space:pre;text-overflow:ellipsis;overflow:hidden}.pl-dropdown-multi__container{min-height:var(--control-height);color:var(--txt-01);border-radius:6px;padding:1px;position:absolute;top:0;left:0;right:0}.pl-dropdown-multi__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown-multi__options{z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);--thumb-color:var(--ic-02);border-radius:6px;max-height:244px;position:absolute;overflow-y:auto;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14}.pl-dropdown-multi__options::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-dropdown-multi__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown-multi__options::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-dropdown-multi__options .nothing-found{height:var(--control-height);opacity:.5;background-color:#fff;padding:0 10px;font-style:italic;line-height:20px}.pl-dropdown-multi__field{min-height:var(--control-height);cursor:pointer;background:0 0;border-radius:6px;flex-direction:row;align-items:center;padding-left:11px;line-height:20px;display:flex;position:relative;overflow:hidden}.pl-dropdown-multi__field .chips-container{color:var(--contour-color);align-items:center;gap:8px;padding:0 60px 0 11px;line-height:20px;display:flex;position:absolute;inset:0 30px 0 0;overflow:hidden}.pl-dropdown-multi__field input{min-height:calc(var(--control-height) - 2px);font-family:inherit;line-height:20px;font-size:inherit;width:calc(100% - 20px);color:var(--txt-01);caret-color:var(--border-color-focus);background-color:#0000;border:none;padding:0}.pl-dropdown-multi__field input:focus{outline:none}.pl-dropdown-multi__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown-multi__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown-multi__field:hover .clear{display:block}.pl-dropdown-multi__controls{flex-direction:row;align-items:center;gap:6px;margin-left:auto;display:flex}.pl-dropdown-multi__controls .mask-16,.pl-dropdown-multi__controls .mask-24{--icon-color:var(--control-mask-fill);cursor:pointer}.pl-dropdown-multi__controls .mask-loading{--icon-color:var(--ic-accent);animation:2.5s linear infinite spin}.pl-dropdown-multi__arrow-wrapper{min-height:var(--control-height);align-items:center;padding-right:11px;display:flex}.pl-dropdown-multi .arrow-icon{cursor:pointer}.pl-dropdown-multi .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);width:16px;height:16px;transition:transform .2s~~;-webkit-~~mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-position:50%;mask-~~position:50%;-webkit-mask-~~size:16px;mask-~~size:16px;-webkit-mask-~~repeat:no-repeat~~;mask-repeat:no-repeat~~}.pl-dropdown-multi__helper{color:var(--txt-03);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-dropdown-multi__error{color:var(--txt-error);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-dropdown-multi.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-dropdown-multi .clear{z-index:1;cursor:pointer;background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") 50% no-repeat;width:16px;height:16px;display:none;position:absolute;top:50%;right:36px;transform:translateY(-50%)}.pl-dropdown-multi.open,.pl-dropdown-multi:focus-within{z-index:1}.pl-dropdown-multi.open .pl-dropdown-multi__container .label,.pl-dropdown-multi:focus-within .pl-dropdown-multi__container .label{color:var(--txt-focus)}.pl-dropdown-multi.open .pl-dropdown-multi__container{z-index:1000}.pl-dropdown-multi.open .pl-dropdown-multi__field{border-radius:6px 6px 0 0}.pl-dropdown-multi.open .arrow{background-color:var(--control-mask-fill);width:16px;height:16px~~;-webkit-~~mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-position:50%;mask-~~position:50%;-webkit-mask-~~size:16px;mask-~~size:16px;-webkit-mask-~~repeat:no-repeat~~;mask-repeat:no-repeat~~}.pl-dropdown-multi:hover{--contour-color:var(--control-hover-color)}.pl-dropdown-multi:focus-within:not(.error){--label-color:var(--txt-focus);--contour-color:var(--border-color-focus);--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown-multi:focus-within.error{--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--color-error-shadow)}.pl-dropdown-multi.error{--contour-color:var(--txt-error);--label-color:var(--txt-error)}.pl-dropdown-multi.disabled{--contour-color:var(--color-dis-01);--control-mask-fill:var(--color-dis-01);--label-color:var(--color-dis-01);cursor:not-allowed;pointer-events:none}.pl-dropdown-multi.disabled .mask-loading{--icon-color:var(--ic-accent);animation:2.5s linear infinite spin}.pl-dropdown-multi__open-chips-container{padding:12px}.pl-dropdown-multi__open-chips-container .pl-chip{margin-bottom:4px;margin-right:4px}
1	+ .pl-dropdown-multi{--contour-color:var(--txt-01);--contour-border-width:1px;--options-bg:#fff;--option-hover-bg:var(--btn-sec-hover-grey);--label-offset-left-x:8px;--label-offset-right-x:8px;--label-color:var(--txt-01);min-height:var(--control-height);font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base);border-radius:6px;outline:none;position:relative}[data-theme=dark] .pl-dropdown-multi{--options-bg:#1b1b1f}.pl-dropdown-multi__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown-multi label{top:-8px;left:var(--label-offset-left-x);white-space:pre;text-overflow:ellipsis;max-width:calc(100% - 16px);cursor:inherit;color:var(--label-color);background:var(--bg-elevated-01);border-bottom-right-radius:4px;border-bottom-left-radius:4px;align-items:center;gap:4px;padding:0 4px;font-size:12px;font-weight:500;display:flex;position:absolute;overflow:hidden}.pl-dropdown-multi label>span{white-space:pre;text-overflow:ellipsis;overflow:hidden}.pl-dropdown-multi__container{min-height:var(--control-height);color:var(--txt-01);border-radius:6px;padding:1px;position:absolute;top:0;left:0;right:0}.pl-dropdown-multi__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown-multi__options{z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);--thumb-color:var(--ic-02);border-radius:6px;max-height:244px;position:absolute;overflow-y:auto;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14}.pl-dropdown-multi__options::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-dropdown-multi__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown-multi__options::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-dropdown-multi__options .nothing-found{height:var(--control-height);opacity:.5;background-color:#fff;padding:0 10px;font-style:italic;line-height:20px}.pl-dropdown-multi__field{min-height:var(--control-height);cursor:pointer;background:0 0;border-radius:6px;flex-direction:row;align-items:center;padding-left:11px;line-height:20px;display:flex;position:relative;overflow:hidden}.pl-dropdown-multi__field .chips-container{color:var(--contour-color);align-items:center;gap:8px;padding:0 60px 0 11px;line-height:20px;display:flex;position:absolute;inset:0 30px 0 0;overflow:hidden}.pl-dropdown-multi__field input{min-height:calc(var(--control-height) - 2px);font-family:inherit;line-height:20px;font-size:inherit;width:calc(100% - 20px);color:var(--txt-01);caret-color:var(--border-color-focus);background-color:#0000;border:none;padding:0}.pl-dropdown-multi__field input:focus{outline:none}.pl-dropdown-multi__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown-multi__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown-multi__field:hover .clear{display:block}.pl-dropdown-multi__controls{flex-direction:row;align-items:center;gap:6px;margin-left:auto;display:flex}.pl-dropdown-multi__controls .mask-16,.pl-dropdown-multi__controls .mask-24{--icon-color:var(--control-mask-fill);cursor:pointer}.pl-dropdown-multi__controls .mask-loading{--icon-color:var(--ic-accent);animation:2.5s linear infinite spin}.pl-dropdown-multi__arrow-wrapper{min-height:var(--control-height);align-items:center;padding-right:11px;display:flex}.pl-dropdown-multi .arrow-icon{cursor:pointer}.pl-dropdown-multi .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);width:16px;height:16px;transition:transform .2s;mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-position:50%;mask-size:16px;mask-repeat:no-repeat}.pl-dropdown-multi__helper{color:var(--txt-03);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-dropdown-multi__error{color:var(--txt-error);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-dropdown-multi.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-dropdown-multi .clear{z-index:1;cursor:pointer;background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") 50% no-repeat;width:16px;height:16px;display:none;position:absolute;top:50%;right:36px;transform:translateY(-50%)}.pl-dropdown-multi.open,.pl-dropdown-multi:focus-within{z-index:1}.pl-dropdown-multi.open .pl-dropdown-multi__container .label,.pl-dropdown-multi:focus-within .pl-dropdown-multi__container .label{color:var(--txt-focus)}.pl-dropdown-multi.open .pl-dropdown-multi__container{z-index:1000}.pl-dropdown-multi.open .pl-dropdown-multi__field{border-radius:6px 6px 0 0}.pl-dropdown-multi.open .arrow{background-color:var(--control-mask-fill);width:16px;height:16px;mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-position:50%;mask-size:16px;mask-repeat:no-repeat}.pl-dropdown-multi:hover{--contour-color:var(--control-hover-color)}.pl-dropdown-multi:focus-within:not(.error){--label-color:var(--txt-focus);--contour-color:var(--border-color-focus);--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown-multi:focus-within.error{--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--color-error-shadow)}.pl-dropdown-multi.error{--contour-color:var(--txt-error);--label-color:var(--txt-error)}.pl-dropdown-multi.disabled{--contour-color:var(--color-dis-01);--control-mask-fill:var(--color-dis-01);--label-color:var(--color-dis-01);cursor:not-allowed;pointer-events:none}.pl-dropdown-multi.disabled .mask-loading{--icon-color:var(--ic-accent);animation:2.5s linear infinite spin}.pl-dropdown-multi__open-chips-container{padding:12px}.pl-dropdown-multi__open-chips-container .pl-chip{margin-bottom:4px;margin-right:4px}

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

	@@ -0,0 +1 @@
1	+ import "./PlDropdownMultiRef.js";

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

@@ -1,4 +1,5 @@
 import e from "../PlDropdown/PlDropdown.js";
+import "../PlDropdown/index.js";
 import { computed as t, createBlock as n, createSlots as r, defineComponent as i, mergeProps as a, openBlock as o, renderSlot as s, unref as c, useSlots as l, withCtx as u } from "vue";
 var d = /* @__PURE__ */ i({
 	name: "PlDropdownRef",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlDropdownRef.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A component for selecting one value from a list of options\n /\nexport default {\n name: \"PlDropdownRef\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from \"vue\";\nimport type { ListOption, ModelRef, RefOption } from \"../../types\";\nimport { PlDropdown } from \"../PlDropdown\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n /\n Emitted when the model value is updated.\n /\n (e: \"update:modelValue\", value: M \| undefined): void;\n}>();\n\nconst props = withDefaults(\n defineProps<{\n /\n The current selected ref of the dropdown.\n /\n modelValue: M \| undefined;\n /\n The label text for the dropdown field (optional)\n /\n label?: string;\n /\n List of available ref options for the dropdown\n /\n options?: Readonly<RefOption[] \| ListOption<M>[]>;\n /\n A helper text displayed below the dropdown when there are no errors (optional).\n /\n helper?: string;\n /\n A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n /\n loadingOptionsHelper?: string;\n /\n Error message displayed below the dropdown (optional)\n /\n error?: unknown;\n /\n Placeholder text shown when no value is selected.\n /\n placeholder?: string;\n /\n Enables a button to clear the selected value (default: false)\n /\n clearable?: boolean;\n /\n If `true`, the dropdown component is marked as required.\n /\n required?: boolean;\n /\n If `true`, the dropdown component is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n Option list item size\n */\n optionSize?: \"small\" \| \"medium\";\n }>(),\n {\n label: \"\",\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n placeholder: \"...\",\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n optionSize: \"small\",\n options: undefined,\n },\n);\n\nconst options = computed(() =>\n props.options?.map((opt) =>\n \"ref\" in opt\n ? ({\n label: opt.label,\n value: opt.ref,\n group: opt.group,\n } as ListOption<M>)\n : opt,\n ),\n);\n</script>\n\n<template>\n <PlDropdown\n v-bind=\"props\"\n :options=\"options\"\n :loading-options-helper=\"loadingOptionsHelper\"\n :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n >\n <template v-if=\"slots.tooltip\" #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlDropdown>\n</template>\n"],"mappings":"~~;;;~~CAKE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;EAUR,IAAM,IAAa,GAAU,EASvB,IAAQ,GA8DR,IAAU,QACd,EAAM,SAAS,KAAK,MAClB,SAAS,IACJ;GACC,OAAO,EAAI;GACX,OAAO,EAAI;GACX,OAAO,EAAI;GACZ,GACD,EACL,CACF;yBAIC,EAUa,EAAA,EAAA,EAVb,EACU,GAAK;GACZ,SAAS,EAAA;GACT,0BAAwB,EAAA;GACxB,oBAAkB,EAAA,WAAQ,kBAAA;GAC1B,uBAAkB,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,qBAAsB,EAAM;mBAEtC,EAAA,EAAK,CAAC,UAAA;SAAU;eACP,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"PlDropdownRef.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A component for selecting one value from a list of options\n /\nexport default {\n name: \"PlDropdownRef\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from \"vue\";\nimport type { ListOption, ModelRef, RefOption } from \"../../types\";\nimport { PlDropdown } from \"../PlDropdown\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n /\n Emitted when the model value is updated.\n /\n (e: \"update:modelValue\", value: M \| undefined): void;\n}>();\n\nconst props = withDefaults(\n defineProps<{\n /\n The current selected ref of the dropdown.\n /\n modelValue: M \| undefined;\n /\n The label text for the dropdown field (optional)\n /\n label?: string;\n /\n List of available ref options for the dropdown\n /\n options?: Readonly<RefOption[] \| ListOption<M>[]>;\n /\n A helper text displayed below the dropdown when there are no errors (optional).\n /\n helper?: string;\n /\n A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n /\n loadingOptionsHelper?: string;\n /\n Error message displayed below the dropdown (optional)\n /\n error?: unknown;\n /\n Placeholder text shown when no value is selected.\n /\n placeholder?: string;\n /\n Enables a button to clear the selected value (default: false)\n /\n clearable?: boolean;\n /\n If `true`, the dropdown component is marked as required.\n /\n required?: boolean;\n /\n If `true`, the dropdown component is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n Option list item size\n */\n optionSize?: \"small\" \| \"medium\";\n }>(),\n {\n label: \"\",\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n placeholder: \"...\",\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n optionSize: \"small\",\n options: undefined,\n },\n);\n\nconst options = computed(() =>\n props.options?.map((opt) =>\n \"ref\" in opt\n ? ({\n label: opt.label,\n value: opt.ref,\n group: opt.group,\n } as ListOption<M>)\n : opt,\n ),\n);\n</script>\n\n<template>\n <PlDropdown\n v-bind=\"props\"\n :options=\"options\"\n :loading-options-helper=\"loadingOptionsHelper\"\n :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n >\n <template v-if=\"slots.tooltip\" #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlDropdown>\n</template>\n"],"mappings":";;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;EAUR,IAAM,IAAa,GAAU,EASvB,IAAQ,GA8DR,IAAU,QACd,EAAM,SAAS,KAAK,MAClB,SAAS,IACJ;GACC,OAAO,EAAI;GACX,OAAO,EAAI;GACX,OAAO,EAAI;GACZ,GACD,EACL,CACF;yBAIC,EAUa,EAAA,EAAA,EAVb,EACU,GAAK;GACZ,SAAS,EAAA;GACT,0BAAwB,EAAA;GACxB,oBAAkB,EAAA,WAAQ,kBAAA;GAC1B,uBAAkB,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,qBAAsB,EAAM;mBAEtC,EAAA,EAAK,CAAC,UAAA;SAAU;eACP,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA"}

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

	@@ -0,0 +1 @@
1	+ import "./PlDropdownRef.js";

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

	@@ -0,0 +1 @@
1	+ import "./PlEditableTitle.js";

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

	@@ -1 +1 @@
1	- ._component_1w6b3_1{--mask-icon-bg-color:transparent;--mask-size:24px;flex-direction:column;gap:0;display:flex;position:relative}._component_1w6b3_1:hover{--mask-icon-bg-color:var(--ic-02)}._component_1w6b3_1:focus-within:not(._component_1w6b3_1:hover){--mask-icon-bg-color:transparent}._component_1w6b3_1 ._container_1w6b3_15{margin-right:calc(var(--mask-size));flex-direction:row;align-items:center;gap:0;display:flex;position:relative}._component_1w6b3_1 ._container_1w6b3_15 span{letter-spacing:-.56px;white-space:nowrap;font-size:28px;font-weight:500;line-height:32px}._component_1w6b3_1 ._container_1w6b3_15 input{text-overflow:ellipsis;cursor:text;field-sizing:content;letter-spacing:-.56px;font-size:28px;font-weight:500;line-height:38px;font-family:var(--font-family-base);white-space:nowrap;border:none;outline:none;margin:0;padding-top:4px;padding-bottom:4px;padding-right:4px;overflow:hidden}._component_1w6b3_1 ._container_1w6b3_15 input::placeholder{color:var(--txt-mask)}._component_1w6b3_1 ._container_1w6b3_15:before{content:""~~;-webkit-~~mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%3e%3cpath%20fill='%23110529'%20fill-rule='evenodd'%20d='m5.136%2016.377%208.809-8.809%202.12%202.121-8.808%208.809h-2.12zM16.243%205.27l-1.238%201.237%202.121%202.122%201.238-1.238zm3.182%201.06a1.5%201.5%200%200%201%200%202.122L8.318%2019.559a1.5%201.5%200%200%201-1.06.439H4.635a1%201%200%200%201-1-1v-2.621c0-.398.158-.78.44-1.061L15.181%204.209a1.5%201.5%200%200%201%202.121%200zM20%2018.5h-8V20h8z'%20clip-rule='evenodd'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%3e%3cpath%20fill='%23110529'%20fill-rule='evenodd'%20d='m5.136%2016.377%208.809-8.809%202.12%202.121-8.808%208.809h-2.12zM16.243%205.27l-1.238%201.237%202.121%202.122%201.238-1.238zm3.182%201.06a1.5%201.5%200%200%201%200%202.122L8.318%2019.559a1.5%201.5%200%200%201-1.06.439H4.635a1%201%200%200%201-1-1v-2.621c0-.398.158-.78.44-1.061L15.181%204.209a1.5%201.5%200%200%201%202.121%200zM20%2018.5h-8V20h8z'%20clip-rule='evenodd'/%3e%3c/svg%3e");-webkit-mask-position:50%;mask-~~position:50%;-webkit-mask-~~repeat:no-repeat;mask-~~repeat:no-repeat;-webkit-mask-~~size:var(--mask-size);~~mask-size:var(--mask-size);~~width:var(--mask-size);height:var(--mask-size);right:calc((var(--mask-size)) * -1);background-color:var(--mask-icon-bg-color);cursor:pointer;position:absolute;bottom:6px}._component_1w6b3_1 ._error_1w6b3_69{white-space:nowrap;color:var(--txt-error);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px;position:absolute;bottom:-4px;transform:translateY(100%)}
1	+ ._component_1w6b3_1{--mask-icon-bg-color:transparent;--mask-size:24px;flex-direction:column;gap:0;display:flex;position:relative}._component_1w6b3_1:hover{--mask-icon-bg-color:var(--ic-02)}._component_1w6b3_1:focus-within:not(._component_1w6b3_1:hover){--mask-icon-bg-color:transparent}._component_1w6b3_1 ._container_1w6b3_15{margin-right:calc(var(--mask-size));flex-direction:row;align-items:center;gap:0;display:flex;position:relative}._component_1w6b3_1 ._container_1w6b3_15 span{letter-spacing:-.56px;white-space:nowrap;font-size:28px;font-weight:500;line-height:32px}._component_1w6b3_1 ._container_1w6b3_15 input{text-overflow:ellipsis;cursor:text;field-sizing:content;letter-spacing:-.56px;font-size:28px;font-weight:500;line-height:38px;font-family:var(--font-family-base);white-space:nowrap;border:none;outline:none;margin:0;padding-top:4px;padding-bottom:4px;padding-right:4px;overflow:hidden}._component_1w6b3_1 ._container_1w6b3_15 input::placeholder{color:var(--txt-mask)}._component_1w6b3_1 ._container_1w6b3_15:before{content:"";mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%3e%3cpath%20fill='%23110529'%20fill-rule='evenodd'%20d='m5.136%2016.377%208.809-8.809%202.12%202.121-8.808%208.809h-2.12zM16.243%205.27l-1.238%201.237%202.121%202.122%201.238-1.238zm3.182%201.06a1.5%201.5%200%200%201%200%202.122L8.318%2019.559a1.5%201.5%200%200%201-1.06.439H4.635a1%201%200%200%201-1-1v-2.621c0-.398.158-.78.44-1.061L15.181%204.209a1.5%201.5%200%200%201%202.121%200zM20%2018.5h-8V20h8z'%20clip-rule='evenodd'/%3e%3c/svg%3e");mask-position:50%;mask-repeat:no-repeat;mask-size:var(--mask-size);width:var(--mask-size);height:var(--mask-size);right:calc((var(--mask-size)) * -1);background-color:var(--mask-icon-bg-color);cursor:pointer;position:absolute;bottom:6px}._component_1w6b3_1 ._error_1w6b3_69{white-space:nowrap;color:var(--txt-error);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px;position:absolute;bottom:-4px;transform:translateY(100%)}

package/dist/components/PlElementList/PlElementListItem.vue.css CHANGED Viewed

	@@ -1 +1 @@
1	- @use "../../assets/variables.scss" as *;._root_1bqtz_4{--background:#fffc;--border-color:var(--color-div-grey);--head-background:unset;--box-shadow:none;--box-shadow-active:0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent)~~}._root_1bqtz_4.~~sortable-drag~~,._root_1bqtz_4.~~sortable-chosen{--head-background:var(--gradient-light-lime);--border-color:var(--border-color-focus);--box-shadow:var(--box-shadow-active)}._root_1bqtz_4{border-radius:var(--border-radius);border:1px solid var(--border-color);background-color:var(--background);box-shadow:var(--box-shadow);flex-direction:column;justify-content:center;transition:box-shadow .15s;display:flex;overflow:hidden~~}._root_1bqtz_4:~~hover{--border-color:var(--border-color-focus);--head-background:var(--gradient-light-lime)}~~._root_1bqtz_4.~~_opened_1bqtz_34{--head-background:var(--gradient-light-lime)}~~._root_1bqtz_4.~~_disabled_1bqtz_38{--icon-color:var(--ic-02);--border-color:var(--border-color-div-grey);color:var(--txt-03);filter:grayscale()}~~._root_1bqtz_4.~~_pinned_1bqtz_45{--background:var(--bg-base-light)}~~._root_1bqtz_4.~~_active_1bqtz_49{--border-color:var(--border-color-focus);--head-background:var(--btn-accent-positive-500)}._head_1bqtz_55{border-radius:var(--border-radius) var(--border-radius) 0 0;background:var(--head-background);align-items:center;min-height:40px;padding:8px;display:flex;position:relative}._contentChevron_1bqtz_65{width:16px;height:16px;margin-right:4px;transition:transform .15s;display:block;transform:rotate(-90deg)~~}._contentChevron_1bqtz_65.~~_opened_1bqtz_34{transform:rotate(0)}._title_1bqtz_78{flex-direction:row;flex:1 1 0;gap:8px;display:flex;overflow:hidden}._body_1bqtz_86{border-radius:0 0 var(--border-radius) var(--border-radius);flex-direction:column;gap:12px;padding:24px;display:flex~~}._body_1bqtz_86.~~_disabled_1bqtz_38{pointer-events:none}._actions_1bqtz_98{background-color:var(--background);border-radius:var(--border-radius);align-items:center;display:flex;position:absolute;top:8px;right:8px}._action_1bqtz_98{opacity:.6;border-radius:var(--border-radius);width:24px;height:24px;padding:4px;transition:all .15s~~}._action_1bqtz_98~~ svg{width:16px;height:16px}~~._action_1bqtz_98:~~hover{opacity:1;background-color:var(--bg-elevated-02)}~~._action_1bqtz_98.~~_activated_1bqtz_126{opacity:.8}~~._action_1bqtz_98.~~_disable_1bqtz_38{cursor:not-allowed;opacity:.4}._clickable_1bqtz_136{cursor:pointer}._draggable_1bqtz_140{cursor:grab}._showOnHover_1bqtz_144{opacity:0;transition:opacity .15s}._root_1bqtz_4:hover ._showOnHover_1bqtz_144{opacity:1}
1	+ @use "../../assets/variables.scss" as *;._root_1bqtz_4{--background:#fffc;--border-color:var(--color-div-grey);--head-background:unset;--box-shadow:none;--box-shadow-active:0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);&.sortable-drag,&.sortable-chosen{--head-background:var(--gradient-light-lime);--border-color:var(--border-color-focus);--box-shadow:var(--box-shadow-active)}}._root_1bqtz_4{border-radius:var(--border-radius);border:1px solid var(--border-color);background-color:var(--background);box-shadow:var(--box-shadow);flex-direction:column;justify-content:center;transition:box-shadow .15s;display:flex;overflow:hidden;&:hover{--border-color:var(--border-color-focus);--head-background:var(--gradient-light-lime)}&._opened_1bqtz_34{--head-background:var(--gradient-light-lime)}&._disabled_1bqtz_38{--icon-color:var(--ic-02);--border-color:var(--border-color-div-grey);color:var(--txt-03);filter:grayscale()}&._pinned_1bqtz_45{--background:var(--bg-base-light)}&._active_1bqtz_49{--border-color:var(--border-color-focus);--head-background:var(--btn-accent-positive-500)}}._head_1bqtz_55{border-radius:var(--border-radius) var(--border-radius) 0 0;background:var(--head-background);align-items:center;min-height:40px;padding:8px;display:flex;position:relative}._contentChevron_1bqtz_65{width:16px;height:16px;margin-right:4px;transition:transform .15s;display:block;transform:rotate(-90deg);&._opened_1bqtz_34{transform:rotate(0)}}._title_1bqtz_78{flex-direction:row;flex:1 1 0;gap:8px;display:flex;overflow:hidden}._body_1bqtz_86{border-radius:0 0 var(--border-radius) var(--border-radius);flex-direction:column;gap:12px;padding:24px;display:flex;&._disabled_1bqtz_38{pointer-events:none}}._actions_1bqtz_98{background-color:var(--background);border-radius:var(--border-radius);align-items:center;display:flex;position:absolute;top:8px;right:8px}._action_1bqtz_98{opacity:.6;border-radius:var(--border-radius);width:24px;height:24px;padding:4px;transition:all .15s;& svg{width:16px;height:16px}&:hover{opacity:1;background-color:var(--bg-elevated-02)}&._activated_1bqtz_126{opacity:.8}&._disable_1bqtz_38{cursor:not-allowed;opacity:.4}}._clickable_1bqtz_136{cursor:pointer}._draggable_1bqtz_140{cursor:grab}._showOnHover_1bqtz_144{opacity:0;transition:opacity .15s}._root_1bqtz_4:hover ._showOnHover_1bqtz_144{opacity:1}

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

@@ -1,5 +1,7 @@
 import e from "../PlIcon24/PlIcon24.js";
+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";
 var h = ["data-draggable"], g = /* @__PURE__ */ c({
 	inheritAttrs: !1,

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,IAAM,IAAQ,GAoBR,IAAQ,GAKV,EACE,IAAiB,QAAe,EAAM,YAAe,KAAA,EAAU,EAC/D,IAAe,QAAe,EAAM,UAAa,KAAA,EAAU,EAC3D,IAAgB,QAAe,EAAM,WAAc,KAAA,EAAU,EAE7D,IAAO;yBAUX,EAoFM,OAAA,EApFA,SAAK,AAAA,EAAA,QAAG,MAAU,EAAI,SAAU,EAAK,EAAA,EAAA;GAC9B,EAAA,SAAA,GAAA,EAAX,EAEM,OAAA;;IAFqB,OAAK,EAAE,EAAA,YAAW;OAC3C,EAA8D,EAAA,QAAA,UAAA;IAAzC,MAAM,EAAM;IAAO,OAAO,EAAM;;GAEvD,EA4EM,OAAA,EA3EH,OAAK,EAAA;IAAYA,EAAAA,OAAO;IAAcC,EAAAA,OAAO;;MAA4BD,EAAAA,OAAO,SAAS,EAAM;MAAqBA,EAAAA,OAAO,SAAS,EAAM;MAAqBA,EAAAA,OAAO,SAAS,EAAM;MAAuBA,EAAAA,OAAO,WAAW,EAAM;;UAWrO,EAyDM,OAAA;IAxDH,OAAK,EAAA;KAAcA,EAAAA,OAAO;KAAgB,EAAA;QAAqCA,EAAAA,OAAO,YAAY,EAAA,OAAA;;IAOlG,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,gBAAgB,EAAI,UAAW,EAAM,MAAM,EAAM,MAAK;;IAGtD,EAAM,kBAAA,GAAA,EADd,EAMM,OAAA;;KAJH,OAAK,EAAA;MAAGA,EAAAA,OAAO;MAAQA,EAAAA,OAAO;MAAS,GAAKA,EAAAA,OAAO,UAAO,CAAI,EAAM,aAAW;MAAA,CAAA;KAC/E,kBAAgB,EAAM;QAEvB,EAA6B,EAAA,EAAA,EAAA,EAAnB,MAAK,aAAW,CAAA,CAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAGpB,EAAA,gBAAA,GAAA,EADR,EAIE,EAAA,EAAA,EAAA;;KAFC,OAAK,EAAA,CAAGA,EAAAA,OAAO,gBAAc,GAAKA,EAAAA,OAAO,SAAS,EAAM,YAAU,CAAA,CAAA;KACnE,MAAK;;IAGP,EAEM,OAAA,EAFA,OAAK,EAAEA,EAAAA,OAAO,MAAK,EAAA,EAAA,CACvB,EAA6D,EAAA,QAAA,SAAA;KAAzC,MAAM,EAAM;KAAO,OAAO,EAAM;;IAGtD,EA6BM,OAAA,EA7BA,OAAK,EAAA,CAAGA,EAAAA,OAAO,SAASA,EAAAA,OAAO,YAAW,CAAA,EAAA,EAAA;KAEtC,EAAM,cAAA,GAAA,EADd,EAMM,OAAA;;MAJH,OAAK,EAAA;OAAGA,EAAAA,OAAO;OAAQA,EAAAA,OAAO;OAAS,GAAKA,EAAAA,OAAO,UAAO,CAAI,EAAM,YAAU;OAAA,CAAA;MAC9E,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,EAAI,UAAW,EAAM,MAAM,EAAM,MAAK,EAAA,CAAA,OAAA,CAAA;SAEnD,EAAmF,EAAA,EAAA,EAAA;MAAxE,MAAM,EAAM,cAAS,KAAA,cAAA;MAAuC,MAAK;;KAGtE,EAAM,cAAA,GAAA,EADd,EAaM,OAAA;;MAXH,OAAK,EAAA;OAAkBA,EAAAA,OAAO;OAAsBA,EAAAA,OAAO;;SAA4CA,EAAAA,OAAO,UAAO,CAAI,EAAM;SAA6BA,EAAAA,OAAO,YAAY,EAAM;;;MAQrL,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,EAAI,OAAQ,EAAM,MAAM,EAAM,MAAK,EAAA,CAAA,OAAA,CAAA;SAEhD,EAAiC,EAAA,EAAA,EAAA;MAAvB,MAAK;MAAM,MAAK;;KAGpB,EAAM,eAAA,GAAA,EADd,EAMM,OAAA;;MAJH,OAAK,EAAA,CAAGA,EAAAA,OAAO,QAAQA,EAAAA,OAAO,UAAS,CAAA;MACvC,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,EAAI,UAAW,EAAM,MAAM,EAAM,MAAK,EAAA,CAAA,OAAA,CAAA;SAEnD,EAAyB,EAAA,EAAA,EAAA,EAAf,MAAK,SAAO,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;;UAKpB,EAAA,SAAkB,EAAM,cAAA,GAAA,EADhC,EAKM,OAAA;;IAHH,OAAK,EAAA;KAAGA,EAAAA,OAAO;KAAM,EAAA;KAAY,GAAKA,EAAAA,OAAO,WAAW,EAAM,WAAS;KAAA,CAAA;OAExE,EAA+D,EAAA,QAAA,WAAA;IAAzC,MAAM,EAAM;IAAO,OAAO,EAAM;;GAG/C,EAAA,SAAA,GAAA,EAAX,EAEM,OAAA;;IAFoB,OAAK,EAAE,EAAA,WAAU;OACzC,EAA6D,EAAA,QAAA,SAAA;IAAzC,MAAM,EAAM;IAAO,OAAO,EAAM"}

package/dist/components/PlElementList/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./PlElementList.js";

package/dist/components/PlErrorAlert/PlErrorAlert.vue.css CHANGED Viewed

	@@ -1 +1 @@
1	- ._root_o15c5_2{background:var(--bg-error);border:1px var(--border-color-error) solid;border-radius:var(--border-radius-control);flex-direction:column;gap:12px;padding:12px;display:flex;position:relative;overflow:auto}._copy_o15c5_15{opacity:.4;transition:opacity .3s;position:absolute;top:12px;right:12px~~}._copy_o15c5_15:~~hover{opacity:1}._title_o15c5_27{align-items:center;gap:10px;max-width:calc(100% - 20px);min-height:24px;font-weight:700;line-height:24px;display:flex;overflow:hidden}._titleIcon_o15c5_38{--icon-color:var(--txt-error)}._titleText_o15c5_42{text-overflow:ellipsis;width:100%;overflow:hidden}._message_o15c5_48{white-space:pre-wrap;word-break:break-word;max-height:100%;font-family:var(--font-family-monospace);overflow:auto}
1	+ ._root_o15c5_2{background:var(--bg-error);border:1px var(--border-color-error) solid;border-radius:var(--border-radius-control);flex-direction:column;gap:12px;padding:12px;display:flex;position:relative;overflow:auto}._copy_o15c5_15{opacity:.4;transition:opacity .3s;position:absolute;top:12px;right:12px;&:hover{opacity:1}}._title_o15c5_27{align-items:center;gap:10px;max-width:calc(100% - 20px);min-height:24px;font-weight:700;line-height:24px;display:flex;overflow:hidden}._titleIcon_o15c5_38{--icon-color:var(--txt-error)}._titleText_o15c5_42{text-overflow:ellipsis;width:100%;overflow:hidden}._message_o15c5_48{white-space:pre-wrap;word-break:break-word;max-height:100%;font-family:var(--font-family-monospace);overflow:auto}

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

@@ -1,5 +1,7 @@
 import e from "../PlIcon16/PlIcon16.js";
+import "../PlMaskIcon16/index.js";
 import t from "../PlClipboard/PlClipboard.js";
+import "../PlClipboard/index.js";
 import { createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, renderSlot as l, toDisplayString as u, unref as d } from "vue";
 var f = /* @__PURE__ */ a({
 	name: "PlErrorAlert",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlErrorAlert.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n name: \"PlErrorAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from \"../PlClipboard\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\n\nconst props = withDefaults(\n defineProps<{\n title?: string;\n message?: string;\n maxHeight?: string;\n copyMessage?: string;\n }>(),\n {\n title: undefined,\n message: undefined,\n maxHeight: \"300px\",\n copyMessage: undefined,\n },\n);\n\nfunction onCopy() {\n const value = props.copyMessage ?? props.message;\n if (typeof value === \"string\") {\n navigator.clipboard.writeText(value);\n }\n}\n</script>\n\n<template>\n <div :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n <PlClipboard :class=\"$style.copy\" @copy=\"onCopy\" />\n <slot name=\"title\">\n <div :class=\"$style.title\">\n <PlMaskIcon16 :class=\"$style.titleIcon\" name=\"warning\" />\n <div :class=\"$style.titleText\">{{ props.title }}</div>\n </div>\n </slot>\n <slot name=\"message\">\n <div :class=\"$style.message\">\n {{ props.message }}\n </div>\n </slot>\n </div>\n</template>\n\n<style module>\n.root {\n position: relative;\n overflow: auto;\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 12px;\n background: var(--bg-error);\n border: 1px var(--border-color-error) solid;\n border-radius: var(--border-radius-control);\n /* color: var(--txt-error); */\n}\n\n.copy {\n position: absolute;\n right: 12px;\n top: 12px;\n opacity: 0.4;\n transition: opacity 0.3s;\n\n &:hover {\n opacity: 1;\n }\n}\n\n.title {\n display: flex;\n align-items: center;\n gap: 10px;\n max-width: calc(100% - 20px);\n min-height: 24px;\n line-height: 24px;\n font-weight: bold;\n overflow: hidden;\n}\n\n.titleIcon {\n --icon-color: var(--txt-error);\n}\n\n.titleText {\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.message {\n overflow: auto;\n max-height: 100%;\n white-space: pre-wrap;\n word-break: break-word;\n font-family: var(--font-family-monospace);\n}\n</style>\n"],"mappings":"~~;;;;~~CAEE,MAAM;;;;;;;;EAQR,IAAM,IAAQ;EAed,SAAS,IAAS;GAChB,IAAM,IAAQ,EAAM,eAAe,EAAM;AACzC,GAAI,OAAO,KAAU,YACnB,UAAU,UAAU,UAAU,EAAM;;yBAMtC,EAaM,OAAA;GAbA,OAAK,EAAA,EAAA,WAAe,EAAM,WAAS,CAAA;GAAK,OAAK,EAAEA,EAAAA,OAAO,KAAI;;GAC9D,EAAmD,EAAA,EAAA,EAAA;IAArC,OAAK,EAAEA,EAAAA,OAAO,KAAI;IAAS;;GACzC,EAKO,EAAA,QAAA,SAAA,EAAA,QAAA,CAJL,EAGM,OAAA,EAHA,OAAK,EAAEA,EAAAA,OAAO,MAAK,EAAA,EAAA,CACvB,EAAyD,EAAA,EAAA,EAAA;IAA1C,OAAK,EAAEA,EAAAA,OAAO,UAAS;IAAE,MAAK;2BAC7C,EAAsD,OAAA,EAAhD,OAAK,EAAEA,EAAAA,OAAO,UAAS,EAAA,EAAA,EAAK,EAAM,MAAK,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,CAAA;GAGjD,EAIO,EAAA,QAAA,WAAA,EAAA,QAAA,CAHL,EAEM,OAAA,EAFA,OAAK,EAAEA,EAAAA,OAAO,QAAO,EAAA,EAAA,EACtB,EAAM,QAAO,EAAA,EAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"PlErrorAlert.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n name: \"PlErrorAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from \"../PlClipboard\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\n\nconst props = withDefaults(\n defineProps<{\n title?: string;\n message?: string;\n maxHeight?: string;\n copyMessage?: string;\n }>(),\n {\n title: undefined,\n message: undefined,\n maxHeight: \"300px\",\n copyMessage: undefined,\n },\n);\n\nfunction onCopy() {\n const value = props.copyMessage ?? props.message;\n if (typeof value === \"string\") {\n navigator.clipboard.writeText(value);\n }\n}\n</script>\n\n<template>\n <div :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n <PlClipboard :class=\"$style.copy\" @copy=\"onCopy\" />\n <slot name=\"title\">\n <div :class=\"$style.title\">\n <PlMaskIcon16 :class=\"$style.titleIcon\" name=\"warning\" />\n <div :class=\"$style.titleText\">{{ props.title }}</div>\n </div>\n </slot>\n <slot name=\"message\">\n <div :class=\"$style.message\">\n {{ props.message }}\n </div>\n </slot>\n </div>\n</template>\n\n<style module>\n.root {\n position: relative;\n overflow: auto;\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 12px;\n background: var(--bg-error);\n border: 1px var(--border-color-error) solid;\n border-radius: var(--border-radius-control);\n /* color: var(--txt-error); */\n}\n\n.copy {\n position: absolute;\n right: 12px;\n top: 12px;\n opacity: 0.4;\n transition: opacity 0.3s;\n\n &:hover {\n opacity: 1;\n }\n}\n\n.title {\n display: flex;\n align-items: center;\n gap: 10px;\n max-width: calc(100% - 20px);\n min-height: 24px;\n line-height: 24px;\n font-weight: bold;\n overflow: hidden;\n}\n\n.titleIcon {\n --icon-color: var(--txt-error);\n}\n\n.titleText {\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.message {\n overflow: auto;\n max-height: 100%;\n white-space: pre-wrap;\n word-break: break-word;\n font-family: var(--font-family-monospace);\n}\n</style>\n"],"mappings":";;;;;;CAEE,MAAM;;;;;;;;EAQR,IAAM,IAAQ;EAed,SAAS,IAAS;GAChB,IAAM,IAAQ,EAAM,eAAe,EAAM;AACzC,GAAI,OAAO,KAAU,YACnB,UAAU,UAAU,UAAU,EAAM;;yBAMtC,EAaM,OAAA;GAbA,OAAK,EAAA,EAAA,WAAe,EAAM,WAAS,CAAA;GAAK,OAAK,EAAEA,EAAAA,OAAO,KAAI;;GAC9D,EAAmD,EAAA,EAAA,EAAA;IAArC,OAAK,EAAEA,EAAAA,OAAO,KAAI;IAAS;;GACzC,EAKO,EAAA,QAAA,SAAA,EAAA,QAAA,CAJL,EAGM,OAAA,EAHA,OAAK,EAAEA,EAAAA,OAAO,MAAK,EAAA,EAAA,CACvB,EAAyD,EAAA,EAAA,EAAA;IAA1C,OAAK,EAAEA,EAAAA,OAAO,UAAS;IAAE,MAAK;2BAC7C,EAAsD,OAAA,EAAhD,OAAK,EAAEA,EAAAA,OAAO,UAAS,EAAA,EAAA,EAAK,EAAM,MAAK,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,CAAA;GAGjD,EAIO,EAAA,QAAA,WAAA,EAAA,QAAA,CAHL,EAEM,OAAA,EAFA,OAAK,EAAEA,EAAAA,OAAO,QAAO,EAAA,EAAA,EACtB,EAAM,QAAO,EAAA,EAAA,CAAA,CAAA"}

package/dist/components/PlErrorAlert/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./PlErrorAlert.js";

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

@@ -1,4 +1,5 @@
 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";
 var h = /* @__PURE__ */ o({

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/PlErrorBoundary/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./PlErrorBoundary.js";

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

@@ -1,4 +1,5 @@
 import e from "../PlIcon24/PlIcon24.js";
+import "../PlIcon24/index.js";
 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";

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.vue2.js CHANGED Viewed

@@ -1,7 +1,11 @@
 import e from "../PlBtnGhost/PlBtnGhost.js";
+import "../PlBtnGhost/index.js";
 import t from "../PlBtnGroup/PlBtnGroup.js";
+import "../PlBtnGroup/index.js";
 import n from "../PlBtnPrimary/PlBtnPrimary.js";
+import "../PlBtnPrimary/index.js";
 import r from "../PlDialogModal/PlDialogModal.js";
+import "../PlDialogModal/index.js";
 import i from "./pl-file-dialog.module.js";
 import a from "./Remote.js";
 import o from "./Local.js";