@milaboratories/uikit 2.4.2 → 2.4.3

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

@@ -1 +1 @@
-{"version":3,"file":"HScroll.vue.js","sources":["../../src/components/HScroll.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, ref, unref } from 'vue';\nimport { useEventListener } from '../composition/useEventListener';\nimport { eventListener } from '../helpers/dom';\n\nconst emit = defineEmits(['update:scrollLeft']);\n\nconst props = defineProps<{\n  scrollLeft: number;\n  clientWidth: number;\n  scrollWidth: number;\n}>();\n\nconst scrollRef = ref<EventTarget>();\n\nconst ratioRef = computed(() => props.clientWidth / (props.scrollWidth || 1));\n\nconst visibleRef = computed(() => {\n  return ratioRef.value < 1;\n});\n\nconst scrollbarStyle = computed(() => {\n  const ratio = unref(ratioRef);\n  return {\n    left: props.scrollLeft * ratio + 'px',\n    width: Math.floor(props.clientWidth * ratio) + 'px',\n  };\n});\n\nuseEventListener(scrollRef, 'pointerdown', (down: PointerEvent) => {\n  const s = {\n    clientX: down.clientX,\n  };\n\n  const update = (e: MouseEvent) => {\n    const dy = (e.clientX - s.clientX) / ratioRef.value;\n    emit('update:scrollLeft', props.scrollLeft + dy);\n    s.clientX = e.clientX;\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const removePointerMove = eventListener(document as any, 'mousemove', update);\n\n  ['mouseup', 'pointercancel'].forEach((eventType) => {\n    document.addEventListener(eventType, removePointerMove, { once: true });\n  });\n});\n</script>\n\n<template>\n  <div v-if=\"visibleRef\" ref=\"scrollRef\" class=\"h-scroll\">\n    <div class=\"h-scroll__scrollbar\" :style=\"scrollbarStyle\" />\n  </div>\n</template>\n"],"names":["emit","__emit","props","__props","scrollRef","ref","ratioRef","computed","visibleRef","scrollbarStyle","ratio","unref","useEventListener","down","s","removePointerMove","eventListener","e","dy","eventType"],"mappings":";;;;;;;;;;;;AAKA,UAAMA,IAAOC,GAEPC,IAAQC,GAMRC,IAAYC,EAAiB,GAE7BC,IAAWC,EAAS,MAAML,EAAM,eAAeA,EAAM,eAAe,EAAE,GAEtEM,IAAaD,EAAS,MACnBD,EAAS,QAAQ,CACzB,GAEKG,IAAiBF,EAAS,MAAM;AAC9B,YAAAG,IAAQC,EAAML,CAAQ;AACrB,aAAA;AAAA,QACL,MAAMJ,EAAM,aAAaQ,IAAQ;AAAA,QACjC,OAAO,KAAK,MAAMR,EAAM,cAAcQ,CAAK,IAAI;AAAA,MACjD;AAAA,IAAA,CACD;AAEgB,WAAAE,EAAAR,GAAW,eAAe,CAACS,MAAuB;AACjE,YAAMC,IAAI;AAAA,QACR,SAASD,EAAK;AAAA,MAChB,GASME,IAAoBC,EAAc,UAAiB,aAP1C,CAACC,MAAkB;AAChC,cAAMC,KAAMD,EAAE,UAAUH,EAAE,WAAWR,EAAS;AACzC,QAAAN,EAAA,qBAAqBE,EAAM,aAAagB,CAAE,GAC/CJ,EAAE,UAAUG,EAAE;AAAA,MAChB,CAG4E;AAE5E,OAAC,WAAW,eAAe,EAAE,QAAQ,CAACE,MAAc;AAClD,iBAAS,iBAAiBA,GAAWJ,GAAmB,EAAE,MAAM,IAAM;AAAA,MAAA,CACvE;AAAA,IAAA,CACF;;;;;;;;;;;;;"}
+{"version":3,"file":"HScroll.vue.js","sources":["../../src/components/HScroll.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, ref, unref } from 'vue';\nimport { useEventListener } from '../composition/useEventListener';\nimport { eventListener } from '../helpers/dom';\n\nconst emit = defineEmits(['update:scrollLeft']);\n\nconst props = defineProps<{\n  scrollLeft: number;\n  clientWidth: number;\n  scrollWidth: number;\n}>();\n\nconst scrollRef = ref<EventTarget>();\n\nconst ratioRef = computed(() => props.clientWidth / (props.scrollWidth || 1));\n\nconst visibleRef = computed(() => {\n  return ratioRef.value < 1;\n});\n\nconst scrollbarStyle = computed(() => {\n  const ratio = unref(ratioRef);\n  return {\n    left: props.scrollLeft * ratio + 'px',\n    width: Math.floor(props.clientWidth * ratio) + 'px',\n  };\n});\n\nuseEventListener(scrollRef, 'pointerdown', (down: PointerEvent) => {\n  const s = {\n    clientX: down.clientX,\n  };\n\n  const update = (e: MouseEvent) => {\n    const dy = (e.clientX - s.clientX) / ratioRef.value;\n    emit('update:scrollLeft', props.scrollLeft + dy);\n    s.clientX = e.clientX;\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const removePointerMove = eventListener(document as any, 'mousemove', update);\n\n  ['mouseup', 'pointercancel'].forEach((eventType) => {\n    document.addEventListener(eventType, removePointerMove, { once: true });\n  });\n});\n</script>\n\n<template>\n  <div v-if=\"visibleRef\" ref=\"scrollRef\" class=\"h-scroll\">\n    <div class=\"h-scroll__scrollbar\" :style=\"scrollbarStyle\" />\n  </div>\n</template>\n"],"names":["emit","__emit","props","__props","scrollRef","ref","ratioRef","computed","visibleRef","scrollbarStyle","ratio","unref","useEventListener","down","s","removePointerMove","eventListener","e","dy","eventType"],"mappings":";;;;;;;;;;;;AAKA,UAAMA,IAAOC,GAEPC,IAAQC,GAMRC,IAAYC,EAAA,GAEZC,IAAWC,EAAS,MAAML,EAAM,eAAeA,EAAM,eAAe,EAAE,GAEtEM,IAAaD,EAAS,MACnBD,EAAS,QAAQ,CACzB,GAEKG,IAAiBF,EAAS,MAAM;AACpC,YAAMG,IAAQC,EAAML,CAAQ;AAC5B,aAAO;AAAA,QACL,MAAMJ,EAAM,aAAaQ,IAAQ;AAAA,QACjC,OAAO,KAAK,MAAMR,EAAM,cAAcQ,CAAK,IAAI;AAAA,MAAA;AAAA,IAEnD,CAAC;AAED,WAAAE,EAAiBR,GAAW,eAAe,CAACS,MAAuB;AACjE,YAAMC,IAAI;AAAA,QACR,SAASD,EAAK;AAAA,MAAA,GAUVE,IAAoBC,EAAc,UAAiB,aAP1C,CAACC,MAAkB;AAChC,cAAMC,KAAMD,EAAE,UAAUH,EAAE,WAAWR,EAAS;AAC9C,QAAAN,EAAK,qBAAqBE,EAAM,aAAagB,CAAE,GAC/CJ,EAAE,UAAUG,EAAE;AAAA,MAChB,CAG4E;AAE5E,OAAC,WAAW,eAAe,EAAE,QAAQ,CAACE,MAAc;AAClD,iBAAS,iBAAiBA,GAAWJ,GAAmB,EAAE,MAAM,IAAM;AAAA,MACxE,CAAC;AAAA,IACH,CAAC;;;;;;;;;;;;;"}

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

