@milaboratories/uikit 2.6.1 → 2.6.3

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnDanger.vue.js","sources":["../../../src/components/PlBtnDanger/PlBtnDanger.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Danger button\n */\nexport default {\n  name: 'PlBtnDanger',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport './pl-btn-danger.scss';\nimport type { MaskIconName16, Size } from '../../types';\nimport BtnBase from '../../base/BtnBase.vue';\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase class=\"pl-btn-danger\" v-bind=\"props\">\n    <slot />\n  </BtnBase>\n</template>\n"],"names":["__default__","props","__props"],"mappings":";;;AAIA,MAAAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;AAQA,UAAMC,IAAQC;;;;;;;;;"}
+{"version":3,"file":"PlBtnDanger.vue.js","sources":["../../../src/components/PlBtnDanger/PlBtnDanger.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Danger button\n */\nexport default {\n  name: 'PlBtnDanger',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport './pl-btn-danger.scss';\nimport type { MaskIconName16, Size } from '../../types';\nimport BtnBase from '../../base/BtnBase.vue';\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase class=\"pl-btn-danger\" v-bind=\"props\">\n    <slot />\n  </BtnBase>\n</template>\n"],"names":["__default__","props","__props","_openBlock","_createBlock","BtnBase","_mergeProps","_renderSlot","_ctx"],"mappings":";;;AAIA,MAAAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;AAQA,UAAMC,IAAQC;sBA6BZC,EAAA,GAAAC,EAEUC,GAFVC,EAEU,EAFD,OAAM,mBAAwBL,CAAK,GAAA;AAAA,iBAC1C,MAAQ;AAAA,QAARM,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;"}

package/dist/components/PlBtnGhost/PlBtnGhost.vue.js

@@ -1,12 +1,12 @@
 (function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".pl-btn-ghost{--font-size: 14px;--border-radius: 6px;--button-height: 40px;--focus-shadow: 0 0 0 0 transparent;--btn-disabled-bg: var(--color-dis-01);--color-text: var(--txt-00);--shape-shadow: 0 0 0 0 transparent;--append-shadow: 0 0 0 0 transparent;--drop-shadow: 0 0 0 0 transparent;--active-shadow: 0 0 0 0 transparent;--main-padding: 0 12px;text-transform:capitalize;position:relative;overflow:hidden;display:flex;flex-direction:row;justify-content:space-between;align-items:center;white-space:nowrap;gap:8px;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);line-height:16px;height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);outline:none;-webkit-user-select:none;user-select:none;transition:box-shadow .05s ease-in-out;box-shadow:var(--focus-shadow),var(--append-shadow),var(--shape-shadow),var(--active-shadow),var(--drop-shadow)}.pl-btn-ghost.justifyCenter{justify-content:center}.pl-btn-ghost.round{border-radius:50%;width:var(--button-height);min-width:var(--button-height);padding:0;justify-content:center}.pl-btn-ghost.small{--button-height: 32px;--main-padding: 0 8px}.pl-btn-ghost.medium{--main-padding: 0 16px}.pl-btn-ghost.large{--button-height: 56px;--border-radius: 8px;--font-size: 16px;--main-padding: 0 18px}.pl-btn-ghost.large .mask{--mask-size: 24px}.pl-btn-ghost:disabled{--color-text: var(--dis-00);--icon-color: var(--dis-00)}.pl-btn-ghost:disabled *{color:var(--color-text)}.pl-btn-ghost:not([disabled]){cursor:pointer}.pl-btn-ghost:not([disabled]).hover{background:var(--color-btn-hover)}.pl-btn-ghost:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-ghost:focus-visible{--focus-shadow: inset 0 0 0 2px var(--border-color-focus)}.pl-btn-ghost .icon{display:block;width:16px;height:16px}.pl-btn-ghost.loading{box-shadow:none!important}.pl-btn-ghost.loading .mask-loading{display:block;animation:spin 4s linear infinite}.pl-btn-ghost.reverse{flex-direction:row-reverse}.pl-btn-ghost>span{display:inline-flex}.pl-btn-ghost{--color-text: var(--txt-01);--color-btn-hover: var(--btn-sec-hover-grey);--btn-min-width: auto;gap:10px;background:transparent;border:none;width:fit-content;min-width:var(--btn-min-width)}.pl-btn-ghost:disabled{--color-text: var(--btn-disabled-bg);--icon-color: var(--dis-01);box-shadow:none!important;cursor:auto}.pl-btn-ghost.loading{--color-text: var(--btn-disabled-bg)}")),document.head.appendChild(t)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-import { defineComponent as y, computed as a, ref as c, useSlots as z, createElementBlock as r, openBlock as o, mergeProps as B, createCommentVNode as i, renderSlot as s, unref as n, createBlock as d } from "vue";
+import { defineComponent as y, computed as r, ref as z, useSlots as B, createElementBlock as i, openBlock as n, mergeProps as k, createCommentVNode as d, renderSlot as o, unref as l, createBlock as u } from "vue";
 
