npm - @milaboratories/uikit - Versions diffs - 2.4.1 → 2.4.3 - Mend

@milaboratories/uikit 2.4.1 → 2.4.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 (1323) hide show

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

@@ -38,4 +38,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=PlCheckbox.vue.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlCheckbox.vue.js","sources":["../../../src/components/PlCheckbox/PlCheckbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Component for boolean model manipulation /\nexport default {\n name: 'PlCheckbox',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { useSlots } from 'vue';\nimport './pl-checkbox.scss';\nimport PlCheckboxBase from './PlCheckboxBase.vue';\n\ndefineEmits<{\n /\n Emitted when the model value is updated.\n /\n (e: 'update:modelValue', value: boolean): void;\n}>();\n\nconst props = defineProps<{\n /\n The current boolean value of the checkbox.\n /\n modelValue: boolean;\n /\n If `true`, the checkbox is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n If `true`, the checkbox is indeterminate (doesn't affect the model value).\n */\n indeterminate?: boolean;\n}>();\n\nconst slots = useSlots();\n</script>\n\n<template>\n <div v-if=\"slots['default']\" class=\"pl-checkbox\" :class=\"{ disabled }\">\n <PlCheckboxBase v-bind=\"props\" @update:model-value=\"$emit('update:modelValue', $event)\" />\n <label @click=\"$emit('update:modelValue', !$props.modelValue)\"><slot /></label>\n </div>\n <PlCheckboxBase v-else v-bind=\"props\" @update:model-value=\"$emit('update:modelValue', $event)\" />\n</template>\n"],"names":["__default__","props","__props","slots","useSlots"],"mappings":";;;AAEA,~~MAAeA~~,~~IAAA~~;AAAA,EACb,MAAM;AACR;;;;;;;;;AAeA,UAAMC,IAAQC,GAeRC,IAAQC,~~EAAS~~;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"PlCheckbox.vue.js","sources":["../../../src/components/PlCheckbox/PlCheckbox.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Component for boolean model manipulation /\nexport default {\n name: 'PlCheckbox',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { useSlots } from 'vue';\nimport './pl-checkbox.scss';\nimport PlCheckboxBase from './PlCheckboxBase.vue';\n\ndefineEmits<{\n /\n Emitted when the model value is updated.\n /\n (e: 'update:modelValue', value: boolean): void;\n}>();\n\nconst props = defineProps<{\n /\n The current boolean value of the checkbox.\n /\n modelValue: boolean;\n /\n If `true`, the checkbox is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n If `true`, the checkbox is indeterminate (doesn't affect the model value).\n */\n indeterminate?: boolean;\n}>();\n\nconst slots = useSlots();\n</script>\n\n<template>\n <div v-if=\"slots['default']\" class=\"pl-checkbox\" :class=\"{ disabled }\">\n <PlCheckboxBase v-bind=\"props\" @update:model-value=\"$emit('update:modelValue', $event)\" />\n <label @click=\"$emit('update:modelValue', !$props.modelValue)\"><slot /></label>\n </div>\n <PlCheckboxBase v-else v-bind=\"props\" @update:model-value=\"$emit('update:modelValue', $event)\" />\n</template>\n"],"names":["__default__","props","__props","slots","useSlots"],"mappings":";;;AAEA,MAAAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;AAeA,UAAMC,IAAQC,GAeRC,IAAQC,EAAA;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlCheckbox/PlCheckboxBase.vue.d.ts CHANGED Viewed

@@ -9,4 +9,3 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;
-//# sourceMappingURL=PlCheckboxBase.vue.d.ts.map

package/dist/components/PlCheckbox/__tests__/PlCheckbox.spec.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/components/PlCheckbox/index.d.ts CHANGED Viewed

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

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

@@ -38,4 +38,3 @@ export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T]: T[K];
 } & {};
-//# sourceMappingURL=PlCheckboxGroup.vue.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlCheckboxGroup.vue.js","sources":["../../../src/components/PlCheckboxGroup/PlCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Component for selecting multiple values from a list of options\n /\nexport default {\n name: 'PlCheckboxGroup',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport './pl-checkbox-group.scss';\nimport type { SimpleOption } from '../../types';\nimport PlCheckboxBase from '../PlCheckbox/PlCheckboxBase.vue';\nimport { PlTooltip } from '../PlTooltip';\nimport { useSlots } from 'vue';\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', v: M[]): void;\n}>();\n\nconst props = defineProps<{\n /\n The current selected values.\n /\n modelValue: M[];\n /\n The label text for the component (optional)\n /\n label?: string;\n /\n List of available options for the component\n /\n options: Readonly<SimpleOption<M>[]>;\n /\n If `true`, the component is disabled and cannot be interacted with.\n */\n disabled?: boolean;\n}>();\n\nconst hasValue = (value: M) => {\n return props.modelValue.includes(value);\n};\n\nconst updateModel = (value: M) => {\n const values = props.modelValue ?? [];\n emit('update:modelValue', hasValue(value) ? values.filter((v) => v !== value) : [...values, value]);\n};\n</script>\n\n<template>\n <div class=\"pl-checkbox-group\" :class=\"{ disabled }\">\n <label v-if=\"label\">\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-for=\"(opt, i) in options.map((it) => ({ label: 'label' in it ? it.label : it.text, value: it.value }))\" :key=\"i\">\n <PlCheckboxBase :disabled=\"disabled\" :label=\"opt.label\" :model-value=\"hasValue(opt.value)\" @update:model-value=\"() => updateModel(opt.value)\" />\n <label @click.stop=\"() => updateModel(opt.value)\">{{ opt.label }}</label>\n </div>\n </div>\n</template>\n"],"names":["__default__","slots","useSlots","emit","__emit","props","__props","hasValue","value","updateModel","values","v"],"mappings":";;;;~~uCAIeA~~,~~IAAA~~;AAAA,EACb,MAAM;AACR;;;;;;;;;;AAUA,UAAMC,IAAQC,~~EAAS~~,~~GAEjBC~~,IAAOC,GAIPC,IAAQC,GAmBRC,IAAW,CAACC,MACTH,EAAM,WAAW,SAASG,CAAK,GAGlCC,IAAc,CAACD,MAAa;~~AAC1B~~,~~YAAAE~~,IAASL,EAAM,cAAc,~~CAAC~~;~~AACpC~~,MAAAF,EAAK,qBAAqBI,EAASC,CAAK,IAAIE,EAAO,OAAO,CAACC,MAAMA,MAAMH,CAAK,IAAI,CAAC,GAAGE,GAAQF,CAAK,CAAC;AAAA,IACpG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"PlCheckboxGroup.vue.js","sources":["../../../src/components/PlCheckboxGroup/PlCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Component for selecting multiple values from a list of options\n /\nexport default {\n name: 'PlCheckboxGroup',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport './pl-checkbox-group.scss';\nimport type { SimpleOption } from '../../types';\nimport PlCheckboxBase from '../PlCheckbox/PlCheckboxBase.vue';\nimport { PlTooltip } from '../PlTooltip';\nimport { useSlots } from 'vue';\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', v: M[]): void;\n}>();\n\nconst props = defineProps<{\n /\n The current selected values.\n /\n modelValue: M[];\n /\n The label text for the component (optional)\n /\n label?: string;\n /\n List of available options for the component\n /\n options: Readonly<SimpleOption<M>[]>;\n /\n If `true`, the component is disabled and cannot be interacted with.\n */\n disabled?: boolean;\n}>();\n\nconst hasValue = (value: M) => {\n return props.modelValue.includes(value);\n};\n\nconst updateModel = (value: M) => {\n const values = props.modelValue ?? [];\n emit('update:modelValue', hasValue(value) ? values.filter((v) => v !== value) : [...values, value]);\n};\n</script>\n\n<template>\n <div class=\"pl-checkbox-group\" :class=\"{ disabled }\">\n <label v-if=\"label\">\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-for=\"(opt, i) in options.map((it) => ({ label: 'label' in it ? it.label : it.text, value: it.value }))\" :key=\"i\">\n <PlCheckboxBase :disabled=\"disabled\" :label=\"opt.label\" :model-value=\"hasValue(opt.value)\" @update:model-value=\"() => updateModel(opt.value)\" />\n <label @click.stop=\"() => updateModel(opt.value)\">{{ opt.label }}</label>\n </div>\n </div>\n</template>\n"],"names":["__default__","slots","useSlots","emit","__emit","props","__props","hasValue","value","updateModel","values","v"],"mappings":";;;;uCAIAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;AAUA,UAAMC,IAAQC,EAAA,GAERC,IAAOC,GAIPC,IAAQC,GAmBRC,IAAW,CAACC,MACTH,EAAM,WAAW,SAASG,CAAK,GAGlCC,IAAc,CAACD,MAAa;AAChC,YAAME,IAASL,EAAM,cAAc,CAAA;AACnC,MAAAF,EAAK,qBAAqBI,EAASC,CAAK,IAAIE,EAAO,OAAO,CAACC,MAAMA,MAAMH,CAAK,IAAI,CAAC,GAAGE,GAAQF,CAAK,CAAC;AAAA,IACpG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlCheckboxGroup/index.d.ts CHANGED Viewed

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

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

@@ -28,4 +28,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=PlChip.vue.d.ts.map

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

