@milaboratories/uikit 2.2.90 → 2.2.91

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

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

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

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

package/dist/components/PlAutocomplete/PlAutocomplete.vue2.js

@@ -0,0 +1,5 @@
+import f from "./PlAutocomplete.vue.js";
+export {
+  f as default
+};
+//# sourceMappingURL=PlAutocomplete.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlAutocomplete.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PlAutocomplete/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

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

@@ -0,0 +1,64 @@
+import { MaskIconName16, Size } from '../../types';
+/**
+ * Accent button
+ */
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
+    /**
+     * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.
+     */
+    loading?: boolean;
+    /**
+     * Size of the button, the default value is 'medium'
+     */
+    size?: Size;
+    /**
+     * If `true` the shape is round.
+     */
+    round?: boolean;
+    /**
+     * Icon to display
+     */
+    icon?: MaskIconName16;
+    /**
+     * If `true`, an icon is displayed before the text.
+     */
+    reverse?: boolean;
+    /**
+     * Justify text at the center
+     */
+    justifyCenter?: boolean;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    /**
+     * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.
+     */
+    loading?: boolean;
+    /**
+     * Size of the button, the default value is 'medium'
+     */
+    size?: Size;
+    /**
+     * If `true` the shape is round.
+     */
+    round?: boolean;
+    /**
+     * Icon to display
+     */
+    icon?: MaskIconName16;
+    /**
+     * If `true`, an icon is displayed before the text.
+     */
+    reverse?: boolean;
+    /**
+     * Justify text at the center
+     */
+    justifyCenter?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=PlBtnAccent.vue.d.ts.map

package/dist/components/PlBtnAccent/PlBtnAccent.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlBtnAccent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnAccent/PlBtnAccent.vue"],"names":[],"mappings":"AAiDA,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAIxD;;GAEG;;IAGD;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;IAvBvB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;qBA+BI,GAAG;;AAxDhC,wBA8FK;AASL,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/PlBtnAccent/PlBtnAccent.vue.js

