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

@milaboratories/uikit 2.15.43 → 2.16.0

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlAutocomplete.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAutocomplete/PlAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A component for selecting one value from a big list of options using string search request\n /\nexport default {\n name: \"PlAutocomplete\",\n};\n</script>\n\n<script\n lang=\"ts\"\n setup\n generic=\"M extends null \| undefined \| string \| number = null \| undefined \| string\"\n>\nimport \"./pl-autocomplete.scss\";\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from \"vue\";\nimport { tap } 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 { deepEqual } from \"../../helpers/objects\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport LongText from \"../LongText.vue\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { DropdownOverlay } from \"../../utils/DropdownOverlay\";\nimport { refDebounced } from \"@vueuse/core\";\nimport { useWatchFetch } from \"../../composition/useWatchFetch.ts\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport { PlSvg } from \"../PlSvg\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { isNil } from \"@milaboratories/helpers\";\n\n/\n The current selected value.\n /\nconst model = defineModel<M>({ required: true });\n\nconst props = withDefaults(\n defineProps<{\n /\n Lambda for requesting of available options for the dropdown by search string.\n /\n optionsSearch: (string: string, type: \"value\" \| \"label\") => Promise<ListOption<M>[]>;\n /\n The label text for the dropdown field (optional)\n /\n label?: string;\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 Formatter for the selected value if its label is absent\n /\n formatValue?: (value: M) => string;\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 modelSearch: undefined,\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 formatValue: (v: M) => String(v),\n groupPosition: undefined,\n },\n);\n\nconst slots = defineSlots<{\n [key: string]: unknown;\n}>();\n\nconst rootRef = ref<HTMLElement \| undefined>();\nconst input = ref<HTMLInputElement \| undefined>();\n\nconst overlayRef = useTemplateRef(\"overlay\");\n\nconst search = ref<string \| null>(null);\nconst data = reactive({\n activeIndex: -1,\n open: false,\n});\n\nconst findActiveIndex = () =>\n tap(\n renderedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value)),\n (v) => (v < 0 ? 0 : v),\n );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst loadedOptionsRef = ref<ListOption<M>[]>([]);\nconst modelOptionRef = ref<ListOptionNormalized<M> \| undefined>(); // list of 1 option that is selected or empty, to keep selected label\n\nconst renderedOptionsRef = computed(() => {\n return normalizeListOptions(loadedOptionsRef.value).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n })) as (ListOptionBase<M> & { index: number; isSelected: boolean; isActive: boolean })[];\n});\nconst isLoadingOptions = ref<boolean>(true);\nconst isLoadingError = ref<boolean>(false);\n\nconst isDisabled = computed(() => {\n return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n return loadedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value));\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 (isLoadingError.value) {\n return \"Data loading error\";\n }\n\n return undefined;\n});\n\nconst textValue = computed(() => {\n const modelOption = unref(modelOptionRef);\n const options = unref(renderedOptionsRef);\n\n const item: ListOptionNormalized \| undefined =\n modelOption ??\n options.find((o) => deepEqual(o.value, model.value)) ??\n options.find((o) => deepEqual(o.value, model.value));\n\n return item?.label \|\| (model.value ? props.formatValue(model.value) : \"\");\n});\n\n// Native tooltip with the full selected value; the value layer itself has\n// `pointer-events: none`, so the title goes on the field wrapper.\nconst fieldTitle = computed(() => (!data.open && textValue.value ? textValue.value : undefined));\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && model.value) {\n return \"\";\n }\n\n return model.value ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n return model.value !== undefined && model.value !== null;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst selectOption = (v: (ListOptionBase<M> & { index: number }) \| undefined) => {\n model.value = v?.value as M;\n modelOptionRef.value = v;\n search.value = null;\n data.open = false;\n rootRef?.value?.focus();\n};\n\nconst clear = () => {\n model.value = undefined as M;\n modelOptionRef.value = undefined;\n};\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n data.open = !data.open;\n};\n\nwatch(\n () => data.open,\n (v) => {\n search.value = v ? \"\" : null;\n },\n);\n\nconst onInputFocus = () => {\n data.open = true;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node \| null;\n\n if (\n !rootRef.value?.contains(relatedTarget) &&\n !overlayRef.value?.listRef?.contains(relatedTarget)\n ) {\n search.value = null;\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 search.value = \"\";\n }\n return;\n }\n\n if (e.code === \"Escape\") {\n data.open = false;\n search.value = null;\n rootRef.value?.focus();\n }\n\n const options = unref(renderedOptionsRef);\n\n const { length } = options;\n\n if (!length) {\n return;\n }\n\n if (e.code === \"Enter\") {\n selectOption(options.find((it) => it.index === activeIndex));\n }\n\n const localIndex = options.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 = renderedOptionsRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => model.value, 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 search.value; // to watch\n\n if (data.activeIndex >= 0 && data.open) {\n overlayRef.value?.scrollIntoActive();\n }\n});\n\nconst searchDebounced = refDebounced(search, 300, { maxWait: 1000 });\n\nconst optionsRequest = useWatchFetch(\n () => searchDebounced.value,\n async (v) => (isNil(v) ? undefined : props.optionsSearch(v, \"label\")),\n);\n\nconst modelOptionRequest = useWatchFetch(\n () => model.value,\n async (v) => {\n if (isNil(v) \|\| deepEqual(modelOptionRef.value?.value, v)) {\n return modelOptionRef.value;\n }\n\n const options = await props.optionsSearch(String(v), \"value\");\n return options.find((o) => String(o.value) === String(v));\n },\n);\n\nwatch(\n () => optionsRequest.value,\n (result) => {\n if (result) {\n loadedOptionsRef.value = result;\n if (search.value !== null) {\n isLoadingError.value = false;\n }\n }\n },\n);\n\nwatch(\n () => modelOptionRequest.value,\n (result) => {\n if (result) {\n modelOptionRef.value = normalizeListOptions([result])[0];\n }\n },\n);\n\nwatch(\n () => optionsRequest.error,\n (err) => {\n if (err) {\n isLoadingError.value = Boolean(err);\n }\n },\n);\n\nwatch(\n () => optionsRequest.loading \|\| modelOptionRequest.loading,\n (loading) => {\n isLoadingOptions.value = loading;\n },\n);\n</script>\n\n<template>\n <div\n class=\"pl-autocomplete__envelope\"\n @click.stop=\"setFocusOnInput\"\n data-testid=\"pl-autocomplete\"\n >\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-autocomplete\"\n data-testid=\"pl-autocomplete-control\"\n :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete__container\">\n <div class=\"pl-autocomplete__field\" :title=\"fieldTitle\">\n <input\n ref=\"input\"\n v-model=\"search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"computedPlaceholder\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n data-testid=\"pl-autocomplete-input\"\n @focus=\"onInputFocus\"\n />\n\n <div v-if=\"!data.open\" class=\"input-value\" data-testid=\"pl-autocomplete-value\">\n <LongText> {{ textValue }} </LongText>\n </div>\n\n <div class=\"pl-autocomplete__controls\">\n <PlMaskIcon24\n v-if=\"isLoadingOptions\"\n name=\"loading\"\n data-testid=\"pl-autocomplete-loading\"\n />\n <PlIcon16\n v-if=\"clearable && hasValue\"\n class=\"clear\"\n data-testid=\"pl-autocomplete-clear\"\n name=\"delete-clear\"\n @click.stop=\"clear\"\n />\n <slot name=\"append\" />\n <div\n class=\"pl-autocomplete__arrow-wrapper\"\n data-testid=\"pl-autocomplete-arrow\"\n @click.stop=\"toggleOpen\"\n >\n <div\n v-if=\"arrowIconLarge\"\n class=\"arrow-icon\"\n :class=\"[`icon-24 ${arrowIconLarge}`]\"\n />\n <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" />\n <div v-else class=\"arrow-icon arrow-icon-default\" />\n </div>\n </div>\n </div>\n <label v-if=\"label\" data-testid=\"pl-autocomplete-label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-autocomplete-required\" />\n <span>{{ label }}</span>\n <PlTooltip\n v-if=\"slots.tooltip\"\n class=\"info\"\n position=\"top\"\n data-testid=\"pl-autocomplete-tooltip\"\n >\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <DropdownOverlay\n v-if=\"data.open\"\n ref=\"overlay\"\n :root=\"rootRef\"\n class=\"pl-autocomplete__options\"\n data-testid=\"pl-autocomplete-options\"\n tabindex=\"-1\"\n :gap=\"3\"\n >\n <DropdownListItem\n v-for=\"(item, index) in renderedOptionsRef\"\n :key=\"index\"\n :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"optionSize\"\n data-testid=\"pl-autocomplete-option\"\n @click.stop=\"selectOption(item)\"\n />\n <div\n v-if=\"!renderedOptionsRef.length\"\n class=\"nothing-found\"\n data-testid=\"pl-autocomplete-options-empty\"\n >\n Nothing found\n </div>\n </DropdownOverlay>\n <DoubleContour class=\"pl-autocomplete__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-autocomplete__error\" data-testid=\"pl-autocomplete-error\">\n {{ computedError }}\n </div>\n <div\n v-else-if=\"isLoadingOptions && loadingOptionsHelper\"\n class=\"pl-autocomplete__helper\"\n data-testid=\"pl-autocomplete-helper\"\n >\n {{ loadingOptionsHelper }}\n </div>\n <div v-else-if=\"helper\" class=\"pl-autocomplete__helper\" data-testid=\"pl-autocomplete-helper\">\n {{ helper }}\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCR,IAAM,IAAQ,GAAc,GAAA,aAAoB,EAE1C,IAAQ,GAsFR,KAAQ,IAEV,EAEE,IAAU,GAA8B,EACxC,IAAQ,GAAmC,EAE3C,IAAa,GAAe,UAAU,EAEtC,IAAS,EAAmB,KAAK,EACjC,IAAO,GAAS;GACpB,aAAa;GACb,MAAM;GACP,CAAC,EAEI,WACJ,EACE,EAAmB,MAAM,WAAW,MAAM,EAAU,EAAE,OAAO,EAAM,MAAM,CAAC,GACzE,MAAO,IAAI,IAAI,IAAI,EACrB,EAEG,WAAsB,EAAK,cAAc,IAAiB,EAE1D,IAAmB,EAAqB,EAAE,CAAC,EAC3C,IAAiB,GAA0C,EAE3D,IAAqB,QAClB,EAAqB,EAAiB,MAAM,CAAC,KAAK,GAAK,OAAW;GACvE,GAAG;GACH;GACA,YAAY,MAAU,GAAc;GACpC,UAAU,MAAU,EAAK;GAC1B,EAAE,CACH,EACI,IAAmB,EAAa,GAAK,EACrC,IAAiB,EAAa,GAAM,EAEpC,IAAa,QACV,EAAM,SACb,EAEI,KAAgB,QACb,EAAiB,MAAM,WAAW,MAAM,EAAU,EAAE,OAAO,EAAM,MAAM,CAAC,CAC/E,EAEI,IAAgB,QAAe;AAC/B,UAAiB,OAIrB;QAAI,EAAM,MACR,QAAO,EAAgB,EAAM,MAAM;AAGrC,QAAI,EAAe,MACjB,QAAO;;IAIT,EAEI,IAAY,QAAe;GAC/B,IAAM,IAAc,EAAM,EAAe,EACnC,IAAU,EAAM,EAAmB;AAOzC,WAJE,KACA,EAAQ,MAAM,MAAM,EAAU,EAAE,OAAO,EAAM,MAAM,CAAC,IACpD,EAAQ,MAAM,MAAM,EAAU,EAAE,OAAO,EAAM,MAAM,CAAC,GAEzC,UAAU,EAAM,QAAQ,EAAM,YAAY,EAAM,MAAM,GAAG;IACtE,EAII,KAAa,QAAgB,CAAC,EAAK,QAAQ,EAAU,QAAQ,EAAU,QAAQ,KAAA,EAAW,EAE1F,KAAsB,QACtB,CAAC,EAAK,QAAQ,EAAM,QACf,KAGF,EAAM,QAAQ,OAAO,EAAU,MAAM,GAAG,EAAM,YACrD,EAEI,KAAW,QACR,EAAM,UAAU,KAAA,KAAa,EAAM,UAAU,KACpD,EAEI,KAAW,QAAgB,EAAW,QAAQ,KAAA,IAAY,IAAK,EAE/D,KAAgB,MAA2D;AAK/E,GAJA,EAAM,QAAQ,GAAG,OACjB,EAAe,QAAQ,GACvB,EAAO,QAAQ,MACf,EAAK,OAAO,IACZ,GAAS,OAAO,OAAO;KAGnB,WAAc;AAElB,GADA,EAAM,QAAQ,KAAA,GACd,EAAe,QAAQ,KAAA;KAGnB,WAAwB,EAAM,OAAO,OAAO,EAE5C,UAAmB;AACvB,KAAK,OAAO,CAAC,EAAK;;AAGpB,UACQ,EAAK,OACV,MAAM;AACL,KAAO,QAAQ,IAAI,KAAK;IAE3B;EAED,IAAM,WAAqB;AACzB,KAAK,OAAO;KAGR,MAAc,MAAsB;GACxC,IAAM,IAAgB,EAAM;AAE5B,GACE,CAAC,EAAQ,OAAO,SAAS,EAAc,IACvC,CAAC,EAAW,OAAO,SAAS,SAAS,EAAa,KAElD,EAAO,QAAQ,MACf,EAAK,OAAO;KAIV,MAAiB,MAAgD;AACrE,OAAK;IAAC;IAAa;IAAW;IAAS;IAAS,CAAC,SAAS,EAAE,KAAK,CAG/D,GAAE,gBAAgB;OAFlB;GAKF,IAAM,EAAE,SAAM,mBAAgB;AAE9B,OAAI,CAAC,GAAM;AACT,IAAI,EAAE,SAAS,YACb,EAAK,OAAO,IACZ,EAAO,QAAQ;AAEjB;;AAGF,GAAI,EAAE,SAAS,aACb,EAAK,OAAO,IACZ,EAAO,QAAQ,MACf,EAAQ,OAAO,OAAO;GAGxB,IAAM,IAAU,EAAM,EAAmB,EAEnC,EAAE,cAAW;AAEnB,OAAI,CAAC,EACH;AAGF,GAAI,EAAE,SAAS,WACb,EAAa,EAAQ,MAAM,MAAO,EAAG,UAAU,EAAY,CAAC;GAG9D,IAAM,IAAa,EAAQ,WAAW,MAAO,EAAG,UAAU,EAAY,IAAI,IAEpE,IAAQ,EAAE,SAAS,cAAc,IAAI,EAAE,SAAS,YAAY,KAAK,GAEjE,IAAW,KAAK,IAAI,IAAa,IAAQ,EAAO,GAAG;AAEzD,KAAK,cAAc,EAAmB,MAAM,GAAU,SAAS;;AAYjE,EATA,GAAc,EAAQ,EAEtB,QAAY,EAAM,OAAO,IAAc,EAAE,WAAW,IAAM,CAAC,EAE3D,QACQ,EAAK,OACV,MAAU,IAAO,EAAM,OAAO,OAAO,GAAG,GAC1C,EAED,SAAsB;AAIpB,GAFA,EAAO,OAEH,EAAK,eAAe,KAAK,EAAK,QAChC,EAAW,OAAO,kBAAkB;IAEtC;EAEF,IAAM,KAAkB,GAAa,GAAQ,KAAK,EAAE,SAAS,KAAM,CAAC,EAE9D,IAAiB,QACf,GAAgB,OACtB,OAAO,MAAO,EAAM,EAAE,GAAG,KAAA,IAAY,EAAM,cAAc,GAAG,QAAQ,CACrE,EAEK,IAAqB,QACnB,EAAM,OACZ,OAAO,MACD,EAAM,EAAE,IAAI,EAAU,EAAe,OAAO,OAAO,EAAE,GAChD,EAAe,SAGR,MAAM,EAAM,cAAc,OAAO,EAAE,EAAE,QAAQ,EAC9C,MAAM,MAAM,OAAO,EAAE,MAAM,KAAK,OAAO,EAAE,CAAC,CAE5D;SAED,QACQ,EAAe,QACpB,MAAW;AACV,GAAI,MACF,EAAiB,QAAQ,GACrB,EAAO,UAAU,SACnB,EAAe,QAAQ;IAI9B,EAED,QACQ,EAAmB,QACxB,MAAW;AACV,GAAI,MACF,EAAe,QAAQ,EAAqB,CAAC,EAAO,CAAC,CAAC;IAG3D,EAED,QACQ,EAAe,QACpB,MAAQ;AACP,GAAI,MACF,EAAe,QAAQ,EAAQ;IAGpC,EAED,QACQ,EAAe,WAAW,EAAmB,UAClD,MAAY;AACX,KAAiB,QAAQ;IAE5B,kBAIC,EAuHM,OAAA;GAtHJ,OAAM;GACL,SAAK,EAAO,IAAe,CAAA,OAAA,CAAA;GAC5B,eAAY;MAEZ,EAoGM,OAAA;YAnGA;GAAJ,KAAI;GACH,UAAU,GAAA;GACX,OAAK,EAAA,CAAC,mBAAiB;IAAA,MAEP,EAAK;IAAI,OAAS,EAAQ,EAAA;IAAa,UAAa,EAAA;IAAU,CAAA,CAAA;GAD9E,eAAY;GAEX,WAAS;GACT,YAAU;MAEX,EA0FM,OA1FN,IA0FM;GAzFJ,EA8CM,OAAA;IA9CD,OAAM;IAA0B,OAAO,GAAA;;OAC1C,EAWE,SAAA;cAVI;KAAJ,KAAI;8CACW,QAAA;KACf,MAAK;KACL,UAAS;KACR,UAAU,EAAA;KACV,aAAa,GAAA;KACd,YAAW;KACX,cAAa;KACb,eAAY;KACX,SAAO;2BARC,EAAA,MAAM,CAAA,CAAA;IAWL,EAAK,oBAAA,GAAA,EAAjB,EAEM,OAFN,GAEM,CADJ,EAAsC,GAAA,MAAA;sBAAZ,CAAA,GAAA,EAAZ,EAAA,MAAS,EAAA,EAAA,CAAA,CAAA;;;IAGzB,EA2BM,OA3BN,GA2BM;KAzBI,EAAA,SAAA,GAAA,EADR,EAIE,EAAA,EAAA,EAAA;;MAFA,MAAK;MACL,eAAY;;KAGN,EAAA,aAAa,GAAA,SAAA,GAAA,EADrB,EAME,EAAA,GAAA,EAAA;;MAJA,OAAM;MACN,eAAY;MACZ,MAAK;MACJ,SAAK,EAAO,IAAK,CAAA,OAAA,CAAA;;KAEpB,EAAsB,EAAA,QAAA,SAAA;KACtB,EAYM,OAAA;MAXJ,OAAM;MACN,eAAY;MACX,SAAK,EAAO,GAAU,CAAA,OAAA,CAAA;SAGf,EAAA,kBAAA,GAAA,EADR,EAIE,OAAA;;MAFA,OAAK,EAAA,CAAC,cAAY,CAAA,WACE,EAAA,iBAAc,CAAA,CAAA;oBAEpB,EAAA,aAAA,GAAA,EAAhB,EAAkF,OAAA;;MAAvD,OAAK,EAAA,CAAC,cAAY,CAAA,WAAqB,EAAA,YAAS,CAAA,CAAA;0BAC3E,EAAoD,OAApD,EAAoD,EAAA,CAAA;;;GAI7C,EAAA,SAAA,GAAA,EAAb,EAaQ,SAbR,GAaQ;IAZO,EAAA,YAAA,GAAA,EAAb,EAAmF,EAAA,EAAA,EAAA;;KAA3D,KAAK,EAAA,GAAW;KAAE,eAAY;;IACtD,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;IAEN,GAAM,WAAA,GAAA,EADd,EASY,EAAA,EAAA,EAAA;;KAPV,OAAM;KACN,UAAS;KACT,eAAY;;KAED,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;;GAKrB,EAAK,QAAA,GAAA,EADb,EA0BkB,EAAA,GAAA,EAAA;;IAxBhB,KAAI;IACH,MAAM,EAAA;IACP,OAAM;IACN,eAAY;IACZ,UAAS;IACR,KAAK;;qBAGuC,EAAA,EAAA,GAAA,EAD7C,EASE,IAAA,MAAA,GARwB,EAAA,QAAhB,GAAM,YADhB,EASE,GAAA;KAPC,KAAK;KACL,QAAQ;KACR,eAAa,EAAK;KAClB,cAAY,EAAK;KACjB,MAAM,EAAA;KACP,eAAY;KACX,SAAK,GAAA,MAAO,EAAa,EAAI,EAAA,CAAA,OAAA,CAAA;;;;;;;iBAGvB,EAAA,MAAmB,SAK5B,EAAA,IAAA,GAAA,IAL4B,GAAA,EAD5B,EAMM,OANN,GAIC,kBAED,EAAA,CAAA;;;GAEF,EAAkF,IAAA;IAAnE,OAAM;IAA4B,kBAAgB,EAAA;;gBAG1D,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,MAAa,EAAA,EAAA,IAGL,EAAA,SAAoB,EAAA,wBAAA,GAAA,EADjC,EAMM,OANN,GAMM,EADD,EAAA,qBAAoB,EAAA,EAAA,IAET,EAAA,UAAA,GAAA,EAAhB,EAEM,OAFN,IAEM,EADD,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"PlAutocomplete.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAutocomplete/PlAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A component for selecting one value from a big list of options using string search request\n /\nexport default {\n name: \"PlAutocomplete\",\n};\n</script>\n\n<script\n lang=\"ts\"\n setup\n generic=\"M extends null \| undefined \| string \| number = null \| undefined \| string\"\n>\nimport \"./pl-autocomplete.scss\";\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from \"vue\";\nimport { tap } 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 { deepEqual } from \"../../helpers/objects\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport LongText from \"../LongText.vue\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { DropdownOverlay } from \"../../utils/DropdownOverlay\";\nimport { refDebounced } from \"@vueuse/core\";\nimport { useWatchFetch } from \"../../composition/useWatchFetch.ts\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport { PlSvg } from \"../PlSvg\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { isNil } from \"@milaboratories/helpers\";\n\n/\n The current selected value.\n /\nconst model = defineModel<M>({ required: true });\n\nconst props = withDefaults(\n defineProps<{\n /\n Lambda for requesting of available options for the dropdown by search string.\n /\n optionsSearch: (string: string, type: \"value\" \| \"label\") => Promise<ListOption<M>[]>;\n /\n The label text for the dropdown field (optional)\n /\n label?: string;\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 Formatter for the selected value if its label is absent\n /\n formatValue?: (value: M) => string;\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 modelSearch: undefined,\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 formatValue: (v: M) => String(v),\n groupPosition: undefined,\n },\n);\n\nconst slots = defineSlots<{\n [key: string]: unknown;\n}>();\n\nconst rootRef = ref<HTMLElement \| undefined>();\nconst input = ref<HTMLInputElement \| undefined>();\n\nconst overlayRef = useTemplateRef(\"overlay\");\n\nconst search = ref<string \| null>(null);\nconst data = reactive({\n activeIndex: -1,\n open: false,\n});\n\nconst findActiveIndex = () =>\n tap(\n renderedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value)),\n (v) => (v < 0 ? 0 : v),\n );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst loadedOptionsRef = ref<ListOption<M>[]>([]);\nconst modelOptionRef = ref<ListOptionNormalized<M> \| undefined>(); // list of 1 option that is selected or empty, to keep selected label\n\nconst renderedOptionsRef = computed(() => {\n return normalizeListOptions(loadedOptionsRef.value).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n })) as (ListOptionBase<M> & { index: number; isSelected: boolean; isActive: boolean })[];\n});\nconst isLoadingOptions = ref<boolean>(true);\nconst isLoadingError = ref<boolean>(false);\n\nconst isDisabled = computed(() => {\n return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n return loadedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value));\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 (isLoadingError.value) {\n return \"Data loading error\";\n }\n\n return undefined;\n});\n\nconst textValue = computed(() => {\n const modelOption = unref(modelOptionRef);\n const options = unref(renderedOptionsRef);\n\n const item: ListOptionNormalized \| undefined =\n modelOption ??\n options.find((o) => deepEqual(o.value, model.value)) ??\n options.find((o) => deepEqual(o.value, model.value));\n\n return item?.label \|\| (model.value ? props.formatValue(model.value) : \"\");\n});\n\n// Native tooltip with the full selected value; the value layer itself has\n// `pointer-events: none`, so the title goes on the field wrapper.\nconst fieldTitle = computed(() => (!data.open && textValue.value ? textValue.value : undefined));\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && model.value) {\n return \"\";\n }\n\n return model.value ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n return model.value !== undefined && model.value !== null;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst selectOption = (v: (ListOptionBase<M> & { index: number }) \| undefined) => {\n model.value = v?.value as M;\n modelOptionRef.value = v;\n search.value = null;\n data.open = false;\n rootRef?.value?.focus();\n};\n\nconst clear = () => {\n model.value = undefined as M;\n modelOptionRef.value = undefined;\n};\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n data.open = !data.open;\n};\n\nwatch(\n () => data.open,\n (v) => {\n search.value = v ? \"\" : null;\n },\n);\n\nconst onInputFocus = () => {\n data.open = true;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node \| null;\n\n if (\n !rootRef.value?.contains(relatedTarget) &&\n !overlayRef.value?.listRef?.contains(relatedTarget)\n ) {\n search.value = null;\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 search.value = \"\";\n }\n return;\n }\n\n if (e.code === \"Escape\") {\n data.open = false;\n search.value = null;\n rootRef.value?.focus();\n }\n\n const options = unref(renderedOptionsRef);\n\n const { length } = options;\n\n if (!length) {\n return;\n }\n\n if (e.code === \"Enter\") {\n selectOption(options.find((it) => it.index === activeIndex));\n }\n\n const localIndex = options.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 = renderedOptionsRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => model.value, 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 search.value; // to watch\n\n if (data.activeIndex >= 0 && data.open) {\n overlayRef.value?.scrollIntoActive();\n }\n});\n\nconst searchDebounced = refDebounced(search, 300, { maxWait: 1000 });\n\nconst optionsRequest = useWatchFetch(\n () => searchDebounced.value,\n async (v) => (isNil(v) ? undefined : props.optionsSearch(v, \"label\")),\n);\n\nconst modelOptionRequest = useWatchFetch(\n () => model.value,\n async (v) => {\n if (isNil(v) \|\| deepEqual(modelOptionRef.value?.value, v)) {\n return modelOptionRef.value;\n }\n\n const options = await props.optionsSearch(String(v), \"value\");\n return options.find((o) => String(o.value) === String(v));\n },\n);\n\nwatch(\n () => optionsRequest.value,\n (result) => {\n if (result) {\n loadedOptionsRef.value = result;\n if (search.value !== null) {\n isLoadingError.value = false;\n }\n }\n },\n);\n\nwatch(\n () => modelOptionRequest.value,\n (result) => {\n if (result) {\n modelOptionRef.value = normalizeListOptions([result])[0];\n }\n },\n);\n\nwatch(\n () => optionsRequest.error,\n (err) => {\n if (err) {\n isLoadingError.value = Boolean(err);\n }\n },\n);\n\nwatch(\n () => optionsRequest.loading \|\| modelOptionRequest.loading,\n (loading) => {\n isLoadingOptions.value = loading;\n },\n);\n</script>\n\n<template>\n <div\n class=\"pl-autocomplete__envelope\"\n @click.stop=\"setFocusOnInput\"\n data-testid=\"pl-autocomplete\"\n >\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-autocomplete\"\n data-testid=\"pl-autocomplete-control\"\n :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete__container\">\n <div class=\"pl-autocomplete__field\" :title=\"fieldTitle\">\n <input\n ref=\"input\"\n v-model=\"search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"computedPlaceholder\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n data-testid=\"pl-autocomplete-input\"\n @focus=\"onInputFocus\"\n />\n\n <div v-if=\"!data.open\" class=\"input-value\" data-testid=\"pl-autocomplete-value\">\n <LongText> {{ textValue }} </LongText>\n </div>\n\n <div class=\"pl-autocomplete__controls\">\n <PlMaskIcon24\n v-if=\"isLoadingOptions\"\n name=\"loading\"\n data-testid=\"pl-autocomplete-loading\"\n />\n <PlIcon16\n v-if=\"clearable && hasValue\"\n class=\"clear\"\n data-testid=\"pl-autocomplete-clear\"\n name=\"delete-clear\"\n @click.stop=\"clear\"\n />\n <slot name=\"append\" />\n <div\n class=\"pl-autocomplete__arrow-wrapper\"\n data-testid=\"pl-autocomplete-arrow\"\n @click.stop=\"toggleOpen\"\n >\n <div\n v-if=\"arrowIconLarge\"\n class=\"arrow-icon\"\n :class=\"[`icon-24 ${arrowIconLarge}`]\"\n />\n <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" />\n <div v-else class=\"arrow-icon arrow-icon-default\" />\n </div>\n </div>\n </div>\n <label v-if=\"label\" data-testid=\"pl-autocomplete-label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-autocomplete-required\" />\n <span>{{ label }}</span>\n <PlTooltip\n v-if=\"slots.tooltip\"\n class=\"info\"\n position=\"top\"\n data-testid=\"pl-autocomplete-tooltip\"\n >\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <DropdownOverlay\n v-if=\"data.open\"\n ref=\"overlay\"\n :root=\"rootRef\"\n class=\"pl-autocomplete__options\"\n data-testid=\"pl-autocomplete-options\"\n tabindex=\"-1\"\n :gap=\"3\"\n >\n <DropdownListItem\n v-for=\"(item, index) in renderedOptionsRef\"\n :key=\"index\"\n :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"optionSize\"\n data-testid=\"pl-autocomplete-option\"\n @click.stop=\"selectOption(item)\"\n />\n <div\n v-if=\"!renderedOptionsRef.length\"\n class=\"nothing-found\"\n data-testid=\"pl-autocomplete-options-empty\"\n >\n Nothing found\n </div>\n </DropdownOverlay>\n <DoubleContour class=\"pl-autocomplete__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-autocomplete__error\" data-testid=\"pl-autocomplete-error\">\n {{ computedError }}\n </div>\n <div\n v-else-if=\"isLoadingOptions && loadingOptionsHelper\"\n class=\"pl-autocomplete__helper\"\n data-testid=\"pl-autocomplete-helper\"\n >\n {{ loadingOptionsHelper }}\n </div>\n <div v-else-if=\"helper\" class=\"pl-autocomplete__helper\" data-testid=\"pl-autocomplete-helper\">\n {{ helper }}\n </div>\n </div>\n</template>\n"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
-import e from "../DropdownListItem.js";
+import e from "../PlSvg/PlSvg.js";
+import "../PlSvg/index.js";
 import t from "../PlTooltip/PlTooltip.js";
 import "../PlTooltip/index.js";
-import { getErrorMessage as n } from "../../helpers/error.js";
-import r from "../PlSvg/PlSvg.js";
-import "../PlSvg/index.js";
+import n from "../DropdownListItem.js";
+import { getErrorMessage as r } from "../../helpers/error.js";
 import i from "../PlIcon24/PlIcon24.js";
 import a from "../../utils/DoubleContour.js";
 import { useLabelNotch as o } from "../../utils/useLabelNotch.js";
@@ -123,13 +123,13 @@ var ce = ["tabindex"], le = { class: "pl-autocomplete-multi__container" }, ue =
 		o(R), O(() => L.modelValue, () => be(), { immediate: !0 });
 		let $ = f(() => {
 			if (!J.value) {
-				if (W.error) return n(W.error);
-				if (G.error) return n(G.error);
-				if (L.error) return n(L.error);
+				if (W.error) return r(W.error);
+				if (G.error) return r(G.error);
+				if (L.error) return r(L.error);
 				if (L.modelValue.length && K.value.length !== L.modelValue.length) return "The selected values are not one of the options";
 			}
 		});
-		return (n, o) => (y(), h("div", {
+		return (r, o) => (y(), h("div", {
 			class: "pl-autocomplete-multi__envelope",
 			onClick: xe,
 			"data-testid": "pl-autocomplete-multi"
@@ -177,7 +177,7 @@ var ce = ["tabindex"], le = { class: "pl-autocomplete-multi__container" }, ue =
 						name: "loading",
 						"data-testid": "pl-autocomplete-multi-loading"
 					})) : m("", !0),
-					C(n.$slots, "append"),
+					C(r.$slots, "append"),
 					g("div", {
 						class: "pl-autocomplete-multi__arrow-wrapper",
 						"data-testid": "pl-autocomplete-multi-arrow",
@@ -186,7 +186,7 @@ var ce = ["tabindex"], le = { class: "pl-autocomplete-multi__container" }, ue =
 				])
 			]),
 			v.label ? (y(), h("label", me, [
-				v.required ? (y(), p(E(r), {
+				v.required ? (y(), p(E(e), {
 					key: 0,
 					uri: E(te),
 					"data-testid": "pl-autocomplete-multi-required"
@@ -198,7 +198,7 @@ var ce = ["tabindex"], le = { class: "pl-autocomplete-multi__container" }, ue =
 					position: "top",
 					"data-testid": "pl-autocomplete-multi-tooltip"
 				}, {
-					tooltip: k(() => [C(n.$slots, "tooltip")]),
+					tooltip: k(() => [C(r.$slots, "tooltip")]),
 					_: 3
 				})) : m("", !0)
 			])) : m("", !0),
@@ -224,16 +224,16 @@ var ce = ["tabindex"], le = { class: "pl-autocomplete-multi__container" }, ue =
 						default: k(() => [_(w(e.label || e.value), 1)]),
 						_: 2
 					}, 1032, ["onClose"]))), 128))]),