@@ -1,4 +1,4 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(`.pl-chip-tooltip{display:inline-flex}.pl-chip{--chip-color: var(--txt-01);position:relative;display:inline-flex;align-items:center;gap:4px;padding:0 8px;height:32px;background:var(--chip-bg);border:var(--chip-border);border-radius:6px;max-width:256px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base);letter-spacing:-.2px;color:var(--chip-color)}.pl-chip.small{height:24px;padding:0 6px;border-radius:4px}.pl-chip.large{height:40px;padding:0 12px;border-radius:6px}[data-theme=dark] .pl-chip{color:#fff}.pl-chip__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.pl-chip__close{cursor:pointer;--mask-color: var(--chip-close-ic-color)}.pl-chip__close:hover{--mask-color: var(--chip-close-ic-hover-color)}.pl-chip__close:focus-visible{--mask-color: var(--chip-close-ic-hover-color);box-shadow:0 0 0 2px var(--border-color-focus);border-radius:1px;outline:none}.pl-chip__close--icon{background:var(--mask-color);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='M4.00001%202.93933L8.00001%206.93933L12%202.93933L13.0607%203.99999L9.06067%207.99999L13.0607%2012L12%2013.0607L8.00001%209.06065L4.00001%2013.0607L2.93935%2012L6.93935%207.99999L2.93935%203.99999L4.00001%202.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='M4.00001%202.93933L8.00001%206.93933L12%202.93933L13.0607%203.99999L9.06067%207.99999L13.0607%2012L12%2013.0607L8.00001%209.06065L4.00001%2013.0607L2.93935%2012L6.93935%207.99999L2.93935%203.99999L4.00001%202.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}`)),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(`.pl-chip-tooltip{display:inline-flex}.pl-chip{--chip-color: var(--txt-01);position:relative;display:inline-flex;align-items:center;gap:4px;padding:0 8px;height:32px;background:var(--chip-bg);border:var(--chip-border);border-radius:6px;max-width:256px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base);line-height:calc(var(--line-height-base) + 2px);letter-spacing:-.2px;color:var(--chip-color)}.pl-chip.small{height:24px;padding:0 6px;border-radius:4px}.pl-chip.large{height:40px;padding:0 12px;border-radius:6px}[data-theme=dark] .pl-chip{color:#fff}.pl-chip__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.pl-chip__close{cursor:pointer;--mask-color: var(--chip-close-ic-color)}.pl-chip__close:hover{--mask-color: var(--chip-close-ic-hover-color)}.pl-chip__close:focus-visible{--mask-color: var(--chip-close-ic-hover-color);box-shadow:0 0 0 2px var(--border-color-focus);border-radius:1px;outline:none}.pl-chip__close--icon{background:var(--mask-color);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='M4.00001%202.93933L8.00001%206.93933L12%202.93933L13.0607%203.99999L9.06067%207.99999L13.0607%2012L12%2013.0607L8.00001%209.06065L4.00001%2013.0607L2.93935%2012L6.93935%207.99999L2.93935%203.99999L4.00001%202.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='M4.00001%202.93933L8.00001%206.93933L12%202.93933L13.0607%203.99999L9.06067%207.99999L13.0607%2012L12%2013.0607L8.00001%209.06065L4.00001%2013.0607L2.93935%2012L6.93935%207.99999L2.93935%203.99999L4.00001%202.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}`)),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
 import { defineComponent as c, ref as i, onMounted as m, createBlock as d, openBlock as n, unref as f, createSlots as u, withCtx as p, createElementVNode as t, normalizeClass as v, createElementBlock as h, createCommentVNode as y, renderSlot as a, withModifiers as _, withKeys as k } from "vue";
 import $ from "../PlTooltip/PlTooltip.vue.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlChip.vue.js","sources":["../../../src/components/PlChip/PlChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport './pl-chip.scss';\nimport { onMounted, ref } from 'vue';\nimport { PlTooltip } from '../PlTooltip';\n\ndefineEmits(['close']);\n\ndefineProps<{\n closeable?: boolean;\n small?: boolean;\n}>();\n\nconst chip = ref<HTMLElement>();\nconst canShowTooltip = ref(false);\n\nonMounted(() => {\n if (chip.value) {\n canShowTooltip.value = chip.value?.clientWidth >= 256;\n }\n});\n</script>\n\n<template>\n <PlTooltip position=\"top\" class=\"pl-chip-tooltip\" :delay=\"500\">\n <template v-if=\"canShowTooltip\" #tooltip>\n <slot />\n </template>\n <div ref=\"chip\" class=\"pl-chip\" :class=\"{ small }\">\n <div class=\"pl-chip__text\">\n <slot />\n </div>\n <div v-if=\"closeable\" tabindex=\"0\" class=\"pl-chip__close\" @keydown.enter=\"$emit('close')\" @click.stop=\"$emit('close')\">\n <div class=\"pl-chip__close--icon\" />\n </div>\n </div>\n </PlTooltip>\n</template>\n"],"names":["chip","ref","canShowTooltip","onMounted","_a"],"mappings":";;;;;;;;;;;AAYA,UAAMA,IAAOC,~~EAAiB~~,~~GACxBC~~,IAAiBD,EAAI,EAAK;AAEhC,WAAAE,EAAU,MAAM;;AACd,MAAIH,EAAK,~~UACQE~~,~~EAAA~~,UAAQE,IAAAJ,EAAK,UAAL,gBAAAI,EAAY,gBAAe;AAAA,~~IACpD~~,~~CACD~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"PlChip.vue.js","sources":["../../../src/components/PlChip/PlChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport './pl-chip.scss';\nimport { onMounted, ref } from 'vue';\nimport { PlTooltip } from '../PlTooltip';\n\ndefineEmits(['close']);\n\ndefineProps<{\n closeable?: boolean;\n small?: boolean;\n}>();\n\nconst chip = ref<HTMLElement>();\nconst canShowTooltip = ref(false);\n\nonMounted(() => {\n if (chip.value) {\n canShowTooltip.value = chip.value?.clientWidth >= 256;\n }\n});\n</script>\n\n<template>\n <PlTooltip position=\"top\" class=\"pl-chip-tooltip\" :delay=\"500\">\n <template v-if=\"canShowTooltip\" #tooltip>\n <slot />\n </template>\n <div ref=\"chip\" class=\"pl-chip\" :class=\"{ small }\">\n <div class=\"pl-chip__text\">\n <slot />\n </div>\n <div v-if=\"closeable\" tabindex=\"0\" class=\"pl-chip__close\" @keydown.enter=\"$emit('close')\" @click.stop=\"$emit('close')\">\n <div class=\"pl-chip__close--icon\" />\n </div>\n </div>\n </PlTooltip>\n</template>\n"],"names":["chip","ref","canShowTooltip","onMounted","_a"],"mappings":";;;;;;;;;;;AAYA,UAAMA,IAAOC,EAAA,GACPC,IAAiBD,EAAI,EAAK;AAEhC,WAAAE,EAAU,MAAM;;AACd,MAAIH,EAAK,UACPE,EAAe,UAAQE,IAAAJ,EAAK,UAAL,gBAAAI,EAAY,gBAAe;AAAA,IAEtD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlChip/index.d.ts CHANGED Viewed

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

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

