@milaboratories/uikit 2.6.2 → 2.6.3

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","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_1","_toDisplayString","_createVNode","ResizableInput","$event","_hoisted_2","_withDirectives","_hoisted_3","_createBlock","_Teleport","_openBlock","_Fragment","_renderList","_unref","_renderSlot","_ctx","_withModifiers","DropdownListItem","_hoisted_4","_cache","TabItem","_hoisted_5"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,UAAMA,IAAOC,GAEPC,IAAQC,GAoBRC,IAAOC,EAAS;AAAA,MACpB,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,eAAe;AAAA,IAAA,CAChB,GAEKC,IAAYC,EAAA,GAEZC,IAAOD,EAAA,GAEPE,IAAUC,EAAS,MAAM;AAC7B,YAAMC,IAAgB,CAAA;AACtB,aAAIP,EAAK,UACPO,EAAc,KAAK,MAAM,GAEvBT,EAAM,YACRS,EAAc,KAAK,UAAU,GAExBA,EAAc,KAAK,GAAG;AAAA,IAC/B,CAAC,GAEKC,IAAeL,EAAY,EAAE,GAE7BM,IAAUC,GAAgBC,EAAMb,GAAO,SAAS,GAAGU,CAAY,GAE/DI,IAAkBN,EAAkB,MAAM,CAAC,EAAER,EAAM,aAAaE,EAAK,UAAUF,EAAM,cAAce,EAAU,MAAM,GAEnHA,IAAYP,EAAiB,MAAM;AACvC,UAAIR,EAAM,eAAe,QAAW;AAClC,cAAMgB,IAAQC,EAAA;AACd,YAAID,MAAU;AAEZ,iBADaE,GAAqBlB,EAAM,OAAO,EAAEgB,CAAK,EAC1C;AAAA,MAEhB;AACA,aAAO;AAAA,IACT,CAAC,GAEKG,IAAad,EAAIU,EAAU,KAAK;AAEtC,IAAAK,EAAML,GAAW,CAACM,MAAM;AACtB,MAAAF,EAAW,QAAQE;AAAA,IACrB,CAAC;AAED,UAAMC,IAAiBd,EAAS,MAC1BN,EAAK,UACHQ,EAAa,SAASA,EAAa,MAAM,UAAUK,EAAU,MAAM,SAAS,IACvEL,EAAa,QAIjBK,EAAU,SAAS,KAC3B;AAED,IAAAQ,GAAgBnB,GAAW,MAAM;AAC/B,MAAIJ,EAAM,SAAS,WACjBE,EAAK,SAAS;AAAA,IAElB,CAAC,GAEDkB;AAAA,MACE,MAAMD,EAAW;AAAA,MACjB,CAACK,MAAQ;AACP,QAAIT,EAAU,UAAUS,IACtBd,EAAa,QAAQc,IAErBd,EAAa,QAAQ;AAAA,MAEzB;AAAA,IAAA,GAGFU;AAAA,MACE,MAAMlB,EAAK;AAAA,MACX,CAACuB,MAAmB;;AAClB,QAAIA,KAASrB,EAAU,WACrBsB,IAAAtB,EAAU,MAAM,cAAc,OAAO,MAArC,QAAAsB,EAAwC,SACxCC,EAAS,MAAMC,GAAkB;AAAA,MAErC;AAAA,IAAA,GAGFR;AAAA,MACE,MAAMpB,EAAM;AAAA,MACZ,MAAM6B,EAAA;AAAA,MACN,EAAE,WAAW,GAAA;AAAA,IAAK;AAGpB,aAASZ,IAAuC;AAC9C,aAAOjB,EAAM,QAAQ,UAAU,CAAC8B,MACvBC,EAAUD,EAAE,OAAO9B,EAAM,UAAU,CAC3C;AAAA,IACH;AAEA,aAAS6B,IAAiB;AACxB,MAAA3B,EAAK,eAAe8B;AAAA,QAClBrB,EAAQ,MAAM,UAAU,CAACmB,MAChBC,EAAUD,EAAE,OAAO9B,EAAM,UAAU,CAC3C;AAAA,QACD,CAACqB,MAAOA,IAAI,IAAI,IAAIA;AAAA,MAAA;AAAA,IAExB;AAEA,aAASY,IAAoB;AAC3B,MAAAvB,EAAa,QAAQ;AAAA,IACvB;AAEA,aAASwB,IAAmB;AAC1B,MAAIlC,EAAM,WACRE,EAAK,SAAS,KAEdyB,EAAS,MAAM;AACb,QAAAzB,EAAK,SAAS,CAACA,EAAK;AAAA,MACtB,CAAC;AAAA,IAEL;AAEA,aAASiC,IAAqB;AAC5B,MAAInC,EAAM,SAAS,WACjBE,EAAK,SAAS;AAAA,IAElB;AAEA,aAASkC,EAAWC,GAAyB;AAC3C,MAAIA,MACFvC,EAAK,qBAAqBuC,EAAK,KAAK,GACpCF,EAAA,GACAF,EAAA;AAAA,IAEJ;AAEA,aAASK,EAAeD,GAA2B;AACjD,aAAON,EAAUM,EAAK,OAAOrC,EAAM,UAAU;AAAA,IAC/C;AAEA,UAAMuC,IAAa,CAACC,MAAsB;;AACxC,YAAMC,IAAgBD,EAAM;AAE5B,MAAI,GAACd,IAAAtB,EAAU,UAAV,QAAAsB,EAAiB,SAASe,OAAkB,GAACC,IAAApC,EAAK,UAAL,QAAAoC,EAAY,SAASD,QACrE/B,EAAa,QAAQ,IACrBR,EAAK,SAAS;AAAA,IAElB;AAEA,aAASyC,EAAc,GAA6C;AAClE,YAAM,EAAE,cAAAC,MAAiB1C;AAEzB,UAAI,CAACA,EAAK,UAAU,EAAE,SAAS,SAAS;AACtC,QAAAA,EAAK,SAAS;AACd;AAAA,MACF;AAEA,YAAM,EAAE,QAAA2C,MAAWlC,EAAQ;AAE3B,UAAI,CAACkC;AACH;AAGF,MAAI,CAAC,aAAa,WAAW,OAAO,EAAE,SAAS,EAAE,IAAI,KACnD,EAAE,eAAA,GAGA,EAAE,SAAS,WACbT,EAAWzB,EAAQ,MAAMiC,CAAY,CAAC;AAGxC,YAAME,IAAI,EAAE,SAAS,cAAc,IAAI,EAAE,SAAS,YAAY,KAAK;AAEnE,MAAA5C,EAAK,eAAe,KAAK,IAAI0C,IAAeE,IAAID,CAAM,IAAIA,GAE1D,sBAAsBjB,CAAgB;AAAA,IACxC;AAEA,aAASA,IAAmB;AAC1B,YAAMmB,IAAQzC,EAAK;AACnB,MAAKyC,KAGLC,GAAMD,EAAM,cAAc,eAAe,GAAG,CAACE,MAAgB;AAC3D,QAAIjD,EAAM,SAAS,SACjBkD,GAAeH,GAAOE,CAAiB,IAEvCA,EAAG,eAAe,EAAE,UAAU,UAAU,OAAO,WAAW,QAAQ,UAAU;AAAA,MAEhF,CAAC;AAAA,IACH;AAEA,aAASE,IAAa;AACpB,MAAArD,EAAK,qBAAqB,MAAS;AAAA,IACrC;AAEA,UAAMsD,IAAejD,EAAS;AAAA,MAC5B,KAAK;AAAA,MACL,MAAM;AAAA,IAAA,CACP;AAED,WAAAiB,EAAMd,GAAM,CAAC2C,MAAO;AAClB,UAAIA,GAAI;AACN,cAAMI,IAAOJ,EAAG,sBAAA;AAChB,QAAA/C,EAAK,gBAAgBmD,EAAK,QAC1B,OAAO,cAAc,IAAI,YAAY,QAAQ,CAAC;AAAA,MAChD;AAAA,IACF,CAAC,GAEDC,GAAmBlD,GAAW,CAACmD,MAAQ;AAGrC,YAAMC,IAAgBD,EAAI,MAAMA,EAAI,SAAS;AAE7C,MAAIC,IAAgBtD,EAAK,gBAAgBqD,EAAI,eAC3CH,EAAa,MAAMG,EAAI,MAAMrD,EAAK,gBAAgB,IAAM,OAExDkD,EAAa,MAAMI,IAAgB,MAGrCJ,EAAa,OAAOG,EAAI,OAAO;AAAA,IACjC,CAAC,mBAICE,EAsEM,OAAA;AAAA,eArEA;AAAA,MAAJ,KAAIrD;AAAA,MACJ,UAAS;AAAA,MACR,OAAKsD,EAAA,CAAEnD,EAAA,OACF,6BAA6B,CAAA;AAAA,MAClC,WAASoC;AAAA,MACT,YAAUJ;AAAA,MACV,SAAOL;AAAA,IAAA;MAERyB,EAA+D,OAA/DC,IAA+DC,GAAtB7D,KAAA,gBAAAA,EAAO,MAAM,GAAA,CAAA;AAAA,MAEtD8D,EAAgIC,IAAA;AAAA,oBAAvG5C,EAAA;AAAA,sDAAAA,EAAU,QAAA6C;AAAA,QAAG,aAAa1C,EAAA;AAAA,QAAiB,UAAUtB,EAAM;AAAA,QAAU,OAAM;AAAA,MAAA;MAEpG2D,EAGM,OAHNM,IAGM;AAAA,QAFJC,EAAAP,EAAgE,OAAhEQ,IAAgE,MAAA,GAAA,GAAA;AAAA,eAAlDrD,EAAA,KAAe;AAAA,QAAA;UAC7B6C,EAAyF,OAAA;AAAA,UAA3D,OAAM;AAAA,UAAgC,SAAOR;AAAA,QAAA;cAA9DrC,EAAA,KAAe;AAAA,QAAA;;MAEdZ,EAAK,eAArBkE,EAoDWC,IAAA;AAAA;QApDkB,IAAG;AAAA,MAAA;QAEtBrE,EAAM,SAAI,eADlByD,EAgCM,OAAA;AAAA;mBA9BA;AAAA,UAAJ,KAAInD;AAAA,UACH,SAAO8C,CAAY;AAAA,UACpB,UAAS;AAAA,UACT,OAAM;AAAA,UACL,YAAUb;AAAA,UACV,2BAAD,MAAA;AAAA,UAAA,GAAW,CAAA,MAAA,CAAA;AAAA,QAAA;WAEX+B,EAAA,EAAA,GAAAb,EAkBWc,GAAA,MAAAC,EAlBuBC,EAAA9D,CAAA,GAAO,CAAvB0B,GAAMrB,MACtB0D,EAgBOC,EAAA,QAAA,QAAA;AAAA,iBAjBwC3D;AAAA,YAG5C,MAAAqB;AAAA,YACA,UAAW;AAAA,YACX,YAAaC,EAAeD,CAAI;AAAA,YAChC,WAAYnC,EAAK,gBAAgBc;AAAA,YACjC,SAAK4D,EAAA,CAAAZ,MAAO5B,EAAWC,CAAI,GAAA,CAAA,MAAA,CAAA;AAAA,UAAA,GAN9B,MAgBO;AAAA,YARLyB,EAOEe,IAAA;AAAA,cANC,QAAQxC;AAAA,cACR,aAAW;AAAA,cACX,eAAaC,EAAeD,CAAI;AAAA,cAChC,cAAYnC,EAAK,gBAAgBc;AAAA,cAClC,MAAK;AAAA,cACJ,SAAK4D,EAAA,CAAAZ,MAAO5B,EAAWC,CAAI,GAAA,CAAA,MAAA,CAAA;AAAA,YAAA;;UAKvBoC,EAAA9D,CAAA,EAAQ,WAAM,KAAzB2D,KAAAb,EAEM,OAFNqB,IAEM,CAAA,GAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,YADJpB,EAA2F,OAAA,EAAtF,OAAM,yCAAA,GAAyC,qCAAiC,EAAA;AAAA,UAAA;kBAI5E3D,EAAM,SAAI,eADvByD,EAiBM,OAAA;AAAA;mBAfA;AAAA,UAAJ,KAAInD;AAAA,UACH,SAAO8C,CAAY;AAAA,UACpB,UAAS;AAAA,UACT,OAAM;AAAA,UACL,YAAUb;AAAA,UACV,2BAAD,MAAA;AAAA,UAAA,GAAW,CAAA,MAAA,CAAA;AAAA,QAAA;WAEX+B,EAAA,EAAA,GAAAb,EAIWc,GAAA,MAAAC,EAJuBC,EAAA9D,CAAA,GAAO,CAAvB0B,GAAMrB,MACtB0D,EAEOC,EAAA,QAAA,QAAA;AAAA,iBAHwC3D;AAAA,YAC5B,MAAAqB;AAAA,YAAa,YAAaC,EAAeD,CAAI;AAAA,YAAI,WAAYnC,EAAK,gBAAgBc;AAAA,YAAQ,SAAK4D,EAAA,CAAAZ,MAAO5B,EAAWC,CAAI,GAAA,CAAA,MAAA,CAAA;AAAA,UAAA,GAAxI,MAEO;AAAA,YADLyB,EAAsIkB,IAAA;AAAA,cAA5H,QAAQ3C;AAAA,cAAO,eAAaC,EAAeD,CAAI;AAAA,cAAI,cAAYnC,EAAK,gBAAgBc;AAAA,cAAQ,SAAK4D,EAAA,CAAAZ,MAAO5B,EAAWC,CAAI,GAAA,CAAA,MAAA,CAAA;AAAA,YAAA;;UAG1HoC,EAAA9D,CAAA,EAAQ,WAAM,KAAzB2D,KAAAb,EAEM,OAFNwB,IAEM,CAAA,GAAAF,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,YADJpB,EAA2F,OAAA,EAAtF,OAAM,yCAAA,GAAyC,qCAAiC,EAAA;AAAA,UAAA;;;;;;"}

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

