@wikicasa-dev/components 1.2.47 → 1.2.49
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/AccessibleSelect.js +1 -1
- package/dist/BaseAutocomplete.js +1 -1
- package/dist/BaseDropDown.js +1 -1
- package/dist/CheckboxGroup.js +1 -1
- package/dist/UIKit/BaseDropDown.vue.d.ts +1 -0
- package/dist/UIKit/Checkbox/CheckboxGroup.vue.d.ts +2 -1
- package/dist/chunks/AccessibleSelect.vue_vue_type_script_setup_true_lang.lyHlWiC5.js +239 -0
- package/dist/chunks/{BaseAutocomplete.vue_vue_type_script_setup_true_lang.DkNApxB4.js → BaseAutocomplete.vue_vue_type_script_setup_true_lang.Ct4_y9HP.js} +1 -1
- package/dist/chunks/{BaseDropDown.vue_vue_type_script_setup_true_lang.D9uxpIpT.js → BaseDropDown.vue_vue_type_script_setup_true_lang.C4VH7V0e.js} +18 -15
- package/dist/chunks/{CheckboxGroup.vue_vue_type_script_setup_true_lang.C5jcwwv6.js → CheckboxGroup.vue_vue_type_script_setup_true_lang.Kpz4rw2R.js} +15 -14
- package/dist/index.js +4 -4
- package/package.json +2 -1
- package/dist/chunks/AccessibleSelect.vue_vue_type_script_setup_true_lang.CJSkDBar.js +0 -204
package/dist/AccessibleSelect.js
CHANGED
package/dist/BaseAutocomplete.js
CHANGED
package/dist/BaseDropDown.js
CHANGED
package/dist/CheckboxGroup.js
CHANGED
|
@@ -48,9 +48,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
48
48
|
autoCheckResetEmpty: boolean;
|
|
49
49
|
getKey: GetterIdType;
|
|
50
50
|
}, {}>, {
|
|
51
|
-
|
|
51
|
+
default?(_: {
|
|
52
52
|
isActive: (elem: CheckboxButtonType) => boolean;
|
|
53
53
|
handleChange: (checkboxValue: CheckboxButtonType) => void;
|
|
54
|
+
checkboxesData: Record<string, CheckboxButtonType>;
|
|
54
55
|
}): any;
|
|
55
56
|
}>;
|
|
56
57
|
export default _default;
|
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
import { h as V, ref as L, onMounted as E, onUnmounted as T, unref as v, defineComponent as C, computed as F, watch as A, openBlock as u, createElementBlock as d, Fragment as H, createElementVNode as l, normalizeClass as n, createCommentVNode as m, renderSlot as B, withModifiers as w, createBlock as D, createVNode as P, renderList as q } from "vue";
|
|
2
|
+
import { d as z } from "./ArrowIcon.CklBXJPN.js";
|
|
3
|
+
import { o as N } from "./DefaultValues-k7iQWtC2.CPFgoBrE.js";
|
|
4
|
+
const S = (o, { attrs: s }) => {
|
|
5
|
+
o = { ...N(), ...o };
|
|
6
|
+
const { width: a, height: i } = o;
|
|
7
|
+
return V(
|
|
8
|
+
"svg",
|
|
9
|
+
{
|
|
10
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
11
|
+
viewBox: "0 0 11.175 13.409",
|
|
12
|
+
width: `${a}`,
|
|
13
|
+
height: `${i}`,
|
|
14
|
+
class: o.class ?? "",
|
|
15
|
+
"aria-hidden": s["aria-hidden"] ?? "true",
|
|
16
|
+
fill: "none",
|
|
17
|
+
stroke: s["stroke-color"] ?? "#FA4F64"
|
|
18
|
+
},
|
|
19
|
+
[
|
|
20
|
+
V("circle", {
|
|
21
|
+
cx: 6,
|
|
22
|
+
cy: 6,
|
|
23
|
+
r: 4.5
|
|
24
|
+
}),
|
|
25
|
+
V("path", {
|
|
26
|
+
"stroke-linejoin": "round",
|
|
27
|
+
d: "M5.8 3.6h.4L6 6.5z"
|
|
28
|
+
}),
|
|
29
|
+
V("circle", {
|
|
30
|
+
cx: 6,
|
|
31
|
+
cy: 8.2,
|
|
32
|
+
r: 0.6,
|
|
33
|
+
fill: s["stroke-color"] ?? "#FA4F64",
|
|
34
|
+
stroke: "none"
|
|
35
|
+
})
|
|
36
|
+
]
|
|
37
|
+
);
|
|
38
|
+
}, U = (o) => {
|
|
39
|
+
const { isDropdownOpen: s, disableSpaceHandler: a } = o, i = L(-1), f = L(-1), $ = (t) => {
|
|
40
|
+
const k = "ArrowUp", g = "ArrowDown", b = "Enter", h = "Escape", e = " ", p = "PageUp", r = "Home", c = "PageDown", y = "End";
|
|
41
|
+
if (!s.value || ![
|
|
42
|
+
k,
|
|
43
|
+
g,
|
|
44
|
+
b,
|
|
45
|
+
h,
|
|
46
|
+
e,
|
|
47
|
+
p,
|
|
48
|
+
r,
|
|
49
|
+
c,
|
|
50
|
+
y
|
|
51
|
+
].includes(t.key))
|
|
52
|
+
return;
|
|
53
|
+
const M = v(o.optionsLength);
|
|
54
|
+
if (t.key === k)
|
|
55
|
+
i.value = i.value === 0 ? M - 1 : i.value - 1;
|
|
56
|
+
else if (t.key === g)
|
|
57
|
+
i.value = (i.value + 1) % M;
|
|
58
|
+
else if (t.key === b || t.key === e) {
|
|
59
|
+
if (t.key === e && a)
|
|
60
|
+
return;
|
|
61
|
+
f.value = i.value, s.value = !1;
|
|
62
|
+
} else
|
|
63
|
+
t.key === h ? (i.value = f.value, s.value = !1) : t.key === p || t.key === r ? i.value = 0 : (t.key === c || t.key === y) && (i.value = M - 1);
|
|
64
|
+
t.stopPropagation(), t.preventDefault();
|
|
65
|
+
};
|
|
66
|
+
return E(() => {
|
|
67
|
+
document && document.addEventListener("keydown", $);
|
|
68
|
+
}), T(() => {
|
|
69
|
+
document && document.removeEventListener("keydown", $);
|
|
70
|
+
}), {
|
|
71
|
+
activeIdx: i,
|
|
72
|
+
selectedIdx: f
|
|
73
|
+
};
|
|
74
|
+
}, j = ["id", "innerHTML"], I = ["id", "data-cy", "aria-required", "aria-controls", "aria-labelledby", "aria-expanded", "aria-activedescendant", "aria-invalid", "aria-describedby"], O = ["innerHTML"], Y = { class: "uikit-inline-flex" }, G = ["innerHTML"], J = ["data-cy"], K = ["id", "aria-selected", "onClick", "onMouseover"], Q = { class: "uikit-inline-block uikit-cursor-pointer uikit-text-sm" }, R = ["name", "checked", "onInput"], W = ["innerHTML"], X = ["id", "arial-live", "innerHTML"], Z = ["id", "arial-live", "innerHTML"], ie = /* @__PURE__ */ C({
|
|
75
|
+
inheritAttrs: !1,
|
|
76
|
+
__name: "AccessibleSelect",
|
|
77
|
+
props: {
|
|
78
|
+
label: { default: "" },
|
|
79
|
+
dropdownPosition: { default: "bottom" },
|
|
80
|
+
namespace: {},
|
|
81
|
+
options: {},
|
|
82
|
+
modelValue: { default: () => ({
|
|
83
|
+
id: "",
|
|
84
|
+
label: ""
|
|
85
|
+
}) },
|
|
86
|
+
isValid: { type: [Boolean, null], default: null },
|
|
87
|
+
feedback: {}
|
|
88
|
+
},
|
|
89
|
+
emits: ["update:modelValue"],
|
|
90
|
+
setup(o, { emit: s }) {
|
|
91
|
+
const a = o, i = L(!1), f = L(null), $ = F(() => !!a.modelValue.label), t = s, { activeIdx: k, selectedIdx: g } = U({
|
|
92
|
+
optionsLength: a.options.length,
|
|
93
|
+
isDropdownOpen: i
|
|
94
|
+
}), b = (e) => {
|
|
95
|
+
i.value = !1, t("update:modelValue", e);
|
|
96
|
+
};
|
|
97
|
+
A(g, (e) => {
|
|
98
|
+
b(a.options[e]), i.value = !1;
|
|
99
|
+
});
|
|
100
|
+
const h = () => {
|
|
101
|
+
i.value = !1;
|
|
102
|
+
};
|
|
103
|
+
return E(() => {
|
|
104
|
+
document && document.addEventListener("click", h);
|
|
105
|
+
}), T(() => {
|
|
106
|
+
document && document.removeEventListener("click", h);
|
|
107
|
+
}), (e, p) => (u(), d(H, null, [
|
|
108
|
+
l("div", {
|
|
109
|
+
class: n(["uikit-relative uikit-flex uikit-items-center", [e.label ? "uikit-h-[52px]" : "uikit-h-[42px]", e.$attrs.class]])
|
|
110
|
+
}, [
|
|
111
|
+
e.label ? (u(), d("label", {
|
|
112
|
+
key: 0,
|
|
113
|
+
id: `${e.namespace}_label`,
|
|
114
|
+
class: n(["uikit-absolute uikit-text-sm uikit-font-medium uikit-transition-all uikit-ease-in-out", [
|
|
115
|
+
$.value ? "as-floating -uikit-top-1 uikit-left-[22px] uikit-text-w-black" : "as-inline uikit-left-4 uikit-top-4 uikit-text-w-gray",
|
|
116
|
+
e.$attrs["label-classes"]
|
|
117
|
+
]]),
|
|
118
|
+
innerHTML: e.label
|
|
119
|
+
}, null, 10, j)) : m("", !0),
|
|
120
|
+
B(e.$slots, "lefticon"),
|
|
121
|
+
l("button", {
|
|
122
|
+
id: `${e.namespace}_btn`,
|
|
123
|
+
ref_key: "btnEl",
|
|
124
|
+
ref: f,
|
|
125
|
+
type: "button",
|
|
126
|
+
"data-cy": e.$attrs["data-cy"],
|
|
127
|
+
class: n(["uikit-peer uikit-flex uikit-h-full uikit-w-full uikit-items-center uikit-justify-between uikit-truncate uikit-border-0 uikit-bg-white uikit-px-4 uikit-text-left focus-visible:uikit-outline-0", e.$attrs["btn-classes"]]),
|
|
128
|
+
"aria-required": !!e.$attrs.required,
|
|
129
|
+
role: "combobox",
|
|
130
|
+
"aria-haspopup": "listbox",
|
|
131
|
+
"aria-controls": `${e.namespace}_dropdown`,
|
|
132
|
+
"aria-labelledby": `${e.namespace}_label ${e.namespace}_btn`,
|
|
133
|
+
"aria-expanded": i.value,
|
|
134
|
+
"aria-activedescendant": v(k) >= 0 && i.value ? `${e.namespace}_element_${e.options[v(k)].label}` : "",
|
|
135
|
+
"aria-invalid": a.isValid === !1,
|
|
136
|
+
"aria-describedby": a.isValid === !1 ? `${e.namespace}_invalid_msg` : void 0,
|
|
137
|
+
onClick: p[0] || (p[0] = w((r) => i.value = !i.value, ["stop"]))
|
|
138
|
+
}, [
|
|
139
|
+
l("span", {
|
|
140
|
+
class: n(e.$attrs["btn-text-classes"]),
|
|
141
|
+
innerHTML: e.modelValue.visibleLabel || e.modelValue.label
|
|
142
|
+
}, null, 10, O),
|
|
143
|
+
l("span", Y, [
|
|
144
|
+
a.isValid == !1 ? (u(), D(v(S), {
|
|
145
|
+
key: 0,
|
|
146
|
+
class: "uikit-mr-1",
|
|
147
|
+
width: 20,
|
|
148
|
+
height: 20
|
|
149
|
+
})) : m("", !0),
|
|
150
|
+
P(v(z), {
|
|
151
|
+
class: n(["uikit-transition-transform motion-reduce:uikit-transition-none", i.value && "uikit-rotate-180"]),
|
|
152
|
+
width: 18,
|
|
153
|
+
height: 18,
|
|
154
|
+
"stroke-color": e.isValid ? "#2B5DFF" : e.isValid === !1 ? "#FA4F64" : "#222"
|
|
155
|
+
}, null, 8, ["class", "stroke-color"])
|
|
156
|
+
])
|
|
157
|
+
], 10, I),
|
|
158
|
+
l("fieldset", {
|
|
159
|
+
"aria-hidden": "true",
|
|
160
|
+
class: n(["uikit-pointer-events-none uikit-absolute -uikit-top-[1px] uikit-bottom-0 uikit-left-0 uikit-right-0 uikit-box-border uikit-cursor-pointer uikit-rounded-xs uikit-border uikit-border-solid uikit-px-2 peer-focus:uikit-border-2 peer-focus:uikit-border-w-primary peer-focus-visible:uikit-border-2 peer-focus-visible:uikit-border-w-primary peer-aria-invalid:uikit-border-w-danger", [
|
|
161
|
+
e.label ? "uikit-h-12" : "uikit-h-[42px]",
|
|
162
|
+
e.$attrs["fieldset-classes"],
|
|
163
|
+
e.isValid ? "uikit-border-w-primary" : e.isValid === !1 ? "uikit-border-w-danger" : "uikit-border-w-secondary"
|
|
164
|
+
]])
|
|
165
|
+
}, [
|
|
166
|
+
e.label ? (u(), d("legend", {
|
|
167
|
+
key: 0,
|
|
168
|
+
class: n([e.$attrs["legend-classes"], "uikit-ml-2 uikit-h-3 uikit-px-0"])
|
|
169
|
+
}, [
|
|
170
|
+
l("span", {
|
|
171
|
+
class: n(["uikit-mx-5px", e.modelValue.label ? "uikit-invisible" : "uikit-hidden"]),
|
|
172
|
+
innerHTML: e.label
|
|
173
|
+
}, null, 10, G)
|
|
174
|
+
], 2)) : m("", !0)
|
|
175
|
+
], 2),
|
|
176
|
+
l("ul", {
|
|
177
|
+
"data-cy": e.$attrs["data-cy"] && `${e.$attrs["data-cy"]}_dropdown`,
|
|
178
|
+
role: "listbox",
|
|
179
|
+
tabindex: -1,
|
|
180
|
+
"aria-multiselectable": !1,
|
|
181
|
+
class: n(["uikit-absolute uikit-z-10 uikit-m-0 uikit-max-h-[225px] uikit-w-full uikit-min-w-full uikit-list-none uikit-overflow-y-auto uikit-p-0 uikit-no-scrollbar", [
|
|
182
|
+
{ "uikit-h-0 uikit-w-0 uikit-overflow-hidden": !i.value },
|
|
183
|
+
{
|
|
184
|
+
"uikit-rounded-xs uikit-border uikit-border-solid uikit-border-w-secondary uikit-bg-white": i.value
|
|
185
|
+
},
|
|
186
|
+
{ "uikit-bottom-[55px]": e.dropdownPosition === "top" },
|
|
187
|
+
{ "uikit-top-[55px]": e.dropdownPosition === "bottom" },
|
|
188
|
+
e.$attrs["dropdown-classes"]
|
|
189
|
+
]]),
|
|
190
|
+
onClick: p[1] || (p[1] = w(() => {
|
|
191
|
+
}, ["stop"]))
|
|
192
|
+
}, [
|
|
193
|
+
(u(!0), d(H, null, q(e.options, (r, c) => (u(), d("li", {
|
|
194
|
+
id: `${e.namespace}_element_${e.options[c].label}`,
|
|
195
|
+
key: `${r.label}_${c}`,
|
|
196
|
+
role: "option",
|
|
197
|
+
"aria-selected": v(k) === c,
|
|
198
|
+
class: n(["uikit-m-1 uikit-cursor-pointer uikit-px-20px uikit-py-10px uikit-text aria-selected:uikit-rounded-xs aria-selected:uikit-bg-w-cultured", e.$attrs["dropdown-item-classes"]]),
|
|
199
|
+
onClick: w((y) => b(r), ["stop"]),
|
|
200
|
+
onMouseover: w((y) => k.value = c, ["stop"])
|
|
201
|
+
}, [
|
|
202
|
+
l("label", Q, [
|
|
203
|
+
l("input", {
|
|
204
|
+
tabindex: "-1",
|
|
205
|
+
class: "uikit-appearance-none",
|
|
206
|
+
name: `${e.namespace}_radio`,
|
|
207
|
+
type: "radio",
|
|
208
|
+
checked: r.label === e.modelValue.label,
|
|
209
|
+
onInput: w((y) => b(r), ["stop"])
|
|
210
|
+
}, null, 40, R),
|
|
211
|
+
l("span", {
|
|
212
|
+
innerHTML: r.label
|
|
213
|
+
}, null, 8, W)
|
|
214
|
+
])
|
|
215
|
+
], 42, K))), 128))
|
|
216
|
+
], 10, J)
|
|
217
|
+
], 2),
|
|
218
|
+
e.feedback ? (u(), d(H, { key: 0 }, [
|
|
219
|
+
e.feedback.valid ? (u(), d("span", {
|
|
220
|
+
key: 0,
|
|
221
|
+
id: `${e.namespace}_valid_msg`,
|
|
222
|
+
"arial-live": e.$attrs["aria-live"],
|
|
223
|
+
class: "uikit-mb-2 uikit-text-sm",
|
|
224
|
+
innerHTML: e.isValid ? e.feedback.valid : ""
|
|
225
|
+
}, null, 8, X)) : m("", !0),
|
|
226
|
+
e.feedback.invalid ? (u(), d("span", {
|
|
227
|
+
key: 1,
|
|
228
|
+
id: `${e.namespace}_invalid_msg`,
|
|
229
|
+
"arial-live": e.$attrs["aria-live"],
|
|
230
|
+
class: "uikit-mb-2 uikit-text-sm uikit-text-w-danger",
|
|
231
|
+
innerHTML: e.isValid === !1 ? e.feedback.invalid : ""
|
|
232
|
+
}, null, 8, Z)) : m("", !0)
|
|
233
|
+
], 64)) : m("", !0)
|
|
234
|
+
], 64));
|
|
235
|
+
}
|
|
236
|
+
});
|
|
237
|
+
export {
|
|
238
|
+
ie as _
|
|
239
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent as z, mergeModels as V, useModel as E, ref as s, computed as f, onBeforeMount as N, watch as C, openBlock as g, createBlock as S, normalizeClass as U, withCtx as b, createVNode as A, renderSlot as B, createElementBlock as F, Fragment as K, renderList as P, unref as W, createElementVNode as j } from "vue";
|
|
2
2
|
import q from "../BaseInput.js";
|
|
3
|
-
import { _ as G } from "./BaseDropDown.vue_vue_type_script_setup_true_lang.
|
|
3
|
+
import { _ as G } from "./BaseDropDown.vue_vue_type_script_setup_true_lang.C4VH7V0e.js";
|
|
4
4
|
import "./js.cookie.BaTT4o7s.js";
|
|
5
5
|
import { _ as J } from "./SelectItem.vue_vue_type_script_setup_true_lang.BOLdDTLM.js";
|
|
6
6
|
import { useKeyboardController as Q } from "../useKeyboardController.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as w, ref as b, watch as r, onBeforeMount as h, onUnmounted as v, openBlock as
|
|
1
|
+
import { defineComponent as w, ref as b, watch as r, onBeforeMount as h, onUnmounted as v, openBlock as l, createElementBlock as C, normalizeClass as i, withModifiers as u, renderSlot as c, createVNode as y, withCtx as p, createElementVNode as g, createBlock as k, unref as $, createCommentVNode as B, resolveDynamicComponent as D } from "vue";
|
|
2
2
|
import { _ as E } from "./BaseButton.vue_vue_type_script_setup_true_lang.BrJbAMJ8.js";
|
|
3
3
|
import { d as L } from "./ArrowIcon.CklBXJPN.js";
|
|
4
4
|
const S = ["innerHTML"], M = /* @__PURE__ */ w({
|
|
@@ -24,7 +24,7 @@ const S = ["innerHTML"], M = /* @__PURE__ */ w({
|
|
|
24
24
|
},
|
|
25
25
|
emits: ["click", "update:dropdownState"],
|
|
26
26
|
setup(f, { emit: m }) {
|
|
27
|
-
const o = f,
|
|
27
|
+
const o = f, s = m, t = b(!1);
|
|
28
28
|
r(
|
|
29
29
|
() => o.openDropdown,
|
|
30
30
|
(e) => {
|
|
@@ -34,25 +34,25 @@ const S = ["innerHTML"], M = /* @__PURE__ */ w({
|
|
|
34
34
|
immediate: !0
|
|
35
35
|
}
|
|
36
36
|
), r(t, (e) => {
|
|
37
|
-
|
|
37
|
+
s("update:dropdownState", e);
|
|
38
38
|
});
|
|
39
|
-
const
|
|
39
|
+
const d = () => {
|
|
40
40
|
t.value = !1;
|
|
41
|
-
},
|
|
41
|
+
}, n = () => {
|
|
42
42
|
o.keepState === "closed" && !t.value || o.keepState === "opened" && t.value || (t.value = !t.value);
|
|
43
43
|
};
|
|
44
44
|
return h(() => {
|
|
45
|
-
o.closeWhenClickedOutside && document && document.body.addEventListener("click",
|
|
45
|
+
o.closeWhenClickedOutside && document && document.body.addEventListener("click", d);
|
|
46
46
|
}), v(() => {
|
|
47
|
-
o.closeWhenClickedOutside && document && document.body.removeEventListener("click",
|
|
48
|
-
}), (e, a) => (
|
|
47
|
+
o.closeWhenClickedOutside && document && document.body.removeEventListener("click", d);
|
|
48
|
+
}), (e, a) => (l(), C("div", {
|
|
49
49
|
class: i(["uikit-relative uikit-block", e.$attrs.class]),
|
|
50
50
|
onClick: a[1] || (a[1] = u((W) => {
|
|
51
|
-
|
|
51
|
+
s("click"), n();
|
|
52
52
|
}, ["stop"]))
|
|
53
53
|
}, [
|
|
54
54
|
c(e.$slots, "btn_slot", {
|
|
55
|
-
toggleDropdown:
|
|
55
|
+
toggleDropdown: n,
|
|
56
56
|
isOpen: t.value
|
|
57
57
|
}, () => [
|
|
58
58
|
y(E, {
|
|
@@ -69,22 +69,22 @@ const S = ["innerHTML"], M = /* @__PURE__ */ w({
|
|
|
69
69
|
"icon-name": e.iconName
|
|
70
70
|
}, {
|
|
71
71
|
default: p(() => [
|
|
72
|
-
|
|
72
|
+
g("span", {
|
|
73
73
|
class: i(["uikit-mr-5px", e.labelClasses]),
|
|
74
74
|
innerHTML: e.btnLabel
|
|
75
75
|
}, null, 10, S),
|
|
76
|
-
e.withArrowIcon ? (
|
|
76
|
+
e.withArrowIcon ? (l(), k($(L), {
|
|
77
77
|
key: 0,
|
|
78
78
|
class: i(["uikit-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", t.value && "uikit-rotate-180"]),
|
|
79
79
|
width: e.arrowWidth,
|
|
80
80
|
height: e.arrowWidth,
|
|
81
81
|
"stroke-color": e.$attrs["arrow-stroke-color"]
|
|
82
|
-
}, null, 8, ["class", "width", "height", "stroke-color"])) :
|
|
82
|
+
}, null, 8, ["class", "width", "height", "stroke-color"])) : B("", !0)
|
|
83
83
|
]),
|
|
84
84
|
_: 1
|
|
85
85
|
}, 8, ["id", "data-cy", "class", "aria-expanded", "icon-class", "icon-name"])
|
|
86
86
|
]),
|
|
87
|
-
(
|
|
87
|
+
(l(), k(D(e.dropdownElement), {
|
|
88
88
|
id: "dropdown_" + e.id,
|
|
89
89
|
ref: "dropdown",
|
|
90
90
|
"data-cy": e.$attrs["data-cy"] && `${e.$attrs["data-cy"]}_dropdown`,
|
|
@@ -99,7 +99,10 @@ const S = ["innerHTML"], M = /* @__PURE__ */ w({
|
|
|
99
99
|
}, ["stop"]))
|
|
100
100
|
}, {
|
|
101
101
|
default: p(() => [
|
|
102
|
-
c(e.$slots, "default", {
|
|
102
|
+
c(e.$slots, "default", {
|
|
103
|
+
isOpen: t.value,
|
|
104
|
+
toggleDropdown: n
|
|
105
|
+
})
|
|
103
106
|
]),
|
|
104
107
|
_: 3
|
|
105
108
|
}, 8, ["id", "data-cy", "class"]))
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { defineComponent as v, useAttrs as y, reactive as C, computed as d, watch as g, onBeforeMount as V, openBlock as u, createElementBlock as k, normalizeClass as B, renderSlot as $, Fragment as A, renderList as K, createBlock as w, unref as
|
|
2
|
-
import { i as
|
|
1
|
+
import { defineComponent as v, useAttrs as y, reactive as C, computed as d, watch as g, onBeforeMount as V, openBlock as u, createElementBlock as k, normalizeClass as B, renderSlot as $, Fragment as A, renderList as K, createBlock as w, unref as L, createCommentVNode as R } from "vue";
|
|
2
|
+
import { i as E } from "./ObjectUtils.B1Dk4qsM.js";
|
|
3
3
|
import "./js.cookie.BaTT4o7s.js";
|
|
4
4
|
import G from "../CheckboxBtn.js";
|
|
5
|
-
const I = (a = "") => !a || !a.trim() ? "" : (a = a.trim(), a.replace(" ", "-").toLowerCase()),
|
|
5
|
+
const I = (a = "") => !a || !a.trim() ? "" : (a = a.trim(), a.replace(" ", "-").toLowerCase()), z = ["id", "data-cy"], _ = /* @__PURE__ */ v({
|
|
6
6
|
inheritAttrs: !1,
|
|
7
7
|
__name: "CheckboxGroup",
|
|
8
8
|
props: {
|
|
@@ -29,7 +29,7 @@ const I = (a = "") => !a || !a.trim() ? "" : (a = a.trim(), a.replace(" ", "-").
|
|
|
29
29
|
return c;
|
|
30
30
|
}
|
|
31
31
|
return null;
|
|
32
|
-
}),
|
|
32
|
+
}), p = d(
|
|
33
33
|
() => Object.keys(t.valuesObj).length
|
|
34
34
|
), i = d(
|
|
35
35
|
() => Object.values(s.checkedValuesObj).reduce(
|
|
@@ -51,11 +51,11 @@ const I = (a = "") => !a || !a.trim() ? "" : (a = a.trim(), a.replace(" ", "-").
|
|
|
51
51
|
const h = () => {
|
|
52
52
|
for (const e in s.checkedValuesObj)
|
|
53
53
|
s.checkedValuesObj[e].checked = !1;
|
|
54
|
-
}, n = (e) => s.checkedValuesObj[t.getKey(e)].checked,
|
|
54
|
+
}, n = (e) => s.checkedValuesObj[t.getKey(e)].checked, m = (e) => {
|
|
55
55
|
s.checkedValuesObj[e.id].checked = !n(e);
|
|
56
56
|
}, j = (e) => {
|
|
57
|
-
if (!(!t.valuesObj ||
|
|
58
|
-
if (t.valuesObj[e.id].reset && e.checked ? h() : l.value && !t.valuesObj[e.id].reset && (s.checkedValuesObj[t.getKey(l.value)].checked = !1), s.checkedValuesObj[e.id].checked = !!e.checked, t.autoCheckResetAll && l.value && i.value ===
|
|
57
|
+
if (!(!t.valuesObj || E(t.valuesObj))) {
|
|
58
|
+
if (t.valuesObj[e.id].reset && e.checked ? h() : l.value && !t.valuesObj[e.id].reset && (s.checkedValuesObj[t.getKey(l.value)].checked = !1), s.checkedValuesObj[e.id].checked = !!e.checked, t.autoCheckResetAll && l.value && i.value === p.value - 1)
|
|
59
59
|
for (const c in s.checkedValuesObj)
|
|
60
60
|
s.checkedValuesObj[c].checked = !!s.checkedValuesObj[c].reset;
|
|
61
61
|
t.autoCheckResetEmpty && l.value && !i.value && (s.checkedValuesObj[t.getKey(l.value)].checked = !0), o(
|
|
@@ -71,24 +71,25 @@ const I = (a = "") => !a || !a.trim() ? "" : (a = a.trim(), a.replace(" ", "-").
|
|
|
71
71
|
class: B(["checkbox-group-container", e.$attrs.class || ""]),
|
|
72
72
|
"data-cy": e.$attrs["data-cy"] || ""
|
|
73
73
|
}, [
|
|
74
|
-
$(e.$slots, "
|
|
74
|
+
$(e.$slots, "default", {
|
|
75
75
|
isActive: n,
|
|
76
|
-
handleChange:
|
|
76
|
+
handleChange: m,
|
|
77
|
+
checkboxesData: e.valuesObj
|
|
77
78
|
}, () => [
|
|
78
|
-
e.valuesObj ? (u(!0), k(A, { key: 0 }, K(e.valuesObj, (r,
|
|
79
|
+
e.valuesObj ? (u(!0), k(A, { key: 0 }, K(e.valuesObj, (r, D, O) => (u(), w(G, {
|
|
79
80
|
id: e.getKey(r),
|
|
80
81
|
key: O,
|
|
81
|
-
"data-cy": `checkbox_${
|
|
82
|
+
"data-cy": `checkbox_${L(I)(`${r.label}`)}`,
|
|
82
83
|
label: r.label,
|
|
83
84
|
inline: e.formCheckInline,
|
|
84
85
|
"wrapper-margin-y": e.$attrs["checkbox-padding-y"],
|
|
85
86
|
"model-value": n(r),
|
|
86
87
|
onChange: j
|
|
87
|
-
}, null, 8, ["id", "data-cy", "label", "inline", "wrapper-margin-y", "model-value"]))), 128)) :
|
|
88
|
+
}, null, 8, ["id", "data-cy", "label", "inline", "wrapper-margin-y", "model-value"]))), 128)) : R("", !0)
|
|
88
89
|
])
|
|
89
|
-
], 10,
|
|
90
|
+
], 10, z));
|
|
90
91
|
}
|
|
91
92
|
});
|
|
92
93
|
export {
|
|
93
|
-
|
|
94
|
+
_
|
|
94
95
|
};
|
package/dist/index.js
CHANGED
|
@@ -5,17 +5,17 @@ import { _ as f } from "./chunks/BaseAccordionContent.vue_vue_type_script_setup_
|
|
|
5
5
|
import { _ as m } from "./chunks/BaseAccordionItem.vue_vue_type_script_setup_true_lang.B6RfqbZ9.js";
|
|
6
6
|
import { _ as l } from "./chunks/SelectItem.vue_vue_type_script_setup_true_lang.BOLdDTLM.js";
|
|
7
7
|
import { default as B } from "./CheckboxBtn.js";
|
|
8
|
-
import { _ as n } from "./chunks/CheckboxGroup.vue_vue_type_script_setup_true_lang.
|
|
8
|
+
import { _ as n } from "./chunks/CheckboxGroup.vue_vue_type_script_setup_true_lang.Kpz4rw2R.js";
|
|
9
9
|
import { default as c } from "./RadioButton.js";
|
|
10
10
|
import { default as b } from "./RadioGroup.js";
|
|
11
|
-
import { _ as A } from "./chunks/AccessibleSelect.vue_vue_type_script_setup_true_lang.
|
|
11
|
+
import { _ as A } from "./chunks/AccessibleSelect.vue_vue_type_script_setup_true_lang.lyHlWiC5.js";
|
|
12
12
|
import { _ as C } from "./chunks/BaseAlert.vue_vue_type_script_setup_true_lang.HqYdk4yE.js";
|
|
13
|
-
import { _ as T } from "./chunks/BaseAutocomplete.vue_vue_type_script_setup_true_lang.
|
|
13
|
+
import { _ as T } from "./chunks/BaseAutocomplete.vue_vue_type_script_setup_true_lang.Ct4_y9HP.js";
|
|
14
14
|
import { _ as w } from "./chunks/BaseBadge.vue_vue_type_style_index_0_lang.BOA1gBKu.js";
|
|
15
15
|
import { _ as k } from "./chunks/BaseButton.vue_vue_type_script_setup_true_lang.BrJbAMJ8.js";
|
|
16
16
|
import { _ as F } from "./chunks/BaseCard.vue_vue_type_style_index_0_lang.w5aEohzG.js";
|
|
17
17
|
import { default as O } from "./BaseComplexToggle.js";
|
|
18
|
-
import { _ as R } from "./chunks/BaseDropDown.vue_vue_type_script_setup_true_lang.
|
|
18
|
+
import { _ as R } from "./chunks/BaseDropDown.vue_vue_type_script_setup_true_lang.C4VH7V0e.js";
|
|
19
19
|
import { default as M } from "./BaseFloatingLabel.js";
|
|
20
20
|
import { default as U } from "./BaseIcon.js";
|
|
21
21
|
import { default as j } from "./BaseInput.js";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wikicasa-dev/components",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.49",
|
|
4
4
|
"description": "Wikicasa frontend components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -54,6 +54,7 @@
|
|
|
54
54
|
"@wikicasa-dev/types": "^0.9.2",
|
|
55
55
|
"@wikicasa-dev/utilities": "^0.2.1",
|
|
56
56
|
"@wikicasa-dev/svg-icons": "^0.0.1",
|
|
57
|
+
"@wikicasa-dev/vue-composables": "^0.0.3",
|
|
57
58
|
"autoprefixer": "^10.4.15",
|
|
58
59
|
"chromatic": "^11.2.0",
|
|
59
60
|
"eslint": "^8.57.0",
|
|
@@ -1,204 +0,0 @@
|
|
|
1
|
-
import { h as f, defineComponent as H, ref as y, computed as T, watch as C, onMounted as F, onUnmounted as B, openBlock as l, createElementBlock as o, Fragment as v, createElementVNode as t, normalizeClass as a, createCommentVNode as u, renderSlot as E, unref as k, withModifiers as p, createBlock as A, createVNode as q, renderList as z } from "vue";
|
|
2
|
-
import { useKeyboardController as N } from "../useKeyboardController.js";
|
|
3
|
-
import { d as P } from "./ArrowIcon.CklBXJPN.js";
|
|
4
|
-
import { o as j } from "./DefaultValues-k7iQWtC2.CPFgoBrE.js";
|
|
5
|
-
const D = (n, { attrs: d }) => {
|
|
6
|
-
n = { ...j(), ...n };
|
|
7
|
-
const { width: s, height: e } = n;
|
|
8
|
-
return f(
|
|
9
|
-
"svg",
|
|
10
|
-
{
|
|
11
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
12
|
-
viewBox: "0 0 11.175 13.409",
|
|
13
|
-
width: `${s}`,
|
|
14
|
-
height: `${e}`,
|
|
15
|
-
class: n.class ?? "",
|
|
16
|
-
"aria-hidden": d["aria-hidden"] ?? "true",
|
|
17
|
-
fill: "none",
|
|
18
|
-
stroke: d["stroke-color"] ?? "#FA4F64"
|
|
19
|
-
},
|
|
20
|
-
[
|
|
21
|
-
f("circle", {
|
|
22
|
-
cx: 6,
|
|
23
|
-
cy: 6,
|
|
24
|
-
r: 4.5
|
|
25
|
-
}),
|
|
26
|
-
f("path", {
|
|
27
|
-
"stroke-linejoin": "round",
|
|
28
|
-
d: "M5.8 3.6h.4L6 6.5z"
|
|
29
|
-
}),
|
|
30
|
-
f("circle", {
|
|
31
|
-
cx: 6,
|
|
32
|
-
cy: 8.2,
|
|
33
|
-
r: 0.6,
|
|
34
|
-
fill: d["stroke-color"] ?? "#FA4F64",
|
|
35
|
-
stroke: "none"
|
|
36
|
-
})
|
|
37
|
-
]
|
|
38
|
-
);
|
|
39
|
-
}, S = ["id", "innerHTML"], K = ["id", "data-cy", "aria-required", "aria-controls", "aria-labelledby", "aria-expanded", "aria-activedescendant", "aria-invalid", "aria-describedby"], O = ["innerHTML"], U = { class: "uikit-inline-flex" }, G = ["innerHTML"], I = ["data-cy"], J = ["id", "aria-selected", "onClick", "onMouseover"], Q = { class: "uikit-inline-block uikit-cursor-pointer uikit-text-sm" }, R = ["name", "checked", "onInput"], W = ["innerHTML"], X = ["id", "arial-live", "innerHTML"], Y = ["id", "arial-live", "innerHTML"], ei = /* @__PURE__ */ H({
|
|
40
|
-
inheritAttrs: !1,
|
|
41
|
-
__name: "AccessibleSelect",
|
|
42
|
-
props: {
|
|
43
|
-
label: { default: "" },
|
|
44
|
-
dropdownPosition: { default: "bottom" },
|
|
45
|
-
namespace: {},
|
|
46
|
-
options: {},
|
|
47
|
-
modelValue: { default: () => ({
|
|
48
|
-
id: "",
|
|
49
|
-
label: ""
|
|
50
|
-
}) },
|
|
51
|
-
isValid: { type: [Boolean, null], default: null },
|
|
52
|
-
feedback: {}
|
|
53
|
-
},
|
|
54
|
-
emits: ["update:modelValue"],
|
|
55
|
-
setup(n, { emit: d }) {
|
|
56
|
-
const s = n, e = y(!1), g = y(null), V = T(() => !!s.modelValue.label), L = d, { activeIdx: c, selectedIdx: M } = N({
|
|
57
|
-
optionsLength: s.options.length,
|
|
58
|
-
isDropdownOpen: e
|
|
59
|
-
}), h = (i) => {
|
|
60
|
-
e.value = !1, L("update:modelValue", i);
|
|
61
|
-
};
|
|
62
|
-
C(M, (i) => {
|
|
63
|
-
h(s.options[i]), e.value = !1;
|
|
64
|
-
});
|
|
65
|
-
const w = () => {
|
|
66
|
-
e.value = !1;
|
|
67
|
-
};
|
|
68
|
-
return F(() => {
|
|
69
|
-
document && document.addEventListener("click", w);
|
|
70
|
-
}), B(() => {
|
|
71
|
-
document && document.removeEventListener("click", w);
|
|
72
|
-
}), (i, b) => (l(), o(v, null, [
|
|
73
|
-
t("div", {
|
|
74
|
-
class: a(["uikit-relative uikit-flex uikit-items-center", [i.label ? "uikit-h-[52px]" : "uikit-h-[42px]", i.$attrs.class]])
|
|
75
|
-
}, [
|
|
76
|
-
i.label ? (l(), o("label", {
|
|
77
|
-
key: 0,
|
|
78
|
-
id: `${i.namespace}_label`,
|
|
79
|
-
class: a(["uikit-absolute uikit-text-sm uikit-font-medium uikit-transition-all uikit-ease-in-out", [
|
|
80
|
-
V.value ? "as-floating -uikit-top-1 uikit-left-[22px] uikit-text-w-black" : "as-inline uikit-left-4 uikit-top-4 uikit-text-w-gray",
|
|
81
|
-
i.$attrs["label-classes"]
|
|
82
|
-
]]),
|
|
83
|
-
innerHTML: i.label
|
|
84
|
-
}, null, 10, S)) : u("", !0),
|
|
85
|
-
E(i.$slots, "lefticon"),
|
|
86
|
-
t("button", {
|
|
87
|
-
id: `${i.namespace}_btn`,
|
|
88
|
-
ref_key: "btnEl",
|
|
89
|
-
ref: g,
|
|
90
|
-
type: "button",
|
|
91
|
-
"data-cy": i.$attrs["data-cy"],
|
|
92
|
-
class: a(["uikit-peer uikit-flex uikit-h-full uikit-w-full uikit-items-center uikit-justify-between uikit-truncate uikit-border-0 uikit-bg-white uikit-px-4 uikit-text-left focus-visible:uikit-outline-0", i.$attrs["btn-classes"]]),
|
|
93
|
-
"aria-required": !!i.$attrs.required,
|
|
94
|
-
role: "combobox",
|
|
95
|
-
"aria-haspopup": "listbox",
|
|
96
|
-
"aria-controls": `${i.namespace}_dropdown`,
|
|
97
|
-
"aria-labelledby": `${i.namespace}_label ${i.namespace}_btn`,
|
|
98
|
-
"aria-expanded": e.value,
|
|
99
|
-
"aria-activedescendant": k(c) >= 0 && e.value ? `${i.namespace}_element_${i.options[k(c)].label}` : "",
|
|
100
|
-
"aria-invalid": s.isValid === !1,
|
|
101
|
-
"aria-describedby": s.isValid === !1 ? `${i.namespace}_invalid_msg` : void 0,
|
|
102
|
-
onClick: b[0] || (b[0] = p((r) => e.value = !e.value, ["stop"]))
|
|
103
|
-
}, [
|
|
104
|
-
t("span", {
|
|
105
|
-
class: a(i.$attrs["btn-text-classes"]),
|
|
106
|
-
innerHTML: i.modelValue.visibleLabel || i.modelValue.label
|
|
107
|
-
}, null, 10, O),
|
|
108
|
-
t("span", U, [
|
|
109
|
-
s.isValid == !1 ? (l(), A(k(D), {
|
|
110
|
-
key: 0,
|
|
111
|
-
class: "uikit-mr-1",
|
|
112
|
-
width: 20,
|
|
113
|
-
height: 20
|
|
114
|
-
})) : u("", !0),
|
|
115
|
-
q(k(P), {
|
|
116
|
-
class: a(["uikit-transition-transform motion-reduce:uikit-transition-none", e.value && "uikit-rotate-180"]),
|
|
117
|
-
width: 18,
|
|
118
|
-
height: 18,
|
|
119
|
-
"stroke-color": i.isValid ? "#2B5DFF" : i.isValid === !1 ? "#FA4F64" : "#222"
|
|
120
|
-
}, null, 8, ["class", "stroke-color"])
|
|
121
|
-
])
|
|
122
|
-
], 10, K),
|
|
123
|
-
t("fieldset", {
|
|
124
|
-
"aria-hidden": "true",
|
|
125
|
-
class: a(["uikit-pointer-events-none uikit-absolute -uikit-top-[1px] uikit-bottom-0 uikit-left-0 uikit-right-0 uikit-box-border uikit-cursor-pointer uikit-rounded-xs uikit-border uikit-border-solid uikit-px-2 peer-focus:uikit-border-2 peer-focus:uikit-border-w-primary peer-focus-visible:uikit-border-2 peer-focus-visible:uikit-border-w-primary peer-aria-invalid:uikit-border-w-danger", [
|
|
126
|
-
i.label ? "uikit-h-12" : "uikit-h-[42px]",
|
|
127
|
-
i.$attrs["fieldset-classes"],
|
|
128
|
-
i.isValid ? "uikit-border-w-primary" : i.isValid === !1 ? "uikit-border-w-danger" : "uikit-border-w-secondary"
|
|
129
|
-
]])
|
|
130
|
-
}, [
|
|
131
|
-
i.label ? (l(), o("legend", {
|
|
132
|
-
key: 0,
|
|
133
|
-
class: a([i.$attrs["legend-classes"], "uikit-ml-2 uikit-h-3 uikit-px-0"])
|
|
134
|
-
}, [
|
|
135
|
-
t("span", {
|
|
136
|
-
class: a(["uikit-mx-5px", i.modelValue.label ? "uikit-invisible" : "uikit-hidden"]),
|
|
137
|
-
innerHTML: i.label
|
|
138
|
-
}, null, 10, G)
|
|
139
|
-
], 2)) : u("", !0)
|
|
140
|
-
], 2),
|
|
141
|
-
t("ul", {
|
|
142
|
-
"data-cy": i.$attrs["data-cy"] && `${i.$attrs["data-cy"]}_dropdown`,
|
|
143
|
-
role: "listbox",
|
|
144
|
-
tabindex: -1,
|
|
145
|
-
"aria-multiselectable": !1,
|
|
146
|
-
class: a(["uikit-absolute uikit-z-10 uikit-m-0 uikit-max-h-[225px] uikit-w-full uikit-min-w-full uikit-list-none uikit-overflow-y-auto uikit-p-0 uikit-no-scrollbar", [
|
|
147
|
-
{ "uikit-h-0 uikit-w-0 uikit-overflow-hidden": !e.value },
|
|
148
|
-
{
|
|
149
|
-
"uikit-rounded-xs uikit-border uikit-border-solid uikit-border-w-secondary uikit-bg-white": e.value
|
|
150
|
-
},
|
|
151
|
-
{ "uikit-bottom-[55px]": i.dropdownPosition === "top" },
|
|
152
|
-
{ "uikit-top-[55px]": i.dropdownPosition === "bottom" },
|
|
153
|
-
i.$attrs["dropdown-classes"]
|
|
154
|
-
]]),
|
|
155
|
-
onClick: b[1] || (b[1] = p(() => {
|
|
156
|
-
}, ["stop"]))
|
|
157
|
-
}, [
|
|
158
|
-
(l(!0), o(v, null, z(i.options, (r, m) => (l(), o("li", {
|
|
159
|
-
id: `${i.namespace}_element_${i.options[m].label}`,
|
|
160
|
-
key: `${r.label}_${m}`,
|
|
161
|
-
role: "option",
|
|
162
|
-
"aria-selected": k(c) === m,
|
|
163
|
-
class: a(["uikit-m-1 uikit-cursor-pointer uikit-px-20px uikit-py-10px uikit-text aria-selected:uikit-rounded-xs aria-selected:uikit-bg-w-cultured", i.$attrs["dropdown-item-classes"]]),
|
|
164
|
-
onClick: p(($) => h(r), ["stop"]),
|
|
165
|
-
onMouseover: p(($) => c.value = m, ["stop"])
|
|
166
|
-
}, [
|
|
167
|
-
t("label", Q, [
|
|
168
|
-
t("input", {
|
|
169
|
-
tabindex: "-1",
|
|
170
|
-
class: "uikit-appearance-none",
|
|
171
|
-
name: `${i.namespace}_radio`,
|
|
172
|
-
type: "radio",
|
|
173
|
-
checked: r.label === i.modelValue.label,
|
|
174
|
-
onInput: p(($) => h(r), ["stop"])
|
|
175
|
-
}, null, 40, R),
|
|
176
|
-
t("span", {
|
|
177
|
-
innerHTML: r.label
|
|
178
|
-
}, null, 8, W)
|
|
179
|
-
])
|
|
180
|
-
], 42, J))), 128))
|
|
181
|
-
], 10, I)
|
|
182
|
-
], 2),
|
|
183
|
-
i.feedback ? (l(), o(v, { key: 0 }, [
|
|
184
|
-
i.feedback.valid ? (l(), o("span", {
|
|
185
|
-
key: 0,
|
|
186
|
-
id: `${i.namespace}_valid_msg`,
|
|
187
|
-
"arial-live": i.$attrs["aria-live"],
|
|
188
|
-
class: "uikit-mb-2 uikit-text-sm",
|
|
189
|
-
innerHTML: i.isValid ? i.feedback.valid : ""
|
|
190
|
-
}, null, 8, X)) : u("", !0),
|
|
191
|
-
i.feedback.invalid ? (l(), o("span", {
|
|
192
|
-
key: 1,
|
|
193
|
-
id: `${i.namespace}_invalid_msg`,
|
|
194
|
-
"arial-live": i.$attrs["aria-live"],
|
|
195
|
-
class: "uikit-mb-2 uikit-text-sm uikit-text-w-danger",
|
|
196
|
-
innerHTML: i.isValid === !1 ? i.feedback.invalid : ""
|
|
197
|
-
}, null, 8, Y)) : u("", !0)
|
|
198
|
-
], 64)) : u("", !0)
|
|
199
|
-
], 64));
|
|
200
|
-
}
|
|
201
|
-
});
|
|
202
|
-
export {
|
|
203
|
-
ei as _
|
|
204
|
-
};
|