@milaboratories/uikit 2.6.1 → 2.6.3

package/dist/components/PlDialogModal/PlDialogModal.vue.js

@@ -1,5 +1,5 @@
 (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".pl-dialog-modal{--padding-top: 24px;--border-radius: 16px;--title-padding: 24px 24px 0 24px;min-height:400px;max-height:calc(100vh - 48px);max-width:calc(100% - 48px);min-width:448px;position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%);background-color:#fff;padding-top:var(--padding-top);display:flex;flex-direction:column;box-shadow:0 2px 8px #24223d1f;border-radius:var(--border-radius)}.pl-dialog-modal.has-title{--padding-top: 0}.pl-dialog-modal.has-content{--title-padding: 24px}.pl-dialog-modal__title{display:flex;align-items:center;font-family:var(--font-family-base);font-size:28px;font-style:normal;font-weight:500;line-height:32px;letter-spacing:-.56px;padding:var(--title-padding)}.pl-dialog-modal__content{flex:1;display:flex;flex-direction:column;gap:24px;padding:16px 24px 40px;min-height:0;line-height:20px;--thumb-color: var(--ic-02);overflow-y:auto}.pl-dialog-modal__content::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dialog-modal__content::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dialog-modal__content::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dialog-modal__content.no-content-gutters{padding:0}.pl-dialog-modal__content.no-top-content-gutter{padding-top:0}.pl-dialog-modal__actions{display:flex;align-items:center;gap:6px;min-height:88px;padding:0 24px}.pl-dialog-modal__actions button{min-width:160px}.pl-dialog-modal__actions.has-top-border{border-top:1px solid var(--border-color-div-grey)}.pl-dialog-modal .alert-error{background-color:var(--txt-error);color:#fff;font-weight:500;padding:12px;border-radius:6px}.pl-dialog-modal .alert-warning{background-color:#fee0a3;font-weight:500;padding:12px;border-radius:6px}.pl-dialog-modal__shadow{position:absolute;z-index:var(--z-dialog);top:var(--title-bar-height);left:0;right:0;bottom:0;background-color:#000000a3}.pl-dialog-modal .close-modal-btn{position:absolute;top:4px;right:4px}")),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { defineComponent as B, useSlots as H, ref as _, computed as v, createBlock as p, openBlock as t, Teleport as V, createVNode as w, Transition as b, withCtx as x, createElementBlock as u, createCommentVNode as l, createElementVNode as c, mergeProps as T, withModifiers as $, renderSlot as r, normalizeClass as f } from "vue";
+import { defineComponent as B, useSlots as H, ref as x, computed as v, createBlock as p, openBlock as o, Teleport as V, createVNode as w, Transition as b, withCtx as T, createElementBlock as r, createCommentVNode as i, createElementVNode as f, mergeProps as _, withModifiers as $, renderSlot as m, normalizeClass as h } from "vue";
 import { useEventListener as E } from "../../composition/useEventListener.js";
 
 import G from "../../utils/PlCloseModalBtn.vue.js";
@@ -25,66 +25,66 @@ const O = {
     size: { default: void 0 }
   },
   emits: ["update:modelValue"],