@@ -9,4 +9,3 @@ declare const _default: import('vue').DefineComponent<{
     onCopy?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, SVGSVGElement>;
 export default _default;
-//# sourceMappingURL=PlClipboard.vue.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlClipboard.vue2.js","sources":["../../../src/components/PlClipboard/PlClipboard.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n name: 'PlClipboard',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlMaskIcon16 } from '../PlMaskIcon16';\nimport type { Size } from '../../types.ts';\nimport { computed, onUnmounted, ref } from 'vue';\n\nconst props = defineProps<{\n size?: Size;\n}>();\n\nconst emit = defineEmits(['copy']);\n\nconst copyEffect = ref<boolean>(false);\n\nconst iconName = computed(() => copyEffect.value ? 'clipboard-copied' : 'clipboard');\n\nlet timeoutId: undefined \| number;\n\nfunction onCopy() {\n clearTimeout(timeoutId);\n copyEffect.value = true;\n emit('copy');\n timeoutId = window.setTimeout(() => {\n copyEffect.value = false;\n }, 1000);\n}\n\nonUnmounted(() => {\n clearTimeout(timeoutId);\n});\n</script>\n\n<template>\n <PlMaskIcon16 :name=\"iconName\" :size=\"props.size\" :class=\"$style.copy\" @click=\"onCopy\" />\n</template>\n\n<style module>\n.copy {\n cursor: pointer;\n display: block;\n}\n</style>\n"],"names":["__default__","props","__props","emit","__emit","copyEffect","ref","iconName","computed","timeoutId","onCopy","onUnmounted"],"mappings":";;AACA,~~MAAeA~~,~~IAAA~~;AAAA,EACb,MAAM;AACR;;;;;;;AAQA,UAAMC,IAAQC,GAIRC,IAAOC,GAEPC,IAAaC,EAAa,EAAK,GAE/BC,IAAWC,EAAS,MAAMH,EAAW,QAAQ,qBAAqB,WAAW;~~AAE/E~~,~~QAAAI~~;AAEJ,aAASC,IAAS;AAChB,mBAAaD,CAAS,GACtBJ,EAAW,QAAQ,IACnBF,EAAK,MAAM,~~GACCM~~,~~IAAA~~,OAAO,WAAW,MAAM;AAClC,QAAAJ,EAAW,QAAQ;AAAA,~~SAClB~~,GAAI;AAAA,~~IAAA~~;~~AAGT~~,WAAAM,EAAY,MAAM;AAChB,mBAAaF,CAAS;AAAA,~~IAAA~~,~~CACvB~~;;;;;;;;"}
1	+ {"version":3,"file":"PlClipboard.vue2.js","sources":["../../../src/components/PlClipboard/PlClipboard.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n name: 'PlClipboard',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlMaskIcon16 } from '../PlMaskIcon16';\nimport type { Size } from '../../types.ts';\nimport { computed, onUnmounted, ref } from 'vue';\n\nconst props = defineProps<{\n size?: Size;\n}>();\n\nconst emit = defineEmits(['copy']);\n\nconst copyEffect = ref<boolean>(false);\n\nconst iconName = computed(() => copyEffect.value ? 'clipboard-copied' : 'clipboard');\n\nlet timeoutId: undefined \| number;\n\nfunction onCopy() {\n clearTimeout(timeoutId);\n copyEffect.value = true;\n emit('copy');\n timeoutId = window.setTimeout(() => {\n copyEffect.value = false;\n }, 1000);\n}\n\nonUnmounted(() => {\n clearTimeout(timeoutId);\n});\n</script>\n\n<template>\n <PlMaskIcon16 :name=\"iconName\" :size=\"props.size\" :class=\"$style.copy\" @click=\"onCopy\" />\n</template>\n\n<style module>\n.copy {\n cursor: pointer;\n display: block;\n}\n</style>\n"],"names":["__default__","props","__props","emit","__emit","copyEffect","ref","iconName","computed","timeoutId","onCopy","onUnmounted"],"mappings":";;AACA,MAAAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;AAQA,UAAMC,IAAQC,GAIRC,IAAOC,GAEPC,IAAaC,EAAa,EAAK,GAE/BC,IAAWC,EAAS,MAAMH,EAAW,QAAQ,qBAAqB,WAAW;AAEnF,QAAII;AAEJ,aAASC,IAAS;AAChB,mBAAaD,CAAS,GACtBJ,EAAW,QAAQ,IACnBF,EAAK,MAAM,GACXM,IAAY,OAAO,WAAW,MAAM;AAClC,QAAAJ,EAAW,QAAQ;AAAA,MACrB,GAAG,GAAI;AAAA,IACT;AAEA,WAAAM,EAAY,MAAM;AAChB,mBAAaF,CAAS;AAAA,IACxB,CAAC;;;;;;;;"}

package/dist/components/PlClipboard/index.d.ts CHANGED Viewed

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

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

@@ -19,4 +19,3 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     onConfirm: () => void;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;
-//# sourceMappingURL=PlConfirmDialog.vue.d.ts.map

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

@@ -119,4 +119,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=PlDialogModal.vue.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlDialogModal.vue.js","sources":["../../../src/components/PlDialogModal/PlDialogModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { useEventListener } from '../../composition/useEventListener';\nimport './pl-dialog-modal.scss';\nimport { computed, ref } from 'vue';\nimport PlCloseModalBtn from '../../utils/PlCloseModalBtn.vue';\nimport type { Size } from '../../types';\n\nconst slots = defineSlots<{\n title?: () => unknown;\n default?: () => unknown;\n actions?: () => unknown;\n}>();\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst props = withDefaults(\n defineProps<{\n /*\n Determines whether the modal is open\n /\n modelValue: boolean;\n /\n css width (default value is `448px`)\n /\n width?: string;\n /\n css height (default value is `auto`)\n /\n height?: string;\n /\n css min-height (default value is `auto`)\n /\n minHeight?: string;\n /\n css min-height (default value is `auto` but recommended is 440px)\n /\n maxHeight?: string;\n /\n Enables a button to close the modal (default: `true`)\n /\n closable?: boolean;\n /\n If `true` content gutters are removed\n /\n noContentGutters?: boolean;\n /\n If `true` top content gutter is removed\n /\n noTopContentGutter?: boolean;\n /\n Actions slot has a top border (default: `true`)\n /\n actionsHasTopBorder?: boolean;\n /\n If `true`, the modal window closes when clicking outside the modal area (default: `true`)\n /\n closeOnOutsideClick?: boolean;\n /\n Predefined size (standard small \| medium \| large). Takes precedence over (min\|max)(width\|height) properties. Not defined by default.\n */\n size?: Size \| undefined;\n }>(),\n {\n width: '448px',\n minHeight: 'auto',\n maxHeight: 'auto',\n height: 'auto',\n closable: true,\n noContentGutters: false,\n actionsHasTopBorder: true,\n size: undefined,\n },\n);\n\nconst modal = ref<HTMLElement>();\n\nconst style = computed(() => {\n const { width, height, minHeight, maxHeight, size } = props;\n\n if (size === 'small') {\n return {\n width: '448px',\n height: '440px',\n minHeight: 'auto',\n maxHeight: 'auto',\n };\n }\n\n if (size === 'medium') {\n return {\n width: '720px',\n height: '720px',\n minHeight: 'auto',\n maxHeight: 'auto',\n };\n }\n\n if (size === 'large') {\n return {\n width: '1080px',\n height: '880px',\n minHeight: 'auto',\n maxHeight: 'auto',\n };\n }\n\n return { width, height, minHeight, maxHeight };\n});\n\nfunction onClickShadow(ev: Event) {\n if (modal.value && props.closeOnOutsideClick && document.contains(ev.target as Node) && !modal.value.contains(ev.target as Node)) {\n emit('update:modelValue', false);\n }\n}\n\nuseEventListener(document.body, 'keyup', (ev) => {\n if (props.modelValue && ev.code === 'Escape') {\n emit('update:modelValue', false);\n }\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <Transition name=\"dialog\">\n <div v-if=\"modelValue\" class=\"pl-dialog-modal__shadow\" @click=\"onClickShadow\">\n <div\n v-bind=\"$attrs\"\n ref=\"modal\"\n class=\"pl-dialog-modal\"\n :class=\"{ 'has-title': slots.title, 'has-content': slots.default }\"\n :style=\"style\"\n >\n <PlCloseModalBtn v-if=\"closable\" class=\"close-modal-btn\" @click.stop=\"emit('update:modelValue', false)\" />\n <div v-if=\"slots.title\" class=\"pl-dialog-modal__title\">\n <slot name=\"title\" />\n </div>\n <div class=\"pl-dialog-modal__content\" :class=\"{ 'no-content-gutters': noContentGutters, 'no-top-content-gutter': noTopContentGutter }\">\n <slot />\n </div>\n <div v-if=\"slots.actions\" class=\"pl-dialog-modal__actions\" :class=\"{ 'has-top-border': actionsHasTopBorder }\">\n <slot name=\"actions\" />\n </div>\n </div>\n </div>\n </Transition>\n </Teleport>\n</template>\n"],"names":["__default__","slots","_useSlots","emit","__emit","props","__props","modal","ref","style","computed","width","height","minHeight","maxHeight","size","onClickShadow","ev","useEventListener"],"mappings":";;;;;;;~~GACeA~~,~~IAAA~~;AAAA,EACb,cAAc;AAChB;;;;;;;;;;;;;;;;;;AAUA,UAAMC,IAAQC,~~EAIV~~,~~GAEEC~~,IAAOC,GAEPC,IAAQC,GA2DRC,IAAQC,~~EAAiB~~,~~GAEzBC~~,IAAQC,EAAS,MAAM;AAC3B,YAAM,EAAE,OAAAC,GAAO,QAAAC,GAAQ,WAAAC,GAAW,WAAAC,GAAW,MAAAC,MAASV;AAEtD,aAAIU,MAAS,UACJ;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,~~MACb~~,~~IAGEA~~,MAAS,WACJ;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,~~MACb~~,~~IAGEA~~,MAAS,UACJ;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,~~MACb~~,~~IAGK~~,EAAE,OAAAJ,GAAO,QAAAC,GAAQ,WAAAC,GAAW,WAAAC,~~EAAU~~;AAAA,~~IAAA~~,~~CAC9C~~;AAED,aAASE,EAAcC,GAAW;AAChC,MAAIV,EAAM,SAASF,EAAM,uBAAuB,SAAS,SAASY,EAAG,MAAc,KAAK,CAACV,EAAM,MAAM,SAASU,EAAG,MAAc,KAC7Hd,EAAK,qBAAqB,EAAK;AAAA,~~IACjC~~;~~AAGF~~,WAAAe,EAAiB,SAAS,MAAM,SAAS,CAACD,MAAO;AAC/C,MAAIZ,EAAM,cAAcY,EAAG,SAAS,YAClCd,EAAK,qBAAqB,EAAK;AAAA,~~IACjC~~,~~CACD~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"PlDialogModal.vue.js","sources":["../../../src/components/PlDialogModal/PlDialogModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { useEventListener } from '../../composition/useEventListener';\nimport './pl-dialog-modal.scss';\nimport { computed, ref } from 'vue';\nimport PlCloseModalBtn from '../../utils/PlCloseModalBtn.vue';\nimport type { Size } from '../../types';\n\nconst slots = defineSlots<{\n title?: () => unknown;\n default?: () => unknown;\n actions?: () => unknown;\n}>();\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst props = withDefaults(\n defineProps<{\n /*\n Determines whether the modal is open\n /\n modelValue: boolean;\n /\n css width (default value is `448px`)\n /\n width?: string;\n /\n css height (default value is `auto`)\n /\n height?: string;\n /\n css min-height (default value is `auto`)\n /\n minHeight?: string;\n /\n css min-height (default value is `auto` but recommended is 440px)\n /\n maxHeight?: string;\n /\n Enables a button to close the modal (default: `true`)\n /\n closable?: boolean;\n /\n If `true` content gutters are removed\n /\n noContentGutters?: boolean;\n /\n If `true` top content gutter is removed\n /\n noTopContentGutter?: boolean;\n /\n Actions slot has a top border (default: `true`)\n /\n actionsHasTopBorder?: boolean;\n /\n If `true`, the modal window closes when clicking outside the modal area (default: `true`)\n /\n closeOnOutsideClick?: boolean;\n /\n Predefined size (standard small \| medium \| large). Takes precedence over (min\|max)(width\|height) properties. Not defined by default.\n */\n size?: Size \| undefined;\n }>(),\n {\n width: '448px',\n minHeight: 'auto',\n maxHeight: 'auto',\n height: 'auto',\n closable: true,\n noContentGutters: false,\n actionsHasTopBorder: true,\n size: undefined,\n },\n);\n\nconst modal = ref<HTMLElement>();\n\nconst style = computed(() => {\n const { width, height, minHeight, maxHeight, size } = props;\n\n if (size === 'small') {\n return {\n width: '448px',\n height: '440px',\n minHeight: 'auto',\n maxHeight: 'auto',\n };\n }\n\n if (size === 'medium') {\n return {\n width: '720px',\n height: '720px',\n minHeight: 'auto',\n maxHeight: 'auto',\n };\n }\n\n if (size === 'large') {\n return {\n width: '1080px',\n height: '880px',\n minHeight: 'auto',\n maxHeight: 'auto',\n };\n }\n\n return { width, height, minHeight, maxHeight };\n});\n\nfunction onClickShadow(ev: Event) {\n if (modal.value && props.closeOnOutsideClick && document.contains(ev.target as Node) && !modal.value.contains(ev.target as Node)) {\n emit('update:modelValue', false);\n }\n}\n\nuseEventListener(document.body, 'keyup', (ev) => {\n if (props.modelValue && ev.code === 'Escape') {\n emit('update:modelValue', false);\n }\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <Transition name=\"dialog\">\n <div v-if=\"modelValue\" class=\"pl-dialog-modal__shadow\" @click=\"onClickShadow\">\n <div\n v-bind=\"$attrs\"\n ref=\"modal\"\n class=\"pl-dialog-modal\"\n :class=\"{ 'has-title': slots.title, 'has-content': slots.default }\"\n :style=\"style\"\n >\n <PlCloseModalBtn v-if=\"closable\" class=\"close-modal-btn\" @click.stop=\"emit('update:modelValue', false)\" />\n <div v-if=\"slots.title\" class=\"pl-dialog-modal__title\">\n <slot name=\"title\" />\n </div>\n <div class=\"pl-dialog-modal__content\" :class=\"{ 'no-content-gutters': noContentGutters, 'no-top-content-gutter': noTopContentGutter }\">\n <slot />\n </div>\n <div v-if=\"slots.actions\" class=\"pl-dialog-modal__actions\" :class=\"{ 'has-top-border': actionsHasTopBorder }\">\n <slot name=\"actions\" />\n </div>\n </div>\n </div>\n </Transition>\n </Teleport>\n</template>\n"],"names":["__default__","slots","_useSlots","emit","__emit","props","__props","modal","ref","style","computed","width","height","minHeight","maxHeight","size","onClickShadow","ev","useEventListener"],"mappings":";;;;;;;GACAA,IAAe;AAAA,EACb,cAAc;AAChB;;;;;;;;;;;;;;;;;;AAUA,UAAMC,IAAQC,EAAA,GAMRC,IAAOC,GAEPC,IAAQC,GA2DRC,IAAQC,EAAA,GAERC,IAAQC,EAAS,MAAM;AAC3B,YAAM,EAAE,OAAAC,GAAO,QAAAC,GAAQ,WAAAC,GAAW,WAAAC,GAAW,MAAAC,MAASV;AAEtD,aAAIU,MAAS,UACJ;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,MAAA,IAIXA,MAAS,WACJ;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,MAAA,IAIXA,MAAS,UACJ;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,MAAA,IAIR,EAAE,OAAAJ,GAAO,QAAAC,GAAQ,WAAAC,GAAW,WAAAC,EAAA;AAAA,IACrC,CAAC;AAED,aAASE,EAAcC,GAAW;AAChC,MAAIV,EAAM,SAASF,EAAM,uBAAuB,SAAS,SAASY,EAAG,MAAc,KAAK,CAACV,EAAM,MAAM,SAASU,EAAG,MAAc,KAC7Hd,EAAK,qBAAqB,EAAK;AAAA,IAEnC;AAEA,WAAAe,EAAiB,SAAS,MAAM,SAAS,CAACD,MAAO;AAC/C,MAAIZ,EAAM,cAAcY,EAAG,SAAS,YAClCd,EAAK,qBAAqB,EAAK;AAAA,IAEnC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlDialogModal/index.d.ts CHANGED Viewed

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

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

@@ -74,4 +74,3 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
     }) | null;
 }, any>;
 export default _default;
