@milaboratories/uikit 2.4.2 → 2.4.4

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

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

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

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

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

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

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

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

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

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

package/dist/components/PlDropdownMulti/PlDropdownMulti.vue.js

@@ -1,34 +1,33 @@
-(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.pl-dropdown-multi{--contour-color: var(--txt-01);--contour-border-width: 1px;--options-bg: #fff;--option-hover-bg: var(--btn-sec-hover-grey);--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);position:relative;outline:none;min-height:var(--control-height);border-radius:6px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base)}[data-theme=dark] .pl-dropdown-multi{--options-bg: #1B1B1F}.pl-dropdown-multi__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown-multi label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-dropdown-multi label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown-multi__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);padding:1px;color:var(--txt-01)}.pl-dropdown-multi__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown-multi__options{position:absolute;top:0;z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);border-radius:6px;max-height:244px;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14;--thumb-color: var(--ic-02);overflow-y:auto}.pl-dropdown-multi__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dropdown-multi__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown-multi__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dropdown-multi__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:20px;background-color:#fff;opacity:.5;font-style:italic}.pl-dropdown-multi__options .option{position:relative;padding:0 10px;height:var(--control-height);line-height:20px;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:12px;--base-icon: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M19.5%204.5H4.5L4.5%2019.5H19.5V4.5ZM4.5%203C3.67157%203%203%203.67157%203%204.5V19.5C3%2020.3284%203.67157%2021%204.5%2021H19.5C20.3284%2021%2021%2020.3284%2021%2019.5V4.5C21%203.67157%2020.3284%203%2019.5%203H4.5Z'%20fill='%23110529'/%3e%3c/svg%3e");--checked-icon: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='2'%20fill='%23110529'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M17.5431%208.51739L10.3333%2016.0877L6.45691%2012.0174L7.54312%2010.9829L10.3333%2013.9127L16.4569%207.48291L17.5431%208.51739Z'%20fill='white'/%3e%3c/svg%3e")}.pl-dropdown-multi__options .option .pl-dropdown-multi__checkmark{cursor:pointer;outline:none;border-radius:4px;background:var(--base-icon) no-repeat center;width:24px;height:24px}[data-theme=dark] .pl-dropdown-multi__options .option .pl-dropdown-multi__checkmark{--base-icon: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M19.5%204.5H4.5L4.5%2019.5H19.5V4.5ZM4.5%203C3.67157%203%203%203.67157%203%204.5V19.5C3%2020.3284%203.67157%2021%204.5%2021H19.5C20.3284%2021%2021%2020.3284%2021%2019.5V4.5C21%203.67157%2020.3284%203%2019.5%203H4.5Z'%20fill='white'/%3e%3c/svg%3e");--checked-icon: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='2'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M17.5431%208.51739L10.3333%2016.0877L6.45691%2012.0174L7.54312%2010.9829L10.3333%2013.9127L16.4569%207.48291L17.5431%208.51739Z'%20fill='%23110529'/%3e%3c/svg%3e")}.pl-dropdown-multi__options .option>span{display:block;overflow:hidden;white-space:nowrap;max-width:100%;text-overflow:ellipsis}.pl-dropdown-multi__options .option.selected{background-color:var(--color-active-select)}.pl-dropdown-multi__options .option.selected .pl-dropdown-multi__checkmark{background:var(--checked-icon) no-repeat center;width:24px;height:24px}.pl-dropdown-multi__options .option.active:not(.selected){background-color:var(--option-hover-bg)}.pl-dropdown-multi__options .option:hover{background-color:var(--option-hover-bg)}.pl-dropdown-multi__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding-left:11px;min-height:var(--control-height);line-height:20px;cursor:pointer;display:flex;flex-direction:row;align-items:center}.pl-dropdown-multi__field .chips-container{position:absolute;top:0;left:0;bottom:0;right:30px;overflow:hidden;padding:0 60px 0 11px;line-height:20px;color:var(--contour-color);display:flex;gap:8px;align-items:center}.pl-dropdown-multi__field input{min-height:calc(var(--control-height) - 2px);line-height:20px;font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 20px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-dropdown-multi__field input:focus{outline:none}.pl-dropdown-multi__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown-multi__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown-multi__field:hover .clear{display:block}.pl-dropdown-multi__controls{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:auto}.pl-dropdown-multi__controls .mask-16,.pl-dropdown-multi__controls .mask-24{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-dropdown-multi__controls .mask-loading{--icon-color: var(--ic-accent);animation:spin 2.5s linear infinite}.pl-dropdown-multi__arrow-wrapper{display:flex;align-items:center;min-height:var(--control-height);padding-right:11px}.pl-dropdown-multi .arrow-icon{cursor:pointer}.pl-dropdown-multi .arrow-icon.arrow-icon-default{transition:transform .2s;background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown-multi__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown-multi__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown-multi.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-dropdown-multi .clear{display:none;position:absolute;top:50%;transform:translateY(-50%);right:36px;z-index:1;background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") no-repeat center;width:16px;height:16px;cursor:pointer}.pl-dropdown-multi.open,.pl-dropdown-multi:focus-within{z-index:1}.pl-dropdown-multi.open .pl-dropdown-multi__container .label,.pl-dropdown-multi:focus-within .pl-dropdown-multi__container .label{color:var(--txt-focus)}.pl-dropdown-multi.open .pl-dropdown-multi__container{z-index:1000}.pl-dropdown-multi.open .pl-dropdown-multi__field{border-radius:6px 6px 0 0}.pl-dropdown-multi.open .arrow{background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown-multi:hover{--contour-color: var(--control-hover-color)}.pl-dropdown-multi:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown-multi:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-dropdown-multi.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-dropdown-multi.disabled{--contour-color: var(--color-dis-01);--control-mask-fill: var(--color-dis-01);--label-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none}.pl-dropdown-multi.disabled .mask-loading{animation:spin 2.5s linear infinite;--icon-color: var(--ic-accent)}.pl-dropdown-multi__open-chips-container{padding:12px}.pl-dropdown-multi__open-chips-container .pl-chip{margin-right:4px;margin-bottom:4px}`)),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { defineComponent as X, useSlots as Y, ref as N, useTemplateRef as Z, reactive as ee, computed as p, unref as a, watch as oe, watchPostEffect as te, createElementBlock as d, openBlock as r, createElementVNode as u, createCommentVNode as f, normalizeClass as le, createBlock as m, createVNode as ne, withDirectives as re, vModelText as se, Fragment as g, renderList as C, withModifiers as O, withCtx as y, createTextVNode as q, toDisplayString as v, renderSlot as B } from "vue";
+(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.pl-dropdown-multi{--contour-color: var(--txt-01);--contour-border-width: 1px;--options-bg: #fff;--option-hover-bg: var(--btn-sec-hover-grey);--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);position:relative;outline:none;min-height:var(--control-height);border-radius:6px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base)}[data-theme=dark] .pl-dropdown-multi{--options-bg: #1B1B1F}.pl-dropdown-multi__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown-multi label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-dropdown-multi label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown-multi__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);padding:1px;color:var(--txt-01)}.pl-dropdown-multi__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown-multi__options{position:absolute;top:0;z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);border-radius:6px;max-height:244px;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14;--thumb-color: var(--ic-02);overflow-y:auto}.pl-dropdown-multi__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dropdown-multi__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown-multi__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dropdown-multi__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:20px;background-color:#fff;opacity:.5;font-style:italic}.pl-dropdown-multi__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding-left:11px;min-height:var(--control-height);line-height:20px;cursor:pointer;display:flex;flex-direction:row;align-items:center}.pl-dropdown-multi__field .chips-container{position:absolute;top:0;left:0;bottom:0;right:30px;overflow:hidden;padding:0 60px 0 11px;line-height:20px;color:var(--contour-color);display:flex;gap:8px;align-items:center}.pl-dropdown-multi__field input{min-height:calc(var(--control-height) - 2px);line-height:20px;font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 20px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-dropdown-multi__field input:focus{outline:none}.pl-dropdown-multi__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown-multi__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown-multi__field:hover .clear{display:block}.pl-dropdown-multi__controls{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:auto}.pl-dropdown-multi__controls .mask-16,.pl-dropdown-multi__controls .mask-24{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-dropdown-multi__controls .mask-loading{--icon-color: var(--ic-accent);animation:spin 2.5s linear infinite}.pl-dropdown-multi__arrow-wrapper{display:flex;align-items:center;min-height:var(--control-height);padding-right:11px}.pl-dropdown-multi .arrow-icon{cursor:pointer}.pl-dropdown-multi .arrow-icon.arrow-icon-default{transition:transform .2s;background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown-multi__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown-multi__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown-multi.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-dropdown-multi .clear{display:none;position:absolute;top:50%;transform:translateY(-50%);right:36px;z-index:1;background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") no-repeat center;width:16px;height:16px;cursor:pointer}.pl-dropdown-multi.open,.pl-dropdown-multi:focus-within{z-index:1}.pl-dropdown-multi.open .pl-dropdown-multi__container .label,.pl-dropdown-multi:focus-within .pl-dropdown-multi__container .label{color:var(--txt-focus)}.pl-dropdown-multi.open .pl-dropdown-multi__container{z-index:1000}.pl-dropdown-multi.open .pl-dropdown-multi__field{border-radius:6px 6px 0 0}.pl-dropdown-multi.open .arrow{background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown-multi:hover{--contour-color: var(--control-hover-color)}.pl-dropdown-multi:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown-multi:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-dropdown-multi.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-dropdown-multi.disabled{--contour-color: var(--color-dis-01);--control-mask-fill: var(--color-dis-01);--label-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none}.pl-dropdown-multi.disabled .mask-loading{animation:spin 2.5s linear infinite;--icon-color: var(--ic-accent)}.pl-dropdown-multi__open-chips-container{padding:12px}.pl-dropdown-multi__open-chips-container .pl-chip{margin-right:4px;margin-bottom:4px}`)),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+import { defineComponent as X, useSlots as Y, ref as q, useTemplateRef as Z, reactive as ee, computed as p, unref as s, watch as oe, watchPostEffect as te, createElementBlock as d, openBlock as r, createElementVNode as u, createCommentVNode as f, normalizeClass as le, createBlock as m, createVNode as ne, withDirectives as re, vModelText as se, Fragment as b, renderList as g, withModifiers as C, withCtx as w, createTextVNode as B, toDisplayString as v, renderSlot as I } from "vue";
 
-import { tap as ae } from "../../helpers/functions.js";
-import ie from "../PlTooltip/PlTooltip.vue.js";
+import ae from "../PlTooltip/PlTooltip.vue.js";
 import T from "../PlChip/PlChip.vue.js";
-import de from "../../utils/DoubleContour.vue.js";
-import { useLabelNotch as ue } from "../../utils/useLabelNotch.js";
-import ce from "../DropdownListItem.vue.js";
-import { deepEqual as k, deepIncludes as x } from "../../helpers/objects.js";
-import { normalizeListOptions as pe } from "../../helpers/utils.js";
-import fe from "../../utils/DropdownOverlay/DropdownOverlay.vue.js";
-import me from "../PlIcon24/PlIcon24.vue.js";
-import ve from "../../generated/components/svg/images/SvgRequired.vue2.js";
-import { getErrorMessage as he } from "../../helpers/error.js";
-const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = { class: "pl-dropdown-multi__field" }, ke = ["disabled", "placeholder"], be = {
+import ie from "../../utils/DoubleContour.vue.js";
+import { useLabelNotch as de } from "../../utils/useLabelNotch.js";
+import ue from "../DropdownListItem.vue.js";
+import { deepEqual as O, deepIncludes as z } from "../../helpers/objects.js";
+import { normalizeListOptions as ce } from "../../helpers/utils.js";
+import pe from "../../utils/DropdownOverlay/DropdownOverlay.vue.js";
+import fe from "../PlIcon24/PlIcon24.vue.js";
+import me from "../../generated/components/svg/images/SvgRequired.vue.js";
+import { getErrorMessage as ve } from "../../helpers/error.js";
+const he = ["tabindex"], _e = { class: "pl-dropdown-multi__container" }, we = { class: "pl-dropdown-multi__field" }, ye = ["disabled", "placeholder"], ke = {
   key: 0,
   class: "chips-container"
-}, ge = { class: "pl-dropdown-multi__controls" }, Ce = { key: 0 }, Oe = { class: "pl-dropdown-multi__open-chips-container" }, Ve = {
+}, be = { class: "pl-dropdown-multi__controls" }, ge = { key: 0 }, Ce = { class: "pl-dropdown-multi__open-chips-container" }, Oe = {
   key: 0,
   class: "nothing-found"
-}, $e = {
+}, Ve = {
   key: 0,
   class: "pl-dropdown-multi__error"
-}, Ae = {
+}, $e = {
   key: 1,
   class: "pl-dropdown-multi__helper"
-}, Ee = {
+}, Ae = {
   name: "PlDropdownMulti"
-}, Ue = /* @__PURE__ */ X({
-  ...Ee,
+}, xe = /* @__PURE__ */ X({
+  ...Ae,
   props: {
     modelValue: { default: () => [] },
     label: { default: void 0 },
@@ -40,31 +39,28 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(z, { emit: S }) {
-    const P = S, V = (e) => P("update:modelValue", e), U = Y(), s = z, c = N(), $ = N(), h = Z("overlay"), t = ee({
+  setup(S, { emit: x }) {
+    const P = x, V = (e) => P("update:modelValue", e), U = Y(), a = S, c = q(), $ = q(), h = Z("overlay"), t = ee({
       search: "",
       activeOption: -1,
       open: !1,
       optionsHeight: 0
-    }), _ = p(() => Array.isArray(s.modelValue) ? s.modelValue : []), K = p(() => t.open && s.modelValue.length > 0 ? s.placeholder : s.modelValue.length > 0 ? "" : s.placeholder), A = p(() => pe(s.options ?? [])), E = p(() => _.value.map((e) => A.value.find((l) => k(l.value, e))).filter((e) => e !== void 0)), w = p(() => {
-      const e = a(_), l = a(A);
+    }), _ = p(() => Array.isArray(a.modelValue) ? a.modelValue : []), K = p(() => t.open && a.modelValue.length > 0 ? a.placeholder : a.modelValue.length > 0 ? "" : a.placeholder), A = p(() => ce(a.options ?? [])), E = p(() => _.value.map((e) => A.value.find((l) => O(l.value, e))).filter((e) => e !== void 0)), y = p(() => {
+      const e = s(_), l = s(A);
       return (t.search ? l.filter((o) => {
         const n = t.search.toLowerCase();
         return o.label.toLowerCase().includes(n) ? !0 : typeof o.value == "string" ? o.value.toLowerCase().includes(n) : o.value === t.search;
       }) : [...l]).map((o) => ({
         ...o,
-        selected: x(e, o.value)
+        selected: z(e, o.value)
       }));
-    }), D = p(() => s.options === void 0), b = p(() => D.value ? !0 : s.disabled), H = p(() => b.value ? void 0 : "0"), j = () => {
-      t.activeOption = ae(
-        w.value.findIndex((e) => k(e.value, s.modelValue)),
-        (e) => e < 0 ? 0 : e
-      );
+    }), D = p(() => a.options === void 0), k = p(() => D.value ? !0 : a.disabled), H = p(() => k.value ? void 0 : "0"), j = () => {
+      t.activeOption = 0;
     }, M = (e) => {
       var o;
-      const l = a(_);
-      V(x(l, e) ? l.filter((n) => !k(n, e)) : [...l, e]), t.search = "", (o = c == null ? void 0 : c.value) == null || o.focus();
-    }, R = (e) => V(a(_).filter((l) => !k(l, e))), G = () => {
+      const l = s(_);
+      V(z(l, e) ? l.filter((n) => !O(n, e)) : [...l, e]), t.search = "", (o = c == null ? void 0 : c.value) == null || o.focus();
+    }, R = (e) => V(s(_).filter((l) => !O(l, e))), G = () => {
       var e;
       return (e = $.value) == null ? void 0 : e.focus();
     }, J = () => {
@@ -81,18 +77,18 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
         return;
       }
       e.code === "Escape" && (t.open = !1, (L = c.value) == null || L.focus());
-      const n = a(w), { length: i } = n;
+      const n = s(y), { length: i } = n;
       if (!i)
         return;
       ["ArrowDown", "ArrowUp", "Enter"].includes(e.code) && e.preventDefault(), e.code === "Enter" && M(n[o].value);
       const W = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
       t.activeOption = Math.abs(o + W + i) % i, requestAnimationFrame(() => {
-        var I;
-        return (I = h.value) == null ? void 0 : I.scrollIntoActive();
+        var N;
+        return (N = h.value) == null ? void 0 : N.scrollIntoActive();
       });
     };
-    return ue(c), oe(
-      () => s.modelValue,
+    return de(c), oe(
+      () => a.modelValue,
       () => j(),
       { immediate: !0 }
     ), te(() => {
@@ -106,69 +102,69 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
         ref_key: "rootRef",
         ref: c,
         tabindex: H.value,
-        class: le(["pl-dropdown-multi", { open: t.open, error: e.error, disabled: b.value }]),
+        class: le(["pl-dropdown-multi", { open: t.open, error: e.error, disabled: k.value }]),
         onKeydown: Q,
         onFocusout: F
       }, [
-        u("div", we, [
-          u("div", ye, [
+        u("div", _e, [
+          u("div", we, [
             re(u("input", {
               ref_key: "input",
               ref: $,
               "onUpdate:modelValue": l[0] || (l[0] = (o) => t.search = o),
               type: "text",
               tabindex: "-1",
-              disabled: b.value,
+              disabled: k.value,
               placeholder: K.value,
               spellcheck: "false",
               autocomplete: "chrome-off",
               onFocus: l[1] || (l[1] = (o) => t.open = !0)
-            }, null, 40, ke), [
+            }, null, 40, ye), [
               [se, t.search]
             ]),
-            t.open ? f("", !0) : (r(), d("div", be, [
-              (r(!0), d(g, null, C(E.value, (o, n) => (r(), m(a(T), {
+            t.open ? f("", !0) : (r(), d("div", ke, [
+              (r(!0), d(b, null, g(E.value, (o, n) => (r(), m(s(T), {
                 key: n,
                 closeable: "",
                 small: "",
-                onClick: l[2] || (l[2] = O((i) => t.open = !0, ["stop"])),
+                onClick: l[2] || (l[2] = C((i) => t.open = !0, ["stop"])),
                 onClose: (i) => R(o.value)
               }, {
-                default: y(() => [
-                  q(v(o.label || o.value), 1)
+                default: w(() => [
+                  B(v(o.label || o.value), 1)
                 ]),
                 _: 2
               }, 1032, ["onClose"]))), 128))
             ])),
-            u("div", ge, [
-              D.value ? (r(), m(a(me), {
+            u("div", be, [
+              D.value ? (r(), m(s(fe), {
                 key: 0,
                 name: "loading"
               })) : f("", !0),
-              B(e.$slots, "append"),
+              I(e.$slots, "append"),
               u("div", {
                 class: "pl-dropdown-multi__arrow-wrapper",
-                onClick: O(J, ["stop"])
+                onClick: C(J, ["stop"])
               }, l[3] || (l[3] = [
                 u("div", { class: "arrow-icon arrow-icon-default" }, null, -1)
               ]))
             ])
           ]),
-          e.label ? (r(), d("label", Ce, [
-            e.required ? (r(), m(ve, { key: 0 })) : f("", !0),
+          e.label ? (r(), d("label", ge, [
+            e.required ? (r(), m(me, { key: 0 })) : f("", !0),
             u("span", null, v(e.label), 1),
-            a(U).tooltip ? (r(), m(a(ie), {
+            s(U).tooltip ? (r(), m(s(ae), {
               key: 1,
               class: "info",
               position: "top"
             }, {
-              tooltip: y(() => [
-                B(e.$slots, "tooltip")
+              tooltip: w(() => [
+                I(e.$slots, "tooltip")
               ]),
               _: 3
             })) : f("", !0)
           ])) : f("", !0),
-          t.open ? (r(), m(fe, {
+          t.open ? (r(), m(pe, {
             key: 1,
             ref_key: "overlay",
             ref: h,
@@ -178,21 +174,21 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
             tabindex: "-1",
             onFocusout: F
           }, {
-            default: y(() => [
-              u("div", Oe, [
-                (r(!0), d(g, null, C(E.value, (o, n) => (r(), m(a(T), {
+            default: w(() => [
+              u("div", Ce, [
+                (r(!0), d(b, null, g(E.value, (o, n) => (r(), m(s(T), {
                   key: n,
                   closeable: "",
                   small: "",
                   onClose: (i) => R(o.value)
                 }, {
-                  default: y(() => [
-                    q(v(o.label || o.value), 1)
+                  default: w(() => [
+                    B(v(o.label || o.value), 1)
                   ]),
                   _: 2
                 }, 1032, ["onClose"]))), 128))
               ]),
-              (r(!0), d(g, null, C(w.value, (o, n) => (r(), m(ce, {
+              (r(!0), d(b, null, g(y.value, (o, n) => (r(), m(ue, {
                 key: n,
                 option: o,
                 "text-item": "text",
@@ -200,20 +196,20 @@ const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
                 "is-hovered": t.activeOption == n,
                 size: "medium",
                 "use-checkbox": "",
-                onClick: O((i) => M(o.value), ["stop"])
+                onClick: C((i) => M(o.value), ["stop"])
               }, null, 8, ["option", "is-selected", "is-hovered", "onClick"]))), 128)),
-              w.value.length ? f("", !0) : (r(), d("div", Ve, "Nothing found"))
+              y.value.length ? f("", !0) : (r(), d("div", Oe, "Nothing found"))
             ]),
             _: 1
           }, 8, ["root"])) : f("", !0),
-          ne(de, { class: "pl-dropdown-multi__contour" })
+          ne(ie, { class: "pl-dropdown-multi__contour" })
         ])
-      ], 42, _e),
-      e.error ? (r(), d("div", $e, v(a(he)(e.error)), 1)) : e.helper ? (r(), d("div", Ae, v(e.helper), 1)) : f("", !0)
+      ], 42, he),
+      e.error ? (r(), d("div", Ve, v(s(ve)(e.error)), 1)) : e.helper ? (r(), d("div", $e, v(e.helper), 1)) : f("", !0)
     ]));
   }
 });
 export {
-  Ue as default
+  xe as default
 };
 //# sourceMappingURL=PlDropdownMulti.vue.js.map

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

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

package/dist/components/PlDropdownMulti/__tests__/PlDropdownMulti.spec.d.ts

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

package/dist/components/PlDropdownMulti/index.d.ts

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

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

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

package/dist/components/PlDropdownMultiRef/PlDropdownMultiRef.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownMultiRef.vue.js","sources":["../../../src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ModelRef, RefOption } from '../../types';\nimport PlDropdownMulti from '../PlDropdownMulti/PlDropdownMulti.vue';\nimport { computed, useSlots } from 'vue';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: 'update:modelValue', value: ModelRef[] | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: ModelRef[] | undefined;\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<RefOption[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n  }>(),\n  {\n    modelValue: () => [],\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    placeholder: '...',\n    required: false,\n    disabled: false,\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) => ({\n    label: opt.label,\n    value: opt.ref,\n  })),\n);\n</script>\n\n<template>\n  <PlDropdownMulti\n    v-bind=\"props\"\n    :options=\"options\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdownMulti>\n</template>\n"],"names":["slots","useSlots","props","__props","options","computed","_a","opt"],"mappings":";;;;;;;;;;;;;;;;AAMA,UAAMA,IAAaC,EAAS,GAStBC,IAAQC,GA+CRC,IAAUC;AAAA,MAAS,MAAA;;AACvB,gBAAAC,IAAAJ,EAAM,YAAN,gBAAAI,EAAe,IAAI,CAACC,OAAS;AAAA,UAC3B,OAAOA,EAAI;AAAA,UACX,OAAOA,EAAI;AAAA,QAAA;AAAA;AAAA,IAEf;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlDropdownMultiRef.vue.js","sources":["../../../src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ModelRef, RefOption } from '../../types';\nimport PlDropdownMulti from '../PlDropdownMulti/PlDropdownMulti.vue';\nimport { computed, useSlots } from 'vue';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: 'update:modelValue', value: ModelRef[] | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: ModelRef[] | undefined;\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<RefOption[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n  }>(),\n  {\n    modelValue: () => [],\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    placeholder: '...',\n    required: false,\n    disabled: false,\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) => ({\n    label: opt.label,\n    value: opt.ref,\n  })),\n);\n</script>\n\n<template>\n  <PlDropdownMulti\n    v-bind=\"props\"\n    :options=\"options\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdownMulti>\n</template>\n"],"names":["slots","useSlots","props","__props","options","computed","_a","opt"],"mappings":";;;;;;;;;;;;;;;;AAMA,UAAMA,IAAaC,EAAA,GASbC,IAAQC,GA+CRC,IAAUC;AAAA,MAAS,MAAA;;AACvB,gBAAAC,IAAAJ,EAAM,YAAN,gBAAAI,EAAe,IAAI,CAACC,OAAS;AAAA,UAC3B,OAAOA,EAAI;AAAA,UACX,OAAOA,EAAI;AAAA,QAAA;AAAA;AAAA,IACX;;;;;;;;;;;;;;;"}

package/dist/components/PlDropdownMultiRef/__tests__/PlDropdownMultiRef.spec.d.ts

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

package/dist/components/PlDropdownMultiRef/index.d.ts

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

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

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

package/dist/components/PlDropdownRef/PlDropdownRef.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownRef.vue.js","sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: 'PlDropdownRef',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from 'vue';\nimport type { ListOption, ModelRef, RefOption } from '../../types';\nimport { PlDropdown } from '../PlDropdown';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\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 ref of the dropdown.\n     */\n    modelValue: M | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available ref options for the dropdown\n     */\n    options?: Readonly<RefOption[] | 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     * 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    optionSize: 'small',\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) =>\n    'ref' in opt\n      ? {\n          label: opt.label,\n          value: opt.ref,\n          group: opt.group,\n        } as ListOption<M>\n      : opt,\n  ),\n);\n</script>\n\n<template>\n  <PlDropdown\n    v-bind=\"props\"\n    :options=\"options\"\n    :loading-options-helper=\"loadingOptionsHelper\"\n    :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdown>\n</template>\n"],"names":["__default__","slots","useSlots","props","__props","options","computed","_a","opt"],"mappings":";;AAIA,MAAeA,IAAA;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;AASA,UAAMC,IAAaC,EAAS,GAStBC,IAAQC,GA8DRC,IAAUC;AAAA,MAAS,MACvB;;AAAA,gBAAAC,IAAAJ,EAAM,YAAN,gBAAAI,EAAe;AAAA,UAAI,CAACC,MAClB,SAASA,IACL;AAAA,YACE,OAAOA,EAAI;AAAA,YACX,OAAOA,EAAI;AAAA,YACX,OAAOA,EAAI;AAAA,UAAA,IAEbA;AAAA;AAAA;AAAA,IAER;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlDropdownRef.vue.js","sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: 'PlDropdownRef',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from 'vue';\nimport type { ListOption, ModelRef, RefOption } from '../../types';\nimport { PlDropdown } from '../PlDropdown';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\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 ref of the dropdown.\n     */\n    modelValue: M | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available ref options for the dropdown\n     */\n    options?: Readonly<RefOption[] | 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     * 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    optionSize: 'small',\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) =>\n    'ref' in opt\n      ? {\n          label: opt.label,\n          value: opt.ref,\n          group: opt.group,\n        } as ListOption<M>\n      : opt,\n  ),\n);\n</script>\n\n<template>\n  <PlDropdown\n    v-bind=\"props\"\n    :options=\"options\"\n    :loading-options-helper=\"loadingOptionsHelper\"\n    :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdown>\n</template>\n"],"names":["__default__","slots","useSlots","props","__props","options","computed","_a","opt"],"mappings":";;AAIA,MAAAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;AASA,UAAMC,IAAaC,EAAA,GASbC,IAAQC,GA8DRC,IAAUC;AAAA,MAAS,MAAA;;AACvB,gBAAAC,IAAAJ,EAAM,YAAN,gBAAAI,EAAe;AAAA,UAAI,CAACC,MAClB,SAASA,IACL;AAAA,YACE,OAAOA,EAAI;AAAA,YACX,OAAOA,EAAI;AAAA,YACX,OAAOA,EAAI;AAAA,UAAA,IAEbA;AAAA;AAAA;AAAA,IACN;;;;;;;;;;;;;;;;;"}

package/dist/components/PlDropdownRef/__tests__/PlDropdownRef.spec.d.ts

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

package/dist/components/PlDropdownRef/index.d.ts

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

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

@@ -41,4 +41,3 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     inputRef: HTMLInputElement;
 }, HTMLDivElement>;
 export default _default;
-//# sourceMappingURL=PlEditableTitle.vue.d.ts.map

package/dist/components/PlEditableTitle/PlEditableTitle.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlEditableTitle.vue.js","sources":["../../../src/components/PlEditableTitle/PlEditableTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTransformedModel } from '../../composition/useTransformedModel';\nimport style from './pl-editable-title.module.scss';\nimport { computed, onMounted, ref } from 'vue';\n\nconst model = defineModel<string>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Standard input placeholder\n     */\n    placeholder?: string;\n    /**\n     * Any css `width` value (px, %), default is 80%\n     */\n    maxWidth?: string;\n    /**\n     * Fixed non-editable prefix\n     */\n    prefix?: string;\n    /**\n     * Max title length (default is 1000)\n     */\n    maxLength?: number;\n    /**\n     * Min title length\n     */\n    minLength?: number;\n    /**\n     * If true, input will be focused on mount\n     */\n    autofocus?: boolean;\n  }>(),\n  {\n    placeholder: 'Title',\n    maxWidth: '80%',\n    prefix: undefined,\n    maxLength: 1000,\n    minLength: undefined,\n  },\n);\n\nconst local = useTransformedModel(model, {\n  update() {\n    return false;\n  },\n  parse: (v): string => {\n    if (typeof v !== 'string') {\n      throw Error('value should be a string');\n    }\n\n    if (props.maxLength && v.length > props.maxLength) {\n      throw Error(`Max title length is ${props.maxLength} characters`);\n    }\n\n    if (props.minLength && v.length < props.minLength) {\n      throw Error(`Min title length is ${props.minLength} characters`);\n    }\n\n    return v.trim();\n  },\n});\n\nconst inputRef = ref<HTMLInputElement>();\n\nconst computedStyle = computed(() => ({\n  maxWidth: props.maxWidth ?? '80%',\n}));\n\nconst save = () => {\n  model.value = local.value && !local.error ? local.value : model.value;\n  local.reset();\n};\n\nonMounted(() => {\n  if (props.autofocus) {\n    inputRef.value?.focus();\n  }\n});\n\n</script>\n\n<template>\n  <div class=\"pl-editable-title\" :class=\"style.component\" :style=\"computedStyle\">\n    <div :class=\"style.container\" @click=\"() => inputRef?.focus()\">\n      <span v-if=\"prefix\">{{ prefix.trim() }}&nbsp;</span>\n      <input\n        ref=\"inputRef\"\n        v-model=\"local.value\"\n        :placeholder=\"placeholder\"\n        @focusout=\"save\"\n        @keydown.escape=\"local.reset\"\n        @keydown.enter=\"(ev) => (ev.target as HTMLInputElement)?.blur()\"\n      />\n    </div>\n    <div v-if=\"local.error\" :class=\"style.error\">{{ local.error }}</div>\n  </div>\n</template>\n"],"names":["model","_useModel","__props","props","local","useTransformedModel","v","inputRef","ref","computedStyle","computed","save","onMounted","_a"],"mappings":";;;;;;;;;;;;;;;;;;AAKM,UAAAA,IAAQC,EAAmBC,GAAA,YAAC,GAE5BC,IAAQD,GAoCRE,IAAQC,EAAoBL,GAAO;AAAA,MACvC,SAAS;AACA,eAAA;AAAA,MACT;AAAA,MACA,OAAO,CAACM,MAAc;AAChB,YAAA,OAAOA,KAAM;AACf,gBAAM,MAAM,0BAA0B;AAGxC,YAAIH,EAAM,aAAaG,EAAE,SAASH,EAAM;AACtC,gBAAM,MAAM,uBAAuBA,EAAM,SAAS,aAAa;AAGjE,YAAIA,EAAM,aAAaG,EAAE,SAASH,EAAM;AACtC,gBAAM,MAAM,uBAAuBA,EAAM,SAAS,aAAa;AAGjE,eAAOG,EAAE,KAAK;AAAA,MAAA;AAAA,IAChB,CACD,GAEKC,IAAWC,EAAsB,GAEjCC,IAAgBC,EAAS,OAAO;AAAA,MACpC,UAAUP,EAAM,YAAY;AAAA,IAAA,EAC5B,GAEIQ,IAAO,MAAM;AACX,MAAAX,EAAA,QAAQI,EAAM,SAAS,CAACA,EAAM,QAAQA,EAAM,QAAQJ,EAAM,OAChEI,EAAM,MAAM;AAAA,IACd;AAEA,WAAAQ,EAAU,MAAM;;AACd,MAAIT,EAAM,eACRU,IAAAN,EAAS,UAAT,QAAAM,EAAgB;AAAA,IAClB,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlEditableTitle.vue.js","sources":["../../../src/components/PlEditableTitle/PlEditableTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTransformedModel } from '../../composition/useTransformedModel';\nimport style from './pl-editable-title.module.scss';\nimport { computed, onMounted, ref } from 'vue';\n\nconst model = defineModel<string>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Standard input placeholder\n     */\n    placeholder?: string;\n    /**\n     * Any css `width` value (px, %), default is 80%\n     */\n    maxWidth?: string;\n    /**\n     * Fixed non-editable prefix\n     */\n    prefix?: string;\n    /**\n     * Max title length (default is 1000)\n     */\n    maxLength?: number;\n    /**\n     * Min title length\n     */\n    minLength?: number;\n    /**\n     * If true, input will be focused on mount\n     */\n    autofocus?: boolean;\n  }>(),\n  {\n    placeholder: 'Title',\n    maxWidth: '80%',\n    prefix: undefined,\n    maxLength: 1000,\n    minLength: undefined,\n  },\n);\n\nconst local = useTransformedModel(model, {\n  update() {\n    return false;\n  },\n  parse: (v): string => {\n    if (typeof v !== 'string') {\n      throw Error('value should be a string');\n    }\n\n    if (props.maxLength && v.length > props.maxLength) {\n      throw Error(`Max title length is ${props.maxLength} characters`);\n    }\n\n    if (props.minLength && v.length < props.minLength) {\n      throw Error(`Min title length is ${props.minLength} characters`);\n    }\n\n    return v.trim();\n  },\n});\n\nconst inputRef = ref<HTMLInputElement>();\n\nconst computedStyle = computed(() => ({\n  maxWidth: props.maxWidth ?? '80%',\n}));\n\nconst save = () => {\n  model.value = local.value && !local.error ? local.value : model.value;\n  local.reset();\n};\n\nonMounted(() => {\n  if (props.autofocus) {\n    inputRef.value?.focus();\n  }\n});\n\n</script>\n\n<template>\n  <div class=\"pl-editable-title\" :class=\"style.component\" :style=\"computedStyle\">\n    <div :class=\"style.container\" @click=\"() => inputRef?.focus()\">\n      <span v-if=\"prefix\">{{ prefix.trim() }}&nbsp;</span>\n      <input\n        ref=\"inputRef\"\n        v-model=\"local.value\"\n        :placeholder=\"placeholder\"\n        @focusout=\"save\"\n        @keydown.escape=\"local.reset\"\n        @keydown.enter=\"(ev) => (ev.target as HTMLInputElement)?.blur()\"\n      />\n    </div>\n    <div v-if=\"local.error\" :class=\"style.error\">{{ local.error }}</div>\n  </div>\n</template>\n"],"names":["model","_useModel","__props","props","local","useTransformedModel","v","inputRef","ref","computedStyle","computed","save","onMounted","_a"],"mappings":";;;;;;;;;;;;;;;;;;AAKA,UAAMA,IAAQC,EAAmBC,GAAA,YAAC,GAE5BC,IAAQD,GAoCRE,IAAQC,EAAoBL,GAAO;AAAA,MACvC,SAAS;AACP,eAAO;AAAA,MACT;AAAA,MACA,OAAO,CAACM,MAAc;AACpB,YAAI,OAAOA,KAAM;AACf,gBAAM,MAAM,0BAA0B;AAGxC,YAAIH,EAAM,aAAaG,EAAE,SAASH,EAAM;AACtC,gBAAM,MAAM,uBAAuBA,EAAM,SAAS,aAAa;AAGjE,YAAIA,EAAM,aAAaG,EAAE,SAASH,EAAM;AACtC,gBAAM,MAAM,uBAAuBA,EAAM,SAAS,aAAa;AAGjE,eAAOG,EAAE,KAAA;AAAA,MACX;AAAA,IAAA,CACD,GAEKC,IAAWC,EAAA,GAEXC,IAAgBC,EAAS,OAAO;AAAA,MACpC,UAAUP,EAAM,YAAY;AAAA,IAAA,EAC5B,GAEIQ,IAAO,MAAM;AACjB,MAAAX,EAAM,QAAQI,EAAM,SAAS,CAACA,EAAM,QAAQA,EAAM,QAAQJ,EAAM,OAChEI,EAAM,MAAA;AAAA,IACR;AAEA,WAAAQ,EAAU,MAAM;;AACd,MAAIT,EAAM,eACRU,IAAAN,EAAS,UAAT,QAAAM,EAAgB;AAAA,IAEpB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlEditableTitle/index.d.ts

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