@wikicasa-dev/components 2.1.2 → 2.1.4-alpha.1

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

@@ -0,0 +1,136 @@
+import { defineComponent as E, mergeModels as T, useModel as p, ref as l, watch as g, createElementBlock as B, openBlock as L, createVNode as u, createElementVNode as U, unref as m, withCtx as w } from "vue";
+import { SliderRoot as z, SliderTrack as N, SliderRange as R, SliderThumb as y } from "reka-ui";
+import V from "./BaseInput.vue.js";
+import '../../../../assets/packages/components/lib/UIKit/BaseInput.css';/* empty css               */
+const j = { class: "uikit-mt-[20px] uikit-flex uikit-justify-between uikit-gap-x-sm" }, J = /* @__PURE__ */ E({
+  __name: "BaseSlider",
+  props: /* @__PURE__ */ T({
+    type: { default: "linear" },
+    min: { default: 0 },
+    max: { default: 100 },
+    step: {},
+    dataCy: {}
+  }, {
+    rangeMin: { default: 0 },
+    rangeMinModifiers: {},
+    rangeMax: { default: 100 },
+    rangeMaxModifiers: {}
+  }),
+  emits: ["update:rangeMin", "update:rangeMax"],
+  setup(a) {
+    const C = (e) => e.minPos + (Math.log(e.value) - e.minlval) / e.scale, F = (e) => Math.exp(
+      (e.position - e.minPos) * e.scale + e.minlval
+    ), o = p(a, "rangeMin"), s = p(a, "rangeMax"), n = l(0), f = l(100), S = l(10), $ = l(40), k = l(0), h = l(0), c = l(0), x = (e) => {
+      if (a.type === "logarithmic")
+        return e = e || 1, parseInt(
+          C({
+            value: e,
+            minPos: n.value,
+            minlval: k.value,
+            scale: c.value
+          }).toFixed(0),
+          10
+        );
+      if (a.type === "linear")
+        return e;
+      throw new Error("The slider type has not been implemented");
+    }, b = (e) => {
+      if (!e) return 0;
+      if (a.type === "logarithmic")
+        return parseInt(
+          F({
+            position: e,
+            scale: c.value,
+            minlval: k.value,
+            minPos: n.value
+          }).toFixed(0),
+          10
+        );
+      if (a.type === "linear")
+        return e;
+      throw new Error("The slider type has not been implemented");
+    }, r = l([]), d = l(!1), v = l(!1);
+    (() => {
+      n.value = parseInt(`${a.min || 0}`, 10), f.value = parseInt(`${a.max || 100}`, 10), S.value = n.value, $.value = f.value;
+      const e = n.value, t = f.value;
+      k.value = Math.log(e || 1), h.value = Math.log(t), c.value = (h.value - k.value) / (f.value - n.value), r.value = [
+        b(o.value),
+        b(s.value)
+      ];
+    })();
+    const I = (e = []) => {
+      r.value = e, v.value = !0;
+    }, M = {
+      formatFn: (e = "") => typeof e == "number" ? `${e}` : e.replace(/\D/g, ""),
+      unFormatFn: (e) => e ? parseInt(e) : 0
+    };
+    return g(
+      r,
+      ([e, t]) => {
+        const i = x(e), P = x(t);
+        a.type === "logarithmic" && d.value || (o.value = i, s.value = P);
+      },
+      { deep: !0 }
+    ), g(o, (e) => {
+      e === void 0 || v.value || (r.value[0] = b(e));
+    }), g(s, (e) => {
+      e === void 0 || v.value || (r.value[1] = b(e));
+    }), (e, t) => (L(), B("div", null, [
+      u(m(z), {
+        "model-value": r.value,
+        class: "uikit-relative uikit-flex uikit-h-5 uikit-touch-none uikit-select-none uikit-items-center",
+        min: e.min,
+        max: e.max,
+        step: e.step,
+        "onUpdate:modelValue": I
+      }, {
+        default: w(() => [
+          u(m(N), { class: "uikit-relative uikit-h-[2px] uikit-grow uikit-rounded-full uikit-bg-w-lightgray" }, {
+            default: w(() => [
+              u(m(R), { class: "uikit-absolute uikit-h-full uikit-rounded-full uikit-bg-w-blue" })
+            ]),
+            _: 1
+          }),
+          u(m(y), {
+            class: "uikit-block uikit-size-[20px] uikit-rounded-full uikit-border-2 uikit-border-solid uikit-border-w-blue uikit-bg-w-blue uikit-shadow-[0_0_0_2px_#fff_inset] hover:uikit-border-w-blue-hover hover:uikit-bg-w-blue-hover focus:uikit-border-w-blue-hover focus:uikit-bg-w-blue-hover focus:uikit-outline-none",
+            "aria-label": "Min Value",
+            "data-cy": e.dataCy?.thumbMin
+          }, null, 8, ["data-cy"]),
+          u(m(y), {
+            class: "uikit-block uikit-size-[20px] uikit-rounded-full uikit-border-2 uikit-border-solid uikit-border-w-blue uikit-bg-w-blue uikit-shadow-[0_0_0_2px_#fff_inset] hover:uikit-border-w-blue-hover hover:uikit-bg-w-blue-hover focus:uikit-border-w-blue-hover focus:uikit-bg-w-blue-hover focus:uikit-outline-none",
+            "aria-label": "Max Value",
+            "data-cy": e.dataCy?.thumbMax
+          }, null, 8, ["data-cy"])
+        ]),
+        _: 1
+      }, 8, ["model-value", "min", "max", "step"]),
+      U("div", j, [
+        u(V, {
+          modelValue: o.value,
+          "onUpdate:modelValue": t[0] || (t[0] = (i) => o.value = i),
+          "label-text": "Min",
+          "data-cy": e.dataCy?.rangeMinInput,
+          formatter: M,
+          onFocusin: t[1] || (t[1] = (i) => {
+            d.value = !0, v.value = !1;
+          }),
+          onFocusout: t[2] || (t[2] = (i) => d.value = !1)
+        }, null, 8, ["modelValue", "data-cy"]),
+        u(V, {
+          modelValue: s.value,
+          "onUpdate:modelValue": t[3] || (t[3] = (i) => s.value = i),
+          "label-text": "Max",
+          "data-cy": e.dataCy?.rangeMaxInput,
+          formatter: M,
+          onFocusin: t[4] || (t[4] = (i) => {
+            d.value = !0, v.value = !1;
+          }),
+          onFocusout: t[5] || (t[5] = (i) => d.value = !1)
+        }, null, 8, ["modelValue", "data-cy"])
+      ])
+    ]));
+  }
+});
+export {
+  J as default
+};

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