-import u from "../PlIcon24/PlIcon24.vue.js";
-import { useRipple as k } from "../../composition/useRipple.js";
-const b = { key: 0 }, v = {
+import f from "../PlIcon24/PlIcon24.vue.js";
+import { useRipple as b } from "../../composition/useRipple.js";
+const v = { key: 0 }, $ = {
   name: "PlBtnGhost"
-}, R = /* @__PURE__ */ y({
-  ...v,
+}, p = /* @__PURE__ */ y({
+  ...$,
   props: {
     loading: { type: Boolean },
     size: { default: void 0 },
@@ -15,33 +15,33 @@ const b = { key: 0 }, v = {
     reverse: { type: Boolean },
     justifyCenter: { type: Boolean, default: !1 }
   },
-  setup(p) {
-    const l = p, f = a(() => l.size === "small"), m = a(() => l.size === "large"), t = c(), g = z();
-    return k(t), (e, $) => (o(), r("button", B({
+  setup(e) {
+    const a = e, m = r(() => a.size === "small"), c = r(() => a.size === "large"), s = z(), g = B();
+    return b(s), (t, C) => (n(), i("button", k({
       ref_key: "btnRef",
-      ref: t,
+      ref: s,
       tabindex: "0",
-      class: ["pl-btn-ghost", { loading: e.loading, small: f.value, large: m.value, round: e.round, reverse: e.reverse, justifyCenter: e.justifyCenter, [e.$attrs.class + ""]: !0 }]
-    }, { ...e.$attrs, disabled: !!e.$attrs.disabled || e.loading }), [
-      n(g).default && !e.round ? (o(), r("span", b, [
-        s(e.$slots, "default")
-      ])) : i("", !0),
-      s(e.$slots, "icon", {}, () => [
-        e.loading ? (o(), d(n(u), {
+      class: ["pl-btn-ghost", { loading: e.loading, small: m.value, large: c.value, round: e.round, reverse: e.reverse, justifyCenter: e.justifyCenter, [t.$attrs.class + ""]: !0 }]
+    }, { ...t.$attrs, disabled: !!t.$attrs.disabled || e.loading }), [
+      l(g).default && !e.round ? (n(), i("span", v, [
+        o(t.$slots, "default")
+      ])) : d("", !0),
+      o(t.$slots, "icon", {}, () => [
+        e.loading ? (n(), u(l(f), {
           key: 0,
           name: "loading",
           size: e.size
-        }, null, 8, ["size"])) : e.icon ? (o(), d(n(u), {
+        }, null, 8, ["size"])) : e.icon ? (n(), u(l(f), {
           key: 1,
           name: e.icon,
           size: e.size
-        }, null, 8, ["name", "size"])) : i("", !0)
+        }, null, 8, ["name", "size"])) : d("", !0)
       ]),
-      s(e.$slots, "append")
+      o(t.$slots, "append")
     ], 16));
   }
 });
 export {
-  R as default
+  p as default
 };
 //# sourceMappingURL=PlBtnGhost.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnGhost.vue.js","sources":["../../../src/components/PlBtnGhost/PlBtnGhost.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Ghost button\n */\nexport default {\n  name: 'PlBtnGhost',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport './pl-btn-ghost.scss';\nimport type { MaskIconName24, Size } from '../../types';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { computed, ref, useSlots } from 'vue';\nimport { useRipple } from '../../composition/useRipple';\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n     */\n    loading?: boolean;\n    /**\n     * Size of the button, the default value is 'medium'\n     */\n    size?: Size;\n    /**\n     * If `true` the shape is round.\n     */\n    round?: boolean;\n    /**\n     * Icon to display\n     */\n    icon?: MaskIconName24;\n    /**\n     * If `true`, an icon is displayed before the text.\n     */\n    reverse?: boolean;\n    /**\n     * Justify text at the center (is `false` by default)\n     */\n    justifyCenter?: boolean;\n  }>(),\n  {\n    size: undefined,\n    icon: undefined,\n    justifyCenter: false,\n  },\n);\n\nconst small = computed(() => props.size === 'small');\nconst large = computed(() => props.size === 'large');\n\nconst btnRef = ref();\n\nconst slots = useSlots();\n\nuseRipple(btnRef);\n</script>\n\n<template>\n  <button\n    ref=\"btnRef\"\n    tabindex=\"0\"\n    class=\"pl-btn-ghost\"\n    :class=\"{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }\"\n    v-bind=\"{ ...$attrs, disabled: Boolean($attrs.disabled) || loading }\"\n  >\n    <span v-if=\"slots.default && !round\">\n      <slot />\n    </span>\n    <slot name=\"icon\">\n      <PlMaskIcon24 v-if=\"loading\" name=\"loading\" :size=\"size\" />\n      <PlMaskIcon24 v-else-if=\"icon\" :name=\"icon\" :size=\"size\" />\n    </slot>\n    <slot name=\"append\" />\n  </button>\n</template>\n"],"names":["__default__","props","__props","small","computed","large","btnRef","ref","slots","useSlots","useRipple"],"mappings":";;;;sBAIAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;AAUA,UAAMC,IAAQC,GAkCRC,IAAQC,EAAS,MAAMH,EAAM,SAAS,OAAO,GAC7CI,IAAQD,EAAS,MAAMH,EAAM,SAAS,OAAO,GAE7CK,IAASC,EAAA,GAETC,IAAQC,EAAA;AAEd,WAAAC,EAAUJ,CAAM;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlBtnGhost.vue.js","sources":["../../../src/components/PlBtnGhost/PlBtnGhost.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Ghost button\n */\nexport default {\n  name: 'PlBtnGhost',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport './pl-btn-ghost.scss';\nimport type { MaskIconName24, Size } from '../../types';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { computed, ref, useSlots } from 'vue';\nimport { useRipple } from '../../composition/useRipple';\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n     */\n    loading?: boolean;\n    /**\n     * Size of the button, the default value is 'medium'\n     */\n    size?: Size;\n    /**\n     * If `true` the shape is round.\n     */\n    round?: boolean;\n    /**\n     * Icon to display\n     */\n    icon?: MaskIconName24;\n    /**\n     * If `true`, an icon is displayed before the text.\n     */\n    reverse?: boolean;\n    /**\n     * Justify text at the center (is `false` by default)\n     */\n    justifyCenter?: boolean;\n  }>(),\n  {\n    size: undefined,\n    icon: undefined,\n    justifyCenter: false,\n  },\n);\n\nconst small = computed(() => props.size === 'small');\nconst large = computed(() => props.size === 'large');\n\nconst btnRef = ref();\n\nconst slots = useSlots();\n\nuseRipple(btnRef);\n</script>\n\n<template>\n  <button\n    ref=\"btnRef\"\n    tabindex=\"0\"\n    class=\"pl-btn-ghost\"\n    :class=\"{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }\"\n    v-bind=\"{ ...$attrs, disabled: Boolean($attrs.disabled) || loading }\"\n  >\n    <span v-if=\"slots.default && !round\">\n      <slot />\n    </span>\n    <slot name=\"icon\">\n      <PlMaskIcon24 v-if=\"loading\" name=\"loading\" :size=\"size\" />\n      <PlMaskIcon24 v-else-if=\"icon\" :name=\"icon\" :size=\"size\" />\n    </slot>\n    <slot name=\"append\" />\n  </button>\n</template>\n"],"names":["__default__","props","__props","small","computed","large","btnRef","ref","slots","useSlots","useRipple","_openBlock","_createElementBlock","_mergeProps","$attrs","_unref","_hoisted_1","_renderSlot","_ctx","_createBlock","PlMaskIcon24"],"mappings":";;;;sBAIAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;AAUA,UAAMC,IAAQC,GAkCRC,IAAQC,EAAS,MAAMH,EAAM,SAAS,OAAO,GAC7CI,IAAQD,EAAS,MAAMH,EAAM,SAAS,OAAO,GAE7CK,IAASC,EAAA,GAETC,IAAQC,EAAA;AAEd,WAAAC,EAAUJ,CAAM,cAIdK,EAAA,GAAAC,EAeS,UAfTC,EAeS;AAAA,eAdH;AAAA,MAAJ,KAAIP;AAAA,MACJ,UAAS;AAAA,MACT,QAAM,gBAAc,EAAA,SACVJ,EAAA,SAAO,OAAEC,SAAK,OAAEE,EAAA,OAAK,OAAEH,EAAA,gBAAOA,EAAA,SAAO,eAAEA,iBAAa,CAAGY,EAAAA,OAAO,QAAK,EAAA,GAAA,IAAA;AAAA,IAAA,GAChEA,EAAAA,GAAAA,EAAAA,kBAAkB,EAAQA,SAAO,YAAaZ,EAAA,QAAA,CAAO,GAAA;AAAA,MAEtDa,EAAAP,CAAA,EAAM,WAAO,CAAKN,EAAA,cAA9BU,EAEO,QAAAI,GAAA;AAAA,QADLC,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;MAEVD,EAGOC,sBAHP,MAGO;AAAA,QAFehB,EAAA,gBAApBiB,EAA2DJ,EAAAK,CAAA,GAAA;AAAA;UAA9B,MAAK;AAAA,UAAW,MAAMlB,EAAA;AAAA,QAAA,yBAC1BA,EAAA,aAAzBiB,EAA2DJ,EAAAK,CAAA,GAAA;AAAA;UAA3B,MAAMlB,EAAA;AAAA,UAAO,MAAMA,EAAA;AAAA,QAAA;;MAErDe,EAAsBC,EAAA,QAAA,QAAA;AAAA,IAAA;;;"}

package/dist/components/PlBtnGroup/PlBtnGroup.vue.js

@@ -1,19 +1,19 @@
 (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode('.pl-btn-group{--pl-btn-group-height: 40px;box-sizing:border-box;position:relative;font-family:var(--control-font-family)}.pl-btn-group label{margin-bottom:6px;display:flex;align-items:center;gap:4px;font-weight:500;font-size:var(--font-size-base);line-height:20px}.pl-btn-group__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-btn-group__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-btn-group .inner-border{height:var(--pl-btn-group-height);min-height:var(--pl-btn-group-height)}.pl-btn-group .inner-border:after{border:1px solid var(--color-border-default);border-radius:6px}.pl-btn-group__container{flex:1;display:flex;align-items:center;width:100%;box-sizing:content-box;border-radius:6px;font-weight:500;font-size:10px;text-align:center;-webkit-user-select:none;user-select:none}.pl-btn-group__option{position:relative;display:flex;flex:1;flex-direction:row;justify-content:center;align-items:center;padding:0 12px;align-self:stretch;cursor:pointer;outline:none;text-transform:capitalize;color:var(--btn-switcher-option-color);white-space:nowrap}.pl-btn-group__option:hover:not(.active){background-color:var(--btn-sec-hover-grey)}.pl-btn-group__option:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.pl-btn-group__option:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.pl-btn-group__option:focus-visible{position:relative}.pl-btn-group__option:focus-visible:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;border:2px solid var(--border-color-focus);border-radius:inherit;z-index:1}.pl-btn-group__option:not(.active)+.pl-btn-group__option:not(.active):before{content:"";position:absolute;width:1px;height:24px;left:-1px;top:50%;transform:translateY(-50%);background-color:var(--color-border-default)}.pl-btn-group__option.active{background:var(--btn-switcher-bg);border:var(--btn-switcher-active-option-border);box-shadow:var(--btn-group-shape-shadow);color:var(--btn-switcher-active-option-color);border-radius:6px;z-index:1;padding:0 11px}.pl-btn-group.compact{--pl-btn-group-height: 32px}.pl-btn-group.disabled{--color-border-default: var(--color-dis-01);--btn-switcher-bg: var(--color-dis-01);--btn-switcher-option-color: var(--color-dis-01);--btn-switcher-active-option-color: var(--color-dis-00);--btn-switcher-active-option-border: 0px;pointer-events:none;tab-index:unset!important}')),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { defineComponent as h, useSlots as y, computed as k, createElementBlock as l, openBlock as o, normalizeClass as i, createCommentVNode as n, createVNode as g, createElementVNode as V, createBlock as B, toDisplayString as r, unref as a, withCtx as p, renderSlot as C, Fragment as w, renderList as $, withKeys as E } from "vue";
+import { defineComponent as y, useSlots as k, computed as g, createElementBlock as o, openBlock as l, normalizeClass as d, createCommentVNode as r, createVNode as V, createElementVNode as B, createBlock as x, toDisplayString as a, unref as i, withCtx as c, renderSlot as C, Fragment as _, renderList as w, withKeys as $ } from "vue";
 
-import K from "../PlTooltip/PlTooltip.vue.js";
-import N from "../../utils/InnerBorder.vue.js";
-import { getErrorMessage as S } from "../../helpers/error.js";
-const z = { key: 0 }, M = ["tabindex", "onKeydown", "onClick"], D = {
+import E from "../PlTooltip/PlTooltip.vue.js";
+import K from "../../utils/InnerBorder.vue.js";
+import { getErrorMessage as N } from "../../helpers/error.js";
+const S = { key: 0 }, z = ["tabindex", "onKeydown", "onClick"], M = {
   key: 1,
   class: "pl-btn-group__helper"
-}, F = {
+}, D = {
   key: 2,
   class: "pl-btn-group__error"
-}, G = {
+}, F = {
   name: "PlBtnGroup"
-}, A = /* @__PURE__ */ h({
-  ...G,
+}, q = /* @__PURE__ */ y({
+  ...F,
   props: {
     modelValue: {},
     label: {},
@@ -24,46 +24,46 @@ const z = { key: 0 }, M = ["tabindex", "onKeydown", "onClick"], D = {
     error: {}
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: u }) {
-    const m = y(), c = u, s = (e) => c("update:modelValue", e), b = d, _ = k(
-      () => b.options.map((e) => ({
-        label: "label" in e ? e.label : e.text,
-        value: e.value
+  setup(e, { emit: u }) {
+    const m = k(), p = u, s = (t) => p("update:modelValue", t), b = e, v = g(
+      () => b.options.map((t) => ({
+        label: "label" in t ? t.label : t.text,
+        value: t.value
       }))
     );
-    return (e, I) => (o(), l("div", {
-      class: i(["pl-btn-group", { disabled: e.disabled, compact: e.compact }])
+    return (t, G) => (l(), o("div", {
+      class: d(["pl-btn-group", { disabled: e.disabled, compact: e.compact }])
     }, [
-      e.label ? (o(), l("label", z, [
-        V("span", null, r(e.label), 1),
-        a(m).tooltip ? (o(), B(a(K), {
+      e.label ? (l(), o("label", S, [
+        B("span", null, a(e.label), 1),
+        i(m).tooltip ? (l(), x(i(E), {
           key: 0,
           class: "info",
           position: "top"
         }, {
-          tooltip: p(() => [
-            C(e.$slots, "tooltip")
+          tooltip: c(() => [
+            C(t.$slots, "tooltip")
           ]),
           _: 3
-        })) : n("", !0)
-      ])) : n("", !0),
-      g(N, { class: "pl-btn-group__container" }, {
-        default: p(() => [
-          (o(!0), l(w, null, $(_.value, (t, v) => (o(), l("div", {
-            key: v,
-            class: i(["pl-btn-group__option text-s", { active: e.modelValue === t.value }]),
-            tabindex: e.modelValue === t.value || e.disabled ? void 0 : 0,
-            onKeydown: E((f) => s(t.value), ["enter"]),
-            onClick: (f) => s(t.value)
-          }, r(t.label), 43, M))), 128))
+        })) : r("", !0)
+      ])) : r("", !0),
+      V(K, { class: "pl-btn-group__container" }, {
+        default: c(() => [
+          (l(!0), o(_, null, w(v.value, (n, f) => (l(), o("div", {
+            key: f,
+            class: d(["pl-btn-group__option text-s", { active: e.modelValue === n.value }]),
+            tabindex: e.modelValue === n.value || e.disabled ? void 0 : 0,
+            onKeydown: $((h) => s(n.value), ["enter"]),
+            onClick: (h) => s(n.value)
+          }, a(n.label), 43, z))), 128))
         ]),
         _: 1
       }),
-      e.helper ? (o(), l("div", D, r(e.helper), 1)) : e.error ? (o(), l("div", F, r(a(S)(e.error)), 1)) : n("", !0)
+      e.helper ? (l(), o("div", M, a(e.helper), 1)) : e.error ? (l(), o("div", D, a(i(N)(e.error)), 1)) : r("", !0)
     ], 2));
   }
 });
 export {
-  A as default
+  q as default
 };
 //# sourceMappingURL=PlBtnGroup.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnGroup.vue.js","sources":["../../../src/components/PlBtnGroup/PlBtnGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: 'PlBtnGroup',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport './pl-btn-group.scss';\nimport { computed, useSlots } from 'vue';\nimport { PlTooltip } from '../PlTooltip';\nimport InnerBorder from '../../utils/InnerBorder.vue';\nimport type { SimpleOption } from '../../types';\nimport { getErrorMessage } from '../../helpers/error.ts';\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: 'update:modelValue', value: M): void;\n}>();\n\nconst emitModel = (v: M) => emit('update:modelValue', v);\n\nconst props = defineProps<{\n  /**\n   * The current selected value.\n   */\n  modelValue?: M;\n  /**\n   * The label text for the component (optional)\n   */\n  label?: string;\n  /**\n   * List of available options for the component\n   */\n  options: Readonly<SimpleOption<M>[]>;\n  /**\n   * If `true`, the component is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the height of the component is 32px\n   */\n  compact?: boolean;\n  /**\n   * A helper text displayed below the component when there are no errors (optional).\n   */\n  helper?: string;\n  /**\n   * Error message displayed below the component (optional)\n   */\n  error?: unknown;\n}>();\n\nconst normalizedOptions = computed(() =>\n  props.options.map((it) => ({\n    label: 'label' in it ? it.label : it.text,\n    value: it.value,\n  })),\n);\n</script>\n\n<template>\n  <div class=\"pl-btn-group\" :class=\"{ disabled, compact }\">\n    <label v-if=\"label\">\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    <InnerBorder class=\"pl-btn-group__container\">\n      <div\n        v-for=\"(opt, i) in normalizedOptions\"\n        :key=\"i\"\n        class=\"pl-btn-group__option text-s\"\n        :tabindex=\"modelValue === opt.value || disabled ? undefined : 0\"\n        :class=\"{ active: modelValue === opt.value }\"\n        @keydown.enter=\"emitModel(opt.value)\"\n        @click=\"emitModel(opt.value)\"\n      >\n        {{ opt.label }}\n      </div>\n    </InnerBorder>\n    <div v-if=\"helper\" class=\"pl-btn-group__helper\">{{ helper }}</div>\n    <div v-else-if=\"error\" class=\"pl-btn-group__error\">{{ getErrorMessage(error) }}</div>\n  </div>\n</template>\n"],"names":["__default__","slots","useSlots","emit","__emit","emitModel","v","props","__props","normalizedOptions","computed","it"],"mappings":";;;;;;;;;;;GAIAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;AAWA,UAAMC,IAAQC,EAAA,GAERC,IAAOC,GAOPC,IAAY,CAACC,MAASH,EAAK,qBAAqBG,CAAC,GAEjDC,IAAQC,GA+BRC,IAAoBC;AAAA,MAAS,MACjCH,EAAM,QAAQ,IAAI,CAACI,OAAQ;AAAA,QACzB,OAAO,WAAWA,IAAKA,EAAG,QAAQA,EAAG;AAAA,QACrC,OAAOA,EAAG;AAAA,MAAA,EACV;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlBtnGroup.vue.js","sources":["../../../src/components/PlBtnGroup/PlBtnGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: 'PlBtnGroup',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport './pl-btn-group.scss';\nimport { computed, useSlots } from 'vue';\nimport { PlTooltip } from '../PlTooltip';\nimport InnerBorder from '../../utils/InnerBorder.vue';\nimport type { SimpleOption } from '../../types';\nimport { getErrorMessage } from '../../helpers/error.ts';\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: 'update:modelValue', value: M): void;\n}>();\n\nconst emitModel = (v: M) => emit('update:modelValue', v);\n\nconst props = defineProps<{\n  /**\n   * The current selected value.\n   */\n  modelValue?: M;\n  /**\n   * The label text for the component (optional)\n   */\n  label?: string;\n  /**\n   * List of available options for the component\n   */\n  options: Readonly<SimpleOption<M>[]>;\n  /**\n   * If `true`, the component is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the height of the component is 32px\n   */\n  compact?: boolean;\n  /**\n   * A helper text displayed below the component when there are no errors (optional).\n   */\n  helper?: string;\n  /**\n   * Error message displayed below the component (optional)\n   */\n  error?: unknown;\n}>();\n\nconst normalizedOptions = computed(() =>\n  props.options.map((it) => ({\n    label: 'label' in it ? it.label : it.text,\n    value: it.value,\n  })),\n);\n</script>\n\n<template>\n  <div class=\"pl-btn-group\" :class=\"{ disabled, compact }\">\n    <label v-if=\"label\">\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    <InnerBorder class=\"pl-btn-group__container\">\n      <div\n        v-for=\"(opt, i) in normalizedOptions\"\n        :key=\"i\"\n        class=\"pl-btn-group__option text-s\"\n        :tabindex=\"modelValue === opt.value || disabled ? undefined : 0\"\n        :class=\"{ active: modelValue === opt.value }\"\n        @keydown.enter=\"emitModel(opt.value)\"\n        @click=\"emitModel(opt.value)\"\n      >\n        {{ opt.label }}\n      </div>\n    </InnerBorder>\n    <div v-if=\"helper\" class=\"pl-btn-group__helper\">{{ helper }}</div>\n    <div v-else-if=\"error\" class=\"pl-btn-group__error\">{{ getErrorMessage(error) }}</div>\n  </div>\n</template>\n"],"names":["__default__","slots","useSlots","emit","__emit","emitModel","v","props","__props","normalizedOptions","computed","it","_createElementBlock","_normalizeClass","_hoisted_1","_createElementVNode","_unref","_createBlock","PlTooltip","_renderSlot","_ctx","_createVNode","InnerBorder","_openBlock","_Fragment","_renderList","opt","i","_withKeys","$event","_toDisplayString","_hoisted_2","_hoisted_3","_hoisted_4","getErrorMessage"],"mappings":";;;;;;;;;;;GAIAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;AAWA,UAAMC,IAAQC,EAAA,GAERC,IAAOC,GAOPC,IAAY,CAACC,MAASH,EAAK,qBAAqBG,CAAC,GAEjDC,IAAQC,GA+BRC,IAAoBC;AAAA,MAAS,MACjCH,EAAM,QAAQ,IAAI,CAACI,OAAQ;AAAA,QACzB,OAAO,WAAWA,IAAKA,EAAG,QAAQA,EAAG;AAAA,QACrC,OAAOA,EAAG;AAAA,MAAA,EACV;AAAA,IAAA;2BAKFC,EAwBM,OAAA;AAAA,MAxBD,OAAKC,EAAA,CAAC,gBAAc,EAAA,UAAWL,EAAA,mBAAUA,EAAA,SAAO,CAAA;AAAA,IAAA;MACtCA,EAAA,cAAbI,EAOQ,SAAAE,GAAA;AAAA,QANNC,EAAwB,gBAAfP,EAAA,KAAK,GAAA,CAAA;AAAA,QACGQ,EAAAf,CAAA,EAAM,gBAAvBgB,EAIYD,EAAAE,CAAA,GAAA;AAAA;UAJoB,OAAM;AAAA,UAAO,UAAS;AAAA,QAAA;UACzC,WACT,MAAuB;AAAA,YAAvBC,EAAuBC,EAAA,QAAA,SAAA;AAAA,UAAA;;;;MAI7BC,EAYcC,GAAA,EAZD,OAAM,6BAAyB;AAAA,mBAExC,MAAqC;AAAA,WADvCC,EAAA,EAAA,GAAAX,EAUMY,GAAA,MAAAC,EATehB,EAAA,OAAiB,CAA5BiB,GAAKC,YADff,EAUM,OAAA;AAAA,YARH,KAAKe;AAAA,YACN,UAAM,+BAA6B,EAAA,QAEjBnB,iBAAekB,EAAI,MAAA,CAAK,CAAA;AAAA,YADzC,UAAUlB,iBAAekB,EAAI,SAASlB,EAAA,WAAW,SAAS;AAAA,YAE1D,WAAOoB,EAAA,CAAAC,MAAQxB,EAAUqB,EAAI,KAAK,GAAA,CAAA,OAAA,CAAA;AAAA,YAClC,SAAK,CAAAG,MAAExB,EAAUqB,EAAI,KAAK;AAAA,UAAA,GAExBI,EAAAJ,EAAI,KAAK,GAAA,IAAAK,CAAA;;;;MAGLvB,EAAA,eAAXI,EAAkE,OAAlEoB,GAAkEF,EAAftB,EAAA,MAAM,GAAA,CAAA,KACzCA,EAAA,SAAhBe,KAAAX,EAAqF,OAArFqB,GAAqFH,EAA/Bd,EAAAkB,CAAA,EAAgB1B,EAAA,KAAK,CAAA,GAAA,CAAA;;;;"}

package/dist/components/PlBtnLink/PlBtnLink.vue.js

@@ -1,8 +1,8 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ui-btn-link{display:flex;flex-direction:row;align-items:center;gap:12px;--color-text: var(--txt-01);color:var(--txt-01)}.ui-btn-link.disabled,.ui-btn-link.loading{color:var(--color-dis-01)}.ui-btn-link:hover{cursor:pointer}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { defineComponent as s, ref as a, createElementBlock as i, openBlock as d, normalizeClass as p, createVNode as u, renderSlot as v, mergeProps as m } from "vue";
+import { defineComponent as a, ref as s, createElementBlock as i, openBlock as d, normalizeClass as u, createVNode as v, renderSlot as m, mergeProps as p } from "vue";
 
 import f from "../PlBtnSecondary/PlBtnSecondary.vue.js";
-const g = /* @__PURE__ */ s({
+const b = /* @__PURE__ */ a({
   __name: "PlBtnLink",
   props: {
     loading: { type: Boolean },
@@ -12,22 +12,22 @@ const g = /* @__PURE__ */ s({
     justifyCenter: { type: Boolean },
     disabled: { type: Boolean }
   },
-  setup(l) {
-    const r = l, e = a(!1);
-    return (n, o) => (d(), i("div", {
-      class: p(["ui-btn-link", { disabled: n.disabled, loading: n.loading, hover: e.value }]),
-      onMouseover: o[0] || (o[0] = (t) => e.value = !0),
-      onMouseleave: o[1] || (o[1] = (t) => e.value = !1)
+  setup(n) {
+    const l = n, e = s(!1);
+    return (t, o) => (d(), i("div", {
+      class: u(["ui-btn-link", { disabled: n.disabled, loading: n.loading, hover: e.value }]),
+      onMouseover: o[0] || (o[0] = (r) => e.value = !0),
+      onMouseleave: o[1] || (o[1] = (r) => e.value = !1)
     }, [
-      u(f, m({
+      v(f, p({
         round: "",
         hover: e.value
-      }, r), null, 16, ["hover"]),
-      v(n.$slots, "default")
+      }, l), null, 16, ["hover"]),
+      m(t.$slots, "default")
     ], 34));
   }
 });
 export {
-  g as default
+  b as default
 };
 //# sourceMappingURL=PlBtnLink.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnLink.vue.js","sources":["../../../src/components/PlBtnLink/PlBtnLink.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport './pl-btn-link.scss';\nimport type { MaskIconName16, Size } from '../../types';\nimport BtnSecondary from '../PlBtnSecondary/PlBtnSecondary.vue';\nimport { ref } from 'vue';\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center (is `true` by default)\n   */\n  justifyCenter?: boolean;\n  /**\n   * If `true`, the button is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n}>();\n\nconst hover = ref(false);\n</script>\n\n<template>\n  <div class=\"ui-btn-link\" :class=\"{ disabled, loading, hover }\" @mouseover=\"hover = true\" @mouseleave=\"hover = false\">\n    <BtnSecondary round :hover=\"hover\" v-bind=\"props\" />\n    <slot />\n  </div>\n</template>\n"],"names":["props","__props","hover","ref"],"mappings":";;;;;;;;;;;;;;AAMA,UAAMA,IAAQC,GA2BRC,IAAQC,EAAI,EAAK;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlBtnLink.vue.js","sources":["../../../src/components/PlBtnLink/PlBtnLink.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport './pl-btn-link.scss';\nimport type { MaskIconName16, Size } from '../../types';\nimport BtnSecondary from '../PlBtnSecondary/PlBtnSecondary.vue';\nimport { ref } from 'vue';\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center (is `true` by default)\n   */\n  justifyCenter?: boolean;\n  /**\n   * If `true`, the button is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n}>();\n\nconst hover = ref(false);\n</script>\n\n<template>\n  <div class=\"ui-btn-link\" :class=\"{ disabled, loading, hover }\" @mouseover=\"hover = true\" @mouseleave=\"hover = false\">\n    <BtnSecondary round :hover=\"hover\" v-bind=\"props\" />\n    <slot />\n  </div>\n</template>\n"],"names":["props","__props","hover","ref","_createElementBlock","_createVNode","BtnSecondary","_mergeProps","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;AAMA,UAAMA,IAAQC,GA2BRC,IAAQC,EAAI,EAAK;2BAIrBC,EAGM,OAAA;AAAA,MAHD,UAAM,eAAa,EAAA,UAAWH,YAAQ,SAAEA,EAAA,gBAASC,EAAA,MAAA,CAAK,CAAA;AAAA,MAAK,oCAAWA,EAAA,QAAK;AAAA,MAAU,qCAAYA,EAAA,QAAK;AAAA,IAAA;MACzGG,EAAoDC,GAApDC,EAAoD;AAAA,QAAtC,OAAA;AAAA,QAAO,OAAOL,EAAA;AAAA,MAAA,GAAeF,CAAK,GAAA,MAAA,IAAA,CAAA,OAAA,CAAA;AAAA,MAChDQ,EAAQC,EAAA,QAAA,SAAA;AAAA,IAAA;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnPrimary.vue.js","sources":["../../../src/components/PlBtnPrimary/PlBtnPrimary.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Primary button\n */\nexport default {\n  name: 'PlBtnPrimary',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport './pl-btn-primary.scss';\nimport type { MaskIconName16, Size } from '../../types';\nimport BtnBase from '../../base/BtnBase.vue';\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase class=\"pl-btn-primary\" v-bind=\"props\">\n    <slot />\n  </BtnBase>\n</template>\n"],"names":["__default__","props","__props"],"mappings":";;;AAIA,MAAAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;AAQA,UAAMC,IAAQC;;;;;;;;;"}
+{"version":3,"file":"PlBtnPrimary.vue.js","sources":["../../../src/components/PlBtnPrimary/PlBtnPrimary.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Primary button\n */\nexport default {\n  name: 'PlBtnPrimary',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport './pl-btn-primary.scss';\nimport type { MaskIconName16, Size } from '../../types';\nimport BtnBase from '../../base/BtnBase.vue';\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase class=\"pl-btn-primary\" v-bind=\"props\">\n    <slot />\n  </BtnBase>\n</template>\n"],"names":["__default__","props","__props","_openBlock","_createBlock","BtnBase","_mergeProps","_renderSlot","_ctx"],"mappings":";;;AAIA,MAAAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;AAQA,UAAMC,IAAQC;sBA6BZC,EAAA,GAAAC,EAEUC,GAFVC,EAEU,EAFD,OAAM,oBAAyBL,CAAK,GAAA;AAAA,iBAC3C,MAAQ;AAAA,QAARM,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnSecondary.vue.js","sources":["../../../src/components/PlBtnSecondary/PlBtnSecondary.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Secondary button\n */\nexport default {\n  name: 'PlBtnSecondary',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport './pl-btn-secondary.scss';\nimport type { MaskIconName16, Size } from '../../types';\nimport BtnBase from '../../base/BtnBase.vue';\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase v-bind=\"props\" class=\"pl-btn-secondary\">\n    <slot />\n  </BtnBase>\n</template>\n"],"names":["__default__","props","__props"],"mappings":";;;AAIA,MAAAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;AAQA,UAAMC,IAAQC;;;;;;;;;"}
+{"version":3,"file":"PlBtnSecondary.vue.js","sources":["../../../src/components/PlBtnSecondary/PlBtnSecondary.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Secondary button\n */\nexport default {\n  name: 'PlBtnSecondary',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport './pl-btn-secondary.scss';\nimport type { MaskIconName16, Size } from '../../types';\nimport BtnBase from '../../base/BtnBase.vue';\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase v-bind=\"props\" class=\"pl-btn-secondary\">\n    <slot />\n  </BtnBase>\n</template>\n"],"names":["__default__","props","__props","_openBlock","_createBlock","BtnBase","_mergeProps","_renderSlot","_ctx"],"mappings":";;;AAIA,MAAAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;AAQA,UAAMC,IAAQC;sBA6BZC,EAAA,GAAAC,EAEUC,GAFVC,EAEUL,GAFY,EAAE,OAAM,mBAAA,CAAkB,GAAA;AAAA,iBAC9C,MAAQ;AAAA,QAARM,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;"}

package/dist/components/PlBtnSplit/PlBtnSplit.vue.js

@@ -1,5 +1,5 @@
 (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode('.pl-btn-split{--border-color: var(--border-color-default);height:40px;min-width:160px;border-radius:6px;border:1px solid var(--border-color);cursor:pointer}.pl-btn-split.disabled,.pl-btn-split.loading{pointer-events:none;--border-color: var(--border-color-div-grey)}.pl-btn-split.loading .mask-loading{animation:spin 2.5s linear infinite}.pl-btn-split__title{padding:8px 14px;height:100%;color:var(--border-color);transition:all .1s ease-in-out}.pl-btn-split__title:focus-visible{position:relative;outline:none}.pl-btn-split__title:focus-visible:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:2px solid var(--border-color-focus);border-radius:6px;z-index:2}.pl-btn-split__title:hover{border-radius:6px;background-color:var(--btn-sec-hover-grey)}.pl-btn-split__title:active{border-radius:6px;background-color:var(--btn-sec-press-grey)}.pl-btn-split__icon,.pl-btn-split .mask-loading{--icon-color: var(--border-color)}.pl-btn-split__icon-container{width:36px;height:100%;position:relative;transition:all .1s ease-in-out}.pl-btn-split__icon-container:focus-visible{position:relative;outline:none}.pl-btn-split__icon-container:focus-visible:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:2px solid var(--border-color-focus);border-radius:6px;z-index:2}.pl-btn-split__icon-container:hover{border-radius:6px;background-color:var(--btn-sec-hover-grey)}.pl-btn-split__icon-container:active{border-radius:6px;background-color:var(--btn-sec-press-grey)}.pl-btn-split__icon-container:before{content:"";background:var(--border-color);height:26px;position:absolute;left:0;width:1px}')),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { defineComponent as j, mergeModels as C, useModel as q, ref as u, reactive as B, watch as U, computed as r, createElementBlock as M, openBlock as s, normalizeClass as R, createElementVNode as w, createBlock as f, createCommentVNode as G, withKeys as J, withModifiers as S, toDisplayString as Q, unref as y, Teleport as X, normalizeStyle as Y, Fragment as Z, renderList as ee } from "vue";
+import { defineComponent as j, mergeModels as C, useModel as q, ref as u, reactive as B, watch as U, computed as r, createElementBlock as M, openBlock as s, normalizeClass as R, createElementVNode as y, createBlock as f, createCommentVNode as G, withKeys as J, withModifiers as S, toDisplayString as Q, unref as k, Teleport as X, normalizeStyle as Y, Fragment as Z, renderList as ee } from "vue";
 import { deepEqual as H } from "@milaboratories/helpers";
 import { useElementPosition as te } from "../../composition/usePosition.js";
 import { normalizeListOptions as oe } from "../../helpers/utils.js";
@@ -17,8 +17,8 @@ const ie = ["onKeyup"], ue = /* @__PURE__ */ j({
     modelModifiers: {}
   }),
   emits: /* @__PURE__ */ C(["click"], ["update:modelValue"]),
-  setup(k, { expose: O, emit: V }) {
-    const a = k, z = V, m = q(k, "modelValue"), l = u(), v = u(), _ = u(), b = u(), o = B({
+  setup(m, { expose: O, emit: V }) {
+    const c = m, z = V, v = q(m, "modelValue"), l = u(), x = u(), b = u(), _ = u(), o = B({
       open: !1,
       optionsHeight: 0,
       activeIndex: -1
@@ -26,13 +26,13 @@ const ie = ["onKeyup"], ue = /* @__PURE__ */ j({
     O({
       data: o
     });
-    const c = B({
+    const a = B({
       top: "0px",
       left: "0px",
       width: "0px"
     });
     U(
-      v,
+      x,
       (e) => {
         if (e) {
           const t = e.getBoundingClientRect();
@@ -41,26 +41,26 @@ const ie = ["onKeyup"], ue = /* @__PURE__ */ j({
       },
       { immediate: !0 }
     );
-    const D = r(() => o.open ? "chevron-up" : "chevron-down"), N = r(() => (a.options ?? []).findIndex((e) => H(e.value, m.value))), d = r(
-      () => oe(a.options ?? []).map((e, t) => ({
+    const D = r(() => o.open ? "chevron-up" : "chevron-down"), N = r(() => (c.options ?? []).findIndex((e) => H(e.value, v.value))), d = r(
+      () => oe(c.options ?? []).map((e, t) => ({
         ...e,
         index: t,
         isSelected: t === N.value,
         isActive: t === o.activeIndex
       }))
-    ), x = r(() => a.loading || a.options === void 0), T = r(() => {
+    ), h = r(() => c.loading || c.options === void 0), T = r(() => {
       var e;
-      return ((e = d.value.find((t) => H(t.value, m.value))) == null ? void 0 : e.label) ?? (a.options === void 0 ? "..." : "");
+      return ((e = d.value.find((t) => H(t.value, v.value))) == null ? void 0 : e.label) ?? (c.options === void 0 ? "..." : "");
     });
     te(l, (e) => {
       const n = e.top + e.height + 3;
-      n + o.optionsHeight > e.clientHeight ? c.top = e.top - o.optionsHeight - 3 + "px" : c.top = n + "px", c.left = e.left + "px", c.width = e.width + "px";
+      n + o.optionsHeight > e.clientHeight ? a.top = e.top - o.optionsHeight - 3 + "px" : a.top = n + "px", a.left = e.left + "px", a.width = e.width + "px";
     });
     const E = (e) => {
       var t;
-      m.value = e, o.open = !1, (t = l == null ? void 0 : l.value) == null || t.focus();
+      v.value = e, o.open = !1, (t = l == null ? void 0 : l.value) == null || t.focus();
     };
-    function h() {
+    function g() {
       z("click");
     }
     const F = (e) => {
@@ -69,53 +69,53 @@ const ie = ["onKeyup"], ue = /* @__PURE__ */ j({
         e.preventDefault();
       else
         return;
-      if (e.target === b.value && e.code === "Enter") {
-        h();
+      if (e.target === _.value && e.code === "Enter") {
+        g();
         return;
       }
       const { open: t, activeIndex: n } = o;
-      if (!t && e.target === _.value) {
+      if (!t && e.target === b.value) {
         e.code === "Enter" && (o.open = !0);
         return;
       }
       e.code === "Escape" && (o.open = !1, (A = l.value) == null || A.focus());
-      const i = y(d), { length: p } = i;
+      const i = k(d), { length: p } = i;
       if (!p)
         return;
-      e.code === "Enter" && E((I = i.find((g) => g.index === n)) == null ? void 0 : I.value);
-      const P = i.findIndex((g) => g.index === n) ?? -1, W = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, $ = Math.abs(P + W + p) % p;
+      e.code === "Enter" && E((I = i.find((w) => w.index === n)) == null ? void 0 : I.value);
+      const P = i.findIndex((w) => w.index === n) ?? -1, W = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, $ = Math.abs(P + W + p) % p;
       o.activeIndex = d.value[$].index ?? -1;
     }, L = (e) => {
       var n, i;
       const t = e.relatedTarget;
-      !((n = l.value) != null && n.contains(t)) && !((i = v.value) != null && i.contains(t)) && (o.open = !1);
+      !((n = l.value) != null && n.contains(t)) && !((i = x.value) != null && i.contains(t)) && (o.open = !1);
     };
     return (e, t) => (s(), M("div", {
       ref_key: "root",
       ref: l,
-      class: R([{ disabled: e.disabled || x.value, loading: x.value }, "pl-btn-split d-flex"]),
+      class: R([{ disabled: m.disabled || h.value, loading: h.value }, "pl-btn-split d-flex"]),
       onFocusout: L,
       onKeydown: F
     }, [
-      w("div", {
+      y("div", {
         ref_key: "buttonAction",
-        ref: b,
+        ref: _,
         class: "pl-btn-split__title flex-grow-1 d-flex align-center text-s-btn",
         tabindex: "0",
-        onClick: h,
-        onKeyup: J(S(h, ["stop"]), ["enter"])
+        onClick: g,
+        onKeyup: J(S(g, ["stop"]), ["enter"])
       }, Q(T.value), 41, ie),
-      w("div", {
+      y("div", {
         ref_key: "menuActivator",
-        ref: _,
+        ref: b,
         class: "pl-btn-split__icon-container d-flex align-center justify-center",
         tabindex: "0",
         onClick: t[0] || (t[0] = (n) => o.open = !o.open)
       }, [
-        x.value ? (s(), f(y(K), {
+        h.value ? (s(), f(k(K), {
           key: 0,
           name: "loading"
-        })) : (s(), f(y(K), {
+        })) : (s(), f(k(K), {
           key: 1,
           name: D.value,
           class: "pl-btn-split__icon"
@@ -125,11 +125,11 @@ const ie = ["onKeyup"], ue = /* @__PURE__ */ j({
         key: 0,
         to: "body"
       }, [
-        w("div", {
+        y("div", {
           ref_key: "list",
-          ref: v,
+          ref: x,
           class: "pl-dropdown__options",
-          style: Y(c),
+          style: Y(a),
           tabindex: "-1"
         }, [
           (s(!0), M(Z, null, ee(d.value, (n, i) => (s(), f(ne, {

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnSplit.vue.js","sources":["../../../src/components/PlBtnSplit/PlBtnSplit.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M = unknown\">\nimport { deepEqual } from '@milaboratories/helpers';\nimport { computed, reactive, ref, unref, watch } from 'vue';\nimport { useElementPosition } from '../../composition/usePosition';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport type { ListOption } from '../../types';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport { PlIcon16 } from '../PlIcon16';\n\nimport './pl-btn-split.scss';\n\nconst props = defineProps<{\n  /**\n   * List of available options for the dropdown menu\n   */\n  options?: Readonly<ListOption<M>[]>;\n\n  /**\n   * If `true`, the dropdown component is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n}>();\n\nconst emits = defineEmits(['click']);\n\nconst model = defineModel<M>({ required: true });\n\nconst root = ref<HTMLElement | undefined>();\nconst list = ref<HTMLElement | undefined>();\nconst menuActivator = ref<HTMLElement | undefined>();\nconst buttonAction = ref<HTMLElement | undefined>();\n\nconst data = reactive({\n  open: false,\n  optionsHeight: 0,\n  activeIndex: -1,\n});\n\ndefineExpose({\n  data,\n});\n\nconst optionsStyle = reactive({\n  top: '0px',\n  left: '0px',\n  width: '0px',\n});\n\nwatch(\n  list,\n  (el) => {\n    if (el) {\n      const rect = el.getBoundingClientRect();\n      data.optionsHeight = rect.height;\n      window.dispatchEvent(new CustomEvent('adjust'));\n    }\n  },\n  { immediate: true },\n);\n\nconst iconName = computed(() => (data.open ? 'chevron-up' : 'chevron-down'));\n\nconst selectedIndex = computed(() => {\n  return (props.options ?? []).findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst items = computed(() =>\n  normalizeListOptions(props.options ?? []).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })),\n);\n\nconst isLoadingOptions = computed(() => props.loading || props.options === undefined);\n\nconst actionName = computed(() => items.value.find((o) => deepEqual(o.value, model.value))?.label ?? (props.options === undefined ? '...' : ''));\n\nuseElementPosition(root, (pos) => {\n  const focusWidth = 3;\n\n  const downTopOffset = pos.top + pos.height + focusWidth;\n\n  if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n    optionsStyle.top = pos.top - data.optionsHeight - focusWidth + 'px';\n  } else {\n    optionsStyle.top = downTopOffset + 'px';\n  }\n\n  optionsStyle.left = pos.left + 'px';\n  optionsStyle.width = pos.width + 'px';\n});\n\nconst selectOption = (v: M | undefined) => {\n  model.value = v!;\n  data.open = false;\n  root?.value?.focus();\n};\n\nfunction emitEnter() {\n  emits('click');\n}\n\nconst handleKeydown = (e: { code: string; preventDefault(): void; stopPropagation(): void; target: EventTarget | null }) => {\n  if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  if (e.target === buttonAction.value && e.code === 'Enter') {\n    emitEnter();\n    return;\n  }\n\n  const { open, activeIndex } = data;\n\n  if (!open && e.target === menuActivator.value) {\n    if (e.code === 'Enter') {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === 'Escape') {\n    data.open = false;\n    root.value?.focus();\n  }\n\n  const filtered = unref(items);\n\n  const { length } = filtered;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === 'Enter') {\n    selectOption(filtered.find((it) => it.index === activeIndex)?.value);\n  }\n\n  const localIndex = filtered.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 = items.value[newIndex].index ?? -1;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!root.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {\n    data.open = false;\n  }\n};\n</script>\n<template>\n  <div\n    ref=\"root\"\n    :class=\"{ disabled: disabled || isLoadingOptions, loading: isLoadingOptions }\"\n    class=\"pl-btn-split d-flex\"\n    @focusout=\"onFocusOut\"\n    @keydown=\"handleKeydown\"\n  >\n    <div\n      ref=\"buttonAction\"\n      class=\"pl-btn-split__title flex-grow-1 d-flex align-center text-s-btn\"\n      tabindex=\"0\"\n      @click=\"emitEnter\"\n      @keyup.stop.enter=\"emitEnter\"\n    >\n      {{ actionName }}\n    </div>\n    <div ref=\"menuActivator\" class=\"pl-btn-split__icon-container d-flex align-center justify-center\" tabindex=\"0\" @click=\"data.open = !data.open\">\n      <PlIcon16 v-if=\"isLoadingOptions\" name=\"loading\" />\n      <PlIcon16 v-else :name=\"iconName\" class=\"pl-btn-split__icon\" />\n    </div>\n\n    <Teleport v-if=\"data.open\" to=\"body\">\n      <div ref=\"list\" class=\"pl-dropdown__options\" :style=\"optionsStyle\" tabindex=\"-1\">\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=\"'medium'\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"names":["props","__props","emits","__emit","model","_useModel","root","ref","list","menuActivator","buttonAction","data","reactive","__expose","optionsStyle","watch","el","rect","iconName","computed","selectedIndex","o","deepEqual","items","normalizeListOptions","opt","index","isLoadingOptions","actionName","_a","useElementPosition","pos","downTopOffset","selectOption","v","emitEnter","handleKeydown","open","activeIndex","filtered","unref","length","_b","it","localIndex","delta","newIndex","onFocusOut","event","relatedTarget"],"mappings":"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"}
+{"version":3,"file":"PlBtnSplit.vue.js","sources":["../../../src/components/PlBtnSplit/PlBtnSplit.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M = unknown\">\nimport { deepEqual } from '@milaboratories/helpers';\nimport { computed, reactive, ref, unref, watch } from 'vue';\nimport { useElementPosition } from '../../composition/usePosition';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport type { ListOption } from '../../types';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport { PlIcon16 } from '../PlIcon16';\n\nimport './pl-btn-split.scss';\n\nconst props = defineProps<{\n  /**\n   * List of available options for the dropdown menu\n   */\n  options?: Readonly<ListOption<M>[]>;\n\n  /**\n   * If `true`, the dropdown component is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n}>();\n\nconst emits = defineEmits(['click']);\n\nconst model = defineModel<M>({ required: true });\n\nconst root = ref<HTMLElement | undefined>();\nconst list = ref<HTMLElement | undefined>();\nconst menuActivator = ref<HTMLElement | undefined>();\nconst buttonAction = ref<HTMLElement | undefined>();\n\nconst data = reactive({\n  open: false,\n  optionsHeight: 0,\n  activeIndex: -1,\n});\n\ndefineExpose({\n  data,\n});\n\nconst optionsStyle = reactive({\n  top: '0px',\n  left: '0px',\n  width: '0px',\n});\n\nwatch(\n  list,\n  (el) => {\n    if (el) {\n      const rect = el.getBoundingClientRect();\n      data.optionsHeight = rect.height;\n      window.dispatchEvent(new CustomEvent('adjust'));\n    }\n  },\n  { immediate: true },\n);\n\nconst iconName = computed(() => (data.open ? 'chevron-up' : 'chevron-down'));\n\nconst selectedIndex = computed(() => {\n  return (props.options ?? []).findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst items = computed(() =>\n  normalizeListOptions(props.options ?? []).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })),\n);\n\nconst isLoadingOptions = computed(() => props.loading || props.options === undefined);\n\nconst actionName = computed(() => items.value.find((o) => deepEqual(o.value, model.value))?.label ?? (props.options === undefined ? '...' : ''));\n\nuseElementPosition(root, (pos) => {\n  const focusWidth = 3;\n\n  const downTopOffset = pos.top + pos.height + focusWidth;\n\n  if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n    optionsStyle.top = pos.top - data.optionsHeight - focusWidth + 'px';\n  } else {\n    optionsStyle.top = downTopOffset + 'px';\n  }\n\n  optionsStyle.left = pos.left + 'px';\n  optionsStyle.width = pos.width + 'px';\n});\n\nconst selectOption = (v: M | undefined) => {\n  model.value = v!;\n  data.open = false;\n  root?.value?.focus();\n};\n\nfunction emitEnter() {\n  emits('click');\n}\n\nconst handleKeydown = (e: { code: string; preventDefault(): void; stopPropagation(): void; target: EventTarget | null }) => {\n  if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  if (e.target === buttonAction.value && e.code === 'Enter') {\n    emitEnter();\n    return;\n  }\n\n  const { open, activeIndex } = data;\n\n  if (!open && e.target === menuActivator.value) {\n    if (e.code === 'Enter') {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === 'Escape') {\n    data.open = false;\n    root.value?.focus();\n  }\n\n  const filtered = unref(items);\n\n  const { length } = filtered;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === 'Enter') {\n    selectOption(filtered.find((it) => it.index === activeIndex)?.value);\n  }\n\n  const localIndex = filtered.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 = items.value[newIndex].index ?? -1;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!root.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {\n    data.open = false;\n  }\n};\n</script>\n<template>\n  <div\n    ref=\"root\"\n    :class=\"{ disabled: disabled || isLoadingOptions, loading: isLoadingOptions }\"\n    class=\"pl-btn-split d-flex\"\n    @focusout=\"onFocusOut\"\n    @keydown=\"handleKeydown\"\n  >\n    <div\n      ref=\"buttonAction\"\n      class=\"pl-btn-split__title flex-grow-1 d-flex align-center text-s-btn\"\n      tabindex=\"0\"\n      @click=\"emitEnter\"\n      @keyup.stop.enter=\"emitEnter\"\n    >\n      {{ actionName }}\n    </div>\n    <div ref=\"menuActivator\" class=\"pl-btn-split__icon-container d-flex align-center justify-center\" tabindex=\"0\" @click=\"data.open = !data.open\">\n      <PlIcon16 v-if=\"isLoadingOptions\" name=\"loading\" />\n      <PlIcon16 v-else :name=\"iconName\" class=\"pl-btn-split__icon\" />\n    </div>\n\n    <Teleport v-if=\"data.open\" to=\"body\">\n      <div ref=\"list\" class=\"pl-dropdown__options\" :style=\"optionsStyle\" tabindex=\"-1\">\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=\"'medium'\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"names":["props","__props","emits","__emit","model","_useModel","root","ref","list","menuActivator","buttonAction","data","reactive","__expose","optionsStyle","watch","el","rect","iconName","computed","selectedIndex","o","deepEqual","items","normalizeListOptions","opt","index","isLoadingOptions","actionName","_a","useElementPosition","pos","downTopOffset","selectOption","v","emitEnter","handleKeydown","open","activeIndex","filtered","unref","length","_b","it","localIndex","delta","newIndex","onFocusOut","event","relatedTarget","_createElementBlock","_createElementVNode","_hoisted_1","_createBlock","_unref","PlIcon16","_Teleport","_openBlock","_Fragment","_renderList","item","DropdownListItem","_withModifiers","$event"],"mappings":"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"}

package/dist/components/PlChartHistogram/PlChartHistogram.vue2.js

@@ -1,38 +1,38 @@
-import { defineComponent as b, ref as v, computed as y, watch as B, onMounted as H, createElementBlock as l, openBlock as c, normalizeClass as m, createCommentVNode as k, createElementVNode as C, toDisplayString as L } from "vue";
-import { createHistogramFromBins as w, createHistogramLog as A, createHistogramLinear as E } from "./histogram.js";
-const _ = /* @__PURE__ */ b({
+import { defineComponent as b, ref as v, computed as y, watch as B, onMounted as H, createElementBlock as c, openBlock as m, normalizeClass as g, createCommentVNode as k, createElementVNode as C, toDisplayString as L } from "vue";
+import { createHistogramFromBins as x, createHistogramLog as w, createHistogramLinear as A } from "./histogram.js";
+const V = /* @__PURE__ */ b({
   __name: "PlChartHistogram",
   props: {
     settings: {}
   },
-  setup(g) {
-    const e = g, o = v(), n = y(() => {
-      const { xAxisLabel: t, yAxisLabel: r, threshold: p, compact: a, totalWidth: u = 674, totalHeight: h = 252 } = e.settings, s = a ? { top: 0, right: 0, bottom: 0, left: 0 } : { top: 0, right: 30, bottom: 40, left: 85 }, f = u - s.left - s.right, d = h - s.top - s.bottom;
+  setup(n) {
+    const e = n, o = v(), i = y(() => {
+      const { xAxisLabel: t, yAxisLabel: a, threshold: u, compact: l, totalWidth: h = 674, totalHeight: p = 252 } = e.settings, s = l ? { top: 0, right: 0, bottom: 0, left: 0 } : { top: 0, right: 30, bottom: 40, left: 85 }, f = h - s.left - s.right, d = p - s.top - s.bottom;
       return {
         width: f,
         height: d,
         margin: s,
-        compact: a,
+        compact: l,
         nBins: "nBins" in e.settings ? e.settings.nBins : 10,
         xAxisLabel: t,
-        yAxisLabel: r,
-        threshold: p
+        yAxisLabel: a,
+        threshold: u
       };
-    }), i = () => {
+    }), r = () => {
       const t = e.settings;
       if (t.type === "log-bins") {
-        w(o.value, n.value, t.bins);
+        x(o.value, i.value, t.bins);
         return;
       }
-      t.log ? A(o.value, n.value, t.numbers) : E(o.value, n.value, t.numbers);
+      t.log ? w(o.value, i.value, t.numbers) : A(o.value, i.value, t.numbers);
     };
-    return B(e, i), H(i), (t, r) => (c(), l("div", {
-      class: m(t.$style.component)
+    return B(e, r), H(r), (t, a) => (m(), c("div", {
+      class: g(t.$style.component)
     }, [
-      t.settings.title && !t.settings.compact ? (c(), l("div", {
+      n.settings.title && !n.settings.compact ? (m(), c("div", {
         key: 0,
-        class: m(t.$style.title)
-      }, L(t.settings.title), 3)) : k("", !0),
+        class: g(t.$style.title)
+      }, L(n.settings.title), 3)) : k("", !0),
       C("div", {
         ref_key: "chart",
         ref: o
@@ -41,6 +41,6 @@ const _ = /* @__PURE__ */ b({
   }
 });
 export {
-  _ as default
+  V as default
 };
 //# sourceMappingURL=PlChartHistogram.vue2.js.map