-  setup(h, { emit: g }) {
-    const o = H(), i = g, n = h, s = _(), y = v(() => {
-      const { width: e, height: a, minHeight: m, maxHeight: C, size: d } = n;
-      return d === "small" ? {
+  setup(t, { emit: g }) {
+    const a = H(), n = g, s = t, d = x(), y = v(() => {
+      const { width: e, height: l, minHeight: c, maxHeight: C, size: u } = s;
+      return u === "small" ? {
         width: "448px",
         height: "440px",
         minHeight: "auto",
         maxHeight: "auto"
-      } : d === "medium" ? {
+      } : u === "medium" ? {
         width: "720px",
         height: "720px",
         minHeight: "auto",
         maxHeight: "auto"
-      } : d === "large" ? {
+      } : u === "large" ? {
         width: "1080px",
         height: "880px",
         minHeight: "auto",
         maxHeight: "auto"
-      } : { width: e, height: a, minHeight: m, maxHeight: C };
+      } : { width: e, height: l, minHeight: c, maxHeight: C };
     });
     function k(e) {
-      s.value && n.closeOnOutsideClick && document.contains(e.target) && !s.value.contains(e.target) && i("update:modelValue", !1);
+      d.value && s.closeOnOutsideClick && document.contains(e.target) && !d.value.contains(e.target) && n("update:modelValue", !1);
     }
     return E(document.body, "keyup", (e) => {
-      n.modelValue && e.code === "Escape" && i("update:modelValue", !1);
-    }), (e, a) => (t(), p(V, { to: "body" }, [
+      s.modelValue && e.code === "Escape" && n("update:modelValue", !1);
+    }), (e, l) => (o(), p(V, { to: "body" }, [
       w(b, { name: "dialog" }, {
-        default: x(() => [
-          e.modelValue ? (t(), u("div", {
+        default: T(() => [
+          t.modelValue ? (o(), r("div", {
             key: 0,
             class: "pl-dialog-modal__shadow",
             onClick: k
           }, [
-            c("div", T(e.$attrs, {
+            f("div", _(e.$attrs, {
               ref_key: "modal",
-              ref: s,
-              class: ["pl-dialog-modal", { "has-title": o.title, "has-content": o.default }],
+              ref: d,
+              class: ["pl-dialog-modal", { "has-title": a.title, "has-content": a.default }],
               style: y.value
             }), [
-              e.closable ? (t(), p(G, {
+              t.closable ? (o(), p(G, {
                 key: 0,
                 class: "close-modal-btn",
-                onClick: a[0] || (a[0] = $((m) => i("update:modelValue", !1), ["stop"]))
-              })) : l("", !0),
-              o.title ? (t(), u("div", O, [
-                r(e.$slots, "title")
-              ])) : l("", !0),
-              c("div", {
-                class: f(["pl-dialog-modal__content", { "no-content-gutters": e.noContentGutters, "no-top-content-gutter": e.noTopContentGutter }])
+                onClick: l[0] || (l[0] = $((c) => n("update:modelValue", !1), ["stop"]))
+              })) : i("", !0),
+              a.title ? (o(), r("div", O, [
+                m(e.$slots, "title")
+              ])) : i("", !0),
+              f("div", {
+                class: h(["pl-dialog-modal__content", { "no-content-gutters": t.noContentGutters, "no-top-content-gutter": t.noTopContentGutter }])
               }, [
-                r(e.$slots, "default")
+                m(e.$slots, "default")
               ], 2),
-              o.actions ? (t(), u("div", {
+              a.actions ? (o(), r("div", {
                 key: 2,
-                class: f(["pl-dialog-modal__actions", { "has-top-border": e.actionsHasTopBorder }])
+                class: h(["pl-dialog-modal__actions", { "has-top-border": t.actionsHasTopBorder }])
               }, [
-                r(e.$slots, "actions")
-              ], 2)) : l("", !0)
+                m(e.$slots, "actions")
+              ], 2)) : i("", !0)
             ], 16)
-          ])) : l("", !0)
+          ])) : i("", !0)
         ]),
         _: 3
       })

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

@@ -1 +1 @@
-{"version":3,"file":"PlDialogModal.vue.js","sources":["../../../src/components/PlDialogModal/PlDialogModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { useEventListener } from '../../composition/useEventListener';\nimport './pl-dialog-modal.scss';\nimport { computed, ref } from 'vue';\nimport PlCloseModalBtn from '../../utils/PlCloseModalBtn.vue';\nimport type { Size } from '../../types';\n\nconst slots = defineSlots<{\n  title?: () => unknown;\n  default?: () => unknown;\n  actions?: () => unknown;\n}>();\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Determines whether the modal is open\n     */\n    modelValue: boolean;\n    /**\n     * css width (default value is `448px`)\n     */\n    width?: string;\n    /**\n     * css height (default value is `auto`)\n     */\n    height?: string;\n    /**\n     * css min-height (default value is `auto`)\n     */\n    minHeight?: string;\n    /**\n     * css min-height (default value is `auto` but recommended is 440px)\n     */\n    maxHeight?: string;\n    /**\n     * Enables a button to close the modal (default: `true`)\n     */\n    closable?: boolean;\n    /**\n     * If `true` content gutters are removed\n     */\n    noContentGutters?: boolean;\n    /**\n     * If `true` top content gutter is removed\n     */\n    noTopContentGutter?: boolean;\n    /**\n     * Actions slot has a top border (default: `true`)\n     */\n    actionsHasTopBorder?: boolean;\n    /**\n     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)\n     */\n    closeOnOutsideClick?: boolean;\n    /**\n     * Predefined size (standard small | medium | large). Takes precedence over (min|max)(width|height) properties. Not defined by default.\n     */\n    size?: Size | undefined;\n  }>(),\n  {\n    width: '448px',\n    minHeight: 'auto',\n    maxHeight: 'auto',\n    height: 'auto',\n    closable: true,\n    noContentGutters: false,\n    actionsHasTopBorder: true,\n    size: undefined,\n  },\n);\n\nconst modal = ref<HTMLElement>();\n\nconst style = computed(() => {\n  const { width, height, minHeight, maxHeight, size } = props;\n\n  if (size === 'small') {\n    return {\n      width: '448px',\n      height: '440px',\n      minHeight: 'auto',\n      maxHeight: 'auto',\n    };\n  }\n\n  if (size === 'medium') {\n    return {\n      width: '720px',\n      height: '720px',\n      minHeight: 'auto',\n      maxHeight: 'auto',\n    };\n  }\n\n  if (size === 'large') {\n    return {\n      width: '1080px',\n      height: '880px',\n      minHeight: 'auto',\n      maxHeight: 'auto',\n    };\n  }\n\n  return { width, height, minHeight, maxHeight };\n});\n\nfunction onClickShadow(ev: Event) {\n  if (modal.value && props.closeOnOutsideClick && document.contains(ev.target as Node) && !modal.value.contains(ev.target as Node)) {\n    emit('update:modelValue', false);\n  }\n}\n\nuseEventListener(document.body, 'keyup', (ev) => {\n  if (props.modelValue && ev.code === 'Escape') {\n    emit('update:modelValue', false);\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"dialog\">\n      <div v-if=\"modelValue\" class=\"pl-dialog-modal__shadow\" @click=\"onClickShadow\">\n        <div\n          v-bind=\"$attrs\"\n          ref=\"modal\"\n          class=\"pl-dialog-modal\"\n          :class=\"{ 'has-title': slots.title, 'has-content': slots.default }\"\n          :style=\"style\"\n        >\n          <PlCloseModalBtn v-if=\"closable\" class=\"close-modal-btn\" @click.stop=\"emit('update:modelValue', false)\" />\n          <div v-if=\"slots.title\" class=\"pl-dialog-modal__title\">\n            <slot name=\"title\" />\n          </div>\n          <div class=\"pl-dialog-modal__content\" :class=\"{ 'no-content-gutters': noContentGutters, 'no-top-content-gutter': noTopContentGutter }\">\n            <slot />\n          </div>\n          <div v-if=\"slots.actions\" class=\"pl-dialog-modal__actions\" :class=\"{ 'has-top-border': actionsHasTopBorder }\">\n            <slot name=\"actions\" />\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"names":["__default__","slots","_useSlots","emit","__emit","props","__props","modal","ref","style","computed","width","height","minHeight","maxHeight","size","onClickShadow","ev","useEventListener"],"mappings":";;;;;;;GACAA,IAAe;AAAA,EACb,cAAc;AAChB;;;;;;;;;;;;;;;;;;AAUA,UAAMC,IAAQC,EAAA,GAMRC,IAAOC,GAEPC,IAAQC,GA2DRC,IAAQC,EAAA,GAERC,IAAQC,EAAS,MAAM;AAC3B,YAAM,EAAE,OAAAC,GAAO,QAAAC,GAAQ,WAAAC,GAAW,WAAAC,GAAW,MAAAC,MAASV;AAEtD,aAAIU,MAAS,UACJ;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,MAAA,IAIXA,MAAS,WACJ;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,MAAA,IAIXA,MAAS,UACJ;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,MAAA,IAIR,EAAE,OAAAJ,GAAO,QAAAC,GAAQ,WAAAC,GAAW,WAAAC,EAAA;AAAA,IACrC,CAAC;AAED,aAASE,EAAcC,GAAW;AAChC,MAAIV,EAAM,SAASF,EAAM,uBAAuB,SAAS,SAASY,EAAG,MAAc,KAAK,CAACV,EAAM,MAAM,SAASU,EAAG,MAAc,KAC7Hd,EAAK,qBAAqB,EAAK;AAAA,IAEnC;AAEA,WAAAe,EAAiB,SAAS,MAAM,SAAS,CAACD,MAAO;AAC/C,MAAIZ,EAAM,cAAcY,EAAG,SAAS,YAClCd,EAAK,qBAAqB,EAAK;AAAA,IAEnC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlDialogModal.vue.js","sources":["../../../src/components/PlDialogModal/PlDialogModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { useEventListener } from '../../composition/useEventListener';\nimport './pl-dialog-modal.scss';\nimport { computed, ref } from 'vue';\nimport PlCloseModalBtn from '../../utils/PlCloseModalBtn.vue';\nimport type { Size } from '../../types';\n\nconst slots = defineSlots<{\n  title?: () => unknown;\n  default?: () => unknown;\n  actions?: () => unknown;\n}>();\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Determines whether the modal is open\n     */\n    modelValue: boolean;\n    /**\n     * css width (default value is `448px`)\n     */\n    width?: string;\n    /**\n     * css height (default value is `auto`)\n     */\n    height?: string;\n    /**\n     * css min-height (default value is `auto`)\n     */\n    minHeight?: string;\n    /**\n     * css min-height (default value is `auto` but recommended is 440px)\n     */\n    maxHeight?: string;\n    /**\n     * Enables a button to close the modal (default: `true`)\n     */\n    closable?: boolean;\n    /**\n     * If `true` content gutters are removed\n     */\n    noContentGutters?: boolean;\n    /**\n     * If `true` top content gutter is removed\n     */\n    noTopContentGutter?: boolean;\n    /**\n     * Actions slot has a top border (default: `true`)\n     */\n    actionsHasTopBorder?: boolean;\n    /**\n     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)\n     */\n    closeOnOutsideClick?: boolean;\n    /**\n     * Predefined size (standard small | medium | large). Takes precedence over (min|max)(width|height) properties. Not defined by default.\n     */\n    size?: Size | undefined;\n  }>(),\n  {\n    width: '448px',\n    minHeight: 'auto',\n    maxHeight: 'auto',\n    height: 'auto',\n    closable: true,\n    noContentGutters: false,\n    actionsHasTopBorder: true,\n    size: undefined,\n  },\n);\n\nconst modal = ref<HTMLElement>();\n\nconst style = computed(() => {\n  const { width, height, minHeight, maxHeight, size } = props;\n\n  if (size === 'small') {\n    return {\n      width: '448px',\n      height: '440px',\n      minHeight: 'auto',\n      maxHeight: 'auto',\n    };\n  }\n\n  if (size === 'medium') {\n    return {\n      width: '720px',\n      height: '720px',\n      minHeight: 'auto',\n      maxHeight: 'auto',\n    };\n  }\n\n  if (size === 'large') {\n    return {\n      width: '1080px',\n      height: '880px',\n      minHeight: 'auto',\n      maxHeight: 'auto',\n    };\n  }\n\n  return { width, height, minHeight, maxHeight };\n});\n\nfunction onClickShadow(ev: Event) {\n  if (modal.value && props.closeOnOutsideClick && document.contains(ev.target as Node) && !modal.value.contains(ev.target as Node)) {\n    emit('update:modelValue', false);\n  }\n}\n\nuseEventListener(document.body, 'keyup', (ev) => {\n  if (props.modelValue && ev.code === 'Escape') {\n    emit('update:modelValue', false);\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"dialog\">\n      <div v-if=\"modelValue\" class=\"pl-dialog-modal__shadow\" @click=\"onClickShadow\">\n        <div\n          v-bind=\"$attrs\"\n          ref=\"modal\"\n          class=\"pl-dialog-modal\"\n          :class=\"{ 'has-title': slots.title, 'has-content': slots.default }\"\n          :style=\"style\"\n        >\n          <PlCloseModalBtn v-if=\"closable\" class=\"close-modal-btn\" @click.stop=\"emit('update:modelValue', false)\" />\n          <div v-if=\"slots.title\" class=\"pl-dialog-modal__title\">\n            <slot name=\"title\" />\n          </div>\n          <div class=\"pl-dialog-modal__content\" :class=\"{ 'no-content-gutters': noContentGutters, 'no-top-content-gutter': noTopContentGutter }\">\n            <slot />\n          </div>\n          <div v-if=\"slots.actions\" class=\"pl-dialog-modal__actions\" :class=\"{ 'has-top-border': actionsHasTopBorder }\">\n            <slot name=\"actions\" />\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"names":["__default__","slots","_useSlots","emit","__emit","props","__props","modal","ref","style","computed","width","height","minHeight","maxHeight","size","onClickShadow","ev","useEventListener","_createBlock","_Teleport","_createVNode","_Transition","_createElementBlock","_createElementVNode","_mergeProps","_ctx","PlCloseModalBtn","_openBlock","_hoisted_1","_renderSlot","_normalizeClass"],"mappings":";;;;;;;GACAA,IAAe;AAAA,EACb,cAAc;AAChB;;;;;;;;;;;;;;;;;;AAUA,UAAMC,IAAQC,EAAA,GAMRC,IAAOC,GAEPC,IAAQC,GA2DRC,IAAQC,EAAA,GAERC,IAAQC,EAAS,MAAM;AAC3B,YAAM,EAAE,OAAAC,GAAO,QAAAC,GAAQ,WAAAC,GAAW,WAAAC,GAAW,MAAAC,MAASV;AAEtD,aAAIU,MAAS,UACJ;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,MAAA,IAIXA,MAAS,WACJ;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,MAAA,IAIXA,MAAS,UACJ;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,MAAA,IAIR,EAAE,OAAAJ,GAAO,QAAAC,GAAQ,WAAAC,GAAW,WAAAC,EAAA;AAAA,IACrC,CAAC;AAED,aAASE,EAAcC,GAAW;AAChC,MAAIV,EAAM,SAASF,EAAM,uBAAuB,SAAS,SAASY,EAAG,MAAc,KAAK,CAACV,EAAM,MAAM,SAASU,EAAG,MAAc,KAC7Hd,EAAK,qBAAqB,EAAK;AAAA,IAEnC;AAEA,WAAAe,EAAiB,SAAS,MAAM,SAAS,CAACD,MAAO;AAC/C,MAAIZ,EAAM,cAAcY,EAAG,SAAS,YAClCd,EAAK,qBAAqB,EAAK;AAAA,IAEnC,CAAC,mBAICgB,EAuBWC,GAAA,EAvBD,IAAG,UAAM;AAAA,MACjBC,EAqBaC,GAAA,EArBD,MAAK,YAAQ;AAAA,mBACvB,MAmBM;AAAA,UAnBKhB,EAAA,mBAAXiB,EAmBM,OAAA;AAAA;YAnBiB,OAAM;AAAA,YAA2B,SAAOP;AAAA,UAAA;YAC7DQ,EAiBM,OAjBNC,EAiBMC,EAAA,QAhBU;AAAA,uBACV;AAAA,cAAJ,KAAInB;AAAA,cACJ,OAAK,CAAC,mBAAiB,EAAA,aACAN,EAAM,OAAK,eAAiBA,EAAM,SAAO;AAAA,cAC/D,OAAOQ,EAAA;AAAA,YAAA;cAEeH,EAAA,iBAAvBa,EAA0GQ,GAAA;AAAA;gBAAzE,OAAM;AAAA,gBAAmB,kCAAYxB,EAAI,qBAAA,EAAA,GAAA,CAAA,MAAA,CAAA;AAAA,cAAA;cAC/DF,EAAM,SAAjB2B,EAAA,GAAAL,EAEM,OAFNM,GAEM;AAAA,gBADJC,EAAqBJ,EAAA,QAAA,OAAA;AAAA,cAAA;cAEvBF,EAEM,OAAA;AAAA,gBAFD,OAAKO,EAAA,CAAC,4BAA0B,EAAA,sBAAiCzB,EAAA,2CAA2CA,EAAA,oBAAkB,CAAA;AAAA,cAAA;gBACjIwB,EAAQJ,EAAA,QAAA,SAAA;AAAA,cAAA;cAECzB,EAAM,gBAAjBsB,EAEM,OAAA;AAAA;gBAFoB,OAAKQ,EAAA,CAAC,4BAA0B,EAAA,kBAA6BzB,EAAA,qBAAmB,CAAA;AAAA,cAAA;gBACxGwB,EAAuBJ,EAAA,QAAA,SAAA;AAAA,cAAA;;;;;;;;;"}

package/dist/components/PlDropdown/OptionList.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as I, useTemplateRef as L, computed as c, createBlock as u, openBlock as o, unref as O, withCtx as f, createElementBlock as s, createCommentVNode as m, Fragment as a, renderList as p, normalizeClass as h, createVNode as g, createElementVNode as k, createTextVNode as V, toDisplayString as $, withModifiers as y } from "vue";
-import z from "../DropdownListItem.vue.js";
+import { defineComponent as I, useTemplateRef as L, computed as u, createBlock as a, openBlock as o, unref as O, withCtx as m, createElementBlock as s, createCommentVNode as h, Fragment as d, renderList as v, normalizeClass as g, createVNode as k, createElementVNode as y, createTextVNode as V, toDisplayString as $, withModifiers as z } from "vue";
+import C from "../DropdownListItem.vue.js";
 import w from "../../utils/DropdownOverlay/DropdownOverlay.vue.js";
-import _ from "../../utils/TextLabel.vue.js";
+import x from "../../utils/TextLabel.vue.js";
 const B = {
   key: 1,
   class: "nothing-found"
@@ -14,69 +14,69 @@ const B = {
     optionSize: {},
     selectOption: { type: Function }
   },
-  setup(C, { expose: S }) {
-    const r = C, l = L("overlay"), A = c(() => {
-      var e;
-      return (e = l.value) == null ? void 0 : e.listRef;
-    }), d = c(() => r.groups.size > 0), N = c(() => {
-      let e = 0;
-      for (const v of r.groups.values())
-        e += v.length;
-      return e + r.rest.length;
+  setup(e, { expose: S }) {
+    const i = e, r = L("overlay"), A = u(() => {
+      var t;
+      return (t = r.value) == null ? void 0 : t.listRef;
+    }), p = u(() => i.groups.size > 0), N = u(() => {
+      let t = 0;
+      for (const f of i.groups.values())
+        t += f.length;
+      return t + i.rest.length;
     });
     return S({
       scrollIntoActive: () => {
-        var e;
-        (e = l.value) == null || e.scrollIntoActive();
+        var t;
+        (t = r.value) == null || t.scrollIntoActive();
       },
       listRef: A
-    }), (e, v) => (o(), u(O(w), {
+    }), (t, f) => (o(), a(O(w), {
       ref_key: "overlay",
-      ref: l,
+      ref: r,
       root: e.rootRef,
       class: "pl-dropdown__options",
       tabindex: "-1",
       gap: 3
     }, {
-      default: f(() => [
-        (o(!0), s(a, null, p(e.groups.entries(), ([t, i]) => (o(), s("div", {
-          key: t,
-          class: h({ "group-container": d.value })
+      default: m(() => [
+        (o(!0), s(d, null, v(e.groups.entries(), ([n, c]) => (o(), s("div", {
+          key: n,
+          class: g({ "group-container": p.value })
         }, [
-          g(_, null, {
-            default: f(() => [
-              V($(t), 1)
+          k(x, null, {
+            default: m(() => [
+              V($(n), 1)
             ]),
             _: 2
           }, 1024),
-          k("div", null, [
-            (o(!0), s(a, null, p(i, (n, R) => (o(), u(z, {
+          y("div", null, [
+            (o(!0), s(d, null, v(c, (l, R) => (o(), a(C, {
               key: R,
-              option: n,
-              "is-selected": n.isSelected,
-              "is-hovered": n.isActive,
+              option: l,
+              "is-selected": l.isSelected,
+              "is-hovered": l.isActive,
               size: e.optionSize,
-              onClick: y((b) => e.selectOption(n.value), ["stop"])
+              onClick: z((b) => e.selectOption(l.value), ["stop"])
             }, null, 8, ["option", "is-selected", "is-hovered", "size", "onClick"]))), 128))
           ])
         ], 2))), 128)),
         e.rest.length ? (o(), s("div", {
           key: 0,
-          class: h({ "group-container": d.value })
+          class: g({ "group-container": p.value })
         }, [
-          g(_),
-          k("div", null, [
-            (o(!0), s(a, null, p(e.rest, (t, i) => (o(), u(z, {
-              key: i,
-              option: t,
-              "is-selected": t.isSelected,
-              "is-hovered": t.isActive,
+          k(x),
+          y("div", null, [
+            (o(!0), s(d, null, v(e.rest, (n, c) => (o(), a(C, {
+              key: c,
+              option: n,
+              "is-selected": n.isSelected,
+              "is-hovered": n.isActive,
               size: e.optionSize,
-              onClick: y((n) => e.selectOption(t.value), ["stop"])
+              onClick: z((l) => e.selectOption(n.value), ["stop"])
             }, null, 8, ["option", "is-selected", "is-hovered", "size", "onClick"]))), 128))
           ])
-        ], 2)) : m("", !0),
-        N.value ? m("", !0) : (o(), s("div", B, "Nothing found"))
+        ], 2)) : h("", !0),
+        N.value ? h("", !0) : (o(), s("div", B, "Nothing found"))
       ]),
       _: 1
     }, 8, ["root"]));

package/dist/components/PlDropdown/OptionList.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionList.vue.js","sources":["../../../src/components/PlDropdown/OptionList.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport DropdownListItem from '../DropdownListItem.vue';\nimport { DropdownOverlay } from '../../utils/DropdownOverlay';\nimport TextLabel from '../../utils/TextLabel.vue';\nimport { computed, useTemplateRef } from 'vue';\nimport type { LOption } from './types';\n\nconst props = defineProps<{\n  rootRef: HTMLElement;\n  groups: Map<string, LOption[]>;\n  rest: LOption[];\n  optionSize: 'small' | 'medium';\n  selectOption: (v: unknown) => void;\n}>();\n\nconst overlay = useTemplateRef('overlay');\n\nconst listRef = computed(() => overlay.value?.listRef);\n\nconst hasGroups = computed(() => props.groups.size > 0);\n\nconst optionsLength = computed(() => {\n  let totalGroupItems = 0;\n  for (const items of props.groups.values()) {\n    totalGroupItems += items.length;\n  }\n  return totalGroupItems + props.rest.length;\n});\n\nconst scrollIntoActive = () => {\n  overlay.value?.scrollIntoActive();\n};\n\ndefineExpose({\n  scrollIntoActive,\n  listRef,\n});\n</script>\n\n<template>\n  <DropdownOverlay ref=\"overlay\" :root=\"rootRef\" class=\"pl-dropdown__options\" tabindex=\"-1\" :gap=\"3\">\n    <div v-for=\"[group, items] in groups.entries()\" :key=\"group\" :class=\"{ 'group-container': hasGroups }\">\n      <TextLabel>{{ group }}</TextLabel>\n      <div>\n        <DropdownListItem\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"optionSize\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </div>\n    <div v-if=\"rest.length\" :class=\"{ 'group-container': hasGroups }\">\n      <TextLabel />\n      <div>\n        <DropdownListItem\n          v-for=\"(item, index) in rest\"\n          :key=\"index\" :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"optionSize\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </div>\n    <div v-if=\"!optionsLength\" class=\"nothing-found\">Nothing found</div>\n  </DropdownOverlay>\n</template>\n"],"names":["props","__props","overlay","useTemplateRef","listRef","computed","_a","hasGroups","optionsLength","totalGroupItems","items","__expose"],"mappings":";;;;;;;;;;;;;;;;;AAOA,UAAMA,IAAQC,GAQRC,IAAUC,EAAe,SAAS,GAElCC,IAAUC,EAAS,MAAA;;AAAM,cAAAC,IAAAJ,EAAQ,UAAR,gBAAAI,EAAe;AAAA,KAAO,GAE/CC,IAAYF,EAAS,MAAML,EAAM,OAAO,OAAO,CAAC,GAEhDQ,IAAgBH,EAAS,MAAM;AACnC,UAAII,IAAkB;AACtB,iBAAWC,KAASV,EAAM,OAAO,OAAA;AAC/B,QAAAS,KAAmBC,EAAM;AAE3B,aAAOD,IAAkBT,EAAM,KAAK;AAAA,IACtC,CAAC;AAMD,WAAAW,EAAa;AAAA,MACX,kBALuB,MAAM;;AAC7B,SAAAL,IAAAJ,EAAQ,UAAR,QAAAI,EAAe;AAAA,MACjB;AAAA,MAIE,SAAAF;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"OptionList.vue.js","sources":["../../../src/components/PlDropdown/OptionList.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport DropdownListItem from '../DropdownListItem.vue';\nimport { DropdownOverlay } from '../../utils/DropdownOverlay';\nimport TextLabel from '../../utils/TextLabel.vue';\nimport { computed, useTemplateRef } from 'vue';\nimport type { LOption } from './types';\n\nconst props = defineProps<{\n  rootRef: HTMLElement;\n  groups: Map<string, LOption[]>;\n  rest: LOption[];\n  optionSize: 'small' | 'medium';\n  selectOption: (v: unknown) => void;\n}>();\n\nconst overlay = useTemplateRef('overlay');\n\nconst listRef = computed(() => overlay.value?.listRef);\n\nconst hasGroups = computed(() => props.groups.size > 0);\n\nconst optionsLength = computed(() => {\n  let totalGroupItems = 0;\n  for (const items of props.groups.values()) {\n    totalGroupItems += items.length;\n  }\n  return totalGroupItems + props.rest.length;\n});\n\nconst scrollIntoActive = () => {\n  overlay.value?.scrollIntoActive();\n};\n\ndefineExpose({\n  scrollIntoActive,\n  listRef,\n});\n</script>\n\n<template>\n  <DropdownOverlay ref=\"overlay\" :root=\"rootRef\" class=\"pl-dropdown__options\" tabindex=\"-1\" :gap=\"3\">\n    <div v-for=\"[group, items] in groups.entries()\" :key=\"group\" :class=\"{ 'group-container': hasGroups }\">\n      <TextLabel>{{ group }}</TextLabel>\n      <div>\n        <DropdownListItem\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"optionSize\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </div>\n    <div v-if=\"rest.length\" :class=\"{ 'group-container': hasGroups }\">\n      <TextLabel />\n      <div>\n        <DropdownListItem\n          v-for=\"(item, index) in rest\"\n          :key=\"index\" :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"optionSize\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </div>\n    <div v-if=\"!optionsLength\" class=\"nothing-found\">Nothing found</div>\n  </DropdownOverlay>\n</template>\n"],"names":["props","__props","overlay","useTemplateRef","listRef","computed","_a","hasGroups","optionsLength","totalGroupItems","items","__expose","_createBlock","_unref","DropdownOverlay","_openBlock","_createElementBlock","_Fragment","group","_createVNode","TextLabel","_createElementVNode","_renderList","item","index","DropdownListItem","_withModifiers","$event","_hoisted_1"],"mappings":";;;;;;;;;;;;;;;;;AAOA,UAAMA,IAAQC,GAQRC,IAAUC,EAAe,SAAS,GAElCC,IAAUC,EAAS,MAAA;;AAAM,cAAAC,IAAAJ,EAAQ,UAAR,gBAAAI,EAAe;AAAA,KAAO,GAE/CC,IAAYF,EAAS,MAAML,EAAM,OAAO,OAAO,CAAC,GAEhDQ,IAAgBH,EAAS,MAAM;AACnC,UAAII,IAAkB;AACtB,iBAAWC,KAASV,EAAM,OAAO,OAAA;AAC/B,QAAAS,KAAmBC,EAAM;AAE3B,aAAOD,IAAkBT,EAAM,KAAK;AAAA,IACtC,CAAC;AAMD,WAAAW,EAAa;AAAA,MACX,kBALuB,MAAM;;AAC7B,SAAAL,IAAAJ,EAAQ,UAAR,QAAAI,EAAe;AAAA,MACjB;AAAA,MAIE,SAAAF;AAAA,IAAA,CACD,mBAICQ,EA6BkBC,EAAAC,CAAA,GAAA;AAAA,eA7BG;AAAA,MAAJ,KAAIZ;AAAA,MAAW,MAAMD,EAAA;AAAA,MAAS,OAAM;AAAA,MAAuB,UAAS;AAAA,MAAM,KAAK;AAAA,IAAA;iBACzF,MAA0C;AAAA,SAA/Cc,EAAA,EAAA,GAAAC,EAaMC,WAbwBhB,EAAA,OAAO,WAAO,CAAA,CAA/BiB,GAAOR,CAAK,YAAzBM,EAaM,OAAA;AAAA,UAb2C,KAAKE;AAAA,UAAQ,8BAA4BX,EAAA,OAAS;AAAA,QAAA;UACjGY,EAAkCC,GAAA,MAAA;AAAA,uBAAvB,MAAW;AAAA,kBAARF,CAAK,GAAA,CAAA;AAAA,YAAA;;;UACnBG,EAUM,OAAA,MAAA;AAAA,aATJN,EAAA,EAAA,GAAAC,EAQEC,GAAA,MAAAK,EAPwBZ,GAAK,CAArBa,GAAMC,YADhBZ,EAQEa,GAAA;AAAA,cANC,KAAKD;AAAA,cACL,QAAQD;AAAA,cACR,eAAaA,EAAK;AAAA,cAClB,cAAYA,EAAK;AAAA,cACjB,MAAMtB,EAAA;AAAA,cACN,SAAKyB,EAAA,CAAAC,MAAO1B,EAAA,aAAasB,EAAK,KAAK,GAAA,CAAA,MAAA,CAAA;AAAA,YAAA;;;QAI/BtB,EAAA,KAAK,eAAhBe,EAYM,OAAA;AAAA;UAZmB,8BAA4BT,EAAA,OAAS;AAAA,QAAA;UAC5DY,EAAaC,CAAA;AAAA,UACbC,EASM,OAAA,MAAA;AAAA,aARJN,EAAA,EAAA,GAAAC,EAOEC,GAAA,MAAAK,EANwBrB,EAAA,MAAI,CAApBsB,GAAMC,YADhBZ,EAOEa,GAAA;AAAA,cALC,KAAKD;AAAA,cAAQ,QAAQD;AAAA,cACrB,eAAaA,EAAK;AAAA,cAClB,cAAYA,EAAK;AAAA,cACjB,MAAMtB,EAAA;AAAA,cACN,SAAKyB,EAAA,CAAAC,MAAO1B,EAAA,aAAasB,EAAK,KAAK,GAAA,CAAA,MAAA,CAAA;AAAA,YAAA;;;QAI9Bf,EAAA,0BAAZQ,EAAoE,OAApEY,GAAiD,eAAa;AAAA;;;;;"}

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

@@ -30,6 +30,10 @@ declare const _default: <M = unknown>(__VLS_props: NonNullable<Awaited<typeof __
          * Error message displayed below the dropdown (optional)
          */
         error?: unknown;
+        /**
+         * Shows red border even without an error message
+         */
+        errorStatus?: boolean;
         /**
          * Placeholder text shown when no value is selected.
          */
@@ -58,6 +62,10 @@ declare const _default: <M = unknown>(__VLS_props: NonNullable<Awaited<typeof __
          * Option list item size
          */
         optionSize?: "small" | "medium";
+        /**
+         * 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;