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

package/dist/packages/components/lib/UIKit/Checkbox/v2/CheckboxButtonGroup.vue.js

@@ -0,0 +1,78 @@
+import { defineComponent as v, mergeModels as k, useModel as f, provide as m, watch as y, createElementBlock as h, openBlock as n, renderSlot as C, Fragment as g, renderList as B, createBlock as x, withCtx as M, createTextVNode as b, toDisplayString as U } from "vue";
+import q from "../CheckboxBtn.vue.js";
+import '../../../../../../assets/CheckboxBtn.css';/* empty css                  */
+const w = ["data-cy"], I = /* @__PURE__ */ v({
+  __name: "CheckboxButtonGroup",
+  props: /* @__PURE__ */ k({
+    dataCy: {},
+    items: { default: () => [] },
+    resetValue: {}
+  }, {
+    modelValue: {
+      default: () => []
+    },
+    modelModifiers: {},
+    reset: { type: Boolean, default: !1 },
+    resetModifiers: {}
+  }),
+  emits: ["update:modelValue", "update:reset"],
+  setup(l) {
+    const a = f(l, "modelValue"), o = f(l, "reset"), r = /* @__PURE__ */ new Map(), c = (e) => e ? a.value.includes(e) : !1, i = (e, u) => {
+      if (!e) return;
+      let t = [];
+      if (u ? t = [...a.value, e] : t = a.value.filter((d) => d !== e), !l.resetValue) {
+        a.value = t;
+        return;
+      }
+      t = t.filter((d) => d !== l.resetValue);
+      const s = Array.from(r.keys()).filter(
+        (d) => !t.includes(d)
+      );
+      console.log("DEBUG:handleCheck => update", {
+        registeredItems: r,
+        checkedList: t,
+        uncheckedList: s
+      }), s.length === r.size && (t = [l.resetValue], r.get(l.resetValue)?.focus?.()), t.length === r.size - 1 && (t = [l.resetValue], r.get(l.resetValue)?.focus?.()), a.value = t;
+    }, V = (e) => {
+      if (l.resetValue) {
+        if (console.log("DEBUG:handleResetCheck", { resetValue: l.resetValue }), e) {
+          a.value = [l.resetValue];
+          return;
+        }
+        a.value = a.value.filter((u) => u !== l.resetValue);
+      }
+    };
+    return m(
+      "addItem",
+      (e, u) => {
+        !e || !u || r.set(e, u);
+      }
+    ), m("removeItem", (e) => {
+      e && r.delete(e);
+    }), y(o, (e) => {
+      e && (a.value = [], o.value = !1);
+    }), (e, u) => (n(), h("div", { "data-cy": l.dataCy }, [
+      C(e.$slots, "default", {
+        isChecked: c,
+        handleCheck: i,
+        handleResetCheck: V
+      }, () => [
+        (n(!0), h(g, null, B(l.items, (t) => (n(), x(q, {
+          key: `checkbox-item-${t.value}`,
+          required: t.required,
+          "data-cy": t.dataCy,
+          "model-value": c(t.value),
+          "onUpdate:modelValue": (s) => i(t.value, s)
+        }, {
+          label: M(() => [
+            b(U(t.label), 1)
+          ]),
+          _: 2
+        }, 1032, ["required", "data-cy", "model-value", "onUpdate:modelValue"]))), 128))
+      ])
+    ], 8, w));
+  }
+});
+export {
+  I as default
+};

package/dist/packages/components/lib/UIKit/Radio/RadioButton.vue.js

