@wikicasa-dev/components 2.2.9-alpha.9 → 2.3.1-alpha.0

package/dist/packages/components/lib/UIKit/Autocomplete/ClearableAutocomplete.vue.js

@@ -1,20 +1,22 @@
-import { defineComponent as D, mergeModels as $, useModel as y, shallowRef as d, useId as N, useTemplateRef as b, onBeforeMount as A, watch as w, nextTick as H, createBlock as F, openBlock as h, withCtx as g, createElementBlock as P, Fragment as X, renderList as j, renderSlot as p, createElementVNode as u, normalizeClass as f, withDirectives as O, unref as q, vModelText as G, toDisplayString as J, withModifiers as Q, normalizeStyle as Y, createTextVNode as Z, vShow as _ } from "vue";
-import ee from "../BaseDropDown.vue.js";
+import { defineComponent as j, mergeModels as U, useModel as S, useId as q, useTemplateRef as d, shallowRef as c, onBeforeMount as G, onMounted as J, onUnmounted as Q, watch as E, nextTick as Y, createBlock as z, openBlock as M, withCtx as W, createElementBlock as Z, Fragment as _, renderList as ee, renderSlot as m, createElementVNode as u, normalizeClass as f, withDirectives as I, unref as te, vModelText as le, toDisplayString as ne, withModifiers as oe, normalizeStyle as ae, createTextVNode as ie, vShow as ue } from "vue";
+import se from "../BaseDropDown.vue.js";
 import '../../../../../assets/BaseDropDown.css';/* empty css                   */
