npm - @milaboratories/uikit - Versions diffs - 2.6.2 → 2.6.3 - Mend

@milaboratories/uikit 2.6.2 → 2.6.3

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

package/dist/components/PlDropdown/PlDropdown.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlDropdown.vue.js","sources":["../../../src/components/PlDropdown/PlDropdown.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 { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport SvgRequired from '../../assets/images/required.svg?raw';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport { tap } from '../../helpers/functions';\nimport { deepEqual } from '../../helpers/objects';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from '../../types';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport LongText from '../LongText.vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\nimport { PlSvg } from '../PlSvg';\nimport { PlTooltip } from '../PlTooltip';\nimport OptionList from './OptionList.vue';\nimport './pl-dropdown.scss';\nimport type { LOption } from './types';\nimport { useGroupBy } from './useGroupBy';\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 Shows red border even without an error message\n /\n errorStatus?: boolean;\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?: MaskIconName16;\n /\n Custom icon (24px) class for the dropdown arrow (optional)\n /\n arrowIconLarge?: MaskIconName24;\n /\n Option list item size\n /\n optionSize?: 'small' \| 'medium';\n /\n Makes some of corners not rounded\n * */\n groupPosition?: 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' \| 'middle';\n }>(),\n {\n label: '',\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n showErrorMessage: true,\n placeholder: '...',\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n arrowIconLarge: undefined,\n optionSize: 'small',\n options: undefined,\n groupPosition: undefined,\n },\n);\n\nconst rootRef = ref<HTMLElement \| undefined>();\nconst input = ref<HTMLInputElement \| undefined>();\n\nconst optionListRef = useTemplateRef<InstanceType<typeof OptionList>>('optionListRef');\n\nconst data = reactive({\n search: '',\n activeIndex: -1,\n open: false,\n optionsHeight: 0,\n});\n\nconst findActiveIndex = () =>\n tap(\n orderedRef.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<LOption<M>[]>(() =>\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 !== undefined) {\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 { orderedRef, groupsRef, restRef } = useGroupBy(filteredRef, 'group');\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 rootRef?.value?.focus();\n};\n\nconst selectOptionWrapper = (v: unknown) => {\n selectOption(v as M \| undefined);\n};\n\nconst clear = () => emit('update:modelValue', undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n data.open = !data.open;\n if (!data.open) {\n data.search = '';\n }\n};\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node \| null;\n\n if (!rootRef.value?.contains(relatedTarget) && !optionListRef.value?.listRef?.contains(relatedTarget)) {\n data.search = '';\n data.open = false;\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 rootRef.value?.focus();\n }\n\n const ordered = orderedRef.value;\n\n const { length } = ordered;\n\n if (!length) {\n return;\n }\n\n if (e.code === 'Enter') {\n selectOption(ordered.find((it) => it.index === activeIndex)?.value);\n }\n\n const localIndex = ordered.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 = ordered[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\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 optionListRef.value?.scrollIntoActive();\n }\n});\n</script>\n\n<template>\n <div class=\"pl-dropdown__envelope\" @click=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-dropdown\"\n :class=\"{ open: data.open, error: error \|\| errorStatus, disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-dropdown__container\">\n <div class=\"pl-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\" class=\"input-value\">\n <LongText> {{ textValue }} </LongText>\n </div>\n\n <div class=\"pl-dropdown__controls\">\n <PlIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n <PlIcon16 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n <slot name=\"append\" />\n <div class=\"pl-dropdown__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <PlIcon24 v-if=\"arrowIconLarge\" :name=\"arrowIconLarge\" class=\"arrow-icon\" />\n <PlIcon16 v-else-if=\"arrowIcon\" :name=\"arrowIcon\" class=\"arrow-icon\" />\n <PlIcon16 v-else name=\"chevron-down\" 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 <OptionList\n v-if=\"data.open\"\n ref=\"optionListRef\"\n :root-ref=\"rootRef!\"\n :groups=\"groupsRef\"\n :rest=\"restRef\"\n :option-size=\"optionSize\"\n :select-option=\"selectOptionWrapper\"\n />\n <DoubleContour class=\"pl-dropdown__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-dropdown__error\">{{ computedError }}</div>\n <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-dropdown__helper\">{{ loadingOptionsHelper }}</div>\n <div v-else-if=\"helper\" class=\"pl-dropdown__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"names":["__default__","emit","__emit","props","__props","rootRef","ref","input","optionListRef","useTemplateRef","data","reactive","findActiveIndex","tap","orderedRef","o","deepEqual","v","updateActive","isLoadingOptions","computed","isDisabled","selectedIndex","computedError","getErrorMessage","optionsRef","normalizeListOptions","opt","index","textValue","item","unref","computedPlaceholder","hasValue","filteredRef","options","search","groupsRef","restRef","useGroupBy","tabindex","selectOption","_a","selectOptionWrapper","clear","setFocusOnInput","toggleOpen","onInputFocus","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","open","activeIndex","ordered","length","it","localIndex","delta","newIndex","useLabelNotch","watch","watchPostEffect"],"mappings":"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"}
1	+ {"version":3,"file":"PlDropdown.vue.js","sources":["../../../src/components/PlDropdown/PlDropdown.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 { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport SvgRequired from '../../assets/images/required.svg?raw';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport { tap } from '../../helpers/functions';\nimport { deepEqual } from '../../helpers/objects';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from '../../types';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport LongText from '../LongText.vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\nimport { PlSvg } from '../PlSvg';\nimport { PlTooltip } from '../PlTooltip';\nimport OptionList from './OptionList.vue';\nimport './pl-dropdown.scss';\nimport type { LOption } from './types';\nimport { useGroupBy } from './useGroupBy';\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 Shows red border even without an error message\n /\n errorStatus?: boolean;\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?: MaskIconName16;\n /\n Custom icon (24px) class for the dropdown arrow (optional)\n /\n arrowIconLarge?: MaskIconName24;\n /\n Option list item size\n /\n optionSize?: 'small' \| 'medium';\n /\n Makes some of corners not rounded\n * */\n groupPosition?: 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' \| 'middle';\n }>(),\n {\n label: '',\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n showErrorMessage: true,\n placeholder: '...',\n clearable: false,\n required: false,\n disabled: false,\n arrowIcon: undefined,\n arrowIconLarge: undefined,\n optionSize: 'small',\n options: undefined,\n groupPosition: undefined,\n },\n);\n\nconst rootRef = ref<HTMLElement \| undefined>();\nconst input = ref<HTMLInputElement \| undefined>();\n\nconst optionListRef = useTemplateRef<InstanceType<typeof OptionList>>('optionListRef');\n\nconst data = reactive({\n search: '',\n activeIndex: -1,\n open: false,\n optionsHeight: 0,\n});\n\nconst findActiveIndex = () =>\n tap(\n orderedRef.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<LOption<M>[]>(() =>\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 !== undefined) {\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 { orderedRef, groupsRef, restRef } = useGroupBy(filteredRef, 'group');\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 rootRef?.value?.focus();\n};\n\nconst selectOptionWrapper = (v: unknown) => {\n selectOption(v as M \| undefined);\n};\n\nconst clear = () => emit('update:modelValue', undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n data.open = !data.open;\n if (!data.open) {\n data.search = '';\n }\n};\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node \| null;\n\n if (!rootRef.value?.contains(relatedTarget) && !optionListRef.value?.listRef?.contains(relatedTarget)) {\n data.search = '';\n data.open = false;\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 rootRef.value?.focus();\n }\n\n const ordered = orderedRef.value;\n\n const { length } = ordered;\n\n if (!length) {\n return;\n }\n\n if (e.code === 'Enter') {\n selectOption(ordered.find((it) => it.index === activeIndex)?.value);\n }\n\n const localIndex = ordered.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 = ordered[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\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 optionListRef.value?.scrollIntoActive();\n }\n});\n</script>\n\n<template>\n <div class=\"pl-dropdown__envelope\" @click=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-dropdown\"\n :class=\"{ open: data.open, error: error \|\| errorStatus, disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-dropdown__container\">\n <div class=\"pl-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\" class=\"input-value\">\n <LongText> {{ textValue }} </LongText>\n </div>\n\n <div class=\"pl-dropdown__controls\">\n <PlIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n <PlIcon16 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n <slot name=\"append\" />\n <div class=\"pl-dropdown__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <PlIcon24 v-if=\"arrowIconLarge\" :name=\"arrowIconLarge\" class=\"arrow-icon\" />\n <PlIcon16 v-else-if=\"arrowIcon\" :name=\"arrowIcon\" class=\"arrow-icon\" />\n <PlIcon16 v-else name=\"chevron-down\" 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 <OptionList\n v-if=\"data.open\"\n ref=\"optionListRef\"\n :root-ref=\"rootRef!\"\n :groups=\"groupsRef\"\n :rest=\"restRef\"\n :option-size=\"optionSize\"\n :select-option=\"selectOptionWrapper\"\n />\n <DoubleContour class=\"pl-dropdown__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-dropdown__error\">{{ computedError }}</div>\n <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-dropdown__helper\">{{ loadingOptionsHelper }}</div>\n <div v-else-if=\"helper\" class=\"pl-dropdown__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"names":["__default__","emit","__emit","props","__props","rootRef","ref","input","optionListRef","useTemplateRef","data","reactive","findActiveIndex","tap","orderedRef","o","deepEqual","v","updateActive","isLoadingOptions","computed","isDisabled","selectedIndex","computedError","getErrorMessage","optionsRef","normalizeListOptions","opt","index","textValue","item","unref","computedPlaceholder","hasValue","filteredRef","options","search","groupsRef","restRef","useGroupBy","tabindex","selectOption","_a","selectOptionWrapper","clear","setFocusOnInput","toggleOpen","onInputFocus","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","open","activeIndex","ordered","length","it","localIndex","delta","newIndex","useLabelNotch","watch","watchPostEffect","_createElementBlock","_createElementVNode","_normalizeClass","_hoisted_2","_hoisted_3","_cache","$event","_vModelText","_openBlock","_hoisted_5","_createVNode","LongText","_hoisted_6","_createBlock","_unref","PlIcon24","PlIcon16","_renderSlot","_ctx","_hoisted_7","PlSvg","SvgRequired","$slots","PlTooltip","OptionList","DoubleContour","_hoisted_8","_toDisplayString","_hoisted_9","_hoisted_10"],"mappings":"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"}

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

@@ -1,25 +1,25 @@
 (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.pl-dropdown-legacy{--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);position:relative;outline:none;min-height:var(--control-height);border-radius:6px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base)}[data-theme=dark] .pl-dropdown-legacy{--options-bg: #1b1b1f}.pl-dropdown-legacy__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown-legacy label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-dropdown-legacy label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown-legacy__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);color:var(--txt-01)}.pl-dropdown-legacy__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-legacy__options{position:relative;background-color:var(--options-bg);border-radius:0 0 6px 6px;max-height:244px;border-top:1px solid var(--color-div-black);--thumb-color: var(--ic-02);overflow-y:auto}.pl-dropdown-legacy__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dropdown-legacy__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown-legacy__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dropdown-legacy__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:var(--control-height);background-color:#fff;opacity:.5;font-style:italic}.pl-dropdown-legacy__options .option{position:relative;padding:0 30px 0 10px;height:var(--control-height);line-height:var(--control-height);cursor:pointer;-webkit-user-select:none;user-select:none}.pl-dropdown-legacy__options .option .checkmark{position:absolute;display:none;right:10px;top:50%;transform:translateY(-50%)}.pl-dropdown-legacy__options .option>span{display:block;overflow:hidden;white-space:nowrap;max-width:100%;text-overflow:ellipsis}.pl-dropdown-legacy__options .option.selected{background-color:var(--color-active-select)}.pl-dropdown-legacy__options .option.selected .checkmark{display:block}.pl-dropdown-legacy__options .option.active:not(.selected){background-color:var(--option-hover-bg)}.pl-dropdown-legacy__options .option:hover{background-color:var(--option-hover-bg)}.pl-dropdown-legacy__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding:0 11px;min-height:var(--control-height);line-height:var(--control-height);display:flex;flex-direction:row;align-items:center}.pl-dropdown-legacy__field .input-value{outline:1px solid red;position:absolute;top:0;left:0;bottom:0;right:0;padding:0 60px 0 11px;pointer-events:none;line-height:var(--control-height);color:var(--contour-color);overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown-legacy__field input{min-height:calc(var(--control-height) - 2px);line-height:calc(var(--control-height) - 2px);font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 40px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-dropdown-legacy__field input:focus{outline:none}.pl-dropdown-legacy__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown-legacy__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown-legacy__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown-legacy__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown-legacy__controls{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:auto}.pl-dropdown-legacy__controls .mask-16,.pl-dropdown-legacy__controls .mask-24{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-dropdown-legacy__controls .clear{--icon-color: var(--ic-02)}.pl-dropdown-legacy__controls .mask-loading{--icon-color: var(#07AD3E);animation:spin 2.5s linear infinite}.pl-dropdown-legacy .arrow-icon{cursor:pointer}.pl-dropdown-legacy .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);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-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-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown-legacy.open,.pl-dropdown-legacy:focus-within{z-index:1;--label-color: var(--txt-focus)}.pl-dropdown-legacy.open .pl-dropdown-legacy__container{z-index:1000}.pl-dropdown-legacy.open .pl-dropdown-legacy__field{border-radius:6px 6px 0 0}.pl-dropdown-legacy.open .arrow-icon{background-color:var(--control-mask-fill);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-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-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown-legacy:hover{--contour-color: var(--control-hover-color)}.pl-dropdown-legacy: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-legacy:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-dropdown-legacy.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-dropdown-legacy.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;-webkit-user-select:none;user-select:none}
 .double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-right-radius:0;border-top-left-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.double-contour.top-right>div{border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0}.double-contour.bottom-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.double-contour.bottom-right>div{border-top-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0}.double-contour.middle>div{border-radius:0}
-.ui-lt-container{min-width:0;white-space:nowrap;overflow:hidden;position:relative;border-radius:5px}.ui-lt-container span{display:inline-block;overflow:hidden;text-overflow:ellipsis;width:100%;vertical-align:bottom;pointer-events:all!important}.ui-lt-container .ui-lt-animate{position:relative;animation:left-to-right var(--5deba9de) infinite alternate linear;overflow:unset!important;text-overflow:unset!important;width:fit-content!important}@keyframes left-to-right{0%{transform:translate(0);left:0%}to{transform:translate(-101%);left:101%}}`)),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
-import { defineComponent as te, useSlots as ne, ref as V, reactive as re, computed as i, unref as u, watch as B, watchPostEffect as le, createElementBlock as s, openBlock as r, createElementVNode as c, createCommentVNode as d, normalizeClass as b, createVNode as F, withDirectives as se, vModelText as ie, withCtx as M, createTextVNode as ae, toDisplayString as v, createBlock as m, renderSlot as N, withModifiers as h, Fragment as de, renderList as ue } from "vue";
+.ui-lt-container{min-width:0;white-space:nowrap;overflow:hidden;position:relative;border-radius:5px}.ui-lt-container span{display:inline-block;overflow:hidden;text-overflow:ellipsis;width:100%;vertical-align:bottom;pointer-events:all!important}.ui-lt-container .ui-lt-animate{position:relative;animation:left-to-right var(--v5deba9de) infinite alternate linear;overflow:unset!important;text-overflow:unset!important;width:fit-content!important}@keyframes left-to-right{0%{transform:translate(0);left:0%}to{transform:translate(-101%);left:101%}}`)),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+import { defineComponent as te, useSlots as ne, ref as V, reactive as le, computed as s, unref as u, watch as F, watchPostEffect as re, createElementBlock as a, openBlock as l, createElementVNode as p, createCommentVNode as c, normalizeClass as b, createVNode as M, withDirectives as ie, vModelText as ae, withCtx as N, createTextVNode as se, toDisplayString as m, createBlock as h, renderSlot as P, withModifiers as w, Fragment as de, renderList as ce } from "vue";
-import { tap as ce, tapIf as pe } from "../../helpers/functions.js";
+import { tap as ue, tapIf as pe } from "../../helpers/functions.js";
 import fe from "../PlTooltip/PlTooltip.vue.js";
 import ve from "../../utils/DoubleContour.vue.js";
 import { useLabelNotch as me } from "../../utils/useLabelNotch.js";
 import { scrollIntoView as he } from "../../helpers/dom.js";
 import { deepEqual as C } from "../../helpers/objects.js";