-//# sourceMappingURL=OptionList.vue.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OptionList.vue.js","sources":["../../../src/components/PlDropdown/OptionList.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport DropdownListItem from '../DropdownListItem.vue';\nimport { DropdownOverlay } from '../../utils/DropdownOverlay';\nimport TextLabel from '../../utils/TextLabel.vue';\nimport { computed, useTemplateRef } from 'vue';\nimport type { LOption } from './types';\n\nconst props = defineProps<{\n rootRef: HTMLElement;\n groups: Map<string, LOption[]>;\n rest: LOption[];\n optionSize: 'small' \| 'medium';\n selectOption: (v: unknown) => void;\n}>();\n\nconst overlay = useTemplateRef('overlay');\n\nconst listRef = computed(() => overlay.value?.listRef);\n\nconst hasGroups = computed(() => props.groups.size > 0);\n\nconst optionsLength = computed(() => {\n let totalGroupItems = 0;\n for (const items of props.groups.values()) {\n totalGroupItems += items.length;\n }\n return totalGroupItems + props.rest.length;\n});\n\nconst scrollIntoActive = () => {\n overlay.value?.scrollIntoActive();\n};\n\ndefineExpose({\n scrollIntoActive,\n listRef,\n});\n</script>\n\n<template>\n <DropdownOverlay ref=\"overlay\" :root=\"rootRef\" class=\"pl-dropdown__options\" tabindex=\"-1\" :gap=\"3\">\n <div v-for=\"[group, items] in groups.entries()\" :key=\"group\" :class=\"{ 'group-container': hasGroups }\">\n <TextLabel>{{ group }}</TextLabel>\n <div>\n <DropdownListItem\n v-for=\"(item, index) in items\"\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>\n </div>\n <div v-if=\"rest.length\" :class=\"{ 'group-container': hasGroups }\">\n <TextLabel />\n <div>\n <DropdownListItem\n v-for=\"(item, index) in rest\"\n :key=\"index\" :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"optionSize\"\n @click.stop=\"selectOption(item.value)\"\n />\n </div>\n </div>\n <div v-if=\"!optionsLength\" class=\"nothing-found\">Nothing found</div>\n </DropdownOverlay>\n</template>\n"],"names":["props","__props","overlay","useTemplateRef","listRef","computed","_a","hasGroups","optionsLength","totalGroupItems","items","__expose"],"mappings":";;;;;;;;;;;;;;;;;AAOA,UAAMA,IAAQC,GAQRC,IAAUC,EAAe,SAAS,GAElCC,IAAUC,EAAS,~~MAAM~~;;~~AAAA~~,cAAAC,IAAAJ,EAAQ,UAAR,gBAAAI,EAAe;AAAA,KAAO,GAE/CC,IAAYF,EAAS,MAAML,EAAM,OAAO,OAAO,CAAC,GAEhDQ,IAAgBH,EAAS,MAAM;AACnC,UAAII,IAAkB;AACtB,iBAAWC,KAASV,EAAM,OAAO,OAAA;AAC/B,QAAAS,KAAmBC,EAAM;~~AAEpB~~,~~aAAAD~~,IAAkBT,EAAM,KAAK;AAAA,~~IAAA~~,~~CACrC~~;~~AAMY~~,WAAAW,~~EAAA~~;AAAA,MACX,kBALuB,MAAM;;AAC7B,SAAAL,IAAAJ,EAAQ,UAAR,QAAAI,EAAe;AAAA,MACjB;AAAA,MAIE,SAAAF;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"OptionList.vue.js","sources":["../../../src/components/PlDropdown/OptionList.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport DropdownListItem from '../DropdownListItem.vue';\nimport { DropdownOverlay } from '../../utils/DropdownOverlay';\nimport TextLabel from '../../utils/TextLabel.vue';\nimport { computed, useTemplateRef } from 'vue';\nimport type { LOption } from './types';\n\nconst props = defineProps<{\n rootRef: HTMLElement;\n groups: Map<string, LOption[]>;\n rest: LOption[];\n optionSize: 'small' \| 'medium';\n selectOption: (v: unknown) => void;\n}>();\n\nconst overlay = useTemplateRef('overlay');\n\nconst listRef = computed(() => overlay.value?.listRef);\n\nconst hasGroups = computed(() => props.groups.size > 0);\n\nconst optionsLength = computed(() => {\n let totalGroupItems = 0;\n for (const items of props.groups.values()) {\n totalGroupItems += items.length;\n }\n return totalGroupItems + props.rest.length;\n});\n\nconst scrollIntoActive = () => {\n overlay.value?.scrollIntoActive();\n};\n\ndefineExpose({\n scrollIntoActive,\n listRef,\n});\n</script>\n\n<template>\n <DropdownOverlay ref=\"overlay\" :root=\"rootRef\" class=\"pl-dropdown__options\" tabindex=\"-1\" :gap=\"3\">\n <div v-for=\"[group, items] in groups.entries()\" :key=\"group\" :class=\"{ 'group-container': hasGroups }\">\n <TextLabel>{{ group }}</TextLabel>\n <div>\n <DropdownListItem\n v-for=\"(item, index) in items\"\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>\n </div>\n <div v-if=\"rest.length\" :class=\"{ 'group-container': hasGroups }\">\n <TextLabel />\n <div>\n <DropdownListItem\n v-for=\"(item, index) in rest\"\n :key=\"index\" :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"optionSize\"\n @click.stop=\"selectOption(item.value)\"\n />\n </div>\n </div>\n <div v-if=\"!optionsLength\" class=\"nothing-found\">Nothing found</div>\n </DropdownOverlay>\n</template>\n"],"names":["props","__props","overlay","useTemplateRef","listRef","computed","_a","hasGroups","optionsLength","totalGroupItems","items","__expose"],"mappings":";;;;;;;;;;;;;;;;;AAOA,UAAMA,IAAQC,GAQRC,IAAUC,EAAe,SAAS,GAElCC,IAAUC,EAAS,MAAA;;AAAM,cAAAC,IAAAJ,EAAQ,UAAR,gBAAAI,EAAe;AAAA,KAAO,GAE/CC,IAAYF,EAAS,MAAML,EAAM,OAAO,OAAO,CAAC,GAEhDQ,IAAgBH,EAAS,MAAM;AACnC,UAAII,IAAkB;AACtB,iBAAWC,KAASV,EAAM,OAAO,OAAA;AAC/B,QAAAS,KAAmBC,EAAM;AAE3B,aAAOD,IAAkBT,EAAM,KAAK;AAAA,IACtC,CAAC;AAMD,WAAAW,EAAa;AAAA,MACX,kBALuB,MAAM;;AAC7B,SAAAL,IAAAJ,EAAQ,UAAR,QAAAI,EAAe;AAAA,MACjB;AAAA,MAIE,SAAAF;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -75,4 +75,3 @@ export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T]: T[K];
 } & {};
-//# sourceMappingURL=PlDropdown.vue.d.ts.map

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 './pl-dropdown.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, MaskIconName16, MaskIconName24 } from '../../types';\nimport { deepEqual } from '../../helpers/objects';\nimport LongText from '../LongText.vue';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport OptionList from './OptionList.vue';\nimport { useGroupBy } from './useGroupBy';\nimport type { LOption } from './types';\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?: 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 {\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 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, 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 <SvgRequired v-if=\"required\" />\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\" />\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 './pl-dropdown.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, MaskIconName16, MaskIconName24 } from '../../types';\nimport { deepEqual } from '../../helpers/objects';\nimport LongText from '../LongText.vue';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport OptionList from './OptionList.vue';\nimport { useGroupBy } from './useGroupBy';\nimport type { LOption } from './types';\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?: 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 {\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 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, 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 <SvgRequired v-if=\"required\" />\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\" />\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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"}

package/dist/components/PlDropdown/__tests__/PlDropdown.spec.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/components/PlDropdown/index.d.ts CHANGED Viewed

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

package/dist/components/PlDropdown/types.d.ts CHANGED Viewed

@@ -4,4 +4,3 @@ export type LOption<M = unknown> = ListOptionNormalized<M> & {
     isActive: boolean;
     index: number;
 };
-//# sourceMappingURL=types.d.ts.map

package/dist/components/PlDropdown/useGroupBy.d.ts CHANGED Viewed

