@milaboratories/uikit 2.11.5 → 2.11.7

package/dist/components/PlDialogModal/PlDialogModal.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDialogModal.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"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 (\n    modal.value &&\n    props.closeOnOutsideClick &&\n    document.contains(ev.target as Node) &&\n    !modal.value.contains(ev.target as Node)\n  ) {\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\n            v-if=\"closable\"\n            class=\"close-modal-btn\"\n            @click.stop=\"emit('update:modelValue', false)\"\n          />\n          <div v-if=\"slots.title\" class=\"pl-dialog-modal__title\">\n            <slot name=\"title\" />\n          </div>\n          <div\n            class=\"pl-dialog-modal__content\"\n            :class=\"{\n              'no-content-gutters': noContentGutters,\n              'no-top-content-gutter': noTopContentGutter,\n            }\"\n          >\n            <slot />\n          </div>\n          <div\n            v-if=\"slots.actions\"\n            class=\"pl-dialog-modal__actions\"\n            :class=\"{ 'has-top-border': actionsHasTopBorder }\"\n          >\n            <slot name=\"actions\" />\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;CAEE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;EAWhB,IAAM,IAAQ,GAIV,EAEE,IAAO,GAEP,IAAQ,GA2DR,IAAQ,GAAkB,EAE1B,IAAQ,QAAe;GAC3B,IAAM,EAAE,UAAO,WAAQ,cAAW,cAAW,YAAS;AA6BtD,UA3BI,MAAS,UACJ;IACL,OAAO;IACP,QAAQ;IACR,WAAW;IACX,WAAW;IACZ,GAGC,MAAS,WACJ;IACL,OAAO;IACP,QAAQ;IACR,WAAW;IACX,WAAW;IACZ,GAGC,MAAS,UACJ;IACL,OAAO;IACP,QAAQ;IACR,WAAW;IACX,WAAW;IACZ,GAGI;IAAE;IAAO;IAAQ;IAAW;IAAW;IAC9C;EAEF,SAAS,EAAc,GAAW;AAChC,GACE,EAAM,SACN,EAAM,uBACN,SAAS,SAAS,EAAG,OAAe,IACpC,CAAC,EAAM,MAAM,SAAS,EAAG,OAAc,IAEvC,EAAK,qBAAqB,GAAM;;SAIpC,EAAiB,SAAS,MAAM,UAAU,MAAO;AAC/C,GAAI,EAAM,cAAc,EAAG,SAAS,YAClC,EAAK,qBAAqB,GAAM;IAElC,kBAIA,EAqCW,GAAA,EArCD,IAAG,QAAM,EAAA,CACjB,EAmCa,GAAA,EAnCD,MAAK,UAAQ,EAAA;oBAkCjB,CAjCK,EAAA,cAAA,GAAA,EAAX,EAiCM,OAAA;;IAjCiB,OAAM;IAA2B,SAAO;OAC7D,EA+BM,OA/BN,EACUA,EA8BJ,QA9BU;aACV;IAAJ,KAAI;IACJ,OAAK,CAAC,mBAAiB;KAAA,aACA,EAAM;KAAK,eAAiB,EAAM;KAAO,CAAA;IAC/D,OAAO,EAAA;;IAGA,EAAA,YAAA,GAAA,EADR,EAIE,GAAA;;KAFA,OAAM;KACL,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,EAAI,qBAAA,GAAA,EAAA,CAAA,OAAA,CAAA;;IAER,EAAM,SAAA,GAAA,EAAjB,EAEM,OAFN,GAEM,CADJ,EAAqB,EAAA,QAAA,QAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;IAEvB,EAQM,OAAA,EAPJ,OAAK,EAAA,CAAC,4BAA0B;2BACc,EAAA;8BAAyD,EAAA;YAKvG,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA;IAGF,EAAM,WAAA,GAAA,EADd,EAMM,OAAA;;KAJJ,OAAK,EAAA,CAAC,4BAA0B,EAAA,kBACJ,EAAA,qBAAmB,CAAA,CAAA;QAE/C,EAAuB,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}
+{"version":3,"file":"PlDialogModal.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"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 (\n    modal.value &&\n    props.closeOnOutsideClick &&\n    document.contains(ev.target as Node) &&\n    !modal.value.contains(ev.target as Node)\n  ) {\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\n            v-if=\"closable\"\n            class=\"close-modal-btn\"\n            @click.stop=\"emit('update:modelValue', false)\"\n          />\n          <div v-if=\"slots.title\" class=\"pl-dialog-modal__title\">\n            <slot name=\"title\" />\n          </div>\n          <div\n            class=\"pl-dialog-modal__content\"\n            :class=\"{\n              'no-content-gutters': noContentGutters,\n              'no-top-content-gutter': noTopContentGutter,\n            }\"\n          >\n            <slot />\n          </div>\n          <div\n            v-if=\"slots.actions\"\n            class=\"pl-dialog-modal__actions\"\n            :class=\"{ 'has-top-border': actionsHasTopBorder }\"\n          >\n            <slot name=\"actions\" />\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;CAEE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;EAWhB,IAAM,IAAQ,GAIV,EAEE,IAAO,GAEP,IAAQ,GA2DR,IAAQ,GAAkB,EAE1B,IAAQ,QAAe;GAC3B,IAAM,EAAE,UAAO,WAAQ,cAAW,cAAW,YAAS;AA6BtD,UA3BI,MAAS,UACJ;IACL,OAAO;IACP,QAAQ;IACR,WAAW;IACX,WAAW;IACZ,GAGC,MAAS,WACJ;IACL,OAAO;IACP,QAAQ;IACR,WAAW;IACX,WAAW;IACZ,GAGC,MAAS,UACJ;IACL,OAAO;IACP,QAAQ;IACR,WAAW;IACX,WAAW;IACZ,GAGI;IAAE;IAAO;IAAQ;IAAW;IAAW;IAC9C;EAEF,SAAS,EAAc,GAAW;AAChC,GACE,EAAM,SACN,EAAM,uBACN,SAAS,SAAS,EAAG,OAAe,IACpC,CAAC,EAAM,MAAM,SAAS,EAAG,OAAc,IAEvC,EAAK,qBAAqB,GAAM;;SAIpC,EAAiB,SAAS,MAAM,UAAU,MAAO;AAC/C,GAAI,EAAM,cAAc,EAAG,SAAS,YAClC,EAAK,qBAAqB,GAAM;IAElC,kBAIA,EAqCW,GAAA,EArCD,IAAG,QAAM,EAAA,CACjB,EAmCa,GAAA,EAnCD,MAAK,UAAQ,EAAA;oBAkCjB,CAjCK,EAAA,cAAA,GAAA,EAAX,EAiCM,OAAA;;IAjCiB,OAAM;IAA2B,SAAO;OAC7D,EA+BM,OA/BN,EACUA,EA8BJ,QA9BU;aACV;IAAJ,KAAI;IACJ,OAAK,CAAC,mBAAiB;KAAA,aACA,EAAM;KAAK,eAAiB,EAAM;KAAO,CAAA;IAC/D,OAAO,EAAA;;IAGA,EAAA,YAAA,GAAA,EADR,EAIE,GAAA;;KAFA,OAAM;KACL,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,EAAI,qBAAA,GAAA,EAAA,CAAA,OAAA,CAAA;;IAER,EAAM,SAAA,GAAA,EAAjB,EAEM,OAFN,GAEM,CADJ,EAAqB,EAAA,QAAA,QAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;IAEvB,EAQM,OAAA,EAPJ,OAAK,EAAA,CAAC,4BAA0B;2BACc,EAAA;8BAAyD,EAAA;YAKvG,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA;IAGF,EAAM,WAAA,GAAA,EADd,EAMM,OAAA;;KAJJ,OAAK,EAAA,CAAC,4BAA0B,EAAA,kBACJ,EAAA,qBAAmB,CAAA,CAAA;QAE/C,EAAuB,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/components/PlDropdown/OptionList.js

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

package/dist/components/PlDropdown/OptionList.vue2.js

@@ -3,6 +3,7 @@ import t from "../../utils/DropdownOverlay/DropdownOverlay.js";
 import "../../utils/DropdownOverlay/index.js";
 import n from "../../utils/TextLabel.js";
 import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, openBlock as p, renderList as m, toDisplayString as h, unref as g, useTemplateRef as _, withCtx as v, withModifiers as y } from "vue";
+//#region src/components/PlDropdown/OptionList.vue?vue&type=script&setup=true&lang.ts
 var b = {
 	key: 1,
 	class: "nothing-found"
@@ -78,6 +79,7 @@ var b = {
 		}, 8, ["root"]));
 	}
 });