@@ -12,4 +12,3 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     separator: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;
-//# sourceMappingURL=InputRange.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputRange.vue.js","sources":["../../src/components/InputRange.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, reactive, ref, watch } from 'vue';\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: [number, number];\n    separator?: string;\n  }>(),\n  {\n    separator: '-',\n  },\n);\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', val: [number, number]): void;\n  (e: 'change', val: [number, number]): void;\n}>();\n\nconst data = reactive({\n  left: props.modelValue[0],\n  right: props.modelValue[1],\n});\n\nconst isFocused = ref(false);\n\nconst classes = computed(() => (isFocused.value ? 'ui-input-range-focused' : 'ui-input-range-focused'));\n\nconst valuesModel = computed({\n  get() {\n    return {\n      left: Math.min(...props.modelValue), // dangerous....\n      right: Math.max(...props.modelValue),\n    };\n  },\n  set() {},\n});\n\nwatch(\n  () => valuesModel.value,\n  (value) => (data.left = value.left) && (data.right = value.right),\n);\n\n// watch(\n//   () => props.modelValue,\n//   (value: [number, number]) => {\n//     console.log('model value updated');\n//     (data.left = value[0]), (data.right = value[1]);\n//   },\n// );\n\nfunction updateModel() {\n  emit('update:modelValue', [+data.left, +data.right]);\n  emit('change', [+data.left, +data.right]);\n}\n\nfunction validateInput(isLeft: boolean, event: Event) {\n  const value: string = (event.target as HTMLInputElement).value;\n  const result = /^[0-9]{0,2}$/.test(value);\n  // if there is more than 3 digits we cut last one\n  if (!result) {\n    if (isLeft) {\n      data.left = +value.slice(0, value.length - 1);\n    } else {\n      data.right = +value.slice(0, value.length - 1);\n    }\n  } else {\n    if (isLeft) {\n      data.left = +value;\n    } else {\n      data.right = +value;\n    }\n  }\n}\n</script>\n\n<template>\n  <!-- {{ data }} -->\n  <div :class=\"classes\" class=\"ui-input-range\" v-bind=\"$attrs\">\n    <input\n      v-model=\"valuesModel.left\"\n      class=\"text-s\"\n      type=\"text\"\n      @change=\"updateModel\"\n      @focus=\"isFocused = true\"\n      @focusout=\"isFocused = false\"\n      @input=\"validateInput(true, $event)\"\n    />\n    <div class=\"ui-input-range__separator\">{{ props.separator }}</div>\n    <input\n      v-model=\"valuesModel.right\"\n      class=\"text-s\"\n      type=\"text\"\n      @change=\"updateModel\"\n      @focus=\"isFocused = true\"\n      @focusout=\"isFocused = false\"\n      @input=\"validateInput(false, $event)\"\n    />\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","data","reactive","isFocused","ref","classes","computed","valuesModel","watch","value","updateModel","validateInput","isLeft","event"],"mappings":";;;;;;;;;AAGA,UAAMA,IAAQC,GAURC,IAAOC,GAKPC,IAAOC,EAAS;AAAA,MACpB,MAAML,EAAM,WAAW,CAAC;AAAA,MACxB,OAAOA,EAAM,WAAW,CAAC;AAAA,IAAA,CAC1B,GAEKM,IAAYC,EAAI,EAAK,GAErBC,IAAUC,EAAS,OAAOH,EAAU,OAAQ,yBAAoD,GAEhGI,IAAcD,EAAS;AAAA,MAC3B,MAAM;AACG,eAAA;AAAA,UACL,MAAM,KAAK,IAAI,GAAGT,EAAM,UAAU;AAAA;AAAA,UAClC,OAAO,KAAK,IAAI,GAAGA,EAAM,UAAU;AAAA,QACrC;AAAA,MACF;AAAA,MACA,MAAM;AAAA,MAAA;AAAA,IAAC,CACR;AAED,IAAAW;AAAA,MACE,MAAMD,EAAY;AAAA,MAClB,CAACE,OAAWR,EAAK,OAAOQ,EAAM,UAAUR,EAAK,QAAQQ,EAAM;AAAA,IAC7D;AAUA,aAASC,IAAc;AAChB,MAAAX,EAAA,qBAAqB,CAAC,CAACE,EAAK,MAAM,CAACA,EAAK,KAAK,CAAC,GAC9CF,EAAA,UAAU,CAAC,CAACE,EAAK,MAAM,CAACA,EAAK,KAAK,CAAC;AAAA,IAAA;AAGjC,aAAAU,EAAcC,GAAiBC,GAAc;AAC9C,YAAAJ,IAAiBI,EAAM,OAA4B;AAGzD,MAFe,eAAe,KAAKJ,CAAK,IASlCG,IACFX,EAAK,OAAO,CAACQ,IAEbR,EAAK,QAAQ,CAACQ,IATZG,IACFX,EAAK,OAAO,CAACQ,EAAM,MAAM,GAAGA,EAAM,SAAS,CAAC,IAE5CR,EAAK,QAAQ,CAACQ,EAAM,MAAM,GAAGA,EAAM,SAAS,CAAC;AAAA,IAQjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"InputRange.vue.js","sources":["../../src/components/InputRange.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, reactive, ref, watch } from 'vue';\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: [number, number];\n    separator?: string;\n  }>(),\n  {\n    separator: '-',\n  },\n);\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', val: [number, number]): void;\n  (e: 'change', val: [number, number]): void;\n}>();\n\nconst data = reactive({\n  left: props.modelValue[0],\n  right: props.modelValue[1],\n});\n\nconst isFocused = ref(false);\n\nconst classes = computed(() => (isFocused.value ? 'ui-input-range-focused' : 'ui-input-range-focused'));\n\nconst valuesModel = computed({\n  get() {\n    return {\n      left: Math.min(...props.modelValue), // dangerous....\n      right: Math.max(...props.modelValue),\n    };\n  },\n  set() {},\n});\n\nwatch(\n  () => valuesModel.value,\n  (value) => (data.left = value.left) && (data.right = value.right),\n);\n\n// watch(\n//   () => props.modelValue,\n//   (value: [number, number]) => {\n//     console.log('model value updated');\n//     (data.left = value[0]), (data.right = value[1]);\n//   },\n// );\n\nfunction updateModel() {\n  emit('update:modelValue', [+data.left, +data.right]);\n  emit('change', [+data.left, +data.right]);\n}\n\nfunction validateInput(isLeft: boolean, event: Event) {\n  const value: string = (event.target as HTMLInputElement).value;\n  const result = /^[0-9]{0,2}$/.test(value);\n  // if there is more than 3 digits we cut last one\n  if (!result) {\n    if (isLeft) {\n      data.left = +value.slice(0, value.length - 1);\n    } else {\n      data.right = +value.slice(0, value.length - 1);\n    }\n  } else {\n    if (isLeft) {\n      data.left = +value;\n    } else {\n      data.right = +value;\n    }\n  }\n}\n</script>\n\n<template>\n  <!-- {{ data }} -->\n  <div :class=\"classes\" class=\"ui-input-range\" v-bind=\"$attrs\">\n    <input\n      v-model=\"valuesModel.left\"\n      class=\"text-s\"\n      type=\"text\"\n      @change=\"updateModel\"\n      @focus=\"isFocused = true\"\n      @focusout=\"isFocused = false\"\n      @input=\"validateInput(true, $event)\"\n    />\n    <div class=\"ui-input-range__separator\">{{ props.separator }}</div>\n    <input\n      v-model=\"valuesModel.right\"\n      class=\"text-s\"\n      type=\"text\"\n      @change=\"updateModel\"\n      @focus=\"isFocused = true\"\n      @focusout=\"isFocused = false\"\n      @input=\"validateInput(false, $event)\"\n    />\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","data","reactive","isFocused","ref","classes","computed","valuesModel","watch","value","updateModel","validateInput","isLeft","event"],"mappings":";;;;;;;;;AAGA,UAAMA,IAAQC,GAURC,IAAOC,GAKPC,IAAOC,EAAS;AAAA,MACpB,MAAML,EAAM,WAAW,CAAC;AAAA,MACxB,OAAOA,EAAM,WAAW,CAAC;AAAA,IAAA,CAC1B,GAEKM,IAAYC,EAAI,EAAK,GAErBC,IAAUC,EAAS,OAAOH,EAAU,OAAQ,yBAAoD,GAEhGI,IAAcD,EAAS;AAAA,MAC3B,MAAM;AACJ,eAAO;AAAA,UACL,MAAM,KAAK,IAAI,GAAGT,EAAM,UAAU;AAAA;AAAA,UAClC,OAAO,KAAK,IAAI,GAAGA,EAAM,UAAU;AAAA,QAAA;AAAA,MAEvC;AAAA,MACA,MAAM;AAAA,MAAC;AAAA,IAAA,CACR;AAED,IAAAW;AAAA,MACE,MAAMD,EAAY;AAAA,MAClB,CAACE,OAAWR,EAAK,OAAOQ,EAAM,UAAUR,EAAK,QAAQQ,EAAM;AAAA,IAAA;AAW7D,aAASC,IAAc;AACrB,MAAAX,EAAK,qBAAqB,CAAC,CAACE,EAAK,MAAM,CAACA,EAAK,KAAK,CAAC,GACnDF,EAAK,UAAU,CAAC,CAACE,EAAK,MAAM,CAACA,EAAK,KAAK,CAAC;AAAA,IAC1C;AAEA,aAASU,EAAcC,GAAiBC,GAAc;AACpD,YAAMJ,IAAiBI,EAAM,OAA4B;AAGzD,MAFe,eAAe,KAAKJ,CAAK,IASlCG,IACFX,EAAK,OAAO,CAACQ,IAEbR,EAAK,QAAQ,CAACQ,IATZG,IACFX,EAAK,OAAO,CAACQ,EAAM,MAAM,GAAGA,EAAM,SAAS,CAAC,IAE5CR,EAAK,QAAQ,CAACQ,EAAM,MAAM,GAAGA,EAAM,SAAS,CAAC;AAAA,IASnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

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

package/dist/components/LongText.vue.js