@@ -0,0 +1,30 @@
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".pl-btn-accent{--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-accent.justifyCenter{justify-content:center}.pl-btn-accent.round{border-radius:50%;width:var(--button-height);min-width:var(--button-height);padding:0;justify-content:center}.pl-btn-accent.small{--button-height: 32px;--main-padding: 0 8px}.pl-btn-accent.medium{--main-padding: 0 16px}.pl-btn-accent.large{--button-height: 56px;--border-radius: 8px;--font-size: 16px;--main-padding: 0 18px}.pl-btn-accent.large .mask{--mask-size: 24px}.pl-btn-accent:disabled{--color-text: var(--color-dis-00)}.pl-btn-accent:disabled *{color:var(--color-text)}.pl-btn-accent:not([disabled]){cursor:pointer}.pl-btn-accent:not([disabled]).hover{background:var(--color-btn-hover)}.pl-btn-accent:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-accent:focus-visible{--focus-shadow: inset 0 0 0 2px var(--border-color-focus)}.pl-btn-accent .icon{display:block;width:16px;height:16px}.pl-btn-accent.loading{box-shadow:none!important}.pl-btn-accent.loading .mask-loading{display:block;animation:spin 4s linear infinite}.pl-btn-accent.reverse{flex-direction:row-reverse}.pl-btn-accent>span{display:inline-flex}.pl-btn-accent{--color-btn-background: var(--color-accent-default);--color-btn-hover: var(--color-accent-hover);background-color:var(--color-btn-background);border:none}.pl-btn-accent.large{--drop-shadow: 3px 3px 0px #000000}.pl-btn-accent.loading{background:#070529cc}.pl-btn-accent:disabled{background-color:var(--btn-disabled-bg);box-shadow:none!important;cursor:auto}.pl-btn-accent:active{--active-shadow: inset 0px 3px 0px rgba(0, 0, 0, .24);--drop-shadow: 0 0 0 0 transparent}")),document.head.appendChild(t)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
+import { defineComponent as n, createBlock as r, openBlock as a, mergeProps as p, withCtx as s, renderSlot as c } from "vue";
+
+import l from "../../base/BtnBase.vue.js";
+const i = {
+  name: "PlBtnAccent"
+}, d = /* @__PURE__ */ n({
+  ...i,
+  props: {
+    loading: { type: Boolean },
+    size: {},
+    round: { type: Boolean },
+    icon: {},
+    reverse: { type: Boolean },
+    justifyCenter: { type: Boolean }
+  },
+  setup(e) {
+    const o = e;
+    return (t, f) => (a(), r(l, p({ class: "pl-btn-accent" }, o), {
+      default: s(() => [
+        c(t.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+});
+export {
+  d as default
+};
+//# sourceMappingURL=PlBtnAccent.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlBtnAccent.vue.js","sources":["../../../src/components/PlBtnAccent/PlBtnAccent.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Accent button\n */\nexport default {\n  name: 'PlBtnAccent',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport './pl-btn-accent.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-accent\" v-bind=\"props\">\n    <slot />\n  </BtnBase>\n</template>\n"],"names":["__default__","props","__props"],"mappings":";;;AAIA,MAAeA,IAAA;AAAA,EACb,MAAM;AACR;;;;;;;;;;;AAQA,UAAMC,IAAQC;;;;;;;;;"}

package/dist/components/PlBtnAccent/PlBtnAccent.vue2.js

@@ -0,0 +1,5 @@
+import f from "./PlBtnAccent.vue.js";
+export {
+  f as default
+};
+//# sourceMappingURL=PlBtnAccent.vue2.js.map

package/dist/components/PlBtnAccent/PlBtnAccent.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlBtnAccent.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/PlBtnAccent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnAccent/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

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

@@ -0,0 +1,64 @@
+import { MaskIconName16, Size } from '../../types';
+/**
+ * Danger button
+ */
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
+    /**
+     * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.
+     */
+    loading?: boolean;
+    /**
+     * Size of the button, the default value is 'medium'
+     */
+    size?: Size;
+    /**
+     * If `true` the shape is round.
+     */
+    round?: boolean;
+    /**
+     * Icon to display
+     */
+    icon?: MaskIconName16;
+    /**
+     * If `true`, an icon is displayed before the text.
+     */
+    reverse?: boolean;
+    /**
+     * Justify text at the center
+     */
+    justifyCenter?: boolean;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    /**
+     * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.
+     */
+    loading?: boolean;
+    /**
+     * Size of the button, the default value is 'medium'
+     */
+    size?: Size;
+    /**
+     * If `true` the shape is round.
+     */
+    round?: boolean;
+    /**
+     * Icon to display
+     */
+    icon?: MaskIconName16;
+    /**
+     * If `true`, an icon is displayed before the text.
+     */
+    reverse?: boolean;
+    /**
+     * Justify text at the center
+     */
+    justifyCenter?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=PlBtnDanger.vue.d.ts.map

package/dist/components/PlBtnDanger/PlBtnDanger.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlBtnDanger.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnDanger/PlBtnDanger.vue"],"names":[],"mappings":"AAiDA,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAIxD;;GAEG;;IAGD;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;IAvBvB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;qBA+BI,GAAG;;AAxDhC,wBA8FK;AASL,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

@@ -0,0 +1,30 @@
+(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");n.appendChild(document.createTextNode(".pl-btn-danger{--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-danger.justifyCenter{justify-content:center}.pl-btn-danger.round{border-radius:50%;width:var(--button-height);min-width:var(--button-height);padding:0;justify-content:center}.pl-btn-danger.small{--button-height: 32px;--main-padding: 0 8px}.pl-btn-danger.medium{--main-padding: 0 16px}.pl-btn-danger.large{--button-height: 56px;--border-radius: 8px;--font-size: 16px;--main-padding: 0 18px}.pl-btn-danger.large .mask{--mask-size: 24px}.pl-btn-danger:disabled{--color-text: var(--color-dis-00)}.pl-btn-danger:disabled *{color:var(--color-text)}.pl-btn-danger:not([disabled]){cursor:pointer}.pl-btn-danger:not([disabled]).hover{background:var(--color-btn-hover)}.pl-btn-danger:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-danger:focus-visible{--focus-shadow: inset 0 0 0 2px var(--border-color-focus)}.pl-btn-danger .icon{display:block;width:16px;height:16px}.pl-btn-danger.loading{box-shadow:none!important}.pl-btn-danger.loading .mask-loading{display:block;animation:spin 4s linear infinite}.pl-btn-danger.reverse{flex-direction:row-reverse}.pl-btn-danger>span{display:inline-flex}.pl-btn-danger{--color-btn-background: var(--txt-error);--color-btn-hover: #FF5C5C;background-color:var(--color-btn-background);border:none}.pl-btn-danger.large{--drop-shadow: 3px 3px 0px #000000}.pl-btn-danger.loading{background:#070529cc}.pl-btn-danger:disabled{background-color:var(--btn-disabled-bg);box-shadow:none!important;cursor:auto}.pl-btn-danger:active{--active-shadow: inset 0px 3px 0px rgba(0, 0, 0, .24);--drop-shadow: 0 0 0 0 transparent}")),document.head.appendChild(n)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { defineComponent as n, createBlock as r, openBlock as a, mergeProps as p, withCtx as s, renderSlot as l } from "vue";
+
+import c from "../../base/BtnBase.vue.js";
+const i = {
+  name: "PlBtnDanger"
+}, u = /* @__PURE__ */ n({
+  ...i,
+  props: {
+    loading: { type: Boolean },
+    size: {},
+    round: { type: Boolean },
+    icon: {},
+    reverse: { type: Boolean },
+    justifyCenter: { type: Boolean }
+  },
+  setup(e) {
+    const o = e;
+    return (t, f) => (a(), r(c, p({ class: "pl-btn-danger" }, o), {
+      default: s(() => [
+        l(t.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+});
+export {
+  u as default
+};
+//# sourceMappingURL=PlBtnDanger.vue.js.map

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

@@ -0,0 +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,MAAeA,IAAA;AAAA,EACb,MAAM;AACR;;;;;;;;;;;AAQA,UAAMC,IAAQC;;;;;;;;;"}

package/dist/components/PlBtnDanger/PlBtnDanger.vue2.js

@@ -0,0 +1,5 @@
+import f from "./PlBtnDanger.vue.js";
+export {
+  f as default
+};
+//# sourceMappingURL=PlBtnDanger.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlBtnDanger.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/PlBtnDanger/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnDanger/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

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

@@ -0,0 +1,71 @@
+import { MaskIconName24, Size } from '../../types';
+/**
+ * Ghost button
+ */
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
+    /**
+     * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.
+     */
+    loading?: boolean;
+    /**
+     * Size of the button, the default value is 'medium'
+     */
+    size?: Size;
+    /**
+     * If `true` the shape is round.
+     */
+    round?: boolean;
+    /**
+     * Icon to display
+     */
+    icon?: MaskIconName24;
+    /**
+     * If `true`, an icon is displayed before the text.
+     */
+    reverse?: boolean;
+    /**
+     * Justify text at the center (is `false` by default)
+     */
+    justifyCenter?: boolean;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    /**
+     * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.
+     */
+    loading?: boolean;
+    /**
+     * Size of the button, the default value is 'medium'
+     */
+    size?: Size;
+    /**
+     * If `true` the shape is round.
+     */
+    round?: boolean;
+    /**
+     * Icon to display
+     */
+    icon?: MaskIconName24;
+    /**
+     * If `true`, an icon is displayed before the text.
+     */
+    reverse?: boolean;
+    /**
+     * Justify text at the center (is `false` by default)
+     */
+    justifyCenter?: boolean;
+}> & Readonly<{}>, {
+    size: Size;
+    icon: MaskIconName24;
+    justifyCenter: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    btnRef: HTMLButtonElement;
+}, HTMLButtonElement>, {
+    default?(_: {}): any;
+    append?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=PlBtnGhost.vue.d.ts.map

package/dist/components/PlBtnGhost/PlBtnGhost.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlBtnGhost.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnGhost/PlBtnGhost.vue"],"names":[],"mappings":"AA8EA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAMxD;;GAEG;;IAGC;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;IAvBvB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;UAhBhB,IAAI;UAQJ,cAAc;mBAQL,OAAO;;;;qBA+EE,GAAG;oBACH,GAAG;;AAzGhC,wBAuJK;AAcL,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}