+//#endregion
 export { x as default };
 
 //# sourceMappingURL=OptionList.vue2.js.map

package/dist/components/PlDropdown/OptionList.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionList.vue_vue_type_script_setup_true_lang.js","names":[],"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\n    ref=\"overlay\"\n    :root=\"rootRef\"\n    class=\"pl-dropdown__options\"\n    tabindex=\"-1\"\n    :gap=\"3\"\n  >\n    <div\n      v-for=\"[group, items] in groups.entries()\"\n      :key=\"group\"\n      :class=\"{ 'group-container': hasGroups }\"\n    >\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\"\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=\"!optionsLength\" class=\"nothing-found\">Nothing found</div>\n  </DropdownOverlay>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAOA,IAAM,IAAQ,GAQR,IAAU,EAAe,UAAU,EAEnC,IAAU,QAAe,EAAQ,OAAO,QAAQ,EAEhD,IAAY,QAAe,EAAM,OAAO,OAAO,EAAE,EAEjD,IAAgB,QAAe;GACnC,IAAI,IAAkB;AACtB,QAAK,IAAM,KAAS,EAAM,OAAO,QAAQ,CACvC,MAAmB,EAAM;AAE3B,UAAO,IAAkB,EAAM,KAAK;IACpC;SAMF,EAAa;GACX,wBAL6B;AAC7B,MAAQ,OAAO,kBAAkB;;GAKjC;GACD,CAAC,kBAIA,EAwCkB,EAAA,EAAA,EAAA;YAvCZ;GAAJ,KAAI;GACH,MAAM,EAAA;GACP,OAAM;GACN,UAAS;GACR,KAAK;;oBAGsC;YAD5C,EAiBM,GAAA,MAAA,EAhBqB,EAAA,OAAO,SAAO,GAAA,CAA/B,GAAO,aADjB,EAiBM,OAAA;KAfH,KAAK;KACL,OAAK,EAAA,EAAA,mBAAuB,EAAA,OAAS,CAAA;QAEtC,EAAkC,GAAA,MAAA;sBAAZ,CAAA,EAAA,EAAR,EAAK,EAAA,EAAA,CAAA,CAAA;;cACnB,EAUM,OAAA,MAAA,EAAA,EAAA,GAAA,EATJ,EAQE,GAAA,MAAA,EAPwB,IAAhB,GAAM,YADhB,EAQE,GAAA;KANC,KAAK;KACL,QAAQ;KACR,eAAa,EAAK;KAClB,cAAY,EAAK;KACjB,MAAM,EAAA;KACN,SAAK,GAAA,MAAO,EAAA,aAAa,EAAK,MAAK,EAAA,CAAA,OAAA,CAAA;;;;;;;;IAI/B,EAAA,KAAK,UAAA,GAAA,EAAhB,EAaM,OAAA;;KAbmB,OAAK,EAAA,EAAA,mBAAuB,EAAA,OAAS,CAAA;QAC5D,EAAa,EAAA,EACb,EAUM,OAAA,MAAA,EAAA,EAAA,GAAA,EATJ,EAQE,GAAA,MAAA,EAPwB,EAAA,OAAhB,GAAM,YADhB,EAQE,GAAA;KANC,KAAK;KACL,QAAQ;KACR,eAAa,EAAK;KAClB,cAAY,EAAK;KACjB,MAAM,EAAA;KACN,SAAK,GAAA,MAAO,EAAA,aAAa,EAAK,MAAK,EAAA,CAAA,OAAA,CAAA;;;;;;;;IAI9B,EAAA,QAAkD,EAAA,IAAA,GAAA,IAAlD,GAAA,EAAZ,EAAoE,OAApE,GAAiD,gBAAa"}
+{"version":3,"file":"OptionList.vue_vue_type_script_setup_true_lang.js","names":[],"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\n    ref=\"overlay\"\n    :root=\"rootRef\"\n    class=\"pl-dropdown__options\"\n    tabindex=\"-1\"\n    :gap=\"3\"\n  >\n    <div\n      v-for=\"[group, items] in groups.entries()\"\n      :key=\"group\"\n      :class=\"{ 'group-container': hasGroups }\"\n    >\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\"\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=\"!optionsLength\" class=\"nothing-found\">Nothing found</div>\n  </DropdownOverlay>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAOA,IAAM,IAAQ,GAQR,IAAU,EAAe,UAAU,EAEnC,IAAU,QAAe,EAAQ,OAAO,QAAQ,EAEhD,IAAY,QAAe,EAAM,OAAO,OAAO,EAAE,EAEjD,IAAgB,QAAe;GACnC,IAAI,IAAkB;AACtB,QAAK,IAAM,KAAS,EAAM,OAAO,QAAQ,CACvC,MAAmB,EAAM;AAE3B,UAAO,IAAkB,EAAM,KAAK;IACpC;SAMF,EAAa;GACX,wBAL6B;AAC7B,MAAQ,OAAO,kBAAkB;;GAKjC;GACD,CAAC,kBAIA,EAwCkB,EAAA,EAAA,EAAA;YAvCZ;GAAJ,KAAI;GACH,MAAM,EAAA;GACP,OAAM;GACN,UAAS;GACR,KAAK;;oBAGsC;YAD5C,EAiBM,GAAA,MAAA,EAhBqB,EAAA,OAAO,SAAO,GAAA,CAA/B,GAAO,aADjB,EAiBM,OAAA;KAfH,KAAK;KACL,OAAK,EAAA,EAAA,mBAAuB,EAAA,OAAS,CAAA;QAEtC,EAAkC,GAAA,MAAA;sBAAZ,CAAA,EAAA,EAAR,EAAK,EAAA,EAAA,CAAA,CAAA;;cACnB,EAUM,OAAA,MAAA,EAAA,EAAA,GAAA,EATJ,EAQE,GAAA,MAAA,EAPwB,IAAhB,GAAM,YADhB,EAQE,GAAA;KANC,KAAK;KACL,QAAQ;KACR,eAAa,EAAK;KAClB,cAAY,EAAK;KACjB,MAAM,EAAA;KACN,SAAK,GAAA,MAAO,EAAA,aAAa,EAAK,MAAK,EAAA,CAAA,OAAA,CAAA;;;;;;;;IAI/B,EAAA,KAAK,UAAA,GAAA,EAAhB,EAaM,OAAA;;KAbmB,OAAK,EAAA,EAAA,mBAAuB,EAAA,OAAS,CAAA;QAC5D,EAAa,EAAA,EACb,EAUM,OAAA,MAAA,EAAA,EAAA,GAAA,EATJ,EAQE,GAAA,MAAA,EAPwB,EAAA,OAAhB,GAAM,YADhB,EAQE,GAAA;KANC,KAAK;KACL,QAAQ;KACR,eAAa,EAAK;KAClB,cAAY,EAAK;KACjB,MAAM,EAAA;KACN,SAAK,GAAA,MAAO,EAAA,aAAa,EAAK,MAAK,EAAA,CAAA,OAAA,CAAA;;;;;;;;IAI9B,EAAA,QAAkD,EAAA,IAAA,GAAA,IAAlD,GAAA,EAAZ,EAAoE,OAApE,GAAiD,gBAAa"}

