@fiscozen/checkbox 0.1.6 → 1.0.0-next.0
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/.eslintrc.cjs +19 -0
- package/.prettierrc.js +6 -0
- package/README.md +514 -0
- package/coverage/clover.xml +789 -215
- package/coverage/coverage-final.json +6 -6
- package/coverage/index.html +32 -32
- package/coverage/src/FzCheckbox.vue.html +1099 -151
- package/coverage/src/FzCheckboxGroup.vue.html +444 -81
- package/coverage/src/common.ts.html +79 -19
- package/coverage/src/components/ErrorAlert.vue.html +268 -0
- package/coverage/src/components/FzCheckboxGroupOption.vue.html +343 -70
- package/coverage/src/components/index.html +22 -22
- package/coverage/src/index.html +45 -45
- package/coverage/src/utils.ts.html +265 -0
- package/package.json +12 -10
- package/src/FzCheckbox.vue +411 -95
- package/src/FzCheckboxGroup.vue +179 -58
- package/src/__test__/FzCheckbox.test.ts +91 -19
- package/src/__test__/FzCheckboxGroup.test.ts +167 -4
- package/src/common.ts +20 -0
- package/src/components/ErrorAlert.vue +61 -0
- package/src/components/FzCheckboxGroupOption.vue +137 -46
- package/src/index.ts +1 -0
- package/src/types.ts +166 -23
- package/src/utils.ts +60 -0
- package/tsconfig.json +1 -1
- package/coverage/.tmp/coverage-0.json +0 -1
- package/coverage/.tmp/coverage-1.json +0 -1
- package/coverage/src/components/FzCheckboxErrorText.vue.html +0 -145
- package/coverage/src/types.ts.html +0 -310
- package/dist/checkbox.js +0 -301
- package/dist/checkbox.umd.cjs +0 -1
- package/dist/index.d.ts +0 -1
- package/dist/src/FzCheckbox.vue.d.ts +0 -95
- package/dist/src/FzCheckboxGroup.vue.d.ts +0 -70
- package/dist/src/__test__/FzCheckbox.test.d.ts +0 -1
- package/dist/src/__test__/FzCheckboxGroup.test.d.ts +0 -1
- package/dist/src/common.d.ts +0 -4
- package/dist/src/components/FzCheckboxErrorText.vue.d.ts +0 -24
- package/dist/src/components/FzCheckboxGroupOption.vue.d.ts +0 -82
- package/dist/src/index.d.ts +0 -3
- package/dist/src/types.d.ts +0 -76
- package/dist/style.css +0 -1
- package/src/components/FzCheckboxErrorText.vue +0 -20
package/dist/checkbox.js
DELETED
|
@@ -1,301 +0,0 @@
|
|
|
1
|
-
import { defineComponent as $, computed as d, openBlock as u, createElementBlock as b, normalizeClass as p, createVNode as E, unref as y, renderSlot as x, mergeModels as q, useModel as w, ref as I, onMounted as D, withDirectives as P, createElementVNode as k, vModelCheckbox as R, toDisplayString as S, createBlock as V, withCtx as F, createCommentVNode as B, createSlots as H, Fragment as T, renderList as L, mergeProps as N, createTextVNode as _ } from "vue";
|
|
2
|
-
import { FzIcon as G } from "@fiscozen/icons";
|
|
3
|
-
const C = {
|
|
4
|
-
sm: "text-sm",
|
|
5
|
-
md: "text-md"
|
|
6
|
-
}, O = /* @__PURE__ */ $({
|
|
7
|
-
__name: "FzCheckboxErrorText",
|
|
8
|
-
props: {
|
|
9
|
-
errorText: {},
|
|
10
|
-
size: {}
|
|
11
|
-
},
|
|
12
|
-
setup(i) {
|
|
13
|
-
const l = i, e = d(() => [
|
|
14
|
-
"flex w-full gap-4 items-center",
|
|
15
|
-
C[l.size]
|
|
16
|
-
]);
|
|
17
|
-
return (n, o) => (u(), b("p", {
|
|
18
|
-
class: p(e.value)
|
|
19
|
-
}, [
|
|
20
|
-
E(y(G), {
|
|
21
|
-
class: "text-semantic-error",
|
|
22
|
-
name: "triangle-exclamation",
|
|
23
|
-
size: n.size
|
|
24
|
-
}, null, 8, ["size"]),
|
|
25
|
-
x(n.$slots, "default")
|
|
26
|
-
], 2));
|
|
27
|
-
}
|
|
28
|
-
}), A = { class: "flex justify-center flex-col w-fit" }, J = ["id", "disabled", "checked", "required", "value", "indeterminate"], K = ["for"], Q = { class: "w-fit" }, W = /* @__PURE__ */ $({
|
|
29
|
-
__name: "FzCheckbox",
|
|
30
|
-
props: /* @__PURE__ */ q({
|
|
31
|
-
label: {},
|
|
32
|
-
value: {},
|
|
33
|
-
size: { default: "md" },
|
|
34
|
-
checked: { type: Boolean },
|
|
35
|
-
indeterminate: { type: Boolean, default: !1 },
|
|
36
|
-
emphasis: { type: Boolean },
|
|
37
|
-
disabled: { type: Boolean },
|
|
38
|
-
error: { type: Boolean },
|
|
39
|
-
required: { type: Boolean },
|
|
40
|
-
standalone: { type: Boolean }
|
|
41
|
-
}, {
|
|
42
|
-
modelValue: { type: Boolean, required: !0 },
|
|
43
|
-
modelModifiers: {}
|
|
44
|
-
}),
|
|
45
|
-
emits: /* @__PURE__ */ q(["change"], ["update:modelValue"]),
|
|
46
|
-
setup(i, { emit: l }) {
|
|
47
|
-
const e = i, n = e.value || e.label, o = w(i, "modelValue"), z = l, v = I(null), s = d(() => ({
|
|
48
|
-
"checkbox--small": e.size === "sm",
|
|
49
|
-
"checkbox--medium": e.size === "md",
|
|
50
|
-
peer: !0
|
|
51
|
-
})), a = d(() => [
|
|
52
|
-
"flex items-start gap-4",
|
|
53
|
-
C[e.size],
|
|
54
|
-
e.disabled ? "text-grey-300" : e.error ? "text-semantic-error" : e.emphasis ? "text-grey-500 peer-checked:[&_div]:text-blue-500 peer-indeterminate:[&_div]:text-blue-500" : "text-grey-500"
|
|
55
|
-
]), c = d(() => [
|
|
56
|
-
e.size === "sm" ? "mt-1" : "mt-2",
|
|
57
|
-
e.disabled ? "text-grey-300" : e.error ? "text-semantic-error" : "text-grey-500",
|
|
58
|
-
"relative"
|
|
59
|
-
]), h = d(() => e.indeterminate ? "square-minus" : m() ? "square-check" : "square"), t = d(() => !e.indeterminate && !m() ? "far" : "fas"), m = () => typeof o.value == "boolean" ? o.value : o.value.includes(n), f = (r) => {
|
|
60
|
-
z("change", r);
|
|
61
|
-
};
|
|
62
|
-
return D(() => {
|
|
63
|
-
var r, g;
|
|
64
|
-
typeof o.value == "boolean" ? o.value ? (r = v.value) == null || r.dispatchEvent(new Event("change")) : e.checked !== void 0 && (o.value = e.checked) : o.value.includes(n) ? (g = v.value) == null || g.dispatchEvent(new Event("change")) : e.checked && o.value.push(n);
|
|
65
|
-
}), (r, g) => (u(), b("div", A, [
|
|
66
|
-
P(k("input", {
|
|
67
|
-
type: "checkbox",
|
|
68
|
-
id: y(n).replace(/ /g, "-").toLowerCase(),
|
|
69
|
-
disabled: r.disabled,
|
|
70
|
-
checked: r.checked,
|
|
71
|
-
class: p(s.value),
|
|
72
|
-
required: r.required,
|
|
73
|
-
value: y(n),
|
|
74
|
-
onChange: f,
|
|
75
|
-
"onUpdate:modelValue": g[0] || (g[0] = (j) => o.value = j),
|
|
76
|
-
indeterminate: r.indeterminate,
|
|
77
|
-
ref_key: "refCheckbox",
|
|
78
|
-
ref: v
|
|
79
|
-
}, null, 42, J), [
|
|
80
|
-
[R, o.value]
|
|
81
|
-
]),
|
|
82
|
-
k("label", {
|
|
83
|
-
for: y(n).replace(/ /g, "-").toLowerCase(),
|
|
84
|
-
class: p(a.value)
|
|
85
|
-
}, [
|
|
86
|
-
E(y(G), {
|
|
87
|
-
name: h.value,
|
|
88
|
-
size: r.size,
|
|
89
|
-
class: p(c.value),
|
|
90
|
-
variant: t.value
|
|
91
|
-
}, null, 8, ["name", "size", "class", "variant"]),
|
|
92
|
-
k("span", Q, S(r.standalone ? "" : r.label), 1)
|
|
93
|
-
], 10, K),
|
|
94
|
-
r.error && r.$slots.error ? (u(), V(O, {
|
|
95
|
-
key: 0,
|
|
96
|
-
size: r.size
|
|
97
|
-
}, {
|
|
98
|
-
default: F(() => [
|
|
99
|
-
x(r.$slots, "error", {}, void 0, !0)
|
|
100
|
-
]),
|
|
101
|
-
_: 3
|
|
102
|
-
}, 8, ["size"])) : B("", !0),
|
|
103
|
-
x(r.$slots, "children", {}, void 0, !0)
|
|
104
|
-
]));
|
|
105
|
-
}
|
|
106
|
-
}), U = (i, l) => {
|
|
107
|
-
const e = i.__vccOpts || i;
|
|
108
|
-
for (const [n, o] of l)
|
|
109
|
-
e[n] = o;
|
|
110
|
-
return e;
|
|
111
|
-
}, M = /* @__PURE__ */ U(W, [["__scopeId", "data-v-7bafffef"]]), X = /* @__PURE__ */ $({
|
|
112
|
-
__name: "FzCheckboxGroupOption",
|
|
113
|
-
props: /* @__PURE__ */ q({
|
|
114
|
-
label: {},
|
|
115
|
-
value: {},
|
|
116
|
-
checked: { type: Boolean },
|
|
117
|
-
indeterminate: { type: Boolean },
|
|
118
|
-
emphasis: { type: Boolean },
|
|
119
|
-
disabled: { type: Boolean },
|
|
120
|
-
error: { type: Boolean },
|
|
121
|
-
required: { type: Boolean },
|
|
122
|
-
standalone: { type: Boolean },
|
|
123
|
-
children: {},
|
|
124
|
-
size: {}
|
|
125
|
-
}, {
|
|
126
|
-
modelValue: {
|
|
127
|
-
required: !0,
|
|
128
|
-
default: []
|
|
129
|
-
},
|
|
130
|
-
modelModifiers: {}
|
|
131
|
-
}),
|
|
132
|
-
emits: ["update:modelValue"],
|
|
133
|
-
setup(i) {
|
|
134
|
-
const l = i, e = w(i, "modelValue"), n = d(() => {
|
|
135
|
-
if (!l.children)
|
|
136
|
-
return !1;
|
|
137
|
-
const s = l.children.filter(
|
|
138
|
-
(a) => e.value.includes(a.value || a.label)
|
|
139
|
-
).length;
|
|
140
|
-
return s > 0 && s < l.children.length;
|
|
141
|
-
});
|
|
142
|
-
function o() {
|
|
143
|
-
if (!l.children)
|
|
144
|
-
return;
|
|
145
|
-
l.children.filter(
|
|
146
|
-
(a) => e.value.includes(a.value || a.label)
|
|
147
|
-
).length === l.children.length ? e.value = e.value.concat(l.value || l.label) : e.value.includes(l.value || l.label) && (e.value = e.value.filter(
|
|
148
|
-
(a) => a !== (l.value || l.label)
|
|
149
|
-
));
|
|
150
|
-
}
|
|
151
|
-
function z() {
|
|
152
|
-
var s;
|
|
153
|
-
l.children && (e.value.includes(l.value || l.label) ? e.value = e.value.concat(
|
|
154
|
-
(s = l.children) == null ? void 0 : s.map((a) => a.value || a.label).filter((a) => !e.value.includes(a))
|
|
155
|
-
) : e.value = e.value.filter(
|
|
156
|
-
(a) => {
|
|
157
|
-
var c;
|
|
158
|
-
return !((c = l.children) != null && c.map((h) => h.value || h.label).includes(a));
|
|
159
|
-
}
|
|
160
|
-
));
|
|
161
|
-
}
|
|
162
|
-
const v = d(() => [
|
|
163
|
-
"flex flex-col justify-center",
|
|
164
|
-
l.size === "sm" ? "gap-6 checkbox-group--child-container__small" : "gap-8 checkbox-group--child-container__medium"
|
|
165
|
-
]);
|
|
166
|
-
return (s, a) => (u(), V(M, {
|
|
167
|
-
modelValue: e.value,
|
|
168
|
-
"onUpdate:modelValue": a[1] || (a[1] = (c) => e.value = c),
|
|
169
|
-
value: l.value,
|
|
170
|
-
label: l.label,
|
|
171
|
-
disabled: s.disabled,
|
|
172
|
-
emphasis: s.emphasis,
|
|
173
|
-
error: s.error,
|
|
174
|
-
size: s.size,
|
|
175
|
-
indeterminate: n.value,
|
|
176
|
-
onChange: z
|
|
177
|
-
}, H({ _: 2 }, [
|
|
178
|
-
s.children && s.children.length > 0 ? {
|
|
179
|
-
name: "children",
|
|
180
|
-
fn: F(() => [
|
|
181
|
-
k("div", {
|
|
182
|
-
class: p(v.value)
|
|
183
|
-
}, [
|
|
184
|
-
(u(!0), b(T, null, L(s.children, (c) => (u(), V(M, N({
|
|
185
|
-
key: c.value,
|
|
186
|
-
modelValue: e.value,
|
|
187
|
-
"onUpdate:modelValue": a[0] || (a[0] = (h) => e.value = h)
|
|
188
|
-
}, c, {
|
|
189
|
-
disabled: s.disabled,
|
|
190
|
-
emphasis: s.emphasis,
|
|
191
|
-
error: s.error,
|
|
192
|
-
size: s.size,
|
|
193
|
-
onChange: o
|
|
194
|
-
}), null, 16, ["modelValue", "disabled", "emphasis", "error", "size"]))), 128))
|
|
195
|
-
], 2)
|
|
196
|
-
]),
|
|
197
|
-
key: "0"
|
|
198
|
-
} : void 0
|
|
199
|
-
]), 1032, ["modelValue", "value", "label", "disabled", "emphasis", "error", "size", "indeterminate"]));
|
|
200
|
-
}
|
|
201
|
-
}), Y = /* @__PURE__ */ U(X, [["__scopeId", "data-v-c563830e"]]), Z = { key: 0 }, ae = /* @__PURE__ */ $({
|
|
202
|
-
__name: "FzCheckboxGroup",
|
|
203
|
-
props: /* @__PURE__ */ q({
|
|
204
|
-
label: {},
|
|
205
|
-
size: {},
|
|
206
|
-
options: {},
|
|
207
|
-
emphasis: { type: Boolean },
|
|
208
|
-
disabled: { type: Boolean },
|
|
209
|
-
error: { type: Boolean },
|
|
210
|
-
required: { type: Boolean }
|
|
211
|
-
}, {
|
|
212
|
-
modelValue: {
|
|
213
|
-
required: !0,
|
|
214
|
-
default: []
|
|
215
|
-
},
|
|
216
|
-
modelModifiers: {}
|
|
217
|
-
}),
|
|
218
|
-
emits: ["update:modelValue"],
|
|
219
|
-
setup(i) {
|
|
220
|
-
const l = i, e = `fz-checkbox-group-${c()}`, n = d(() => [
|
|
221
|
-
l.size === "sm" ? "text-xs" : "text-sm",
|
|
222
|
-
l.disabled ? "text-grey-400" : "text-grey-500"
|
|
223
|
-
]), o = w(i, "modelValue"), z = I(h(l.options)), v = d(() => [
|
|
224
|
-
"flex flex-col",
|
|
225
|
-
C[l.size],
|
|
226
|
-
l.size === "sm" ? "gap-4" : "gap-6",
|
|
227
|
-
l.disabled ? "text-grey-400" : "text-core-black"
|
|
228
|
-
]), s = d(() => [
|
|
229
|
-
"flex flex-col",
|
|
230
|
-
C[l.size],
|
|
231
|
-
l.size === "sm" ? "gap-10" : "gap-12"
|
|
232
|
-
]), a = d(() => [
|
|
233
|
-
"flex flex-col",
|
|
234
|
-
C[l.size],
|
|
235
|
-
l.size === "sm" ? "gap-6" : "gap-8"
|
|
236
|
-
]);
|
|
237
|
-
function c() {
|
|
238
|
-
return Math.random().toString(36).slice(2, 9);
|
|
239
|
-
}
|
|
240
|
-
function h(t) {
|
|
241
|
-
return t.map((m) => {
|
|
242
|
-
var f;
|
|
243
|
-
return {
|
|
244
|
-
...m,
|
|
245
|
-
checked: m.checked || !1,
|
|
246
|
-
children: (f = m.children) == null ? void 0 : f.map((r) => ({
|
|
247
|
-
...r,
|
|
248
|
-
checked: r.checked || !1
|
|
249
|
-
}))
|
|
250
|
-
};
|
|
251
|
-
});
|
|
252
|
-
}
|
|
253
|
-
return (t, m) => (u(), b("div", {
|
|
254
|
-
class: p(s.value),
|
|
255
|
-
id: e
|
|
256
|
-
}, [
|
|
257
|
-
k("label", {
|
|
258
|
-
for: e,
|
|
259
|
-
class: p(v.value)
|
|
260
|
-
}, [
|
|
261
|
-
k("span", null, [
|
|
262
|
-
_(S(t.label), 1),
|
|
263
|
-
t.required ? (u(), b("span", Z, " *")) : B("", !0)
|
|
264
|
-
]),
|
|
265
|
-
t.$slots.help ? (u(), b("p", {
|
|
266
|
-
key: 0,
|
|
267
|
-
class: p(n.value)
|
|
268
|
-
}, [
|
|
269
|
-
x(t.$slots, "help")
|
|
270
|
-
], 2)) : B("", !0)
|
|
271
|
-
], 2),
|
|
272
|
-
k("div", {
|
|
273
|
-
class: p(a.value)
|
|
274
|
-
}, [
|
|
275
|
-
(u(!0), b(T, null, L(z.value, (f) => (u(), V(Y, N({
|
|
276
|
-
key: f.value,
|
|
277
|
-
modelValue: o.value,
|
|
278
|
-
"onUpdate:modelValue": m[0] || (m[0] = (r) => o.value = r)
|
|
279
|
-
}, f, {
|
|
280
|
-
disabled: t.disabled,
|
|
281
|
-
emphasis: t.emphasis,
|
|
282
|
-
error: t.error,
|
|
283
|
-
size: t.size
|
|
284
|
-
}), null, 16, ["modelValue", "disabled", "emphasis", "error", "size"]))), 128))
|
|
285
|
-
], 2),
|
|
286
|
-
t.error && t.$slots.error ? (u(), V(O, {
|
|
287
|
-
key: 0,
|
|
288
|
-
size: t.size
|
|
289
|
-
}, {
|
|
290
|
-
default: F(() => [
|
|
291
|
-
x(t.$slots, "error")
|
|
292
|
-
]),
|
|
293
|
-
_: 3
|
|
294
|
-
}, 8, ["size"])) : B("", !0)
|
|
295
|
-
], 2));
|
|
296
|
-
}
|
|
297
|
-
});
|
|
298
|
-
export {
|
|
299
|
-
M as FzCheckbox,
|
|
300
|
-
ae as FzCheckboxGroup
|
|
301
|
-
};
|
package/dist/checkbox.umd.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@fiscozen/icons")):typeof define=="function"&&define.amd?define(["exports","vue","@fiscozen/icons"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.FzCheckbox={},m.Vue,m.icons))})(this,function(m,e,g){"use strict";const k={sm:"text-sm",md:"text-md"},y=e.defineComponent({__name:"FzCheckboxErrorText",props:{errorText:{},size:{}},setup(d){const o=d,l=e.computed(()=>["flex w-full gap-4 items-center",k[o.size]]);return(i,r)=>(e.openBlock(),e.createElementBlock("p",{class:e.normalizeClass(l.value)},[e.createVNode(e.unref(g.FzIcon),{class:"text-semantic-error",name:"triangle-exclamation",size:i.size},null,8,["size"]),e.renderSlot(i.$slots,"default")],2))}}),V={class:"flex justify-center flex-col w-fit"},x=["id","disabled","checked","required","value","indeterminate"],E=["for"],q={class:"w-fit"},M=e.defineComponent({__name:"FzCheckbox",props:e.mergeModels({label:{},value:{},size:{default:"md"},checked:{type:Boolean},indeterminate:{type:Boolean,default:!1},emphasis:{type:Boolean},disabled:{type:Boolean},error:{type:Boolean},required:{type:Boolean},standalone:{type:Boolean}},{modelValue:{type:Boolean,required:!0},modelModifiers:{}}),emits:e.mergeModels(["change"],["update:modelValue"]),setup(d,{emit:o}){const l=d,i=l.value||l.label,r=e.useModel(d,"modelValue"),b=o,f=e.ref(null),t=e.computed(()=>({"checkbox--small":l.size==="sm","checkbox--medium":l.size==="md",peer:!0})),a=e.computed(()=>["flex items-start gap-4",k[l.size],l.disabled?"text-grey-300":l.error?"text-semantic-error":l.emphasis?"text-grey-500 peer-checked:[&_div]:text-blue-500 peer-indeterminate:[&_div]:text-blue-500":"text-grey-500"]),c=e.computed(()=>[l.size==="sm"?"mt-1":"mt-2",l.disabled?"text-grey-300":l.error?"text-semantic-error":"text-grey-500","relative"]),u=e.computed(()=>l.indeterminate?"square-minus":p()?"square-check":"square"),s=e.computed(()=>!l.indeterminate&&!p()?"far":"fas"),p=()=>typeof r.value=="boolean"?r.value:r.value.includes(i),h=n=>{b("change",n)};return e.onMounted(()=>{var n,z;typeof r.value=="boolean"?r.value?(n=f.value)==null||n.dispatchEvent(new Event("change")):l.checked!==void 0&&(r.value=l.checked):r.value.includes(i)?(z=f.value)==null||z.dispatchEvent(new Event("change")):l.checked&&r.value.push(i)}),(n,z)=>(e.openBlock(),e.createElementBlock("div",V,[e.withDirectives(e.createElementVNode("input",{type:"checkbox",id:e.unref(i).replace(/ /g,"-").toLowerCase(),disabled:n.disabled,checked:n.checked,class:e.normalizeClass(t.value),required:n.required,value:e.unref(i),onChange:h,"onUpdate:modelValue":z[0]||(z[0]=S=>r.value=S),indeterminate:n.indeterminate,ref_key:"refCheckbox",ref:f},null,42,x),[[e.vModelCheckbox,r.value]]),e.createElementVNode("label",{for:e.unref(i).replace(/ /g,"-").toLowerCase(),class:e.normalizeClass(a.value)},[e.createVNode(e.unref(g.FzIcon),{name:u.value,size:n.size,class:e.normalizeClass(c.value),variant:s.value},null,8,["name","size","class","variant"]),e.createElementVNode("span",q,e.toDisplayString(n.standalone?"":n.label),1)],10,E),n.error&&n.$slots.error?(e.openBlock(),e.createBlock(y,{key:0,size:n.size},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"error",{},void 0,!0)]),_:3},8,["size"])):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"children",{},void 0,!0)]))}}),B=(d,o)=>{const l=d.__vccOpts||d;for(const[i,r]of o)l[i]=r;return l},C=B(M,[["__scopeId","data-v-7bafffef"]]),N=B(e.defineComponent({__name:"FzCheckboxGroupOption",props:e.mergeModels({label:{},value:{},checked:{type:Boolean},indeterminate:{type:Boolean},emphasis:{type:Boolean},disabled:{type:Boolean},error:{type:Boolean},required:{type:Boolean},standalone:{type:Boolean},children:{},size:{}},{modelValue:{required:!0,default:[]},modelModifiers:{}}),emits:["update:modelValue"],setup(d){const o=d,l=e.useModel(d,"modelValue"),i=e.computed(()=>{if(!o.children)return!1;const t=o.children.filter(a=>l.value.includes(a.value||a.label)).length;return t>0&&t<o.children.length});function r(){if(!o.children)return;o.children.filter(a=>l.value.includes(a.value||a.label)).length===o.children.length?l.value=l.value.concat(o.value||o.label):l.value.includes(o.value||o.label)&&(l.value=l.value.filter(a=>a!==(o.value||o.label)))}function b(){var t;o.children&&(l.value.includes(o.value||o.label)?l.value=l.value.concat((t=o.children)==null?void 0:t.map(a=>a.value||a.label).filter(a=>!l.value.includes(a))):l.value=l.value.filter(a=>{var c;return!((c=o.children)!=null&&c.map(u=>u.value||u.label).includes(a))}))}const f=e.computed(()=>["flex flex-col justify-center",o.size==="sm"?"gap-6 checkbox-group--child-container__small":"gap-8 checkbox-group--child-container__medium"]);return(t,a)=>(e.openBlock(),e.createBlock(C,{modelValue:l.value,"onUpdate:modelValue":a[1]||(a[1]=c=>l.value=c),value:o.value,label:o.label,disabled:t.disabled,emphasis:t.emphasis,error:t.error,size:t.size,indeterminate:i.value,onChange:b},e.createSlots({_:2},[t.children&&t.children.length>0?{name:"children",fn:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(f.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.children,c=>(e.openBlock(),e.createBlock(C,e.mergeProps({key:c.value,modelValue:l.value,"onUpdate:modelValue":a[0]||(a[0]=u=>l.value=u)},c,{disabled:t.disabled,emphasis:t.emphasis,error:t.error,size:t.size,onChange:r}),null,16,["modelValue","disabled","emphasis","error","size"]))),128))],2)]),key:"0"}:void 0]),1032,["modelValue","value","label","disabled","emphasis","error","size","indeterminate"]))}}),[["__scopeId","data-v-c563830e"]]),$={key:0},F=e.defineComponent({__name:"FzCheckboxGroup",props:e.mergeModels({label:{},size:{},options:{},emphasis:{type:Boolean},disabled:{type:Boolean},error:{type:Boolean},required:{type:Boolean}},{modelValue:{required:!0,default:[]},modelModifiers:{}}),emits:["update:modelValue"],setup(d){const o=d,l=`fz-checkbox-group-${c()}`,i=e.computed(()=>[o.size==="sm"?"text-xs":"text-sm",o.disabled?"text-grey-400":"text-grey-500"]),r=e.useModel(d,"modelValue"),b=e.ref(u(o.options)),f=e.computed(()=>["flex flex-col",k[o.size],o.size==="sm"?"gap-4":"gap-6",o.disabled?"text-grey-400":"text-core-black"]),t=e.computed(()=>["flex flex-col",k[o.size],o.size==="sm"?"gap-10":"gap-12"]),a=e.computed(()=>["flex flex-col",k[o.size],o.size==="sm"?"gap-6":"gap-8"]);function c(){return Math.random().toString(36).slice(2,9)}function u(s){return s.map(p=>{var h;return{...p,checked:p.checked||!1,children:(h=p.children)==null?void 0:h.map(n=>({...n,checked:n.checked||!1}))}})}return(s,p)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(t.value),id:l},[e.createElementVNode("label",{for:l,class:e.normalizeClass(f.value)},[e.createElementVNode("span",null,[e.createTextVNode(e.toDisplayString(s.label),1),s.required?(e.openBlock(),e.createElementBlock("span",$," *")):e.createCommentVNode("",!0)]),s.$slots.help?(e.openBlock(),e.createElementBlock("p",{key:0,class:e.normalizeClass(i.value)},[e.renderSlot(s.$slots,"help")],2)):e.createCommentVNode("",!0)],2),e.createElementVNode("div",{class:e.normalizeClass(a.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value,h=>(e.openBlock(),e.createBlock(N,e.mergeProps({key:h.value,modelValue:r.value,"onUpdate:modelValue":p[0]||(p[0]=n=>r.value=n)},h,{disabled:s.disabled,emphasis:s.emphasis,error:s.error,size:s.size}),null,16,["modelValue","disabled","emphasis","error","size"]))),128))],2),s.error&&s.$slots.error?(e.openBlock(),e.createBlock(y,{key:0,size:s.size},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"error")]),_:3},8,["size"])):e.createCommentVNode("",!0)],2))}});m.FzCheckbox=C,m.FzCheckboxGroup=F,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
|
package/dist/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './src/index'
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
|
|
2
|
-
modelValue: {
|
|
3
|
-
required: true;
|
|
4
|
-
type: import('vue').PropType<boolean | string[]>;
|
|
5
|
-
};
|
|
6
|
-
size: {
|
|
7
|
-
type: import('vue').PropType<"sm" | "md">;
|
|
8
|
-
required: true;
|
|
9
|
-
default: string;
|
|
10
|
-
};
|
|
11
|
-
label: {
|
|
12
|
-
type: import('vue').PropType<string>;
|
|
13
|
-
required: true;
|
|
14
|
-
};
|
|
15
|
-
value: {
|
|
16
|
-
type: import('vue').PropType<string>;
|
|
17
|
-
};
|
|
18
|
-
checked: {
|
|
19
|
-
type: import('vue').PropType<boolean>;
|
|
20
|
-
};
|
|
21
|
-
indeterminate: {
|
|
22
|
-
type: import('vue').PropType<boolean>;
|
|
23
|
-
default: boolean;
|
|
24
|
-
};
|
|
25
|
-
emphasis: {
|
|
26
|
-
type: import('vue').PropType<boolean>;
|
|
27
|
-
};
|
|
28
|
-
disabled: {
|
|
29
|
-
type: import('vue').PropType<boolean>;
|
|
30
|
-
};
|
|
31
|
-
error: {
|
|
32
|
-
type: import('vue').PropType<boolean>;
|
|
33
|
-
};
|
|
34
|
-
required: {
|
|
35
|
-
type: import('vue').PropType<boolean>;
|
|
36
|
-
};
|
|
37
|
-
standalone: {
|
|
38
|
-
type: import('vue').PropType<boolean>;
|
|
39
|
-
};
|
|
40
|
-
}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
41
|
-
change: (...args: any[]) => void;
|
|
42
|
-
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
43
|
-
modelValue: {
|
|
44
|
-
required: true;
|
|
45
|
-
type: import('vue').PropType<boolean | string[]>;
|
|
46
|
-
};
|
|
47
|
-
size: {
|
|
48
|
-
type: import('vue').PropType<"sm" | "md">;
|
|
49
|
-
required: true;
|
|
50
|
-
default: string;
|
|
51
|
-
};
|
|
52
|
-
label: {
|
|
53
|
-
type: import('vue').PropType<string>;
|
|
54
|
-
required: true;
|
|
55
|
-
};
|
|
56
|
-
value: {
|
|
57
|
-
type: import('vue').PropType<string>;
|
|
58
|
-
};
|
|
59
|
-
checked: {
|
|
60
|
-
type: import('vue').PropType<boolean>;
|
|
61
|
-
};
|
|
62
|
-
indeterminate: {
|
|
63
|
-
type: import('vue').PropType<boolean>;
|
|
64
|
-
default: boolean;
|
|
65
|
-
};
|
|
66
|
-
emphasis: {
|
|
67
|
-
type: import('vue').PropType<boolean>;
|
|
68
|
-
};
|
|
69
|
-
disabled: {
|
|
70
|
-
type: import('vue').PropType<boolean>;
|
|
71
|
-
};
|
|
72
|
-
error: {
|
|
73
|
-
type: import('vue').PropType<boolean>;
|
|
74
|
-
};
|
|
75
|
-
required: {
|
|
76
|
-
type: import('vue').PropType<boolean>;
|
|
77
|
-
};
|
|
78
|
-
standalone: {
|
|
79
|
-
type: import('vue').PropType<boolean>;
|
|
80
|
-
};
|
|
81
|
-
}>> & {
|
|
82
|
-
onChange?: ((...args: any[]) => any) | undefined;
|
|
83
|
-
}, {
|
|
84
|
-
size: "sm" | "md";
|
|
85
|
-
indeterminate: boolean;
|
|
86
|
-
}, {}>, {
|
|
87
|
-
error?(_: {}): any;
|
|
88
|
-
children?(_: {}): any;
|
|
89
|
-
}>;
|
|
90
|
-
export default _default;
|
|
91
|
-
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
92
|
-
new (): {
|
|
93
|
-
$slots: S;
|
|
94
|
-
};
|
|
95
|
-
};
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { ParentCheckbox } from './types';
|
|
2
|
-
|
|
3
|
-
declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
|
|
4
|
-
modelValue: {
|
|
5
|
-
required: true;
|
|
6
|
-
type: import('vue').PropType<string[]>;
|
|
7
|
-
};
|
|
8
|
-
label: {
|
|
9
|
-
type: import('vue').PropType<string>;
|
|
10
|
-
required: true;
|
|
11
|
-
};
|
|
12
|
-
size: {
|
|
13
|
-
type: import('vue').PropType<"sm" | "md">;
|
|
14
|
-
required: true;
|
|
15
|
-
};
|
|
16
|
-
options: {
|
|
17
|
-
type: import('vue').PropType<ParentCheckbox[]>;
|
|
18
|
-
required: true;
|
|
19
|
-
};
|
|
20
|
-
emphasis: {
|
|
21
|
-
type: import('vue').PropType<boolean>;
|
|
22
|
-
};
|
|
23
|
-
disabled: {
|
|
24
|
-
type: import('vue').PropType<boolean>;
|
|
25
|
-
};
|
|
26
|
-
error: {
|
|
27
|
-
type: import('vue').PropType<boolean>;
|
|
28
|
-
};
|
|
29
|
-
required: {
|
|
30
|
-
type: import('vue').PropType<boolean>;
|
|
31
|
-
};
|
|
32
|
-
}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
33
|
-
modelValue: {
|
|
34
|
-
required: true;
|
|
35
|
-
type: import('vue').PropType<string[]>;
|
|
36
|
-
};
|
|
37
|
-
label: {
|
|
38
|
-
type: import('vue').PropType<string>;
|
|
39
|
-
required: true;
|
|
40
|
-
};
|
|
41
|
-
size: {
|
|
42
|
-
type: import('vue').PropType<"sm" | "md">;
|
|
43
|
-
required: true;
|
|
44
|
-
};
|
|
45
|
-
options: {
|
|
46
|
-
type: import('vue').PropType<ParentCheckbox[]>;
|
|
47
|
-
required: true;
|
|
48
|
-
};
|
|
49
|
-
emphasis: {
|
|
50
|
-
type: import('vue').PropType<boolean>;
|
|
51
|
-
};
|
|
52
|
-
disabled: {
|
|
53
|
-
type: import('vue').PropType<boolean>;
|
|
54
|
-
};
|
|
55
|
-
error: {
|
|
56
|
-
type: import('vue').PropType<boolean>;
|
|
57
|
-
};
|
|
58
|
-
required: {
|
|
59
|
-
type: import('vue').PropType<boolean>;
|
|
60
|
-
};
|
|
61
|
-
}>>, {}, {}>, {
|
|
62
|
-
help?(_: {}): any;
|
|
63
|
-
error?(_: {}): any;
|
|
64
|
-
}>;
|
|
65
|
-
export default _default;
|
|
66
|
-
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
67
|
-
new (): {
|
|
68
|
-
$slots: S;
|
|
69
|
-
};
|
|
70
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/dist/src/common.d.ts
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
|
|
2
|
-
errorText?: string | undefined;
|
|
3
|
-
size: "sm" | "md";
|
|
4
|
-
}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
5
|
-
errorText?: string | undefined;
|
|
6
|
-
size: "sm" | "md";
|
|
7
|
-
}>>>, {}, {}>, {
|
|
8
|
-
default?(_: {}): any;
|
|
9
|
-
}>;
|
|
10
|
-
export default _default;
|
|
11
|
-
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
12
|
-
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
13
|
-
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
14
|
-
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
15
|
-
} : {
|
|
16
|
-
type: import('vue').PropType<T[K]>;
|
|
17
|
-
required: true;
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
21
|
-
new (): {
|
|
22
|
-
$slots: S;
|
|
23
|
-
};
|
|
24
|
-
};
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
declare const _default: import('vue').DefineComponent<{
|
|
2
|
-
modelValue: {
|
|
3
|
-
required: true;
|
|
4
|
-
type: import('vue').PropType<string[]>;
|
|
5
|
-
};
|
|
6
|
-
label: {
|
|
7
|
-
type: import('vue').PropType<string>;
|
|
8
|
-
required: true;
|
|
9
|
-
};
|
|
10
|
-
value: {
|
|
11
|
-
type: import('vue').PropType<string>;
|
|
12
|
-
};
|
|
13
|
-
checked: {
|
|
14
|
-
type: import('vue').PropType<boolean>;
|
|
15
|
-
};
|
|
16
|
-
indeterminate: {
|
|
17
|
-
type: import('vue').PropType<boolean>;
|
|
18
|
-
};
|
|
19
|
-
emphasis: {
|
|
20
|
-
type: import('vue').PropType<boolean>;
|
|
21
|
-
};
|
|
22
|
-
disabled: {
|
|
23
|
-
type: import('vue').PropType<boolean>;
|
|
24
|
-
};
|
|
25
|
-
error: {
|
|
26
|
-
type: import('vue').PropType<boolean>;
|
|
27
|
-
};
|
|
28
|
-
required: {
|
|
29
|
-
type: import('vue').PropType<boolean>;
|
|
30
|
-
};
|
|
31
|
-
standalone: {
|
|
32
|
-
type: import('vue').PropType<boolean>;
|
|
33
|
-
};
|
|
34
|
-
children: {
|
|
35
|
-
type: import('vue').PropType<import('../types').ChildCheckbox[]>;
|
|
36
|
-
};
|
|
37
|
-
size: {
|
|
38
|
-
type: import('vue').PropType<"sm" | "md">;
|
|
39
|
-
required: true;
|
|
40
|
-
};
|
|
41
|
-
}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
42
|
-
modelValue: {
|
|
43
|
-
required: true;
|
|
44
|
-
type: import('vue').PropType<string[]>;
|
|
45
|
-
};
|
|
46
|
-
label: {
|
|
47
|
-
type: import('vue').PropType<string>;
|
|
48
|
-
required: true;
|
|
49
|
-
};
|
|
50
|
-
value: {
|
|
51
|
-
type: import('vue').PropType<string>;
|
|
52
|
-
};
|
|
53
|
-
checked: {
|
|
54
|
-
type: import('vue').PropType<boolean>;
|
|
55
|
-
};
|
|
56
|
-
indeterminate: {
|
|
57
|
-
type: import('vue').PropType<boolean>;
|
|
58
|
-
};
|
|
59
|
-
emphasis: {
|
|
60
|
-
type: import('vue').PropType<boolean>;
|
|
61
|
-
};
|
|
62
|
-
disabled: {
|
|
63
|
-
type: import('vue').PropType<boolean>;
|
|
64
|
-
};
|
|
65
|
-
error: {
|
|
66
|
-
type: import('vue').PropType<boolean>;
|
|
67
|
-
};
|
|
68
|
-
required: {
|
|
69
|
-
type: import('vue').PropType<boolean>;
|
|
70
|
-
};
|
|
71
|
-
standalone: {
|
|
72
|
-
type: import('vue').PropType<boolean>;
|
|
73
|
-
};
|
|
74
|
-
children: {
|
|
75
|
-
type: import('vue').PropType<import('../types').ChildCheckbox[]>;
|
|
76
|
-
};
|
|
77
|
-
size: {
|
|
78
|
-
type: import('vue').PropType<"sm" | "md">;
|
|
79
|
-
required: true;
|
|
80
|
-
};
|
|
81
|
-
}>>, {}, {}>;
|
|
82
|
-
export default _default;
|
package/dist/src/index.d.ts
DELETED
package/dist/src/types.d.ts
DELETED
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
export type FzCheckboxProps = {
|
|
2
|
-
/**
|
|
3
|
-
* The label of the checkbox
|
|
4
|
-
*/
|
|
5
|
-
label: string;
|
|
6
|
-
/**
|
|
7
|
-
* The value of the checkbox. If not provided, the value will be the label
|
|
8
|
-
*/
|
|
9
|
-
value?: string;
|
|
10
|
-
/**
|
|
11
|
-
* The size of the checkbox
|
|
12
|
-
*/
|
|
13
|
-
size: "sm" | "md";
|
|
14
|
-
/**
|
|
15
|
-
* If the checkbox is checked
|
|
16
|
-
*/
|
|
17
|
-
checked?: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* if the checkbox is indeterminate
|
|
20
|
-
*/
|
|
21
|
-
indeterminate?: boolean;
|
|
22
|
-
/**
|
|
23
|
-
* If true, the checkbox will be emphasized
|
|
24
|
-
*/
|
|
25
|
-
emphasis?: boolean;
|
|
26
|
-
/**
|
|
27
|
-
* If true, the checkbox will be disabled
|
|
28
|
-
*/
|
|
29
|
-
disabled?: boolean;
|
|
30
|
-
/**
|
|
31
|
-
* If true, the checkbox will be in an error state
|
|
32
|
-
*/
|
|
33
|
-
error?: boolean;
|
|
34
|
-
/**
|
|
35
|
-
* If the checkbox is required
|
|
36
|
-
*/
|
|
37
|
-
required?: boolean;
|
|
38
|
-
/**
|
|
39
|
-
* If the checkbox is standalone
|
|
40
|
-
*/
|
|
41
|
-
standalone?: boolean;
|
|
42
|
-
};
|
|
43
|
-
export type FzCheckboxGroupProps = {
|
|
44
|
-
/**
|
|
45
|
-
* The label of the checkbox group
|
|
46
|
-
*/
|
|
47
|
-
label: string;
|
|
48
|
-
/**
|
|
49
|
-
* The size of the checkbox
|
|
50
|
-
*/
|
|
51
|
-
size: "sm" | "md";
|
|
52
|
-
/**
|
|
53
|
-
* The checkbox to render
|
|
54
|
-
*/
|
|
55
|
-
options: ParentCheckbox[];
|
|
56
|
-
/**
|
|
57
|
-
* If true, the checkbox will be emphasized
|
|
58
|
-
*/
|
|
59
|
-
emphasis?: boolean;
|
|
60
|
-
/**
|
|
61
|
-
* If true, the checkbox will be disabled
|
|
62
|
-
*/
|
|
63
|
-
disabled?: boolean;
|
|
64
|
-
/**
|
|
65
|
-
* If true, the checkbox will be in an error state
|
|
66
|
-
*/
|
|
67
|
-
error?: boolean;
|
|
68
|
-
/**
|
|
69
|
-
* If the checkbox group is required
|
|
70
|
-
*/
|
|
71
|
-
required?: boolean;
|
|
72
|
-
};
|
|
73
|
-
export type ParentCheckbox = ChildCheckbox & {
|
|
74
|
-
children?: ChildCheckbox[];
|
|
75
|
-
};
|
|
76
|
-
export type ChildCheckbox = Omit<FzCheckboxProps, "size">;
|