adverich-kun-ui 0.1.378 → 0.1.380
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,5 +1,5 @@
|
|
|
1
|
-
import { getCurrentInstance as U, computed as
|
|
2
|
-
import { icons as
|
|
1
|
+
import { getCurrentInstance as U, computed as u, useSlots as H, ref as q, createElementBlock as n, openBlock as o, createCommentVNode as r, createElementVNode as P, normalizeClass as i, toDisplayString as a, mergeProps as G, unref as l, renderSlot as h, withModifiers as J, createVNode as L } from "vue";
|
|
2
|
+
import { icons as V } from "../../../../icons/index.js";
|
|
3
3
|
import Q from "../composables/KunTextFieldProps.js";
|
|
4
4
|
import W from "../composables/useKunTextFieldComposable.js";
|
|
5
5
|
import X from "../../../KunIcon/src/components/KunIcon.vue.js";
|
|
@@ -7,18 +7,18 @@ const Y = {
|
|
|
7
7
|
key: 0,
|
|
8
8
|
class: "mr-2"
|
|
9
9
|
}, Z = ["type", "value", "placeholder", "disabled", "readonly", "maxlength", "aria-invalid", "aria-describedby"], _ = ["disabled"], ee = {
|
|
10
|
-
key: 3,
|
|
11
|
-
class: "flex items-center justify-center min-w-[32px] h-full px-1"
|
|
12
|
-
}, te = {
|
|
13
10
|
key: 5,
|
|
14
|
-
class: "
|
|
11
|
+
class: "flex items-center justify-center min-w-[32px] h-full px-1"
|
|
15
12
|
}, le = {
|
|
13
|
+
key: 7,
|
|
14
|
+
class: "ml-2"
|
|
15
|
+
}, te = {
|
|
16
16
|
key: 0,
|
|
17
17
|
class: "h-[1.25rem]"
|
|
18
|
-
},
|
|
18
|
+
}, ne = ["id"], oe = {
|
|
19
19
|
key: 1,
|
|
20
20
|
class: "text-xs text-center"
|
|
21
|
-
},
|
|
21
|
+
}, se = {
|
|
22
22
|
key: 2,
|
|
23
23
|
class: "text-xs text-right"
|
|
24
24
|
}, pe = {
|
|
@@ -32,121 +32,126 @@ const Y = {
|
|
|
32
32
|
"keyDown",
|
|
33
33
|
"keyUp"
|
|
34
34
|
],
|
|
35
|
-
setup(
|
|
36
|
-
const
|
|
35
|
+
setup(j, { expose: D, emit: B }) {
|
|
36
|
+
const d = j, f = B, {
|
|
37
37
|
inputField: c,
|
|
38
|
-
inputValue:
|
|
39
|
-
rootRef:
|
|
38
|
+
inputValue: p,
|
|
39
|
+
rootRef: k,
|
|
40
40
|
inputFocused: b,
|
|
41
|
-
validationError:
|
|
41
|
+
validationError: E,
|
|
42
42
|
hasError: y,
|
|
43
|
-
handleInput:
|
|
44
|
-
handleBlur:
|
|
45
|
-
focusInput:
|
|
46
|
-
validate:
|
|
47
|
-
reset:
|
|
48
|
-
resetValidation:
|
|
49
|
-
clearInput:
|
|
50
|
-
} = W(
|
|
43
|
+
handleInput: w,
|
|
44
|
+
handleBlur: g,
|
|
45
|
+
focusInput: C,
|
|
46
|
+
validate: K,
|
|
47
|
+
reset: S,
|
|
48
|
+
resetValidation: T,
|
|
49
|
+
clearInput: I
|
|
50
|
+
} = W(d, f);
|
|
51
51
|
D({
|
|
52
|
-
validate:
|
|
53
|
-
reset:
|
|
54
|
-
resetValidation:
|
|
52
|
+
validate: K,
|
|
53
|
+
reset: S,
|
|
54
|
+
resetValidation: T,
|
|
55
55
|
inputField: c,
|
|
56
|
-
rootRef:
|
|
56
|
+
rootRef: k,
|
|
57
57
|
focus: () => {
|
|
58
58
|
var e;
|
|
59
59
|
return (e = c.value) == null ? void 0 : e.focus();
|
|
60
60
|
}
|
|
61
61
|
});
|
|
62
|
-
const m = `input-${U().uid}`,
|
|
63
|
-
function
|
|
62
|
+
const m = `input-${U().uid}`, N = u(() => b.value || !!p.value || d.dirty), $ = H(), O = u(() => !!$["prepend-inner"]), z = u(() => !!$["append-inner"]), v = q(!1), A = u(() => v.value ? V.eyeOffOutline : V.eyeOutline);
|
|
63
|
+
function M() {
|
|
64
64
|
v.value = !v.value;
|
|
65
65
|
}
|
|
66
|
-
const
|
|
67
|
-
return (e,
|
|
66
|
+
const R = u(() => d.type === "password" ? v.value ? "text" : "password" : d.type), x = u(() => d.density === "compact" ? "p-1" : d.density === "comfortable" ? "p-2" : "p-3");
|
|
67
|
+
return (e, t) => {
|
|
68
68
|
var F;
|
|
69
69
|
return o(), n("div", {
|
|
70
70
|
class: "w-full flex flex-col relative",
|
|
71
71
|
ref_key: "rootRef",
|
|
72
|
-
ref:
|
|
72
|
+
ref: k
|
|
73
73
|
}, [
|
|
74
74
|
e.label ? (o(), n("label", {
|
|
75
75
|
key: 0,
|
|
76
76
|
for: m,
|
|
77
|
-
class:
|
|
77
|
+
class: i([
|
|
78
78
|
e.labelColor,
|
|
79
79
|
"absolute left-2 transition-all duration-200 ease-in-out pointer-events-none select-none z-10",
|
|
80
|
-
|
|
80
|
+
N.value || e.placeholder ? "-top-2.25 text-xs opacity-80" : "top-3 text-sm opacity-80"
|
|
81
81
|
])
|
|
82
|
-
},
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
class:
|
|
82
|
+
}, a(e.label), 3)) : r("", !0),
|
|
83
|
+
P("div", G({ class: "w-full flex flex-col justify-center relative" }, e.$attrs), [
|
|
84
|
+
P("div", {
|
|
85
|
+
class: i(["flex flex-row items-center w-full h-full border", [
|
|
86
86
|
e.bgInput,
|
|
87
87
|
e.rounded,
|
|
88
|
-
|
|
88
|
+
l(b) ? "border-blue-600 shadow-[0_0_0_1px_rgba(59,130,246,0.5)]" : e.borderColor,
|
|
89
89
|
e.disabled ? "opacity-60 cursor-not-allowed" : "cursor-text",
|
|
90
|
-
|
|
90
|
+
l(y) ? "bg-red-200 dark:bg-red-900" : ""
|
|
91
91
|
]])
|
|
92
92
|
}, [
|
|
93
|
-
e.prefix ? (o(), n("div", Y,
|
|
94
|
-
|
|
93
|
+
e.prefix ? (o(), n("div", Y, a(e.prefix), 1)) : r("", !0),
|
|
94
|
+
O.value ? (o(), n("div", {
|
|
95
95
|
key: 1,
|
|
96
|
-
class:
|
|
96
|
+
class: i([e.prependInnerClass, "flex items-center justify-center min-w-[32px] h-full px-1"])
|
|
97
97
|
}, [
|
|
98
|
-
|
|
98
|
+
h(e.$slots, "prepend-inner")
|
|
99
99
|
], 2)) : r("", !0),
|
|
100
|
-
|
|
100
|
+
l(p) ? (o(), n("input", {
|
|
101
|
+
key: 2,
|
|
101
102
|
ref_key: "inputField",
|
|
102
103
|
ref: c,
|
|
103
|
-
type:
|
|
104
|
-
value:
|
|
104
|
+
type: R.value,
|
|
105
|
+
value: l(p),
|
|
105
106
|
id: m,
|
|
106
107
|
placeholder: e.placeholder,
|
|
107
108
|
disabled: e.disabled,
|
|
108
109
|
readonly: e.readonly,
|
|
109
110
|
maxlength: e.maxlength,
|
|
110
111
|
autocomplete: "off",
|
|
111
|
-
class:
|
|
112
|
-
"aria-invalid":
|
|
113
|
-
"aria-describedby":
|
|
114
|
-
onInput:
|
|
115
|
-
onBlur:
|
|
116
|
-
onFocus:
|
|
117
|
-
onClick:
|
|
118
|
-
onKeydown:
|
|
119
|
-
onKeyup:
|
|
120
|
-
}, null, 42, Z),
|
|
121
|
-
|
|
122
|
-
|
|
112
|
+
class: i(["w-full h-full bg-transparent focus:outline-none", [x.value, e.textColor, e.placeholderColor, e.rounded, e.textCenter ? "text-center" : ""]]),
|
|
113
|
+
"aria-invalid": l(y) ? "true" : "false",
|
|
114
|
+
"aria-describedby": l(y) ? `error-${m}` : null,
|
|
115
|
+
onInput: t[0] || (t[0] = (...s) => l(w) && l(w)(...s)),
|
|
116
|
+
onBlur: t[1] || (t[1] = (...s) => l(g) && l(g)(...s)),
|
|
117
|
+
onFocus: t[2] || (t[2] = (...s) => l(C) && l(C)(...s)),
|
|
118
|
+
onClick: t[3] || (t[3] = J((s) => f("handleClick"), ["stop"])),
|
|
119
|
+
onKeydown: t[4] || (t[4] = (s) => f("keyDown", s)),
|
|
120
|
+
onKeyup: t[5] || (t[5] = (s) => f("keyUp", s))
|
|
121
|
+
}, null, 42, Z)) : (o(), n("div", {
|
|
122
|
+
key: 3,
|
|
123
|
+
class: i(["w-full h-full bg-transparent focus:outline-none flex items-center", [x.value, e.textColor, e.placeholderColor, e.rounded, e.textCenter ? "justify-center" : ""]])
|
|
124
|
+
}, [
|
|
125
|
+
h(e.$slots, "default")
|
|
126
|
+
], 2)),
|
|
127
|
+
e.clearable && l(p) ? (o(), n("button", {
|
|
128
|
+
key: 4,
|
|
123
129
|
type: "button",
|
|
124
|
-
onClick:
|
|
125
|
-
class:
|
|
130
|
+
onClick: t[6] || (t[6] = (...s) => l(I) && l(I)(...s)),
|
|
131
|
+
class: i(["ml-2", e.textColor]),
|
|
126
132
|
disabled: e.disabled || e.readonly
|
|
127
133
|
}, " × ", 10, _)) : r("", !0),
|
|
128
|
-
k(e.$slots, "default"),
|
|
129
134
|
e.type === "password" && e.showPasswordToggle ? (o(), n("div", ee, [
|
|
130
135
|
L(X, {
|
|
131
|
-
icon:
|
|
132
|
-
onClick:
|
|
136
|
+
icon: A.value,
|
|
137
|
+
onClick: M
|
|
133
138
|
}, null, 8, ["icon"])
|
|
134
139
|
])) : r("", !0),
|
|
135
|
-
|
|
136
|
-
key:
|
|
137
|
-
class:
|
|
140
|
+
z.value ? (o(), n("div", {
|
|
141
|
+
key: 6,
|
|
142
|
+
class: i([e.appendInnerClass, "flex items-center justify-center min-w-[32px] h-full px-1"])
|
|
138
143
|
}, [
|
|
139
|
-
|
|
144
|
+
h(e.$slots, "append-inner")
|
|
140
145
|
], 2)) : r("", !0),
|
|
141
|
-
e.suffix ? (o(), n("div",
|
|
146
|
+
e.suffix ? (o(), n("div", le, a(e.suffix), 1)) : r("", !0)
|
|
142
147
|
], 2),
|
|
143
|
-
e.hideDetails ? r("", !0) : (o(), n("div",
|
|
144
|
-
|
|
148
|
+
e.hideDetails ? r("", !0) : (o(), n("div", te, [
|
|
149
|
+
l(y) ? (o(), n("div", {
|
|
145
150
|
key: 0,
|
|
146
151
|
id: `error-${m}`,
|
|
147
152
|
class: "text-red-500 text-sm text-center"
|
|
148
|
-
},
|
|
149
|
-
e.counter && e.maxlength ? (o(), n("div",
|
|
153
|
+
}, a(l(E) || e.errorMessage), 9, ne)) : e.hint && (e.persistentHint || l(b)) ? (o(), n("div", oe, a(e.hint), 1)) : r("", !0),
|
|
154
|
+
e.counter && e.maxlength ? (o(), n("div", se, a(((F = l(p)) == null ? void 0 : F.length) || 0) + " / " + a(e.maxlength), 1)) : r("", !0)
|
|
150
155
|
]))
|
|
151
156
|
], 16)
|
|
152
157
|
], 512);
|