package/dist/components/PlDropdown/PlDropdown.js

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

package/dist/components/PlDropdown/PlDropdown.vue2.js

@@ -18,6 +18,7 @@ import u from "./OptionList.js";
 import './pl-dropdown.css';/* empty css            */
 import { useGroupBy as d } from "./useGroupBy.js";
 import { computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, normalizeClass as ne, openBlock as b, reactive as x, ref as S, renderSlot as C, toDisplayString as w, unref as T, useTemplateRef as E, vModelText as D, watch as O, watchPostEffect as re, withCtx as k, withDirectives as ie, withModifiers as A } from "vue";
+//#region src/components/PlDropdown/PlDropdown.vue?vue&type=script&setup=true&lang.ts
 var ae = ["tabindex"], oe = { class: "pl-dropdown__container" }, se = { class: "pl-dropdown__field" }, ce = ["disabled", "placeholder"], le = {
 	key: 0,
 	class: "input-value"
@@ -211,6 +212,7 @@ var ae = ["tabindex"], oe = { class: "pl-dropdown__container" }, se = { class: "
 		])], 42, ae), J.value ? (b(), h("div", M, w(J.value), 1)) : G.value && y.loadingOptionsHelper ? (b(), h("div", N, w(y.loadingOptionsHelper), 1)) : y.helper ? (b(), h("div", P, w(y.helper), 1)) : m("", !0)]));
 	}
 });