@@ -4,4 +4,3 @@ export declare function useGroupBy<T, K extends keyof T>(list: Ref<T[]>, byKey:
     groupsRef: import('vue').ComputedRef<Map<NonNullable<T[K]>, T[]>>;
     restRef: import('vue').ComputedRef<T[]>;
 };
-//# sourceMappingURL=useGroupBy.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useGroupBy.js","sources":["../../../src/components/PlDropdown/useGroupBy.ts"],"sourcesContent":["import type { Ref } from 'vue';\nimport { computed } from 'vue';\n\nfunction groupBy<T, K extends keyof T>(\n list: T[],\n groupBy: K,\n): {\n grouped: Map<NonNullable<T[K]>, T[]>;\n rest: T[];\n ordered: T[];\n } {\n const grouped: Map<NonNullable<T[K]>, T[]> = new Map();\n\n if (!list) {\n return {\n grouped,\n rest: [],\n ordered: [],\n };\n }\n\n // Group items by the specified key\n for (const item of list) {\n const key = item[groupBy];\n if (key === undefined) continue;\n if (key === null) continue;\n if (!grouped.has(key)) grouped.set(key, []);\n grouped.get(key)?.push(item);\n }\n\n // Items without a group key\n const rest = list.filter((item: T) => {\n const key = item[groupBy];\n return key === undefined \|\| key === null;\n });\n\n const ordered = [...Array.from(grouped.values()).flat(), ...rest];\n\n return {\n grouped,\n rest,\n ordered,\n };\n}\n\nexport function useGroupBy<T, K extends keyof T>(\n list: Ref<T[]>,\n byKey: K,\n) {\n const result = computed(() => groupBy(list.value, byKey));\n\n const orderedRef = computed(() => result.value.ordered);\n\n const groupsRef = computed(() => result.value.grouped);\n\n const restRef = computed(() => result.value.rest);\n\n return {\n orderedRef,\n groupsRef,\n restRef,\n };\n}\n"],"names":["groupBy","list","grouped","item","key","_a","rest","ordered","useGroupBy","byKey","result","computed","orderedRef","groupsRef","restRef"],"mappings":";AAGA,SAASA,EACPC,GACAD,GAKE;;~~AACI~~,~~QAAAE~~,wBAA2C,~~IAAI~~;~~AAErD~~,MAAI,CAACD;~~AACI~~,~~WAAA~~;AAAA,MACL,SAAAC;AAAA,MACA,MAAM,~~CAAC~~;AAAA,~~MACP~~,SAAS,CAAA;AAAA,~~IACX~~;~~AAIF~~,aAAWC,KAAQF,GAAM;~~AACjB~~,~~UAAAG~~,IAAMD,EAAKH,CAAO;AACxB,IAAII,MAAQ,UACRA,MAAQ,SACPF,EAAQ,IAAIE,CAAG,~~KAAWF~~,~~EAAA~~,IAAIE,GAAK,EAAE,IAC1CC,IAAAH,EAAQ,IAAIE,CAAG,MAAf,QAAAC,EAAkB,KAAKF;AAAA,~~EAAI~~;~~AAI7B~~,QAAMG,IAAOL,EAAK,OAAO,CAACE,MAAY;~~AAC9B~~,~~UAAAC~~,IAAMD,EAAKH,CAAO;~~AACjB~~,~~WAAqBI~~,KAAQ;AAAA,~~EAAA~~,~~CACrC~~,GAEKG,IAAU,CAAC,GAAG,MAAM,KAAKL,EAAQ,~~OAAO~~,~~CAAC~~,EAAE,QAAQ,GAAGI,CAAI;~~AAEzD~~,~~SAAA~~;AAAA,IACL,SAAAJ;AAAA,IACA,MAAAI;AAAA,IACA,SAAAC;AAAA,~~EACF~~;~~AACF~~;~~AAEgB~~,~~SAAAC~~,EACdP,GACAQ,GACA;AACA,QAAMC,IAASC,EAAS,MAAMX,EAAQC,EAAK,OAAOQ,CAAK,CAAC,GAElDG,IAAaD,EAAS,MAAMD,EAAO,MAAM,OAAO,GAEhDG,IAAYF,EAAS,MAAMD,EAAO,MAAM,OAAO,GAE/CI,IAAUH,EAAS,MAAMD,EAAO,MAAM,IAAI;~~AAEzC~~,~~SAAA~~;AAAA,IACL,YAAAE;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,~~EACF~~;~~AACF~~;"}
1	+ {"version":3,"file":"useGroupBy.js","sources":["../../../src/components/PlDropdown/useGroupBy.ts"],"sourcesContent":["import type { Ref } from 'vue';\nimport { computed } from 'vue';\n\nfunction groupBy<T, K extends keyof T>(\n list: T[],\n groupBy: K,\n): {\n grouped: Map<NonNullable<T[K]>, T[]>;\n rest: T[];\n ordered: T[];\n } {\n const grouped: Map<NonNullable<T[K]>, T[]> = new Map();\n\n if (!list) {\n return {\n grouped,\n rest: [],\n ordered: [],\n };\n }\n\n // Group items by the specified key\n for (const item of list) {\n const key = item[groupBy];\n if (key === undefined) continue;\n if (key === null) continue;\n if (!grouped.has(key)) grouped.set(key, []);\n grouped.get(key)?.push(item);\n }\n\n // Items without a group key\n const rest = list.filter((item: T) => {\n const key = item[groupBy];\n return key === undefined \|\| key === null;\n });\n\n const ordered = [...Array.from(grouped.values()).flat(), ...rest];\n\n return {\n grouped,\n rest,\n ordered,\n };\n}\n\nexport function useGroupBy<T, K extends keyof T>(\n list: Ref<T[]>,\n byKey: K,\n) {\n const result = computed(() => groupBy(list.value, byKey));\n\n const orderedRef = computed(() => result.value.ordered);\n\n const groupsRef = computed(() => result.value.grouped);\n\n const restRef = computed(() => result.value.rest);\n\n return {\n orderedRef,\n groupsRef,\n restRef,\n };\n}\n"],"names":["groupBy","list","grouped","item","key","_a","rest","ordered","useGroupBy","byKey","result","computed","orderedRef","groupsRef","restRef"],"mappings":";AAGA,SAASA,EACPC,GACAD,GAKE;;AACF,QAAME,wBAA2C,IAAA;AAEjD,MAAI,CAACD;AACH,WAAO;AAAA,MACL,SAAAC;AAAA,MACA,MAAM,CAAA;AAAA,MACN,SAAS,CAAA;AAAA,IAAC;AAKd,aAAWC,KAAQF,GAAM;AACvB,UAAMG,IAAMD,EAAKH,CAAO;AACxB,IAAII,MAAQ,UACRA,MAAQ,SACPF,EAAQ,IAAIE,CAAG,KAAGF,EAAQ,IAAIE,GAAK,EAAE,IAC1CC,IAAAH,EAAQ,IAAIE,CAAG,MAAf,QAAAC,EAAkB,KAAKF;AAAA,EACzB;AAGA,QAAMG,IAAOL,EAAK,OAAO,CAACE,MAAY;AACpC,UAAMC,IAAMD,EAAKH,CAAO;AACxB,WAA4BI,KAAQ;AAAA,EACtC,CAAC,GAEKG,IAAU,CAAC,GAAG,MAAM,KAAKL,EAAQ,OAAA,CAAQ,EAAE,QAAQ,GAAGI,CAAI;AAEhE,SAAO;AAAA,IACL,SAAAJ;AAAA,IACA,MAAAI;AAAA,IACA,SAAAC;AAAA,EAAA;AAEJ;AAEO,SAASC,EACdP,GACAQ,GACA;AACA,QAAMC,IAASC,EAAS,MAAMX,EAAQC,EAAK,OAAOQ,CAAK,CAAC,GAElDG,IAAaD,EAAS,MAAMD,EAAO,MAAM,OAAO,GAEhDG,IAAYF,EAAS,MAAMD,EAAO,MAAM,OAAO,GAE/CI,IAAUH,EAAS,MAAMD,EAAO,MAAM,IAAI;AAEhD,SAAO;AAAA,IACL,YAAAE;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,EAAA;AAEJ;"}

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

@@ -75,4 +75,3 @@ export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T]: T[K];
 } & {};