@@ -1,17 +1,17 @@
-import { defineComponent as d, useCssVars as f, computed as l, ref as n, createElementBlock as v, openBlock as _, mergeProps as E, createElementVNode as r, normalizeClass as h, renderSlot as b } from "vue";
-import { debounce as C, notEmpty as H } from "../lib/util/helpers/dist/index.js";
+import { defineComponent as d, useCssVars as f, computed as l, ref as s, createElementBlock as v, openBlock as _, mergeProps as E, createElementVNode as r, normalizeClass as h, renderSlot as b } from "vue";
+import { debounce as H, notEmpty as g } from "@milaboratories/helpers";
 const T = /* @__PURE__ */ d({
   __name: "LongText",
-  setup(g) {
+  setup(k) {
     f((e) => ({
       "5deba9de": c.value
     }));
-    const t = n(!1), s = n(), a = n(!1), u = l(() => a.value && t.value ? "ui-lt-animate" : ""), o = C((e) => a.value = e, 500), c = l(() => {
+    const t = s(!1), n = s(), a = s(!1), u = l(() => a.value && t.value ? "ui-lt-animate" : ""), o = H((e) => a.value = e, 500), c = l(() => {
       var e;
-      return s.value ? `${((e = s.value) == null ? void 0 : e.innerHTML.length) * 0.4}s` : "5s";
+      return n.value ? `${((e = n.value) == null ? void 0 : e.innerHTML.length) * 0.4}s` : "5s";
     });
     function i() {
-      const e = H(s.value, "span cannot be empty");
+      const e = g(n.value, "span cannot be empty");
       t.value = e.clientWidth < e.scrollWidth;
     }
     function m() {
@@ -20,14 +20,14 @@ const T = /* @__PURE__ */ d({
     function p() {
       o(!1);
     }
-    return (e, k) => (_(), v("div", E(e.$attrs, { class: "ui-lt-container" }), [
+    return (e, y) => (_(), v("div", E(e.$attrs, { class: "ui-lt-container" }), [
       r("span", {
         onMouseover: m,
         onMouseleave: p
       }, [
         r("span", {
           ref_key: "span",
-          ref: s,
+          ref: n,
           class: h(u.value)
         }, [
           b(e.$slots, "default")

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

@@ -1 +1 @@
-{"version":3,"file":"LongText.vue.js","sources":["../../src/components/LongText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport { debounce, notEmpty } from '@milaboratories/helpers';\n\nconst hasElementEllipsis = ref(false);\n\nconst span = ref<HTMLElement>();\n\nconst isHovered = ref(false);\n\nconst classes = computed(() => (isHovered.value && hasElementEllipsis.value ? 'ui-lt-animate' : ''));\n\nconst updateStatus = debounce((val: boolean) => (isHovered.value = val), 500);\n\nconst animationTime = computed(() => {\n  return span.value ? `${span.value?.innerHTML.length * 0.4}s` : '5s';\n});\n\nfunction isEllipsisEnabled() {\n  const el = notEmpty(span.value, 'span cannot be empty');\n  hasElementEllipsis.value = el.clientWidth < el.scrollWidth;\n}\n\nfunction mouseoverHandler() {\n  isEllipsisEnabled();\n  updateStatus(true);\n}\n\nfunction mouseoutHandler() {\n  updateStatus(false);\n}\n</script>\n\n<template>\n  <div v-bind=\"$attrs\" class=\"ui-lt-container\">\n    <span @mouseover=\"mouseoverHandler\" @mouseleave=\"mouseoutHandler\">\n      <span ref=\"span\" :class=\"classes\"><slot /></span>\n    </span>\n  </div>\n</template>\n\n<style lang=\"scss\">\n.ui-lt-container {\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  position: relative;\n  border-radius: 5px;\n\n  span {\n    display: inline-block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: 100%;\n    vertical-align: bottom;\n    pointer-events: all !important;\n  }\n\n  .ui-lt-animate {\n    position: relative;\n    animation: left-to-right v-bind(animationTime) infinite alternate linear;\n\n    overflow: unset !important;\n    text-overflow: unset !important;\n    width: fit-content !important;\n  }\n}\n\n@keyframes left-to-right {\n  0% {\n    transform: translateX(0%);\n    left: 0%;\n  }\n\n  100% {\n    transform: translateX(-101%);\n    left: 101%;\n  }\n}\n</style>\n"],"names":["hasElementEllipsis","ref","span","isHovered","classes","computed","updateStatus","debounce","val","animationTime","_a","isEllipsisEnabled","el","notEmpty","mouseoverHandler","mouseoutHandler"],"mappings":";;;;;;;;AAIM,UAAAA,IAAqBC,EAAI,EAAK,GAE9BC,IAAOD,EAAiB,GAExBE,IAAYF,EAAI,EAAK,GAErBG,IAAUC,EAAS,MAAOF,EAAU,SAASH,EAAmB,QAAQ,kBAAkB,EAAG,GAE7FM,IAAeC,EAAS,CAACC,MAAkBL,EAAU,QAAQK,GAAM,GAAG,GAEtEC,IAAgBJ,EAAS,MAAM;;AAC5B,aAAAH,EAAK,QAAQ,KAAGQ,IAAAR,EAAK,UAAL,gBAAAQ,EAAY,UAAU,UAAS,GAAG,MAAM;AAAA,IAAA,CAChE;AAED,aAASC,IAAoB;AAC3B,YAAMC,IAAKC,EAASX,EAAK,OAAO,sBAAsB;AACnC,MAAAF,EAAA,QAAQY,EAAG,cAAcA,EAAG;AAAA,IAAA;AAGjD,aAASE,IAAmB;AACR,MAAAH,EAAA,GAClBL,EAAa,EAAI;AAAA,IAAA;AAGnB,aAASS,IAAkB;AACzB,MAAAT,EAAa,EAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"LongText.vue.js","sources":["../../src/components/LongText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport { debounce, notEmpty } from '@milaboratories/helpers';\n\nconst hasElementEllipsis = ref(false);\n\nconst span = ref<HTMLElement>();\n\nconst isHovered = ref(false);\n\nconst classes = computed(() => (isHovered.value && hasElementEllipsis.value ? 'ui-lt-animate' : ''));\n\nconst updateStatus = debounce((val: boolean) => (isHovered.value = val), 500);\n\nconst animationTime = computed(() => {\n  return span.value ? `${span.value?.innerHTML.length * 0.4}s` : '5s';\n});\n\nfunction isEllipsisEnabled() {\n  const el = notEmpty(span.value, 'span cannot be empty');\n  hasElementEllipsis.value = el.clientWidth < el.scrollWidth;\n}\n\nfunction mouseoverHandler() {\n  isEllipsisEnabled();\n  updateStatus(true);\n}\n\nfunction mouseoutHandler() {\n  updateStatus(false);\n}\n</script>\n\n<template>\n  <div v-bind=\"$attrs\" class=\"ui-lt-container\">\n    <span @mouseover=\"mouseoverHandler\" @mouseleave=\"mouseoutHandler\">\n      <span ref=\"span\" :class=\"classes\"><slot /></span>\n    </span>\n  </div>\n</template>\n\n<style lang=\"scss\">\n.ui-lt-container {\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  position: relative;\n  border-radius: 5px;\n\n  span {\n    display: inline-block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: 100%;\n    vertical-align: bottom;\n    pointer-events: all !important;\n  }\n\n  .ui-lt-animate {\n    position: relative;\n    animation: left-to-right v-bind(animationTime) infinite alternate linear;\n\n    overflow: unset !important;\n    text-overflow: unset !important;\n    width: fit-content !important;\n  }\n}\n\n@keyframes left-to-right {\n  0% {\n    transform: translateX(0%);\n    left: 0%;\n  }\n\n  100% {\n    transform: translateX(-101%);\n    left: 101%;\n  }\n}\n</style>\n"],"names":["hasElementEllipsis","ref","span","isHovered","classes","computed","updateStatus","debounce","val","animationTime","_a","isEllipsisEnabled","el","notEmpty","mouseoverHandler","mouseoutHandler"],"mappings":";;;;;;;;AAIA,UAAMA,IAAqBC,EAAI,EAAK,GAE9BC,IAAOD,EAAA,GAEPE,IAAYF,EAAI,EAAK,GAErBG,IAAUC,EAAS,MAAOF,EAAU,SAASH,EAAmB,QAAQ,kBAAkB,EAAG,GAE7FM,IAAeC,EAAS,CAACC,MAAkBL,EAAU,QAAQK,GAAM,GAAG,GAEtEC,IAAgBJ,EAAS,MAAM;;AACnC,aAAOH,EAAK,QAAQ,KAAGQ,IAAAR,EAAK,UAAL,gBAAAQ,EAAY,UAAU,UAAS,GAAG,MAAM;AAAA,IACjE,CAAC;AAED,aAASC,IAAoB;AAC3B,YAAMC,IAAKC,EAASX,EAAK,OAAO,sBAAsB;AACtD,MAAAF,EAAmB,QAAQY,EAAG,cAAcA,EAAG;AAAA,IACjD;AAEA,aAASE,IAAmB;AAC1B,MAAAH,EAAA,GACAL,EAAa,EAAI;AAAA,IACnB;AAEA,aAASS,IAAkB;AACzB,MAAAT,EAAa,EAAK;AAAA,IACpB;;;;;;;;;;;;;;;;;"}

package/dist/components/PlAccordion/ExpandTransition.vue.d.ts

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

package/dist/components/PlAccordion/ExpandTransition.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandTransition.vue2.js","sources":["../../../src/components/PlAccordion/ExpandTransition.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst onStart = (el: Element) => {\n  el.classList.add('expand-collapse-fix');\n  (el as HTMLElement).style.setProperty('--component-height', el.scrollHeight + 'px');\n};\n\nconst onAfter = (el: Element) => {\n  (el as HTMLElement).style.removeProperty('--component-height');\n  el.classList.remove('expand-collapse-fix');\n};\n</script>\n\n<template>\n  <Transition name=\"expand-collapse\" @enter=\"onStart\" @leave=\"onStart\" @after-enter=\"onAfter\" @after-leave=\"onAfter\">\n    <slot/>\n  </Transition>\n</template>\n\n<style>\n.expand-collapse-fix {\n  overflow: hidden;\n}\n\n.expand-collapse-enter-active,\n.expand-collapse-leave-active {\n  transition:\n    height 0.2s ease-in-out,\n    opacity 0.2s ease-in-out;\n  height: var(--component-height);\n}\n\n.expand-collapse-enter-from,\n.expand-collapse-leave-to {\n  opacity: 0.5;\n  height: 0;\n}\n</style>\n"],"names":["onStart","el","onAfter"],"mappings":";;;;AACM,UAAAA,IAAU,CAACC,MAAgB;AAC5B,MAAAA,EAAA,UAAU,IAAI,qBAAqB,GACrCA,EAAmB,MAAM,YAAY,sBAAsBA,EAAG,eAAe,IAAI;AAAA,IACpF,GAEMC,IAAU,CAACD,MAAgB;AAC9B,MAAAA,EAAmB,MAAM,eAAe,oBAAoB,GAC1DA,EAAA,UAAU,OAAO,qBAAqB;AAAA,IAC3C;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ExpandTransition.vue2.js","sources":["../../../src/components/PlAccordion/ExpandTransition.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst onStart = (el: Element) => {\n  el.classList.add('expand-collapse-fix');\n  (el as HTMLElement).style.setProperty('--component-height', el.scrollHeight + 'px');\n};\n\nconst onAfter = (el: Element) => {\n  (el as HTMLElement).style.removeProperty('--component-height');\n  el.classList.remove('expand-collapse-fix');\n};\n</script>\n\n<template>\n  <Transition name=\"expand-collapse\" @enter=\"onStart\" @leave=\"onStart\" @after-enter=\"onAfter\" @after-leave=\"onAfter\">\n    <slot/>\n  </Transition>\n</template>\n\n<style>\n.expand-collapse-fix {\n  overflow: hidden;\n}\n\n.expand-collapse-enter-active,\n.expand-collapse-leave-active {\n  transition:\n    height 0.2s ease-in-out,\n    opacity 0.2s ease-in-out;\n  height: var(--component-height);\n}\n\n.expand-collapse-enter-from,\n.expand-collapse-leave-to {\n  opacity: 0.5;\n  height: 0;\n}\n</style>\n"],"names":["onStart","el","onAfter"],"mappings":";;;;AACA,UAAMA,IAAU,CAACC,MAAgB;AAC/B,MAAAA,EAAG,UAAU,IAAI,qBAAqB,GACrCA,EAAmB,MAAM,YAAY,sBAAsBA,EAAG,eAAe,IAAI;AAAA,IACpF,GAEMC,IAAU,CAACD,MAAgB;AAC9B,MAAAA,EAAmB,MAAM,eAAe,oBAAoB,GAC7DA,EAAG,UAAU,OAAO,qBAAqB;AAAA,IAC3C;;;;;;;;;;;;;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"PlAccordion.vue.js","sources":["../../../src/components/PlAccordion/PlAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { provide, toRef } from 'vue';\n\nconst model = defineModel<string>();\n\nconst props = defineProps<{\n  /**\n   * Allow multiple accordion sections to be opened at the same time\n   */\n  multiple?: boolean;\n}>();\n\nprovide('pl-accordion-model', model);\nprovide('pl-accordion-props', toRef(props));\n</script>\n\n<template>\n  <slot name=\"header\" />\n  <slot />\n</template>\n"],"names":["model","_useModel","__props","props","provide","toRef"],"mappings":";;;;;;;;;;;AAGM,UAAAA,IAAQC,EAAmBC,GAAA,YAAC,GAE5BC,IAAQD;AAOd,WAAAE,EAAQ,sBAAsBJ,CAAK,GAC3BI,EAAA,sBAAsBC,EAAMF,CAAK,CAAC;;;;;;"}
+{"version":3,"file":"PlAccordion.vue.js","sources":["../../../src/components/PlAccordion/PlAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { provide, toRef } from 'vue';\n\nconst model = defineModel<string>();\n\nconst props = defineProps<{\n  /**\n   * Allow multiple accordion sections to be opened at the same time\n   */\n  multiple?: boolean;\n}>();\n\nprovide('pl-accordion-model', model);\nprovide('pl-accordion-props', toRef(props));\n</script>\n\n<template>\n  <slot name=\"header\" />\n  <slot />\n</template>\n"],"names":["model","_useModel","__props","props","provide","toRef"],"mappings":";;;;;;;;;;;AAGA,UAAMA,IAAQC,EAAmBC,GAAA,YAAC,GAE5BC,IAAQD;AAOd,WAAAE,EAAQ,sBAAsBJ,CAAK,GACnCI,EAAQ,sBAAsBC,EAAMF,CAAK,CAAC;;;;;;"}

package/dist/components/PlAccordion/PlAccordionSection.vue.d.ts

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

package/dist/components/PlAccordion/PlAccordionSection.vue2.js

@@ -1,13 +1,13 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".expand-collapse-fix{overflow:hidden}.expand-collapse-enter-active,.expand-collapse-leave-active{transition:height .2s ease-in-out,opacity .2s ease-in-out;height:var(--component-height)}.expand-collapse-enter-from,.expand-collapse-leave-to{opacity:.5;height:0}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { defineComponent as M, mergeModels as V, inject as i, toRef as m, useModel as k, computed as p, createElementBlock as d, openBlock as f, createVNode as n, unref as v, normalizeClass as s, withCtx as $, createTextVNode as C, toDisplayString as S, createCommentVNode as g, renderSlot as h } from "vue";
-import { uniqueId as B } from "../../lib/util/helpers/dist/index.js";
+import { defineComponent as V, mergeModels as k, inject as i, toRef as m, useModel as C, computed as p, createElementBlock as d, openBlock as f, createVNode as n, unref as v, normalizeClass as r, withCtx as $, createTextVNode as M, toDisplayString as S, createCommentVNode as g, renderSlot as h } from "vue";
+import { uniqueId as B } from "@milaboratories/helpers";
 import N from "../PlIcon16/PlIcon16.vue.js";
 import P from "../PlSectionSeparator/PlSectionSeparator.vue.js";
 import _ from "./ExpandTransition.vue2.js";
 
-const b = { class: "pl-accordion-section" }, E = /* @__PURE__ */ M({
+const b = { class: "pl-accordion-section" }, E = /* @__PURE__ */ V({
   __name: "PlAccordionSection",
-  props: /* @__PURE__ */ V({
+  props: /* @__PURE__ */ k({
     label: {},
     compact: { type: Boolean }
   }, {
@@ -16,7 +16,7 @@ const b = { class: "pl-accordion-section" }, E = /* @__PURE__ */ M({
   }),
   emits: ["update:modelValue"],
   setup(y) {
-    const o = i("pl-accordion-model", () => m(""), !0), r = i("pl-accordion-props", () => m({ multiple: !1 }), !0), t = k(y, "modelValue"), a = B(), c = p(() => !r || r.value.multiple), l = p({
+    const o = i("pl-accordion-model", () => m(""), !0), s = i("pl-accordion-props", () => m({ multiple: !1 }), !0), t = C(y, "modelValue"), a = B(), c = p(() => !s || s.value.multiple), l = p({
       get() {
         return c.value ? t.value : o ? o.value === a : t.value;
       },
@@ -26,16 +26,16 @@ const b = { class: "pl-accordion-section" }, E = /* @__PURE__ */ M({
     });
     return (e, u) => (f(), d("div", b, [
       n(v(P), {
-        class: s(e.$style.separator),
+        class: r(e.$style.separator),
         compact: e.compact,
         onClick: u[0] || (u[0] = (w) => l.value = !l.value)
       }, {
         default: $(() => [
           n(v(N), {
             name: "chevron-right",
-            class: s([{ [e.$style.down]: l.value }, e.$style.chevron])
+            class: r([{ [e.$style.down]: l.value }, e.$style.chevron])
           }, null, 8, ["class"]),
-          C(" " + S(e.label), 1)
+          M(" " + S(e.label), 1)
         ]),
         _: 1
       }, 8, ["class", "compact"]),
@@ -43,7 +43,7 @@ const b = { class: "pl-accordion-section" }, E = /* @__PURE__ */ M({
         default: $(() => [
           l.value ? (f(), d("div", {
             key: 0,
-            class: s(e.$style.content)
+            class: r(e.$style.content)
           }, [
             h(e.$slots, "default")
           ], 2)) : g("", !0)

package/dist/components/PlAccordion/PlAccordionSection.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAccordionSection.vue2.js","sources":["../../../src/components/PlAccordion/PlAccordionSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { uniqueId } from '@milaboratories/helpers';\nimport { PlMaskIcon16 } from '../PlMaskIcon16';\nimport { PlSectionSeparator } from '../PlSectionSeparator';\nimport ExpandTransition from './ExpandTransition.vue';\nimport type { Ref } from 'vue';\nimport { computed, inject, toRef } from 'vue';\n\nconst $m = inject<Ref<string>>('pl-accordion-model', () => toRef(''), true);\n\nconst $p = inject<\n  Ref<{\n    multiple?: boolean;\n  }>\n>('pl-accordion-props', () => toRef({ multiple: false }), true);\n\nconst model = defineModel<boolean>();\n\nconst id = uniqueId();\n\nconst isMulti = computed(() => !$p || $p.value.multiple);\n\nconst open = computed({\n  get() {\n    if (isMulti.value) {\n      return model.value;\n    }\n\n    return $m ? $m.value === id : model.value;\n  },\n  set(on) {\n    if (isMulti.value) {\n      model.value = on;\n    } else if ($m) {\n      $m.value = $m.value === id ? '' : id;\n    }\n  },\n});\n\ndefineProps<{\n  /**\n   * The label text (optional)\n   */\n  label?: string;\n  /**\n   * If `true`, remove top padding\n   */\n  compact?: boolean;\n}>();\n</script>\n\n<template>\n  <div class=\"pl-accordion-section\">\n    <PlSectionSeparator :class=\"$style.separator\" :compact=\"compact\" @click=\"open = !open\">\n      <PlMaskIcon16 name=\"chevron-right\" :class=\"[{ [$style.down]: open }, $style.chevron]\" />\n      {{ label }}\n    </PlSectionSeparator>\n    <ExpandTransition>\n      <div v-if=\"open\" :class=\"$style.content\">\n        <slot />\n      </div>\n    </ExpandTransition>\n  </div>\n</template>\n\n<style module>\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-v);\n  will-change: height, opacity;\n  /* transform: translateZ(0);\n  backface-visibility: hidden; */\n}\n\n.content > *:first-child {\n  margin-top: 24px;\n}\n\n.content > *:last-child {\n  margin-bottom: 4px;\n}\n\n.separator {\n  cursor: pointer;\n  &:hover {\n    --pl-separator-txt-color: var(--txt-01);\n    --mask-icon-bg-color: var(--ic-01);\n  }\n}\n\n.chevron {\n  transition-duration: 50ms;\n}\n\n.down {\n  transform: rotate(90deg);\n}\n</style>\n"],"names":["$m","inject","toRef","$p","model","_useModel","__props","id","uniqueId","isMulti","computed","open","on"],"mappings":";;;;;;;;;;;;;;;;;AAQA,UAAMA,IAAKC,EAAoB,sBAAsB,MAAMC,EAAM,EAAE,GAAG,EAAI,GAEpEC,IAAKF,EAIT,sBAAsB,MAAMC,EAAM,EAAE,UAAU,IAAO,GAAG,EAAI,GAExDE,IAAQC,EAAoBC,GAAA,YAAC,GAE7BC,IAAKC,EAAS,GAEdC,IAAUC,EAAS,MAAM,CAACP,KAAMA,EAAG,MAAM,QAAQ,GAEjDQ,IAAOD,EAAS;AAAA,MACpB,MAAM;AACJ,eAAID,EAAQ,QACHL,EAAM,QAGRJ,IAAKA,EAAG,UAAUO,IAAKH,EAAM;AAAA,MACtC;AAAA,MACA,IAAIQ,GAAI;AACN,QAAIH,EAAQ,QACVL,EAAM,QAAQQ,IACLZ,MACTA,EAAG,QAAQA,EAAG,UAAUO,IAAK,KAAKA;AAAA,MACpC;AAAA,IACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlAccordionSection.vue2.js","sources":["../../../src/components/PlAccordion/PlAccordionSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { uniqueId } from '@milaboratories/helpers';\nimport { PlMaskIcon16 } from '../PlMaskIcon16';\nimport { PlSectionSeparator } from '../PlSectionSeparator';\nimport ExpandTransition from './ExpandTransition.vue';\nimport type { Ref } from 'vue';\nimport { computed, inject, toRef } from 'vue';\n\nconst $m = inject<Ref<string>>('pl-accordion-model', () => toRef(''), true);\n\nconst $p = inject<\n  Ref<{\n    multiple?: boolean;\n  }>\n>('pl-accordion-props', () => toRef({ multiple: false }), true);\n\nconst model = defineModel<boolean>();\n\nconst id = uniqueId();\n\nconst isMulti = computed(() => !$p || $p.value.multiple);\n\nconst open = computed({\n  get() {\n    if (isMulti.value) {\n      return model.value;\n    }\n\n    return $m ? $m.value === id : model.value;\n  },\n  set(on) {\n    if (isMulti.value) {\n      model.value = on;\n    } else if ($m) {\n      $m.value = $m.value === id ? '' : id;\n    }\n  },\n});\n\ndefineProps<{\n  /**\n   * The label text (optional)\n   */\n  label?: string;\n  /**\n   * If `true`, remove top padding\n   */\n  compact?: boolean;\n}>();\n</script>\n\n<template>\n  <div class=\"pl-accordion-section\">\n    <PlSectionSeparator :class=\"$style.separator\" :compact=\"compact\" @click=\"open = !open\">\n      <PlMaskIcon16 name=\"chevron-right\" :class=\"[{ [$style.down]: open }, $style.chevron]\" />\n      {{ label }}\n    </PlSectionSeparator>\n    <ExpandTransition>\n      <div v-if=\"open\" :class=\"$style.content\">\n        <slot />\n      </div>\n    </ExpandTransition>\n  </div>\n</template>\n\n<style module>\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-v);\n  will-change: height, opacity;\n  /* transform: translateZ(0);\n  backface-visibility: hidden; */\n}\n\n.content > *:first-child {\n  margin-top: 24px;\n}\n\n.content > *:last-child {\n  margin-bottom: 4px;\n}\n\n.separator {\n  cursor: pointer;\n  &:hover {\n    --pl-separator-txt-color: var(--txt-01);\n    --mask-icon-bg-color: var(--ic-01);\n  }\n}\n\n.chevron {\n  transition-duration: 50ms;\n}\n\n.down {\n  transform: rotate(90deg);\n}\n</style>\n"],"names":["$m","inject","toRef","$p","model","_useModel","__props","id","uniqueId","isMulti","computed","open","on"],"mappings":";;;;;;;;;;;;;;;;;AAQA,UAAMA,IAAKC,EAAoB,sBAAsB,MAAMC,EAAM,EAAE,GAAG,EAAI,GAEpEC,IAAKF,EAIT,sBAAsB,MAAMC,EAAM,EAAE,UAAU,IAAO,GAAG,EAAI,GAExDE,IAAQC,EAAoBC,GAAA,YAAC,GAE7BC,IAAKC,EAAA,GAELC,IAAUC,EAAS,MAAM,CAACP,KAAMA,EAAG,MAAM,QAAQ,GAEjDQ,IAAOD,EAAS;AAAA,MACpB,MAAM;AACJ,eAAID,EAAQ,QACHL,EAAM,QAGRJ,IAAKA,EAAG,UAAUO,IAAKH,EAAM;AAAA,MACtC;AAAA,MACA,IAAIQ,GAAI;AACN,QAAIH,EAAQ,QACVL,EAAM,QAAQQ,IACLZ,MACTA,EAAG,QAAQA,EAAG,UAAUO,IAAK,KAAKA;AAAA,MAEtC;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"PlAlert.vue.js","sources":["../../../src/components/PlAlert/PlAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: 'PlAlert',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport './pl-alert.scss';\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated, typically when the close button is clicked.\n   *\n   * @param value - The new value of the model, generally `false` when the alert is closed.\n   */\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\nwithDefaults(\n  defineProps<{\n    /**\n     * Controls the visibility of the alert component. If `true`, the alert is visible.\n     *\n     * @default true\n     */\n    modelValue?: boolean;\n    /**\n     * The type of alert, which determines the alert's style and icon.\n     * Can be one of `'success' | 'info' | 'warn' | 'error'`.\n     */\n    type?: 'success' | 'info' | 'warn' | 'error';\n    /**\n     * An optional label that appears at the top of the alert.\n     */\n    label?: string;\n    /**\n     * If `true`, an icon corresponding to the alert type is displayed.\n     */\n    icon?: boolean;\n    /**\n     * If `true`, a close button is displayed in the alert, allowing the user to close it.\n     */\n    closeable?: boolean;\n    /**\n     * If `true`, the alert text is displayed in a monospace font.\n     */\n    monospace?: boolean;\n    /**\n     * If `true`, the alert content will preserve whitespace and line breaks.\n     */\n    whiteSpacePre?: boolean;\n\n    /**\n     * Max height (css value like '120px or 30%')\n     */\n    maxHeight?: string;\n  }>(),\n  {\n    modelValue: true,\n    type: undefined,\n    label: undefined,\n    icon: undefined,\n    closeable: undefined,\n    monospace: undefined,\n    whiteSpacePre: undefined,\n    maxHeight: undefined,\n  },\n);\n\nconst iconMap = {\n  success: 'success',\n  warn: 'warning',\n  info: 'edit',\n  error: 'error',\n};\n</script>\n\n<template>\n  <div v-if=\"modelValue\" class=\"pl-alert\" :style=\"{ maxHeight }\" :class=\"[{ monospace, whiteSpacePre }, type ? `pl-alert__${type}` : '']\">\n    <div v-if=\"icon && type\" class=\"pl-alert__icon\">\n      <div :class=\"`icon-24 icon-${iconMap[type]}`\" />\n    </div>\n    <div class=\"pl-alert__main\">\n      <label v-if=\"label\">{{ label }}</label>\n      <div class=\"pl-alert__main__text\"><slot /></div>\n    </div>\n    <div v-if=\"closeable\" class=\"pl-alert__close-btn\" aria-label=\"Close alert\" role=\"button\" @click=\"$emit('update:modelValue', false)\" />\n  </div>\n</template>\n"],"names":["__default__","iconMap"],"mappings":";;;;;2FACeA,IAAA;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;AAkEA,UAAMC,IAAU;AAAA,MACd,SAAS;AAAA,MACT,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlAlert.vue.js","sources":["../../../src/components/PlAlert/PlAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: 'PlAlert',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport './pl-alert.scss';\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated, typically when the close button is clicked.\n   *\n   * @param value - The new value of the model, generally `false` when the alert is closed.\n   */\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\nwithDefaults(\n  defineProps<{\n    /**\n     * Controls the visibility of the alert component. If `true`, the alert is visible.\n     *\n     * @default true\n     */\n    modelValue?: boolean;\n    /**\n     * The type of alert, which determines the alert's style and icon.\n     * Can be one of `'success' | 'info' | 'warn' | 'error'`.\n     */\n    type?: 'success' | 'info' | 'warn' | 'error';\n    /**\n     * An optional label that appears at the top of the alert.\n     */\n    label?: string;\n    /**\n     * If `true`, an icon corresponding to the alert type is displayed.\n     */\n    icon?: boolean;\n    /**\n     * If `true`, a close button is displayed in the alert, allowing the user to close it.\n     */\n    closeable?: boolean;\n    /**\n     * If `true`, the alert text is displayed in a monospace font.\n     */\n    monospace?: boolean;\n    /**\n     * If `true`, the alert content will preserve whitespace and line breaks.\n     */\n    whiteSpacePre?: boolean;\n\n    /**\n     * Max height (css value like '120px or 30%')\n     */\n    maxHeight?: string;\n  }>(),\n  {\n    modelValue: true,\n    type: undefined,\n    label: undefined,\n    icon: undefined,\n    closeable: undefined,\n    monospace: undefined,\n    whiteSpacePre: undefined,\n    maxHeight: undefined,\n  },\n);\n\nconst iconMap = {\n  success: 'success',\n  warn: 'warning',\n  info: 'edit',\n  error: 'error',\n};\n</script>\n\n<template>\n  <div v-if=\"modelValue\" class=\"pl-alert\" :style=\"{ maxHeight }\" :class=\"[{ monospace, whiteSpacePre }, type ? `pl-alert__${type}` : '']\">\n    <div v-if=\"icon && type\" class=\"pl-alert__icon\">\n      <div :class=\"`icon-24 icon-${iconMap[type]}`\" />\n    </div>\n    <div class=\"pl-alert__main\">\n      <label v-if=\"label\">{{ label }}</label>\n      <div class=\"pl-alert__main__text\"><slot /></div>\n    </div>\n    <div v-if=\"closeable\" class=\"pl-alert__close-btn\" aria-label=\"Close alert\" role=\"button\" @click=\"$emit('update:modelValue', false)\" />\n  </div>\n</template>\n"],"names":["__default__","iconMap"],"mappings":";;;;;2FACAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;AAkEA,UAAMC,IAAU;AAAA,MACd,SAAS;AAAA,MACT,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

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

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

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

package/dist/components/PlAutocomplete/PlAutocomplete.vue.js

@@ -1,24 +1,24 @@
 (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.pl-autocomplete__options{--option-hover-bg: var(--btn-sec-hover-grey);z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);position:absolute;background-color:var(--pl-dropdown-options-bg);border-radius:6px;max-height:244px;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14;--thumb-color: var(--ic-02);overflow-y:auto}.pl-autocomplete__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-autocomplete__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-autocomplete__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-autocomplete__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:var(--control-height);background-color:#fff;opacity:.5;font-style:italic}.pl-autocomplete__options .option{position:relative;padding:0 30px 0 10px;height:var(--control-height);line-height:var(--control-height);cursor:pointer;-webkit-user-select:none;user-select:none}.pl-autocomplete__options .option .checkmark{position:absolute;display:none;right:10px;top:50%;transform:translateY(-50%)}.pl-autocomplete__options .option>span{display:block;overflow:hidden;white-space:nowrap;max-width:100%;text-overflow:ellipsis}.pl-autocomplete__options .option.selected{background-color:var(--color-active-select)}.pl-autocomplete__options .option.selected .checkmark{display:block}.pl-autocomplete__options .option.active:not(.selected){background-color:var(--option-hover-bg)}.pl-autocomplete__options .option:hover{background-color:var(--option-hover-bg)}.pl-autocomplete{--contour-color: var(--txt-01);--contour-border-width: 1px;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);position:relative;outline:none;min-height:var(--control-height);border-radius:6px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base)}.pl-autocomplete__envelope{font-family:var(--control-font-family);min-width:160px}.pl-autocomplete 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-autocomplete label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-autocomplete__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);color:var(--txt-01)}.pl-autocomplete__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-autocomplete__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding-left:11px;min-height:var(--control-height);line-height:var(--control-height);display:flex;flex-direction:row;align-items:center;cursor:pointer}.pl-autocomplete__field .input-value{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;flex-direction:row;align-items:center;padding:0 60px 0 11px;pointer-events:none;line-height:20px;color:var(--txt-01);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit}.pl-autocomplete__field input{min-height:calc(var(--control-height) - 2px);line-height:20px;font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 40px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-autocomplete__field input:focus{outline:none}.pl-autocomplete__field input:placeholder-shown{text-overflow:ellipsis}.pl-autocomplete__field input::placeholder{color:var(--color-placeholder)}.pl-autocomplete__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-autocomplete__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-autocomplete__controls{display:flex;flex-direction:row;align-items:center;min-height:var(--control-height);gap:6px;margin-left:auto}.pl-autocomplete__controls .mask-16,.pl-autocomplete__controls .mask-24{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-autocomplete__controls .clear{--icon-color: var(--ic-02)}.pl-autocomplete__controls .mask-loading{--icon-color: var(#07AD3E);animation:spin 2.5s linear infinite}.pl-autocomplete__arrow-wrapper{display:flex;align-items:center;min-height:var(--control-height);padding-right:11px}.pl-autocomplete .arrow-icon{cursor:pointer}.pl-autocomplete .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-autocomplete.open,.pl-autocomplete:focus-within{z-index:1;--label-color: var(--txt-focus)}.pl-autocomplete.open .pl-autocomplete__container{z-index:1000}.pl-autocomplete.open .pl-autocomplete__field{border-radius:6px 6px 0 0}.pl-autocomplete.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-autocomplete:hover{--contour-color: var(--control-hover-color)}.pl-autocomplete: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-autocomplete:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-autocomplete.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-autocomplete.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;-webkit-user-select:none;user-select:none}.pl-autocomplete.disabled .input-value{color:var(--dis-01)}
 .ui-lt-container{min-width:0;white-space:nowrap;overflow:hidden;position:relative;border-radius:5px}.ui-lt-container span{display:inline-block;overflow:hidden;text-overflow:ellipsis;width:100%;vertical-align:bottom;pointer-events:all!important}.ui-lt-container .ui-lt-animate{position:relative;animation:left-to-right var(--5deba9de) infinite alternate linear;overflow:unset!important;text-overflow:unset!important;width:fit-content!important}@keyframes left-to-right{0%{transform:translate(0);left:0%}to{transform:translate(-101%);left:101%}}`)),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { defineComponent as se, mergeModels as ie, useModel as ue, useSlots as ce, ref as f, useTemplateRef as de, reactive as pe, computed as p, unref as m, watch as h, watchPostEffect as ve, createElementBlock as s, openBlock as a, withModifiers as O, createElementVNode as _, createCommentVNode as c, normalizeClass as F, createBlock as k, createVNode as N, withDirectives as fe, vModelText as me, withCtx as M, createTextVNode as he, toDisplayString as w, renderSlot as P, Fragment as _e, renderList as ye } from "vue";
+import { defineComponent as se, mergeModels as ie, useModel as ue, useSlots as ce, ref as f, useTemplateRef as de, reactive as pe, computed as p, unref as m, watch as h, watchPostEffect as ve, createElementBlock as s, openBlock as a, withModifiers as O, createElementVNode as _, createCommentVNode as c, normalizeClass as M, createBlock as k, createVNode as N, withDirectives as fe, vModelText as me, withCtx as R, createTextVNode as he, toDisplayString as w, renderSlot as P, Fragment as _e, renderList as ye } from "vue";
 
 import { tap as ge } from "../../helpers/functions.js";
 import ke from "../PlTooltip/PlTooltip.vue.js";
 import we from "../../utils/DoubleContour.vue.js";
-import { useLabelNotch as be } from "../../utils/useLabelNotch.js";
-import { deepEqual as b } from "../../helpers/objects.js";
-import Ie from "../DropdownListItem.vue.js";
+import { useLabelNotch as Ie } from "../../utils/useLabelNotch.js";
+import { deepEqual as I } from "../../helpers/objects.js";
+import be from "../DropdownListItem.vue.js";
 import Se from "../LongText.vue.js";
 
 import { normalizeListOptions as T } from "../../helpers/utils.js";
 import Oe from "../PlIcon16/PlIcon16.vue.js";
 import xe from "../PlIcon24/PlIcon24.vue.js";
 import Ee from "../../utils/DropdownOverlay/DropdownOverlay.vue.js";
+import { refDebounced as Ve } from "@vueuse/core";
 import { useWatchFetch as H } from "../../composition/useWatchFetch.js";
-import Ve from "../../generated/components/svg/images/SvgRequired.vue2.js";
-import { getErrorMessage as Ae } from "../../helpers/error.js";
-import { debouncedRef as Ce } from "../../node_modules/.pnpm/@vueuse_shared@13.3.0_vue@3.5.13_typescript@5.6.3_/node_modules/@vueuse/shared/index.js";
-const De = ["tabindex"], Re = { class: "pl-autocomplete__container" }, Fe = { class: "pl-autocomplete__field" }, Me = ["disabled", "placeholder"], $e = {
+import Ae from "../../generated/components/svg/images/SvgRequired.vue.js";
+import { getErrorMessage as Ce } from "../../helpers/error.js";
+const De = ["tabindex"], Fe = { class: "pl-autocomplete__container" }, Me = { class: "pl-autocomplete__field" }, Re = ["disabled", "placeholder"], $e = {
   key: 0,
   class: "input-value"
 }, Be = { class: "pl-autocomplete__controls" }, Le = {
@@ -54,33 +54,33 @@ const De = ["tabindex"], Re = { class: "pl-autocomplete__container" }, Fe = { cl
     arrowIcon: { default: void 0 },
     arrowIconLarge: { default: void 0 },
     optionSize: { default: "small" },
-    formatValue: { type: Function, default: (I) => String(I) }
+    formatValue: { type: Function, default: (b) => String(b) }
   }, {
     modelValue: { required: !0 },
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(I) {
-    const n = ue(I, "modelValue"), u = I, U = ce(), d = f(), x = f(), $ = de("overlay"), i = f(null), t = pe({
+  setup(b) {
+    const n = ue(b, "modelValue"), u = b, U = ce(), d = f(), x = f(), $ = de("overlay"), i = f(null), t = pe({
       activeIndex: -1,
       open: !1
     }), K = () => ge(
-      g.value.findIndex((e) => b(e.value, n.value)),
+      g.value.findIndex((e) => I(e.value, n.value)),
       (e) => e < 0 ? 0 : e
     ), W = () => t.activeIndex = K(), E = f([]), y = f(), g = p(() => T(E.value).map((e, o) => ({
       ...e,
       index: o,
       isSelected: o === j.value,
       isActive: o === t.activeIndex
-    }))), S = f(!0), V = f(!1), A = p(() => u.disabled), j = p(() => E.value.findIndex((e) => b(e.value, n.value))), C = p(() => {
+    }))), S = f(!0), V = f(!1), A = p(() => u.disabled), j = p(() => E.value.findIndex((e) => I(e.value, n.value))), C = p(() => {
       if (!S.value) {
         if (u.error)
-          return Ae(u.error);
+          return Ce(u.error);
         if (V.value)
           return "Data loading error";
       }
     }), B = p(() => {
-      const e = m(y), o = m(g), l = e ?? o.find((r) => b(r.value, n.value)) ?? o.find((r) => b(r.value, n.value));
+      const e = m(y), o = m(g), l = e ?? o.find((r) => I(r.value, n.value)) ?? o.find((r) => I(r.value, n.value));
       return (l == null ? void 0 : l.label) || (n.value ? u.formatValue(n.value) : "");
     }), G = p(() => !t.open && n.value ? "" : n.value ? String(B.value) : u.placeholder), J = p(() => n.value !== void 0 && n.value !== null), Q = p(() => A.value ? void 0 : "0"), L = (e) => {
       var o;
@@ -117,11 +117,11 @@ const De = ["tabindex"], Re = { class: "pl-autocomplete__container" }, Fe = { cl
       const r = m(g), { length: v } = r;
       if (!v)
         return;
-      e.code === "Enter" && L(r.find((R) => R.index === l));
-      const ae = r.findIndex((R) => R.index === l) ?? -1, ne = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, re = Math.abs(ae + ne + v) % v;
+      e.code === "Enter" && L(r.find((F) => F.index === l));
+      const ae = r.findIndex((F) => F.index === l) ?? -1, ne = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, re = Math.abs(ae + ne + v) % v;
       t.activeIndex = g.value[re].index ?? -1;
     };
-    be(d), h(() => n.value, W, { immediate: !0 }), h(
+    Ie(d), h(() => n.value, W, { immediate: !0 }), h(
       () => t.open,
       (e) => {
         var o;
@@ -131,9 +131,9 @@ const De = ["tabindex"], Re = { class: "pl-autocomplete__container" }, Fe = { cl
       var e;
       i.value, t.activeIndex >= 0 && t.open && ((e = $.value) == null || e.scrollIntoActive());
     });
-    const le = Ce(i, 300, { maxWait: 1e3 }), D = H(() => le.value, async (e) => e !== null ? u.optionsSearch(e) : []), q = H(() => n.value, async (e) => {
+    const le = Ve(i, 300, { maxWait: 1e3 }), D = H(() => le.value, async (e) => e !== null ? u.optionsSearch(e) : []), q = H(() => n.value, async (e) => {
       var o, l;
-      return e && !b((o = y.value) == null ? void 0 : o.value, e) ? u.modelSearch ? u.modelSearch(e) : (l = await u.optionsSearch(String(e))) == null ? void 0 : l[0] : y.value;
+      return e && !I((o = y.value) == null ? void 0 : o.value, e) ? u.modelSearch ? u.modelSearch(e) : (l = await u.optionsSearch(String(e))) == null ? void 0 : l[0] : y.value;
     });
     return h(() => D.value, (e) => {
       e && (E.value = e, i.value !== null && (V.value = !1));
@@ -151,12 +151,12 @@ const De = ["tabindex"], Re = { class: "pl-autocomplete__container" }, Fe = { cl
         ref_key: "rootRef",
         ref: d,
         tabindex: Q.value,
-        class: F(["pl-autocomplete", { open: t.open, error: !!C.value, disabled: A.value }]),
+        class: M(["pl-autocomplete", { open: t.open, error: !!C.value, disabled: A.value }]),
         onKeydown: te,
         onFocusout: oe
       }, [
-        _("div", Re, [
-          _("div", Fe, [
+        _("div", Fe, [
+          _("div", Me, [
             fe(_("input", {
               ref_key: "input",
               ref: x,
@@ -168,12 +168,12 @@ const De = ["tabindex"], Re = { class: "pl-autocomplete__container" }, Fe = { cl
               spellcheck: "false",
               autocomplete: "chrome-off",
               onFocus: ee
-            }, null, 40, Me), [
+            }, null, 40, Re), [
               [me, i.value]
             ]),
             t.open ? c("", !0) : (a(), s("div", $e, [
               N(Se, null, {
-                default: M(() => [
+                default: R(() => [
                   he(w(B.value), 1)
                 ]),
                 _: 1
@@ -197,23 +197,23 @@ const De = ["tabindex"], Re = { class: "pl-autocomplete__container" }, Fe = { cl
               }, [
                 e.arrowIconLarge ? (a(), s("div", {
                   key: 0,
-                  class: F(["arrow-icon", [`icon-24 ${e.arrowIconLarge}`]])
+                  class: M(["arrow-icon", [`icon-24 ${e.arrowIconLarge}`]])
                 }, null, 2)) : e.arrowIcon ? (a(), s("div", {
                   key: 1,
-                  class: F(["arrow-icon", [`icon-16 ${e.arrowIcon}`]])
+                  class: M(["arrow-icon", [`icon-16 ${e.arrowIcon}`]])
                 }, null, 2)) : (a(), s("div", Le))
               ])
             ])
           ]),
           e.label ? (a(), s("label", qe, [
-            e.required ? (a(), k(Ve, { key: 0 })) : c("", !0),
+            e.required ? (a(), k(Ae, { key: 0 })) : c("", !0),
             _("span", null, w(e.label), 1),
             U.tooltip ? (a(), k(m(ke), {
               key: 1,
               class: "info",
               position: "top"
             }, {
-              tooltip: M(() => [
+              tooltip: R(() => [
                 P(e.$slots, "tooltip")
               ]),
               _: 3
@@ -227,8 +227,8 @@ const De = ["tabindex"], Re = { class: "pl-autocomplete__container" }, Fe = { cl
             tabindex: "-1",
             gap: 3
           }, {
-            default: M(() => [
-              (a(!0), s(_e, null, ye(g.value, (l, r) => (a(), k(Ie, {
+            default: R(() => [
+              (a(!0), s(_e, null, ye(g.value, (l, r) => (a(), k(be, {
                 key: r,
                 option: l,
                 "is-selected": l.isSelected,

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

@@ -1 +1 @@
-{"version":3,"file":"PlAutocomplete.vue.js","sources":["../../../src/components/PlAutocomplete/PlAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a big list of options using string search request\n */\nexport default {\n  name: 'PlAutocomplete',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport './pl-autocomplete.scss';\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport { tap } from '../../helpers/functions';\nimport { PlTooltip } from '../PlTooltip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport type { ListOption, ListOptionNormalized } from '../../types';\nimport { deepEqual } from '../../helpers/objects';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport LongText from '../LongText.vue';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { DropdownOverlay } from '../../utils/DropdownOverlay';\nimport { refDebounced } from '@vueuse/core';\nimport { useWatchFetch } from '../../composition/useWatchFetch.ts';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\n\n/**\n * The current selected value.\n */\nconst model = defineModel<M>({ required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Lambda for requesting of available options for the dropdown by search string.\n     */\n    optionsSearch: (s: string) => Promise<ListOption<M>[]>;\n    /**\n     * Lambda for requesting of corresponding option for current model value. If empty, optionsSearch is used for this.\n     */\n    modelSearch?: (v: M) => Promise<ListOption<M>>;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Custom icon (16px) class for the dropdown arrow (optional)\n     */\n    arrowIcon?: string;\n    /**\n     * Custom icon (24px) class for the dropdown arrow (optional)\n     */\n    arrowIconLarge?: string;\n    /**\n     * Option list item size\n     */\n    optionSize?: 'small' | 'medium';\n    /**\n     * Formatter for the selected value if its label is absent\n     */\n    formatValue?: (value: M) => string;\n  }>(),\n  {\n    modelSearch: undefined,\n    label: '',\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: '...',\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    arrowIconLarge: undefined,\n    optionSize: 'small',\n    formatValue: (v: M) => String(v),\n  },\n);\n\nconst slots = defineSlots<{\n  [key: string]: unknown;\n}>();\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlayRef = useTemplateRef('overlay');\n\nconst search = ref<string | null>(null);\nconst data = reactive({\n  activeIndex: -1,\n  open: false,\n});\n\nconst findActiveIndex = () =>\n  tap(\n    renderedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value)),\n    (v) => (v < 0 ? 0 : v),\n  );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst loadedOptionsRef = ref<ListOption<M>[]>([]);\nconst modelOptionRef = ref<ListOptionNormalized<M> | undefined>(); // list of 1 option that is selected or empty, to keep selected label\n\nconst renderedOptionsRef = computed(() => {\n  return normalizeListOptions(loadedOptionsRef.value).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  }));\n});\nconst isLoadingOptions = ref<boolean>(true);\nconst isLoadingError = ref<boolean>(false);\n\nconst isDisabled = computed(() => {\n  return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n  return loadedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst computedError = computed(() => {\n  if (isLoadingOptions.value) {\n    return undefined;\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  if (isLoadingError.value) {\n    return 'Data loading error';\n  }\n\n  return undefined;\n});\n\nconst textValue = computed(() => {\n  const modelOption = unref(modelOptionRef);\n  const options = unref(renderedOptionsRef);\n\n  const item: ListOptionNormalized | undefined = modelOption ?? options.find((o) => deepEqual(o.value, model.value)) ?? options.find((o) => deepEqual(o.value, model.value));\n\n  return item?.label || (model.value ? props.formatValue(model.value) : '');\n});\n\nconst computedPlaceholder = computed(() => {\n  if (!data.open && model.value) {\n    return '';\n  }\n\n  return model.value ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n  return model.value !== undefined && model.value !== null;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst selectOption = (v: ListOptionNormalized<M> | undefined) => {\n  model.value = v?.value as M;\n  modelOptionRef.value = v;\n  search.value = null;\n  data.open = false;\n  rootRef?.value?.focus();\n};\n\nconst clear = () => {\n  model.value = undefined as M;\n  modelOptionRef.value = undefined;\n};\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n  data.open = !data.open;\n};\n\nwatch(() => data.open, (v) => {\n  search.value = v ? '' : null;\n});\n\nconst onInputFocus = () => {\n  data.open = true;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!rootRef.value?.contains(relatedTarget) && !overlayRef.value?.listRef?.contains(relatedTarget)) {\n    search.value = null;\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  const { open, activeIndex } = data;\n\n  if (!open) {\n    if (e.code === 'Enter') {\n      data.open = true;\n      search.value = '';\n    }\n    return;\n  }\n\n  if (e.code === 'Escape') {\n    data.open = false;\n    search.value = null;\n    rootRef.value?.focus();\n  }\n\n  const options = unref(renderedOptionsRef);\n\n  const { length } = options;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === 'Enter') {\n    selectOption(options.find((it) => it.index === activeIndex));\n  }\n\n  const localIndex = options.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = renderedOptionsRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => model.value, updateActive, { immediate: true });\n\nwatch(\n  () => data.open,\n  (open) => (open ? input.value?.focus() : ''),\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  search.value; // to watch\n\n  if (data.activeIndex >= 0 && data.open) {\n    overlayRef.value?.scrollIntoActive();\n  }\n});\n\nconst searchDebounced = refDebounced(search, 300, { maxWait: 1000 });\n\nconst optionsRequest = useWatchFetch(() => searchDebounced.value, async (v) => {\n  if (v !== null) { // search is null when dropdown is closed;\n    return props.optionsSearch(v);\n  }\n  return [];\n});\n\nconst modelOptionRequest = useWatchFetch(() => model.value, async (v) => {\n  if (v && !deepEqual(modelOptionRef.value?.value, v)) { // load label for selected value if it was updated from outside the component\n    if (props.modelSearch) {\n      return props.modelSearch(v);\n    }\n    return (await props.optionsSearch(String(v)))?.[0];\n  }\n  return modelOptionRef.value;\n});\n\nwatch(() => optionsRequest.value, (result) => {\n  if (result) {\n    loadedOptionsRef.value = result;\n    if (search.value !== null) {\n      isLoadingError.value = false;\n    }\n  }\n});\n\nwatch(() => modelOptionRequest.value, (result) => {\n  if (result) {\n    modelOptionRef.value = normalizeListOptions([result])[0];\n  }\n});\n\nwatch(() => optionsRequest.error, (err) => {\n  if (err) {\n    isLoadingError.value = Boolean(err);\n  }\n});\n\nwatch(() => optionsRequest.loading || modelOptionRequest.loading, (loading) => {\n  isLoadingOptions.value = loading;\n});\n</script>\n\n<template>\n  <div class=\"pl-autocomplete__envelope\" @click.stop=\"setFocusOnInput\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-autocomplete\"\n      :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-autocomplete__container\">\n        <div class=\"pl-autocomplete__field\">\n          <input\n            ref=\"input\"\n            v-model=\"search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"computedPlaceholder\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" class=\"input-value\">\n            <LongText> {{ textValue }} </LongText>\n          </div>\n\n          <div class=\"pl-autocomplete__controls\">\n            <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n            <PlIcon16 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n            <slot name=\"append\" />\n            <div class=\"pl-autocomplete__arrow-wrapper\" @click.stop=\"toggleOpen\">\n              <div v-if=\"arrowIconLarge\" class=\"arrow-icon\" :class=\"[`icon-24 ${arrowIconLarge}`]\" />\n              <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" />\n              <div v-else 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 v-if=\"data.open\" ref=\"overlay\" :root=\"rootRef\" class=\"pl-autocomplete__options\" tabindex=\"-1\" :gap=\"3\">\n          <DropdownListItem\n            v-for=\"(item, index) in renderedOptionsRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :is-selected=\"item.isSelected\"\n            :is-hovered=\"item.isActive\"\n            :size=\"optionSize\"\n            @click.stop=\"selectOption(item)\"\n          />\n          <div v-if=\"!renderedOptionsRef.length\" class=\"nothing-found\">Nothing found</div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-autocomplete__contour\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"pl-autocomplete__error\">{{ computedError }}</div>\n    <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-autocomplete__helper\">{{ loadingOptionsHelper }}</div>\n    <div v-else-if=\"helper\" class=\"pl-autocomplete__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"names":["__default__","model","_useModel","props","__props","slots","_useSlots","rootRef","ref","input","overlayRef","useTemplateRef","search","data","reactive","findActiveIndex","tap","renderedOptionsRef","o","deepEqual","v","updateActive","loadedOptionsRef","modelOptionRef","computed","normalizeListOptions","opt","index","selectedIndex","isLoadingOptions","isLoadingError","isDisabled","computedError","getErrorMessage","textValue","modelOption","unref","options","item","computedPlaceholder","hasValue","tabindex","selectOption","_a","clear","setFocusOnInput","toggleOpen","watch","onInputFocus","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","open","activeIndex","length","it","localIndex","delta","newIndex","useLabelNotch","watchPostEffect","searchDebounced","refDebounced","optionsRequest","useWatchFetch","modelOptionRequest","result","err","loading"],"mappings":"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"}
+{"version":3,"file":"PlAutocomplete.vue.js","sources":["../../../src/components/PlAutocomplete/PlAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a big list of options using string search request\n */\nexport default {\n  name: 'PlAutocomplete',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport './pl-autocomplete.scss';\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport { tap } from '../../helpers/functions';\nimport { PlTooltip } from '../PlTooltip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport type { ListOption, ListOptionNormalized } from '../../types';\nimport { deepEqual } from '../../helpers/objects';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport LongText from '../LongText.vue';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { DropdownOverlay } from '../../utils/DropdownOverlay';\nimport { refDebounced } from '@vueuse/core';\nimport { useWatchFetch } from '../../composition/useWatchFetch.ts';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport type { ListOptionBase } from '@platforma-sdk/model';\n\n/**\n * The current selected value.\n */\nconst model = defineModel<M>({ required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Lambda for requesting of available options for the dropdown by search string.\n     */\n    optionsSearch: (s: string) => Promise<ListOption<M>[]>;\n    /**\n     * Lambda for requesting of corresponding option for current model value. If empty, optionsSearch is used for this.\n     */\n    modelSearch?: (v: M) => Promise<ListOption<M>>;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Custom icon (16px) class for the dropdown arrow (optional)\n     */\n    arrowIcon?: string;\n    /**\n     * Custom icon (24px) class for the dropdown arrow (optional)\n     */\n    arrowIconLarge?: string;\n    /**\n     * Option list item size\n     */\n    optionSize?: 'small' | 'medium';\n    /**\n     * Formatter for the selected value if its label is absent\n     */\n    formatValue?: (value: M) => string;\n  }>(),\n  {\n    modelSearch: undefined,\n    label: '',\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: '...',\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    arrowIconLarge: undefined,\n    optionSize: 'small',\n    formatValue: (v: M) => String(v),\n  },\n);\n\nconst slots = defineSlots<{\n  [key: string]: unknown;\n}>();\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlayRef = useTemplateRef('overlay');\n\nconst search = ref<string | null>(null);\nconst data = reactive({\n  activeIndex: -1,\n  open: false,\n});\n\nconst findActiveIndex = () =>\n  tap(\n    renderedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value)),\n    (v) => (v < 0 ? 0 : v),\n  );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst loadedOptionsRef = ref<ListOption<M>[]>([]);\nconst modelOptionRef = ref<ListOptionNormalized<M> | undefined>(); // list of 1 option that is selected or empty, to keep selected label\n\nconst renderedOptionsRef = computed(() => {\n  return normalizeListOptions(loadedOptionsRef.value).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })) as (ListOptionBase<M> & { index: number; isSelected: boolean; isActive: boolean })[];\n});\nconst isLoadingOptions = ref<boolean>(true);\nconst isLoadingError = ref<boolean>(false);\n\nconst isDisabled = computed(() => {\n  return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n  return loadedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst computedError = computed(() => {\n  if (isLoadingOptions.value) {\n    return undefined;\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  if (isLoadingError.value) {\n    return 'Data loading error';\n  }\n\n  return undefined;\n});\n\nconst textValue = computed(() => {\n  const modelOption = unref(modelOptionRef);\n  const options = unref(renderedOptionsRef);\n\n  const item: ListOptionNormalized | undefined = modelOption ?? options.find((o) => deepEqual(o.value, model.value)) ?? options.find((o) => deepEqual(o.value, model.value));\n\n  return item?.label || (model.value ? props.formatValue(model.value) : '');\n});\n\nconst computedPlaceholder = computed(() => {\n  if (!data.open && model.value) {\n    return '';\n  }\n\n  return model.value ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n  return model.value !== undefined && model.value !== null;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst selectOption = (v: ListOptionBase<M> & { index: number } | undefined) => {\n  model.value = v?.value as M;\n  modelOptionRef.value = v;\n  search.value = null;\n  data.open = false;\n  rootRef?.value?.focus();\n};\n\nconst clear = () => {\n  model.value = undefined as M;\n  modelOptionRef.value = undefined;\n};\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n  data.open = !data.open;\n};\n\nwatch(() => data.open, (v) => {\n  search.value = v ? '' : null;\n});\n\nconst onInputFocus = () => {\n  data.open = true;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!rootRef.value?.contains(relatedTarget) && !overlayRef.value?.listRef?.contains(relatedTarget)) {\n    search.value = null;\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  const { open, activeIndex } = data;\n\n  if (!open) {\n    if (e.code === 'Enter') {\n      data.open = true;\n      search.value = '';\n    }\n    return;\n  }\n\n  if (e.code === 'Escape') {\n    data.open = false;\n    search.value = null;\n    rootRef.value?.focus();\n  }\n\n  const options = unref(renderedOptionsRef);\n\n  const { length } = options;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === 'Enter') {\n    selectOption(options.find((it) => it.index === activeIndex));\n  }\n\n  const localIndex = options.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = renderedOptionsRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => model.value, updateActive, { immediate: true });\n\nwatch(\n  () => data.open,\n  (open) => (open ? input.value?.focus() : ''),\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  search.value; // to watch\n\n  if (data.activeIndex >= 0 && data.open) {\n    overlayRef.value?.scrollIntoActive();\n  }\n});\n\nconst searchDebounced = refDebounced(search, 300, { maxWait: 1000 });\n\nconst optionsRequest = useWatchFetch(() => searchDebounced.value, async (v) => {\n  if (v !== null) { // search is null when dropdown is closed;\n    return props.optionsSearch(v);\n  }\n  return [];\n});\n\nconst modelOptionRequest = useWatchFetch(() => model.value, async (v) => {\n  if (v && !deepEqual(modelOptionRef.value?.value, v)) { // load label for selected value if it was updated from outside the component\n    if (props.modelSearch) {\n      return props.modelSearch(v);\n    }\n    return (await props.optionsSearch(String(v)))?.[0];\n  }\n  return modelOptionRef.value;\n});\n\nwatch(() => optionsRequest.value, (result) => {\n  if (result) {\n    loadedOptionsRef.value = result;\n    if (search.value !== null) {\n      isLoadingError.value = false;\n    }\n  }\n});\n\nwatch(() => modelOptionRequest.value, (result) => {\n  if (result) {\n    modelOptionRef.value = normalizeListOptions([result])[0];\n  }\n});\n\nwatch(() => optionsRequest.error, (err) => {\n  if (err) {\n    isLoadingError.value = Boolean(err);\n  }\n});\n\nwatch(() => optionsRequest.loading || modelOptionRequest.loading, (loading) => {\n  isLoadingOptions.value = loading;\n});\n</script>\n\n<template>\n  <div class=\"pl-autocomplete__envelope\" @click.stop=\"setFocusOnInput\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-autocomplete\"\n      :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-autocomplete__container\">\n        <div class=\"pl-autocomplete__field\">\n          <input\n            ref=\"input\"\n            v-model=\"search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"computedPlaceholder\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" class=\"input-value\">\n            <LongText> {{ textValue }} </LongText>\n          </div>\n\n          <div class=\"pl-autocomplete__controls\">\n            <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n            <PlIcon16 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n            <slot name=\"append\" />\n            <div class=\"pl-autocomplete__arrow-wrapper\" @click.stop=\"toggleOpen\">\n              <div v-if=\"arrowIconLarge\" class=\"arrow-icon\" :class=\"[`icon-24 ${arrowIconLarge}`]\" />\n              <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" />\n              <div v-else 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 v-if=\"data.open\" ref=\"overlay\" :root=\"rootRef\" class=\"pl-autocomplete__options\" tabindex=\"-1\" :gap=\"3\">\n          <DropdownListItem\n            v-for=\"(item, index) in renderedOptionsRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :is-selected=\"item.isSelected\"\n            :is-hovered=\"item.isActive\"\n            :size=\"optionSize\"\n            @click.stop=\"selectOption(item)\"\n          />\n          <div v-if=\"!renderedOptionsRef.length\" class=\"nothing-found\">Nothing found</div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-autocomplete__contour\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"pl-autocomplete__error\">{{ computedError }}</div>\n    <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-autocomplete__helper\">{{ loadingOptionsHelper }}</div>\n    <div v-else-if=\"helper\" class=\"pl-autocomplete__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"names":["__default__","model","_useModel","props","__props","slots","_useSlots","rootRef","ref","input","overlayRef","useTemplateRef","search","data","reactive","findActiveIndex","tap","renderedOptionsRef","o","deepEqual","v","updateActive","loadedOptionsRef","modelOptionRef","computed","normalizeListOptions","opt","index","selectedIndex","isLoadingOptions","isLoadingError","isDisabled","computedError","getErrorMessage","textValue","modelOption","unref","options","item","computedPlaceholder","hasValue","tabindex","selectOption","_a","clear","setFocusOnInput","toggleOpen","watch","onInputFocus","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","open","activeIndex","length","it","localIndex","delta","newIndex","useLabelNotch","watchPostEffect","searchDebounced","refDebounced","optionsRequest","useWatchFetch","modelOptionRequest","result","err","loading"],"mappings":"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"}

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

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

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

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