@wikicasa-dev/components 2.2.9-alpha.65 → 2.2.9-alpha.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Swiper/autoplay.js +1 -1
- package/dist/Swiper/controller.js +1 -1
- package/dist/Swiper/keyboard.js +1 -1
- package/dist/Swiper/thumbs.js +1 -1
- package/dist/UIKit/AccessibleSelect.d.ts +4 -4
- package/dist/UIKit/AccessibleSelect.js +2 -3
- package/dist/UIKit/Autocomplete/ClearableAutocomplete.d.ts +2 -7
- package/dist/UIKit/BaseAutocomplete.d.ts +4 -4
- package/dist/UIKit/BaseButton.d.ts +8 -14
- package/dist/UIKit/BaseCard.js +3 -1
- package/dist/UIKit/BaseDropDown.d.ts +11 -17
- package/dist/UIKit/BaseFloatingLabel.js +4 -4
- package/dist/UIKit/BaseInput.d.ts +2 -3
- package/dist/UIKit/BaseInput.js +1 -1
- package/dist/UIKit/BaseSnackbar.d.ts +2 -2
- package/dist/UIKit/BaseTextarea.d.ts +2 -2
- package/dist/UIKit/Checkbox/CheckboxBtn.d.ts +7 -14
- package/dist/UIKit/Checkbox/CheckboxGroup.d.ts +2 -5
- package/dist/UIKit/Radio/RadioButton.d.ts +23 -28
- package/dist/UIKit/Radio/RadioGroup.d.ts +50 -49
- package/dist/assets/BaseCard.css +1 -1
- package/dist/assets/BaseDropDown.css +1 -1
- package/dist/assets/BaseFloatingLabel.css +1 -1
- package/dist/assets/BaseInput.css +1 -1
- package/dist/assets/tailwind.css +1 -1
- package/dist/index.d.ts +0 -3
- package/dist/index.js +83 -92
- package/dist/packages/components/lib/UIKit/AccessibleSelect.vue.js +157 -151
- package/dist/packages/components/lib/UIKit/Accordion/BaseAccordionItem.vue.js +6 -4
- package/dist/packages/components/lib/UIKit/Autocomplete/ClearableAutocomplete.vue.js +106 -112
- package/dist/packages/components/lib/UIKit/BaseAutocomplete.vue.js +36 -36
- package/dist/packages/components/lib/UIKit/BaseButton.vue.js +24 -28
- package/dist/packages/components/lib/UIKit/BaseCard.vue.js +13 -13
- package/dist/packages/components/lib/UIKit/BaseDropDown.vue.js +105 -102
- package/dist/packages/components/lib/UIKit/BaseFloatingLabel.vue.js +8 -8
- package/dist/packages/components/lib/UIKit/BaseInput.vue.js +64 -65
- package/dist/packages/components/lib/UIKit/BaseModal.vue.js +36 -42
- package/dist/packages/components/lib/UIKit/BaseSelect/SelectItem.vue.js +17 -18
- package/dist/packages/components/lib/UIKit/Checkbox/CheckboxBtn.vue.js +37 -50
- package/dist/packages/components/lib/UIKit/Checkbox/CheckboxGroup.vue.js +55 -60
- package/dist/packages/components/lib/UIKit/Radio/RadioButton.vue.js +14 -16
- package/dist/packages/components/lib/UIKit/Radio/RadioGroup.vue.js +33 -37
- package/dist/types/index.d.ts +0 -3
- package/package.json +7 -8
- package/dist/UIKit/Checkbox/v2/CheckboxButtonGroup.d.ts +0 -40
- package/dist/UIKit/Checkbox/v2/CheckboxButtonGroup.js +0 -4
- package/dist/UIKit/Radio/v2/RadioButtonGroup.d.ts +0 -29
- package/dist/UIKit/Radio/v2/RadioButtonGroup.js +0 -4
- package/dist/UIKit/Radio/v2/RadioButtonItem.d.ts +0 -16
- package/dist/UIKit/Radio/v2/RadioButtonItem.js +0 -5
- package/dist/assets/AccessibleSelect.css +0 -1
- package/dist/assets/RadioButtonItem.css +0 -1
- package/dist/composables/mock.d.ts +0 -25
- package/dist/composables/mock.js +0 -49
- package/dist/packages/components/lib/UIKit/Checkbox/v2/CheckboxButtonGroup.vue.js +0 -78
- package/dist/packages/components/lib/UIKit/Radio/v2/RadioButtonGroup.vue.js +0 -49
- package/dist/packages/components/lib/UIKit/Radio/v2/RadioButtonItem.vue.js +0 -45
- /package/dist/assets/{swiper-controller.css → swiper-keyboard.css} +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineComponent as I, ref as n, useTemplateRef as T, onUnmounted as z, watch as H, createBlock as O, openBlock as
|
|
2
|
-
import { isWindows as
|
|
1
|
+
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";
|
|
2
|
+
import { isWindows as C, awaitableSetTimeout as S } from "@wikicasa-dev/utilities";
|
|
3
3
|
import { CloseIcon as V } from "@wikicasa-dev/svg-icons";
|
|
4
|
-
const
|
|
4
|
+
const F = ["id", "data-cy"], U = ["innerHTML"], R = /* @__PURE__ */ I({
|
|
5
5
|
__name: "BaseModal",
|
|
6
6
|
props: {
|
|
7
7
|
id: { default: "base-bt-modal" },
|
|
@@ -24,25 +24,25 @@ const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
|
|
|
24
24
|
titleClasses: {}
|
|
25
25
|
},
|
|
26
26
|
emits: ["closed", "opened", "dialogClick"],
|
|
27
|
-
setup(e, { emit:
|
|
28
|
-
const c =
|
|
27
|
+
setup(e, { emit: g }) {
|
|
28
|
+
const c = g, i = n(!1), m = n(null), a = T("modalDialog"), k = n(!1), u = n(!1), f = ({ key: t }) => {
|
|
29
29
|
t === "Escape" && o();
|
|
30
|
-
},
|
|
30
|
+
}, x = () => {
|
|
31
31
|
document?.body.addEventListener("keydown", f);
|
|
32
32
|
}, b = () => {
|
|
33
33
|
document?.body.removeEventListener("keydown", f);
|
|
34
|
-
},
|
|
34
|
+
}, p = async () => {
|
|
35
35
|
i.value = !0, N(() => {
|
|
36
|
-
|
|
36
|
+
x(), C() ? document?.body.classList.add("uikit-no-scrolling", "sm:uikit-pr-15px") : document?.body.classList.add("uikit-no-scrolling");
|
|
37
37
|
}), c("opened"), e.autoClose !== void 0 && setTimeout(() => {
|
|
38
38
|
o();
|
|
39
39
|
}, e.autoClose);
|
|
40
|
-
}, p = (t) => {
|
|
41
|
-
l.value && l.value.contains(t.target) && (u.value = !0);
|
|
42
40
|
}, M = (t) => {
|
|
43
|
-
|
|
44
|
-
}, B =
|
|
45
|
-
|
|
41
|
+
a.value && a.value.contains(t.target) && (u.value = !0);
|
|
42
|
+
}, B = (t) => {
|
|
43
|
+
a.value && a.value.contains(t.target) && (u.value = !1);
|
|
44
|
+
}, L = async () => {
|
|
45
|
+
if (e.closeOnClickOut) {
|
|
46
46
|
if (u.value) {
|
|
47
47
|
u.value = !1;
|
|
48
48
|
return;
|
|
@@ -51,25 +51,21 @@ const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
|
|
|
51
51
|
}
|
|
52
52
|
}, o = async () => {
|
|
53
53
|
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(() => {
|
|
54
|
-
|
|
54
|
+
m.value?.classList.add("uikit-hidden"), c("closed");
|
|
55
55
|
}, 250);
|
|
56
56
|
};
|
|
57
|
-
z(() => {
|
|
58
|
-
b(), document?.documentElement.classList.remove("uikit-no-scrolling"),
|
|
57
|
+
return z(() => {
|
|
58
|
+
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");
|
|
59
59
|
}), H(
|
|
60
60
|
() => e.showModal,
|
|
61
61
|
async (t) => {
|
|
62
|
-
!t && !i.value ? k.value = !0 : k.value = !1, t && !i.value && await
|
|
62
|
+
!t && !i.value ? k.value = !0 : k.value = !1, t && !i.value && await p(), !t && i.value && await o(), i.value = t;
|
|
63
63
|
},
|
|
64
64
|
{ immediate: !0 }
|
|
65
|
-
)
|
|
66
|
-
|
|
67
|
-
l.value === t.target && t.stopPropagation();
|
|
68
|
-
};
|
|
69
|
-
return (t, v) => (m(), O($, { to: "body" }, [
|
|
70
|
-
a("div", {
|
|
65
|
+
), (t, v) => (r(), O($, { to: "body" }, [
|
|
66
|
+
l("div", {
|
|
71
67
|
ref_key: "backdropEl",
|
|
72
|
-
ref:
|
|
68
|
+
ref: m,
|
|
73
69
|
class: s(["bbt-backdrop uikit-fixed uikit-left-0 uikit-top-0 uikit-h-full uikit-w-full", [
|
|
74
70
|
e.customBackdropClasses,
|
|
75
71
|
{
|
|
@@ -80,11 +76,11 @@ const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
|
|
|
80
76
|
{ hide: k.value }
|
|
81
77
|
]]),
|
|
82
78
|
style: { "z-index": "1062" },
|
|
83
|
-
onClick:
|
|
84
|
-
onMousedown:
|
|
85
|
-
onMouseup:
|
|
79
|
+
onClick: L,
|
|
80
|
+
onMousedown: M,
|
|
81
|
+
onMouseup: B
|
|
86
82
|
}, [
|
|
87
|
-
|
|
83
|
+
l("dialog", {
|
|
88
84
|
id: e.id,
|
|
89
85
|
ref: "modalDialog",
|
|
90
86
|
"data-cy": e.dataCy,
|
|
@@ -98,52 +94,50 @@ const P = ["id", "data-cy"], U = ["innerHTML"], j = /* @__PURE__ */ I({
|
|
|
98
94
|
`base-${e.size}`,
|
|
99
95
|
e.fullHeight ? "uikit-h-[95%]" : "uikit-h-auto"
|
|
100
96
|
]]),
|
|
101
|
-
|
|
102
|
-
onClick: v[0] || (v[0] = (E) => c("dialogClick", E)),
|
|
103
|
-
onFocusin: L
|
|
97
|
+
onClick: v[0] || (v[0] = y((E) => c("dialogClick", E), ["stop"]))
|
|
104
98
|
}, [
|
|
105
|
-
|
|
99
|
+
l("div", {
|
|
106
100
|
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]])
|
|
107
101
|
}, [
|
|
108
|
-
e.withCloseIcon ? (
|
|
102
|
+
e.withCloseIcon ? (r(), h("button", {
|
|
109
103
|
key: 0,
|
|
110
104
|
id: "close-icon-btn",
|
|
111
105
|
"data-cy": "bbt-default-close-icon-btn",
|
|
112
106
|
class: s(["uikit-absolute uikit-right-15px uikit-top-15px uikit-z-10 uikit-bg-transparent uikit-p-5px", e.closeIconBtnClasses]),
|
|
113
107
|
type: "button",
|
|
114
108
|
"aria-label": "Close",
|
|
115
|
-
onClick:
|
|
109
|
+
onClick: y(o, ["prevent", "stop"])
|
|
116
110
|
}, [
|
|
117
|
-
|
|
111
|
+
D(K(V), {
|
|
118
112
|
class: s(["bbt-close-icon uikit-box-border", e.closeIcon?.classes]),
|
|
119
113
|
width: e.closeIcon?.size || 20,
|
|
120
114
|
height: e.closeIcon?.size || 20
|
|
121
115
|
}, null, 8, ["class", "width", "height"])
|
|
122
|
-
], 2)) :
|
|
116
|
+
], 2)) : w("", !0),
|
|
123
117
|
d(t.$slots, "header", { closeModal: o }, () => [
|
|
124
|
-
|
|
118
|
+
l("span", {
|
|
125
119
|
class: s(["uikit-w-auto uikit-text-18 uikit-font-semibold sm:uikit-text-22", e.titleClasses]),
|
|
126
120
|
innerHTML: e.headerTitle
|
|
127
121
|
}, null, 10, U)
|
|
128
122
|
])
|
|
129
123
|
], 2),
|
|
130
|
-
|
|
124
|
+
l("div", {
|
|
131
125
|
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]])
|
|
132
126
|
}, [
|
|
133
127
|
d(t.$slots, "body", { closeModal: o })
|
|
134
128
|
], 2),
|
|
135
|
-
t.$slots.footer ? (
|
|
129
|
+
t.$slots.footer ? (r(), h("div", {
|
|
136
130
|
key: 0,
|
|
137
131
|
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])
|
|
138
132
|
}, [
|
|
139
133
|
d(t.$slots, "footer", { closeModal: o })
|
|
140
|
-
], 2)) :
|
|
134
|
+
], 2)) : w("", !0),
|
|
141
135
|
d(t.$slots, "fixed-bottom")
|
|
142
|
-
],
|
|
136
|
+
], 10, F)
|
|
143
137
|
], 34)
|
|
144
138
|
]));
|
|
145
139
|
}
|
|
146
140
|
});
|
|
147
141
|
export {
|
|
148
|
-
|
|
142
|
+
R as default
|
|
149
143
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { defineComponent as u, useTemplateRef as
|
|
2
|
-
const
|
|
1
|
+
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";
|
|
2
|
+
const p = ["tabindex"], b = ["innerHTML"], $ = /* @__PURE__ */ u({
|
|
3
3
|
__name: "SelectItem",
|
|
4
4
|
props: {
|
|
5
5
|
label: { default: "" },
|
|
@@ -7,34 +7,33 @@ const b = ["data-active", "tabindex"], p = ["innerHTML"], $ = /* @__PURE__ */ u(
|
|
|
7
7
|
idx: { default: -1 }
|
|
8
8
|
},
|
|
9
9
|
emits: ["click", "mouseover"],
|
|
10
|
-
setup(
|
|
11
|
-
const
|
|
12
|
-
return
|
|
13
|
-
() =>
|
|
10
|
+
setup(l, { emit: a }) {
|
|
11
|
+
const n = a, t = l, o = r("liItem");
|
|
12
|
+
return m(
|
|
13
|
+
() => t.active,
|
|
14
14
|
(e) => {
|
|
15
|
-
e &&
|
|
16
|
-
|
|
15
|
+
e && c(() => {
|
|
16
|
+
o.value && o.value.focus();
|
|
17
17
|
});
|
|
18
18
|
},
|
|
19
19
|
{ immediate: !0 }
|
|
20
|
-
), (e,
|
|
20
|
+
), (e, i) => (f(), d("li", {
|
|
21
21
|
ref: "liItem",
|
|
22
|
-
class:
|
|
23
|
-
{ "active uikit-bg-w-cultured":
|
|
22
|
+
class: k(["uikit-list-none uikit-text-w-black", [
|
|
23
|
+
{ "active uikit-bg-w-cultured": l.active },
|
|
24
24
|
"uikit-outline-none",
|
|
25
25
|
e.$attrs.class
|
|
26
26
|
]]),
|
|
27
|
-
"data-active": t.active,
|
|
28
27
|
tabindex: e.$attrs.tabindex ?? -1,
|
|
29
|
-
onClick:
|
|
30
|
-
onMouseover:
|
|
28
|
+
onClick: i[0] || (i[0] = (s) => n("click", t.idx)),
|
|
29
|
+
onMouseover: i[1] || (i[1] = (s) => n("mouseover", t.idx))
|
|
31
30
|
}, [
|
|
32
|
-
|
|
31
|
+
v(e.$slots, "default", { itemIdx: l.idx }, () => [
|
|
33
32
|
x("span", {
|
|
34
|
-
innerHTML:
|
|
35
|
-
}, null, 8,
|
|
33
|
+
innerHTML: t.label
|
|
34
|
+
}, null, 8, b)
|
|
36
35
|
])
|
|
37
|
-
], 42,
|
|
36
|
+
], 42, p));
|
|
38
37
|
}
|
|
39
38
|
});
|
|
40
39
|
export {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { CheckIcon as
|
|
3
|
-
import { CheckboxRoot as
|
|
4
|
-
const
|
|
1
|
+
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";
|
|
2
|
+
import { CheckIcon as p } from "@wikicasa-dev/svg-icons";
|
|
3
|
+
import { CheckboxRoot as I, CheckboxIndicator as v } from "reka-ui";
|
|
4
|
+
const N = ["for"], j = /* @__PURE__ */ m({
|
|
5
5
|
__name: "CheckboxBtn",
|
|
6
|
-
props:
|
|
6
|
+
props: {
|
|
7
7
|
id: {},
|
|
8
8
|
dataCy: {},
|
|
9
9
|
disabled: { type: Boolean },
|
|
@@ -12,77 +12,64 @@ const F = /* @__PURE__ */ y({
|
|
|
12
12
|
required: { type: Boolean },
|
|
13
13
|
inputClass: {},
|
|
14
14
|
label: { default: "" },
|
|
15
|
-
|
|
16
|
-
},
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
setup(e, { expose: m, emit: f }) {
|
|
22
|
-
const h = p(), o = c("root"), b = c("checkboxRoot"), l = B(e, "modelValue"), i = f;
|
|
23
|
-
I(
|
|
15
|
+
modelValue: { type: Boolean, default: !1 }
|
|
16
|
+
},
|
|
17
|
+
emits: ["click", "update:modelValue", "change"],
|
|
18
|
+
setup(e, { emit: r }) {
|
|
19
|
+
const l = f(), d = h(() => `${e.id ?? l}`), a = r;
|
|
20
|
+
b(
|
|
24
21
|
() => e.checked,
|
|
25
22
|
(t) => {
|
|
26
|
-
t !== void 0 && (
|
|
23
|
+
t !== void 0 && a("update:modelValue", t);
|
|
27
24
|
}
|
|
28
25
|
);
|
|
29
|
-
const
|
|
30
|
-
t !== "indeterminate" && (
|
|
31
|
-
id: e.id ??
|
|
26
|
+
const k = (t) => {
|
|
27
|
+
t !== "indeterminate" && (a("change", {
|
|
28
|
+
id: e.id ?? l,
|
|
32
29
|
label: e.label,
|
|
33
30
|
checked: t
|
|
34
|
-
}),
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
void 0
|
|
38
|
-
);
|
|
39
|
-
return V(() => {
|
|
40
|
-
x?.(e.value, o.value);
|
|
41
|
-
}), R(() => {
|
|
42
|
-
C?.(e.value);
|
|
43
|
-
}), m({
|
|
44
|
-
getRootElement: () => o.value,
|
|
45
|
-
getCheckboxElement: () => b.value?.$el
|
|
46
|
-
}), (t, d) => (r(), w("label", {
|
|
47
|
-
ref: "root",
|
|
31
|
+
}), a("update:modelValue", t));
|
|
32
|
+
};
|
|
33
|
+
return (t, o) => (u(), C("label", {
|
|
48
34
|
class: "uikit-checkbox-btn uikit-flex uikit-items-center uikit-gap-[12px]",
|
|
49
|
-
|
|
35
|
+
for: d.value,
|
|
36
|
+
onClick: o[0] || (o[0] = (s) => a("click", s))
|
|
50
37
|
}, [
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
"model-value":
|
|
38
|
+
c(i(I), {
|
|
39
|
+
id: d.value,
|
|
40
|
+
"model-value": e.modelValue,
|
|
54
41
|
"data-cy": e.dataCy,
|
|
55
42
|
disabled: e.disabled,
|
|
56
|
-
class:
|
|
43
|
+
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", [
|
|
57
44
|
{
|
|
58
|
-
"uikit-bg-white": !
|
|
59
|
-
"uikit-bg-w-primary":
|
|
45
|
+
"uikit-bg-white": !e.modelValue,
|
|
46
|
+
"uikit-bg-w-primary": e.modelValue
|
|
60
47
|
},
|
|
61
48
|
e.inputClass
|
|
62
49
|
]]),
|
|
63
|
-
"onUpdate:modelValue":
|
|
50
|
+
"onUpdate:modelValue": k
|
|
64
51
|
}, {
|
|
65
|
-
default:
|
|
66
|
-
|
|
67
|
-
default:
|
|
68
|
-
|
|
52
|
+
default: n(() => [
|
|
53
|
+
c(i(v), { class: "uikit-flex" }, {
|
|
54
|
+
default: n(() => [
|
|
55
|
+
e.modelValue === !0 ? (u(), V(i(p), {
|
|
69
56
|
key: 0,
|
|
70
57
|
"fill-color": "#fff",
|
|
71
58
|
width: 12,
|
|
72
59
|
height: 14
|
|
73
|
-
})) :
|
|
60
|
+
})) : g("", !0)
|
|
74
61
|
]),
|
|
75
62
|
_: 1
|
|
76
63
|
})
|
|
77
64
|
]),
|
|
78
65
|
_: 1
|
|
79
|
-
}, 8, ["model-value", "data-cy", "disabled", "class"]),
|
|
80
|
-
|
|
81
|
-
|
|
66
|
+
}, 8, ["id", "model-value", "data-cy", "disabled", "class"]),
|
|
67
|
+
x(t.$slots, "label", {}, () => [
|
|
68
|
+
B(w(e.label), 1)
|
|
82
69
|
])
|
|
83
|
-
],
|
|
70
|
+
], 8, N));
|
|
84
71
|
}
|
|
85
72
|
});
|
|
86
73
|
export {
|
|
87
|
-
|
|
74
|
+
j as default
|
|
88
75
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { stringToHyphened as
|
|
3
|
-
import
|
|
1
|
+
import { defineComponent as v, ref as D, computed as h, watch as E, renderSlot as b, createElementVNode as $, normalizeClass as g, createElementBlock as B, createCommentVNode as A, openBlock as C, Fragment as I, renderList as R, createBlock as K, unref as V } from "vue";
|
|
2
|
+
import { stringToHyphened as L, isArrNullOrEmpty as G } from "@wikicasa-dev/utilities";
|
|
3
|
+
import N from "./CheckboxBtn.vue.js";
|
|
4
4
|
import '../../../../../assets/CheckboxBtn.css';/* empty css */
|
|
5
|
-
const
|
|
5
|
+
const T = ["id", "data-cy"], j = /* @__PURE__ */ v({
|
|
6
6
|
inheritAttrs: !1,
|
|
7
7
|
__name: "CheckboxGroup",
|
|
8
|
-
props:
|
|
8
|
+
props: {
|
|
9
9
|
checkboxData: { default() {
|
|
10
10
|
return [];
|
|
11
11
|
} },
|
|
@@ -18,100 +18,95 @@ const O = ["id", "data-cy"], q = /* @__PURE__ */ B({
|
|
|
18
18
|
getKey: { type: Function, default: (a) => typeof a == "string" || typeof a == "number" ? `${a}` : `${a.id}` },
|
|
19
19
|
groupId: { default: "" },
|
|
20
20
|
dataCy: { default: "" }
|
|
21
|
-
},
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
emits: /* @__PURE__ */ y(["resetted", "update:modelValue", "checkedGroup"], ["update:refresh"]),
|
|
26
|
-
setup(a, { emit: D }) {
|
|
27
|
-
const o = a, s = D, f = A(a, "refresh"), l = I(
|
|
21
|
+
},
|
|
22
|
+
emits: ["resetted", "update:modelValue", "checkedGroup"],
|
|
23
|
+
setup(a, { emit: y }) {
|
|
24
|
+
const o = a, s = y, l = D(
|
|
28
25
|
/* @__PURE__ */ new Map()
|
|
29
|
-
), r =
|
|
26
|
+
), r = h(() => {
|
|
30
27
|
for (const e of o.checkboxData)
|
|
31
28
|
if (e.reset) return e;
|
|
32
29
|
return null;
|
|
33
|
-
}),
|
|
30
|
+
}), x = h(() => o.checkboxData.length), f = h(() => {
|
|
34
31
|
let e = 0;
|
|
35
|
-
return l.value.forEach((
|
|
36
|
-
|
|
32
|
+
return l.value.forEach((t) => {
|
|
33
|
+
t.checked && e++;
|
|
37
34
|
}), e;
|
|
38
|
-
})
|
|
39
|
-
|
|
35
|
+
});
|
|
36
|
+
(() => {
|
|
37
|
+
const e = [];
|
|
40
38
|
for (const t of o.checkboxData)
|
|
41
|
-
|
|
39
|
+
l.value.set(`${t.id}`, {
|
|
42
40
|
...t,
|
|
43
41
|
checked: !!t.checked
|
|
44
42
|
}), t.checked && e.push(t);
|
|
45
|
-
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
l.value.set(e, { ...t, ...c });
|
|
43
|
+
s("update:modelValue", e);
|
|
44
|
+
})();
|
|
45
|
+
const u = (e, t) => {
|
|
46
|
+
const c = l.value.get(e);
|
|
47
|
+
if (c) {
|
|
48
|
+
if (t) {
|
|
49
|
+
l.value.set(e, { ...c, ...t });
|
|
53
50
|
return;
|
|
54
51
|
}
|
|
55
|
-
l.value.set(e, { ...
|
|
52
|
+
l.value.set(e, { ...c, checked: !c.checked });
|
|
56
53
|
}
|
|
57
|
-
},
|
|
54
|
+
}, k = () => {
|
|
58
55
|
l.value.forEach((e) => {
|
|
59
56
|
e.checked = !1;
|
|
60
57
|
});
|
|
61
|
-
},
|
|
62
|
-
|
|
63
|
-
}, d = (e) => l.value.get(o.getKey(e))?.checked ?? !1,
|
|
64
|
-
if (
|
|
65
|
-
const
|
|
66
|
-
|
|
58
|
+
}, m = () => {
|
|
59
|
+
k(), s("update:modelValue", []), s("resetted");
|
|
60
|
+
}, d = (e) => l.value.get(o.getKey(e))?.checked ?? !1, i = (e) => {
|
|
61
|
+
if (G(o.checkboxData)) return;
|
|
62
|
+
const t = l.value.get(e.id);
|
|
63
|
+
t?.reset && e.checked ? k() : r.value && !t?.reset && u(o.getKey(r.value), { checked: !1 }), u(`${e.id}`), o.autoCheckResetAll && r.value && f.value === x.value - 1 && l.value.forEach((n) => {
|
|
67
64
|
n.checked = !!n.reset;
|
|
68
|
-
}), o.autoCheckResetEmpty && r.value && !
|
|
69
|
-
const
|
|
65
|
+
}), o.autoCheckResetEmpty && r.value && !f.value && (!o.manualToggleResetButton || !t?.reset) && u(o.getKey(r.value), { checked: !0 });
|
|
66
|
+
const c = [];
|
|
70
67
|
l.value.forEach((n) => {
|
|
71
|
-
n.checked &&
|
|
72
|
-
}), s("update:modelValue",
|
|
68
|
+
n.checked && c.push(n);
|
|
69
|
+
}), s("update:modelValue", c), s("checkedGroup", o.groupId);
|
|
73
70
|
};
|
|
74
|
-
return
|
|
71
|
+
return E(
|
|
75
72
|
() => o.reset,
|
|
76
73
|
(e) => {
|
|
77
|
-
e &&
|
|
74
|
+
e && m();
|
|
78
75
|
}
|
|
79
|
-
),
|
|
80
|
-
e && (m(), f.value = !1);
|
|
81
|
-
}), (e, c) => p(e.$slots, "default", {
|
|
76
|
+
), (e, t) => b(e.$slots, "default", {
|
|
82
77
|
isActive: d,
|
|
83
|
-
handleChange:
|
|
78
|
+
handleChange: i,
|
|
84
79
|
checkboxesData: a.checkboxData
|
|
85
80
|
}, () => [
|
|
86
|
-
|
|
81
|
+
$("div", {
|
|
87
82
|
id: a.groupId,
|
|
88
|
-
class:
|
|
83
|
+
class: g(["checkbox-group-container", e.$attrs.class || ""]),
|
|
89
84
|
"data-cy": a.dataCy
|
|
90
85
|
}, [
|
|
91
|
-
|
|
86
|
+
b(e.$slots, "checkbox_elements", {
|
|
92
87
|
isActive: d,
|
|
93
|
-
handleChange:
|
|
88
|
+
handleChange: i,
|
|
94
89
|
checkboxesData: a.checkboxData,
|
|
95
|
-
reset:
|
|
90
|
+
reset: m
|
|
96
91
|
}, () => [
|
|
97
|
-
a.checkboxData ? (
|
|
98
|
-
id: a.getKey(
|
|
92
|
+
a.checkboxData ? (C(!0), B(I, { key: 0 }, R(a.checkboxData, (c, n) => (C(), K(N, {
|
|
93
|
+
id: a.getKey(c),
|
|
99
94
|
key: n,
|
|
100
|
-
"data-cy":
|
|
101
|
-
label:
|
|
95
|
+
"data-cy": c.dataCy ?? `checkbox_${V(L)(`${c.label}`)}`,
|
|
96
|
+
label: c.label,
|
|
102
97
|
inline: a.formCheckInline,
|
|
103
|
-
"model-value": d(
|
|
104
|
-
class:
|
|
98
|
+
"model-value": d(c),
|
|
99
|
+
class: g([
|
|
105
100
|
a.formCheckInline ? "uikit-mr-10px" : "uikit-mb-10px",
|
|
106
101
|
a.checkboxContainerClasses
|
|
107
102
|
]),
|
|
108
|
-
onChange:
|
|
109
|
-
}, null, 8, ["id", "data-cy", "label", "inline", "model-value", "class"]))), 128)) :
|
|
103
|
+
onChange: t[0] || (t[0] = (p) => i(p))
|
|
104
|
+
}, null, 8, ["id", "data-cy", "label", "inline", "model-value", "class"]))), 128)) : A("", !0)
|
|
110
105
|
])
|
|
111
|
-
], 10,
|
|
106
|
+
], 10, T)
|
|
112
107
|
]);
|
|
113
108
|
}
|
|
114
109
|
});
|
|
115
110
|
export {
|
|
116
|
-
|
|
111
|
+
j as default
|
|
117
112
|
};
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const
|
|
1
|
+
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";
|
|
2
|
+
const V = ["id", "name", "checked"], x = ["for"], y = /* @__PURE__ */ k({
|
|
3
3
|
__name: "RadioButton",
|
|
4
4
|
props: {
|
|
5
5
|
id: {},
|
|
6
|
-
dataCy: {},
|
|
7
6
|
name: {},
|
|
8
7
|
label: {},
|
|
9
8
|
modelValue: { type: Boolean, default: !1 },
|
|
@@ -12,21 +11,20 @@ const y = ["data-cy"], V = ["id", "name", "checked"], x = ["for"], g = /* @__PUR
|
|
|
12
11
|
},
|
|
13
12
|
emits: ["change", "update:modelValue"],
|
|
14
13
|
setup(e, { emit: s }) {
|
|
15
|
-
const
|
|
14
|
+
const n = s, a = c(), o = m(() => `${e.id ?? a}`), r = () => {
|
|
16
15
|
if (e.modelValue) return;
|
|
17
|
-
const
|
|
18
|
-
id: e.id ??
|
|
16
|
+
const u = {
|
|
17
|
+
id: e.id ?? a,
|
|
19
18
|
label: e.label,
|
|
20
19
|
name: e.name
|
|
21
20
|
};
|
|
22
|
-
|
|
21
|
+
n("change", u), n("update:modelValue", !e.modelValue);
|
|
23
22
|
};
|
|
24
|
-
return (
|
|
23
|
+
return (u, i) => (b(), f("div", {
|
|
25
24
|
class: "uikit-inline-block",
|
|
26
|
-
"data-cy": e.dataCy,
|
|
27
25
|
onClick: t(r, ["stop"])
|
|
28
26
|
}, [
|
|
29
|
-
|
|
27
|
+
l("input", {
|
|
30
28
|
id: o.value,
|
|
31
29
|
ref: "checkbox",
|
|
32
30
|
type: "radio",
|
|
@@ -38,12 +36,12 @@ const y = ["data-cy"], V = ["id", "name", "checked"], x = ["for"], g = /* @__PUR
|
|
|
38
36
|
onClick: i[1] || (i[1] = t(() => {
|
|
39
37
|
}, ["prevent"]))
|
|
40
38
|
}, null, 40, V),
|
|
41
|
-
|
|
42
|
-
class:
|
|
39
|
+
l("label", {
|
|
40
|
+
class: d([e.labelClasses, "uikit-flex uikit-cursor-pointer uikit-items-center uikit-text-sm"]),
|
|
43
41
|
for: o.value
|
|
44
42
|
}, [
|
|
45
|
-
|
|
46
|
-
class:
|
|
43
|
+
l("span", {
|
|
44
|
+
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", [
|
|
47
45
|
{
|
|
48
46
|
"checked uikit-border-w-primary uikit-bg-w-primary uikit-shadow-[0_0_0_2px_white_inset]": e.modelValue
|
|
49
47
|
},
|
|
@@ -52,9 +50,9 @@ const y = ["data-cy"], V = ["id", "name", "checked"], x = ["for"], g = /* @__PUR
|
|
|
52
50
|
}, null, 2),
|
|
53
51
|
h(" " + C(e.label), 1)
|
|
54
52
|
], 10, x)
|
|
55
|
-
]
|
|
53
|
+
]));
|
|
56
54
|
}
|
|
57
55
|
});
|
|
58
56
|
export {
|
|
59
|
-
|
|
57
|
+
y as default
|
|
60
58
|
};
|