+//#endregion
 export { F as default };
 
 //# sourceMappingURL=PlDropdown.vue2.js.map

package/dist/components/PlDropdown/PlDropdown.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdown.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/PlDropdown/PlDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlDropdown\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { tap } from \"../../helpers/functions\";\nimport { deepEqual } from \"../../helpers/objects\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from \"../../types\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport LongText from \"../LongText.vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport OptionList from \"./OptionList.vue\";\nimport \"./pl-dropdown.scss\";\nimport type { LOption } from \"./types\";\nimport { useGroupBy } from \"./useGroupBy\";\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected value of the dropdown.\n     */\n    modelValue: M;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Shows red border even without an error message\n     */\n    errorStatus?: boolean;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Custom icon (16px) class for the dropdown arrow (optional)\n     */\n    arrowIcon?: MaskIconName16;\n    /**\n     * Custom icon (24px) class for the dropdown arrow (optional)\n     */\n    arrowIconLarge?: MaskIconName24;\n    /**\n     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\n    /**\n     * Makes some of corners not rounded\n     * */\n    groupPosition?:\n      | \"top\"\n      | \"bottom\"\n      | \"left\"\n      | \"right\"\n      | \"top-left\"\n      | \"top-right\"\n      | \"bottom-left\"\n      | \"bottom-right\"\n      | \"middle\";\n  }>(),\n  {\n    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    showErrorMessage: true,\n    placeholder: \"...\",\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    arrowIconLarge: undefined,\n    optionSize: \"small\",\n    options: undefined,\n    groupPosition: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst optionListRef = useTemplateRef<InstanceType<typeof OptionList>>(\"optionListRef\");\n\nconst data = reactive({\n  search: \"\",\n  activeIndex: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nconst findActiveIndex = () =>\n  tap(\n    orderedRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n    (v) => (v < 0 ? 0 : v),\n  );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst isLoadingOptions = computed(() => {\n  return props.options === undefined;\n});\n\n/**\n * Loading spinner should not be shown when the dropdown is explicitly disabled,\n * even if options are undefined. The disabled state takes precedence.\n */\nconst showLoadingSpinner = computed(() => {\n  return !props.disabled && isLoadingOptions.value;\n});\n\nconst isDisabled = computed(() => {\n  if (isLoadingOptions.value) {\n    return true;\n  }\n\n  return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n  return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\n});\n\nconst 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 (\n    !rootRef.value?.contains(relatedTarget) &&\n    !optionListRef.value?.listRef?.contains(relatedTarget)\n  ) {\n    data.search = \"\";\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  const { open, activeIndex } = data;\n\n  if (!open) {\n    if (e.code === \"Enter\") {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === \"Escape\") {\n    data.open = false;\n    rootRef.value?.focus();\n  }\n\n  const ordered = orderedRef.value;\n\n  const { length } = ordered;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(ordered.find((it) => it.index === activeIndex)?.value);\n  }\n\n  const localIndex = ordered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = ordered[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => props.modelValue, updateActive, { immediate: true });\n\nwatch(\n  () => data.open,\n  (open) => (open ? input.value?.focus() : \"\"),\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  data.search; // to watch\n\n  if (data.activeIndex >= 0 && data.open) {\n    optionListRef.value?.scrollIntoActive();\n  }\n});\n</script>\n\n<template>\n  <div class=\"pl-dropdown__envelope\" @click=\"setFocusOnInput\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-dropdown\"\n      :class=\"{ open: data.open, error: error || errorStatus, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-dropdown__container\">\n        <div class=\"pl-dropdown__field\">\n          <input\n            ref=\"input\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"computedPlaceholder\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" class=\"input-value\">\n            <LongText> {{ textValue }} </LongText>\n          </div>\n\n          <div class=\"pl-dropdown__controls\">\n            <PlIcon24 v-if=\"showLoadingSpinner\" name=\"loading\" />\n            <PlIcon16\n              v-if=\"clearable && hasValue\"\n              class=\"clear\"\n              name=\"delete-clear\"\n              @click.stop=\"clear\"\n            />\n            <slot name=\"append\" />\n            <div class=\"pl-dropdown__arrow-wrapper\" @click.stop=\"toggleOpen\">\n              <PlIcon24 v-if=\"arrowIconLarge\" :name=\"arrowIconLarge\" class=\"arrow-icon\" />\n              <PlIcon16 v-else-if=\"arrowIcon\" :name=\"arrowIcon\" class=\"arrow-icon\" />\n              <PlIcon16 v-else name=\"chevron-down\" class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n          <span>{{ label }}</span>\n          <PlTooltip v-if=\"$slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <OptionList\n          v-if=\"data.open\"\n          ref=\"optionListRef\"\n          :root-ref=\"rootRef!\"\n          :groups=\"groupsRef\"\n          :rest=\"restRef\"\n          :option-size=\"optionSize\"\n          :select-option=\"selectOptionWrapper\"\n        />\n        <DoubleContour class=\"pl-dropdown__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"pl-dropdown__error\">{{ computedError }}</div>\n    <div v-else-if=\"showLoadingSpinner && loadingOptionsHelper\" class=\"pl-dropdown__helper\">\n      {{ loadingOptionsHelper }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-dropdown__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"PlDropdown.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/PlDropdown/PlDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlDropdown\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { tap } from \"../../helpers/functions\";\nimport { deepEqual } from \"../../helpers/objects\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from \"../../types\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport LongText from \"../LongText.vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport OptionList from \"./OptionList.vue\";\nimport \"./pl-dropdown.scss\";\nimport type { LOption } from \"./types\";\nimport { useGroupBy } from \"./useGroupBy\";\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected value of the dropdown.\n     */\n    modelValue: M;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Shows red border even without an error message\n     */\n    errorStatus?: boolean;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Custom icon (16px) class for the dropdown arrow (optional)\n     */\n    arrowIcon?: MaskIconName16;\n    /**\n     * Custom icon (24px) class for the dropdown arrow (optional)\n     */\n    arrowIconLarge?: MaskIconName24;\n    /**\n     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\n    /**\n     * Makes some of corners not rounded\n     * */\n    groupPosition?:\n      | \"top\"\n      | \"bottom\"\n      | \"left\"\n      | \"right\"\n      | \"top-left\"\n      | \"top-right\"\n      | \"bottom-left\"\n      | \"bottom-right\"\n      | \"middle\";\n  }>(),\n  {\n    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    showErrorMessage: true,\n    placeholder: \"...\",\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    arrowIconLarge: undefined,\n    optionSize: \"small\",\n    options: undefined,\n    groupPosition: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst optionListRef = useTemplateRef<InstanceType<typeof OptionList>>(\"optionListRef\");\n\nconst data = reactive({\n  search: \"\",\n  activeIndex: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nconst findActiveIndex = () =>\n  tap(\n    orderedRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n    (v) => (v < 0 ? 0 : v),\n  );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst isLoadingOptions = computed(() => {\n  return props.options === undefined;\n});\n\n/**\n * Loading spinner should not be shown when the dropdown is explicitly disabled,\n * even if options are undefined. The disabled state takes precedence.\n */\nconst showLoadingSpinner = computed(() => {\n  return !props.disabled && isLoadingOptions.value;\n});\n\nconst isDisabled = computed(() => {\n  if (isLoadingOptions.value) {\n    return true;\n  }\n\n  return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n  return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\n});\n\nconst 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 (\n    !rootRef.value?.contains(relatedTarget) &&\n    !optionListRef.value?.listRef?.contains(relatedTarget)\n  ) {\n    data.search = \"\";\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  const { open, activeIndex } = data;\n\n  if (!open) {\n    if (e.code === \"Enter\") {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === \"Escape\") {\n    data.open = false;\n    rootRef.value?.focus();\n  }\n\n  const ordered = orderedRef.value;\n\n  const { length } = ordered;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(ordered.find((it) => it.index === activeIndex)?.value);\n  }\n\n  const localIndex = ordered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = ordered[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => props.modelValue, updateActive, { immediate: true });\n\nwatch(\n  () => data.open,\n  (open) => (open ? input.value?.focus() : \"\"),\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  data.search; // to watch\n\n  if (data.activeIndex >= 0 && data.open) {\n    optionListRef.value?.scrollIntoActive();\n  }\n});\n</script>\n\n<template>\n  <div class=\"pl-dropdown__envelope\" @click=\"setFocusOnInput\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-dropdown\"\n      :class=\"{ open: data.open, error: error || errorStatus, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-dropdown__container\">\n        <div class=\"pl-dropdown__field\">\n          <input\n            ref=\"input\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"computedPlaceholder\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" class=\"input-value\">\n            <LongText> {{ textValue }} </LongText>\n          </div>\n\n          <div class=\"pl-dropdown__controls\">\n            <PlIcon24 v-if=\"showLoadingSpinner\" name=\"loading\" />\n            <PlIcon16\n              v-if=\"clearable && hasValue\"\n              class=\"clear\"\n              name=\"delete-clear\"\n              @click.stop=\"clear\"\n            />\n            <slot name=\"append\" />\n            <div class=\"pl-dropdown__arrow-wrapper\" @click.stop=\"toggleOpen\">\n              <PlIcon24 v-if=\"arrowIconLarge\" :name=\"arrowIconLarge\" class=\"arrow-icon\" />\n              <PlIcon16 v-else-if=\"arrowIcon\" :name=\"arrowIcon\" class=\"arrow-icon\" />\n              <PlIcon16 v-else name=\"chevron-down\" class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n          <span>{{ label }}</span>\n          <PlTooltip v-if=\"$slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <OptionList\n          v-if=\"data.open\"\n          ref=\"optionListRef\"\n          :root-ref=\"rootRef!\"\n          :groups=\"groupsRef\"\n          :rest=\"restRef\"\n          :option-size=\"optionSize\"\n          :select-option=\"selectOptionWrapper\"\n        />\n        <DoubleContour class=\"pl-dropdown__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"pl-dropdown__error\">{{ computedError }}</div>\n    <div v-else-if=\"showLoadingSpinner && loadingOptionsHelper\" class=\"pl-dropdown__helper\">\n      {{ loadingOptionsHelper }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-dropdown__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/PlDropdown/useGroupBy.js