@@ -0,0 +1,81 @@
+import { defineComponent as p, ref as u, onBeforeMount as f, createBlock as h, openBlock as i, Teleport as y, createElementVNode as e, withModifiers as l, normalizeClass as x, createElementBlock as a, createCommentVNode as s, createVNode as v, unref as _ } from "vue";
+import { CloseIcon as C } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/CloseIcon.js";
+import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
+const g = { class: "snackbar-container uikit-fixed uikit-bottom-10px uikit-left-10px uikit-z-[2000] max-sm:uikit-left-0 max-sm:uikit-w-full" }, T = ["data-cy"], w = ["src", "alt"], L = {
+  key: 1,
+  class: "snackbar-type-icon uikit-bg-contain uikit-bg-no-repeat"
+}, M = { class: "snackbar-text uikit-px-4 uikit-py-0 uikit-text uikit-font-regular max-sm:uikit-max-w-[80%] max-sm:uikit-pr-0 sm:uikit-text-16" }, B = ["innerHTML"], H = ["innerHTML"], z = /* @__PURE__ */ p({
+  inheritAttrs: !1,
+  __name: "BaseSnackbar",
+  props: {
+    type: { default: "" },
+    title: {},
+    body: {},
+    icon: {},
+    timeout: { default: 55e4 },
+    cb: { default: null }
+  },
+  emits: ["snackbar-hidden"],
+  setup(k, { emit: m }) {
+    const n = k, d = m, o = u(null), r = u(null), b = () => {
+      o.value && o.value();
+    }, c = () => {
+      const t = r.value;
+      t && (t.classList.remove("snackbar-active"), t.classList.add("snackbar-hidden"), setTimeout(() => {
+        d("snackbar-hidden");
+      }, 300));
+    };
+    return f(() => {
+      n.cb && (o.value = n.cb), setTimeout(() => {
+        c();
+      }, n.timeout);
+    }), (t, S) => (i(), h(y, { to: "body" }, [
+      e("div", g, [
+        e("div", {
+          ref_key: "snackbar",
+          ref: r,
+          "data-cy": t.$attrs["data-cy"],
+          class: x(["snackbar snackbar-active uikit-py-xs uikit-flex uikit-items-center uikit-rounded-[5px] uikit-px-4 uikit-font-medium uikit-shadow hover:uikit-cursor-pointer max-sm:uikit-relative max-sm:uikit-mx-10px max-sm:uikit-my-0", t.type]),
+          onClick: l(b, ["stop"])
+        }, [
+          t.icon ? (i(), a("img", {
+            key: 0,
+            src: t.icon.src,
+            alt: `${t.icon.alt}`,
+            width: "20",
+            height: "20"
+          }, null, 8, w)) : s("", !0),
+          t.type && !t.icon ? (i(), a("span", L)) : s("", !0),
+          e("div", M, [
+            t.title ? (i(), a("p", {
+              key: 0,
+              class: "uikit-m-0",
+              innerHTML: t.title
+            }, null, 8, B)) : s("", !0),
+            t.body ? (i(), a("p", {
+              key: 1,
+              class: "uikit-m-0",
+              innerHTML: t.body
+            }, null, 8, H)) : s("", !0)
+          ]),
+          e("button", {
+            type: "button",
+            "data-cy": "base-snackbar-close-btn",
+            class: "uikit-bg-transparent max-sm:uikit-absolute max-sm:uikit-right-5",
+            onClick: l(c, ["stop"])
+          }, [
+            v(_(C), {
+              class: "snackbar-close-icon",
+              width: 20,
+              height: 20,
+              "stroke-color": "#000"
+            })
+          ])
+        ], 10, T)
+      ])
+    ]));
+  }
+});
+export {
+  z as default
+};

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