@@ -1,8 +1,9 @@
-import { defineComponent as k, useId as c, computed as m, createElementBlock as f, openBlock as b, withModifiers as t, createElementVNode as l, normalizeClass as d, createTextVNode as h, toDisplayString as C } from "vue";
-const V = ["id", "name", "checked"], x = ["for"], y = /* @__PURE__ */ k({
+import { defineComponent as c, useId as k, computed as m, createElementBlock as f, openBlock as b, withModifiers as t, createElementVNode as a, normalizeClass as u, createTextVNode as h, toDisplayString as C } from "vue";
+const y = ["data-cy"], V = ["id", "name", "checked"], x = ["for"], g = /* @__PURE__ */ c({
   __name: "RadioButton",
   props: {
     id: {},
+    dataCy: {},
     name: {},
     label: {},
     modelValue: { type: Boolean, default: !1 },
@@ -11,20 +12,21 @@ const V = ["id", "name", "checked"], x = ["for"], y = /* @__PURE__ */ k({
   },
   emits: ["change", "update:modelValue"],
   setup(e, { emit: s }) {
-    const n = s, a = c(), o = m(() => `${e.id ?? a}`), r = () => {
+    const l = s, n = k(), o = m(() => `${e.id ?? n}`), r = () => {
       if (e.modelValue) return;
-      const u = {
-        id: e.id ?? a,
+      const d = {
+        id: e.id ?? n,
         label: e.label,
         name: e.name
       };
-      n("change", u), n("update:modelValue", !e.modelValue);
+      l("change", d), l("update:modelValue", !e.modelValue);
     };
-    return (u, i) => (b(), f("div", {
+    return (d, i) => (b(), f("div", {
       class: "uikit-inline-block",
+      "data-cy": e.dataCy,
       onClick: t(r, ["stop"])
     }, [
-      l("input", {
+      a("input", {
         id: o.value,
         ref: "checkbox",
         type: "radio",
@@ -36,12 +38,12 @@ const V = ["id", "name", "checked"], x = ["for"], y = /* @__PURE__ */ k({
         onClick: i[1] || (i[1] = t(() => {
         }, ["prevent"]))
       }, null, 40, V),
-      l("label", {
-        class: d([e.labelClasses, "uikit-flex uikit-cursor-pointer uikit-items-center uikit-text-sm"]),
+      a("label", {
+        class: u([e.labelClasses, "uikit-flex uikit-cursor-pointer uikit-items-center uikit-text-sm"]),
         for: o.value
       }, [
-        l("span", {
-          class: d(["uikit-flex-no-shrink uikit-mr-2 uikit-inline-block uikit-h-4 uikit-w-4 uikit-transform uikit-rounded-full uikit-border uikit-border-solid uikit-border-w-secondary uikit-transition-colors uikit-duration-200", [
+        a("span", {
+          class: u(["uikit-flex-no-shrink uikit-mr-2 uikit-inline-block uikit-h-4 uikit-w-4 uikit-transform uikit-rounded-full uikit-border uikit-border-solid uikit-border-w-secondary uikit-transition-colors uikit-duration-200", [
             {
               "checked uikit-border-w-primary uikit-bg-w-primary uikit-shadow-[0_0_0_2px_white_inset]": e.modelValue
             },
@@ -50,9 +52,9 @@ const V = ["id", "name", "checked"], x = ["for"], y = /* @__PURE__ */ k({
         }, null, 2),
         h(" " + C(e.label), 1)
       ], 10, x)
-    ]));
+    ], 8, y));
   }
 });
 export {
-  y as default
+  g as default
 };

package/dist/packages/components/lib/UIKit/Radio/RadioGroup.vue.js

@@ -1,60 +1,64 @@
-import { defineComponent as C, mergeModels as d, useModel as h, ref as $, watch as V, renderSlot as u, createElementVNode as p, normalizeClass as c, createElementBlock as k, openBlock as m, Fragment as y, renderList as R, createBlock as g } from "vue";
-import B from "./RadioButton.vue.js";
-const b = ["data-cy"], z = /* @__PURE__ */ C({
+import { defineComponent as k, mergeModels as f, useModel as m, ref as R, watch as v, renderSlot as h, createElementVNode as g, normalizeClass as C, createElementBlock as B, openBlock as $, Fragment as M, renderList as b, createBlock as A } from "vue";
+import E from "./RadioButton.vue.js";
+const w = ["data-cy"], G = /* @__PURE__ */ k({
   inheritAttrs: !1,
   __name: "RadioGroup",
-  props: /* @__PURE__ */ d({
+  props: /* @__PURE__ */ f({
     radioValues: { default: () => [] },
     dataCy: {},
     radioContainerClasses: {}
   }, {
     resetRadio: { type: Boolean, default: !1 },
-    resetRadioModifiers: {}
+    resetRadioModifiers: {},
+    refresh: { type: Boolean, default: !1 },
+    refreshModifiers: {}
   }),
-  emits: /* @__PURE__ */ d(["update:modelValue"], ["update:resetRadio"]),
-  setup(t, { emit: f }) {
-    const n = f, i = h(t, "resetRadio"), a = $(null), l = (e) => {
-      a.value = e, n("update:modelValue", e);
+  emits: /* @__PURE__ */ f(["update:modelValue"], ["update:resetRadio", "update:refresh"]),
+  setup(l, { emit: V }) {
+    const o = V, n = m(l, "resetRadio"), i = m(l, "refresh"), a = R(null), t = (e) => {
+      a.value = e, o("update:modelValue", e);
     }, s = () => {
-      a.value = null, i.value = !1, n("update:modelValue", null);
-    }, r = (e) => a.value ? `${a.value.id}` == `${e.id}` : !1;
-    return (() => {
-      for (const e of t.radioValues)
+      a.value = null, n.value = !1, o("update:modelValue", null);
+    }, d = (e) => a.value ? `${a.value.id}` == `${e.id}` : !1, u = () => {
+      for (const e of l.radioValues)
         if (e.active) {
-          l(e);
+          t(e);
           return;
         }
-    })(), V(i, (e) => {
+    };
+    return u(), v(n, (e) => {
       e && s();
-    }), (e, A) => u(e.$slots, "default", {
-      handleClick: l,
+    }), v(i, (e) => {
+      e && (u(), i.value = !1);
+    }), (e, c) => h(e.$slots, "default", {
+      handleClick: t,
       activeValue: a.value,
       reset: s,
-      isActive: r
+      isActive: d
     }, () => [
-      p("div", {
-        class: c(["radio-group-container", e.$attrs.class]),
-        "data-cy": t.dataCy
+      g("div", {
+        class: C(["radio-group-container", e.$attrs.class]),
+        "data-cy": l.dataCy
       }, [
-        u(e.$slots, "radio_elements", {
-          handleClick: l,
+        h(e.$slots, "radio_elements", {
+          handleClick: t,
           activeValue: a.value,
           reset: s,
-          isActive: r
+          isActive: d
         }, () => [
-          (m(!0), k(y, null, R(t.radioValues, (o, v) => (m(), g(B, {
-            id: o.id,
-            key: v,
-            class: c(t.radioContainerClasses),
-            label: `${o.label}`,
-            "model-value": `${o.id}` == `${a.value?.id}`,
-            onChange: l
+          ($(!0), B(M, null, b(l.radioValues, (r, p) => ($(), A(E, {
+            id: r.id,
+            key: p,
+            class: C(l.radioContainerClasses),
+            label: `${r.label}`,
+            "model-value": `${r.id}` == `${a.value?.id}`,
+            onChange: c[0] || (c[0] = (y) => t(y))
           }, null, 8, ["id", "class", "label", "model-value"]))), 128))
         ])
-      ], 10, b)
+      ], 10, w)
     ]);
   }
 });
 export {
-  z as default
+  G as default
 };

package/dist/packages/components/lib/UIKit/Radio/v2/RadioButtonGroup.vue.js

@@ -0,0 +1,49 @@
+import { defineComponent as s, mergeModels as f, createPropsRestProxy as p, useModel as c, createBlock as d, openBlock as o, unref as y, mergeProps as u, withCtx as m, renderSlot as V, createElementBlock as B, Fragment as C, renderList as g, createTextVNode as k, toDisplayString as x } from "vue";
+import { RadioGroupRoot as R } from "reka-ui";
+import v from "./RadioButtonItem.vue.js";
+import '../../../../../../assets/RadioButtonItem.css';/* empty css                     */
+const S = /* @__PURE__ */ s({
+  __name: "RadioButtonGroup",
+  props: /* @__PURE__ */ f({
+    dataCy: {},
+    items: { default: () => [] },
+    modelValue: {},
+    defaultValue: {},
+    disabled: { type: Boolean },
+    orientation: {},
+    dir: {},
+    loop: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    name: {},
+    required: { type: Boolean }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const n = p(e, ["dataCy", "items"]), a = c(e, "modelValue");
+    return (i, l) => (o(), d(y(R), u({ "data-cy": e.dataCy }, n, {
+      modelValue: a.value,
+      "onUpdate:modelValue": l[0] || (l[0] = (t) => a.value = t)
+    }), {
+      default: m(() => [
+        V(i.$slots, "default", {}, () => [
+          (o(!0), B(C, null, g(e.items, ({ label: t, ...r }) => (o(), d(v, u({ ref_for: !0 }, r, {
+            key: `radio-item-${r.value}`
+          }), {
+            default: m(() => [
+              k(x(t), 1)
+            ]),
+            _: 2
+          }, 1040))), 128))
+        ])
+      ]),
+      _: 3
+    }, 16, ["data-cy", "modelValue"]));
+  }
+});
+export {
+  S as default
+};

package/dist/packages/components/lib/UIKit/Radio/v2/RadioButtonItem.vue.js

@@ -0,0 +1,45 @@
+import { defineComponent as l, createPropsRestProxy as n, useId as c, computed as k, createElementBlock as a, openBlock as s, createVNode as r, createCommentVNode as m, unref as u, mergeProps as p, withCtx as f, normalizeClass as y, renderSlot as C } from "vue";
+import { RadioGroupItem as b, RadioGroupIndicator as h } from "reka-ui";
+const x = { class: "uikit-radio-btn uikit-flex uikit-items-center uikit-gap-x-[8px]" }, g = ["for"], v = /* @__PURE__ */ l({
+  __name: "RadioButtonItem",
+  props: {
+    itemClasses: {},
+    labelClasses: {},
+    dataCy: {},
+    id: {},
+    value: {},
+    disabled: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    name: {},
+    required: { type: Boolean }
+  },
+  setup(e) {
+    const i = n(e, ["itemClasses", "labelClasses", "dataCy"]), d = c(), t = k(() => i.id ?? d);
+    return (o, w) => (s(), a("div", x, [
+      r(u(b), p(i, {
+        id: t.value,
+        "data-cy": e.dataCy,
+        class: [
+          "uikit-radio-group-item uikit-inline-flex uikit-size-[18px] uikit-shrink-0 uikit-cursor-default uikit-items-center uikit-justify-center uikit-rounded-full uikit-border uikit-border-solid uikit-border-w-secondary uikit-bg-white uikit-p-0 uikit-shadow-sm uikit-outline-none focus:uikit-border-2 focus:uikit-border-w-primary",
+          e.itemClasses
+        ]
+      }), {
+        default: f(() => [
+          r(u(h), { class: "uikit-radio-group-indicator uikit-size-[12px] uikit-rounded-[50%] uikit-bg-w-primary" })
+        ]),
+        _: 1
+      }, 16, ["id", "data-cy", "class"]),
+      o.$slots.default ? (s(), a("label", {
+        key: 0,
+        for: t.value,
+        class: y(e.labelClasses)
+      }, [
+        C(o.$slots, "default")
+      ], 10, g)) : m("", !0)
+    ]));
+  }
+});
+export {
+  v as default
+};

package/dist/types/index.d.ts

@@ -8,3 +8,6 @@ export type { BaseComplexToggleProps, ToggleType, } from '../UIKit/BaseComplexTo
 export type { SnackbarProps } from '../UIKit/BaseSnackbar';
 export type { ChartOptions, ChartData } from 'chart.js';
 export type { BaseAutocompleteThemes } from '../UIKit/BaseAutocomplete';
+export type { RadioButtonGroupProps } from '../UIKit/Radio/v2/RadioButtonGroup';
+export type { RadioButtonItemProps } from '../UIKit/Radio/v2/RadioButtonItem';
+export type { CheckboxButtonGroupProps, CheckboxButtonItem, } from '../UIKit/Checkbox/v2/CheckboxButtonGroup';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "2.2.9-alpha.9",
+  "version": "2.3.1-alpha.0",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",
@@ -17,6 +17,7 @@
       "default": "./dist/index.js"
     },
     "./style": "./dist/assets/tailwind.css",
+    "./css/*": "./dist/assets/*.css",
     "./generic/*": {
       "import": "./dist/components/*.js",
       "types": "./dist/components/*.d.ts"
@@ -43,9 +44,9 @@
   "peerDependencies": {
     "vue": "^3.5.0",
     "date-fns": "^4.0.0",
-    "@wikicasa-dev/svg-icons": "^1.2.24",
-    "@wikicasa-dev/vue-composables": "^0.0.29",
-    "@wikicasa-dev/types": "^2.4.0",
+    "@wikicasa-dev/svg-icons": "^1.2.28-alpha.1",
+    "@wikicasa-dev/vue-composables": "0.0.33-alpha.4",
+    "@wikicasa-dev/types": "^2.5.0",
     "@wikicasa-dev/utilities": "^1.2.0"
   },
   "dependencies": {
@@ -63,10 +64,10 @@
     "@vitejs/plugin-vue": "^6.0.2",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
-    "@wikicasa-dev/svg-icons": "1.2.24",
-    "@wikicasa-dev/vue-composables": "0.0.29",
+    "@wikicasa-dev/svg-icons": "1.3.0",
+    "@wikicasa-dev/vue-composables": "0.1.0",
     "@wikicasa-dev/tailwind-plugins": "^0.0.3",
-    "@wikicasa-dev/types": "2.4.6",
+    "@wikicasa-dev/types": "2.5.0",
     "@wikicasa-dev/utilities": "1.2.0",
     "autoprefixer": "^10.4.22",
     "date-fns": "4.1.0",

package/dist/assets/BaseToggle.css

@@ -1 +0,0 @@
-.switch-container[data-v-1e6f488b]{--switch-width: 40px;--switch-height: 22px;--switch-border-radius: 20px;--switch-circle-dim: 22px;--switch-active-transition-x-offset: 1px;--switch-active-transition-x: translateX( calc( var(--switch-width) - var(--switch-circle-dim) + var(--switch-active-transition-x-offset) ) )}.switch[data-v-1e6f488b]{width:var(--switch-width);height:var(--switch-height)}.switch input:checked+.slider[data-v-1e6f488b]:before{transform:var(--switch-active-transition-x)}.slider.round[data-v-1e6f488b]{border-radius:var(--switch-border-radius)}