@@ -1,4 +1,5 @@
 import { computed as e } from "vue";
+//#region src/components/PlDropdown/useGroupBy.ts
 function t(e, t) {
 	let n = /* @__PURE__ */ new Map();
 	if (!e) return {
@@ -25,6 +26,7 @@ function n(n, r) {
 		restRef: e(() => i.value.rest)
 	};
 }
+//#endregion
 export { n as useGroupBy };
 
 //# sourceMappingURL=useGroupBy.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useGroupBy.js","names":[],"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>(list: Ref<T[]>, byKey: K) {\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"],"mappings":";AAGA,SAAS,EACP,GACA,GAKA;CACA,IAAM,oBAAuC,IAAI,KAAK;AAEtD,KAAI,CAAC,EACH,QAAO;EACL;EACA,MAAM,EAAE;EACR,SAAS,EAAE;EACZ;AAIH,MAAK,IAAM,KAAQ,GAAM;EACvB,IAAM,IAAM,EAAK;AACb,OACQ,SACP,EAAQ,IAAI,EAAI,IAAE,EAAQ,IAAI,GAAK,EAAE,CAAC,EAC3C,EAAQ,IAAI,EAAI,EAAE,KAAK,EAAK;;CAI9B,IAAM,IAAO,EAAK,QAAQ,MACZ,EAAK,MACmB,KACpC;AAIF,QAAO;EACL;EACA;EACA,SALc,CAAC,GAAG,MAAM,KAAK,EAAQ,QAAQ,CAAC,CAAC,MAAM,EAAE,GAAG,EAAK;EAMhE;;AAGH,SAAgB,EAAiC,GAAgB,GAAU;CACzE,IAAM,IAAS,QAAe,EAAQ,EAAK,OAAO,EAAM,CAAC;AAQzD,QAAO;EACL,YAPiB,QAAe,EAAO,MAAM,QAAQ;EAQrD,WANgB,QAAe,EAAO,MAAM,QAAQ;EAOpD,SALc,QAAe,EAAO,MAAM,KAAK;EAMhD"}
+{"version":3,"file":"useGroupBy.js","names":[],"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>(list: Ref<T[]>, byKey: K) {\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"],"mappings":";;AAGA,SAAS,EACP,GACA,GAKA;CACA,IAAM,oBAAuC,IAAI,KAAK;AAEtD,KAAI,CAAC,EACH,QAAO;EACL;EACA,MAAM,EAAE;EACR,SAAS,EAAE;EACZ;AAIH,MAAK,IAAM,KAAQ,GAAM;EACvB,IAAM,IAAM,EAAK;AACb,OACQ,SACP,EAAQ,IAAI,EAAI,IAAE,EAAQ,IAAI,GAAK,EAAE,CAAC,EAC3C,EAAQ,IAAI,EAAI,EAAE,KAAK,EAAK;;CAI9B,IAAM,IAAO,EAAK,QAAQ,MACZ,EAAK,MACmB,KACpC;AAIF,QAAO;EACL;EACA;EACA,SALc,CAAC,GAAG,MAAM,KAAK,EAAQ,QAAQ,CAAC,CAAC,MAAM,EAAE,GAAG,EAAK;EAMhE;;AAGH,SAAgB,EAAiC,GAAgB,GAAU;CACzE,IAAM,IAAS,QAAe,EAAQ,EAAK,OAAO,EAAM,CAAC;AAQzD,QAAO;EACL,YAPiB,QAAe,EAAO,MAAM,QAAQ;EAQrD,WANgB,QAAe,EAAO,MAAM,QAAQ;EAOpD,SALc,QAAe,EAAO,MAAM,KAAK;EAMhD"}