-import _e from "../DropdownListItem.vue.js";
-import we from "../LongText.vue.js";
+import we from "../DropdownListItem.vue.js";
+import ke from "../LongText.vue.js";
-import ke from "../PlIcon16/PlIcon16.vue.js";
+import _e from "../PlIcon16/PlIcon16.vue.js";
 import ye from "../PlIcon24/PlIcon24.vue.js";
 import { normalizeListOptions as Ie } from "../../helpers/utils.js";
 import { getErrorMessage as ge } from "../../helpers/error.js";
-import Ve from "../PlSvg/PlSvg.vue.js";
-import be from "../../assets/images/required.svg.js";
-const Ce = { class: "ui-dropdown__envelope" }, Ee = ["tabindex"], Le = { class: "ui-dropdown__container" }, Se = { class: "ui-dropdown__field" }, $e = ["disabled", "placeholder"], xe = { class: "ui-dropdown__controls" }, Ae = { key: 0 }, Oe = {
+import xe from "../PlSvg/PlSvg.vue.js";
+import Ve from "../../assets/images/required.svg.js";
+const be = { class: "ui-dropdown__envelope" }, Ce = ["tabindex"], Ee = { class: "ui-dropdown__container" }, Le = { class: "ui-dropdown__field" }, Se = ["disabled", "placeholder"], $e = { class: "ui-dropdown__controls" }, Ae = { key: 0 }, Oe = {
   key: 0,
   class: "nothing-found"
 }, De = {
@@ -51,178 +51,178 @@ const Ce = { class: "ui-dropdown__envelope" }, Ee = ["tabindex"], Le = { class:
     optionSize: { default: "small" }
   },
   emits: ["update:modelValue"],
-  setup(P, { emit: q }) {
-    const E = q, n = P, T = ne(), a = V(), L = V(), k = V(), t = re({
+  setup(r, { emit: q }) {
+    const E = q, n = r, T = ne(), d = V(), L = V(), y = V(), t = le({
       search: "",
       activeIndex: -1,
       open: !1
-    }), H = () => ce(
-      p.value.findIndex((e) => C(e.value, n.modelValue)),
+    }), H = () => ue(
+      f.value.findIndex((e) => C(e.value, n.modelValue)),
       (e) => e < 0 ? 0 : e
-    ), R = () => t.activeIndex = H(), _ = i(() => n.options === void 0), y = i(() => _.value ? !0 : n.disabled), S = i(() => (n.options ?? []).findIndex((e) => C(e.value, n.modelValue))), $ = i(() => {
-      if (!_.value) {
+    ), R = () => t.activeIndex = H(), k = s(() => n.options === void 0), I = s(() => k.value ? !0 : n.disabled), S = s(() => (n.options ?? []).findIndex((e) => C(e.value, n.modelValue))), $ = s(() => {
+      if (!k.value) {
         if (n.error)
           return ge(n.error);
         if (n.modelValue !== void 0 && S.value === -1)
           return "The selected value is not one of the options";
       }
-    }), x = i(
+    }), A = s(
       () => Ie(n.options ?? []).map((e, o) => ({
         ...e,
         index: o,
         isSelected: o === S.value,
         isActive: o === t.activeIndex
       }))
-    ), A = i(() => {
-      const o = u(x).find((l) => C(l.value, n.modelValue));
+    ), O = s(() => {
+      const o = u(A).find((i) => C(i.value, n.modelValue));
       return (o == null ? void 0 : o.label) || n.modelValue;
-    }), U = i(() => !t.open && n.modelValue ? "" : n.modelValue ? String(A.value) : n.placeholder), K = i(() => n.modelValue !== void 0 && n.modelValue !== null), p = i(() => {
-      const e = x.value;
+    }), U = s(() => !t.open && n.modelValue ? "" : n.modelValue ? String(O.value) : n.placeholder), K = s(() => n.modelValue !== void 0 && n.modelValue !== null), f = s(() => {
+      const e = A.value;
       return t.search ? e.filter((o) => {
-        const l = t.search.toLowerCase();
-        return o.label.toLowerCase().includes(l) || o.description && o.description.toLowerCase().includes(l) ? !0 : typeof o.value == "string" ? o.value.toLowerCase().includes(l) : o.value === t.search;
+        const i = t.search.toLowerCase();
+        return o.label.toLowerCase().includes(i) || o.description && o.description.toLowerCase().includes(i) ? !0 : typeof o.value == "string" ? o.value.toLowerCase().includes(i) : o.value === t.search;
       }) : e;
-    }), j = i(() => y.value ? void 0 : "0"), O = (e) => {
+    }), j = s(() => I.value ? void 0 : "0"), D = (e) => {
       var o;
-      E("update:modelValue", e), t.search = "", t.open = !1, (o = a == null ? void 0 : a.value) == null || o.focus();
+      E("update:modelValue", e), t.search = "", t.open = !1, (o = d == null ? void 0 : d.value) == null || o.focus();
     }, G = () => E("update:modelValue", void 0), J = () => {
       var e;
-      return (e = k.value) == null ? void 0 : e.focus();
-    }, I = () => t.open = !t.open, Q = () => t.open = !0, W = (e) => {
+      return (e = y.value) == null ? void 0 : e.focus();
+    }, g = () => t.open = !t.open, Q = () => t.open = !0, W = (e) => {
       var o;
-      (o = a == null ? void 0 : a.value) != null && o.contains(e.relatedTarget) || (t.search = "", t.open = !1);
+      (o = d == null ? void 0 : d.value) != null && o.contains(e.relatedTarget) || (t.search = "", t.open = !1);
     }, X = () => {
       const e = L.value;
       e && pe(e.querySelector(".hovered-item"), (o) => {
         he(e, o);
       });
     }, Y = (e) => {
-      var D, z;
+      var z, B;
       if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.code))
         e.preventDefault();
       else
         return;
-      const { open: o, activeIndex: l } = t;
+      const { open: o, activeIndex: i } = t;
       if (!o) {
         e.code === "Enter" && (t.open = !0);
         return;
       }
-      e.code === "Escape" && (t.open = !1, (D = a.value) == null || D.focus());
-      const f = u(p), { length: w } = f;
-      if (!w)
+      e.code === "Escape" && (t.open = !1, (z = d.value) == null || z.focus());
+      const v = u(f), { length: _ } = v;
+      if (!_)
         return;
-      e.code === "Enter" && O((z = f.find((g) => g.index === l)) == null ? void 0 : z.value);
-      const Z = f.findIndex((g) => g.index === l) ?? -1, ee = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, oe = Math.abs(Z + ee + w) % w;
-      t.activeIndex = p.value[oe].index ?? -1;
+      e.code === "Enter" && D((B = v.find((x) => x.index === i)) == null ? void 0 : B.value);
+      const Z = v.findIndex((x) => x.index === i) ?? -1, ee = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, oe = Math.abs(Z + ee + _) % _;
+      t.activeIndex = f.value[oe].index ?? -1;
     };
-    return me(a), B(() => n.modelValue, R, { immediate: !0 }), B(
+    return me(d), F(() => n.modelValue, R, { immediate: !0 }), F(
       () => t.open,
       (e) => {
         var o;
-        return e ? (o = k.value) == null ? void 0 : o.focus() : "";
+        return e ? (o = y.value) == null ? void 0 : o.focus() : "";
       }
-    ), le(() => {
+    ), re(() => {
       t.search, t.activeIndex >= 0 && t.open && X();
-    }), (e, o) => (r(), s("div", Ce, [
-      c("div", {
+    }), (e, o) => (l(), a("div", be, [
+      p("div", {
         ref_key: "root",
-        ref: a,
+        ref: d,
         tabindex: j.value,
-        class: b(["ui-dropdown", { open: t.open, error: e.error, disabled: y.value }]),
+        class: b(["ui-dropdown", { open: t.open, error: r.error, disabled: I.value }]),
         onKeydown: Y,
         onFocusout: W
       }, [
-        c("div", Le, [
-          c("div", Se, [
-            se(c("input", {
+        p("div", Ee, [
+          p("div", Le, [
+            ie(p("input", {
               ref_key: "input",
-              ref: k,
-              "onUpdate:modelValue": o[0] || (o[0] = (l) => t.search = l),
+              ref: y,
+              "onUpdate:modelValue": o[0] || (o[0] = (i) => t.search = i),
               type: "text",
               tabindex: "-1",
-              disabled: y.value,
+              disabled: I.value,
               placeholder: U.value,
               spellcheck: "false",
               autocomplete: "chrome-off",
               onFocus: Q
-            }, null, 40, $e), [
-              [ie, t.search]
+            }, null, 40, Se), [
+              [ae, t.search]
             ]),
-            t.open ? d("", !0) : (r(), s("div", {
+            t.open ? c("", !0) : (l(), a("div", {
               key: 0,
               onClick: J
             }, [
-              F(we, { class: "input-value" }, {
-                default: M(() => [
-                  ae(v(A.value), 1)
+              M(ke, { class: "input-value" }, {
+                default: N(() => [
+                  se(m(O.value), 1)
                 ]),
                 _: 1
               })
             ])),
-            c("div", xe, [
-              _.value ? (r(), m(u(ye), {
+            p("div", $e, [
+              k.value ? (l(), h(u(ye), {
                 key: 0,
                 name: "loading"
-              })) : d("", !0),
-              e.clearable && K.value ? (r(), m(u(ke), {
+              })) : c("", !0),
+              r.clearable && K.value ? (l(), h(u(_e), {
                 key: 1,
                 class: "clear",
                 name: "delete-clear",
-                onClick: h(G, ["stop"])
-              })) : d("", !0),
-              N(e.$slots, "append"),
-              e.arrowIconLarge ? (r(), s("div", {
+                onClick: w(G, ["stop"])
+              })) : c("", !0),
+              P(e.$slots, "append"),
+              r.arrowIconLarge ? (l(), a("div", {
                 key: 2,
-                class: b(["arrow-icon", [`icon-24 ${e.arrowIconLarge}`]]),
-                onClick: h(I, ["stop"])
-              }, null, 2)) : e.arrowIcon ? (r(), s("div", {
+                class: b(["arrow-icon", [`icon-24 ${r.arrowIconLarge}`]]),
+                onClick: w(g, ["stop"])
+              }, null, 2)) : r.arrowIcon ? (l(), a("div", {
                 key: 3,
-                class: b(["arrow-icon", [`icon-16 ${e.arrowIcon}`]]),
-                onClick: h(I, ["stop"])
-              }, null, 2)) : (r(), s("div", {
+                class: b(["arrow-icon", [`icon-16 ${r.arrowIcon}`]]),
+                onClick: w(g, ["stop"])
+              }, null, 2)) : (l(), a("div", {
                 key: 4,
                 class: "arrow-icon arrow-icon-default",
-                onClick: h(I, ["stop"])
+                onClick: w(g, ["stop"])
               }))
             ])
           ]),
-          e.label ? (r(), s("label", Ae, [
-            e.required ? (r(), m(u(Ve), {
+          r.label ? (l(), a("label", Ae, [
+            r.required ? (l(), h(u(xe), {
               key: 0,
-              uri: u(be)
-            }, null, 8, ["uri"])) : d("", !0),
-            c("span", null, v(e.label), 1),
-            u(T).tooltip ? (r(), m(u(fe), {
+              uri: u(Ve)
+            }, null, 8, ["uri"])) : c("", !0),
+            p("span", null, m(r.label), 1),
+            u(T).tooltip ? (l(), h(u(fe), {
               key: 1,
               class: "info",
               position: "top"
             }, {
-              tooltip: M(() => [
-                N(e.$slots, "tooltip")
+              tooltip: N(() => [
+                P(e.$slots, "tooltip")
               ]),
               _: 3
-            })) : d("", !0)
-          ])) : d("", !0),
-          t.open ? (r(), s("div", {
+            })) : c("", !0)
+          ])) : c("", !0),
+          t.open ? (l(), a("div", {
             key: 1,
             ref_key: "list",
             ref: L,
             class: "ui-dropdown__options"
           }, [
-            (r(!0), s(de, null, ue(p.value, (l, f) => (r(), m(_e, {
-              key: f,
-              option: l,
-              "is-selected": l.isSelected,
-              "is-hovered": l.isActive,
-              size: e.optionSize,
-              onClick: h((w) => O(l.value), ["stop"])
+            (l(!0), a(de, null, ce(f.value, (i, v) => (l(), h(we, {
+              key: v,
+              option: i,
+              "is-selected": i.isSelected,
+              "is-hovered": i.isActive,
+              size: r.optionSize,
+              onClick: w((_) => D(i.value), ["stop"])
             }, null, 8, ["option", "is-selected", "is-hovered", "size", "onClick"]))), 128)),
-            p.value.length ? d("", !0) : (r(), s("div", Oe, "Nothing found"))
-          ], 512)) : d("", !0),
-          F(ve, { class: "ui-dropdown__contour" })
+            f.value.length ? c("", !0) : (l(), a("div", Oe, "Nothing found"))
+          ], 512)) : c("", !0),
+          M(ve, { class: "ui-dropdown__contour" })
         ])
-      ], 42, Ee),
-      $.value ? (r(), s("div", De, v($.value), 1)) : _.value && e.loadingOptionsHelper ? (r(), s("div", ze, v(e.loadingOptionsHelper), 1)) : e.helper ? (r(), s("div", Be, v(e.helper), 1)) : d("", !0)
+      ], 42, Ce),
+      $.value ? (l(), a("div", De, m($.value), 1)) : k.value && r.loadingOptionsHelper ? (l(), a("div", ze, m(r.loadingOptionsHelper), 1)) : r.helper ? (l(), a("div", Be, m(r.helper), 1)) : c("", !0)
     ]));
   }
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlDropdownLegacy.vue.js","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 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n <slot name=\"append\" />\n <div v-if=\"arrowIconLarge\" class=\"arrow-icon\" :class=\"[`icon-24 ${arrowIconLarge}`]\" @click.stop=\"toggleOpen\" />\n <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" @click.stop=\"toggleOpen\" />\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\">{{ loadingOptionsHelper }}</div>\n <div v-else-if=\"helper\" class=\"ui-dropdown__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"names":["__default__","emit","__emit","props","__props","slots","useSlots","root","ref","list","input","data","reactive","findActiveIndex","tap","filteredRef","o","deepEqual","v","updateActive","isLoadingOptions","computed","isDisabled","selectedIndex","computedError","getErrorMessage","optionsRef","normalizeListOptions","opt","index","textValue","item","unref","computedPlaceholder","hasValue","options","search","tabindex","selectOption","_a","clear","setFocusOnInput","toggleOpen","onInputFocus","onFocusOut","event","scrollIntoActive","$list","tapIf","scrollIntoView","handleKeydown","open","activeIndex","filtered","length","_b","it","localIndex","delta","newIndex","useLabelNotch","watch","watchPostEffect"],"mappings":"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"}
1	+ {"version":3,"file":"PlDropdownLegacy.vue.js","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 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n <slot name=\"append\" />\n <div v-if=\"arrowIconLarge\" class=\"arrow-icon\" :class=\"[`icon-24 ${arrowIconLarge}`]\" @click.stop=\"toggleOpen\" />\n <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" @click.stop=\"toggleOpen\" />\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\">{{ loadingOptionsHelper }}</div>\n <div v-else-if=\"helper\" class=\"ui-dropdown__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"names":["__default__","emit","__emit","props","__props","slots","useSlots","root","ref","list","input","data","reactive","findActiveIndex","tap","filteredRef","o","deepEqual","v","updateActive","isLoadingOptions","computed","isDisabled","selectedIndex","computedError","getErrorMessage","optionsRef","normalizeListOptions","opt","index","textValue","item","unref","computedPlaceholder","hasValue","options","search","tabindex","selectOption","_a","clear","setFocusOnInput","toggleOpen","onInputFocus","onFocusOut","event","scrollIntoActive","$list","tapIf","scrollIntoView","handleKeydown","open","activeIndex","filtered","length","_b","it","localIndex","delta","newIndex","useLabelNotch","watch","watchPostEffect","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_hoisted_3","_hoisted_4","_cache","$event","_vModelText","_createVNode","LongText","_hoisted_6","_createBlock","_unref","PlMaskIcon24","PlIcon16","_renderSlot","_ctx","_hoisted_7","PlSvg","SvgRequired","PlTooltip","_Fragment","_renderList","DropdownListItem","_withModifiers","_hoisted_8","DoubleContour","_hoisted_9","_toDisplayString","_hoisted_10","_hoisted_11"],"mappings":"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"}

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

@@ -39,8 +39,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    mode: "list" | "tabs";
     placeholder: string;
+    mode: "list" | "tabs";
     clearable: boolean;
     prefix: string;
     tabsContainerStyles: string | false | import('vue').CSSProperties | StyleValue[] | null;

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

@@ -193,9 +193,9 @@ const ce = { class: "pl-line-dropdown__prefix" }, fe = { class: "pl-line-dropdow
               onClick: f((V) => v(o), ["stop"])
             }, null, 8, ["option", "is-selected", "is-hovered", "onClick"])
           ])), 128)),
-          b(a).length === 0 ? (r(), d("div", ve, t[3] || (t[3] = [
+          b(a).length === 0 ? (r(), d("div", ve, [...t[3] || (t[3] = [
             c("div", { class: "pl-line-dropdown__no-item-title text-s" }, "Didn't find anything that matched", -1)
-          ]))) : k("", !0)
+          ])])) : k("", !0)
         ], 36)) : i.mode === "tabs" ? (r(), d("div", {
           key: 1,
           ref_key: "list",
@@ -221,9 +221,9 @@ const ce = { class: "pl-line-dropdown__prefix" }, fe = { class: "pl-line-dropdow
               onClick: f((V) => v(o), ["stop"])
             }, null, 8, ["option", "is-selected", "is-hovered", "onClick"])
           ])), 128)),
-          b(a).length === 0 ? (r(), d("div", he, t[4] || (t[4] = [
+          b(a).length === 0 ? (r(), d("div", he, [...t[4] || (t[4] = [
             c("div", { class: "pl-line-dropdown__no-item-title text-s" }, "Didn't find anything that matched", -1)
-          ]))) : k("", !0)
+          ])])) : k("", !0)
         ], 36)) : k("", !0)
       ])) : k("", !0)
     ], 34));