@@ -0,0 +1,109 @@
+import { defineComponent as T, mergeModels as n, useModel as g, ref as C, watch as h, createElementBlock as f, openBlock as b, normalizeClass as r, createElementVNode as v, createCommentVNode as L, unref as o, createVNode as x, withModifiers as u, nextTick as F } from "vue";
+import M from "./BaseFloatingLabel.vue.js";
+import '../../../../assets/packages/components/lib/UIKit/BaseFloatingLabel.css';/* empty css                       */
+import { useFloatingLabel as E } from "../../../../composables/useFloatingLabel.js";
+const z = ["id", "data-cy", "data-validation", "rows", "disabled", "aria-labelledby", "readonly", "value"], B = ["innerHTML"], q = "peer-data-[validation='invalid']/fieldset:uikit-text-w-red peer-data-[validation='valid']/fieldset:uikit-text-w-blue", S = /* @__PURE__ */ T({
+  inheritAttrs: !1,
+  __name: "BaseTextarea",
+  props: /* @__PURE__ */ n({
+    labelText: { default: "" },
+    feedback: {},
+    isValid: { default: null },
+    resize: { type: Boolean, default: !1 },
+    labelClasses: {}
+  }, {
+    modelValue: { default: "" },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ n(["focusin", "focusout", "click", "keydown"], ["update:modelValue"]),
+  setup(k, { expose: m, emit: p }) {
+    const t = g(k, "modelValue"), s = p, {
+      labelState: d,
+      handleFocusIn: c,
+      handleFocusOut: w,
+      setFloatingLabel: y,
+      setInlineLabel: V
+    } = E(), a = C(null);
+    h(
+      t,
+      (e) => {
+        `${e}`.length && d.value !== "floating-label" ? y() : !e?.length && d.value !== "inline-label" && document.activeElement !== a.value && V();
+      },
+      { immediate: !0 }
+    );
+    const $ = ({ target: e }) => {
+      t.value = e.value;
+    };
+    return m({
+      disableTextarea: () => {
+        a.value && (a.value.setAttribute("readonly", "readonly"), a.value.classList.add("disabled"));
+      },
+      clearTextareaElem: () => {
+        a.value && (a.value.value = "");
+      },
+      focusDisabledTextarea: () => {
+        a.value && (a.value.removeAttribute("readonly"), a.value.classList.remove("disabled"), F(() => {
+          a.value && a.value.focus();
+        }));
+      }
+    }), (e, i) => (b(), f("div", {
+      class: r(e.$attrs["wrapper-classes"])
+    }, [
+      v("div", {
+        class: r(["input-wrapper uikit-relative uikit-rounded-xs uikit-px-0", [
+          o(d) === "floating-label" ? "floating-state" : "inline-state"
+        ]])
+      }, [
+        v("textarea", {
+          id: e.$attrs.id,
+          ref_key: "textarea",
+          ref: a,
+          "data-cy": e.$attrs["data-cy"],
+          class: r(["textarea-scrollbar uikit-peer/fieldset uikit-relative uikit-min-h-[130px] uikit-min-w-[343px] uikit-overflow-y-auto uikit-whitespace-pre-wrap uikit-rounded-2xs uikit-border uikit-border-solid uikit-bg-white uikit-px-sm uikit-py-lg uikit-text-16 uikit-outline-none focus-visible:uikit-border-w-blue data-[validation='invalid']:uikit-border-w-red data-[validation='valid']:uikit-border-w-blue", [
+            { "is-invalid": e.isValid === !1 },
+            { "is-valid": e.isValid },
+            { "uikit-resize-none": !e.resize },
+            e.$attrs.class
+          ]]),
+          "data-validation": e.isValid ? "valid" : e.isValid === !1 ? "invalid" : "",
+          rows: e.$attrs.rows,
+          disabled: e.$attrs.disabled,
+          "aria-labelledby": e.$attrs.id,
+          readonly: e.$attrs.readonly,
+          onFocusin: i[0] || (i[0] = u(
+            (l) => {
+              s("focusin", l), o(c)();
+            },
+            ["stop"]
+          )),
+          onFocusout: i[1] || (i[1] = u(
+            (l) => {
+              s("focusout", l), o(w)(`${t.value}`.trim());
+            },
+            ["stop"]
+          )),
+          onInput: u($, ["stop"]),
+          onKeydown: i[2] || (i[2] = u((l) => s("keydown", l), ["stop"])),
+          onClick: i[3] || (i[3] = (l) => s("click", l)),
+          value: t.value
+        }, null, 42, z),
+        x(M, {
+          for: e.$attrs.id,
+          "label-text": e.labelText,
+          "label-state": o(d),
+          required: e.$attrs.required,
+          "is-valid": e.isValid,
+          "label-classes": [e.labelClasses, q]
+        }, null, 8, ["for", "label-text", "label-state", "required", "is-valid", "label-classes"])
+      ], 2),
+      (e.isValid || e.isValid === !1) && e.feedback ? (b(), f("div", {
+        key: 0,
+        class: r(["uikit-mt-1 uikit-text-12", e.isValid === !1 ? "uikit-text-w-red" : "uikit-text-w-blue"]),
+        innerHTML: e.isValid === !1 ? e.feedback.invalid : e.feedback.valid
+      }, null, 10, B)) : L("", !0)
+    ], 2));
+  }
+});
+export {
+  S as default
+};

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

@@ -0,0 +1,38 @@
+import { defineComponent as r, mergeModels as d, useModel as n, createElementBlock as k, openBlock as m, renderSlot as l, createVNode as u, createCommentVNode as c, unref as a, withCtx as f, createElementVNode as p } from "vue";
+import { SwitchRoot as h, SwitchThumb as b } from "reka-ui";
+const g = { class: "uikit-flex uikit-items-center uikit-gap-xs" }, x = ["innerHTML"], L = /* @__PURE__ */ r({
+  inheritAttrs: !1,
+  __name: "BaseToggle",
+  props: /* @__PURE__ */ d({
+    label: {}
+  }, {
+    modelValue: { default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(o) {
+    const t = n(o, "modelValue");
+    return (e, i) => (m(), k("div", g, [
+      l(e.$slots, "leftLabel"),
+      u(a(h), {
+        modelValue: t.value,
+        "onUpdate:modelValue": i[0] || (i[0] = (s) => t.value = s),
+        class: "uikit-flex uikit-h-[20px] uikit-w-2xl uikit-cursor-pointer uikit-rounded-full uikit-p-0 uikit-transition-[background] data-[state=checked]:uikit-bg-w-blue data-[state=unchecked]:uikit-bg-w-cultured"
+      }, {
+        default: f(() => [
+          u(a(b), { class: "uikit-text-xs uikit-shadow-surface uikit-my-auto uikit-flex uikit-size-[20px] uikit-translate-x-0 uikit-items-center uikit-justify-center uikit-rounded-full uikit-border uikit-border-solid uikit-border-w-lightgray uikit-bg-white uikit-shadow-xl uikit-transition-transform uikit-will-change-transform data-[state=checked]:uikit-translate-x-full" })
+        ]),
+        _: 1
+      }, 8, ["modelValue"]),
+      e.$slots.leftLabel ? c("", !0) : l(e.$slots, "rightLabel", { key: 0 }, () => [
+        p("span", {
+          class: "uikit-ml-[10px]",
+          innerHTML: e.label
+        }, null, 8, x)
+      ])
+    ]));
+  }
+});
+export {
+  L as default
+};

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

@@ -0,0 +1,56 @@
+import { defineComponent as s, createBlock as n, openBlock as u, unref as e, withCtx as i, createVNode as o, normalizeClass as a, renderSlot as r, createElementVNode as d } from "vue";
+import { TooltipProvider as p, TooltipRoot as f, TooltipTrigger as k, TooltipPortal as c, TooltipContent as g, TooltipArrow as m } from "reka-ui";
+const _ = /* @__PURE__ */ s({
+  __name: "BaseTooltip",
+  props: {
+    direction: { default: "top" },
+    tooltipContentClasses: { default: "" },
+    triggerClasses: { default: "" },
+    delayDuration: { default: 0 }
+  },
+  setup(C) {
+    return (t, l) => (u(), n(e(p), { "delay-duration": t.delayDuration }, {
+      default: i(() => [
+        o(e(f), null, {
+          default: i(() => [
+            o(e(k), {
+              class: a(["uikit-inline-flex uikit-w-fit uikit-appearance-none uikit-bg-transparent uikit-p-0", t.triggerClasses])
+            }, {
+              default: i(() => [
+                r(t.$slots, "trigger", {}, void 0, !0)
+              ]),
+              _: 3
+            }, 8, ["class"]),
+            o(e(c), null, {
+              default: i(() => [
+                o(e(g), {
+                  class: a(["will-change-[transform,opacity] uikit-shadow-surface uikit-max-w-[250px] uikit-rounded-2xs uikit-bg-white uikit-p-xs uikit-text uikit-text-w-black", t.tooltipContentClasses]),
+                  "side-offset": 8,
+                  side: t.direction
+                }, {
+                  default: i(() => [
+                    r(t.$slots, "content", {}, void 0, !0),
+                    o(e(m), { "as-child": "" }, {
+                      default: i(() => l[0] || (l[0] = [
+                        d("span", { class: "uikit-pin-arrow" }, null, -1)
+                      ])),
+                      _: 1,
+                      __: [0]
+                    })
+                  ]),
+                  _: 3
+                }, 8, ["class", "side"])
+              ]),
+              _: 3
+            })
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }, 8, ["delay-duration"]));
+  }
+});
+export {
+  _ as default
+};

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

@@ -0,0 +1,50 @@
+import { defineComponent as p, ref as f, watch as c, createElementBlock as m, openBlock as b, normalizeClass as s, createElementVNode as i, renderSlot as C } from "vue";
+const h = ["for"], k = ["id", "multiple", "accept"], B = /* @__PURE__ */ p({
+  inheritAttrs: !1,
+  __name: "BaseUploadFile",
+  props: {
+    id: {},
+    labelText: { default: "" },
+    clear: { type: Boolean, default: !1 },
+    labelClasses: { default: "" },
+    floatingLabelClasses: { default: "" },
+    fieldsetClasses: { default: "" },
+    legendClasses: { default: "" }
+  },
+  emits: ["cleared", "uploaded"],
+  setup(n, { emit: r }) {
+    const o = n, a = r, t = f("");
+    c(
+      () => o.clear,
+      (e) => {
+        e && (t.value = "", a("cleared"));
+      }
+    );
+    const d = ({ target: e }) => {
+      if (!e) return;
+      const l = e.files;
+      l?.length && (t.value = l[0].name, a("uploaded", l[0]));
+    };
+    return (e, l) => (b(), m("div", {
+      class: s(["base-upload-file-wrapper uikit-relative", [e.$attrs.class]])
+    }, [
+      i("label", {
+        class: s(["uikit-btn uikit-btn-w-ternary", e.labelClasses]),
+        for: e.id
+      }, [
+        i("input", {
+          id: e.id,
+          multiple: e.$attrs.multiple,
+          type: "file",
+          class: "uikit-hidden",
+          accept: e.$attrs.accept,
+          onInput: l[0] || (l[0] = (u) => d(u))
+        }, null, 40, k),
+        C(e.$slots, "label", { filename: t.value })
+      ], 10, h)
+    ], 2));
+  }
+});
+export {
+  B as default
+};

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

@@ -0,0 +1,78 @@
+import { defineComponent as m, useId as f, computed as h, watch as b, createElementBlock as p, openBlock as u, createVNode as n, renderSlot as C, unref as l, normalizeClass as y, withCtx as s, createBlock as V, createCommentVNode as g, createTextVNode as B, toDisplayString as w } from "vue";
+import { CheckIcon as I } from "../../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/CheckIcon.js";
+import "../../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
+import { CheckboxRoot as v, CheckboxIndicator as x } from "reka-ui";
+const N = ["for"], q = /* @__PURE__ */ m({
+  __name: "CheckboxBtn",
+  props: {
+    id: {},
+    dataCy: {},
+    disabled: { type: Boolean },
+    checked: { type: Boolean, default: () => {
+    } },
+    required: { type: Boolean },
+    inputClass: {},
+    label: { default: "" },
+    labelClass: {},
+    containerId: {},
+    modelValue: { type: Boolean, default: !1 }
+  },
+  emits: ["click", "change", "update:modelValue"],
+  setup(t, { emit: r }) {
+    const i = f(), d = h(() => `${t.id || i}`), a = r;
+    b(
+      () => t.checked,
+      (e) => {
+        e !== void 0 && a("update:modelValue", e);
+      }
+    );
+    const c = (e) => {
+      e !== "indeterminate" && (a("change", {
+        id: t.id ?? i,
+        label: t.label,
+        checked: e
+      }), a("update:modelValue", e));
+    };
+    return (e, o) => (u(), p("label", {
+      class: "uikit-flex uikit-items-center uikit-gap-sm uikit-text-16",
+      for: d.value,
+      onClick: o[0] || (o[0] = (k) => a("click", k))
+    }, [
+      n(l(v), {
+        id: d.value,
+        "model-value": e.modelValue,
+        "data-cy": e.dataCy,
+        disabled: e.disabled,
+        class: y(["uikit-inline-flex uikit-size-[20px] uikit-items-center uikit-justify-center uikit-rounded-3xs 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-blue": e.modelValue
+          },
+          e.inputClass
+        ]]),
+        "onUpdate:modelValue": c
+      }, {
+        default: s(() => [
+          n(l(x), { class: "uikit-flex" }, {
+            default: s(() => [
+              e.modelValue === !0 ? (u(), V(l(I), {
+                key: 0,
+                "fill-color": "#fff",
+                width: 12,
+                height: 14
+              })) : g("", !0)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["id", "model-value", "data-cy", "disabled", "class"]),
+      C(e.$slots, "label", {}, () => [
+        B(w(e.label), 1)
+      ])
+    ], 8, N));
+  }
+});
+export {
+  q as default
+};

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

@@ -0,0 +1,110 @@
+import { defineComponent as x, ref as D, computed as h, watch as E, renderSlot as m, createElementVNode as $, normalizeClass as B, createElementBlock as A, createCommentVNode as I, openBlock as b, Fragment as R, renderList as K, createBlock as L } from "vue";
+import V from "./CheckboxBtn.vue.js";
+const w = ["id", "data-cy"], F = /* @__PURE__ */ x({
+  inheritAttrs: !1,
+  __name: "CheckboxGroup",
+  props: {
+    checkboxData: { default() {
+      return [];
+    } },
+    formCheckInline: { type: Boolean, default: !1 },
+    reset: { type: Boolean, default: !1 },
+    checkboxContainerClasses: { default: "" },
+    autoCheckResetAll: { type: Boolean, default: !1 },
+    autoCheckResetEmpty: { type: Boolean, default: !1 },
+    manualToggleResetButton: { type: Boolean, default: !1 },
+    getKey: { type: Function, default() {
+      return (n) => typeof n == "string" || typeof n == "number" ? `${n}` : `${n.id}`;
+    } },
+    groupId: { default: "" },
+    dataCy: { default: "" }
+  },
+  emits: ["resetted", "update:modelValue", "checkedGroup"],
+  setup(n, { emit: g }) {
+    const C = (e = "") => !e || !e.trim() ? "" : (e = e.trim(), e.replace(" ", "-").toLowerCase()), y = (e) => !e?.length, o = n, r = g, c = D(/* @__PURE__ */ new Map()), s = h(() => {
+      for (const e of o.checkboxData)
+        if (e.reset) return e;
+      return null;
+    }), v = h(() => o.checkboxData.length), f = h(() => {
+      let e = 0;
+      return c.value.forEach((t) => {
+        t.checked && e++;
+      }), e;
+    });
+    (() => {
+      const e = [];
+      for (const t of o.checkboxData)
+        t.checked = !!t.checked, c.value.set(
+          `${t.id}`,
+          t
+        ), t.checked && e.push(t);
+      r("update:modelValue", e);
+    })();
+    const u = (e, t) => {
+      const a = c.value.get(e);
+      if (a) {
+        if (t) {
+          c.value.set(e, { ...a, ...t });
+          return;
+        }
+        c.value.set(e, { ...a, checked: !a.checked });
+      }
+    }, k = () => {
+      c.value.forEach((e) => {
+        e.checked = !1;
+      });
+    }, p = () => {
+      k(), r("update:modelValue", []), r("resetted");
+    }, d = (e) => c.value.get(o.getKey(e))?.checked ?? !1, i = (e) => {
+      if (y(o.checkboxData)) return;
+      const t = c.value.get(e.id);
+      t?.reset && e.checked ? k() : s.value && !t?.reset && u(o.getKey(s.value), { checked: !1 }), u(`${e.id}`), o.autoCheckResetAll && s.value && f.value === v.value - 1 && c.value.forEach((l) => {
+        l.checked = !!l.reset;
+      }), o.autoCheckResetEmpty && s.value && !f.value && (!o.manualToggleResetButton || !t?.reset) && u(o.getKey(s.value), { checked: !0 });
+      const a = [];
+      c.value.forEach((l) => {
+        l.checked && a.push(l);
+      }), r("update:modelValue", a), r("checkedGroup", o.groupId);
+    };
+    return E(
+      () => o.reset,
+      (e) => {
+        e && p();
+      }
+    ), (e, t) => m(e.$slots, "default", {
+      isActive: d,
+      handleChange: i,
+      checkboxesData: e.checkboxData
+    }, () => [
+      $("div", {
+        id: e.groupId,
+        class: B(["checkbox-group-container", e.$attrs.class || ""]),
+        "data-cy": e.dataCy
+      }, [
+        m(e.$slots, "checkbox_elements", {
+          isActive: d,
+          handleChange: i,
+          checkboxesData: e.checkboxData,
+          reset: p
+        }, () => [
+          e.checkboxData ? (b(!0), A(R, { key: 0 }, K(e.checkboxData, (a, l) => (b(), L(V, {
+            id: e.getKey(a),
+            key: l,
+            "data-cy": a.dataCy ?? `checkbox_${C(`${a.label}`)}`,
+            label: a.label,
+            inline: e.formCheckInline,
+            "model-value": d(a),
+            "container-class": [
+              e.formCheckInline ? "uikit-mr-10px" : "uikit-mb-10px",
+              e.checkboxContainerClasses
+            ],
+            onChange: i
+          }, null, 8, ["id", "data-cy", "label", "inline", "model-value", "container-class"]))), 128)) : I("", !0)
+        ])
+      ], 10, w)
+    ]);
+  }
+});
+export {
+  F as default
+};