@wikicasa-dev/components 2.2.9-alpha.38 → 2.2.9-alpha.4

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

@@ -1,12 +1,11 @@
-import { defineComponent as T, mergeModels as I, useId as N, useModel as A, shallowRef as R, computed as V, useTemplateRef as x, onMounted as z, onUnmounted as P, watch as v, nextTick as q, createElementBlock as F, openBlock as m, normalizeClass as d, renderSlot as B, createBlock as L, unref as l, createVNode as U, withCtx as D, createElementVNode as j, createCommentVNode as G, resolveDynamicComponent as J, mergeProps as Q } from "vue";
-import X from "./BaseButton.vue.js";
-import { ArrowIcon as Y } from "@wikicasa-dev/svg-icons";
-import { useKeyboardController as Z } from "../../../../composables/mock.js";
-const _ = ["innerHTML"], le = /* @__PURE__ */ T({
+import { defineComponent as N, mergeModels as D, useId as R, useModel as E, shallowRef as x, computed as V, useTemplateRef as I, onMounted as z, onUnmounted as q, watch as l, nextTick as U, createElementBlock as j, openBlock as f, normalizeClass as i, renderSlot as K, createBlock as B, createVNode as F, unref as r, withCtx as L, createElementVNode as G, createCommentVNode as J, resolveDynamicComponent as P } from "vue";
+import Q from "./BaseButton.vue.js";
+import { ArrowIcon as X } from "@wikicasa-dev/svg-icons";
+import { useKeyboardController as Y } from "@wikicasa-dev/vue-composables";
+const Z = ["innerHTML"], le = /* @__PURE__ */ N({
   inheritAttrs: !1,
   __name: "BaseDropDown",
-  props: /* @__PURE__ */ I({
-    dropdownAttrs: {},
+  props: /* @__PURE__ */ D({
     dropdownClasses: { default: "" },
     btnClasses: { default: "" },
     withArrowIcon: { type: Boolean, default: !1 },
@@ -16,134 +15,138 @@ const _ = ["innerHTML"], le = /* @__PURE__ */ T({
     arrowWidth: { default: 12 },
     arrowStrokeColor: { default: void 0 },
     isAbsolute: { type: Boolean, default: !0 },
+    openDropdown: { type: Boolean, default: !1 },
     closeWhenClickedOutside: { type: Boolean, default: !0 },
     dropdownElement: { default: "div" },
     keepState: { default: "" },
     activateKeyboardController: { type: Boolean, default: !0 },
-    closeKeys: { type: [Boolean, Array], default: () => ["Escape", "Enter"] },
     dataCy: { default: "" }
   }, {
+    toggleDropdown: { type: Boolean, default: void 0 },
+    toggleDropdownModifiers: {},
     resetKeyboardController: { type: Boolean, default: !1 },
-    resetKeyboardControllerModifiers: {},
-    open: { type: Boolean, default: !1 },
-    openModifiers: {}
+    resetKeyboardControllerModifiers: {}
   }),
-  emits: /* @__PURE__ */ I(["click"], ["update:resetKeyboardController", "update:open"]),
-  setup(t, { expose: S, emit: M }) {
-    const n = t, y = N(), O = M, w = A(
-      t,
+  emits: /* @__PURE__ */ D(["click", "update:dropdownState"], ["update:toggleDropdown", "update:resetKeyboardController"]),
+  setup(o, { expose: S, emit: A }) {
+    const n = o, k = R(), v = A, w = E(o, "toggleDropdown"), m = E(
+      o,
       "resetKeyboardController"
-    ), o = A(t, "open");
-    let C = !1;
-    const s = R([]), W = V(() => s.value.length), u = x("container"), c = x("dropdown"), { activeIdx: a, selectedIdx: i, onKeyDownHandler: $ } = Z({
-      optionsLength: W,
-      isDropdownOpen: o,
-      global: !1,
-      closeKeys: n.closeKeys ? n.closeKeys : []
-    }), b = () => {
-      o.value = !1;
-    }, h = ({ target: e }) => {
-      u.value?.contains(e) || b();
-    }, p = (e) => {
-      o.value && (u.value?.contains(e.target) || b());
+    );
+    let p = !1;
+    const t = x(!1), u = x([]), M = V(() => u.value.length), s = I("container"), y = I("dropdown"), { activeIdx: d, selectedIdx: a, onKeyDownHandler: O } = Y({
+      optionsLength: M,
+      isDropdownOpen: t,
+      global: !1
+    }), W = () => {
+      t.value = !1;
+    }, b = ({ target: e }) => {
+      s.value?.contains(e) || W();
+    }, h = (e) => {
+      t.value && s.value?.contains(document.activeElement) && e.key === "Tab" && (t.value = !1);
+    }, $ = (e) => {
+      n.activateKeyboardController && O(e);
+    }, c = () => {
+      n.keepState === "closed" && !t.value || n.keepState === "opened" && t.value || (t.value = !t.value);
+    }, T = (e) => {
+      e != null && (d.value = e);
     }, H = (e) => {
-      n.activateKeyboardController && $(e);
-    }, f = () => {
-      n.keepState === "closed" && !o.value || n.keepState === "opened" && o.value || (o.value = !o.value);
-    }, g = (e) => {
       e != null && (a.value = e);
-    }, K = (e) => {
-      e != null && (i.value = e);
-    }, E = () => {
-      c.value && (s.value = Array.from(c.value.children));
+    }, C = () => {
+      y.value && (u.value = Array.from(y.value.children));
     };
     return z(() => {
-      E();
-    }), P(() => {
-      n.closeWhenClickedOutside && (document.removeEventListener("click", h), document.removeEventListener("focusin", p));
-    }), v(w, (e) => {
-      e && (a.value = -1, i.value = -1, q(() => {
-        E(), w.value = !1;
+      C();
+    }), q(() => {
+      n.closeWhenClickedOutside && (document.removeEventListener("click", b), document.removeEventListener("keydown", h));
+    }), l(m, (e) => {
+      e && (d.value = -1, a.value = -1, U(() => {
+        C(), m.value = !1;
       }));
-    }), v(o, (e) => {
-      !e || C || !n.closeWhenClickedOutside || (document.addEventListener("click", h), document.addEventListener("focusin", p), C = !0);
-    }), v(i, (e) => {
-      e !== -1 && s.value[e]?.querySelector("a")?.click();
+    }), l(
+      () => n.openDropdown,
+      (e) => {
+        t.value = e;
+      },
+      {
+        immediate: !0
+      }
+    ), l(t, (e) => {
+      v("update:dropdownState", e);
+    }), l(t, (e) => {
+      !e || p || !n.closeWhenClickedOutside || (document.addEventListener("click", b), document.addEventListener("keydown", h), p = !0);
+    }), l(w, (e) => {
+      e && (t.value = !t.value, w.value = !1);
+    }), l(a, (e) => {
+      e !== -1 && u.value[e].querySelector("a")?.click();
     }), S({
-      activeIdx: a,
-      selectedIdx: i,
-      getRootElement: () => u.value,
-      getContentElement: () => c.value
-    }), (e, r) => (m(), F("div", {
+      activeIdx: d,
+      selectedIdx: a,
+      getRootElement: () => s.value
+    }), (e, g) => (f(), j("div", {
       ref: "container",
-      class: d(["uikit-relative uikit-block", e.$attrs.class]),
-      onKeydown: H
+      class: i(["uikit-relative uikit-block", e.$attrs.class]),
+      onKeydown: $
     }, [
-      B(e.$slots, "btn_slot", {
-        toggleDropdown: f,
-        isOpen: o.value,
-        activeIdx: l(a),
-        setActiveIdx: g,
-        setSelectedIdx: K
+      K(e.$slots, "btn_slot", {
+        toggleDropdown: c,
+        isOpen: t.value
       }, () => [
-        U(X, {
-          id: l(y),
+        F(Q, {
+          id: r(k),
           type: "button",
-          "data-cy": t.dataCy,
-          class: d([
+          "data-cy": o.dataCy,
+          class: i([
             "!uikit-flex uikit-w-full uikit-items-center uikit-truncate",
-            t.btnClasses
+            o.btnClasses
           ]),
-          "aria-expanded": o.value,
+          "aria-expanded": t.value,
           "btn-class": "uikit-btn-single-selection",
-          onClick: r[0] || (r[0] = (k) => {
-            O("click"), f();
-          }),
-          onKeydown: r[1] || (r[1] = (k) => {
-            Array.isArray(t.closeKeys) && !t.closeKeys.includes(k.key) || k.stopPropagation();
+          onClick: g[0] || (g[0] = (_) => {
+            v("click"), c();
           })
         }, {
-          default: D(() => [
-            j("span", {
-              class: d(["uikit-mr-5px", t.labelClasses]),
-              innerHTML: t.btnLabel
-            }, null, 10, _),
-            t.withArrowIcon ? (m(), L(l(Y), {
+          default: L(() => [
+            G("span", {
+              class: i(["uikit-mr-5px", o.labelClasses]),
+              innerHTML: o.btnLabel
+            }, null, 10, Z),
+            o.withArrowIcon ? (f(), B(r(X), {
               key: 0,
-              class: d(["uikit-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", o.value ? "uikit-rotate-180" : ""]),
-              width: t.arrowWidth,
-              height: t.arrowWidth,
-              "stroke-color": t.arrowStrokeColor
-            }, null, 8, ["class", "width", "height", "stroke-color"])) : G("", !0)
+              class: i(["uikit-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", t.value ? "uikit-rotate-180" : ""]),
+              width: o.arrowWidth,
+              height: o.arrowWidth,
+              "stroke-color": o.arrowStrokeColor
+            }, null, 8, ["class", "width", "height", "stroke-color"])) : J("", !0)
           ]),
           _: 1
         }, 8, ["id", "data-cy", "class", "aria-expanded"])
       ]),
-      (m(), L(J(t.dropdownElement), Q({
-        id: "dropdown_" + l(y),
+      (f(), B(P(o.dropdownElement), {
+        id: "dropdown_" + r(k),
         ref: "dropdown",
-        "data-cy": t.dataCy && `${t.dataCy}_dropdown`,
-        class: ["uikit-dropdown-content uikit-w-full uikit-flex-col uikit-overflow-y-auto uikit-border-solid uikit-bg-white uikit-pl-0 uikit-opacity-100 uikit-shadow uikit-no-scrollbar", [
-          t.dropdownClasses,
-          o.value ? "uikit-flex" : "uikit-hidden",
-          { "uikit-bottom-[55px]": t.direction === "up" },
-          { "uikit-absolute": t.isAbsolute }
-        ]],
-        "aria-hidden": !o.value,
-        "data-side": t.direction
-      }, t.dropdownAttrs), {
-        default: D(() => [
-          B(e.$slots, "default", {
-            isOpen: o.value,
-            toggleDropdown: f,
-            activeIdx: l(a),
-            selectedIdx: l(i),
-            setActiveIdx: g,
-            setSelectedIdx: K
+        "data-cy": o.dataCy && `${o.dataCy}_dropdown`,
+        class: i(["uikit-dropdown-content uikit-w-full uikit-flex-col uikit-overflow-y-auto uikit-border uikit-border-solid uikit-bg-white uikit-pl-0 uikit-opacity-100 uikit-shadow uikit-no-scrollbar", [
+          o.dropdownClasses,
+          t.value ? "uikit-flex" : "uikit-hidden",
+          { "uikit-bottom-[55px] uikit-rounded-xs": o.direction === "up" },
+          { "uikit-rounded-b uikit-border-t-0": o.direction === "down" },
+          { "uikit-absolute": o.isAbsolute }
+        ]]),
+        "aria-hidden": !t.value
+      }, {
+        default: L(() => [
+          K(e.$slots, "default", {
+            isOpen: t.value,
+            toggleDropdown: c,
+            activeIdx: r(d),
+            selectedIdx: r(a),
+            setActiveIdx: T,
+            setSelectedIdx: H
           })
         ]),
         _: 3
-      }, 16, ["id", "data-cy", "class", "aria-hidden", "data-side"]))
+      }, 8, ["id", "data-cy", "class", "aria-hidden"]))
     ], 34));
   }
 });

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

@@ -1,7 +1,7 @@
-import { defineComponent as I, ref as n, useTemplateRef as T, onUnmounted as z, watch as H, createBlock as O, openBlock as m, Teleport as $, createElementVNode as a, normalizeClass as s, createElementBlock as y, createCommentVNode as h, renderSlot as d, withModifiers as D, createVNode as F, unref as K, nextTick as N } from "vue";
-import { isWindows as g, awaitableSetTimeout as S } from "@wikicasa-dev/utilities";
+import { defineComponent as I, ref as n, useTemplateRef as T, onUnmounted as z, watch as H, createBlock as O, openBlock as r, Teleport as $, createElementVNode as l, normalizeClass as s, withModifiers as y, createElementBlock as h, createCommentVNode as w, renderSlot as d, createVNode as D, unref as K, nextTick as N } from "vue";
+import { isWindows as C, awaitableSetTimeout as S } from "@wikicasa-dev/utilities";
 import { CloseIcon as V } from "@wikicasa-dev/svg-icons";
-const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
+const F = ["id", "data-cy"], U = ["innerHTML"], R = /* @__PURE__ */ I({
   __name: "BaseModal",
   props: {
     id: { default: "base-bt-modal" },
@@ -24,25 +24,25 @@ const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
     titleClasses: {}
   },
   emits: ["closed", "opened", "dialogClick"],
-  setup(e, { emit: w }) {
-    const c = w, i = n(!1), r = n(null), l = T("modalDialog"), k = n(!1), u = n(!1), f = ({ key: t }) => {
+  setup(e, { emit: g }) {
+    const c = g, i = n(!1), m = n(null), a = T("modalDialog"), k = n(!1), u = n(!1), f = ({ key: t }) => {
       t === "Escape" && o();
-    }, C = () => {
+    }, x = () => {
       document?.body.addEventListener("keydown", f);
     }, b = () => {
       document?.body.removeEventListener("keydown", f);
-    }, x = async () => {
+    }, p = async () => {
       i.value = !0, N(() => {
-        C(), g() ? document?.body.classList.add("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.add("uikit-no-scrolling");
+        x(), C() ? document?.body.classList.add("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.add("uikit-no-scrolling");
       }), c("opened"), e.autoClose !== void 0 && setTimeout(() => {
         o();
       }, e.autoClose);
-    }, p = (t) => {
-      l.value && l.value.contains(t.target) && (u.value = !0);
     }, M = (t) => {
-      l.value && l.value.contains(t.target) && (u.value = !1);
-    }, B = async (t) => {
-      if (!r.value?.contains(t.target) && e.closeOnClickOut) {
+      a.value && a.value.contains(t.target) && (u.value = !0);
+    }, B = (t) => {
+      a.value && a.value.contains(t.target) && (u.value = !1);
+    }, L = async () => {
+      if (e.closeOnClickOut) {
         if (u.value) {
           u.value = !1;
           return;
@@ -51,25 +51,21 @@ const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
       }
     }, o = async () => {
       i.value = !1, b(), document?.documentElement.classList.remove("uikit-no-scrolling"), navigator.userAgent.includes("Windows") ? document?.body.classList.remove("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.remove("uikit-no-scrolling"), await S(() => {
-        r.value?.classList.add("uikit-hidden"), c("closed");
+        m.value?.classList.add("uikit-hidden"), c("closed");
       }, 250);
     };
-    z(() => {
-      b(), document?.documentElement.classList.remove("uikit-no-scrolling"), g() ? document?.body.classList.remove("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.remove("uikit-no-scrolling");
+    return z(() => {
+      b(), document?.documentElement.classList.remove("uikit-no-scrolling"), C() ? document?.body.classList.remove("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.remove("uikit-no-scrolling");
     }), H(
       () => e.showModal,
       async (t) => {
-        !t && !i.value ? k.value = !0 : k.value = !1, t && !i.value && await x(), !t && i.value && await o(), i.value = t;
+        !t && !i.value ? k.value = !0 : k.value = !1, t && !i.value && await p(), !t && i.value && await o(), i.value = t;
       },
       { immediate: !0 }
-    );
-    const L = (t) => {
-      l.value === t.target && t.stopPropagation();
-    };
-    return (t, v) => (m(), O($, { to: "body" }, [
-      a("div", {
+    ), (t, v) => (r(), O($, { to: "body" }, [
+      l("div", {
         ref_key: "backdropEl",
-        ref: r,
+        ref: m,
         class: s(["bbt-backdrop uikit-fixed uikit-left-0 uikit-top-0 uikit-h-full uikit-w-full", [
           e.customBackdropClasses,
           {
@@ -80,11 +76,11 @@ const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
           { hide: k.value }
         ]]),
         style: { "z-index": "1062" },
-        onClick: B,
-        onMousedown: p,
-        onMouseup: M
+        onClick: L,
+        onMousedown: M,
+        onMouseup: B
       }, [
-        a("dialog", {
+        l("dialog", {
           id: e.id,
           ref: "modalDialog",
           "data-cy": e.dataCy,
@@ -98,52 +94,50 @@ const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
             `base-${e.size}`,
             e.fullHeight ? "uikit-h-[95%]" : "uikit-h-auto"
           ]]),
-          tabindex: "-1",
-          onClick: v[0] || (v[0] = (E) => c("dialogClick", E)),
-          onFocusin: L
+          onClick: v[0] || (v[0] = y((E) => c("dialogClick", E), ["stop"]))
         }, [
-          a("div", {
+          l("div", {
             class: s(["default-header uikit-sticky uikit-top-0 uikit-z-10 uikit-rounded-t uikit-border-0 uikit-bg-white uikit-px-4 uikit-pb-10px uikit-pt-20px sm:uikit-px-6", [e.customModalHeaderClasses]])
           }, [
-            e.withCloseIcon ? (m(), y("button", {
+            e.withCloseIcon ? (r(), h("button", {
               key: 0,
               id: "close-icon-btn",
               "data-cy": "bbt-default-close-icon-btn",
               class: s(["uikit-absolute uikit-right-15px uikit-top-15px uikit-z-10 uikit-bg-transparent uikit-p-5px", e.closeIconBtnClasses]),
               type: "button",
               "aria-label": "Close",
-              onClick: D(o, ["prevent", "stop"])
+              onClick: y(o, ["prevent", "stop"])
             }, [
-              F(K(V), {
+              D(K(V), {
                 class: s(["bbt-close-icon uikit-box-border", e.closeIcon?.classes]),
                 width: e.closeIcon?.size || 20,
                 height: e.closeIcon?.size || 20
               }, null, 8, ["class", "width", "height"])
-            ], 2)) : h("", !0),
+            ], 2)) : w("", !0),
             d(t.$slots, "header", { closeModal: o }, () => [
-              a("span", {
+              l("span", {
                 class: s(["uikit-w-auto uikit-text-18 uikit-font-semibold sm:uikit-text-22", e.titleClasses]),
                 innerHTML: e.headerTitle
               }, null, 10, U)
             ])
           ], 2),
-          a("div", {
+          l("div", {
             class: s(["uikit-bbt-body uikit-flex-auto uikit-overflow-y-auto uikit-overflow-x-hidden uikit-px-4 uikit-pb-0 uikit-no-scrollbar sm:uikit-px-6 sm:uikit-pb-25px", [e.customModalBodyClasses]])
           }, [
             d(t.$slots, "body", { closeModal: o })
           ], 2),
-          t.$slots.footer ? (m(), y("div", {
+          t.$slots.footer ? (r(), h("div", {
             key: 0,
             class: s(["uikit-bbt-footer uikit-sticky uikit-bottom-0 uikit-border-0 uikit-bg-white uikit-px-4 uikit-py-15px sm:uikit-px-6", e.customModalFooterClasses])
           }, [
             d(t.$slots, "footer", { closeModal: o })
-          ], 2)) : h("", !0),
+          ], 2)) : w("", !0),
           d(t.$slots, "fixed-bottom")
-        ], 42, P)
+        ], 10, F)
       ], 34)
     ]));
   }
 });
 export {
-  j as default
+  R as default
 };

package/dist/packages/components/lib/UIKit/BaseSelect/SelectItem.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as u, useTemplateRef as c, watch as d, nextTick as m, createElementBlock as r, openBlock as f, normalizeClass as v, renderSlot as k, createElementVNode as x } from "vue";
-const b = ["data-active", "tabindex"], p = ["innerHTML"], $ = /* @__PURE__ */ u({
+import { defineComponent as u, useTemplateRef as r, watch as m, nextTick as c, createElementBlock as d, openBlock as f, normalizeClass as k, renderSlot as v, createElementVNode as x } from "vue";
+const p = ["tabindex"], b = ["innerHTML"], $ = /* @__PURE__ */ u({
   __name: "SelectItem",
   props: {
     label: { default: "" },
@@ -7,34 +7,33 @@ const b = ["data-active", "tabindex"], p = ["innerHTML"], $ = /* @__PURE__ */ u(
     idx: { default: -1 }
   },
   emits: ["click", "mouseover"],
-  setup(t, { emit: o }) {
-    const a = o, i = t, n = c("liItem");
-    return d(
-      () => i.active,
+  setup(l, { emit: a }) {
+    const n = a, t = l, o = r("liItem");
+    return m(
+      () => t.active,
       (e) => {
-        e && m(() => {
-          n.value && n.value.focus();
+        e && c(() => {
+          o.value && o.value.focus();
         });
       },
       { immediate: !0 }
-    ), (e, l) => (f(), r("li", {
+    ), (e, i) => (f(), d("li", {
       ref: "liItem",
-      class: v(["uikit-list-none uikit-text-w-black", [
-        { "active uikit-bg-w-cultured": t.active },
+      class: k(["uikit-list-none uikit-text-w-black", [
+        { "active uikit-bg-w-cultured": l.active },
         "uikit-outline-none",
         e.$attrs.class
       ]]),
-      "data-active": t.active,
       tabindex: e.$attrs.tabindex ?? -1,
-      onClick: l[0] || (l[0] = (s) => a("click", i.idx)),
-      onMouseover: l[1] || (l[1] = (s) => a("mouseover", i.idx))
+      onClick: i[0] || (i[0] = (s) => n("click", t.idx)),
+      onMouseover: i[1] || (i[1] = (s) => n("mouseover", t.idx))
     }, [
-      k(e.$slots, "default", { itemIdx: t.idx }, () => [
+      v(e.$slots, "default", { itemIdx: l.idx }, () => [
         x("span", {
-          innerHTML: i.label
-        }, null, 8, p)
+          innerHTML: t.label
+        }, null, 8, b)
       ])
-    ], 42, b));
+    ], 42, p));
   }
 });
 export {

package/dist/packages/components/lib/UIKit/Checkbox/CheckboxBtn.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as m, useId as s, watch as f, createElementBlock as h, openBlock as d, createVNode as o, renderSlot as b, unref as l, normalizeClass as C, withCtx as u, createBlock as x, createCommentVNode as y, createTextVNode as V, toDisplayString as g } from "vue";
-import { CheckIcon as B } from "@wikicasa-dev/svg-icons";
-import { CheckboxRoot as p, CheckboxIndicator as w } from "reka-ui";
-const z = /* @__PURE__ */ m({
+import { defineComponent as m, useId as f, computed as h, watch as b, createElementBlock as C, openBlock as u, createVNode as c, renderSlot as x, unref as i, normalizeClass as y, withCtx as n, createBlock as V, createCommentVNode as g, createTextVNode as B, toDisplayString as w } from "vue";
+import { CheckIcon as p } from "@wikicasa-dev/svg-icons";
+import { CheckboxRoot as I, CheckboxIndicator as v } from "reka-ui";
+const N = ["for"], j = /* @__PURE__ */ m({
   __name: "CheckboxBtn",
   props: {
     id: {},
@@ -15,59 +15,61 @@ const z = /* @__PURE__ */ m({
     modelValue: { type: Boolean, default: !1 }
   },
   emits: ["click", "update:modelValue", "change"],
-  setup(e, { emit: c }) {
-    const n = s(), a = c;
-    f(
+  setup(e, { emit: r }) {
+    const l = f(), d = h(() => `${e.id ?? l}`), a = r;
+    b(
       () => e.checked,
       (t) => {
         t !== void 0 && a("update:modelValue", t);
       }
     );
-    const r = (t) => {
+    const k = (t) => {
       t !== "indeterminate" && (a("change", {
-        id: e.id ?? n,
+        id: e.id ?? l,
         label: e.label,
         checked: t
       }), a("update:modelValue", t));
     };
-    return (t, i) => (d(), h("label", {
+    return (t, o) => (u(), C("label", {
       class: "uikit-checkbox-btn uikit-flex uikit-items-center uikit-gap-[12px]",
-      onClick: i[0] || (i[0] = (k) => a("click", k))
+      for: d.value,
+      onClick: o[0] || (o[0] = (s) => a("click", s))
     }, [
-      o(l(p), {
+      c(i(I), {
+        id: d.value,
         "model-value": e.modelValue,
         "data-cy": e.dataCy,
         disabled: e.disabled,
-        class: C(["uikit-inline-flex uikit-size-[20px] uikit-items-center uikit-justify-center uikit-rounded-[4px] uikit-p-0 data-[state='unchecked']:uikit-border data-[state='unchecked']:uikit-border-solid data-[state='unchecked']:uikit-border-w-lightgray", [
+        class: y(["uikit-inline-flex uikit-size-[20px] uikit-items-center uikit-justify-center uikit-rounded-[4px] uikit-p-0 data-[state='unchecked']:uikit-border data-[state='unchecked']:uikit-border-solid data-[state='unchecked']:uikit-border-w-lightgray", [
           {
             "uikit-bg-white": !e.modelValue,
             "uikit-bg-w-primary": e.modelValue
           },
           e.inputClass
         ]]),
-        "onUpdate:modelValue": r
+        "onUpdate:modelValue": k
       }, {
-        default: u(() => [
-          o(l(w), { class: "uikit-flex" }, {
-            default: u(() => [
-              e.modelValue === !0 ? (d(), x(l(B), {
+        default: n(() => [
+          c(i(v), { class: "uikit-flex" }, {
+            default: n(() => [
+              e.modelValue === !0 ? (u(), V(i(p), {
                 key: 0,
                 "fill-color": "#fff",
                 width: 12,
                 height: 14
-              })) : y("", !0)
+              })) : g("", !0)
             ]),
             _: 1
           })
         ]),
         _: 1
-      }, 8, ["model-value", "data-cy", "disabled", "class"]),
-      b(t.$slots, "label", {}, () => [
-        V(g(e.label), 1)
+      }, 8, ["id", "model-value", "data-cy", "disabled", "class"]),
+      x(t.$slots, "label", {}, () => [
+        B(w(e.label), 1)
       ])
-    ]));
+    ], 8, N));
   }
 });
 export {
-  z as default
+  j as default
 };