@@ -1,7 +1,7 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".resizable-input{position:relative;box-sizing:border-box;padding:0 8px;display:inline-block;max-width:100%;text-overflow:ellipsis;overflow:hidden}.resizable-input__size-span{font-family:inherit;white-space:pre;display:inline-block;font-size:inherit;line-height:inherit;box-sizing:border-box;position:relative;left:0;opacity:0;min-width:2px;-webkit-user-select:none;user-select:none;vertical-align:top}.resizable-input input{border:none;outline:none;height:100%;text-overflow:ellipsis;font-family:inherit;background:none;color:inherit;top:0;left:0;right:0;font-size:inherit;line-height:inherit;position:absolute;box-sizing:border-box}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
-import { defineComponent as p, computed as a, createElementBlock as u, openBlock as c, createElementVNode as o, normalizeStyle as m, toDisplayString as h, mergeProps as _ } from "vue";
+import { defineComponent as p, computed as o, createElementBlock as u, openBlock as c, createElementVNode as d, normalizeStyle as m, toDisplayString as h, mergeProps as _ } from "vue";
 
-const f = { class: "resizable-input" }, b = ["placeholder", "value", "disabled"], x = /* @__PURE__ */ p({
+const f = { class: "resizable-input" }, b = ["placeholder", "value", "disabled"], V = /* @__PURE__ */ p({
   __name: "ResizableInput",
   props: {
     modelValue: {},
@@ -11,33 +11,33 @@ const f = { class: "resizable-input" }, b = ["placeholder", "value", "disabled"]
     width: {}
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: d }) {
-    const t = s, n = d, i = a(() => {
+  setup(l, { emit: n }) {
+    const t = l, s = n, i = o(() => {
       var e;
       return t.placeholder ? t.placeholder : (e = t.modelValue) == null ? void 0 : e.replace('"', "");
-    }), l = a(() => {
+    }), a = o(() => {
       const e = {};
       return t.width && (e.width = t.width), t.maxWidth && (e.maxWidth = t.maxWidth), e;
     });
     function r(e) {
-      n("update:modelValue", e.target.value);
+      s("update:modelValue", e.target.value);
     }
     return (e, v) => (c(), u("div", f, [
-      o("span", {
-        style: m(l.value),
+      d("span", {
+        style: m(a.value),
         class: "resizable-input__size-span"
       }, h(i.value), 5),
-      o("input", _(e.$attrs, {
-        placeholder: e.placeholder,
+      d("input", _(e.$attrs, {
+        placeholder: l.placeholder,
         value: t.modelValue,
         disabled: t.disabled,
-        style: l.value,
+        style: a.value,
         onInput: r
       }), null, 16, b)
     ]));
   }
 });
 export {
-  x as default
+  V as default
 };
 //# sourceMappingURL=ResizableInput.vue.js.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,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;;;;;;;;;;;;;;;;"}
+{"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","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_mergeProps","_ctx"],"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;sBAIEC,EAAA,GAAAC,EAGM,OAHNC,GAGM;AAAA,MAFJC,EAA0E,QAAA;AAAA,QAAnE,SAAOP,EAAA,KAAM;AAAA,QAAE,OAAM;AAAA,MAAA,KAAgCH,EAAA,KAAI,GAAA,CAAA;AAAA,MAChEU,EAA8I,SAA9IC,EAA8IC,EAAA,QAAzH;AAAA,QAAG,aAAaf,EAAA;AAAA,QAAc,OAAOD,EAAM;AAAA,QAAa,UAAUA,EAAM;AAAA,QAAW,OAAOO,EAAA;AAAA,QAAS,SAAOE;AAAA,MAAA;;;;"}

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

@@ -1,9 +1,9 @@
 (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-right-radius:0;border-top-left-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.double-contour.top-right>div{border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0}.double-contour.bottom-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.double-contour.bottom-right>div{border-top-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0}.double-contour.middle>div{border-radius:0}
 .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;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 P, useTemplateRef as Z, reactive as ee, computed as p, unref as s, watch as oe, watchPostEffect as te, createElementBlock as u, openBlock as r, createElementVNode as d, createCommentVNode as f, normalizeClass as le, createBlock as m, createVNode as ne, withDirectives as re, vModelText as se, Fragment as g, renderList as b, withModifiers as C, withCtx as w, createTextVNode as q, toDisplayString as v, renderSlot as B } from "vue";
+import { defineComponent as X, useSlots as Y, ref as P, useTemplateRef as Z, reactive as ee, computed as f, unref as s, watch as oe, watchPostEffect as te, createElementBlock as d, openBlock as r, createElementVNode as c, createCommentVNode as m, normalizeClass as le, createBlock as v, createVNode as ne, withDirectives as re, vModelText as se, Fragment as b, renderList as C, withModifiers as O, withCtx as y, createTextVNode as q, toDisplayString as h, renderSlot as B } from "vue";
 import ie from "../../assets/images/required.svg.js";
 import { getErrorMessage as ae } from "../../helpers/error.js";
-import { deepEqual as O, deepIncludes as I } from "../../helpers/objects.js";
+import { deepEqual as V, deepIncludes as I } from "../../helpers/objects.js";
 import { normalizeListOptions as ue } from "../../helpers/utils.js";
 import de from "../../utils/DoubleContour.vue.js";
 
@@ -13,9 +13,9 @@ import fe from "../DropdownListItem.vue.js";
 import S from "../PlChip/PlChip.vue.js";
 import me from "../PlIcon24/PlIcon24.vue.js";
 import ve from "../PlSvg/PlSvg.vue.js";
-import _e from "../PlTooltip/PlTooltip.vue.js";
+import he from "../PlTooltip/PlTooltip.vue.js";
 
-const he = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = { class: "pl-dropdown-multi__field" }, ke = ["disabled", "placeholder"], ge = {
+const _e = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = { class: "pl-dropdown-multi__field" }, ke = ["disabled", "placeholder"], ge = {
   key: 0,
   class: "chips-container"
 }, be = { class: "pl-dropdown-multi__controls" }, Ce = { key: 0 }, Oe = { class: "pl-dropdown-multi__open-chips-container" }, Ve = {
@@ -24,13 +24,13 @@ const he = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
 }, $e = {
   key: 0,
   class: "pl-dropdown-multi__error"
-}, Ae = {
+}, xe = {
   key: 1,
   class: "pl-dropdown-multi__helper"
-}, Ee = {
+}, Ae = {
   name: "PlDropdownMulti"
 }, Ke = /* @__PURE__ */ X({
-  ...Ee,
+  ...Ae,
   props: {
     modelValue: { default: () => [] },
     label: { default: void 0 },
@@ -43,14 +43,14 @@ const he = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
     groupPosition: { default: void 0 }
   },
   emits: ["update:modelValue"],
-  setup(T, { emit: z }) {
-    const U = z, V = (e) => U("update:modelValue", e), x = Y(), i = T, c = P(), $ = P(), _ = Z("overlay"), t = ee({
+  setup(i, { emit: T }) {
+    const z = T, $ = (e) => z("update:modelValue", e), U = Y(), a = i, p = P(), x = P(), _ = Z("overlay"), t = ee({
       search: "",
       activeOption: -1,
       open: !1,
       optionsHeight: 0
-    }), h = p(() => Array.isArray(i.modelValue) ? i.modelValue : []), K = p(() => t.open && i.modelValue.length > 0 ? i.placeholder : i.modelValue.length > 0 ? "" : i.placeholder), A = p(() => ue(i.options ?? [])), E = p(() => h.value.map((e) => A.value.find((l) => O(l.value, e))).filter((e) => e !== void 0)), y = p(() => {
-      const e = s(h), l = s(A);
+    }), w = f(() => Array.isArray(a.modelValue) ? a.modelValue : []), K = f(() => t.open && a.modelValue.length > 0 ? a.placeholder : a.modelValue.length > 0 ? "" : a.placeholder), A = f(() => ue(a.options ?? [])), E = f(() => w.value.map((e) => A.value.find((l) => V(l.value, e))).filter((e) => e !== void 0)), k = f(() => {
+      const e = s(w), 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;
@@ -58,21 +58,21 @@ const he = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
         ...o,
         selected: I(e, o.value)
       }));
-    }), M = p(() => i.options === void 0), k = p(() => M.value ? !0 : i.disabled), H = p(() => k.value ? void 0 : "0"), j = () => {
+    }), M = f(() => a.options === void 0), g = f(() => M.value ? !0 : a.disabled), H = f(() => g.value ? void 0 : "0"), j = () => {
       t.activeOption = 0;
     }, R = (e) => {
       var o;
-      const l = s(h);
-      V(I(l, e) ? l.filter((n) => !O(n, e)) : [...l, e]), t.search = "", (o = c == null ? void 0 : c.value) == null || o.focus();
-    }, D = (e) => V(s(h).filter((l) => !O(l, e))), G = () => {
+      const l = s(w);
+      $(I(l, e) ? l.filter((n) => !V(n, e)) : [...l, e]), t.search = "", (o = p == null ? void 0 : p.value) == null || o.focus();
+    }, D = (e) => $(s(w).filter((l) => !V(l, e))), G = () => {
       var e;
-      return (e = $.value) == null ? void 0 : e.focus();
+      return (e = x.value) == null ? void 0 : e.focus();
     }, J = () => {
       t.open = !t.open, t.open || (t.search = "");
     }, F = (e) => {
-      var o, n, a;
+      var o, n, u;
       const l = e.relatedTarget;
-      !((o = c.value) != null && o.contains(l)) && !((a = (n = _.value) == null ? void 0 : n.listRef) != null && a.contains(l)) && (t.search = "", t.open = !1);
+      !((o = p.value) != null && o.contains(l)) && !((u = (n = _.value) == null ? void 0 : n.listRef) != null && u.contains(l)) && (t.search = "", t.open = !1);
     }, Q = (e) => {
       var L;
       const { open: l, activeOption: o } = t;
@@ -80,45 +80,45 @@ const he = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
         e.code === "Enter" && (t.open = !0);
         return;
       }
-      e.code === "Escape" && (t.open = !1, (L = c.value) == null || L.focus());
-      const n = s(y), { length: a } = n;
-      if (!a)
+      e.code === "Escape" && (t.open = !1, (L = p.value) == null || L.focus());
+      const n = s(k), { length: u } = n;
+      if (!u)
         return;
       ["ArrowDown", "ArrowUp", "Enter"].includes(e.code) && e.preventDefault(), e.code === "Enter" && R(n[o].value);
       const W = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
-      t.activeOption = Math.abs(o + W + a) % a, requestAnimationFrame(() => {
+      t.activeOption = Math.abs(o + W + u) % u, requestAnimationFrame(() => {
         var N;
         return (N = _.value) == null ? void 0 : N.scrollIntoActive();
       });
     };
-    return pe(c), oe(
-      () => i.modelValue,
+    return pe(p), oe(
+      () => a.modelValue,
       () => j(),
       { immediate: !0 }
     ), te(() => {
       var e;
       t.search, t.open && ((e = _.value) == null || e.scrollIntoActive());
-    }), (e, l) => (r(), u("div", {
+    }), (e, l) => (r(), d("div", {
       class: "pl-dropdown-multi__envelope",
       onClick: G
     }, [
-      d("div", {
+      c("div", {
         ref_key: "rootRef",
-        ref: c,
+        ref: p,
         tabindex: H.value,
-        class: le(["pl-dropdown-multi", { open: t.open, error: e.error, disabled: k.value }]),
+        class: le(["pl-dropdown-multi", { open: t.open, error: i.error, disabled: g.value }]),
         onKeydown: Q,
         onFocusout: F
       }, [
-        d("div", we, [
-          d("div", ye, [
-            re(d("input", {
+        c("div", we, [
+          c("div", ye, [
+            re(c("input", {
               ref_key: "input",
-              ref: $,
+              ref: x,
               "onUpdate:modelValue": l[0] || (l[0] = (o) => t.search = o),
               type: "text",
               tabindex: "-1",
-              disabled: k.value,
+              disabled: g.value,
               placeholder: K.value,
               spellcheck: "false",
               autocomplete: "chrome-off",
@@ -126,76 +126,76 @@ const he = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
             }, null, 40, ke), [
               [se, t.search]
             ]),
-            t.open ? f("", !0) : (r(), u("div", ge, [
-              (r(!0), u(g, null, b(E.value, (o, n) => (r(), m(s(S), {
+            t.open ? m("", !0) : (r(), d("div", ge, [
+              (r(!0), d(b, null, C(E.value, (o, n) => (r(), v(s(S), {
                 key: n,
                 closeable: "",
                 small: "",
-                onClick: l[2] || (l[2] = C((a) => t.open = !0, ["stop"])),
-                onClose: (a) => D(o.value)
+                onClick: l[2] || (l[2] = O((u) => t.open = !0, ["stop"])),
+                onClose: (u) => D(o.value)
               }, {
-                default: w(() => [
-                  q(v(o.label || o.value), 1)
+                default: y(() => [
+                  q(h(o.label || o.value), 1)
                 ]),
                 _: 2
               }, 1032, ["onClose"]))), 128))
             ])),
-            d("div", be, [
-              M.value ? (r(), m(s(me), {
+            c("div", be, [
+              M.value ? (r(), v(s(me), {
                 key: 0,
                 name: "loading"
-              })) : f("", !0),
+              })) : m("", !0),
               B(e.$slots, "append"),
-              d("div", {
+              c("div", {
                 class: "pl-dropdown-multi__arrow-wrapper",
-                onClick: C(J, ["stop"])
-              }, l[3] || (l[3] = [
-                d("div", { class: "arrow-icon arrow-icon-default" }, null, -1)
-              ]))
+                onClick: O(J, ["stop"])
+              }, [...l[3] || (l[3] = [
+                c("div", { class: "arrow-icon arrow-icon-default" }, null, -1)
+              ])])
             ])
           ]),
-          e.label ? (r(), u("label", Ce, [
-            e.required ? (r(), m(s(ve), {
+          i.label ? (r(), d("label", Ce, [
+            i.required ? (r(), v(s(ve), {
               key: 0,
               uri: s(ie)
-            }, null, 8, ["uri"])) : f("", !0),
-            d("span", null, v(e.label), 1),
-            s(x).tooltip ? (r(), m(s(_e), {
+            }, null, 8, ["uri"])) : m("", !0),
+            c("span", null, h(i.label), 1),
+            s(U).tooltip ? (r(), v(s(he), {
               key: 1,
               class: "info",
               position: "top"
             }, {
-              tooltip: w(() => [
+              tooltip: y(() => [
                 B(e.$slots, "tooltip")
               ]),
               _: 3
-            })) : f("", !0)
-          ])) : f("", !0),
-          t.open ? (r(), m(ce, {
+            })) : m("", !0)
+          ])) : m("", !0),
+          t.open ? (r(), v(ce, {
             key: 1,
             ref_key: "overlay",
             ref: _,
-            root: c.value,
+            root: p.value,
             class: "pl-dropdown-multi__options",
             gap: 5,
             tabindex: "-1",
             onFocusout: F
           }, {
-            default: w(() => [
-              d("div", Oe, [
-                (r(!0), u(g, null, b(E.value, (o, n) => (r(), m(s(S), {
+            default: y(() => [
+              c("div", Oe, [
+                (r(!0), d(b, null, C(E.value, (o, n) => (r(), v(s(S), {
                   key: n,
                   closeable: "",
                   small: "",
-                  onClose: (a) => D(o.value)
+                  onClose: (u) => D(o.value)
                 }, {
-                  default: w(() => [
-                    q(v(o.label || o.value), 1)
+                  default: y(() => [
+                    q(h(o.label || o.value), 1)
                   ]),
                   _: 2
                 }, 1032, ["onClose"]))), 128))
               ]),
-              (r(!0), u(g, null, b(y.value, (o, n) => (r(), m(fe, {
+              (r(!0), d(b, null, C(k.value, (o, n) => (r(), v(fe, {
                 key: n,
                 option: o,
                 "text-item": "text",
@@ -203,19 +203,19 @@ const he = ["tabindex"], we = { class: "pl-dropdown-multi__container" }, ye = {
                 "is-hovered": t.activeOption == n,
                 size: "medium",
                 "use-checkbox": "",
-                onClick: C((a) => R(o.value), ["stop"])
+                onClick: O((u) => R(o.value), ["stop"])
               }, null, 8, ["option", "is-selected", "is-hovered", "onClick"]))), 128)),
-              y.value.length ? f("", !0) : (r(), u("div", Ve, "Nothing found"))
+              k.value.length ? m("", !0) : (r(), d("div", Ve, "Nothing found"))
             ]),
             _: 1
-          }, 8, ["root"])) : f("", !0),
+          }, 8, ["root"])) : m("", !0),
           ne(de, {
             class: "pl-dropdown-multi__contour",
-            "group-position": e.groupPosition
+            "group-position": i.groupPosition
           }, null, 8, ["group-position"])
         ])
-      ], 42, he),
-      e.error ? (r(), u("div", $e, v(s(ae)(e.error)), 1)) : e.helper ? (r(), u("div", Ae, v(e.helper), 1)) : f("", !0)
+      ], 42, _e),
+      i.error ? (r(), d("div", $e, h(s(ae)(i.error)), 1)) : i.helper ? (r(), d("div", xe, h(i.helper), 1)) : m("", !0)
     ]));
   }
 });

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 { computed, reactive, ref, unref, useSlots, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport SvgRequired from '../../assets/images/required.svg?raw';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport { deepEqual, deepIncludes } from '../../helpers/objects';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport type { ListOption } from '../../types';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport DropdownOverlay from '../../utils/DropdownOverlay/DropdownOverlay.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport { PlChip } from '../PlChip';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { PlSvg } from '../PlSvg';\nimport { PlTooltip } from '../PlTooltip';\nimport './pl-dropdown-multi.scss';\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit('update:modelValue', v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: M[];\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Makes some of corners not rounded\n     * */\n    groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';\n  }>(),\n  {\n    modelValue: () => [],\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    placeholder: '...',\n    required: false,\n    disabled: false,\n    options: undefined,\n    groupPosition: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlay = useTemplateRef('overlay');\n\nconst data = reactive({\n  search: '',\n  activeOption: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n  if (data.open && props.modelValue.length > 0) {\n    return props.placeholder;\n  }\n\n  return props.modelValue.length > 0 ? '' : props.placeholder;\n});\n\nconst normalizedOptionsRef = computed(() => normalizeListOptions(props.options ?? []));\n\nconst selectedOptionsRef = computed(() => {\n  return selectedValuesRef.value.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          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n          <span>{{ label }}</span>\n          <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <DropdownOverlay\n          v-if=\"data.open\"\n          ref=\"overlay\"\n          :root=\"rootRef\"\n          class=\"pl-dropdown-multi__options\"\n          :gap=\"5\"\n          tabindex=\"-1\"\n          @focusout=\"onFocusOut\"\n        >\n          <div class=\"pl-dropdown-multi__open-chips-container\">\n            <PlChip 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\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"error\" class=\"pl-dropdown-multi__error\">{{ getErrorMessage(error) }}</div>\n    <div v-else-if=\"helper\" class=\"pl-dropdown-multi__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"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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"}
+{"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 { computed, reactive, ref, unref, useSlots, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport SvgRequired from '../../assets/images/required.svg?raw';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport { deepEqual, deepIncludes } from '../../helpers/objects';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport type { ListOption } from '../../types';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport DropdownOverlay from '../../utils/DropdownOverlay/DropdownOverlay.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport { PlChip } from '../PlChip';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { PlSvg } from '../PlSvg';\nimport { PlTooltip } from '../PlTooltip';\nimport './pl-dropdown-multi.scss';\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit('update:modelValue', v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: M[];\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Makes some of corners not rounded\n     * */\n    groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';\n  }>(),\n  {\n    modelValue: () => [],\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    placeholder: '...',\n    required: false,\n    disabled: false,\n    options: undefined,\n    groupPosition: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlay = useTemplateRef('overlay');\n\nconst data = reactive({\n  search: '',\n  activeOption: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n  if (data.open && props.modelValue.length > 0) {\n    return props.placeholder;\n  }\n\n  return props.modelValue.length > 0 ? '' : props.placeholder;\n});\n\nconst normalizedOptionsRef = computed(() => normalizeListOptions(props.options ?? []));\n\nconst selectedOptionsRef = computed(() => {\n  return selectedValuesRef.value.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          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n          <span>{{ label }}</span>\n          <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <DropdownOverlay\n          v-if=\"data.open\"\n          ref=\"overlay\"\n          :root=\"rootRef\"\n          class=\"pl-dropdown-multi__options\"\n          :gap=\"5\"\n          tabindex=\"-1\"\n          @focusout=\"onFocusOut\"\n        >\n          <div class=\"pl-dropdown-multi__open-chips-container\">\n            <PlChip 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\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"error\" class=\"pl-dropdown-multi__error\">{{ getErrorMessage(error) }}</div>\n    <div v-else-if=\"helper\" class=\"pl-dropdown-multi__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"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","_createElementBlock","_createElementVNode","_normalizeClass","_hoisted_2","_hoisted_3","_cache","$event","_vModelText","_openBlock","_hoisted_5","_Fragment","_renderList","i","_createBlock","_unref","PlChip","_withModifiers","_createTextVNode","_toDisplayString","_hoisted_6","PlMaskIcon24","_renderSlot","_ctx","_hoisted_7","PlSvg","SvgRequired","PlTooltip","DropdownOverlay","_hoisted_8","item","index","DropdownListItem","_hoisted_9","_createVNode","DoubleContour","_hoisted_10","getErrorMessage","_hoisted_11"],"mappings":"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"}

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

@@ -61,10 +61,10 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     label: string;
     error: undefined;
     modelValue: ModelRef[] | undefined;
+    placeholder: string;
     required: boolean;
     disabled: boolean;
     helper: string;
-    placeholder: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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,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;;;;;;;;;;;;;;;"}
+{"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","_createBlock","PlDropdownMulti","_mergeProps","_cache","$event","$emit","_unref","_renderSlot","_ctx"],"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;2BAKFC,EAQkBC,GARlBC,EAQkBR,GAPH;AAAA,MACZ,SAASE,EAAA;AAAA,MACT,uBAAkBO,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEC,EAAAA,MAAK,qBAAsBD,CAAM;AAAA,IAAA;MAEtCE,EAAAd,CAAA,EAAM;cAAU;AAAA,cAC9B,MAAuB;AAAA,UAAvBe,EAAuBC,EAAA,QAAA,SAAA;AAAA,QAAA;;;;;;"}