-//# sourceMappingURL=PlDropdownLegacy.vue.d.ts.map

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 SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\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 <SvgRequired v-if=\"required\" />\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 SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\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 <SvgRequired v-if=\"required\" />\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIAA,KAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;;;AAqBA,UAAMC,IAAOC,GAOPC,IAAQC,GAuERC,IAAQC,GAAA,GAERC,IAAOC,EAAA,GACPC,IAAOD,EAAA,GACPE,IAAQF,EAAA,GAERG,IAAOC,GAAS;AAAA,MACpB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,MAAM;AAAA,IAAA,CACP,GAEKC,IAAkB,MACtBC;AAAA,MACEC,EAAY,MAAM,UAAU,CAACC,MAAMC,EAAUD,EAAE,OAAOb,EAAM,UAAU,CAAC;AAAA,MACvE,CAACe,MAAOA,IAAI,IAAI,IAAIA;AAAA,IAAA,GAGlBC,IAAe,MAAOR,EAAK,cAAcE,EAAA,GAEzCO,IAAmBC,EAAS,MACzBlB,EAAM,YAAY,MAC1B,GAEKmB,IAAaD,EAAS,MACtBD,EAAiB,QACZ,KAGFjB,EAAM,QACd,GAEKoB,IAAgBF,EAAS,OACrBlB,EAAM,WAAW,CAAA,GAAI,UAAU,CAACa,MAAMC,EAAUD,EAAE,OAAOb,EAAM,UAAU,CAAC,CACnF,GAEKqB,IAAgBH,EAAS,MAAM;AACnC,UAAI,CAAAD,EAAiB,OAIrB;AAAA,YAAIjB,EAAM;AACR,iBAAOsB,GAAgBtB,EAAM,KAAK;AAGpC,YAAIA,EAAM,eAAe,UAAaoB,EAAc,UAAU;AAC5D,iBAAO;AAAA;AAAA,IAIX,CAAC,GAEKG,IAAaL;AAAA,MAAS,MAC1BM,GAAqBxB,EAAM,WAAW,CAAA,CAAE,EAAE,IAAI,CAACyB,GAAKC,OAAW;AAAA,QAC7D,GAAGD;AAAA,QACH,OAAAC;AAAA,QACA,YAAYA,MAAUN,EAAc;AAAA,QACpC,UAAUM,MAAUlB,EAAK;AAAA,MAAA,EACzB;AAAA,IAAA,GAGEmB,IAAYT,EAAS,MAAM;AAG/B,YAAMU,IAFUC,EAAMN,CAAU,EAEa,KAAK,CAACV,MAAMC,EAAUD,EAAE,OAAOb,EAAM,UAAU,CAAC;AAE7F,cAAO4B,KAAA,gBAAAA,EAAM,UAAS5B,EAAM;AAAA,IAC9B,CAAC,GAEK8B,IAAsBZ,EAAS,MAC/B,CAACV,EAAK,QAAQR,EAAM,aACf,KAGFA,EAAM,aAAa,OAAO2B,EAAU,KAAK,IAAI3B,EAAM,WAC3D,GAEK+B,IAAWb,EAAS,MACjBlB,EAAM,eAAe,UAAaA,EAAM,eAAe,IAC/D,GAEKY,IAAcM,EAAS,MAAM;AACjC,YAAMc,IAAUT,EAAW;AAE3B,aAAIf,EAAK,SACAwB,EAAQ,OAAO,CAAC,MAA4B;AACjD,cAAMC,IAASzB,EAAK,OAAO,YAAA;AAM3B,eAJI,EAAE,MAAM,YAAA,EAAc,SAASyB,CAAM,KAIrC,EAAE,eAAe,EAAE,YAAY,cAAc,SAASA,CAAM,IACvD,KAGL,OAAO,EAAE,SAAU,WACd,EAAE,MAAM,YAAA,EAAc,SAASA,CAAM,IAGvC,EAAE,UAAUzB,EAAK;AAAA,MAC1B,CAAC,IAGIwB;AAAA,IACT,CAAC,GAEKE,IAAWhB,EAAS,MAAOC,EAAW,QAAQ,SAAY,GAAI,GAE9DgB,IAAe,CAACpB,MAAqB;;AACzC,MAAAjB,EAAK,qBAAqBiB,CAAC,GAC3BP,EAAK,SAAS,IACdA,EAAK,OAAO,KACZ4B,IAAAhC,KAAA,gBAAAA,EAAM,UAAN,QAAAgC,EAAa;AAAA,IACf,GAEMC,IAAQ,MAAMvC,EAAK,qBAAqB,MAAS,GAEjDwC,IAAkB,MAAA;;AAAM,cAAAF,IAAA7B,EAAM,UAAN,gBAAA6B,EAAa;AAAA,OAErCG,IAAa,MAAO/B,EAAK,OAAO,CAACA,EAAK,MAEtCgC,IAAe,MAAOhC,EAAK,OAAO,IAElCiC,IAAa,CAACC,MAAsB;;AACxC,OAAKN,IAAAhC,KAAA,gBAAAA,EAAM,UAAN,QAAAgC,EAAa,SAASM,EAAM,mBAC/BlC,EAAK,SAAS,IACdA,EAAK,OAAO;AAAA,IAEhB,GAEMmC,IAAmB,MAAM;AAC7B,YAAMC,IAAQtC,EAAK;AAEnB,MAAKsC,KAILC,GAAMD,EAAM,cAAc,eAAe,GAAkB,CAACnB,MAAQ;AAClE,QAAAqB,GAAeF,GAAOnB,CAAG;AAAA,MAC3B,CAAC;AAAA,IACH,GAEMsB,IAAgB,CAAC,MAAgD;;AACrE,UAAK,CAAC,aAAa,WAAW,SAAS,QAAQ,EAAE,SAAS,EAAE,IAAI;AAG9D,UAAE,eAAA;AAAA;AAFF;AAKF,YAAM,EAAE,MAAAC,GAAM,aAAAC,EAAA,IAAgBzC;AAE9B,UAAI,CAACwC,GAAM;AACT,QAAI,EAAE,SAAS,YACbxC,EAAK,OAAO;AAEd;AAAA,MACF;AAEA,MAAI,EAAE,SAAS,aACbA,EAAK,OAAO,KACZ4B,IAAAhC,EAAK,UAAL,QAAAgC,EAAY;AAGd,YAAMc,IAAWrB,EAAMjB,CAAW,GAE5B,EAAE,QAAAuC,MAAWD;AAEnB,UAAI,CAACC;AACH;AAGF,MAAI,EAAE,SAAS,WACbhB,GAAaiB,IAAAF,EAAS,KAAK,CAACG,MAAOA,EAAG,UAAUJ,CAAW,MAA9C,gBAAAG,EAAiD,KAAK;AAGrE,YAAME,IAAaJ,EAAS,UAAU,CAACG,MAAOA,EAAG,UAAUJ,CAAW,KAAK,IAErEM,KAAQ,EAAE,SAAS,cAAc,IAAI,EAAE,SAAS,YAAY,KAAK,GAEjEC,KAAW,KAAK,IAAIF,IAAaC,KAAQJ,CAAM,IAAIA;AAEzD,MAAA3C,EAAK,cAAcI,EAAY,MAAM4C,EAAQ,EAAE,SAAS;AAAA,IAC1D;AAEA,WAAAC,GAAcrD,CAAI,GAElBsD,EAAM,MAAM1D,EAAM,YAAYgB,GAAc,EAAE,WAAW,IAAM,GAE/D0C;AAAA,MACE,MAAMlD,EAAK;AAAA,MACX,CAACwC,MAAA;;AAAU,eAAAA,KAAOZ,IAAA7B,EAAM,UAAN,gBAAA6B,EAAa,UAAU;AAAA;AAAA,IAAA,GAG3CuB,GAAgB,MAAM;AAEpB,MAAAnD,EAAK,QAEDA,EAAK,eAAe,KAAKA,EAAK,QAChCmC,EAAA;AAAA,IAEJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlDropdownLegacy/__tests__/PlDropdownLegacy.spec.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/components/PlDropdownLegacy/index.d.ts CHANGED Viewed

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

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

