@milaboratories/uikit 2.6.1 → 2.6.3

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

@@ -1,11 +1,11 @@
 (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 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 { defineComponent as V, mergeModels as k, inject as m, toRef as d, useModel as C, computed as p, createElementBlock as f, openBlock as v, createVNode as r, unref as $, normalizeClass as s, withCtx as y, 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.vue.js";
+import b from "./ExpandTransition.vue2.js";
 
-const b = { class: "pl-accordion-section" }, E = /* @__PURE__ */ V({
+const w = { class: "pl-accordion-section" }, R = /* @__PURE__ */ V({
   __name: "PlAccordionSection",
   props: /* @__PURE__ */ k({
     label: {},
@@ -15,35 +15,35 @@ const b = { class: "pl-accordion-section" }, E = /* @__PURE__ */ V({
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(y) {
-    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({
+  setup(t) {
+    const o = m("pl-accordion-model", () => d(""), !0), c = m("pl-accordion-props", () => d({ multiple: !1 }), !0), a = C(t, "modelValue"), n = B(), u = p(() => !c || c.value.multiple), l = p({
       get() {
-        return c.value ? t.value : o ? o.value === a : t.value;
+        return u.value ? a.value : o ? o.value === n : a.value;
       },
       set(e) {
-        c.value ? t.value = e : o && (o.value = o.value === a ? "" : a);
+        u.value ? a.value = e : o && (o.value = o.value === n ? "" : n);
       }
     });
-    return (e, u) => (f(), d("div", b, [
-      n(v(P), {
-        class: r(e.$style.separator),
-        compact: e.compact,
-        onClick: u[0] || (u[0] = (w) => l.value = !l.value)
+    return (e, i) => (v(), f("div", w, [
+      r($(P), {
+        class: s(e.$style.separator),
+        compact: t.compact,
+        onClick: i[0] || (i[0] = (I) => l.value = !l.value)
       }, {
-        default: $(() => [
-          n(v(N), {
+        default: y(() => [
+          r($(N), {
             name: "chevron-right",
-            class: r([{ [e.$style.down]: l.value }, e.$style.chevron])
+            class: s([{ [e.$style.down]: l.value }, e.$style.chevron])
           }, null, 8, ["class"]),
-          M(" " + S(e.label), 1)
+          M(" " + S(t.label), 1)
         ]),
         _: 1
       }, 8, ["class", "compact"]),
-      n(_, null, {
-        default: $(() => [
-          l.value ? (f(), d("div", {
+      r(b, null, {
+        default: y(() => [
+          l.value ? (v(), f("div", {
             key: 0,
-            class: r(e.$style.content)
+            class: s(e.$style.content)
           }, [
             h(e.$slots, "default")
           ], 2)) : g("", !0)
@@ -54,6 +54,6 @@ const b = { class: "pl-accordion-section" }, E = /* @__PURE__ */ V({
   }
 });
 export {
-  E as default
+  R as default
 };
 //# sourceMappingURL=PlAccordionSection.vue2.js.map

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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_unref","PlSectionSeparator","_normalizeClass","$style","_cache","$event","PlMaskIcon16","_createTextVNode","ExpandTransition","_renderSlot","_ctx"],"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;sBAeCM,EAAA,GAAAC,EAUM,OAVNC,GAUM;AAAA,MATJC,EAGqBC,EAAAC,CAAA,GAAA;AAAA,QAHA,OAAKC,EAAEC,EAAAA,OAAO,SAAS;AAAA,QAAG,SAASd,EAAA;AAAA,QAAU,SAAKe,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEX,EAAA,QAAI,CAAIA,EAAA;AAAA,MAAA;mBAC/E,MAAwF;AAAA,UAAxFK,EAAwFC,EAAAM,CAAA,GAAA;AAAA,YAA1E,MAAK;AAAA,YAAiB,OAAKJ,EAAA,CAAA,EAAA,CAAMC,SAAO,IAAI,GAAGT,EAAA,MAAA,GAAQS,EAAAA,OAAO,OAAO,CAAA;AAAA,UAAA;UAAKI,EAAA,QACrFlB,EAAA,KAAK,GAAA,CAAA;AAAA,QAAA;;;MAEVU,EAImBS,GAAA,MAAA;AAAA,mBAHjB,MAEM;AAAA,UAFKd,EAAA,cAAXG,EAEM,OAAA;AAAA;YAFY,OAAKK,EAAEC,EAAAA,OAAO,OAAO;AAAA,UAAA;YACrCM,EAAQC,EAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;"}

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

@@ -1,13 +1,13 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(`.pl-alert{--text-font-family: var(--font-family-base);--text-white-space: normal;--indent: 24px;position:relative;padding:12px;display:flex;flex-wrap:nowrap;gap:12px;border:1px solid var(--border-color-default);border-radius:6px;color:var(--txt-01)}.pl-alert.monospace{--text-font-family: var(--font-family-monospace)}.pl-alert.whiteSpacePre{--text-white-space: pre}.pl-alert__error{background:var(--notification-error)}.pl-alert__warn{background:var(--notification-warning)}.pl-alert__success{background:var(--notification-success)}.pl-alert__info{background:var(--notification-neutral)}.pl-alert__icon{width:24px}.pl-alert__main{display:flex;flex-direction:column;min-height:24px;flex:1;overflow:hidden;width:100%;gap:6px}.pl-alert__main label{font-size:20px;font-weight:500;line-height:24px;letter-spacing:-.2px}.pl-alert__main__text{font-size:14px;font-weight:500;line-height:20px;font-family:var(--text-font-family);white-space:var(--text-white-space);max-width:100%;flex:1;--thumb-color: var(--ic-02);overflow-y:auto}.pl-alert__main__text::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-alert__main__text::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-alert__main__text::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-alert__close-btn{position:absolute;top:10px;right:12px;cursor:pointer;background-color:#d3d7e0;mask-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.99954%2018L11.9995%2012M11.9995%2012L17.9995%206M11.9995%2012L5.99954%206M11.9995%2012L17.9995%2018'%20stroke='%23110529'%20stroke-width='1.5'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.99954%2018L11.9995%2012M11.9995%2012L17.9995%206M11.9995%2012L5.99954%206M11.9995%2012L17.9995%2018'%20stroke='%23110529'%20stroke-width='1.5'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:24px;-webkit-mask-size:24px;width:24px;height:24px;transition:all .1s ease-in-out}.pl-alert__close-btn:hover{background-color:var(--main-dark-color)}`)),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { defineComponent as r, createElementBlock as l, createCommentVNode as o, openBlock as a, normalizeStyle as d, normalizeClass as n, createElementVNode as t, toDisplayString as p, renderSlot as u } from "vue";
+import { defineComponent as c, createElementBlock as t, createCommentVNode as l, openBlock as a, normalizeStyle as r, normalizeClass as d, createElementVNode as o, toDisplayString as u, renderSlot as m } from "vue";
 
-const m = {
+const y = {
   key: 0,
   class: "pl-alert__icon"
-}, c = { class: "pl-alert__main" }, y = { key: 0 }, f = { class: "pl-alert__main__text" }, v = {
+}, f = { class: "pl-alert__main" }, v = { key: 0 }, p = { class: "pl-alert__main__text" }, b = {
   name: "PlAlert"
-}, B = /* @__PURE__ */ r({
-  ...v,
+}, S = /* @__PURE__ */ c({
+  ...b,
   props: {
     modelValue: { type: Boolean, default: !0 },
     type: { default: void 0 },
@@ -19,40 +19,40 @@ const m = {
     maxHeight: { default: void 0 }
   },
   emits: ["update:modelValue"],
-  setup(_) {
-    const i = {
+  setup(e) {
+    const s = {
       success: "success",
       warn: "warning",
       info: "edit",
       error: "error"
     };
-    return (e, s) => e.modelValue ? (a(), l("div", {
+    return (n, i) => e.modelValue ? (a(), t("div", {
       key: 0,
-      class: n(["pl-alert", [{ monospace: e.monospace, whiteSpacePre: e.whiteSpacePre }, e.type ? `pl-alert__${e.type}` : ""]]),
-      style: d({ maxHeight: e.maxHeight })
+      class: d(["pl-alert", [{ monospace: e.monospace, whiteSpacePre: e.whiteSpacePre }, e.type ? `pl-alert__${e.type}` : ""]]),
+      style: r({ maxHeight: e.maxHeight })
     }, [
-      e.icon && e.type ? (a(), l("div", m, [
-        t("div", {
-          class: n(`icon-24 icon-${i[e.type]}`)
+      e.icon && e.type ? (a(), t("div", y, [
+        o("div", {
+          class: d(`icon-24 icon-${s[e.type]}`)
         }, null, 2)
-      ])) : o("", !0),
-      t("div", c, [
-        e.label ? (a(), l("label", y, p(e.label), 1)) : o("", !0),
-        t("div", f, [
-          u(e.$slots, "default")
+      ])) : l("", !0),
+      o("div", f, [
+        e.label ? (a(), t("label", v, u(e.label), 1)) : l("", !0),
+        o("div", p, [
+          m(n.$slots, "default")
         ])
       ]),
-      e.closeable ? (a(), l("div", {
+      e.closeable ? (a(), t("div", {
         key: 1,
         class: "pl-alert__close-btn",
         "aria-label": "Close alert",
         role: "button",
-        onClick: s[0] || (s[0] = (b) => e.$emit("update:modelValue", !1))
-      })) : o("", !0)
-    ], 6)) : o("", !0);
+        onClick: i[0] || (i[0] = (h) => n.$emit("update:modelValue", !1))
+      })) : l("", !0)
+    ], 6)) : l("", !0);
   }
 });
 export {
-  B as default
+  S as default
 };
 //# sourceMappingURL=PlAlert.vue.js.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":";;;;;2FACAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;AAkEA,UAAMC,IAAU;AAAA,MACd,SAAS;AAAA,MACT,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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","__props","_createElementBlock","_normalizeClass","_openBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_4","_renderSlot","_ctx","$emit"],"mappings":";;;;;2FACAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;AAkEA,UAAMC,IAAU;AAAA,MACd,SAAS;AAAA,MACT,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;qBAKIC,EAAA,mBAAXC,EASM,OAAA;AAAA;MATiB,OAAKC,EAAA,CAAC,YAAU,CAAA,EAAA,WAAmCF,EAAA,0BAAWA,EAAA,cAAA,GAAiBA,EAAA,OAAI,aAAgBA,EAAA,IAAI,KAAA,EAAA,CAAA,CAAA;AAAA,MAArF,sBAASA,EAAA,WAAS;AAAA,IAAA;MAC9CA,EAAA,QAAQA,EAAA,QAAnBG,KAAAF,EAEM,OAFNG,GAEM;AAAA,QADJC,EAAgD,OAAA;AAAA,UAA1C,OAAKH,EAAA,gBAAkBH,EAAQC,EAAA,IAAI,CAAA,EAAA;AAAA,QAAA;;MAE3CK,EAGM,OAHNC,GAGM;AAAA,QAFSN,EAAA,SAAbG,EAAA,GAAAF,EAAuC,cAAhBD,EAAA,KAAK,GAAA,CAAA;QAC5BK,EAAgD,OAAhDE,GAAgD;AAAA,UAAdC,EAAQC,EAAA,QAAA,SAAA;AAAA,QAAA;;MAEjCT,EAAA,kBAAXC,EAAsI,OAAA;AAAA;QAAhH,OAAM;AAAA,QAAsB,cAAW;AAAA,QAAc,MAAK;AAAA,QAAU,gCAAOS,EAAAA,MAAK,qBAAA,EAAA;AAAA,MAAA;;;;"}

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

@@ -64,6 +64,10 @@ declare const _default: <M = unknown>(__VLS_props: NonNullable<Awaited<typeof __
          * Formatter for the selected value if its label is absent
          */
         formatValue?: (value: M) => string;
+        /**
+         * Makes some of corners not rounded
+         * */
+        groupPosition?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "middle";
     }) & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;

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

@@ -1,34 +1,36 @@
 (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 m, useTemplateRef as de, reactive as pe, computed as v, unref as c, watch as h, watchPostEffect as ve, createElementBlock as s, openBlock as a, withModifiers as O, createElementVNode as _, createCommentVNode as d, 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 ge } from "vue";
+.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}
+.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(--v5deba9de) 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(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+import { defineComponent as ie, mergeModels as ue, useModel as se, useSlots as ce, ref as h, useTemplateRef as de, reactive as pe, computed as f, unref as d, watch as g, watchPostEffect as ve, createElementBlock as u, openBlock as n, withModifiers as S, createElementVNode as _, createCommentVNode as p, normalizeClass as F, createBlock as w, createVNode as z, withDirectives as fe, vModelText as me, withCtx as M, createTextVNode as he, toDisplayString as x, renderSlot as N, Fragment as ge, renderList as _e } from "vue";
 
 import { tap as ye } from "../../helpers/functions.js";
 import ke from "../PlTooltip/PlTooltip.vue.js";
 import we from "../../utils/DoubleContour.vue.js";
-import { useLabelNotch as Ie } from "../../utils/useLabelNotch.js";
+
+import { useLabelNotch as xe } 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 Ie from "../DropdownListItem.vue.js";
+import be 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 Se from "../PlIcon16/PlIcon16.vue.js";
+import Oe 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 { getErrorMessage as Ae } from "../../helpers/error.js";
-import Ce from "../PlSvg/PlSvg.vue.js";
-import De from "../../assets/images/required.svg.js";
-const Fe = ["tabindex"], Me = { class: "pl-autocomplete__container" }, Re = { class: "pl-autocomplete__field" }, $e = ["disabled", "placeholder"], Be = {
+import $e from "../PlSvg/PlSvg.vue.js";
+import Ce from "../../assets/images/required.svg.js";
+const De = ["tabindex"], Fe = { class: "pl-autocomplete__container" }, Me = { class: "pl-autocomplete__field" }, Re = ["disabled", "placeholder"], Be = {
   key: 0,
   class: "input-value"
-}, Le = { class: "pl-autocomplete__controls" }, qe = {
+}, Le = { class: "pl-autocomplete__controls" }, Pe = {
   key: 2,
   class: "arrow-icon arrow-icon-default"
-}, ze = { key: 0 }, Ne = {
+}, qe = { key: 0 }, ze = {
   key: 0,
   class: "nothing-found"
-}, Pe = {
+}, Ne = {
   key: 0,
   class: "pl-autocomplete__error"
 }, Te = {
@@ -39,9 +41,9 @@ const Fe = ["tabindex"], Me = { class: "pl-autocomplete__container" }, Re = { cl
   class: "pl-autocomplete__helper"
 }, Ue = {
   name: "PlAutocomplete"
-}, co = /* @__PURE__ */ se({
+}, po = /* @__PURE__ */ ie({
   ...Ue,
-  props: /* @__PURE__ */ ie({
+  props: /* @__PURE__ */ ue({
     optionsSearch: {},
     modelSearch: { type: Function, default: void 0 },
     label: { default: "" },
@@ -55,116 +57,117 @@ const Fe = ["tabindex"], Me = { class: "pl-autocomplete__container" }, Re = { cl
     arrowIcon: { default: void 0 },
     arrowIconLarge: { default: void 0 },
     optionSize: { default: "small" },
-    formatValue: { type: Function, default: (b) => String(b) }
+    formatValue: { type: Function, default: (a) => String(a) },
+    groupPosition: { default: void 0 }
   }, {
     modelValue: { required: !0 },
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(b) {
-    const n = ue(b, "modelValue"), u = b, U = ce(), p = m(), x = m(), $ = de("overlay"), i = m(null), t = pe({
+  setup(a) {
+    const r = se(a, "modelValue"), c = a, U = ce(), v = h(), O = h(), R = de("overlay"), s = h(null), t = pe({
       activeIndex: -1,
       open: !1
     }), K = () => ye(
-      y.value.findIndex((e) => I(e.value, n.value)),
+      k.value.findIndex((e) => I(e.value, r.value)),
       (e) => e < 0 ? 0 : e
-    ), W = () => t.activeIndex = K(), E = m([]), g = m(), y = v(() => T(E.value).map((e, o) => ({
+    ), W = () => t.activeIndex = K(), E = h([]), y = h(), k = f(() => T(E.value).map((e, o) => ({
       ...e,
       index: o,
       isSelected: o === j.value,
       isActive: o === t.activeIndex
-    }))), S = m(!0), V = m(!1), A = v(() => u.disabled), j = v(() => E.value.findIndex((e) => I(e.value, n.value))), C = v(() => {
-      if (!S.value) {
-        if (u.error)
-          return Ae(u.error);
+    }))), b = h(!0), V = h(!1), A = f(() => c.disabled), j = f(() => E.value.findIndex((e) => I(e.value, r.value))), $ = f(() => {
+      if (!b.value) {
+        if (c.error)
+          return Ae(c.error);
         if (V.value)
           return "Data loading error";
       }
-    }), B = v(() => {
-      const e = c(g), o = c(y), 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 = v(() => !t.open && n.value ? "" : n.value ? String(B.value) : u.placeholder), J = v(() => n.value !== void 0 && n.value !== null), Q = v(() => A.value ? void 0 : "0"), L = (e) => {
+    }), B = f(() => {
+      const e = d(y), o = d(k), l = e ?? o.find((i) => I(i.value, r.value)) ?? o.find((i) => I(i.value, r.value));
+      return (l == null ? void 0 : l.label) || (r.value ? c.formatValue(r.value) : "");
+    }), G = f(() => !t.open && r.value ? "" : r.value ? String(B.value) : c.placeholder), J = f(() => r.value !== void 0 && r.value !== null), Q = f(() => A.value ? void 0 : "0"), L = (e) => {
       var o;
-      n.value = e == null ? void 0 : e.value, g.value = e, i.value = null, t.open = !1, (o = p == null ? void 0 : p.value) == null || o.focus();
+      r.value = e == null ? void 0 : e.value, y.value = e, s.value = null, t.open = !1, (o = v == null ? void 0 : v.value) == null || o.focus();
     }, X = () => {
-      n.value = void 0, g.value = void 0;
+      r.value = void 0, y.value = void 0;
     }, Y = () => {
       var e;
-      return (e = x.value) == null ? void 0 : e.focus();
+      return (e = O.value) == null ? void 0 : e.focus();
     }, Z = () => {
       t.open = !t.open;
     };
-    h(() => t.open, (e) => {
-      i.value = e ? "" : null;
+    g(() => t.open, (e) => {
+      s.value = e ? "" : null;
     });
     const ee = () => {
       t.open = !0;
     }, oe = (e) => {
-      var l, r, f;
+      var l, i, m;
       const o = e.relatedTarget;
-      !((l = p.value) != null && l.contains(o)) && !((f = (r = $.value) == null ? void 0 : r.listRef) != null && f.contains(o)) && (i.value = null, t.open = !1);
+      !((l = v.value) != null && l.contains(o)) && !((m = (i = R.value) == null ? void 0 : i.listRef) != null && m.contains(o)) && (s.value = null, t.open = !1);
     }, te = (e) => {
-      var z;
+      var q;
       if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.code))
         e.preventDefault();
       else
         return;
       const { open: o, activeIndex: l } = t;
       if (!o) {
-        e.code === "Enter" && (t.open = !0, i.value = "");
+        e.code === "Enter" && (t.open = !0, s.value = "");
         return;
       }
-      e.code === "Escape" && (t.open = !1, i.value = null, (z = p.value) == null || z.focus());
-      const r = c(y), { length: f } = r;
-      if (!f)
+      e.code === "Escape" && (t.open = !1, s.value = null, (q = v.value) == null || q.focus());
+      const i = d(k), { length: m } = i;
+      if (!m)
         return;
-      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 + f) % f;
-      t.activeIndex = y.value[re].index ?? -1;
+      e.code === "Enter" && L(i.find((D) => D.index === l));
+      const ae = i.findIndex((D) => D.index === l) ?? -1, ne = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, re = Math.abs(ae + ne + m) % m;
+      t.activeIndex = k.value[re].index ?? -1;
     };
-    Ie(p), h(() => n.value, W, { immediate: !0 }), h(
+    xe(v), g(() => r.value, W, { immediate: !0 }), g(
       () => t.open,
       (e) => {
         var o;
-        return e ? (o = x.value) == null ? void 0 : o.focus() : "";
+        return e ? (o = O.value) == null ? void 0 : o.focus() : "";
       }
     ), ve(() => {
       var e;
-      i.value, t.activeIndex >= 0 && t.open && ((e = $.value) == null || e.scrollIntoActive());
+      s.value, t.activeIndex >= 0 && t.open && ((e = R.value) == null || e.scrollIntoActive());
     });
-    const le = Ve(i, 300, { maxWait: 1e3 }), D = H(() => le.value, async (e) => {
+    const le = Ve(s, 300, { maxWait: 1e3 }), C = H(() => le.value, async (e) => {
       if (e !== null)
-        return u.optionsSearch(e);
-    }), q = H(() => n.value, async (e) => {
+        return c.optionsSearch(e);
+    }), P = H(() => r.value, async (e) => {
       var o, l;
-      return e && !I((o = g.value) == null ? void 0 : o.value, e) ? u.modelSearch ? u.modelSearch(e) : (l = await u.optionsSearch(String(e))) == null ? void 0 : l[0] : g.value;
+      return e && !I((o = y.value) == null ? void 0 : o.value, e) ? c.modelSearch ? c.modelSearch(e) : (l = await c.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));
-    }), h(() => q.value, (e) => {
-      e && (g.value = T([e])[0]);
-    }), h(() => D.error, (e) => {
+    return g(() => C.value, (e) => {
+      e && (E.value = e, s.value !== null && (V.value = !1));
+    }), g(() => P.value, (e) => {
+      e && (y.value = T([e])[0]);
+    }), g(() => C.error, (e) => {
       e && (V.value = !!e);
-    }), h(() => D.loading || q.loading, (e) => {
-      S.value = e;
-    }), (e, o) => (a(), s("div", {
+    }), g(() => C.loading || P.loading, (e) => {
+      b.value = e;
+    }), (e, o) => (n(), u("div", {
       class: "pl-autocomplete__envelope",
-      onClick: O(Y, ["stop"])
+      onClick: S(Y, ["stop"])
     }, [
       _("div", {
         ref_key: "rootRef",
-        ref: p,
+        ref: v,
         tabindex: Q.value,
-        class: M(["pl-autocomplete", { open: t.open, error: !!C.value, disabled: A.value }]),
+        class: F(["pl-autocomplete", { open: t.open, error: !!$.value, disabled: A.value }]),
         onKeydown: te,
         onFocusout: oe
       }, [
-        _("div", Me, [
-          _("div", Re, [
+        _("div", Fe, [
+          _("div", Me, [
             fe(_("input", {
               ref_key: "input",
-              ref: x,
-              "onUpdate:modelValue": o[0] || (o[0] = (l) => i.value = l),
+              ref: O,
+              "onUpdate:modelValue": o[0] || (o[0] = (l) => s.value = l),
               type: "text",
               tabindex: "-1",
               disabled: A.value,
@@ -172,89 +175,92 @@ const Fe = ["tabindex"], Me = { class: "pl-autocomplete__container" }, Re = { cl
               spellcheck: "false",
               autocomplete: "chrome-off",
               onFocus: ee
-            }, null, 40, $e), [
-              [me, i.value]
+            }, null, 40, Re), [
+              [me, s.value]
             ]),
-            t.open ? d("", !0) : (a(), s("div", Be, [
-              N(Se, null, {
-                default: R(() => [
-                  he(w(B.value), 1)
+            t.open ? p("", !0) : (n(), u("div", Be, [
+              z(be, null, {
+                default: M(() => [
+                  he(x(B.value), 1)
                 ]),
                 _: 1
               })
             ])),
             _("div", Le, [
-              S.value ? (a(), k(c(xe), {
+              b.value ? (n(), w(d(Oe), {
                 key: 0,
                 name: "loading"
-              })) : d("", !0),
-              e.clearable && J.value ? (a(), k(c(Oe), {
+              })) : p("", !0),
+              a.clearable && J.value ? (n(), w(d(Se), {
                 key: 1,
                 class: "clear",
                 name: "delete-clear",
-                onClick: O(X, ["stop"])
-              })) : d("", !0),
-              P(e.$slots, "append"),
+                onClick: S(X, ["stop"])
+              })) : p("", !0),
+              N(e.$slots, "append"),
               _("div", {
                 class: "pl-autocomplete__arrow-wrapper",
-                onClick: O(Z, ["stop"])
+                onClick: S(Z, ["stop"])
               }, [
-                e.arrowIconLarge ? (a(), s("div", {
+                a.arrowIconLarge ? (n(), u("div", {
                   key: 0,
-                  class: M(["arrow-icon", [`icon-24 ${e.arrowIconLarge}`]])
-                }, null, 2)) : e.arrowIcon ? (a(), s("div", {
+                  class: F(["arrow-icon", [`icon-24 ${a.arrowIconLarge}`]])
+                }, null, 2)) : a.arrowIcon ? (n(), u("div", {
                   key: 1,
-                  class: M(["arrow-icon", [`icon-16 ${e.arrowIcon}`]])
-                }, null, 2)) : (a(), s("div", qe))
+                  class: F(["arrow-icon", [`icon-16 ${a.arrowIcon}`]])
+                }, null, 2)) : (n(), u("div", Pe))
               ])
             ])
           ]),
-          e.label ? (a(), s("label", ze, [
-            e.required ? (a(), k(c(Ce), {
+          a.label ? (n(), u("label", qe, [
+            a.required ? (n(), w(d($e), {
               key: 0,
-              uri: c(De)
-            }, null, 8, ["uri"])) : d("", !0),
-            _("span", null, w(e.label), 1),
-            U.tooltip ? (a(), k(c(ke), {
+              uri: d(Ce)
+            }, null, 8, ["uri"])) : p("", !0),
+            _("span", null, x(a.label), 1),
+            U.tooltip ? (n(), w(d(ke), {
               key: 1,
               class: "info",
               position: "top"
             }, {
-              tooltip: R(() => [
-                P(e.$slots, "tooltip")
+              tooltip: M(() => [
+                N(e.$slots, "tooltip")
               ]),
               _: 3
-            })) : d("", !0)
-          ])) : d("", !0),
-          t.open ? (a(), k(c(Ee), {
+            })) : p("", !0)
+          ])) : p("", !0),
+          t.open ? (n(), w(d(Ee), {
             key: 1,
             ref: "overlay",
-            root: p.value,
+            root: v.value,
             class: "pl-autocomplete__options",
             tabindex: "-1",
             gap: 3
           }, {
-            default: R(() => [
-              (a(!0), s(_e, null, ge(y.value, (l, r) => (a(), k(be, {
-                key: r,
+            default: M(() => [
+              (n(!0), u(ge, null, _e(k.value, (l, i) => (n(), w(Ie, {
+                key: i,
                 option: l,
                 "is-selected": l.isSelected,
                 "is-hovered": l.isActive,
-                size: e.optionSize,
-                onClick: O((f) => L(l), ["stop"])
+                size: a.optionSize,
+                onClick: S((m) => L(l), ["stop"])
               }, null, 8, ["option", "is-selected", "is-hovered", "size", "onClick"]))), 128)),
-              y.value.length ? d("", !0) : (a(), s("div", Ne, "Nothing found"))
+              k.value.length ? p("", !0) : (n(), u("div", ze, "Nothing found"))
             ]),
             _: 1
-          }, 8, ["root"])) : d("", !0),
-          N(we, { class: "pl-autocomplete__contour" })
+          }, 8, ["root"])) : p("", !0),
+          z(we, {
+            class: "pl-autocomplete__contour",
+            "group-position": a.groupPosition
+          }, null, 8, ["group-position"])
         ])
-      ], 42, Fe),
-      C.value ? (a(), s("div", Pe, w(C.value), 1)) : S.value && e.loadingOptionsHelper ? (a(), s("div", Te, w(e.loadingOptionsHelper), 1)) : e.helper ? (a(), s("div", He, w(e.helper), 1)) : d("", !0)
+      ], 42, De),
+      $.value ? (n(), u("div", Ne, x($.value), 1)) : b.value && a.loadingOptionsHelper ? (n(), u("div", Te, x(a.loadingOptionsHelper), 1)) : a.helper ? (n(), u("div", He, x(a.helper), 1)) : p("", !0)
     ]));
   }
 });
 export {
-  co as default
+  po as default
 };
 //# sourceMappingURL=PlAutocomplete.vue.js.map