@milaboratories/uikit 2.10.37 → 2.10.39

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

@@ -1 +1 @@
-{"version":3,"file":"PlDropdown.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBR,IAAM,IAAO,GAOP,IAAQ,GA0FR,IAAU,GAA8B,EACxC,IAAQ,GAAmC,EAE3C,IAAgB,EAAgD,gBAAgB,EAEhF,IAAO,EAAS;GACpB,QAAQ;GACR,aAAa;GACb,MAAM;GACN,eAAe;GAChB,CAAC,EAEI,UACJ,EACE,EAAW,MAAM,WAAW,MAAM,EAAU,EAAE,OAAO,EAAM,WAAW,CAAC,GACtE,MAAO,IAAI,IAAI,IAAI,EACrB,EAEG,UAAsB,EAAK,cAAc,GAAiB,EAE1D,IAAmB,QAChB,EAAM,YAAY,KAAA,EACzB,EAMI,IAAqB,QAClB,CAAC,EAAM,YAAY,EAAiB,MAC3C,EAEI,IAAa,QACb,EAAiB,QACZ,KAGF,EAAM,SACb,EAEI,IAAgB,SACZ,EAAM,WAAW,EAAE,EAAE,WAAW,MAAM,EAAU,EAAE,OAAO,EAAM,WAAW,CAAC,CACnF,EAEI,IAAgB,QAAe;AAC/B,UAAiB,OAIrB;QAAI,EAAM,MACR,QAAO,EAAgB,EAAM,MAAM;AAGrC,QAAI,EAAM,eAAe,KAAA,KAAa,EAAc,UAAU,GAC5D,QAAO;;IAIT,EAEI,IAAa,QACjB,EAAqB,EAAM,WAAW,EAAE,CAAC,CAAC,KAAK,GAAK,OAAW;GAC7D,GAAG;GACH;GACA,YAAY,MAAU,EAAc;GACpC,UAAU,MAAU,EAAK;GAC1B,EAAE,CACJ,EAEK,IAAY,QACA,EAAM,EAAW,CAEY,MAAM,MAAM,EAAU,EAAE,OAAO,EAAM,WAAW,CAAC,EAEjF,SAAS,EAAM,WAC5B,EAEI,KAAsB,QACtB,CAAC,EAAK,QAAQ,EAAM,eAAe,KAAA,IAC9B,KAGF,EAAM,aAAa,OAAO,EAAU,MAAM,GAAG,EAAM,YAC1D,EAEI,KAAW,QACR,EAAM,eAAe,KAAA,KAAa,EAAM,eAAe,KAC9D,EA4BI,EAAE,eAAY,eAAW,gBAAY,EA1BvB,QAAe;GACjC,IAAM,IAAU,EAAW;AAsB3B,UApBI,EAAK,SACA,EAAQ,QAAQ,MAA4B;IACjD,IAAM,IAAS,EAAK,OAAO,aAAa;AAcxC,WAZI,EAAE,MAAM,aAAa,CAAC,SAAS,EAAO,IAItC,EAAE,eAAe,EAAE,YAAY,aAAa,CAAC,SAAS,EAAO,GACxD,KAGL,OAAO,EAAE,SAAU,WACd,EAAE,MAAM,aAAa,CAAC,SAAS,EAAO,GAGxC,EAAE,UAAU,EAAK;KACxB,GAGG;IACP,EAEiE,QAAQ,EAErE,IAAW,QAAgB,EAAW,QAAQ,KAAA,IAAY,IAAK,EAE/D,KAAgB,MAAqB;AAIzC,GAHA,EAAK,qBAAqB,EAAE,EAC5B,EAAK,SAAS,IACd,EAAK,OAAO,IACZ,GAAS,OAAO,OAAO;KAGnB,MAAuB,MAAe;AAC1C,KAAa,EAAmB;KAG5B,WAAc,EAAK,qBAAqB,KAAA,EAAU,EAElD,WAAwB,EAAM,OAAO,OAAO,EAE5C,WAAmB;AAEvB,GADA,EAAK,OAAO,CAAC,EAAK,MACb,EAAK,SACR,EAAK,SAAS;KAIZ,WAAsB,EAAK,OAAO,IAElC,MAAc,MAAsB;GACxC,IAAM,IAAgB,EAAM;AAE5B,GACE,CAAC,EAAQ,OAAO,SAAS,EAAc,IACvC,CAAC,EAAc,OAAO,SAAS,SAAS,EAAa,KAErD,EAAK,SAAS,IACd,EAAK,OAAO;KAIV,MAAiB,MAAgD;AACrE,OAAK;IAAC;IAAa;IAAW;IAAS;IAAS,CAAC,SAAS,EAAE,KAAK,CAG/D,GAAE,gBAAgB;OAFlB;GAKF,IAAM,EAAE,SAAM,mBAAgB;AAE9B,OAAI,CAAC,GAAM;AACT,IAAI,EAAE,SAAS,YACb,EAAK,OAAO;AAEd;;AAGF,GAAI,EAAE,SAAS,aACb,EAAK,OAAO,IACZ,EAAQ,OAAO,OAAO;GAGxB,IAAM,IAAU,EAAW,OAErB,EAAE,cAAW;AAEnB,OAAI,CAAC,EACH;AAGF,GAAI,EAAE,SAAS,WACb,EAAa,EAAQ,MAAM,MAAO,EAAG,UAAU,EAAY,EAAE,MAAM;GAGrE,IAAM,IAAa,EAAQ,WAAW,MAAO,EAAG,UAAU,EAAY,IAAI,IAEpE,IAAQ,EAAE,SAAS,cAAc,IAAI,EAAE,SAAS,YAAY,KAAK;AAIvE,KAAK,cAAc,EAFF,KAAK,IAAI,IAAa,IAAQ,EAAO,GAAG,GAEpB,SAAS;;SAGhD,EAAc,EAAQ,EAEtB,QAAY,EAAM,YAAY,GAAc,EAAE,WAAW,IAAM,CAAC,EAEhE,QACQ,EAAK,OACV,MAAU,IAAO,EAAM,OAAO,OAAO,GAAG,GAC1C,EAED,SAAsB;AAIpB,GAFA,EAAK,QAED,EAAK,eAAe,KAAK,EAAK,QAChC,EAAc,OAAO,kBAAkB;IAEzC,kBAIA,EAqEM,OAAA;GArED,OAAM;GAAyB,SAAO;MACzC,EA8DM,OAAA;YA7DA;GAAJ,KAAI;GACH,UAAU,EAAA;GACX,OAAK,GAAA,CAAC,eAAa;IAAA,MACH,EAAK;IAAI,OAAS,EAAA,SAAS,EAAA;IAAW,UAAY,EAAA;IAAU,CAAA,CAAA;GAC3E,WAAS;GACT,YAAU;MAEX,EAqDM,OArDN,IAqDM;GApDJ,EAgCM,OAhCN,IAgCM;OA/BJ,EAUE,SAAA;cATI;KAAJ,KAAI;8CACU,SAAM;KACpB,MAAK;KACL,UAAS;KACR,UAAU,EAAA;KACV,aAAa,GAAA;KACd,YAAW;KACX,cAAa;KACZ,SAAO;2BAPC,EAAK,OAAM,CAAA,CAAA;IAUV,EAAK,oBAAA,GAAA,EAAjB,EAEM,OAFN,IAEM,CADJ,EAAsC,GAAA,MAAA;sBAAZ,CAAA,EAAA,EAAZ,EAAA,MAAS,EAAA,EAAA,CAAA,CAAA;;;IAGzB,EAcM,OAdN,IAcM;KAbY,EAAA,SAAA,GAAA,EAAhB,EAAqD,EAAA,EAAA,EAAA;;MAAjB,MAAK;;KAEjC,EAAA,aAAa,GAAA,SAAA,GAAA,EADrB,EAKE,EAAA,EAAA,EAAA;;MAHA,OAAM;MACN,MAAK;MACJ,SAAK,EAAO,IAAK,CAAA,OAAA,CAAA;;KAEpB,EAAsB,EAAA,QAAA,SAAA;KACtB,EAIM,OAAA;MAJD,OAAM;MAA8B,SAAK,EAAO,IAAU,CAAA,OAAA,CAAA;SAC7C,EAAA,kBAAA,GAAA,EAAhB,EAA4E,EAAA,EAAA,EAAA;;MAA3C,MAAM,EAAA;MAAgB,OAAM;8BACxC,EAAA,aAAA,GAAA,EAArB,EAAuE,EAAA,EAAA,EAAA;;MAAtC,MAAM,EAAA;MAAW,OAAM;oCACxD,EAA6E,EAAA,EAAA,EAAA;;MAA5D,MAAK;MAAe,OAAM;;;;GAIpC,EAAA,SAAA,GAAA,EAAb,EAQQ,SAAA,GAAA;IAPO,EAAA,YAAA,GAAA,EAAb,EAA4C,EAAA,EAAA,EAAA;;KAApB,KAAK,EAAA,GAAW;;IACxC,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;IACGA,EAAAA,OAAO,WAAA,GAAA,EAAxB,EAIY,EAAA,EAAA,EAAA;;KAJqB,OAAM;KAAO,UAAS;;KAC1C,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;;GAKrB,EAAK,QAAA,GAAA,EADb,EAQE,GAAA;;aANI;IAAJ,KAAI;IACH,YAAU,EAAA;IACV,QAAQ,EAAA,GAAS;IACjB,MAAM,EAAA,GAAO;IACb,eAAa,EAAA;IACb,iBAAe;;;;;;;GAElB,EAA8E,IAAA;IAA/D,OAAM;IAAwB,kBAAgB,EAAA;;gBAGtD,EAAA,SAAA,GAAA,EAAX,EAA8E,OAA9E,GAA8E,EAAtB,EAAA,MAAa,EAAA,EAAA,IACrD,EAAA,SAAsB,EAAA,wBAAA,GAAA,EAAtC,EAEM,OAFN,GAEM,EADD,EAAA,qBAAoB,EAAA,EAAA,IAET,EAAA,UAAA,GAAA,EAAhB,EAAsE,OAAtE,GAAsE,EAAf,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

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

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

package/dist/components/PlDropdown/useGroupBy.js

@@ -1,36 +1,30 @@
-import { computed as c } from "vue";
-function d(o, t) {
-  var u;
-  const e = /* @__PURE__ */ new Map();
-  if (!o)
-    return {
-      grouped: e,
-      rest: [],
-      ordered: []
-    };
-  for (const s of o) {
-    const r = s[t];
-    r !== void 0 && r !== null && (e.has(r) || e.set(r, []), (u = e.get(r)) == null || u.push(s));
-  }
-  const n = o.filter((s) => {
-    const r = s[t];
-    return r == null;
-  }), f = [...Array.from(e.values()).flat(), ...n];
-  return {
-    grouped: e,
-    rest: n,
-    ordered: f
-  };
+import { computed as e } from "vue";
+function t(e, t) {
+	let n = /* @__PURE__ */ new Map();
+	if (!e) return {
+		grouped: n,
+		rest: [],
+		ordered: []
+	};
+	for (let r of e) {
+		let e = r[t];
+		e != null && (n.has(e) || n.set(e, []), n.get(e)?.push(r));
+	}
+	let r = e.filter((e) => e[t] == null);
+	return {
+		grouped: n,
+		rest: r,
+		ordered: [...Array.from(n.values()).flat(), ...r]
+	};
 }
-function l(o, t) {
-  const e = c(() => d(o.value, t)), n = c(() => e.value.ordered), f = c(() => e.value.grouped), u = c(() => e.value.rest);
-  return {
-    orderedRef: n,
-    groupsRef: f,
-    restRef: u
-  };
+function n(n, r) {
+	let i = e(() => t(n.value, r));
+	return {
+		orderedRef: e(() => i.value.ordered),
+		groupsRef: e(() => i.value.grouped),
+		restRef: e(() => i.value.rest)
+	};
 }
-export {
-  l as useGroupBy
-};
-//# sourceMappingURL=useGroupBy.js.map
+export { n as useGroupBy };
+
+//# sourceMappingURL=useGroupBy.js.map

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

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

@@ -0,0 +1,5 @@
+import e from "./PlDropdownLegacy.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=PlDropdownLegacy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlDropdownLegacy.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":""}

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

@@ -66,9 +66,7 @@ declare const _default: <M = unknown>(__VLS_props: NonNullable<Awaited<typeof __
         tooltip?(_: {}): any;
     };
     emit: (e: "update:modelValue", value: M | undefined) => void;
-}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
-    [key: string]: any;
-}> & {
+}>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;