-import te from "../BaseSelect/SelectItem.vue.js";
-import { debounce as le } from "@wikicasa-dev/utilities";
-const ne = ["id", "data-cy", "placeholder"], oe = ["innerHTML"], ce = /* @__PURE__ */ D({
+import re from "../BaseSelect/SelectItem.vue.js";
+import { debounce as de } from "@wikicasa-dev/utilities";
+const ce = ["id", "data-cy", "placeholder"], fe = ["innerHTML"], ye = /* @__PURE__ */ j({
   __name: "ClearableAutocomplete",
-  props: /* @__PURE__ */ $({
+  props: /* @__PURE__ */ U({
     dataCy: {},
     placeholder: {},
     enableKeyboardController: { type: Boolean, default: !0 },
     triggerWrapperClasses: {},
     inputWrapperClasses: {},
     inputClasses: {},
+    hiddenTextClasses: {},
     dropdownClasses: {},
     clearButton: {},
     keepState: {},
+    disableCb: { type: Boolean, default: !1 },
     onInputChangeCb: { type: Function },
     onOptionSelectedCb: { type: [Function, null] }
   }, {
@@ -27,160 +29,164 @@ const ne = ["id", "data-cy", "placeholder"], oe = ["innerHTML"], ce = /* @__PURE
     },
     inputValueModifiers: {}
   }),
-  emits: /* @__PURE__ */ $(["click", "inputClick", "keydown"], ["update:open", "update:modelValue", "update:inputValue"]),
-  setup(l, { expose: R, emit: x }) {
-    const s = y(l, "open"), a = y(l, "modelValue"), o = y(l, "inputValue");
-    o.value = o.value ?? a.value?.label ?? "";
-    const v = x, k = d(!1), E = N(), m = b("inputRef"), c = d(0), C = d(!1), S = d(null), i = d([]), T = b("dropdownRef"), M = b("hiddenSpan"), U = () => {
-      o.value = "", a.value = null;
-    }, I = async (t) => {
-      if (!t) {
-        i.value = [], s.value = !1;
+  emits: /* @__PURE__ */ U(["input", "click", "inputClick", "keydown"], ["update:open", "update:modelValue", "update:inputValue"]),
+  setup(t, { expose: L, emit: D }) {
+    const s = S(t, "open"), p = S(t, "modelValue"), o = S(t, "inputValue"), v = D, K = q(), C = d("inputRef"), k = c(0), y = c(!1), r = c(!1), x = c(null), a = c([]), O = d("dropdownRef"), h = d("hiddenSpan"), w = d("inputWrapperRef"), R = d("clearButtonRef"), N = () => {
+      o.value = "", p.value = null, r.value = !1;
+    }, A = async (l) => {
+      if (!l) {
+        a.value = [], s.value = !1;
         return;
       }
-      i.value = await S.value?.(t) || [], C.value = !0, s.value = !!i.value.length;
-    }, B = (t = -1) => {
-      const e = i.value[t];
-      !e || e.id === a.value?.id || (l.onOptionSelectedCb?.(e), o.value = e.label, s.value = !1, a.value = e, i.value = []);
-    }, W = () => {
-      m.value?.select();
-    }, z = () => {
-      m.value?.focus();
+      t.disableCb || (a.value = await x.value?.(l) || [], y.value = !0, s.value = !!a.value.length);
+    }, F = (l = -1) => {
+      const e = a.value[l];
+      !e || e.id === p.value?.id || (t.onOptionSelectedCb?.(e), o.value = e.label, s.value = !1, p.value = e, r.value = !0, a.value = []);
+    }, P = () => {
+      C.value?.select();
+    }, H = () => {
+      C.value?.focus();
     };
-    return A(() => {
-      S.value = le({ delay: 300 }, l.onInputChangeCb);
-    }), w(
-      [o, () => M.value],
-      ([, t]) => {
-        t && H(() => {
-          if (!t) return;
-          const e = t.offsetWidth;
-          e !== c.value && (c.value = e);
-        });
-      },
-      { immediate: !0 }
-    ), w(
-      () => T.value?.selectedIdx,
-      (t) => {
-        const e = t ?? -1;
-        e !== -1 && B(e);
+    let B = null;
+    const $ = () => {
+      const l = h.value, e = w.value, n = R.value;
+      if (!l || !e) return;
+      const T = l.offsetWidth, b = e.offsetWidth, i = t.clearButton?.offset || 0, g = t.clearButton?.width || n?.offsetWidth || 0, X = b - i - g, V = Math.min(T, X);
+      V !== k.value && (k.value = V);
+    };
+    return G(() => {
+      x.value = de({ delay: 300 }, t.onInputChangeCb);
+    }), J(() => {
+      w.value && (B = new ResizeObserver(() => {
+        $();
+      }), B.observe(w.value));
+    }), Q(() => {
+      B?.disconnect();
+    }), E([o, h, R], () => {
+      Y($);
+    }), E(
+      () => O.value?.selectedIdx,
+      (l) => {
+        const e = l ?? -1;
+        e !== -1 && F(e);
       }
-    ), w(
-      a,
-      (t, e) => {
-        if (!(t === e || t?.label === o.value)) {
-          if (k.value) {
-            k.value = !1;
-            return;
-          }
-          o.value = t?.label || "";
-        }
+    ), E(
+      p,
+      (l) => {
+        if (l?.label === o.value) return;
+        const e = l?.label || "";
+        o.value = e, e && (r.value = !0);
       },
       { immediate: !0 }
-    ), R({
-      getRootElement: () => T.value?.getRootElement(),
-      select: W,
-      focus: z
-    }), (t, e) => (h(), F(ee, {
+    ), L({
+      getRootElement: () => O.value?.getRootElement(),
+      select: P,
+      focus: H
+    }), (l, e) => (M(), z(se, {
       ref: "dropdownRef",
       class: "uikit-clearable-autocomplete",
-      "data-cy": l.dataCy,
+      "data-cy": t.dataCy,
       "dropdown-element": "ul",
-      "dropdown-classes": ["uikit-z-30", l.dropdownClasses],
-      "open-dropdown": s.value,
-      "keep-state": !i.value.length || l.keepState === "closed" ? "closed" : "opened",
-      "activate-keyboard-controller": l.enableKeyboardController,
-      "reset-keyboard-controller": C.value,
-      "onUpdate:resetKeyboardController": e[4] || (e[4] = (n) => C.value = n),
-      "onUpdate:dropdownState": e[5] || (e[5] = (n) => s.value = n)
+      "dropdown-classes": ["uikit-z-30", t.dropdownClasses],
+      "keep-state": !a.value.length || t.keepState === "closed" ? "closed" : "opened",
+      "activate-keyboard-controller": t.enableKeyboardController,
+      "reset-keyboard-controller": y.value,
+      "onUpdate:resetKeyboardController": e[5] || (e[5] = (n) => y.value = n),
+      open: s.value,
+      "onUpdate:open": e[6] || (e[6] = (n) => s.value = n)
     }, {
-      btn_slot: g(() => [
+      btn_slot: W(() => [
         u("div", {
-          class: f(["uikit-text-16", l.triggerWrapperClasses]),
-          onClick: e[3] || (e[3] = (n) => v("click", n))
+          class: f(["uikit-text-16", t.triggerWrapperClasses]),
+          onClick: e[4] || (e[4] = (n) => v("click", n))
         }, [
-          p(t.$slots, "left-icon"),
+          m(l.$slots, "left-icon"),
           u("div", {
-            class: f(["uikit-relative", l.inputWrapperClasses])
+            ref: "inputWrapperRef",
+            class: f(["uikit-relative", t.inputWrapperClasses])
           }, [
-            O(u("input", {
+            I(u("input", {
               ref: "inputRef",
               "onUpdate:modelValue": [
                 e[0] || (e[0] = (n) => o.value = n),
-                I
+                A
               ],
-              id: q(E),
-              "data-cy": l.dataCy ? `ac_input_${l.dataCy}` : "",
+              id: te(K),
+              "data-cy": t.dataCy ? `ac_input_${t.dataCy}` : "",
               type: "text",
               autocomplete: "off",
-              class: f(["uikit-w-full uikit-border-none focus-visible:uikit-outline-none", l.inputClasses]),
+              class: f(["uikit-w-full uikit-border-none focus-visible:uikit-outline-none", t.inputClasses]),
               style: {
                 font: "inherit",
                 fontSize: "inherit"
               },
-              placeholder: l.placeholder,
-              onKeydown: e[1] || (e[1] = (n) => {
-                v("keydown", n), o.value && a.value && (k.value = !0, a.value = null);
+              placeholder: t.placeholder,
+              onKeydown: e[1] || (e[1] = (n) => v("keydown", n)),
+              onInput: e[2] || (e[2] = (n) => {
+                v("input", n), r.value = !1;
               }),
-              onClick: e[2] || (e[2] = (n) => {
-                v("inputClick", n), m.value?.select();
+              onClick: e[3] || (e[3] = (n) => {
+                v("inputClick", n), C.value?.select();
               })
-            }, null, 42, ne), [
-              [G, o.value]
+            }, null, 42, ce), [
+              [le, o.value]
             ]),
             u("span", {
               ref_key: "hiddenSpan",
-              ref: M,
-              class: "uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-whitespace-pre",
+              ref: h,
+              class: f(["uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-whitespace-pre", t.hiddenTextClasses]),
               style: {
                 font: "inherit",
                 fontSize: "inherit"
               }
-            }, J(o.value), 513),
-            O(u("button", {
+            }, ne(o.value), 3),
+            I(u("button", {
+              ref: "clearButtonRef",
               type: "button",
-              class: f(["uikit-clear-btn uikit-absolute uikit-top-1/2 -uikit-translate-y-1/2 uikit-appearance-none", l.clearButton?.classes]),
+              class: f(["uikit-clear-btn uikit-absolute uikit-top-1/2 -uikit-translate-y-1/2 uikit-appearance-none", t.clearButton?.classes]),
               "aria-label": "Clear input",
-              style: Y({
-                left: `${c.value + (l.clearButton?.offset || 10)}px`
+              style: ae({
+                left: `${k.value + (t.clearButton?.offset || 0)}px`,
+                width: t.clearButton?.width ? `${t.clearButton.width}px` : "auto",
+                height: t.clearButton?.height ? `${t.clearButton.height}px` : "auto"
               }),
-              onClick: Q(U, ["stop"])
+              onClick: oe(N, ["stop"])
             }, [
-              p(t.$slots, "clear-icon", {}, () => [
-                e[6] || (e[6] = Z("X", -1))
+              m(l.$slots, "clear-icon", {}, () => [
+                e[7] || (e[7] = ie("X", -1))
               ])
             ], 6), [
-              [_, a.value?.label && c.value]
+              [ue, r.value && k.value]
             ])
           ], 2),
-          p(t.$slots, "right-icon")
+          m(l.$slots, "right-icon")
         ], 2)
       ]),
-      default: g(({ activeIdx: n, setActiveIdx: K }) => [
-        (h(!0), P(X, null, j(i.value, (V, r) => (h(), F(te, {
-          key: r,
-          active: n === r,
+      default: W(({ activeIdx: n, setActiveIdx: T }) => [
+        (M(!0), Z(_, null, ee(a.value, (b, i) => (M(), z(re, {
+          key: i,
+          active: n === i,
           class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
-          onClick: (L) => B(r),
-          onMouseover: (L) => K(r)
+          onClick: (g) => F(i),
+          onMouseover: (g) => T(i)
         }, {
-          default: g(() => [
-            p(t.$slots, "option-content", {
-              option: V,
-              idx: r
+          default: W(() => [
+            m(l.$slots, "option-content", {
+              option: b,
+              idx: i
             }, () => [
               u("span", {
-                innerHTML: V.label
-              }, null, 8, oe)
+                innerHTML: b.label
+              }, null, 8, fe)
             ])
           ]),
           _: 2
         }, 1032, ["active", "onClick", "onMouseover"]))), 128))
       ]),
       _: 3
-    }, 8, ["data-cy", "dropdown-classes", "open-dropdown", "keep-state", "activate-keyboard-controller", "reset-keyboard-controller"]));
+    }, 8, ["data-cy", "dropdown-classes", "keep-state", "activate-keyboard-controller", "reset-keyboard-controller", "open"]));
   }
 });
 export {
-  ce as default
+  ye as default
 };

package/dist/packages/components/lib/UIKit/BaseAutocomplete.vue.js

@@ -1,11 +1,11 @@
-import { defineComponent as x, mergeModels as $, useModel as F, ref as d, computed as k, onBeforeMount as L, watch as f, createBlock as g, openBlock as w, normalizeClass as H, withCtx as c, createElementBlock as K, Fragment as T, renderList as z, unref as N, renderSlot as p, createElementVNode as U, createVNode as A } from "vue";
-import W from "../../../../UIKit/BaseInput.js";
-import j from "./BaseDropDown.vue.js";
+import { defineComponent as x, mergeModels as $, useModel as F, shallowRef as d, computed as k, onBeforeMount as L, watch as f, createBlock as g, openBlock as w, normalizeClass as H, withCtx as c, createElementBlock as K, Fragment as T, renderList as z, unref as N, renderSlot as p, createElementVNode as U, createVNode as A } from "vue";
+import R from "../../../../UIKit/BaseInput.js";
+import W from "./BaseDropDown.vue.js";
 import '../../../../assets/BaseDropDown.css';/* empty css                  */
-import { debounce as q } from "@wikicasa-dev/utilities";
-import G from "./BaseSelect/SelectItem.vue.js";
-import { useKeyboardController as J } from "@wikicasa-dev/vue-composables";
-const Q = ["innerHTML"], ne = /* @__PURE__ */ x({
+import { debounce as j } from "@wikicasa-dev/utilities";
+import q from "./BaseSelect/SelectItem.vue.js";
+import { useKeyboardController as G } from "@wikicasa-dev/vue-composables";
+const J = ["innerHTML"], ne = /* @__PURE__ */ x({
   __name: "BaseAutocomplete",
   props: /* @__PURE__ */ $({
     isValid: { type: [Boolean, null], default: null },
@@ -30,13 +30,13 @@ const Q = ["innerHTML"], ne = /* @__PURE__ */ x({
     modelModifiers: {}
   }),
   emits: /* @__PURE__ */ $(["update:dropdownState", "changedValue", "click", "keydown", "keydownEnterPressed"], ["update:modelValue"]),
-  setup(t, { expose: S, emit: V }) {
-    const u = F(t, "modelValue"), r = V, i = d(""), a = d([]), v = d(null), b = d(!1), n = d(!1), C = d(null), B = k(() => a.value.length);
+  setup(t, { expose: V, emit: B }) {
+    const u = F(t, "modelValue"), r = B, i = d(""), o = d([]), v = d(null), b = d(!1), n = d(!1), C = d(null), S = k(() => o.value.length);
     L(() => {
-      v.value = q({ delay: 300 }, t.onInputChangeCb);
+      v.value = j({ delay: 300 }, t.onInputChangeCb);
     });
-    const { activeIdx: m, selectedIdx: h } = J({
-      optionsLength: B,
+    const { activeIdx: m, selectedIdx: h } = G({
+      optionsLength: S,
       isDropdownOpen: n,
       disableSpaceHandler: !0
     }), O = k(() => {
@@ -76,15 +76,15 @@ const Q = ["innerHTML"], ne = /* @__PURE__ */ x({
     }), D = async (e) => {
       if (i.value !== e && (r("changedValue", e), i.value = e, !!t.onInputChangeCb)) {
         if (!e || b.value) {
-          a.value = [], b.value = !1, h.value = -1, m.value = -1, u.value && (u.value.label = ""), n.value = !1, await v.value(null);
+          o.value = [], b.value = !1, h.value = -1, m.value = -1, u.value && (u.value.label = ""), n.value = !1, await v.value?.(null);
           return;
         }
-        t.disableCb || (a.value = await v.value(e), n.value = !!a.value.length);
+        t.disableCb || (o.value = await v.value?.(e) || [], n.value = !!o.value.length);
       }
     }, y = (e, l) => {
-      t.onOptionSelectedCb && t.onOptionSelectedCb(e), t.cleanupOnClose && (a.value = []), b.value = !0, i.value = e.label, u.value = e, n.value = !1, h.value = l;
+      t.onOptionSelectedCb && t.onOptionSelectedCb(e), t.cleanupOnClose && (o.value = []), b.value = !0, i.value = e.label, u.value = e, n.value = !1, h.value = l;
     }, E = () => {
-      a.value.length && t.keepState !== "closed" && (n.value = !0);
+      o.value.length && t.keepState !== "closed" && (n.value = !0);
     };
     return f(
       u,
@@ -93,21 +93,21 @@ const Q = ["innerHTML"], ne = /* @__PURE__ */ x({
       },
       { immediate: !0 }
     ), f(h, (e) => {
-      if (e === -1 || !a.value.length) return;
-      const l = a.value[e];
+      if (e === -1 || !o.value.length) return;
+      const l = o.value[e];
       b.value && l.label === u.value?.label || y(l, e);
     }), f(
       () => t.keepState,
       (e) => {
-        e === "closed" ? (n.value = !1, t.cleanupOnClose && (a.value = [])) : e === "open" && a.value.length && (n.value = !0);
+        e === "closed" ? (n.value = !1, t.cleanupOnClose && (o.value = [])) : e === "open" && o.value.length && (n.value = !0);
       }
     ), f(n, (e) => {
       r("update:dropdownState", e);
-    }), S({
+    }), V({
       select: () => {
         C.value?.select();
       }
-    }), (e, l) => (w(), g(j, {
+    }), (e, l) => (w(), g(W, {
       class: H(["uikit-autocomplete", e.$attrs["root-classes"]]),
       "data-cy": t.dataCy ? t.dataCy : `ac_${e.$attrs.id}`,
       "dropdown-element": "ul",
@@ -122,17 +122,17 @@ const Q = ["innerHTML"], ne = /* @__PURE__ */ x({
         "uikit-z-30",
         t.dropdownClasses
       ],
-      "open-dropdown": n.value,
-      "keep-state": !a.value.length || t.keepState === "closed" ? "closed" : "opened",
+      open: n.value,
+      "keep-state": !o.value.length || t.keepState === "closed" ? "closed" : "opened",
       "close-when-clicked-outside": t.closeDropdownOnBodyPressed,
       "activate-keyboard-controller": !1,
-      "onUpdate:dropdownState": l[3] || (l[3] = (o) => n.value = o),
-      onClick: l[4] || (l[4] = (o) => {
+      "onUpdate:open": l[3] || (l[3] = (a) => n.value = a),
+      onClick: l[4] || (l[4] = (a) => {
         r("click"), E();
       })
     }, {
       btn_slot: c(() => [
-        A(W, {
+        A(R, {
           id: e.$attrs.id ? `ac_input_${e.$attrs.id}` : "",
           ref_key: "baseInput",
           ref: C,
@@ -150,42 +150,42 @@ const Q = ["innerHTML"], ne = /* @__PURE__ */ x({
             "!uikit-ml-0 !uikit-w-full"
           ],
           "fieldset-classes": [I.value, t.fieldsetClasses],
-          "onUpdate:modelValue": l[0] || (l[0] = (o) => D(o === void 0 ? "" : `${o}`)),
-          onKeydown: l[1] || (l[1] = (o) => r("keydown", o)),
+          "onUpdate:modelValue": l[0] || (l[0] = (a) => D(a === void 0 ? "" : `${a}`)),
+          onKeydown: l[1] || (l[1] = (a) => r("keydown", a)),
           onKeydownEnterPressed: l[2] || (l[2] = () => r("keydownEnterPressed"))
         }, {
           leftIcon: c(() => [
             p(e.$slots, "lefticon")
           ]),
-          righticon: c(({ handleClean: o }) => [
-            p(e.$slots, "righticon", { handleClean: o })
+          righticon: c(({ handleClean: a }) => [
+            p(e.$slots, "righticon", { handleClean: a })
           ]),
           _: 3
         }, 8, ["id", "data-cy", "label-text", "model-value", "is-valid", "disabled", "placeholder", "with-left-icon", "with-right-icon", "input-class", "fieldset-classes"])
       ]),
       default: c(() => [
-        (w(!0), K(T, null, z(a.value, (o, s) => (w(), g(G, {
+        (w(!0), K(T, null, z(o.value, (a, s) => (w(), g(q, {
           key: s,
           active: N(m) === s,
           class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
-          onClick: (P) => y(o, s),
+          onClick: (P) => y(a, s),
           onMouseover: (P) => m.value = s
         }, {
           default: c(() => [
             p(e.$slots, "option-content", {
-              option: o,
+              option: a,
               idx: s
             }, () => [
               U("span", {
-                innerHTML: o.label
-              }, null, 8, Q)
+                innerHTML: a.label
+              }, null, 8, J)
             ])
           ]),
           _: 2
         }, 1032, ["active", "onClick", "onMouseover"]))), 128))
       ]),
       _: 3
-    }, 8, ["class", "data-cy", "dropdown-classes", "open-dropdown", "keep-state", "close-when-clicked-outside"]));
+    }, 8, ["class", "data-cy", "dropdown-classes", "open", "keep-state", "close-when-clicked-outside"]));
   }
 });
 export {

package/dist/packages/components/lib/UIKit/BaseButton.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as c, ref as b, computed as l, createElementBlock as f, openBlock as v, withModifiers as s, normalizeStyle as B, normalizeClass as C, renderSlot as u, createVNode as M } from "vue";
-import z from "../../../../UIKit/StaticSpinner.js";
-const L = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "title"], $ = /* @__PURE__ */ c({
+import { defineComponent as v, useTemplateRef as c, shallowRef as B, computed as l, createElementBlock as C, openBlock as w, withModifiers as s, normalizeStyle as M, normalizeClass as z, renderSlot as u, createVNode as L } from "vue";
+import g from "../../../../UIKit/StaticSpinner.js";
+const S = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "title"], A = /* @__PURE__ */ v({
   __name: "BaseButton",
   props: {
     btnClass: { default: "uikit-btn-w-primary" },
@@ -15,18 +15,21 @@ const L = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "ti
     dataCy: {},
     type: {}
   },
-  emits: ["mouseover", "mouseout", "click"],
-  setup(e, { emit: d }) {
-    const o = d, n = b(!1), r = l(() => e.size ? `uikit-btn-${e.size}` : ""), m = l(() => e.outlined ? "uikit-btn-outline" : ""), k = () => {
-      n.value = !0;
-    }, y = () => {
-      n.value = !1;
+  emits: ["mouseover", "mouseout", "click", "keydown"],
+  setup(e, { expose: d, emit: r }) {
+    const o = r, m = c("buttonEl"), a = B(!1), y = l(() => e.size ? `uikit-btn-${e.size}` : ""), k = l(() => e.outlined ? "uikit-btn-outline" : ""), b = () => {
+      a.value = !0;
+    }, f = () => {
+      a.value = !1;
     };
-    return (a, t) => (v(), f("button", {
-      id: a.$attrs.id,
+    return d({
+      getRootElement: () => m.value
+    }), (n, t) => (w(), C("button", {
+      ref: "buttonEl",
+      id: n.$attrs.id,
       "data-cy": e.dataCy,
       type: e.type,
-      class: C([
+      class: z([
         "uikit-btn",
         {
           "uikit-btn-empty": !e.withMinWidth,
@@ -34,33 +37,34 @@ const L = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "ti
           "uikit-flex uikit-items-center uikit-justify-center": e.isLoading
         },
         e.btnClass,
-        r.value,
-        m.value
+        y.value,
+        k.value
       ]),
-      style: B(a.$attrs.style),
+      style: M(n.$attrs.style),
       "data-active": e.keepActive,
       disabled: e.isLoading || e.disabled,
       "aria-label": e.ariaLabel,
       title: e.title,
       onMouseover: t[0] || (t[0] = s((i) => {
-        k(), o("mouseover", i);
+        b(), o("mouseover", i);
       }, ["stop"])),
       onMouseout: t[1] || (t[1] = s((i) => {
-        y(), o("mouseout", i);
+        f(), o("mouseout", i);
       }, ["stop"])),
-      onClick: t[2] || (t[2] = (i) => o("click", i))
+      onClick: t[2] || (t[2] = (i) => o("click", i)),
+      onKeydown: t[3] || (t[3] = (i) => o("keydown", i))
     }, [
-      e.isLoading ? u(a.$slots, "spinner", { key: 1 }, () => [
-        M(z, {
+      e.isLoading ? u(n.$slots, "spinner", { key: 1 }, () => [
+        L(g, {
           "stroke-color": e.outlined ? "#ACB4C3" : "#fff"
         }, null, 8, ["stroke-color"])
-      ]) : u(a.$slots, "default", {
+      ]) : u(n.$slots, "default", {
         key: 0,
-        hover: n.value
+        hover: a.value
       })
-    ], 46, L));
+    ], 46, S));
   }
 });
 export {
-  $ as default
+  A as default
 };

package/dist/packages/components/lib/UIKit/BaseCard.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as u, computed as d, createBlock as C, openBlock as y, resolveDynamicComponent as f, normalizeClass as a, withCtx as v, createElementVNode as o, renderSlot as c } from "vue";
-const p = /* @__PURE__ */ u({
+import { defineComponent as C, computed as c, createBlock as u, openBlock as y, resolveDynamicComponent as f, normalizeClass as a, withCtx as g, createElementVNode as d, renderSlot as l } from "vue";
+const p = /* @__PURE__ */ C({
   __name: "BaseCard",
   props: {
     type: { default: "" },
@@ -8,24 +8,24 @@ const p = /* @__PURE__ */ u({
     cardBodyClasses: { default: "" }
   },
   emits: ["click"],
-  setup(e, { emit: l }) {
-    const n = l, r = d(
+  setup(e, { emit: o }) {
+    const n = o, r = c(
       () => e.type === "news" ? "news-card" : e.type
-    ), i = d(() => e.type ? `${e.type}-img` : "");
-    return (t, s) => (y(), C(f(e.rootComponent), {
-      class: a(["card", [r.value]]),
-      onClick: s[0] || (s[0] = (m) => n("click", m))
+    ), i = c(() => e.type ? `${e.type}-img` : "");
+    return (s, t) => (y(), u(f(e.rootComponent), {
+      class: a(["uikit-card", [r.value]]),
+      onClick: t[0] || (t[0] = (m) => n("click", m))
     }, {
-      default: v(() => [
-        o("div", {
+      default: g(() => [
+        d("div", {
           class: a(["card-img", [i.value, e.cardImgClasses]])
         }, [
-          c(t.$slots, "card-image", {}, void 0, !0)
+          l(s.$slots, "card-image")
         ], 2),
-        o("div", {
+        d("div", {
           class: a(["card-body", [e.cardBodyClasses]])
         }, [
-          c(t.$slots, "card-description", {}, void 0, !0)
+          l(s.$slots, "card-description")
         ], 2)
       ]),
       _: 3