-					(y(!0), h(d, null, S(q.value, (t, n) => (y(), p(e, {
-						key: n,
-						option: t,
+					(y(!0), h(d, null, S(q.value, (e, t) => (y(), p(n, {
+						key: t,
+						option: e,
 						"text-item": "text",
-						"is-selected": t.selected,
-						"is-hovered": V.activeOption == n,
+						"is-selected": e.selected,
+						"is-hovered": V.activeOption == t,
 						size: "medium",
 						"use-checkbox": "",
 						"data-testid": "pl-autocomplete-multi-option",
-						onClick: A((e) => X(t.value), ["stop"])
+						onClick: A((t) => X(e.value), ["stop"])
 					}, null, 8, [
 						"option",
 						"is-selected",

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

@@ -1,7 +1,7 @@
-import e from "../DropdownListItem.js";
-import { normalizeListOptions as t } from "../../helpers/utils.js";
-import n from "../PlIcon16/PlIcon16.js";
+import e from "../PlIcon16/PlIcon16.js";
 import "../PlIcon16/index.js";
+import { normalizeListOptions as t } from "../../helpers/utils.js";
+import n from "../DropdownListItem.js";
 import { useElementPosition as r } from "../../composition/usePosition.js";
 import './pl-btn-split.css';/* empty css             */
 import { Fragment as i, Teleport as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, mergeModels as f, normalizeClass as p, normalizeStyle as m, openBlock as h, reactive as g, ref as _, renderList as v, toDisplayString as y, unref as b, useModel as x, watch as S, withKeys as C, withModifiers as w } from "vue";
@@ -103,11 +103,11 @@ var E = ["onKeyup"], D = /* @__PURE__ */ d({
 				class: "pl-btn-split__icon-container d-flex align-center justify-center",
 				tabindex: "0",
 				onClick: r[0] ||= (e) => F.open = !F.open
-			}, [B.value ? (h(), s(b(n), {
+			}, [B.value ? (h(), s(b(e), {
 				key: 0,
 				"data-testid": "pl-btn-split-loading",
 				name: "loading"
-			})) : (h(), s(b(n), {
+			})) : (h(), s(b(e), {
 				key: 1,
 				name: L.value,
 				class: "pl-btn-split__icon"
@@ -122,14 +122,14 @@ var E = ["onKeyup"], D = /* @__PURE__ */ d({
 				class: "pl-dropdown__options",
 				style: m(I),
 				tabindex: "-1"
-			}, [(h(!0), l(i, null, v(z.value, (t, n) => (h(), s(e, {
+			}, [(h(!0), l(i, null, v(z.value, (e, t) => (h(), s(n, {
 				"data-testid": "pl-btn-split-option",
-				key: n,
-				option: t,
-				"is-selected": t.isSelected,
-				"is-hovered": t.isActive,
+				key: t,
+				option: e,
+				"is-selected": e.isSelected,
+				"is-hovered": e.isActive,
 				size: "medium",
-				onClick: w((e) => H(t.value), ["stop"])
+				onClick: w((t) => H(e.value), ["stop"])
 			}, null, 8, [
 				"option",
 				"is-selected",

package/dist/components/PlColumnLabel/PlColumnLabel.js ADDED Viewed

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

package/dist/components/PlColumnLabel/PlColumnLabel.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PlColumnLabel.js","names":[],"sources":["../../../src/components/PlColumnLabel/PlColumnLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlTooltip } from \"../PlTooltip\";\n\n/**\n * A column's name as every table and dropdown shows it. A column reached through a link to\n * another dataset gets a link icon in front, with `linkHint` on hover. Takes the whole option, so\n * a new option field only needs handling here.\n */\ndefineProps<{\n option?: Pick<ListOptionBase, \"label\" | \"linkHint\">;\n}>();\n</script>\n\n<template>\n <span :class=\"$style.root\" data-testid=\"pl-column-label\">\n <PlTooltip v-if=\"option?.linkHint\" :class=\"$style.link\" data-testid=\"pl-column-label-link\">\n <template #tooltip>{{ option.linkHint }}</template>\n <PlIcon16 name=\"link\" />\n </PlTooltip>\n \n <slot>{{ option?.label }}</slot>\n </span>\n</template>\n\n<style module>\n.root {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n min-width: 0;\n max-width: 100%;\n}\n\n/* Lets a long label shrink, so it can truncate. */\n.root > * {\n min-width: 0;\n}\n\n/* PlTooltip's inline-block wrapper would lift the icon above the text's centre. */\n.root > .link {\n display: flex;\n flex-shrink: 0;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlColumnLabel/PlColumnLabel.style.js ADDED Viewed

@@ -0,0 +1,8 @@
+import './PlColumnLabel.vue.css';var e = {
+	root: "_root_y7sbx_2",
+	link: "_link_y7sbx_16"
+};
+//#endregion
+export { e as default };
+//# sourceMappingURL=PlColumnLabel.style.js.map

package/dist/components/PlColumnLabel/PlColumnLabel.style.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PlColumnLabel.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlColumnLabel/PlColumnLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlTooltip } from \"../PlTooltip\";\n\n/**\n * A column's name as every table and dropdown shows it. A column reached through a link to\n * another dataset gets a link icon in front, with `linkHint` on hover. Takes the whole option, so\n * a new option field only needs handling here.\n */\ndefineProps<{\n option?: Pick<ListOptionBase, \"label\" | \"linkHint\">;\n}>();\n</script>\n\n<template>\n <span :class=\"$style.root\" data-testid=\"pl-column-label\">\n <PlTooltip v-if=\"option?.linkHint\" :class=\"$style.link\" data-testid=\"pl-column-label-link\">\n <template #tooltip>{{ option.linkHint }}</template>\n <PlIcon16 name=\"link\" />\n </PlTooltip>\n \n <slot>{{ option?.label }}</slot>\n </span>\n</template>\n\n<style module>\n.root {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n min-width: 0;\n max-width: 100%;\n}\n\n/* Lets a long label shrink, so it can truncate. */\n.root > * {\n min-width: 0;\n}\n\n/* PlTooltip's inline-block wrapper would lift the icon above the text's centre. */\n.root > .link {\n display: flex;\n flex-shrink: 0;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlColumnLabel/PlColumnLabel.vue.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ ._root_y7sbx_2{align-items:center;gap:4px;min-width:0;max-width:100%;display:inline-flex}._root_y7sbx_2>*{min-width:0}._root_y7sbx_2>._link_y7sbx_16{flex-shrink:0;display:flex}

package/dist/components/PlColumnLabel/PlColumnLabel.vue.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import { ListOptionBase } from '@platforma-sdk/model';
+/**
+ * A column's name as every table and dropdown shows it. A column reached through a link to
+ * another dataset gets a link icon in front, with `linkHint` on hover. Takes the whole option, so
+ * a new option field only needs handling here.
+ */
+type __VLS_Props = {
+    option?: Pick<ListOptionBase, "label" | "linkHint">;
+};
+declare var __VLS_13: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=PlColumnLabel.vue.d.ts.map

package/dist/components/PlColumnLabel/PlColumnLabel.vue.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PlColumnLabel.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlColumnLabel/PlColumnLabel.vue"],"names":[],"mappings":"AAiDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI3D;;;;GAIG;AACH,KAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;CACrD,CAAC;AAuEF,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/PlColumnLabel/PlColumnLabel.vue2.js ADDED Viewed

@@ -0,0 +1,28 @@
+import e from "../PlIcon16/PlIcon16.js";
+import "../PlIcon16/index.js";
+import t from "../PlTooltip/PlTooltip.js";
+import "../PlTooltip/index.js";
+import { createBlock as n, createCommentVNode as r, createElementBlock as i, createTextVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, renderSlot as u, toDisplayString as d, unref as f, withCtx as p } from "vue";
+//#region src/components/PlColumnLabel/PlColumnLabel.vue?vue&type=script&setup=true&lang.ts
+var m = /* @__PURE__ */ s({
+	__name: "PlColumnLabel",
+	props: { option: {} },
+	setup(s) {
+		return (m, h) => (l(), i("span", {
+			class: c(m.$style.root),
+			"data-testid": "pl-column-label"
+		}, [s.option?.linkHint ? (l(), n(f(t), {
+			key: 0,
+			class: c(m.$style.link),
+			"data-testid": "pl-column-label-link"
+		}, {
+			tooltip: p(() => [a(d(s.option.linkHint), 1)]),
+			default: p(() => [o(f(e), { name: "link" })]),
+			_: 1
+		}, 8, ["class"])) : r("", !0), u(m.$slots, "default", {}, () => [a(d(s.option?.label), 1)])], 2));
+	}
+});
+//#endregion
+export { m as default };
+//# sourceMappingURL=PlColumnLabel.vue2.js.map

package/dist/components/PlColumnLabel/PlColumnLabel.vue2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PlColumnLabel.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlColumnLabel/PlColumnLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlTooltip } from \"../PlTooltip\";\n\n/**\n * A column's name as every table and dropdown shows it. A column reached through a link to\n * another dataset gets a link icon in front, with `linkHint` on hover. Takes the whole option, so\n * a new option field only needs handling here.\n */\ndefineProps<{\n option?: Pick<ListOptionBase, \"label\" | \"linkHint\">;\n}>();\n</script>\n\n<template>\n <span :class=\"$style.root\" data-testid=\"pl-column-label\">\n <PlTooltip v-if=\"option?.linkHint\" :class=\"$style.link\" data-testid=\"pl-column-label-link\">\n <template #tooltip>{{ option.linkHint }}</template>\n <PlIcon16 name=\"link\" />\n </PlTooltip>\n \n <slot>{{ option?.label }}</slot>\n </span>\n</template>\n\n<style module>\n.root {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n min-width: 0;\n max-width: 100%;\n}\n\n/* Lets a long label shrink, so it can truncate. */\n.root > * {\n min-width: 0;\n}\n\n/* PlTooltip's inline-block wrapper would lift the icon above the text's centre. */\n.root > .link {\n display: flex;\n flex-shrink: 0;\n}\n</style>\n"],"mappings":";;;;;;;;;;yBAgBE,EAOO,QAAA;GAPA,OAAK,EAAEA,EAAAA,OAAO,KAAI;GAAE,eAAY;MACpB,EAAA,QAAQ,YAAA,GAAA,EAAzB,EAGY,EAAA,EAAA,EAAA;;GAHwB,OAAK,EAAEA,EAAAA,OAAO,KAAI;GAAE,eAAY;;GACvD,SAAO,QAAsB,CAAA,EAAA,EAAlB,EAAA,OAAO,SAAQ,EAAA,EAAA,CAAA,CAAA;oBACb,CAAxB,EAAwB,EAAA,EAAA,EAAA,EAAd,MAAK,QAAM,CAAA,CAAA,CAAA;;iCAGvB,EAAgC,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EAAvB,EAAA,QAAQ,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA"}

package/dist/components/PlColumnLabel/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as PlColumnLabel } from './PlColumnLabel.vue';
2	+ //# sourceMappingURL=index.d.ts.map

package/dist/components/PlColumnLabel/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PlColumnLabel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlDropdown.js","names":[],"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 Text shown in the field when `modelValue` has no matching option — e.g. its\n * upstream block was deleted. Rendered italic in error color.\n /\n missingValueLabel?: string;\n /\n Enables a button to clear the selected value (default: false)\n /\n clearable?: boolean;\n /\n If `true`, the dropdown component is marked as required.\n /\n required?: boolean;\n /\n If `true`, the dropdown component is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n 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?:\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 label: \"\",\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n showErrorMessage: true,\n placeholder: \"...\",\n missingValueLabel: \"Value not available\",\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\n/\n Loading spinner should not be shown when the dropdown is explicitly disabled,\n * even if options are undefined. The disabled state takes precedence.\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 selectedIndex = computed(() => {\n return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\n});\n\nconst hasValue = computed(() => {\n return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst isMissing = computed(() => {\n return hasValue.value && selectedIndex.value === -1 && !isLoadingOptions.value;\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 // The field renders the missing state via `missingValueLabel`; no need to\n // duplicate it as a helper error.\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 const item: ListOption \| undefined = options.find((o) => deepEqual(o.value, props.modelValue));\n return item?.label;\n});\n\n// Native tooltip with the full selected value. The `.input-value` layer has\n// `pointer-events: none`, so the title must sit on the field wrapper, which is\n// what actually receives the hover.\nconst fieldTitle = computed(() => {\n if (data.open) return undefined;\n if (isMissing.value) return props.missingValueLabel;\n return textValue.value !== undefined ? String(textValue.value) : undefined;\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && hasValue.value) {\n return \"\";\n }\n\n return textValue.value ? String(textValue.value) : props.placeholder;\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 (\n !rootRef.value?.contains(relatedTarget) &&\n !optionListRef.value?.listRef?.contains(relatedTarget)\n ) {\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\" data-testid=\"pl-dropdown\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-dropdown\"\n data-testid=\"pl-dropdown-control\"\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\" :title=\"fieldTitle\">\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 data-testid=\"pl-dropdown-input\"\n @focus=\"onInputFocus\"\n />\n\n <div v-if=\"!data.open\" class=\"input-value\" data-testid=\"pl-dropdown-value\">\n <LongText\n v-if=\"isMissing\"\n class=\"input-value--missing\"\n data-testid=\"pl-dropdown-value-missing\"\n >\n {{ missingValueLabel }}\n </LongText>\n <LongText v-else-if=\"textValue !== undefined\">\n {{ textValue }}\n </LongText>\n </div>\n\n <div class=\"pl-dropdown__controls\">\n <PlIcon24 v-if=\"showLoadingSpinner\" name=\"loading\" data-testid=\"pl-dropdown-loading\" />\n <PlIcon16\n v-if=\"clearable && hasValue\"\n class=\"clear\"\n data-testid=\"pl-dropdown-clear\"\n name=\"delete-clear\"\n @click.stop=\"clear\"\n />\n <slot name=\"append\" />\n <div\n class=\"pl-dropdown__arrow-wrapper\"\n data-testid=\"pl-dropdown-arrow\"\n @click.stop=\"toggleOpen\"\n >\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\" data-testid=\"pl-dropdown-label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-dropdown-required\" />\n <span>{{ label }}</span>\n <PlTooltip\n v-if=\"$slots.tooltip\"\n class=\"info\"\n position=\"top\"\n data-testid=\"pl-dropdown-tooltip\"\n >\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\" data-testid=\"pl-dropdown-error\">\n {{ computedError }}\n </div>\n <div\n v-else-if=\"showLoadingSpinner && loadingOptionsHelper\"\n class=\"pl-dropdown__helper\"\n data-testid=\"pl-dropdown-helper\"\n >\n {{ loadingOptionsHelper }}\n </div>\n <div v-else-if=\"helper\" class=\"pl-dropdown__helper\" data-testid=\"pl-dropdown-helper\">\n {{ helper }}\n </div>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"PlDropdown.js","names":[],"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 { PlColumnLabel } from \"../PlColumnLabel\";\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 Text shown in the field when `modelValue` has no matching option — e.g. its\n * upstream block was deleted. Rendered italic in error color.\n /\n missingValueLabel?: string;\n /\n Enables a button to clear the selected value (default: false)\n /\n clearable?: boolean;\n /\n If `true`, the dropdown component is marked as required.\n /\n required?: boolean;\n /\n If `true`, the dropdown component is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n 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?:\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 label: \"\",\n helper: undefined,\n loadingOptionsHelper: undefined,\n error: undefined,\n showErrorMessage: true,\n placeholder: \"...\",\n missingValueLabel: \"Value not available\",\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\n/\n Loading spinner should not be shown when the dropdown is explicitly disabled,\n * even if options are undefined. The disabled state takes precedence.\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 selectedIndex = computed(() => {\n return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\n});\n\nconst hasValue = computed(() => {\n return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst isMissing = computed(() => {\n return hasValue.value && selectedIndex.value === -1 && !isLoadingOptions.value;\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 // The field renders the missing state via `missingValueLabel`; no need to\n // duplicate it as a helper error.\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 selectedOption = computed(() =>\n unref(optionsRef).find((o) => deepEqual(o.value, props.modelValue)),\n);\n\nconst textValue = computed(() => selectedOption.value?.label);\n\n// Native tooltip with the full selected value and its link hint. The `.input-value` layer has\n// `pointer-events: none`, so the title must sit on the field wrapper, which is\n// what actually receives the hover.\nconst fieldTitle = computed(() => {\n if (data.open) return undefined;\n if (isMissing.value) return props.missingValueLabel;\n if (textValue.value === undefined) return undefined;\n const hint = selectedOption.value?.linkHint;\n return hint ? `${textValue.value}\\n${hint}` : String(textValue.value);\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && hasValue.value) {\n return \"\";\n }\n\n return textValue.value ? String(textValue.value) : props.placeholder;\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 (\n !rootRef.value?.contains(relatedTarget) &&\n !optionListRef.value?.listRef?.contains(relatedTarget)\n ) {\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\" data-testid=\"pl-dropdown\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-dropdown\"\n data-testid=\"pl-dropdown-control\"\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\" :title=\"fieldTitle\">\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 data-testid=\"pl-dropdown-input\"\n @focus=\"onInputFocus\"\n />\n\n <div v-if=\"!data.open\" class=\"input-value\" data-testid=\"pl-dropdown-value\">\n <LongText\n v-if=\"isMissing\"\n class=\"input-value--missing\"\n data-testid=\"pl-dropdown-value-missing\"\n >\n {{ missingValueLabel }}\n </LongText>\n <PlColumnLabel v-else-if=\"textValue !== undefined\" :option=\"selectedOption\">\n <LongText>{{ textValue }}</LongText>\n </PlColumnLabel>\n </div>\n\n <div class=\"pl-dropdown__controls\">\n <PlIcon24 v-if=\"showLoadingSpinner\" name=\"loading\" data-testid=\"pl-dropdown-loading\" />\n <PlIcon16\n v-if=\"clearable && hasValue\"\n class=\"clear\"\n data-testid=\"pl-dropdown-clear\"\n name=\"delete-clear\"\n @click.stop=\"clear\"\n />\n <slot name=\"append\" />\n <div\n class=\"pl-dropdown__arrow-wrapper\"\n data-testid=\"pl-dropdown-arrow\"\n @click.stop=\"toggleOpen\"\n >\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\" data-testid=\"pl-dropdown-label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-dropdown-required\" />\n <span>{{ label }}</span>\n <PlTooltip\n v-if=\"$slots.tooltip\"\n class=\"info\"\n position=\"top\"\n data-testid=\"pl-dropdown-tooltip\"\n >\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\" data-testid=\"pl-dropdown-error\">\n {{ computedError }}\n </div>\n <div\n v-else-if=\"showLoadingSpinner && loadingOptionsHelper\"\n class=\"pl-dropdown__helper\"\n data-testid=\"pl-dropdown-helper\"\n >\n {{ loadingOptionsHelper }}\n </div>\n <div v-else-if=\"helper\" class=\"pl-dropdown__helper\" data-testid=\"pl-dropdown-helper\">\n {{ helper }}\n </div>\n </div>\n</template>\n"],"mappings":""}

package/dist/components/PlDropdown/PlDropdown.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlDropdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdown/PlDropdown.vue"],"names":[],"mappings":"~~AAmdA~~,OAAO,KAAK,EAAE,UAAU,EAAwB,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;~~AASpG~~,OAAO,oBAAoB,CAAC;AAK5B;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,GAAK,CAAC,GAAG,OAAO,EACjC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;~~WA+qBO~~,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;~~QArqBpD~~;;WAEG;oBACS,CAAC;QACb;;WAEG;gBACK,MAAM;QACd;;WAEG;kBACO,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACnC;;WAEG;iBACM,MAAM;QACf;;WAEG;+BACoB,MAAM;QAC7B;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,OAAO;QACrB;;WAEG;sBACW,MAAM;QACpB;;;WAGG;4BACiB,MAAM;QAC1B;;WAEG;oBACS,OAAO;QACnB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;oBACS,cAAc;QAC1B;;WAEG;yBACc,cAAc;QAC/B;;WAEG;qBACU,OAAO,GAAG,QAAQ;QAC/B;;aAEK;wBAED,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;;;~~KA4lB2E~~,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;iBAbE,CAAC,KAAK,IAAiB,KAAK,GAAG;;kBAC9B,CAAC,KAAK,IAAiB,KAAK,GAAG;;~~cAhqBvC~~,mBAAmB,SAAS,CAAC,GAAG,SAAS,KAAG,IAAI;~~EAgrBlD~~,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
1	+ {"version":3,"file":"PlDropdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdown/PlDropdown.vue"],"names":[],"mappings":"AAsdA,OAAO,KAAK,EAAE,UAAU,EAAwB,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAUpG,OAAO,oBAAoB,CAAC;AAK5B;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,GAAK,CAAC,GAAG,OAAO,EACjC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAisBO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAvrBpD;;WAEG;oBACS,CAAC;QACb;;WAEG;gBACK,MAAM;QACd;;WAEG;kBACO,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACnC;;WAEG;iBACM,MAAM;QACf;;WAEG;+BACoB,MAAM;QAC7B;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,OAAO;QACrB;;WAEG;sBACW,MAAM;QACpB;;;WAGG;4BACiB,MAAM;QAC1B;;WAEG;oBACS,OAAO;QACnB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;oBACS,cAAc;QAC1B;;WAEG;yBACc,cAAc;QAC/B;;WAEG;qBACU,OAAO,GAAG,QAAQ;QAC/B;;aAEK;wBAED,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;;;KA8mB2E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;iBAbE,CAAC,KAAK,IAAiB,KAAK,GAAG;;kBAC9B,CAAC,KAAK,IAAiB,KAAK,GAAG;;cAlrBvC,mBAAmB,SAAS,CAAC,GAAG,SAAS,KAAG,IAAI;EAksBlD,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}