package/dist/components/PlDropdownLegacy/PlDropdownLegacy.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownLegacy.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownLegacy/PlDropdownLegacy.vue"],"names":[],"mappings":"AA2YA,OAAO,2BAA2B,CAAC;AAMnC,OAAO,KAAK,EAAE,UAAU,EAAwB,MAAM,aAAa,CAAC;AAapE;;GAEG;yBACc,CAAC,yBACJ,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA+kB1D,mBAAmB,CAAC;;;QApkBxB;;WAEG;oBACS,CAAC;QACb;;WAEG;gBACK,MAAM;QACd;;WAEG;kBACO,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACnC;;WAEG;iBACM,MAAM;QACf;;WAEG;+BACoB,MAAM;QAC7B;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,MAAM;QACpB;;WAEG;oBACS,OAAO;QACnB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;oBACS,MAAM;QAClB;;WAEG;yBACc,MAAM;QACvB;;WAEG;qBACU,OAAO,GAAG,QAAQ;mBAihB2D,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;wBA/DkB,GAAG;yBACF,GAAG;;cA7gB3B,mBAAmB,SAAS,CAAC,GAAG,SAAS,KAAG,IAAI;;;;YAglBV,OAAO,CAAC,OAAO,WAAW,CAAC;;AAzlBvE,wBAylB4E;AAG5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"PlDropdownLegacy.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownLegacy/PlDropdownLegacy.vue"],"names":[],"mappings":"AA2YA,OAAO,2BAA2B,CAAC;AAMnC,OAAO,KAAK,EAAE,UAAU,EAAwB,MAAM,aAAa,CAAC;AAapE;;GAEG;yBACc,CAAC,GAAG,OAAO,EAC3B,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WA8kBO,mBAAmB,CAAC;;;QApkBxB;;WAEG;oBACS,CAAC;QACb;;WAEG;gBACK,MAAM;QACd;;WAEG;kBACO,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACnC;;WAEG;iBACM,MAAM;QACf;;WAEG;+BACoB,MAAM;QAC7B;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,MAAM;QACpB;;WAEG;oBACS,OAAO;QACnB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;oBACS,MAAM;QAClB;;WAEG;yBACc,MAAM;QACvB;;WAEG;qBACU,OAAO,GAAG,QAAQ;mBAihB2D,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;wBA/DkB,GAAG;yBACF,GAAG;;cA7gB3B,mBAAmB,SAAS,CAAC,GAAG,SAAS,KAAG,IAAI;EA+kBlD,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAzlBzE,wBAylB4E;AAG5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

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