package/dist/components/PlDropdownLegacy/PlDropdownLegacy.js

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

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

@@ -18,6 +18,7 @@ import "../PlMaskIcon24/index.js";
 import re from "../../assets/images/required.js";
 /* empty css                   */
 import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as ie, createVNode as _, defineComponent as v, normalizeClass as y, openBlock as b, reactive as ae, ref as x, renderList as oe, renderSlot as S, toDisplayString as C, unref as w, useSlots as se, vModelText as ce, watch as T, watchPostEffect as E, withCtx as D, withDirectives as le, withModifiers as O } from "vue";
+//#region src/components/PlDropdownLegacy/PlDropdownLegacy.vue?vue&type=script&setup=true&lang.ts
 var ue = { class: "ui-dropdown__envelope" }, de = ["tabindex"], fe = { class: "ui-dropdown__container" }, pe = { class: "ui-dropdown__field" }, k = ["disabled", "placeholder"], A = { class: "ui-dropdown__controls" }, j = { key: 0 }, M = {
 	key: 0,
 	class: "nothing-found"
@@ -206,6 +207,7 @@ var ue = { class: "ui-dropdown__envelope" }, de = ["tabindex"], fe = { class: "u
 		])], 42, de), q.value ? (b(), h("div", N, C(q.value), 1)) : W.value && v.loadingOptionsHelper ? (b(), h("div", P, C(v.loadingOptionsHelper), 1)) : v.helper ? (b(), h("div", F, C(v.helper), 1)) : m("", !0)]));
 	}
 });
