@platforma-sdk/ui-vue 1.37.0 → 1.37.2

package/dist/lib/ui/uikit/dist/components/PlAutocomplete/PlAutocomplete.vue.js

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

package/dist/lib/ui/uikit/dist/components/PlAutocomplete/PlAutocomplete.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlAutocomplete.vue.js","sources":["../../../../../../../../../lib/ui/uikit/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":["He","model","I","n","ue","u","U","ce","d","f","x","$","de","i","pe","findActiveIndex","tap","renderedOptionsRef","v","ge","g","b","ref","modelOptionRef","opt","index","S","V","A","p","j","E","getErrorMessage","props","isLoadingError","Ae","computed","item","computedPlaceholder","m","y","r","G","data","_a","rootRef","Q","L","setFocusOnInput","Y","input","Z","search","h","relatedTarget","o","te","z","l","length","localIndex","newIndex","R","ae","ne","re","useLabelNotch","be","open","refDebounced","useWatchFetch","searchDebounced","Ce","H","optionsRequest","result","D","normalizeListOptions","watch","err","T","modelOptionRequest","isLoadingOptions","loading"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAIe;AAAA,EACb,OAAM;AACR,GAAAA,KAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;EA0BMC,OAAAA,CAAAA;EAwFgB,MACPC,GAAA;AAAA,UACPC,IAAAC,GAAAF,GAAA,YAAA,GAAAG,IAAAH,GAAAI,IAAAC,GAAA,GAAAC,IAAAC,EAAA,GAAAC,IAAAD,EAAA,GAAAE,IAAAC,GAAA,SAAA,GAAAC,IAAAJ,EAAA,IAAA,GAAA,IAAAK,GAAA;AAAA,MAGFC,aACJC;AAAAA,MACEC,MAAyB;AAAA,IAAgD,CAAA,GACxEC,IAAAA,MAAWC;AAAAA,MACdC,EAEmB,MAAA,UAAY,CAAA,MAAAC,EAAcN,EAAgB,OAEtCO,EAAqB,KACxCC,CAAAA;AAAAA,MAIF,CAAGC,MAAAA,IAAAA,IAAAA,IAAAA;AAAAA,IAAA,GACHC,IAAAA,MAAAA,EAAAA,cAAAA,EAAAA,GAAAA,IAAAA,EAAAA,CAAAA,CAAAA,GAAAA,IAAAA,EAAAA,GAAAA,IAAAA,EAAAA,MAAAA,EAAAA,EAAAA,KAAAA,EAAAA,IAAAA,CAAAA,GAAAA,OAAAA;AAAAA,MACA,GAAA;AAAA,MACA,OAAA;AAAA,MACA,YAEsC,MACnBH,EAAAA;AAAAA,MAWjB,UAIJ,MAAA,EAAA;AAAA,IAAA,EAAA,CAAA,GAAAI,IAAUjB,EAAA,EAAA,GAAAkB,IAAAlB,EAAA,EAAA,GAAAmB,IAAAC,EAAA,MAAAxB,EAAA,QAAA,GAAAyB,IAAAD,EAAA,MAAAE,EAAA,MAAA,UAAA,CAAA,MAAAV,EAAA,EAAA,OAAAlB,EAAA,KAAA,CAAA,CAAA,GAAA,IAAA0B,EAAA,MAAA;AACDG,UAAAA,CAAAA,EAAAA,OAAgBC;AAGzB,YAAIC,EAAe;AACV,iBAAAC,GAAA9B,EAAA,KAAA;AAAA,YAAAsB,EAAA;AAMOS,iBAAe;AAAA,MACzB;AAAA,IAKC,CAAAC,GAAAA,IAAAA,EAAAA,MAAAA;AAGHC,YAAsBF,IACtBG,EAAAC,CAAA,OAAcvC,EAAAA,CAAAA,GAAAA,IACT,KAAA,EAAA,KAGI,CAAQwC,MAAApB,EAAAoB,EAAA,OAAsBtC,EAAA,KAAA,CAAI8B,KAChD,EAAA,KAAA,CAAAQ,MAEgBL,EAAAA,SACFjC,EAAA,KAAA,CAAA;;IAMb,CAAAF,GAAMyC,YAAQ,CAAA,EAAA,QAAAvC,EAAA,QACdoB,KAAAA,EAAe,QAAQL,cAEvByB,IAAAA,EAAAA,WACAC,GAAAA,YAAAC,EAAAA,UAAAA,UAAA1C,EAAA,UAAgB,IAAA,GAAA2C,IAAAjB,EAAA,MAAAD,EAAA,QAAA,SAAA,GAAA,GAAAmB,IAAA,CAAA,MAAA;AAClB;AAGE9C,MAAAA,EAAM,QAAQ,KACdsB,OAAuB,SAAA,EAAA,OAAAiB,EAAA,QAAA,GAAA3B,EAAA,QAAA,MAAA,EAAA,OAAA,KAAA,IAAAL,KAAA,OAAA,SAAAA,EAAA,UAAA,QAAA,EAAA,MAAA;AAAA,IACzB,GAEMwC,IAAkB,MAAA;;IAAM,GAAAC,IAAA,MAAAC;AAAa;AAGpCP,cAAO,IAAMjC,EAAA,UAAA,OAAA,SAAA,EAAA,MAAA;AAAA,IACpB,GAAAyC,IAAA,MAAA;AAEM,QAAA,OAAW,CAAA,EAAA;AAAA,IACRC;AAAiBC,IAAAA,EACzB,MAAA,EAAA,MAAA,CAAA,MAAA;AAED,MAAAxC,EAAA,QAA2B,IAAA,KAAA;AAAA,IACzB,CAAA;AACF,UAEmB,KAAuB,MAAA;;IACxC,GAAA,KAAMyC,OAAsB;AAExB,UAACT,GAAAA,GAAA3B;AAIP,YAEsBqC,IAAiD,EAAA;;IACjE,GAACC;AAGH,UAAEC;AAAe,UAAA,CAAA,aAAA,WAAA,SAAA,QAAA,EAAA,SAAA,EAAA,IAAA;AAFjB,UAAA,eAAA;AAAA;AAOF;AACM,YAAW,EAAA,MAAAF,GAAA,aACDG,EAAA,IAAA;AAGd,UAAA,CAAAH,GAAA;AAAA,UAAA,SAAA,YAAA,EAAA,OAAA,IAAA1C,EAAA,QAAA;AAGI;AAAA,MAMA;AAIN,QAAA,SAAK8C,aAAAA,EAAAA,OAAAA,IAAAA,EAAAA,QAAAA,OAAAA,IAAAA,EAAAA,UAAAA,QAAAA,EAAAA;AACH,YAAAlB,IAAAF,EAAAnB,CAAA,GAAA,EAAA,QAAAF,EAAA,IAAAuB;AAGE,UAAW,CAAAvB;AAIT0C;AAMNjB,QAAK,SAAc1B,WAAyB4C,EAAAA,EAAQ,KAAW,CAAAC,MAAAA,EAAA,UAAAJ,CAAA,CAAA;AACjE,YAAAK,KAAAtB,EAAA,UAAA,CAAAqB,MAAAA,EAAA,UAAAJ,CAAA,KAAA,IAAAM,KAAA,EAAA,SAAA,cAAA,IAAA,EAAA,SAAA,YAAA,KAAA,GAAAC,KAAA,KAAA,IAAAF,KAAAC,KAAA9C,CAAA,IAAAA;AAEAgD,QAAqB,cAEH9C,EAAA,MAAqB6C,EAAA,EAAa,SAAA;AAAA,IAEpD;AACaE,IAAAA,GACVC,CAAU,GAAAf,EAAA,MAAAlD,EAAA,OAAA,GAAA,EAAA,WAAA,GAAA,CAAA,GAAAkD;AAAAA;MAAA,CAAA,MAAA;AAA8B,YAAA;eAGrB,KAAA,IAAA3C,EAAA,UAAA,OAAA,SAAA,EAAA,MAAA,IAAA;AAAA;IAEb0C,GAAAA,GAEHT,MAAAA;AAGL,UAAA;AAED,MAAA9B,EAAA,OAAwBwD,EAAAA,eAA4B,KAAS,EAAM,UAE5CC,IAAoBC,EAAAA,kBAA8BrD,EAAAA,iBAC7D;AAAA;AAOV,UAAA,KAASsD,GAAA3D,GAAW+B,KAAArB,EAAe,SAAA,IAAfqB,CAAAA,GAAAA,IAAAA,EAAAA,MAA6B1B,GAAAA,OAC3Ce,OACKA,MAAAA,MAAM,OAAYf,EAAAA,cAEbe,CAAAA,IAAAA,CAAAA,CAAM,GAAc,IAAAwC,EAAA,MAAAtE,EAAA,OAA1B,OAAA,MAAA;AAGX,UAAA,GAAA;AAED,aAAM,KAAA,CAAMuE,GAAe,IAAAlC,EAAO,UAAY,OAAA,SAAA,EAAA,OAAA,CAAA,IAAAnC,EAAA,cAAAA,EAAA,YAAA,CAAA,KAAA,IAAA,MAAAA,EAAA,cAAA,OAAA,CAAA,CAAA,MAAA,OAAA,SAAA,EAAA,CAAA,IAAAmC,EAAA;AAAA,IAC5C,CAAImC;AAKJ,mBAG6BC,EAAA,OAAmB,CAAA,MAAA;AAC5CD,YACFpD,EAAe,QAAQsD,GAAsBF,EAAO,UAAG,SAAAhD,EAAA,QAAA;AAAA,IAE1D,CAAA,GAEDmD,EAAM,MAAMJ,EAAe,OAAO,CAACK,MAAQ;AACrCA,YACa7C,EAAA,QAAQ8C,EAAQD,CAAAA,CAAAA,CAAAA,EAAAA,CAAAA;AAAAA,IAElC,CAAA,GAEDD,EAAM,MAAMJ,EAAe,OAAWO,CAAAA,MAA4B;AAChEC,YAAyBC,EAAAA,QAAAA,CAAAA,CAAAA;AAAAA,IAAA,CAC1B,GAAA9B,EAAA,MAAAuB,EAAA,WAAA,EAAA,SAAA,CAAA,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/ui/uikit/dist/components/PlBtnAccent/PlBtnAccent.vue.js