@@ -14,14 +14,14 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         item?(_: {
-            item: import('../..').ListOptionNormalized<unknown>;
+            item: import('@milaboratories/pl-model-common').ListOptionBase<unknown>;
             textItem: string;
             isSelected: boolean;
             isHovered: boolean;
             onClick: ($event: any) => void;
         }): any;
         item?(_: {
-            item: import('../..').ListOptionNormalized<unknown>;
+            item: import('@milaboratories/pl-model-common').ListOptionBase<unknown>;
             isSelected: boolean;
             isHovered: boolean;
             onClick: ($event: any) => void;
@@ -55,4 +55,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=PlDropdownLine.vue.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlDropdownLine.vue.js","sources":["../../../src/components/PlDropdownLine/PlDropdownLine.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport './pl-dropdown-line.scss';\nimport type { StyleValue } from 'vue';\nimport { computed, nextTick, reactive, ref, toRef, watch } from 'vue';\nimport { deepEqual } from '../../helpers/objects';\nimport { useClickOutside } from '../../composition/useClickOutside';\nimport { useFilteredList } from '../../composition/useFilteredList';\nimport ResizableInput from './ResizableInput.vue';\nimport { tapIf, tap } from '../../helpers/functions';\nimport { scrollIntoView } from '../../helpers/dom';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport TabItem from '../TabItem.vue';\nimport type { ListOption } from '../../types';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { useElementPosition } from '../../composition/usePosition';\n\nconst emit = defineEmits(['update:modelValue']); // at the top always\n\nconst props = withDefaults(\n defineProps<{\n modelValue: unknown;\n disabled?: boolean;\n prefix?: string;\n options: ListOption[]; // @todo extend with size field\n placeholder?: string;\n mode?: 'list' \| 'tabs';\n tabsContainerStyles?: StyleValue;\n clearable?: boolean;\n }>(),\n {\n mode: 'list',\n placeholder: 'Select..',\n prefix: '',\n tabsContainerStyles: undefined,\n clearable: false,\n },\n);\n\nconst data = reactive({\n isOpen: false,\n activeOption: -1,\n optionsHeight: 0,\n});\n\nconst container = ref<HTMLElement>();\n\nconst list = ref<HTMLElement>();\n\nconst classes = computed(() => {\n const classesResult = [];\n if (data.isOpen) {\n classesResult.push('open');\n }\n if (props.disabled) {\n classesResult.push('disabled');\n }\n return classesResult.join(' ');\n});\n\nconst searchPhrase = ref<string>('');\n\nconst options = useFilteredList(toRef(props, 'options'), searchPhrase);\n\nconst canShowClearBtn = computed<boolean>(() => !!(props.clearable && data.isOpen && props.modelValue && modelText.value));\n\nconst modelText = computed<string>(() => {\n if (props.modelValue !== undefined) {\n const index = getIndexForModelInItems();\n if (index !== -1) {\n const item = normalizeListOptions(props.options)[index];\n return item.label;\n }\n }\n return '';\n});\n\nconst inputModel = ref(modelText.value);\n\nwatch(modelText, (v) => {\n inputModel.value = v;\n});\n\nconst placeholderVal = computed(() => {\n if (data.isOpen) {\n if (searchPhrase.value && searchPhrase.value.length >= modelText.value.length - 1) {\n return searchPhrase.value;\n }\n }\n\n return modelText.value \|\| '...';\n});\n\nuseClickOutside(container, () => {\n if (props.mode === 'list') {\n data.isOpen = false;\n }\n});\n\nwatch(\n () => inputModel.value,\n (val) => {\n if (modelText.value !== val) {\n searchPhrase.value = val;\n } else {\n searchPhrase.value = '';\n }\n },\n);\n\nwatch(\n () => data.isOpen,\n (value: boolean) => {\n if (value && container.value) {\n container.value.querySelector('input')?.focus();\n nextTick(() => scrollIntoActive());\n }\n },\n);\n\nwatch(\n () => props.modelValue,\n () => updateSelected(),\n { immediate: true },\n);\n\nfunction getIndexForModelInItems(): number \| -1 {\n return props.options.findIndex((o: ListOption) => {\n return deepEqual(o.value, props.modelValue);\n });\n}\n\nfunction updateSelected() {\n data.activeOption = tap(\n options.value.findIndex((o: ListOption) => {\n return deepEqual(o.value, props.modelValue);\n }),\n (v) => (v < 0 ? 0 : v),\n );\n}\n\nfunction resetSearchPhrase() {\n searchPhrase.value = '';\n}\n\nfunction toggleList(): void {\n if (props.disabled) {\n data.isOpen = false;\n } else {\n nextTick(() => {\n data.isOpen = !data.isOpen;\n });\n }\n}\n\nfunction closePopupIfNeeded() {\n if (props.mode === 'list') {\n data.isOpen = false;\n }\n}\n\nfunction selectItem(item?: ListOption): void {\n if (item) {\n emit('update:modelValue', item.value);\n closePopupIfNeeded();\n resetSearchPhrase();\n }\n}\n\nfunction isItemSelected(item: ListOption): boolean {\n return deepEqual(item.value, props.modelValue);\n}\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node \| null;\n\n if (!container.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {\n searchPhrase.value = '';\n data.isOpen = false;\n }\n};\n\nfunction handleKeydown(e: { code: string; preventDefault(): void }) {\n const { activeOption } = data;\n\n if (!data.isOpen && e.code === 'Enter') {\n data.isOpen = true;\n return;\n }\n\n const { length } = options.value;\n\n if (!length) {\n return;\n }\n\n if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.code)) {\n e.preventDefault();\n }\n\n if (e.code === 'Enter') {\n selectItem(options.value[activeOption]);\n }\n\n const d = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n data.activeOption = Math.abs(activeOption + d + length) % length;\n\n requestAnimationFrame(scrollIntoActive);\n}\n\nfunction scrollIntoActive() {\n const $list = list.value;\n if (!$list) {\n return;\n }\n tapIf($list.querySelector('.hovered-item'), (el: Element) => {\n if (props.mode === 'list') {\n scrollIntoView($list, el as HTMLElement);\n } else {\n el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\n }\n });\n}\n\nfunction clearModel() {\n emit('update:modelValue', undefined);\n}\n\nconst optionsStyle = reactive({\n top: '0px',\n left: '0px',\n});\n\nwatch(list, (el) => {\n if (el) {\n const rect = el.getBoundingClientRect();\n data.optionsHeight = rect.height;\n window.dispatchEvent(new CustomEvent('adjust'));\n }\n});\n\nuseElementPosition(container, (pos) => {\n const gap = 2;\n\n const downTopOffset = pos.top + pos.height + gap;\n\n if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n optionsStyle.top = pos.top - data.optionsHeight - gap + 'px';\n } else {\n optionsStyle.top = downTopOffset + 'px';\n }\n\n optionsStyle.left = pos.left + 'px';\n});\n</script>\n\n<template>\n <div\n ref=\"container\"\n tabindex=\"0\"\n :class=\"classes\"\n class=\"pl-line-dropdown uc-pointer\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n @click=\"toggleList\"\n >\n <div class=\"pl-line-dropdown__prefix\">{{ props?.prefix }}</div>\n\n <ResizableInput v-model=\"inputModel\" :placeholder=\"placeholderVal\" :disabled=\"props.disabled\" class=\"pl-line-dropdown__input\" />\n\n <div class=\"pl-line-dropdown__icon-wrapper\">\n <div v-show=\"!canShowClearBtn\" class=\"pl-line-dropdown__icon\" />\n <div v-show=\"canShowClearBtn\" class=\"pl-line-dropdown__icon-clear\" @click=\"clearModel\" />\n </div>\n <Teleport v-if=\"data.isOpen\" to=\"body\">\n <div\n v-if=\"props.mode === 'list'\"\n ref=\"list\"\n :style=\"optionsStyle\"\n tabindex=\"-1\"\n class=\"pl-line-dropdown__items\"\n @focusout=\"onFocusOut\"\n @click.stop\n >\n <template v-for=\"(item, index) in options\" :key=\"index\">\n <slot\n name=\"item\"\n :item=\"item\"\n :text-item=\"'text'\"\n :is-selected=\"isItemSelected(item)\"\n :is-hovered=\"data.activeOption == index\"\n @click.stop=\"selectItem(item)\"\n >\n <DropdownListItem\n :option=\"item\"\n :text-item=\"'text'\"\n :is-selected=\"isItemSelected(item)\"\n :is-hovered=\"data.activeOption == index\"\n size=\"medium\"\n @click.stop=\"selectItem(item)\"\n />\n </slot>\n </template>\n\n <div v-if=\"options.length === 0\" class=\"pl-line-dropdown__no-item\">\n <div class=\"pl-line-dropdown__no-item-title text-s\">Didn't find anything that matched</div>\n </div>\n </div>\n <div\n v-else-if=\"props.mode === 'tabs'\"\n ref=\"list\"\n :style=\"optionsStyle\"\n tabindex=\"-1\"\n class=\"pl-line-dropdown__items-tabs\"\n @focusout=\"onFocusOut\"\n @click.stop\n >\n <template v-for=\"(item, index) in options\" :key=\"index\">\n <slot name=\"item\" :item=\"item\" :is-selected=\"isItemSelected(item)\" :is-hovered=\"data.activeOption == index\" @click.stop=\"selectItem(item)\">\n <TabItem :option=\"item\" :is-selected=\"isItemSelected(item)\" :is-hovered=\"data.activeOption == index\" @click.stop=\"selectItem(item)\" />\n </slot>\n </template>\n <div v-if=\"options.length === 0\" class=\"pl-line-dropdown__no-item\">\n <div class=\"pl-line-dropdown__no-item-title text-s\">Didn't find anything that matched</div>\n </div>\n </div>\n </Teleport>\n </div>\n</template>\n"],"names":["emit","__emit","props","__props","data","reactive","container","ref","list","classes","computed","classesResult","searchPhrase","options","useFilteredList","toRef","canShowClearBtn","modelText","index","getIndexForModelInItems","normalizeListOptions","inputModel","watch","v","placeholderVal","useClickOutside","val","value","_a","nextTick","scrollIntoActive","updateSelected","o","deepEqual","tap","resetSearchPhrase","toggleList","closePopupIfNeeded","selectItem","item","isItemSelected","onFocusOut","event","relatedTarget","_b","handleKeydown","activeOption","length","d","$list","tapIf","el","scrollIntoView","clearModel","optionsStyle","rect","useElementPosition","pos","downTopOffset"],"mappings":"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"}
1	+ {"version":3,"file":"PlDropdownLine.vue.js","sources":["../../../src/components/PlDropdownLine/PlDropdownLine.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport './pl-dropdown-line.scss';\nimport type { StyleValue } from 'vue';\nimport { computed, nextTick, reactive, ref, toRef, watch } from 'vue';\nimport { deepEqual } from '../../helpers/objects';\nimport { useClickOutside } from '../../composition/useClickOutside';\nimport { useFilteredList } from '../../composition/useFilteredList';\nimport ResizableInput from './ResizableInput.vue';\nimport { tapIf, tap } from '../../helpers/functions';\nimport { scrollIntoView } from '../../helpers/dom';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport TabItem from '../TabItem.vue';\nimport type { ListOption } from '../../types';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { useElementPosition } from '../../composition/usePosition';\n\nconst emit = defineEmits(['update:modelValue']); // at the top always\n\nconst props = withDefaults(\n defineProps<{\n modelValue: unknown;\n disabled?: boolean;\n prefix?: string;\n options: ListOption[]; // @todo extend with size field\n placeholder?: string;\n mode?: 'list' \| 'tabs';\n tabsContainerStyles?: StyleValue;\n clearable?: boolean;\n }>(),\n {\n mode: 'list',\n placeholder: 'Select..',\n prefix: '',\n tabsContainerStyles: undefined,\n clearable: false,\n },\n);\n\nconst data = reactive({\n isOpen: false,\n activeOption: -1,\n optionsHeight: 0,\n});\n\nconst container = ref<HTMLElement>();\n\nconst list = ref<HTMLElement>();\n\nconst classes = computed(() => {\n const classesResult = [];\n if (data.isOpen) {\n classesResult.push('open');\n }\n if (props.disabled) {\n classesResult.push('disabled');\n }\n return classesResult.join(' ');\n});\n\nconst searchPhrase = ref<string>('');\n\nconst options = useFilteredList(toRef(props, 'options'), searchPhrase);\n\nconst canShowClearBtn = computed<boolean>(() => !!(props.clearable && data.isOpen && props.modelValue && modelText.value));\n\nconst modelText = computed<string>(() => {\n if (props.modelValue !== undefined) {\n const index = getIndexForModelInItems();\n if (index !== -1) {\n const item = normalizeListOptions(props.options)[index];\n return item.label;\n }\n }\n return '';\n});\n\nconst inputModel = ref(modelText.value);\n\nwatch(modelText, (v) => {\n inputModel.value = v;\n});\n\nconst placeholderVal = computed(() => {\n if (data.isOpen) {\n if (searchPhrase.value && searchPhrase.value.length >= modelText.value.length - 1) {\n return searchPhrase.value;\n }\n }\n\n return modelText.value \|\| '...';\n});\n\nuseClickOutside(container, () => {\n if (props.mode === 'list') {\n data.isOpen = false;\n }\n});\n\nwatch(\n () => inputModel.value,\n (val) => {\n if (modelText.value !== val) {\n searchPhrase.value = val;\n } else {\n searchPhrase.value = '';\n }\n },\n);\n\nwatch(\n () => data.isOpen,\n (value: boolean) => {\n if (value && container.value) {\n container.value.querySelector('input')?.focus();\n nextTick(() => scrollIntoActive());\n }\n },\n);\n\nwatch(\n () => props.modelValue,\n () => updateSelected(),\n { immediate: true },\n);\n\nfunction getIndexForModelInItems(): number \| -1 {\n return props.options.findIndex((o: ListOption) => {\n return deepEqual(o.value, props.modelValue);\n });\n}\n\nfunction updateSelected() {\n data.activeOption = tap(\n options.value.findIndex((o: ListOption) => {\n return deepEqual(o.value, props.modelValue);\n }),\n (v) => (v < 0 ? 0 : v),\n );\n}\n\nfunction resetSearchPhrase() {\n searchPhrase.value = '';\n}\n\nfunction toggleList(): void {\n if (props.disabled) {\n data.isOpen = false;\n } else {\n nextTick(() => {\n data.isOpen = !data.isOpen;\n });\n }\n}\n\nfunction closePopupIfNeeded() {\n if (props.mode === 'list') {\n data.isOpen = false;\n }\n}\n\nfunction selectItem(item?: ListOption): void {\n if (item) {\n emit('update:modelValue', item.value);\n closePopupIfNeeded();\n resetSearchPhrase();\n }\n}\n\nfunction isItemSelected(item: ListOption): boolean {\n return deepEqual(item.value, props.modelValue);\n}\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node \| null;\n\n if (!container.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {\n searchPhrase.value = '';\n data.isOpen = false;\n }\n};\n\nfunction handleKeydown(e: { code: string; preventDefault(): void }) {\n const { activeOption } = data;\n\n if (!data.isOpen && e.code === 'Enter') {\n data.isOpen = true;\n return;\n }\n\n const { length } = options.value;\n\n if (!length) {\n return;\n }\n\n if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.code)) {\n e.preventDefault();\n }\n\n if (e.code === 'Enter') {\n selectItem(options.value[activeOption]);\n }\n\n const d = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n data.activeOption = Math.abs(activeOption + d + length) % length;\n\n requestAnimationFrame(scrollIntoActive);\n}\n\nfunction scrollIntoActive() {\n const $list = list.value;\n if (!$list) {\n return;\n }\n tapIf($list.querySelector('.hovered-item'), (el: Element) => {\n if (props.mode === 'list') {\n scrollIntoView($list, el as HTMLElement);\n } else {\n el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\n }\n });\n}\n\nfunction clearModel() {\n emit('update:modelValue', undefined);\n}\n\nconst optionsStyle = reactive({\n top: '0px',\n left: '0px',\n});\n\nwatch(list, (el) => {\n if (el) {\n const rect = el.getBoundingClientRect();\n data.optionsHeight = rect.height;\n window.dispatchEvent(new CustomEvent('adjust'));\n }\n});\n\nuseElementPosition(container, (pos) => {\n const gap = 2;\n\n const downTopOffset = pos.top + pos.height + gap;\n\n if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n optionsStyle.top = pos.top - data.optionsHeight - gap + 'px';\n } else {\n optionsStyle.top = downTopOffset + 'px';\n }\n\n optionsStyle.left = pos.left + 'px';\n});\n</script>\n\n<template>\n <div\n ref=\"container\"\n tabindex=\"0\"\n :class=\"classes\"\n class=\"pl-line-dropdown uc-pointer\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n @click=\"toggleList\"\n >\n <div class=\"pl-line-dropdown__prefix\">{{ props?.prefix }}</div>\n\n <ResizableInput v-model=\"inputModel\" :placeholder=\"placeholderVal\" :disabled=\"props.disabled\" class=\"pl-line-dropdown__input\" />\n\n <div class=\"pl-line-dropdown__icon-wrapper\">\n <div v-show=\"!canShowClearBtn\" class=\"pl-line-dropdown__icon\" />\n <div v-show=\"canShowClearBtn\" class=\"pl-line-dropdown__icon-clear\" @click=\"clearModel\" />\n </div>\n <Teleport v-if=\"data.isOpen\" to=\"body\">\n <div\n v-if=\"props.mode === 'list'\"\n ref=\"list\"\n :style=\"optionsStyle\"\n tabindex=\"-1\"\n class=\"pl-line-dropdown__items\"\n @focusout=\"onFocusOut\"\n @click.stop\n >\n <template v-for=\"(item, index) in options\" :key=\"index\">\n <slot\n name=\"item\"\n :item=\"item\"\n :text-item=\"'text'\"\n :is-selected=\"isItemSelected(item)\"\n :is-hovered=\"data.activeOption == index\"\n @click.stop=\"selectItem(item)\"\n >\n <DropdownListItem\n :option=\"item\"\n :text-item=\"'text'\"\n :is-selected=\"isItemSelected(item)\"\n :is-hovered=\"data.activeOption == index\"\n size=\"medium\"\n @click.stop=\"selectItem(item)\"\n />\n </slot>\n </template>\n\n <div v-if=\"options.length === 0\" class=\"pl-line-dropdown__no-item\">\n <div class=\"pl-line-dropdown__no-item-title text-s\">Didn't find anything that matched</div>\n </div>\n </div>\n <div\n v-else-if=\"props.mode === 'tabs'\"\n ref=\"list\"\n :style=\"optionsStyle\"\n tabindex=\"-1\"\n class=\"pl-line-dropdown__items-tabs\"\n @focusout=\"onFocusOut\"\n @click.stop\n >\n <template v-for=\"(item, index) in options\" :key=\"index\">\n <slot name=\"item\" :item=\"item\" :is-selected=\"isItemSelected(item)\" :is-hovered=\"data.activeOption == index\" @click.stop=\"selectItem(item)\">\n <TabItem :option=\"item\" :is-selected=\"isItemSelected(item)\" :is-hovered=\"data.activeOption == index\" @click.stop=\"selectItem(item)\" />\n </slot>\n </template>\n <div v-if=\"options.length === 0\" class=\"pl-line-dropdown__no-item\">\n <div class=\"pl-line-dropdown__no-item-title text-s\">Didn't find anything that matched</div>\n </div>\n </div>\n </Teleport>\n </div>\n</template>\n"],"names":["emit","__emit","props","__props","data","reactive","container","ref","list","classes","computed","classesResult","searchPhrase","options","useFilteredList","toRef","canShowClearBtn","modelText","index","getIndexForModelInItems","normalizeListOptions","inputModel","watch","v","placeholderVal","useClickOutside","val","value","_a","nextTick","scrollIntoActive","updateSelected","o","deepEqual","tap","resetSearchPhrase","toggleList","closePopupIfNeeded","selectItem","item","isItemSelected","onFocusOut","event","relatedTarget","_b","handleKeydown","activeOption","length","d","$list","tapIf","el","scrollIntoView","clearModel","optionsStyle","rect","useElementPosition","pos","downTopOffset"],"mappings":"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"}

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

@@ -11,4 +11,3 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;
-//# sourceMappingURL=ResizableInput.vue.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ResizableInput.vue.js","sources":["../../../src/components/PlDropdownLine/ResizableInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport './resizable-input.scss';\nimport { computed } from 'vue';\n\nconst props = defineProps<{\n modelValue?: string;\n placeholder?: string;\n disabled?: boolean;\n maxWidth?: string;\n width?: string;\n}>();\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst text = computed(() => {\n if (props.placeholder) {\n return props.placeholder;\n }\n return (props.modelValue)?.replace('\"', '');\n});\n\nconst styles = computed(() => {\n const stl: Record<string, string> = {};\n if (props.width) {\n stl['width'] = props.width;\n }\n if (props.maxWidth) {\n stl['maxWidth'] = props.maxWidth;\n }\n return stl;\n});\n\nfunction handleInput(event: Event) {\n emit('update:modelValue', (event.target as HTMLInputElement).value);\n}\n</script>\n\n<template>\n <div class=\"resizable-input\">\n <span :style=\"styles\" class=\"resizable-input__size-span\">{{ text }}</span>\n <input v-bind=\"$attrs\" :placeholder=\"placeholder\" :value=\"props.modelValue\" :disabled=\"props.disabled\" :style=\"styles\" @input=\"handleInput\" />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","text","computed","_a","styles","stl","handleInput","event"],"mappings":";;;;;;;;;;;;;AAIA,UAAMA,IAAQC,GAQRC,IAAOC,GAEPC,IAAOC,EAAS,MAAM;;AAC1B,aAAIL,EAAM,cACDA,EAAM,eAEPM,IAAAN,EAAM,eAAN,gBAAAM,EAAmB,QAAQ,KAAK;AAAA,~~IAAE~~,~~CAC3C~~,GAEKC,IAASF,EAAS,MAAM;AAC5B,YAAMG,IAA8B,~~CAAC~~;~~AACrC~~,aAAIR,EAAM,~~UACJQ~~,~~EAAA~~,QAAWR,EAAM,QAEnBA,EAAM,~~aACJQ~~,~~EAAA~~,WAAcR,EAAM,WAEnBQ;AAAA,~~IAAA~~,~~CACR~~;AAED,aAASC,EAAYC,GAAc;~~AAC5B~~,MAAAR,~~EAAA~~,qBAAsBQ,EAAM,OAA4B,KAAK;AAAA,~~IAAA~~;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"ResizableInput.vue.js","sources":["../../../src/components/PlDropdownLine/ResizableInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport './resizable-input.scss';\nimport { computed } from 'vue';\n\nconst props = defineProps<{\n modelValue?: string;\n placeholder?: string;\n disabled?: boolean;\n maxWidth?: string;\n width?: string;\n}>();\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst text = computed(() => {\n if (props.placeholder) {\n return props.placeholder;\n }\n return (props.modelValue)?.replace('\"', '');\n});\n\nconst styles = computed(() => {\n const stl: Record<string, string> = {};\n if (props.width) {\n stl['width'] = props.width;\n }\n if (props.maxWidth) {\n stl['maxWidth'] = props.maxWidth;\n }\n return stl;\n});\n\nfunction handleInput(event: Event) {\n emit('update:modelValue', (event.target as HTMLInputElement).value);\n}\n</script>\n\n<template>\n <div class=\"resizable-input\">\n <span :style=\"styles\" class=\"resizable-input__size-span\">{{ text }}</span>\n <input v-bind=\"$attrs\" :placeholder=\"placeholder\" :value=\"props.modelValue\" :disabled=\"props.disabled\" :style=\"styles\" @input=\"handleInput\" />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","text","computed","_a","styles","stl","handleInput","event"],"mappings":";;;;;;;;;;;;;AAIA,UAAMA,IAAQC,GAQRC,IAAOC,GAEPC,IAAOC,EAAS,MAAM;;AAC1B,aAAIL,EAAM,cACDA,EAAM,eAEPM,IAAAN,EAAM,eAAN,gBAAAM,EAAmB,QAAQ,KAAK;AAAA,IAC1C,CAAC,GAEKC,IAASF,EAAS,MAAM;AAC5B,YAAMG,IAA8B,CAAA;AACpC,aAAIR,EAAM,UACRQ,EAAI,QAAWR,EAAM,QAEnBA,EAAM,aACRQ,EAAI,WAAcR,EAAM,WAEnBQ;AAAA,IACT,CAAC;AAED,aAASC,EAAYC,GAAc;AACjC,MAAAR,EAAK,qBAAsBQ,EAAM,OAA4B,KAAK;AAAA,IACpE;;;;;;;;;;;;;;;;"}

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

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

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

@@ -55,4 +55,3 @@ export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T]: T[K];
 } & {};
-//# sourceMappingURL=PlDropdownMulti.vue.d.ts.map