+//#endregion
 export { I as default };
 
 //# sourceMappingURL=PlDropdownLegacy.vue2.js.map

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

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

package/dist/components/PlDropdownLine/PlDropdownLine.js

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

package/dist/components/PlDropdownLine/PlDropdownLine.vue2.js

@@ -10,6 +10,7 @@ import { useFilteredList as te } from "../../composition/useFilteredList.js";
 import s from "./ResizableInput.js";
 import c from "../TabItem.js";
 import { Fragment as l, Teleport as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, nextTick as v, normalizeClass as y, normalizeStyle as b, openBlock as x, reactive as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, toRef as D, unref as O, vShow as k, watch as A, withDirectives as j, withModifiers as M } from "vue";
+//#region src/components/PlDropdownLine/PlDropdownLine.vue?vue&type=script&setup=true&lang.ts
 var N = { class: "pl-line-dropdown__prefix" }, ne = { class: "pl-line-dropdown__icon-wrapper" }, re = { class: "pl-line-dropdown__icon" }, ie = {
 	key: 0,
 	class: "pl-line-dropdown__no-item"
@@ -217,6 +218,7 @@ var N = { class: "pl-line-dropdown__prefix" }, ne = { class: "pl-line-dropdown__
 		], 34));
 	}
 });
+//#endregion
 export { F as default };
 
 //# sourceMappingURL=PlDropdownLine.vue2.js.map

package/dist/components/PlDropdownLine/PlDropdownLine.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownLine.vue_vue_type_script_setup_true_lang.js","names":[],"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>(\n  () => !!(props.clearable && data.isOpen && props.modelValue && modelText.value),\n);\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\n      v-model=\"inputModel\"\n      :placeholder=\"placeholderVal\"\n      :disabled=\"props.disabled\"\n      class=\"pl-line-dropdown__input\"\n    />\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\">\n            Didn't find anything that matched\n          </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\n            name=\"item\"\n            :item=\"item\"\n            :is-selected=\"isItemSelected(item)\"\n            :is-hovered=\"data.activeOption == index\"\n            @click.stop=\"selectItem(item)\"\n          >\n            <TabItem\n              :option=\"item\"\n              :is-selected=\"isItemSelected(item)\"\n              :is-hovered=\"data.activeOption == index\"\n              @click.stop=\"selectItem(item)\"\n            />\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\">\n            Didn't find anything that matched\n          </div>\n        </div>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"PlDropdownLine.vue_vue_type_script_setup_true_lang.js","names":[],"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>(\n  () => !!(props.clearable && data.isOpen && props.modelValue && modelText.value),\n);\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\n      v-model=\"inputModel\"\n      :placeholder=\"placeholderVal\"\n      :disabled=\"props.disabled\"\n      class=\"pl-line-dropdown__input\"\n    />\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\">\n            Didn't find anything that matched\n          </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\n            name=\"item\"\n            :item=\"item\"\n            :is-selected=\"isItemSelected(item)\"\n            :is-hovered=\"data.activeOption == index\"\n            @click.stop=\"selectItem(item)\"\n          >\n            <TabItem\n              :option=\"item\"\n              :is-selected=\"isItemSelected(item)\"\n              :is-hovered=\"data.activeOption == index\"\n              @click.stop=\"selectItem(item)\"\n            />\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\">\n            Didn't find anything that matched\n          </div>\n        </div>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/PlDropdownLine/ResizableInput.js

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