@@ -0,0 +1,38 @@
+import { defineComponent as o, createBlock as a, openBlock as r, mergeProps as c, withCtx as i, renderSlot as d } from "vue";
+import p from "../../base/BtnBase.vue.js";
+(function() {
+  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 (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const s = {
+  name: "PlBtnAccent"
+}, u = /* @__PURE__ */ o({
+  ...s,
+  props: {
+    loading: { type: Boolean },
+    size: {},
+    round: { type: Boolean },
+    icon: {},
+    reverse: { type: Boolean },
+    justifyCenter: { type: Boolean }
+  },
+  setup(t) {
+    const e = t;
+    return (n, l) => (r(), a(p, c({ class: "pl-btn-accent" }, e), {
+      default: i(() => [
+        d(n.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+});
+export {
+  u as default
+};
+//# sourceMappingURL=PlBtnAccent.vue.js.map

package/dist/lib/ui/uikit/dist/components/PlBtnAccent/PlBtnAccent.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlBtnAccent.vue.js","sources":["../../../../../../../../../lib/ui/uikit/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":["i","e","__props"],"mappings":";;;;;;;;;;;;AAKQ,MAAAA,IAAA;AAAA,EACR,MAAA;;;;;;;;;;;EAQA,MAAAC,GAAcC;;;;;;;;;;"}

package/dist/lib/ui/uikit/dist/components/PlBtnDanger/PlBtnDanger.vue.js

@@ -0,0 +1,38 @@
+import { defineComponent as a, createBlock as o, openBlock as r, mergeProps as d, withCtx as i, renderSlot as p } from "vue";
+import s from "../../base/BtnBase.vue.js";
+(function() {
+  try {
+    if (typeof document < "u") {
+      var e = document.createElement("style");
+      e.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(e);
+    }
+  } catch (n) {
+    console.error("vite-plugin-css-injected-by-js", n);
+  }
+})();
+const l = {
+  name: "PlBtnDanger"
+}, h = /* @__PURE__ */ a({
+  ...l,
+  props: {
+    loading: { type: Boolean },
+    size: {},
+    round: { type: Boolean },
+    icon: {},
+    reverse: { type: Boolean },
+    justifyCenter: { type: Boolean }
+  },
+  setup(e) {
+    const n = e;
+    return (t, b) => (r(), o(s, d({ class: "pl-btn-danger" }, n), {
+      default: i(() => [
+        p(t.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+});
+export {
+  h as default
+};
+//# sourceMappingURL=PlBtnDanger.vue.js.map

package/dist/lib/ui/uikit/dist/components/PlBtnDanger/PlBtnDanger.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlBtnDanger.vue.js","sources":["../../../../../../../../../lib/ui/uikit/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":["i","__props"],"mappings":";;;;;;;;;;;;AAKQ,MAAAA,IAAA;AAAA,EACR,MAAA;;;;;;;;;;;EAQA,MAAA,GAAcC;;;;;;;;;;"}

package/dist/lib/ui/uikit/dist/components/PlBtnGhost/PlBtnGhost.vue.js

@@ -0,0 +1,53 @@
+import { defineComponent as u, computed as s, ref as f, useSlots as m, createElementBlock as i, openBlock as n, mergeProps as v, createCommentVNode as d, createBlock as l, renderSlot as p, unref as a } from "vue";
+import h from "../PlIcon24/PlIcon24.vue.js";
+import { useRipple as x } from "../../composition/useRipple.js";
+(function() {
+  try {
+    if (typeof document < "u") {
+      var e = document.createElement("style");
+      e.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(--color-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)}[data-theme=dark] .pl-btn-ghost{--mask-icon-bg-color: #fff}[data-theme=dark] .pl-btn-ghost:hover{--color-text: #87E087}.pl-btn-ghost:disabled{--color-text: var(--btn-disabled-bg);box-shadow:none!important;cursor:auto}.pl-btn-ghost.loading{--color-text: var(--btn-disabled-bg)}")), document.head.appendChild(e);
+    }
+  } catch (o) {
+    console.error("vite-plugin-css-injected-by-js", o);
+  }
+})();
+const w = { key: 0 }, y = {
+  name: "PlBtnGhost"
+}, B = /* @__PURE__ */ u({
+  ...y,
+  props: {
+    loading: { type: Boolean },
+    size: { default: void 0 },
+    round: { type: Boolean },
+    icon: { default: void 0 },
+    reverse: { type: Boolean },
+    justifyCenter: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const o = e, b = s(() => o.size === "small"), c = s(() => o.size === "large"), r = f(), g = m();
+    return x(r), (t, k) => (n(), i("button", v({
+      ref_key: "btnRef",
+      ref: r,
+      tabindex: "0",
+      class: ["pl-btn-ghost", { loading: t.loading, small: b.value, large: c.value, round: t.round, reverse: t.reverse, justifyCenter: t.justifyCenter, [t.$attrs.class + ""]: !0 }]
+    }, { ...t.$attrs, disabled: !!t.$attrs.disabled || t.loading }), [
+      a(g).default && !t.round ? (n(), i("span", w, [
+        p(t.$slots, "default")
+      ])) : d("", !0),
+      t.loading ? (n(), l(a(h), {
+        key: 1,
+        name: "loading",
+        size: t.size
+      }, null, 8, ["size"])) : t.icon ? (n(), l(a(h), {
+        key: 2,
+        name: t.icon,
+        size: t.size
+      }, null, 8, ["name", "size"])) : d("", !0),
+      p(t.$slots, "append")
+    ], 16));
+  }
+});
+export {
+  B as default
+};
+//# sourceMappingURL=PlBtnGhost.vue.js.map

package/dist/lib/ui/uikit/dist/components/PlBtnGhost/PlBtnGhost.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlBtnGhost.vue.js","sources":["../../../../../../../../../lib/ui/uikit/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    <PlMaskIcon24 v-if=\"loading\" name=\"loading\" :size=\"size\" />\n    <PlMaskIcon24 v-else-if=\"icon\" :name=\"icon\" :size=\"size\" />\n    <slot name=\"append\" />\n  </button>\n</template>\n"],"names":["b","v","props","n","p","f","t","m","l","c","z"],"mappings":";;;;;;;;;;;;;AAKQ,MAAAA,IAAA,EAAA,KAAA,EAAA,GAAAC,IAAA;AAAA,EACR,MAAA;;;;;;;;;;;EAUMC,MAAAA,GAAAA;AAyCN,UAAAC,IAAgBC,GAAAC,IAAAC,EAAA,MAAAH,EAAA,SAAA,OAAA,GAAAI,IAAAD,EAAA,MAAAH,EAAA,SAAA,OAAA,GAAAK,IAAAC,EAAA,GAAA,IAAAC,EAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/ui/uikit/dist/components/PlBtnGroup/PlBtnGroup.vue.js

@@ -0,0 +1,77 @@
+import { defineComponent as v, useSlots as m, computed as _, createElementBlock as t, openBlock as o, normalizeClass as d, createCommentVNode as p, createVNode as w, createElementVNode as y, createBlock as k, toDisplayString as i, unref as a, withCtx as c, renderSlot as z, Fragment as C, renderList as V, withKeys as B } from "vue";
+import E from "../PlTooltip/PlTooltip.vue.js";
+import N from "../../utils/InnerBorder.vue.js";
+import { getErrorMessage as j } from "../../helpers/error.js";
+(function() {
+  try {
+    if (typeof document < "u") {
+      var n = document.createElement("style");
+      n.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(n);
+    }
+  } catch (l) {
+    console.error("vite-plugin-css-injected-by-js", l);
+  }
+})();
+const K = { key: 0 }, S = ["tabindex", "onKeydown", "onClick"], D = {
+  key: 1,
+  class: "pl-btn-group__helper"
+}, F = {
+  key: 2,
+  class: "pl-btn-group__error"
+}, G = {
+  name: "PlBtnGroup"
+}, P = /* @__PURE__ */ v({
+  ...G,
+  props: {
+    modelValue: {},
+    label: {},
+    options: {},
+    disabled: { type: Boolean },
+    compact: { type: Boolean },
+    helper: {},
+    error: {}
+  },
+  emits: ["update:modelValue"],
+  setup(n, { emit: l }) {
+    const b = m(), u = l, s = (e) => u("update:modelValue", e), g = n, h = _(
+      () => g.options.map((e) => ({
+        label: "label" in e ? e.label : e.text,
+        value: e.value
+      }))
+    );
+    return (e, M) => (o(), t("div", {
+      class: d(["pl-btn-group", { disabled: e.disabled, compact: e.compact }])
+    }, [
+      e.label ? (o(), t("label", K, [
+        y("span", null, i(e.label), 1),
+        a(b).tooltip ? (o(), k(a(E), {
+          key: 0,
+          class: "info",
+          position: "top"
+        }, {
+          tooltip: c(() => [
+            z(e.$slots, "tooltip")
+          ]),
+          _: 3
+        })) : p("", !0)
+      ])) : p("", !0),
+      w(N, { class: "pl-btn-group__container" }, {
+        default: c(() => [
+          (o(!0), t(C, null, V(h.value, (r, x) => (o(), t("div", {
+            key: x,
+            class: d(["pl-btn-group__option text-s", { active: e.modelValue === r.value }]),
+            tabindex: e.modelValue === r.value || e.disabled ? void 0 : 0,
+            onKeydown: B((f) => s(r.value), ["enter"]),
+            onClick: (f) => s(r.value)
+          }, i(r.label), 43, S))), 128))
+        ]),
+        _: 1
+      }),
+      e.helper ? (o(), t("div", D, i(e.helper), 1)) : e.error ? (o(), t("div", F, i(a(j)(e.error)), 1)) : p("", !0)
+    ], 2));
+  }
+});
+export {
+  P as default
+};
+//# sourceMappingURL=PlBtnGroup.vue.js.map

package/dist/lib/ui/uikit/dist/components/PlBtnGroup/PlBtnGroup.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlBtnGroup.vue.js","sources":["../../../../../../../../../lib/ui/uikit/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":["d","useSlots","emit","props","y","c","u","b","_","k","it"],"mappings":";;;;;;;;;;;;;;;;;;;SAIe;AAAA,GACP,IAAA;AAAA,EACR,MAAA;;;;;;;;;;;;;EAWA,MAAAA,GAAcC,EAAAA,MAERC,EAAAA;AAwCoB,UACxBC,IAAMC,EAAQ,GAAAC,IAAAC,GAAI,IAAS,CAAA,MAAAD,EAAA,qBAAA,CAAA,GAAAE,IAAAP,GAAAQ,IAAAC;AAAAA,MAAA,MAClBF,EAAA,QAAA,IAAWG,CAAKA;QACvB,OAAOA,WAAG,IAAA,EAAA,QAAA,EAAA;AAAA,QACV,OAAA,EAAA;AAAA,MAAA,EACJ;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/ui/uikit/dist/components/PlBtnLink/PlBtnLink.vue.js

@@ -0,0 +1,41 @@
+import { defineComponent as a, ref as i, createElementBlock as d, openBlock as s, normalizeClass as u, createVNode as c, renderSlot as p, mergeProps as v } from "vue";
+import m from "../PlBtnSecondary/PlBtnSecondary.vue.js";
+(function() {
+  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 (l) {
+    console.error("vite-plugin-css-injected-by-js", l);
+  }
+})();
+const y = /* @__PURE__ */ a({
+  __name: "PlBtnLink",
+  props: {
+    loading: { type: Boolean },
+    size: {},
+    icon: {},
+    reverse: { type: Boolean },
+    justifyCenter: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  setup(e) {
+    const l = e, o = i(!1);
+    return (n, t) => (s(), d("div", {
+      class: u(["ui-btn-link", { disabled: n.disabled, loading: n.loading, hover: o.value }]),
+      onMouseover: t[0] || (t[0] = (r) => o.value = !0),
+      onMouseleave: t[1] || (t[1] = (r) => o.value = !1)
+    }, [
+      c(m, v({
+        round: "",
+        hover: o.value
+      }, l), null, 16, ["hover"]),
+      p(n.$slots, "default")
+    ], 34));
+  }
+});
+export {
+  y as default
+};
+//# sourceMappingURL=PlBtnLink.vue.js.map

package/dist/lib/ui/uikit/dist/components/PlBtnLink/PlBtnLink.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlBtnLink.vue.js","sources":["../../../../../../../../../lib/ui/uikit/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":["l","__props"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAMA,MAAAA,GAAcC;;;;;;;;;;;;;;;"}