@@ -1,5 +1,207 @@
-import f from "./PlDropdownLegacy.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=PlDropdownLegacy.vue2.js.map
+import e from "../DropdownListItem.js";
+import { tap as t, tapIf as n } from "../../helpers/functions.js";
+import { normalizeListOptions as r } from "../../helpers/utils.js";
+import i from "../PlTooltip/PlTooltip.js";
+import { getErrorMessage as a } from "../../helpers/error.js";
+import o from "../LongText.js";
+import { scrollIntoView as s } from "../../helpers/dom.js";
+import c from "../PlSvg/PlSvg.js";
+import l from "../PlIcon24/PlIcon24.js";
+import ee from "../PlIcon16/PlIcon16.js";
+import te from "../../utils/DoubleContour.js";
+import { useLabelNotch as ne } from "../../utils/useLabelNotch.js";
+import { deepEqual as u } from "../../helpers/objects.js";
+import 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";
+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"
+}, N = {
+	key: 0,
+	class: "ui-dropdown__error"
+}, P = {
+	key: 1,
+	class: "ui-dropdown__helper"
+}, F = {
+	key: 2,
+	class: "ui-dropdown__helper"
+}, I = /* @__PURE__ */ v({
+	name: "PlDropdown",
+	props: {
+		modelValue: {},
+		label: { default: "" },
+		options: { default: void 0 },
+		helper: { default: void 0 },
+		loadingOptionsHelper: { default: void 0 },
+		error: { default: void 0 },
+		placeholder: { default: "..." },
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		arrowIcon: { default: void 0 },
+		arrowIconLarge: { default: void 0 },
+		optionSize: { default: "small" }
+	},
+	emits: ["update:modelValue"],
+	setup(v, { emit: I }) {
+		let L = I, R = v, z = se(), B = x(), V = x(), H = x(), U = ae({
+			search: "",
+			activeIndex: -1,
+			open: !1
+		}), me = () => t(X.value.findIndex((e) => u(e.value, R.modelValue)), (e) => e < 0 ? 0 : e), he = () => U.activeIndex = me(), W = f(() => R.options === void 0), G = f(() => W.value ? !0 : R.disabled), K = f(() => (R.options ?? []).findIndex((e) => u(e.value, R.modelValue))), q = f(() => {
+			if (!W.value) {
+				if (R.error) return a(R.error);
+				if (R.modelValue !== void 0 && K.value === -1) return "The selected value is not one of the options";
+			}
+		}), J = f(() => r(R.options ?? []).map((e, t) => ({
+			...e,
+			index: t,
+			isSelected: t === K.value,
+			isActive: t === U.activeIndex
+		}))), Y = f(() => w(J).find((e) => u(e.value, R.modelValue))?.label || R.modelValue), ge = f(() => !U.open && R.modelValue ? "" : R.modelValue ? String(Y.value) : R.placeholder), _e = f(() => R.modelValue !== void 0 && R.modelValue !== null), X = f(() => {
+			let e = J.value;
+			return U.search ? e.filter((e) => {
+				let t = U.search.toLowerCase();
+				return e.label.toLowerCase().includes(t) || e.description && e.description.toLowerCase().includes(t) ? !0 : typeof e.value == "string" ? e.value.toLowerCase().includes(t) : e.value === U.search;
+			}) : e;
+		}), Z = f(() => G.value ? void 0 : "0"), Q = (e) => {
+			L("update:modelValue", e), U.search = "", U.open = !1, B?.value?.focus();
+		}, ve = () => L("update:modelValue", void 0), ye = () => H.value?.focus(), $ = () => U.open = !U.open, be = () => U.open = !0, xe = (e) => {
+			B?.value?.contains(e.relatedTarget) || (U.search = "", U.open = !1);
+		}, Se = () => {
+			let e = V.value;
+			e && n(e.querySelector(".hovered-item"), (t) => {
+				s(e, t);
+			});
+		}, Ce = (e) => {
+			if ([
+				"ArrowDown",
+				"ArrowUp",
+				"Enter",
+				"Escape"
+			].includes(e.code)) e.preventDefault();
+			else return;
+			let { open: t, activeIndex: n } = U;
+			if (!t) {
+				e.code === "Enter" && (U.open = !0);
+				return;
+			}
+			e.code === "Escape" && (U.open = !1, B.value?.focus());
+			let r = w(X), { length: i } = r;
+			if (!i) return;
+			e.code === "Enter" && Q(r.find((e) => e.index === n)?.value);
+			let a = r.findIndex((e) => e.index === n) ?? -1, o = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, s = Math.abs(a + o + i) % i;
+			U.activeIndex = X.value[s].index ?? -1;
+		};
+		return ne(B), T(() => R.modelValue, he, { immediate: !0 }), T(() => U.open, (e) => e ? H.value?.focus() : ""), E(() => {
+			U.search, U.activeIndex >= 0 && U.open && Se();
+		}), (t, n) => (b(), h("div", ue, [g("div", {
+			ref_key: "root",
+			ref: B,
+			tabindex: Z.value,
+			class: y(["ui-dropdown", {
+				open: U.open,
+				error: v.error,
+				disabled: G.value
+			}]),
+			onKeydown: Ce,
+			onFocusout: xe
+		}, [g("div", fe, [
+			g("div", pe, [
+				le(g("input", {
+					ref_key: "input",
+					ref: H,
+					"onUpdate:modelValue": n[0] ||= (e) => U.search = e,
+					type: "text",
+					tabindex: "-1",
+					disabled: G.value,
+					placeholder: ge.value,
+					spellcheck: "false",
+					autocomplete: "chrome-off",
+					onFocus: be
+				}, null, 40, k), [[ce, U.search]]),
+				U.open ? m("", !0) : (b(), h("div", {
+					key: 0,
+					onClick: ye
+				}, [_(o, { class: "input-value" }, {
+					default: D(() => [ie(C(Y.value), 1)]),
+					_: 1
+				})])),
+				g("div", A, [
+					W.value ? (b(), p(w(l), {
+						key: 0,
+						name: "loading"
+					})) : m("", !0),
+					v.clearable && _e.value ? (b(), p(w(ee), {
+						key: 1,
+						class: "clear",
+						name: "delete-clear",
+						onClick: O(ve, ["stop"])
+					})) : m("", !0),
+					S(t.$slots, "append"),
+					v.arrowIconLarge ? (b(), h("div", {
+						key: 2,
+						class: y(["arrow-icon", [`icon-24 ${v.arrowIconLarge}`]]),
+						onClick: O($, ["stop"])
+					}, null, 2)) : v.arrowIcon ? (b(), h("div", {
+						key: 3,
+						class: y(["arrow-icon", [`icon-16 ${v.arrowIcon}`]]),
+						onClick: O($, ["stop"])
+					}, null, 2)) : (b(), h("div", {
+						key: 4,
+						class: "arrow-icon arrow-icon-default",
+						onClick: O($, ["stop"])
+					}))
+				])
+			]),
+			v.label ? (b(), h("label", j, [
+				v.required ? (b(), p(w(c), {
+					key: 0,
+					uri: w(re)
+				}, null, 8, ["uri"])) : m("", !0),
+				g("span", null, C(v.label), 1),
+				w(z).tooltip ? (b(), p(w(i), {
+					key: 1,
+					class: "info",
+					position: "top"
+				}, {
+					tooltip: D(() => [S(t.$slots, "tooltip")]),
+					_: 3
+				})) : m("", !0)
+			])) : m("", !0),
+			U.open ? (b(), h("div", {
+				key: 1,
+				ref_key: "list",
+				ref: V,
+				class: "ui-dropdown__options"
+			}, [(b(!0), h(d, null, oe(X.value, (t, n) => (b(), p(e, {
+				key: n,
+				option: t,
+				"is-selected": t.isSelected,
+				"is-hovered": t.isActive,
+				size: v.optionSize,
+				onClick: O((e) => Q(t.value), ["stop"])
+			}, null, 8, [
+				"option",
+				"is-selected",
+				"is-hovered",
+				"size",
+				"onClick"
+			]))), 128)), X.value.length ? m("", !0) : (b(), h("div", M, "Nothing found"))], 512)) : m("", !0),
+			_(te, { class: "ui-dropdown__contour" })
+		])], 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)]));
+	}
+});
+export { I as default };
+
+//# sourceMappingURL=PlDropdownLegacy.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownLegacy.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"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

@@ -0,0 +1,5 @@
+import e from "./PlDropdownLine.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=PlDropdownLine.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlDropdownLine.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":""}