adverich-kun-ui 0.1.593 → 0.1.594
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.
|
@@ -1,15 +1,12 @@
|
|
|
1
|
-
import { ref as
|
|
2
|
-
import
|
|
1
|
+
import { ref as M, watch as S, computed as f, openBlock as s, createElementBlock as l, mergeProps as H, unref as i, createCommentVNode as r, createElementVNode as k, withKeys as O, withModifiers as h, normalizeClass as v, renderSlot as a, createBlock as I, withDirectives as P, createVNode as R, createTextVNode as W, toDisplayString as x, Fragment as T, renderList as j } from "vue";
|
|
2
|
+
import b from "../../../KunIcon/src/components/KunIcon.vue.js";
|
|
3
3
|
import { useCheckboxModel as L } from "../composables/useCheckboxModel.js";
|
|
4
4
|
import { useValidation as q } from "../composables/useValidation.js";
|
|
5
5
|
import { kunCheckboxProps as A } from "../composables/kunCheckboxProps.js";
|
|
6
6
|
import { vRipple as G } from "../../../../directives/ripple.js";
|
|
7
|
-
import { icons as
|
|
8
|
-
const J = ["name", "checked", "value"], Q = ["aria-checked", "aria-disabled", "tabindex"], U = {
|
|
7
|
+
import { icons as y } from "../../../../icons/index.js";
|
|
8
|
+
const J = ["name", "checked", "value"], Q = ["aria-checked", "aria-disabled", "tabindex"], U = { key: 0 }, X = {
|
|
9
9
|
key: 1,
|
|
10
|
-
class: "cursor-pointer"
|
|
11
|
-
}, X = {
|
|
12
|
-
key: 2,
|
|
13
10
|
class: "text-xs text-gray-500 mt-1"
|
|
14
11
|
}, Y = { key: 0 }, Z = { key: 1 }, le = {
|
|
15
12
|
__name: "KunCheckbox",
|
|
@@ -20,41 +17,36 @@ const J = ["name", "checked", "value"], Q = ["aria-checked", "aria-disabled", "t
|
|
|
20
17
|
"click:append",
|
|
21
18
|
"click:prepend"
|
|
22
19
|
],
|
|
23
|
-
setup(
|
|
24
|
-
const p =
|
|
25
|
-
|
|
20
|
+
setup(B, { expose: N, emit: z }) {
|
|
21
|
+
const p = z, e = B, d = M(e.focused ?? !1);
|
|
22
|
+
S(() => e.focused, (t) => d.value = t);
|
|
26
23
|
const {
|
|
27
24
|
isChecked: u,
|
|
28
25
|
toggle: c,
|
|
29
|
-
internalValue:
|
|
26
|
+
internalValue: D
|
|
30
27
|
} = L(e, p), {
|
|
31
28
|
errorMessages: m,
|
|
32
|
-
isValid:
|
|
33
|
-
validate:
|
|
34
|
-
resetValidation:
|
|
35
|
-
} = q(e,
|
|
36
|
-
|
|
37
|
-
const
|
|
29
|
+
isValid: g,
|
|
30
|
+
validate: $,
|
|
31
|
+
resetValidation: E
|
|
32
|
+
} = q(e, D);
|
|
33
|
+
N({ validate: $, resetValidation: E });
|
|
34
|
+
const F = f(() => e.indeterminate ? e.indeterminateIcon || y.checkboxIndeterminate : u.value ? e.trueIcon || y.checkboxOn : e.falseIcon || y.checkboxBlank), K = f(() => [
|
|
38
35
|
typeof e.iconColor == "string" ? `text-${e.iconColor}` : "",
|
|
39
36
|
e.glow && d.value ? "opacity-100" : "opacity-70"
|
|
40
|
-
]),
|
|
37
|
+
]), w = f(() => ({
|
|
41
38
|
sm: "w-4 h-4 text-sm",
|
|
42
39
|
md: "w-5 h-5 text-base",
|
|
43
40
|
lg: "w-6 h-6 text-lg"
|
|
44
41
|
})[e.size] || e.size);
|
|
45
42
|
return (t, o) => {
|
|
46
|
-
var
|
|
47
|
-
return s(), l("div",
|
|
43
|
+
var C;
|
|
44
|
+
return s(), l("div", H({
|
|
48
45
|
class: [
|
|
49
46
|
"kun-checkbox",
|
|
50
|
-
"flex",
|
|
51
|
-
t.direction === "vertical" ? "flex-col items-start" : "flex-row items-center",
|
|
52
|
-
"gap-2",
|
|
47
|
+
"flex flex-col",
|
|
53
48
|
e.color,
|
|
54
|
-
{
|
|
55
|
-
"opacity-50 pointer-events-none": e.disabled || e.readonly,
|
|
56
|
-
"text-red-600": e.error || !i(x)
|
|
57
|
-
}
|
|
49
|
+
{ "text-red-600": e.error || !i(g) }
|
|
58
50
|
],
|
|
59
51
|
style: {
|
|
60
52
|
width: e.width && `${e.width}px`,
|
|
@@ -70,66 +62,77 @@ const J = ["name", "checked", "value"], Q = ["aria-checked", "aria-disabled", "t
|
|
|
70
62
|
value: e.value ?? e.trueValue,
|
|
71
63
|
class: "hidden"
|
|
72
64
|
}, null, 8, J)) : r("", !0),
|
|
73
|
-
|
|
74
|
-
class:
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
]),
|
|
83
|
-
H((s(), l("div", {
|
|
84
|
-
class: V(["relative inline-flex items-center justify-center cursor-pointer", [y.value]]),
|
|
65
|
+
k("div", {
|
|
66
|
+
class: v([
|
|
67
|
+
"flex gap-2",
|
|
68
|
+
t.direction === "vertical" ? "flex-col items-start" : "flex-row items-center",
|
|
69
|
+
{
|
|
70
|
+
"cursor-pointer": !e.disabled && !e.readonly,
|
|
71
|
+
"opacity-50 pointer-events-none": e.disabled || e.readonly
|
|
72
|
+
}
|
|
73
|
+
]),
|
|
85
74
|
role: "checkbox",
|
|
86
75
|
"aria-checked": e.indeterminate ? "mixed" : i(u),
|
|
87
76
|
"aria-disabled": e.disabled,
|
|
88
77
|
tabindex: e.disabled ? -1 : 0,
|
|
89
|
-
onClick: o[
|
|
90
|
-
onFocus: o[
|
|
78
|
+
onClick: o[2] || (o[2] = (...n) => i(c) && i(c)(...n)),
|
|
79
|
+
onFocus: o[3] || (o[3] = () => {
|
|
91
80
|
d.value = !0, p("update:focused", !0);
|
|
92
81
|
}),
|
|
93
|
-
onBlur: o[
|
|
82
|
+
onBlur: o[4] || (o[4] = () => {
|
|
94
83
|
var n;
|
|
95
|
-
d.value = !1, p("update:focused", !1), (n = e.validateOn) != null && n.includes("blur") && i(
|
|
84
|
+
d.value = !1, p("update:focused", !1), (n = e.validateOn) != null && n.includes("blur") && i($)();
|
|
96
85
|
}),
|
|
97
|
-
onKeydown: o[
|
|
86
|
+
onKeydown: o[5] || (o[5] = O(h((...n) => i(c) && i(c)(...n), ["prevent"]), ["space"]))
|
|
98
87
|
}, [
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
},
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
88
|
+
k("div", {
|
|
89
|
+
class: "flex items-center gap-2",
|
|
90
|
+
onClick: o[0] || (o[0] = h((n) => t.$emit("click:prepend"), ["stop"]))
|
|
91
|
+
}, [
|
|
92
|
+
a(t.$slots, "prepend"),
|
|
93
|
+
e.prependIcon ? (s(), I(b, {
|
|
94
|
+
key: 0,
|
|
95
|
+
icon: e.prependIcon
|
|
96
|
+
}, null, 8, ["icon"])) : r("", !0)
|
|
97
|
+
]),
|
|
98
|
+
P((s(), l("div", {
|
|
99
|
+
class: v(["relative inline-flex items-center justify-center", [w.value]])
|
|
100
|
+
}, [
|
|
101
|
+
R(b, {
|
|
102
|
+
icon: F.value,
|
|
103
|
+
class: v([...K.value, w.value])
|
|
104
|
+
}, null, 8, ["icon", "class"]),
|
|
105
|
+
a(t.$slots, "input")
|
|
106
|
+
], 2)), [
|
|
107
|
+
[i(G), e.ripple]
|
|
108
|
+
]),
|
|
109
|
+
e.label || t.$slots.label ? (s(), l("div", U, [
|
|
110
|
+
a(t.$slots, "label", {
|
|
111
|
+
label: e.label
|
|
112
|
+
}, () => [
|
|
113
|
+
W(x(e.label), 1)
|
|
114
|
+
])
|
|
115
|
+
])) : r("", !0),
|
|
116
|
+
k("div", {
|
|
117
|
+
class: "flex items-center gap-2",
|
|
118
|
+
onClick: o[1] || (o[1] = h((n) => t.$emit("click:append"), ["stop"]))
|
|
119
|
+
}, [
|
|
120
|
+
a(t.$slots, "append"),
|
|
121
|
+
e.appendIcon ? (s(), I(b, {
|
|
122
|
+
key: 0,
|
|
123
|
+
icon: e.appendIcon
|
|
124
|
+
}, null, 8, ["icon"])) : r("", !0)
|
|
112
125
|
])
|
|
113
|
-
]
|
|
114
|
-
|
|
115
|
-
class: "flex items-center gap-2",
|
|
116
|
-
onClick: o[5] || (o[5] = (n) => t.$emit("click:append"))
|
|
117
|
-
}, [
|
|
118
|
-
a(t.$slots, "append"),
|
|
119
|
-
e.appendIcon ? (s(), C(h, {
|
|
120
|
-
key: 0,
|
|
121
|
-
icon: e.appendIcon
|
|
122
|
-
}, null, 8, ["icon"])) : r("", !0)
|
|
123
|
-
]),
|
|
124
|
-
!e.hideDetails && ((g = i(m)) != null && g.length || e.hint || e.persistentHint) ? (s(), l("div", X, [
|
|
126
|
+
], 42, Q),
|
|
127
|
+
!e.hideDetails && ((C = i(m)) != null && C.length || e.hint || e.persistentHint) ? (s(), l("div", X, [
|
|
125
128
|
a(t.$slots, "details", {}, () => {
|
|
126
129
|
var n;
|
|
127
130
|
return [
|
|
128
|
-
(e.error || !i(
|
|
129
|
-
(s(!0), l(T, null, j(i(m).slice(0, Number(e.maxErrors)), (
|
|
130
|
-
|
|
131
|
+
(e.error || !i(g)) && ((n = i(m)) != null && n.length) ? (s(), l("div", Y, [
|
|
132
|
+
(s(!0), l(T, null, j(i(m).slice(0, Number(e.maxErrors)), (V) => a(t.$slots, "message", { message: V }, () => [
|
|
133
|
+
W(x(V), 1)
|
|
131
134
|
])), 256))
|
|
132
|
-
])) : e.hint || e.persistentHint ? (s(), l("div", Z,
|
|
135
|
+
])) : e.hint || e.persistentHint ? (s(), l("div", Z, x(e.hint), 1)) : r("", !0)
|
|
133
136
|
];
|
|
134
137
|
})
|
|
135
138
|
])) : r("", !0)
|
|
@@ -235,7 +235,7 @@ const Ke = {
|
|
|
235
235
|
u.value.length ? (r(), i("span", {
|
|
236
236
|
key: 0,
|
|
237
237
|
onClick: _,
|
|
238
|
-
class: "bg-
|
|
238
|
+
class: "bg-blue-300 dark:bg-blue-700 hover:!bg-blue-500 rounded cursor-pointer px-2 ml-2"
|
|
239
239
|
}, " Anular selección ")) : g("", !0)
|
|
240
240
|
])) : g("", !0),
|
|
241
241
|
A("div", Ye, [
|