package/dist/components/PlDropdownLine/ResizableInput.vue2.js

@@ -1,5 +1,6 @@
 import './resizable-input.css';/* empty css                */
 import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, mergeProps as i, normalizeStyle as a, openBlock as o, toDisplayString as s } from "vue";
+//#region src/components/PlDropdownLine/ResizableInput.vue?vue&type=script&setup=true&lang.ts
 var c = { class: "resizable-input" }, l = [
 	"placeholder",
 	"value",
@@ -34,6 +35,7 @@ var c = { class: "resizable-input" }, l = [
 		}), null, 16, l)]));
 	}
 });
+//#endregion
 export { u as default };
 
 //# sourceMappingURL=ResizableInput.vue2.js.map

package/dist/components/PlDropdownLine/ResizableInput.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResizableInput.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"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\n      v-bind=\"$attrs\"\n      :placeholder=\"placeholder\"\n      :value=\"props.modelValue\"\n      :disabled=\"props.disabled\"\n      :style=\"styles\"\n      @input=\"handleInput\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAIA,IAAM,IAAQ,GAQR,IAAO,GAEP,IAAO,QACP,EAAM,cACD,EAAM,cAER,EAAM,YAAY,QAAQ,MAAK,GAAG,CACzC,EAEI,IAAS,QAAe;GAC5B,IAAM,IAA8B,EAAE;AAOtC,UANI,EAAM,UACR,EAAI,QAAW,EAAM,QAEnB,EAAM,aACR,EAAI,WAAc,EAAM,WAEnB;IACP;EAEF,SAAS,EAAY,GAAc;AACjC,KAAK,qBAAsB,EAAM,OAA4B,MAAM;;yBAKnE,EAUM,OAVN,GAUM,CATJ,EAA0E,QAAA;GAAnE,OAAK,EAAE,EAAA,MAAM;GAAE,OAAM;OAAgC,EAAA,MAAI,EAAA,EAAA,EAChE,EAOE,SAPF,EACUA,EAMR,QANc;GACb,aAAa,EAAA;GACb,OAAO,EAAM;GACb,UAAU,EAAM;GAChB,OAAO,EAAA;GACP,SAAO"}
+{"version":3,"file":"ResizableInput.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"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\n      v-bind=\"$attrs\"\n      :placeholder=\"placeholder\"\n      :value=\"props.modelValue\"\n      :disabled=\"props.disabled\"\n      :style=\"styles\"\n      @input=\"handleInput\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAIA,IAAM,IAAQ,GAQR,IAAO,GAEP,IAAO,QACP,EAAM,cACD,EAAM,cAER,EAAM,YAAY,QAAQ,MAAK,GAAG,CACzC,EAEI,IAAS,QAAe;GAC5B,IAAM,IAA8B,EAAE;AAOtC,UANI,EAAM,UACR,EAAI,QAAW,EAAM,QAEnB,EAAM,aACR,EAAI,WAAc,EAAM,WAEnB;IACP;EAEF,SAAS,EAAY,GAAc;AACjC,KAAK,qBAAsB,EAAM,OAA4B,MAAM;;yBAKnE,EAUM,OAVN,GAUM,CATJ,EAA0E,QAAA;GAAnE,OAAK,EAAE,EAAA,MAAM;GAAE,OAAM;OAAgC,EAAA,MAAI,EAAA,EAAA,EAChE,EAOE,SAPF,EACUA,EAMR,QANc;GACb,aAAa,EAAA;GACb,OAAO,EAAM;GACb,UAAU,EAAM;GAChB,OAAO,EAAA;GACP,SAAO"}

package/dist/components/PlDropdownMulti/PlDropdownMulti.js

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

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

@@ -16,6 +16,7 @@ import u from "../PlChip/PlChip.js";
 import "../PlChip/index.js";
 import './pl-dropdown-multi.css';/* empty css                  */
 import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, normalizeClass as b, openBlock as x, reactive as ne, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, useSlots as re, useTemplateRef as ie, vModelText as ae, watch as oe, watchPostEffect as se, withCtx as D, withDirectives as ce, withModifiers as O } from "vue";
+//#region src/components/PlDropdownMulti/PlDropdownMulti.vue?vue&type=script&setup=true&lang.ts
 var le = ["tabindex"], ue = { class: "pl-dropdown-multi__container" }, de = { class: "pl-dropdown-multi__field" }, fe = ["disabled", "placeholder"], pe = {
 	key: 0,
 	class: "chips-container"
@@ -203,6 +204,7 @@ var le = ["tabindex"], ue = { class: "pl-dropdown-multi__container" }, de = { cl
 		])], 42, le), y.error ? (x(), h("div", N, T(E(r)(y.error)), 1)) : y.helper ? (x(), h("div", P, T(y.helper), 1)) : m("", !0)]));
 	}
 });
+//#endregion
 export { F as default };
 
 //# sourceMappingURL=PlDropdownMulti.vue2.js.map

package/dist/components/PlDropdownMulti/PlDropdownMulti.vue2.js.map

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

package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.js

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