@milaboratories/uikit 2.15.43 → 2.16.1

package/dist/components/PlDropdown/index.js

@@ -1 +1 @@
-import "./PlDropdown.js";
+export { default as PlDropdown } from "./PlDropdown.js";

package/dist/components/PlDropdown/useGroupBy.js

@@ -1,5 +1,5 @@
 import { computed as e } from "vue";
-//#region src/components/PlDropdown/useGroupBy.ts
+// src/components/PlDropdown/useGroupBy.ts
 function t(e, t) {
 	let n = /* @__PURE__ */ new Map();
 	if (!e) return {
@@ -26,7 +26,6 @@ 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":["groupBy","grouped","list","item","key","rest","useGroupBy","result","computed","byKey"],"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,SAASA,EACP,GACA,GAKA;CACA,IAAMC,oBAAuC,IAAI,IAAI;CAErD,IAAI,CAACC,GACH,OAAO;EACL;EACA,MAAM,CAAC;EACP,SAAS,CAAC;CACZ;CAIF,KAAK,IAAMC,KAAQD,GAAM;EACvB,IAAME,IAAMD,EAAKH;EACjB,AAAII,KACQ,SACPH,EAAQ,IAAIG,CAAG,KAAGH,EAAQ,IAAIG,GAAK,CAAC,CAAC,GAC1CH,EAAQ,IAAIG,CAAG,CAAC,EAAE,KAAKD,CAAI;CAC7B;CAGA,IAAME,IAAOH,EAAK,QAAQ,MACZC,EAAKH,MACmB,IACrC;CAID,OAAO;EACL;EACA;EACA,SAAA,CALe,GAAG,MAAM,KAAKC,EAAQ,OAAO,CAAC,CAAC,CAAC,KAAK,GAAG,GAAGI,CAK1D;CACF;AACF;AAEA,SAAgBC,EAAiC,GAAgB,GAAU;CACzE,IAAMC,IAASC,QAAeR,EAAQE,EAAK,OAAOO,CAAK,CAAC;CAQxD,OAAO;EACL,YAPiBD,QAAeD,EAAO,MAAM,OAO7C;EACA,WANgBC,QAAeD,EAAO,MAAM,OAM5C;EACA,SALcC,QAAeD,EAAO,MAAM,IAK1C;CACF;AACF"}

package/dist/components/PlDropdownLegacy/PlDropdownLegacy.js

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

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

@@ -1 +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\n// Native tooltip with the full selected value; the value layer itself has\n// `pointer-events: none`, so the title goes on the field wrapper.\nconst fieldTitle = computed(() => {\n  if (data.open) return undefined;\n  const v = textValue.value;\n  return v !== undefined && v !== null && v !== \"\" ? String(v) : undefined;\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\" data-testid=\"pl-dropdown-legacy\">\n    <div\n      ref=\"root\"\n      :tabindex=\"tabindex\"\n      class=\"ui-dropdown\"\n      data-testid=\"pl-dropdown-legacy-control\"\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\" :title=\"fieldTitle\">\n          <input\n            ref=\"input\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"computedPlaceholder\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            data-testid=\"pl-dropdown-legacy-input\"\n            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" data-testid=\"pl-dropdown-legacy-value\" @click=\"setFocusOnInput\">\n            <LongText class=\"input-value\"> {{ textValue }} </LongText>\n          </div>\n\n          <div class=\"ui-dropdown__controls\">\n            <PlMaskIcon24\n              v-if=\"isLoadingOptions\"\n              name=\"loading\"\n              data-testid=\"pl-dropdown-legacy-loading\"\n            />\n            <PlIcon16\n              v-if=\"clearable && hasValue\"\n              class=\"clear\"\n              data-testid=\"pl-dropdown-legacy-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              data-testid=\"pl-dropdown-legacy-arrow\"\n              :class=\"[`icon-24 ${arrowIconLarge}`]\"\n              @click.stop=\"toggleOpen\"\n            />\n            <div\n              v-else-if=\"arrowIcon\"\n              class=\"arrow-icon\"\n              data-testid=\"pl-dropdown-legacy-arrow\"\n              :class=\"[`icon-16 ${arrowIcon}`]\"\n              @click.stop=\"toggleOpen\"\n            />\n            <div\n              v-else\n              class=\"arrow-icon arrow-icon-default\"\n              data-testid=\"pl-dropdown-legacy-arrow\"\n              @click.stop=\"toggleOpen\"\n            />\n          </div>\n        </div>\n        <label v-if=\"label\" data-testid=\"pl-dropdown-legacy-label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-dropdown-legacy-required\" />\n          <span>{{ label }}</span>\n          <PlTooltip\n            v-if=\"slots.tooltip\"\n            class=\"info\"\n            position=\"top\"\n            data-testid=\"pl-dropdown-legacy-tooltip\"\n          >\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <div\n          v-if=\"data.open\"\n          ref=\"list\"\n          class=\"ui-dropdown__options\"\n          data-testid=\"pl-dropdown-legacy-options\"\n        >\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            data-testid=\"pl-dropdown-legacy-option\"\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div\n            v-if=\"!filteredRef.length\"\n            class=\"nothing-found\"\n            data-testid=\"pl-dropdown-legacy-options-empty\"\n          >\n            Nothing found\n          </div>\n        </div>\n        <DoubleContour class=\"ui-dropdown__contour\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"ui-dropdown__error\" data-testid=\"pl-dropdown-legacy-error\">\n      {{ computedError }}\n    </div>\n    <div\n      v-else-if=\"isLoadingOptions && loadingOptionsHelper\"\n      class=\"ui-dropdown__helper\"\n      data-testid=\"pl-dropdown-legacy-helper\"\n    >\n      {{ loadingOptionsHelper }}\n    </div>\n    <div v-else-if=\"helper\" class=\"ui-dropdown__helper\" data-testid=\"pl-dropdown-legacy-helper\">\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlDropdownLegacy.js","names":["_sfc_main","PlDropdownLegacy_vue_vue_type_script_setup_true_lang_default","PlDropdownLegacy_default"],"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\n// Native tooltip with the full selected value; the value layer itself has\n// `pointer-events: none`, so the title goes on the field wrapper.\nconst fieldTitle = computed(() => {\n  if (data.open) return undefined;\n  const v = textValue.value;\n  return v !== undefined && v !== null && v !== \"\" ? String(v) : undefined;\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\" data-testid=\"pl-dropdown-legacy\">\n    <div\n      ref=\"root\"\n      :tabindex=\"tabindex\"\n      class=\"ui-dropdown\"\n      data-testid=\"pl-dropdown-legacy-control\"\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\" :title=\"fieldTitle\">\n          <input\n            ref=\"input\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"computedPlaceholder\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            data-testid=\"pl-dropdown-legacy-input\"\n            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" data-testid=\"pl-dropdown-legacy-value\" @click=\"setFocusOnInput\">\n            <LongText class=\"input-value\"> {{ textValue }} </LongText>\n          </div>\n\n          <div class=\"ui-dropdown__controls\">\n            <PlMaskIcon24\n              v-if=\"isLoadingOptions\"\n              name=\"loading\"\n              data-testid=\"pl-dropdown-legacy-loading\"\n            />\n            <PlIcon16\n              v-if=\"clearable && hasValue\"\n              class=\"clear\"\n              data-testid=\"pl-dropdown-legacy-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              data-testid=\"pl-dropdown-legacy-arrow\"\n              :class=\"[`icon-24 ${arrowIconLarge}`]\"\n              @click.stop=\"toggleOpen\"\n            />\n            <div\n              v-else-if=\"arrowIcon\"\n              class=\"arrow-icon\"\n              data-testid=\"pl-dropdown-legacy-arrow\"\n              :class=\"[`icon-16 ${arrowIcon}`]\"\n              @click.stop=\"toggleOpen\"\n            />\n            <div\n              v-else\n              class=\"arrow-icon arrow-icon-default\"\n              data-testid=\"pl-dropdown-legacy-arrow\"\n              @click.stop=\"toggleOpen\"\n            />\n          </div>\n        </div>\n        <label v-if=\"label\" data-testid=\"pl-dropdown-legacy-label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-dropdown-legacy-required\" />\n          <span>{{ label }}</span>\n          <PlTooltip\n            v-if=\"slots.tooltip\"\n            class=\"info\"\n            position=\"top\"\n            data-testid=\"pl-dropdown-legacy-tooltip\"\n          >\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <div\n          v-if=\"data.open\"\n          ref=\"list\"\n          class=\"ui-dropdown__options\"\n          data-testid=\"pl-dropdown-legacy-options\"\n        >\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            data-testid=\"pl-dropdown-legacy-option\"\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div\n            v-if=\"!filteredRef.length\"\n            class=\"nothing-found\"\n            data-testid=\"pl-dropdown-legacy-options-empty\"\n          >\n            Nothing found\n          </div>\n        </div>\n        <DoubleContour class=\"ui-dropdown__contour\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"ui-dropdown__error\" data-testid=\"pl-dropdown-legacy-error\">\n      {{ computedError }}\n    </div>\n    <div\n      v-else-if=\"isLoadingOptions && loadingOptionsHelper\"\n      class=\"ui-dropdown__helper\"\n      data-testid=\"pl-dropdown-legacy-helper\"\n    >\n      {{ loadingOptionsHelper }}\n    </div>\n    <div v-else-if=\"helper\" class=\"ui-dropdown__helper\" data-testid=\"pl-dropdown-legacy-helper\">\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,24 +1,24 @@
-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 "../PlTooltip/index.js";
-import { getErrorMessage as a } from "../../helpers/error.js";
-import o from "../LongText.js";
-import { scrollIntoView as s } from "../../helpers/dom.js";
-import ee from "../PlSvg/PlSvg.js";
+import e from "../PlSvg/PlSvg.js";
 import "../PlSvg/index.js";
-import te from "../PlIcon24/PlIcon24.js";
-import c from "../PlIcon16/PlIcon16.js";
+import t from "../PlIcon16/PlIcon16.js";
+import "../PlIcon16/index.js";
+import { normalizeListOptions as n } from "../../helpers/utils.js";
+import { tap as r, tapIf as i } from "../../helpers/functions.js";
+import a from "../PlTooltip/PlTooltip.js";
+import "../PlTooltip/index.js";
+import o from "../DropdownListItem.js";
+import { getErrorMessage as s } from "../../helpers/error.js";
+import ee from "../LongText.js";
+import { scrollIntoView as te } from "../../helpers/dom.js";
+import c from "../PlIcon24/PlIcon24.js";
 import l from "../../utils/DoubleContour.js";
 import { useLabelNotch as ne } from "../../utils/useLabelNotch.js";
 import { deepEqual as u } from "../../helpers/objects.js";
-import "../PlIcon16/index.js";
 import "../PlMaskIcon24/index.js";
 import re from "../../assets/images/required.js";
 /* empty css                   */
 import { Fragment as ie, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as ae, createVNode as g, defineComponent as _, normalizeClass as v, openBlock as y, reactive as b, ref as x, renderList as S, renderSlot as C, toDisplayString as w, unref as T, useSlots as oe, vModelText as se, watch as E, watchPostEffect as ce, withCtx as D, withDirectives as le, withModifiers as O } from "vue";
-//#region src/components/PlDropdownLegacy/PlDropdownLegacy.vue?vue&type=script&setup=true&lang.ts
+// src/components/PlDropdownLegacy/PlDropdownLegacy.vue?vue&type=script&setup=true&lang.ts
 var ue = {
 	class: "ui-dropdown__envelope",
 	"data-testid": "pl-dropdown-legacy"
@@ -41,7 +41,7 @@ var ue = {
 	key: 2,
 	class: "ui-dropdown__helper",
 	"data-testid": "pl-dropdown-legacy-helper"
-}, I = /* @__PURE__ */ _({
+}, I = /*@__PURE__*/ _({
 	name: "PlDropdown",
 	props: {
 		modelValue: {},
@@ -73,12 +73,12 @@ var ue = {
 			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 = d(() => R.options === void 0), G = d(() => W.value ? !0 : R.disabled), K = d(() => (R.options ?? []).findIndex((e) => u(e.value, R.modelValue))), q = d(() => {
+		}), me = () => r(X.value.findIndex((e) => u(e.value, R.modelValue)), (e) => e < 0 ? 0 : e), he = () => U.activeIndex = me(), W = d(() => R.options === void 0), G = d(() => W.value ? !0 : R.disabled), K = d(() => (R.options ?? []).findIndex((e) => u(e.value, R.modelValue))), q = d(() => {
 			if (!W.value) {
-				if (R.error) return a(R.error);
+				if (R.error) return s(R.error);
 				if (R.modelValue !== void 0 && K.value === -1) return "The selected value is not one of the options";
 			}
-		}), J = d(() => r(R.options ?? []).map((e, t) => ({
+		}), J = d(() => n(R.options ?? []).map((e, t) => ({
 			...e,
 			index: t,
 			isSelected: t === K.value,
@@ -99,8 +99,8 @@ var ue = {
 			B?.value?.contains(e.relatedTarget) || (U.search = "", U.open = !1);
 		}, Ce = () => {
 			let e = V.value;
-			e && n(e.querySelector(".hovered-item"), (t) => {
-				s(e, t);
+			e && i(e.querySelector(".hovered-item"), (t) => {
+				te(e, t);
 			});
 		}, we = (e) => {
 			if ([
@@ -124,7 +124,7 @@ var ue = {
 		};
 		return ne(B), E(() => R.modelValue, he, { immediate: !0 }), E(() => U.open, (e) => e ? H.value?.focus() : ""), ce(() => {
 			U.search, U.activeIndex >= 0 && U.open && Ce();
-		}), (t, n) => (y(), m("div", ue, [h("div", {
+		}), (n, r) => (y(), m("div", ue, [h("div", {
 			ref_key: "root",
 			ref: B,
 			tabindex: Z.value,
@@ -144,7 +144,7 @@ var ue = {
 				le(h("input", {
 					ref_key: "input",
 					ref: H,
-					"onUpdate:modelValue": n[0] ||= (e) => U.search = e,
+					"onUpdate:modelValue": r[0] ||= (e) => U.search = e,
 					type: "text",
 					tabindex: "-1",
 					disabled: G.value,
@@ -158,24 +158,24 @@ var ue = {
 					key: 0,
 					"data-testid": "pl-dropdown-legacy-value",
 					onClick: be
-				}, [g(o, { class: "input-value" }, {
+				}, [g(ee, { class: "input-value" }, {
 					default: D(() => [ae(w(Y.value), 1)]),
 					_: 1
 				})])),
 				h("div", A, [
-					W.value ? (y(), f(T(te), {
+					W.value ? (y(), f(T(c), {
 						key: 0,
 						name: "loading",
 						"data-testid": "pl-dropdown-legacy-loading"
 					})) : p("", !0),
-					_.clearable && ve.value ? (y(), f(T(c), {
+					_.clearable && ve.value ? (y(), f(T(t), {
 						key: 1,
 						class: "clear",
 						"data-testid": "pl-dropdown-legacy-clear",
 						name: "delete-clear",
 						onClick: O(ye, ["stop"])
 					})) : p("", !0),
-					C(t.$slots, "append"),
+					C(n.$slots, "append"),
 					_.arrowIconLarge ? (y(), m("div", {
 						key: 2,
 						class: v(["arrow-icon", [`icon-24 ${_.arrowIconLarge}`]]),
@@ -195,19 +195,19 @@ var ue = {
 				])
 			], 8, pe),
 			_.label ? (y(), m("label", j, [
-				_.required ? (y(), f(T(ee), {
+				_.required ? (y(), f(T(e), {
 					key: 0,
 					uri: T(re),
 					"data-testid": "pl-dropdown-legacy-required"
 				}, null, 8, ["uri"])) : p("", !0),
 				h("span", null, w(_.label), 1),
-				T(z).tooltip ? (y(), f(T(i), {
+				T(z).tooltip ? (y(), f(T(a), {
 					key: 1,
 					class: "info",
 					position: "top",
 					"data-testid": "pl-dropdown-legacy-tooltip"
 				}, {
-					tooltip: D(() => [C(t.$slots, "tooltip")]),
+					tooltip: D(() => [C(n.$slots, "tooltip")]),
 					_: 3
 				})) : p("", !0)
 			])) : p("", !0),
@@ -217,14 +217,14 @@ var ue = {
 				ref: V,
 				class: "ui-dropdown__options",
 				"data-testid": "pl-dropdown-legacy-options"
-			}, [(y(!0), m(ie, null, S(X.value, (t, n) => (y(), f(e, {
-				key: n,
-				option: t,
-				"is-selected": t.isSelected,
-				"is-hovered": t.isActive,
+			}, [(y(!0), m(ie, null, S(X.value, (e, t) => (y(), f(o, {
+				key: t,
+				option: e,
+				"is-selected": e.isSelected,
+				"is-hovered": e.isActive,
 				size: _.optionSize,
 				"data-testid": "pl-dropdown-legacy-option",
-				onClick: O((e) => Q(t.value), ["stop"])
+				onClick: O((t) => Q(e.value), ["stop"])
 			}, null, 8, [
 				"option",
 				"is-selected",
@@ -236,7 +236,6 @@ var ue = {
 		])], 42, de), q.value ? (y(), m("div", N, w(q.value), 1)) : W.value && _.loadingOptionsHelper ? (y(), m("div", P, w(_.loadingOptionsHelper), 1)) : _.helper ? (y(), m("div", F, w(_.helper), 1)) : p("", !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\n// Native tooltip with the full selected value; the value layer itself has\n// `pointer-events: none`, so the title goes on the field wrapper.\nconst fieldTitle = computed(() => {\n  if (data.open) return undefined;\n  const v = textValue.value;\n  return v !== undefined && v !== null && v !== \"\" ? String(v) : undefined;\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\" data-testid=\"pl-dropdown-legacy\">\n    <div\n      ref=\"root\"\n      :tabindex=\"tabindex\"\n      class=\"ui-dropdown\"\n      data-testid=\"pl-dropdown-legacy-control\"\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\" :title=\"fieldTitle\">\n          <input\n            ref=\"input\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"computedPlaceholder\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            data-testid=\"pl-dropdown-legacy-input\"\n            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" data-testid=\"pl-dropdown-legacy-value\" @click=\"setFocusOnInput\">\n            <LongText class=\"input-value\"> {{ textValue }} </LongText>\n          </div>\n\n          <div class=\"ui-dropdown__controls\">\n            <PlMaskIcon24\n              v-if=\"isLoadingOptions\"\n              name=\"loading\"\n              data-testid=\"pl-dropdown-legacy-loading\"\n            />\n            <PlIcon16\n              v-if=\"clearable && hasValue\"\n              class=\"clear\"\n              data-testid=\"pl-dropdown-legacy-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              data-testid=\"pl-dropdown-legacy-arrow\"\n              :class=\"[`icon-24 ${arrowIconLarge}`]\"\n              @click.stop=\"toggleOpen\"\n            />\n            <div\n              v-else-if=\"arrowIcon\"\n              class=\"arrow-icon\"\n              data-testid=\"pl-dropdown-legacy-arrow\"\n              :class=\"[`icon-16 ${arrowIcon}`]\"\n              @click.stop=\"toggleOpen\"\n            />\n            <div\n              v-else\n              class=\"arrow-icon arrow-icon-default\"\n              data-testid=\"pl-dropdown-legacy-arrow\"\n              @click.stop=\"toggleOpen\"\n            />\n          </div>\n        </div>\n        <label v-if=\"label\" data-testid=\"pl-dropdown-legacy-label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-dropdown-legacy-required\" />\n          <span>{{ label }}</span>\n          <PlTooltip\n            v-if=\"slots.tooltip\"\n            class=\"info\"\n            position=\"top\"\n            data-testid=\"pl-dropdown-legacy-tooltip\"\n          >\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <div\n          v-if=\"data.open\"\n          ref=\"list\"\n          class=\"ui-dropdown__options\"\n          data-testid=\"pl-dropdown-legacy-options\"\n        >\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            data-testid=\"pl-dropdown-legacy-option\"\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div\n            v-if=\"!filteredRef.length\"\n            class=\"nothing-found\"\n            data-testid=\"pl-dropdown-legacy-options-empty\"\n          >\n            Nothing found\n          </div>\n        </div>\n        <DoubleContour class=\"ui-dropdown__contour\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"ui-dropdown__error\" data-testid=\"pl-dropdown-legacy-error\">\n      {{ computedError }}\n    </div>\n    <div\n      v-else-if=\"isLoadingOptions && loadingOptionsHelper\"\n      class=\"ui-dropdown__helper\"\n      data-testid=\"pl-dropdown-legacy-helper\"\n    >\n      {{ loadingOptionsHelper }}\n    </div>\n    <div v-else-if=\"helper\" class=\"ui-dropdown__helper\" data-testid=\"pl-dropdown-legacy-helper\">\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"PlDropdownLegacy.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_withDirectives","_vModelText","_createVNode","LongText","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","_createBlock","_unref","PlMaskIcon24","PlIcon16","_withModifiers","_renderSlot","PlSvg","SvgRequired","PlTooltip","_Fragment","_renderList","DropdownListItem","DoubleContour","PlSvg_default","PlIcon16_default","PlTooltip_default","DropdownListItem_default","LongText_default","PlIcon24_default","DoubleContour_default","required_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","PlDropdownLegacy_vue_vue_type_script_setup_true_lang_default","__emit","emit","props","__props","slots","useSlots","root","ref","list","input","data","reactive","findActiveIndex","tap","filteredRef","deepEqual","o","v","updateActive","isLoadingOptions","computed","isDisabled","selectedIndex","computedError","getErrorMessage","optionsRef","normalizeListOptions","opt","index","textValue","unref","fieldTitle","computedPlaceholder","hasValue","options","search","tabindex","selectOption","clear","setFocusOnInput","toggleOpen","onInputFocus","onFocusOut","event","scrollIntoActive","$list","tapIf","handleKeydown","open","filtered","length","it","activeIndex","localIndex","delta","newIndex","useLabelNotch","watch","watchPostEffect","openBlock","createElementBlock","createElementVNode","normalizeClass","withDirectives","_cache","$event","vModelText","createCommentVNode","createVNode","withCtx","createTextVNode","toDisplayString","createBlock","withModifiers","renderSlot","_ctx","Fragment","renderList","item"],"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\n// Native tooltip with the full selected value; the value layer itself has\n// `pointer-events: none`, so the title goes on the field wrapper.\nconst fieldTitle = computed(() => {\n  if (data.open) return undefined;\n  const v = textValue.value;\n  return v !== undefined && v !== null && v !== \"\" ? String(v) : undefined;\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\" data-testid=\"pl-dropdown-legacy\">\n    <div\n      ref=\"root\"\n      :tabindex=\"tabindex\"\n      class=\"ui-dropdown\"\n      data-testid=\"pl-dropdown-legacy-control\"\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\" :title=\"fieldTitle\">\n          <input\n            ref=\"input\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"computedPlaceholder\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            data-testid=\"pl-dropdown-legacy-input\"\n            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" data-testid=\"pl-dropdown-legacy-value\" @click=\"setFocusOnInput\">\n            <LongText class=\"input-value\"> {{ textValue }} </LongText>\n          </div>\n\n          <div class=\"ui-dropdown__controls\">\n            <PlMaskIcon24\n              v-if=\"isLoadingOptions\"\n              name=\"loading\"\n              data-testid=\"pl-dropdown-legacy-loading\"\n            />\n            <PlIcon16\n              v-if=\"clearable && hasValue\"\n              class=\"clear\"\n              data-testid=\"pl-dropdown-legacy-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              data-testid=\"pl-dropdown-legacy-arrow\"\n              :class=\"[`icon-24 ${arrowIconLarge}`]\"\n              @click.stop=\"toggleOpen\"\n            />\n            <div\n              v-else-if=\"arrowIcon\"\n              class=\"arrow-icon\"\n              data-testid=\"pl-dropdown-legacy-arrow\"\n              :class=\"[`icon-16 ${arrowIcon}`]\"\n              @click.stop=\"toggleOpen\"\n            />\n            <div\n              v-else\n              class=\"arrow-icon arrow-icon-default\"\n              data-testid=\"pl-dropdown-legacy-arrow\"\n              @click.stop=\"toggleOpen\"\n            />\n          </div>\n        </div>\n        <label v-if=\"label\" data-testid=\"pl-dropdown-legacy-label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-dropdown-legacy-required\" />\n          <span>{{ label }}</span>\n          <PlTooltip\n            v-if=\"slots.tooltip\"\n            class=\"info\"\n            position=\"top\"\n            data-testid=\"pl-dropdown-legacy-tooltip\"\n          >\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <div\n          v-if=\"data.open\"\n          ref=\"list\"\n          class=\"ui-dropdown__options\"\n          data-testid=\"pl-dropdown-legacy-options\"\n        >\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            data-testid=\"pl-dropdown-legacy-option\"\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div\n            v-if=\"!filteredRef.length\"\n            class=\"nothing-found\"\n            data-testid=\"pl-dropdown-legacy-options-empty\"\n          >\n            Nothing found\n          </div>\n        </div>\n        <DoubleContour class=\"ui-dropdown__contour\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"ui-dropdown__error\" data-testid=\"pl-dropdown-legacy-error\">\n      {{ computedError }}\n    </div>\n    <div\n      v-else-if=\"isLoadingOptions && loadingOptionsHelper\"\n      class=\"ui-dropdown__helper\"\n      data-testid=\"pl-dropdown-legacy-helper\"\n    >\n      {{ loadingOptionsHelper }}\n    </div>\n    <div v-else-if=\"helper\" class=\"ui-dropdown__helper\" data-testid=\"pl-dropdown-legacy-helper\">\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBR,IAAM8C,IAAOD,GAOPE,IAAQC,GAuERC,IAAQC,GAAS,GAEjBC,IAAOC,EAA6B,GACpCC,IAAOD,EAA6B,GACpCE,IAAQF,EAAkC,GAE1CG,IAAOC,EAAS;GACpB,QAAQ;GACR,aAAa;GACb,MAAM;EACR,CAAC,GAEKC,WACJC,EACEC,EAAY,MAAM,WAAW,MAAMC,EAAUC,EAAE,OAAOd,EAAM,UAAU,CAAC,IACtE,MAAOe,IAAI,IAAI,IAAIA,CACtB,GAEIC,WAAsB,EAAK,cAAcN,GAAgB,GAEzDO,IAAmBC,QAChBlB,EAAM,YAAY,KAAA,CAC1B,GAEKmB,IAAaD,QACbD,EAAiB,QACZ,KAGFjB,EAAM,QACd,GAEKoB,IAAgBF,SACZlB,EAAM,WAAW,CAAC,EAAA,CAAG,WAAW,MAAMa,EAAUC,EAAE,OAAOd,EAAM,UAAU,CAAC,CACnF,GAEKqB,IAAgBH,QAAe;GACnC,IAAI,GAAiB,OAIrB;QAAIlB,EAAM,OACR,OAAOsB,EAAgBtB,EAAM,KAAK;IAGpC,IAAIA,EAAM,eAAe,KAAA,KAAaoB,EAAc,UAAU,IAC5D,OAAO;GAJ2B;EAQtC,CAAC,GAEKG,IAAaL,QACjBM,EAAqBxB,EAAM,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,GAAK,OAAW;GAC7D,GAAGyB;GACH;GACA,YAAYC,MAAUN,EAAc;GACpC,UAAUM,MAAUlB,EAAK;EAC3B,EAAE,CACJ,GAEMmB,IAAYT,QACAU,EAAML,CAEe,CAAA,CAAQ,MAAM,MAAMV,EAAUC,EAAE,OAAOd,EAAM,UAAU,CAErF,CAAA,EAAM,SAASA,EAAM,UAC7B,GAIK6B,KAAaX,QAAe;GAChC,IAAIV,EAAK,MAAM;GACf,IAAMO,IAAIY,EAAU;GACpB,OAAOZ,KAAyB,QAAQA,MAAM,KAAK,OAAOA,CAAC,IAAI,KAAA;EACjE,CAAC,GAEKe,KAAsBZ,QACtB,CAACV,EAAK,QAAQR,EAAM,aACf,KAGFA,EAAM,aAAa,OAAO2B,EAAU,KAAK,IAAI3B,EAAM,WAC3D,GAEK+B,KAAWb,QACRlB,EAAM,eAAe,KAAA,KAAaA,EAAM,eAAe,IAC/D,GAEKY,IAAcM,QAAe;GACjC,IAAMc,IAAUT,EAAW;GAsB3B,OApBIf,EAAK,SACAwB,EAAQ,QAAQ,MAA4B;IACjD,IAAMC,IAASzB,EAAK,OAAO,YAAY;IAcvC,OAZIM,EAAE,MAAM,YAAY,CAAC,CAAC,SAASmB,CAAM,KAIrCnB,EAAE,eAAeA,EAAE,YAAY,YAAY,CAAC,CAAC,SAASmB,CAAM,IACvD,KAGL,OAAOnB,EAAE,SAAU,WACdA,EAAE,MAAM,YAAY,CAAC,CAAC,SAASmB,CAAM,IAGvCnB,EAAE,UAAUN,EAAK;GAC1B,CAAC,IAGIwB;EACT,CAAC,GAEKE,IAAWhB,QAAgBC,EAAW,QAAQ,KAAA,IAAY,GAAI,GAE9DgB,KAAgB,MAAqB;GAIzC,AAHApC,EAAK,qBAAqBgB,CAAC,GAC3B,EAAK,SAAS,IACd,EAAK,OAAO,IACZX,GAAM,OAAO,MAAM;EACrB,GAEMgC,WAAcrC,EAAK,qBAAqB,KAAA,CAAS,GAEjDsC,WAAwB9B,EAAM,OAAO,MAAM,GAE3C+B,UAAoB,EAAK,OAAO,CAAC9B,EAAK,MAEtC+B,WAAsB,EAAK,OAAO,IAElCC,MAAc,MAAsB;GACxC,AAAKpC,GAAM,OAAO,SAASqC,EAAM,aAA4B,MAC3D,EAAK,SAAS,IACd,EAAK,OAAO;EAEhB,GAEMC,WAAyB;GAC7B,IAAMC,IAAQrC,EAAK;GAEnB,AAAKqC,KAILC,EAAMD,EAAM,cAAc,eAAe,IAAmB,MAAQ;IAClE,GAAeA,GAAOlB,CAAG;GAC3B,CAAC;EACH,GAEMoB,MAAiB,MAAgD;GACrE,IAAK;IAAC;IAAa;IAAW;IAAS;GAAQ,CAAC,CAAC,SAAS,EAAE,IAAI,GAG9D,EAAE,eAAe;QAFjB;GAKF,IAAM,EAAE,SAAM,mBAAgBrC;GAE9B,IAAI,CAACsC,GAAM;IACT,AAAI,EAAE,SAAS,YACb,EAAK,OAAO;IAEd;GACF;GAEA,AAAI,EAAE,SAAS,aACb,EAAK,OAAO,IACZ1C,EAAK,OAAO,MAAM;GAGpB,IAAM2C,IAAWnB,EAAMhB,CAAW,GAE5B,EAAE,cAAWmC;GAEnB,IAAI,CAACC,GACH;GAGF,AAAI,EAAE,SAAS,WACbb,EAAaY,EAAS,MAAM,MAAOE,EAAG,UAAUC,CAAW,CAAC,EAAE,KAAK;GAGrE,IAAMC,IAAaJ,EAAS,WAAW,MAAOE,EAAG,UAAUC,CAAW,KAAK,IAErEE,IAAQ,EAAE,SAAS,cAAc,IAAI,EAAE,SAAS,YAAY,KAAK,GAEjEC,IAAW,KAAK,IAAIF,IAAaC,IAAQJ,CAAM,IAAIA;GAEzD,EAAK,cAAcpC,EAAY,MAAMyC,EAAS,CAAC,SAAS;EAC1D;E,OAEAC,GAAclD,CAAI,GAElBmD,QAAYvD,EAAM,YAAYgB,IAAc,EAAE,WAAW,GAAK,CAAC,GAE/DuC,QACQ/C,EAAK,OACV,MAAUsC,IAAOvC,EAAM,OAAO,MAAM,IAAI,EAC3C,GAEAiD,SAAsB;GAIpB,AAFAhD,EAAK,QAEDA,EAAK,eAAe,KAAKA,EAAK,QAChCkC,GAAiB;EAErB,CAAC,I,UAICzF,EAAA,GAAAC,EAuHM,OAvHNgC,IAuHM,CAtHJ/B,EAwGM,OAAA;GAvGA,SAAA;GAAJ,KAAIiD;GACH,UAAU8B,EAAA;GACX,OAAK9E,EAAA,CAAC,eAAa;IAAA,MAEHoD,EAAK;IAAI,OAAEP,EAAA;IAAK,UAAYkB,EAAA;GAAU,CAAA,CAAA;GADtD,eAAY;GAEX,WAAS0B;GACT,YAAUL;E,IAEXrF,EA8FM,OA9FNiC,IA8FM;GA7FJjC,EAqDM,OAAA;IArDD,OAAM;IAAsB,OAAO0E,GAAA;;IACtCxE,GAAAF,EAWE,SAAA;KAVI,SAAA;KAAJ,KAAIoD;KACK,uBAAA,AAAAuD,EAAA,QAAA,MAAA,EAAK,SAAMC;KACpB,MAAK;KACL,UAAS;KACR,UAAU5C,EAAA;KACV,aAAaW,GAAA;KACd,YAAW;KACX,cAAa;KACb,eAAY;KACX,SAAOS;I,kBARC,CAAAjF,IAAAkD,EAAK,MAAM,C;IAWVA,EAAK,O,aAAjBvD,EAAA,GAAAC,EAEM,OAAA;;KAFiB,eAAY;KAA4B,SAAOmF;I,IACpE9E,EAA0DC,IAAA,EAAhD,OAAM,cAAa,GAAA;KAAE,SAAAC,QAAe,CAAZC,GAAAC,EAAAgE,EAAA,KAAS,GAAA,CAAA,C;;;IAG7CxE,EAkCM,OAlCNoC,GAkCM;KAhCI0B,EAAA,SADRhE,EAAA,GAAAY,EAIEC,EAAAC,CAAA,GAAA;;MAFA,MAAK;MACL,eAAY;;KAGNkC,EAAA,aAAa8B,GAAA,SADrB9E,EAAA,GAAAY,EAMEC,EAAAE,CAAA,GAAA;;MAJA,OAAM;MACN,eAAY;MACZ,MAAK;MACJ,SAAKC,EAAOmE,IAAK,CAAA,MAAA,CAAA;;KAEpBlE,EAAsBuG,EAAA,QAAA,QAAA;KAEdxE,EAAA,kBADRhD,EAAA,GAAAC,EAME,OAAA;;MAJA,OAAKE,EAAA,CAAC,cAAY,CAAA,WAEE6C,EAAA,gBAAc,CAAA,CAAA;MADlC,eAAY;MAEX,SAAKhC,EAAOqE,GAAU,CAAA,MAAA,CAAA;K,eAGZrC,EAAA,aADbhD,EAAA,GAAAC,EAME,OAAA;;MAJA,OAAKE,EAAA,CAAC,cAAY,CAAA,WAEE6C,EAAA,WAAS,CAAA,CAAA;MAD7B,eAAY;MAEX,SAAKhC,EAAOqE,GAAU,CAAA,MAAA,CAAA;K,gBAEzBrF,EAAA,GAAAC,EAKE,OAAA;;MAHA,OAAM;MACN,eAAY;MACX,SAAKe,EAAOqE,GAAU,CAAA,MAAA,CAAA;;;;GAIhBrC,EAAA,SAAbhD,EAAA,GAAAC,EAaQ,SAbRsC,GAaQ;IAZOS,EAAA,YAAbhD,EAAA,GAAAY,EAAsFC,EAAAK,CAAA,GAAA;;KAA9D,KAAKL,EAAAM,EAAA;KAAa,eAAY;;IACtDjB,EAAwB,QAAA,MAAAQ,EAAfsC,EAAA,KAAK,GAAA,CAAA;IAENnC,EAAAoC,CAAA,CAAK,CAAC,WADdjD,EAAA,GAAAY,EASYC,EAAAO,CAAA,GAAA;;KAPV,OAAM;KACN,UAAS;KACT,eAAY;;KAED,SAAOZ,QACO,CAAvBS,EAAuBuG,EAAA,QAAA,SAAA,C;;;;GAKrBjE,EAAK,QADbvD,EAAA,GAAAC,EAuBM,OAAA;;IArBA,SAAA;IAAJ,KAAIoD;IACJ,OAAM;IACN,eAAY;G,KAEZrD,EAAA,EAAA,GAAAC,EASEoB,IAAA,MAAAC,EARwBqC,EAAA,QAAhB,GAAM,OADhB3D,EAAA,GAAAY,EASEW,GAAA;IAPC,KAAKkD;IACL,QAAQkD;IACR,eAAaA,EAAK;IAClB,cAAYA,EAAK;IACjB,MAAM3E,EAAA;IACP,eAAY;IACX,SAAKhC,GAAA,MAAOkE,EAAayC,EAAK,KAAK,GAAA,CAAA,MAAA,CAAA;;;;;;;G,aAG7BhE,EAAA,MAAY,S,aADrB3D,EAAA,GAAAC,EAMM,OANNuC,GAIC,iBAED,E;GAEFlC,EAA8CkB,GAAA,EAA/B,OAAM,uBAAsB,CAAA;E,cAGpC4C,EAAA,SAAXpE,EAAA,GAAAC,EAEM,OAFNwC,GAEM/B,EADD0D,EAAA,KAAa,GAAA,CAAA,KAGLJ,EAAA,SAAoBhB,EAAA,wBADjChD,EAAA,GAAAC,EAMM,OANNyC,GAMMhC,EADDsC,EAAA,oBAAoB,GAAA,CAAA,KAETA,EAAA,UAAhBhD,EAAA,GAAAC,EAEM,OAFN0C,GAEMjC,EADDsC,EAAA,MAAM,GAAA,CAAA,K"}

package/dist/components/PlDropdownLegacy/index.js

@@ -1 +1 @@
-import "./PlDropdownLegacy.js";
+export { default as PlDropdownLegacy } from "./PlDropdownLegacy.js";

package/dist/components/PlDropdownLine/PlDropdownLine.js

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

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

@@ -1 +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    data-testid=\"pl-dropdown-line\"\n    @keydown=\"handleKeydown\"\n    @focusout=\"onFocusOut\"\n    @click=\"toggleList\"\n  >\n    <div class=\"pl-line-dropdown__prefix\" data-testid=\"pl-dropdown-line-prefix\">\n      {{ props?.prefix }}\n    </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\n        v-show=\"!canShowClearBtn\"\n        class=\"pl-line-dropdown__icon\"\n        data-testid=\"pl-dropdown-line-arrow\"\n      />\n      <div\n        v-show=\"canShowClearBtn\"\n        class=\"pl-line-dropdown__icon-clear\"\n        data-testid=\"pl-dropdown-line-clear\"\n        @click=\"clearModel\"\n      />\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        data-testid=\"pl-dropdown-line-options\"\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              data-testid=\"pl-dropdown-line-option\"\n              @click.stop=\"selectItem(item)\"\n            />\n          </slot>\n        </template>\n\n        <div\n          v-if=\"options.length === 0\"\n          class=\"pl-line-dropdown__no-item\"\n          data-testid=\"pl-dropdown-line-options-empty\"\n        >\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        data-testid=\"pl-dropdown-line-options\"\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              data-testid=\"pl-dropdown-line-option\"\n              @click.stop=\"selectItem(item)\"\n            />\n          </slot>\n        </template>\n        <div\n          v-if=\"options.length === 0\"\n          class=\"pl-line-dropdown__no-item\"\n          data-testid=\"pl-dropdown-line-options-empty\"\n        >\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":""}
+{"version":3,"file":"PlDropdownLine.js","names":["_sfc_main","PlDropdownLine_vue_vue_type_script_setup_true_lang_default","PlDropdownLine_default"],"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    data-testid=\"pl-dropdown-line\"\n    @keydown=\"handleKeydown\"\n    @focusout=\"onFocusOut\"\n    @click=\"toggleList\"\n  >\n    <div class=\"pl-line-dropdown__prefix\" data-testid=\"pl-dropdown-line-prefix\">\n      {{ props?.prefix }}\n    </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\n        v-show=\"!canShowClearBtn\"\n        class=\"pl-line-dropdown__icon\"\n        data-testid=\"pl-dropdown-line-arrow\"\n      />\n      <div\n        v-show=\"canShowClearBtn\"\n        class=\"pl-line-dropdown__icon-clear\"\n        data-testid=\"pl-dropdown-line-clear\"\n        @click=\"clearModel\"\n      />\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        data-testid=\"pl-dropdown-line-options\"\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              data-testid=\"pl-dropdown-line-option\"\n              @click.stop=\"selectItem(item)\"\n            />\n          </slot>\n        </template>\n\n        <div\n          v-if=\"options.length === 0\"\n          class=\"pl-line-dropdown__no-item\"\n          data-testid=\"pl-dropdown-line-options-empty\"\n        >\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        data-testid=\"pl-dropdown-line-options\"\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              data-testid=\"pl-dropdown-line-option\"\n              @click.stop=\"selectItem(item)\"\n            />\n          </slot>\n        </template>\n        <div\n          v-if=\"options.length === 0\"\n          class=\"pl-line-dropdown__no-item\"\n          data-testid=\"pl-dropdown-line-options-empty\"\n        >\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":""}

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

@@ -1,7 +1,7 @@
-import e from "../DropdownListItem.js";
+import { normalizeListOptions as e } from "../../helpers/utils.js";
 import { tap as t, tapIf as n } from "../../helpers/functions.js";
-import { normalizeListOptions as r } from "../../helpers/utils.js";
-import { useClickOutside as i } from "../../composition/useClickOutside.js";
+import { useClickOutside as r } from "../../composition/useClickOutside.js";
+import i from "../DropdownListItem.js";
 import { scrollIntoView as a } from "../../helpers/dom.js";
 import { deepEqual as o } from "../../helpers/objects.js";
 import { useElementPosition as ee } from "../../composition/usePosition.js";
@@ -10,7 +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
+// src/components/PlDropdownLine/PlDropdownLine.vue?vue&type=script&setup=true&lang.ts
 var N = {
 	class: "pl-line-dropdown__prefix",
 	"data-testid": "pl-dropdown-line-prefix"
@@ -25,7 +25,7 @@ var N = {
 	key: 0,
 	class: "pl-line-dropdown__no-item",
 	"data-testid": "pl-dropdown-line-options-empty"
-}, F = /* @__PURE__ */ _({
+}, F = /*@__PURE__*/ _({
 	__name: "PlDropdownLine",
 	props: {
 		modelValue: {},
@@ -51,8 +51,8 @@ var N = {
 			return R.isOpen && e.push("open"), L.disabled && e.push("disabled"), e.join(" ");
 		}), H = C(""), U = te(D(L, "options"), H), W = d(() => !!(L.clearable && R.isOpen && L.modelValue && G.value)), G = d(() => {
 			if (L.modelValue !== void 0) {
-				let e = J();
-				if (e !== -1) return r(L.options)[e].label;
+				let t = J();
+				if (t !== -1) return e(L.options)[t].label;
 			}
 			return "";
 		}), K = C(G.value);
@@ -60,7 +60,7 @@ var N = {
 			K.value = e;
 		});
 		let q = d(() => R.isOpen && H.value && H.value.length >= G.value.length - 1 ? H.value : G.value || "...");
-		i(z, () => {
+		r(z, () => {
 			L.mode === "list" && (R.isOpen = !1);
 		}), A(() => K.value, (e) => {
 			G.value === e ? H.value = "" : H.value = e;
@@ -128,11 +128,14 @@ var N = {
 			left: "0px"
 		});
 		return A(B, (e) => {
-			e && (R.optionsHeight = e.getBoundingClientRect().height, window.dispatchEvent(new CustomEvent("adjust")));
+			if (e) {
+				let t = e.getBoundingClientRect();
+				R.optionsHeight = t.height, window.dispatchEvent(new CustomEvent("adjust"));
+			}
 		}), ee(z, (e) => {
 			let t = e.top + e.height + 2;
 			t + R.optionsHeight > e.clientHeight ? $.top = e.top - R.optionsHeight - 2 + "px" : $.top = t + "px", $.left = e.left + "px";
-		}), (t, n) => (x(), m("div", {
+		}), (e, t) => (x(), m("div", {
 			ref_key: "container",
 			ref: z,
 			tabindex: "0",
@@ -145,7 +148,7 @@ var N = {
 			h("div", N, E(L?.prefix), 1),
 			g(s, {
 				modelValue: K.value,
-				"onUpdate:modelValue": n[0] ||= (e) => K.value = e,
+				"onUpdate:modelValue": t[0] ||= (e) => K.value = e,
 				placeholder: q.value,
 				disabled: L.disabled,
 				class: "pl-line-dropdown__input"
@@ -171,28 +174,27 @@ var N = {
 				class: "pl-line-dropdown__items",
 				"data-testid": "pl-dropdown-line-options",
 				onFocusout: Z,
-				onClick: n[1] ||= M(() => {}, ["stop"])
-			}, [(x(!0), m(l, null, w(O(U), (n, r) => T(t.$slots, "item", {
-				key: r,
-				item: n,
+				onClick: t[1] ||= M(() => {}, ["stop"])
+			}, [(x(!0), m(l, null, w(O(U), (t, n) => T(e.$slots, "item", {
+				item: t,
 				textItem: "text",
-				isSelected: X(n),
-				isHovered: R.activeOption == r,
-				onClick: M((e) => Y(n), ["stop"])
-			}, () => [g(e, {
-				option: n,
+				isSelected: X(t),
+				isHovered: R.activeOption == n,
+				onClick: M((e) => Y(t), ["stop"])
+			}, () => [g(i, {
+				option: t,
 				"text-item": "text",
-				"is-selected": X(n),
-				"is-hovered": R.activeOption == r,
+				"is-selected": X(t),
+				"is-hovered": R.activeOption == n,
 				size: "medium",
 				"data-testid": "pl-dropdown-line-option",
-				onClick: M((e) => Y(n), ["stop"])
+				onClick: M((e) => Y(t), ["stop"])
 			}, null, 8, [
 				"option",
 				"is-selected",
 				"is-hovered",
 				"onClick"
-			])])), 128)), O(U).length === 0 ? (x(), m("div", ie, [...n[3] ||= [h("div", { class: "pl-line-dropdown__no-item-title text-s" }, " Didn't find anything that matched ", -1)]])) : p("", !0)], 36)) : L.mode === "tabs" ? (x(), m("div", {
+			])], void 0, n)), 128)), O(U).length === 0 ? (x(), m("div", ie, [...t[3] ||= [h("div", { class: "pl-line-dropdown__no-item-title text-s" }, " Didn't find anything that matched ", -1)]])) : p("", !0)], 36)) : L.mode === "tabs" ? (x(), m("div", {
 				key: 1,
 				ref_key: "list",
 				ref: B,
@@ -201,29 +203,27 @@ var N = {
 				class: "pl-line-dropdown__items-tabs",
 				"data-testid": "pl-dropdown-line-options",
 				onFocusout: Z,
-				onClick: n[2] ||= M(() => {}, ["stop"])
-			}, [(x(!0), m(l, null, w(O(U), (e, n) => T(t.$slots, "item", {
-				key: n,
-				item: e,
-				isSelected: X(e),
+				onClick: t[2] ||= M(() => {}, ["stop"])
+			}, [(x(!0), m(l, null, w(O(U), (t, n) => T(e.$slots, "item", {
+				item: t,
+				isSelected: X(t),
 				isHovered: R.activeOption == n,
-				onClick: M((t) => Y(e), ["stop"])
+				onClick: M((e) => Y(t), ["stop"])
 			}, () => [g(c, {
-				option: e,
-				"is-selected": X(e),
+				option: t,
+				"is-selected": X(t),
 				"is-hovered": R.activeOption == n,
 				"data-testid": "pl-dropdown-line-option",
-				onClick: M((t) => Y(e), ["stop"])
+				onClick: M((e) => Y(t), ["stop"])
 			}, null, 8, [
 				"option",
 				"is-selected",
 				"is-hovered",
 				"onClick"
-			])])), 128)), O(U).length === 0 ? (x(), m("div", P, [...n[4] ||= [h("div", { class: "pl-line-dropdown__no-item-title text-s" }, " Didn't find anything that matched ", -1)]])) : p("", !0)], 36)) : p("", !0)])) : p("", !0)
+			])], void 0, n)), 128)), O(U).length === 0 ? (x(), m("div", P, [...t[4] ||= [h("div", { class: "pl-line-dropdown__no-item-title text-s" }, " Didn't find anything that matched ", -1)]])) : p("", !0)], 36)) : p("", !0)])) : p("", !0)
 		], 34));
 	}
 });
-//#endregion
 export { F as default };
 
 //# sourceMappingURL=PlDropdownLine.vue2.js.map