adverich-kun-ui 0.1.351 → 0.1.353
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/components/KunAutocomplete/src/components/KunAutocomplete.vue.js +103 -105
- package/dist/components/KunAutocomplete/src/composables/KunAutocompleteProps.js +9 -24
- package/dist/components/KunNumberField/src/components/KunNumberField.vue.js +5 -5
- package/dist/components/KunNumberField/src/composables/useKunNumberFieldComposable.js +31 -31
- package/dist/components/KunTextField/src/components/KunTextField.vue.js +23 -23
- package/dist/components/KunTextField/src/composables/useKunTextFieldComposable.js +24 -23
- package/package.json +1 -1
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { mergeModels as
|
|
1
|
+
import { mergeModels as R, useModel as $, onMounted as ae, ref as B, watch as ie, createElementBlock as w, openBlock as i, createVNode as a, unref as t, isRef as F, createSlots as re, withCtx as n, createCommentVNode as k, Fragment as se, renderList as ue, createBlock as d, createElementVNode as de, createTextVNode as v, toDisplayString as V, normalizeClass as ce, withModifiers as me } from "vue";
|
|
2
2
|
import { icons as m } from "../../../../icons/index.js";
|
|
3
|
-
import { isNotEmpty as fe, isArray as
|
|
3
|
+
import { isNotEmpty as fe, isArray as T } from "../../../../utils/utils.js";
|
|
4
4
|
import pe from "../../../KunInfiniteScroll/src/components/KunInfiniteScroll.vue.js";
|
|
5
5
|
import he from "../../../KunList/src/components/KunList.vue.js";
|
|
6
|
-
import
|
|
7
|
-
import
|
|
6
|
+
import I from "../../../KunListItem/src/components/KunListItem.vue.js";
|
|
7
|
+
import x from "../../../KunListItemTitle/src/components/KunListItemTitle.vue.js";
|
|
8
8
|
import ke from "../../../KunListItemSubtitle/src/components/KunListItemSubtitle.vue.js";
|
|
9
9
|
import ve from "../../../KunMenu/src/components/KunMenu.vue.js";
|
|
10
10
|
import { useAutocomplete as ye } from "../composables/useAutocomplete.js";
|
|
11
|
-
import { KunAutocompleteProps as
|
|
12
|
-
import
|
|
11
|
+
import { KunAutocompleteProps as be } from "../composables/KunAutocompleteProps.js";
|
|
12
|
+
import ge from "../../../KunTextField/src/components/KunTextField.vue.js";
|
|
13
13
|
import Ce from "../../../KunBtn/src/components/KunBtn.vue.js";
|
|
14
14
|
import we from "../../../KunChip/src/components/KunChip.vue.js";
|
|
15
15
|
import y from "../../../KunIcon/src/components/KunIcon.vue.js";
|
|
@@ -18,20 +18,20 @@ const Ve = {
|
|
|
18
18
|
class: "flex justify-center align-center"
|
|
19
19
|
}, Ie = { class: "flex justify-center align-center" }, Le = {
|
|
20
20
|
__name: "KunAutocomplete",
|
|
21
|
-
props: /* @__PURE__ */
|
|
21
|
+
props: /* @__PURE__ */ R(be, {
|
|
22
22
|
modelValue: { default: null },
|
|
23
23
|
modelModifiers: {},
|
|
24
24
|
items: { default: [], type: Array, required: !0 },
|
|
25
25
|
itemsModifiers: {}
|
|
26
26
|
}),
|
|
27
|
-
emits: /* @__PURE__ */
|
|
28
|
-
setup(
|
|
29
|
-
const
|
|
30
|
-
textFieldRef:
|
|
31
|
-
listRef:
|
|
27
|
+
emits: /* @__PURE__ */ R(["update:modelValue", "selectedItem", "createItem", "validation", "search"], ["update:modelValue", "update:items"]),
|
|
28
|
+
setup(b, { emit: E }) {
|
|
29
|
+
const r = $(b, "modelValue"), S = $(b, "items"), u = b, f = E, {
|
|
30
|
+
textFieldRef: g,
|
|
31
|
+
listRef: D,
|
|
32
32
|
menuModel: s,
|
|
33
33
|
search: c,
|
|
34
|
-
removeItem:
|
|
34
|
+
removeItem: N,
|
|
35
35
|
clearSelection: L,
|
|
36
36
|
lightReset: U,
|
|
37
37
|
openMenu: C,
|
|
@@ -44,184 +44,182 @@ const Ve = {
|
|
|
44
44
|
isAlphanumeric: G,
|
|
45
45
|
createItem: J,
|
|
46
46
|
checkDisabled: Q,
|
|
47
|
-
itemToString:
|
|
48
|
-
placeholder: X
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
u.focusOnRender && b.value.focus();
|
|
47
|
+
itemToString: K,
|
|
48
|
+
placeholder: X
|
|
49
|
+
} = ye(u, f, r, S);
|
|
50
|
+
ae(() => {
|
|
51
|
+
u.focusOnRender && g.value.focus();
|
|
53
52
|
});
|
|
54
|
-
const
|
|
53
|
+
const M = B(null), p = B(""), _ = (e) => {
|
|
55
54
|
for (const o of u.rules) {
|
|
56
|
-
const
|
|
57
|
-
if (
|
|
58
|
-
return p.value =
|
|
55
|
+
const l = o(e);
|
|
56
|
+
if (l !== !0)
|
|
57
|
+
return p.value = l, f("validation", !1), !1;
|
|
59
58
|
}
|
|
60
59
|
return p.value = "", f("validation", !0), !0;
|
|
61
60
|
};
|
|
62
|
-
|
|
63
|
-
fe(u.rules) &&
|
|
61
|
+
ie(() => r.value, (e, o) => {
|
|
62
|
+
fe(u.rules) && _(e);
|
|
64
63
|
});
|
|
65
|
-
function
|
|
64
|
+
function Y() {
|
|
66
65
|
var e;
|
|
67
|
-
s.value = !1, (e =
|
|
66
|
+
s.value = !1, (e = g.value.inputField) == null || e.focus();
|
|
68
67
|
}
|
|
69
|
-
function
|
|
70
|
-
var
|
|
68
|
+
function Z(e) {
|
|
69
|
+
var l, h;
|
|
71
70
|
const o = e.key;
|
|
72
71
|
if (o === "Tab" || o === "Shift") {
|
|
73
72
|
H();
|
|
74
73
|
return;
|
|
75
74
|
}
|
|
76
|
-
(G(o) || o === "Backspace") && C(), ["ArrowUp", "ArrowDown"].includes(o) && (e.preventDefault(), s.value || C(), (h = (
|
|
75
|
+
(G(o) || o === "Backspace") && C(), ["ArrowUp", "ArrowDown"].includes(o) && (e.preventDefault(), s.value || C(), (h = (l = D.value) == null ? void 0 : l.focusWithKey) == null || h.call(l, o));
|
|
77
76
|
}
|
|
78
|
-
function
|
|
77
|
+
function ee(e) {
|
|
79
78
|
f("search", c);
|
|
80
79
|
}
|
|
81
|
-
function
|
|
82
|
-
|
|
80
|
+
function le() {
|
|
81
|
+
_(r);
|
|
83
82
|
}
|
|
84
|
-
function
|
|
83
|
+
function te(e) {
|
|
85
84
|
j(e);
|
|
86
85
|
}
|
|
87
|
-
function
|
|
86
|
+
function oe() {
|
|
88
87
|
}
|
|
89
|
-
return (e, o) => (
|
|
88
|
+
return (e, o) => (i(), w("div", {
|
|
90
89
|
class: "w-full h-fit",
|
|
91
90
|
ref_key: "parentRef",
|
|
92
|
-
ref:
|
|
91
|
+
ref: M
|
|
93
92
|
}, [
|
|
94
|
-
|
|
95
|
-
modelValue:
|
|
93
|
+
a(ge, {
|
|
94
|
+
modelValue: t(c),
|
|
96
95
|
"onUpdate:modelValue": [
|
|
97
|
-
o[1] || (o[1] = (
|
|
98
|
-
|
|
96
|
+
o[1] || (o[1] = (l) => F(c) ? c.value = l : null),
|
|
97
|
+
ee
|
|
99
98
|
],
|
|
100
99
|
label: e.label,
|
|
101
100
|
dirty: "",
|
|
102
101
|
"hide-details": e.hideDetails,
|
|
103
102
|
density: e.density,
|
|
104
103
|
ref_key: "textFieldRef",
|
|
105
|
-
ref:
|
|
104
|
+
ref: g,
|
|
106
105
|
autocomplete: "off",
|
|
107
|
-
onFocusInput:
|
|
108
|
-
onHandleClick:
|
|
109
|
-
rounded:
|
|
110
|
-
onBlur:
|
|
111
|
-
onKeyDown:
|
|
112
|
-
placeholder: u.multiple &&
|
|
106
|
+
onFocusInput: le,
|
|
107
|
+
onHandleClick: t(O),
|
|
108
|
+
rounded: t(s) ? "rounded-t" : "rounded",
|
|
109
|
+
onBlur: oe,
|
|
110
|
+
onKeyDown: Z,
|
|
111
|
+
placeholder: u.multiple && t(T)(r.value) && r.value.length ? "" : t(X),
|
|
113
112
|
error: !!p.value,
|
|
114
113
|
"error-messages": p.value
|
|
115
|
-
},
|
|
114
|
+
}, re({
|
|
116
115
|
default: n(() => [
|
|
117
|
-
|
|
118
|
-
(
|
|
119
|
-
key:
|
|
116
|
+
t(T)(r.value) ? (i(), w("div", Ve, [
|
|
117
|
+
(i(!0), w(se, null, ue(r.value, (l) => (i(), d(we, {
|
|
118
|
+
key: l.id ?? l.name,
|
|
120
119
|
size: "small",
|
|
121
120
|
class: "ml-1"
|
|
122
121
|
}, {
|
|
123
122
|
default: n(() => [
|
|
124
|
-
|
|
125
|
-
v(
|
|
126
|
-
|
|
123
|
+
de("div", Ie, [
|
|
124
|
+
v(V(t(W)(l, e.itemTitle)) + " ", 1),
|
|
125
|
+
a(y, {
|
|
127
126
|
color: "error",
|
|
128
|
-
icon:
|
|
127
|
+
icon: t(m).close,
|
|
129
128
|
size: "small",
|
|
130
129
|
class: "ml-1",
|
|
131
|
-
onClick: (h) =>
|
|
130
|
+
onClick: (h) => t(N)(l)
|
|
132
131
|
}, null, 8, ["icon", "onClick"])
|
|
133
132
|
])
|
|
134
133
|
]),
|
|
135
134
|
_: 2
|
|
136
135
|
}, 1024))), 128))
|
|
137
136
|
])) : k("", !0),
|
|
138
|
-
|
|
137
|
+
a(ve, {
|
|
139
138
|
transition: "fade",
|
|
140
|
-
"onClick:outside":
|
|
141
|
-
modelValue:
|
|
142
|
-
"onUpdate:modelValue": o[0] || (o[0] = (
|
|
139
|
+
"onClick:outside": t(U),
|
|
140
|
+
modelValue: t(s),
|
|
141
|
+
"onUpdate:modelValue": o[0] || (o[0] = (l) => F(s) ? s.value = l : null),
|
|
143
142
|
activator: "parent",
|
|
144
143
|
"z-index": e.zIndex,
|
|
145
|
-
"parent-ref":
|
|
144
|
+
"parent-ref": M.value,
|
|
146
145
|
location: "bottom",
|
|
147
146
|
origin: "bottom left",
|
|
148
|
-
onHandleEscape:
|
|
147
|
+
onHandleEscape: Y,
|
|
149
148
|
"close-on-content-click": e.closeOnSelect,
|
|
150
149
|
width: "w-full",
|
|
151
150
|
"max-height": e.maxHeight,
|
|
152
151
|
"hide-details": e.hideDetails
|
|
153
152
|
}, {
|
|
154
153
|
default: n(() => [
|
|
155
|
-
|
|
156
|
-
"onClick:select":
|
|
154
|
+
a(he, {
|
|
155
|
+
"onClick:select": t(q),
|
|
157
156
|
ref_key: "listRef",
|
|
158
|
-
ref:
|
|
159
|
-
onKeyDown:
|
|
157
|
+
ref: D,
|
|
158
|
+
onKeyDown: te,
|
|
160
159
|
selectable: !0
|
|
161
160
|
}, {
|
|
162
161
|
default: n(() => [
|
|
163
|
-
|
|
162
|
+
e.hasCreateItem ? (i(), d(I, { key: 0 }, {
|
|
164
163
|
default: n(() => [
|
|
165
|
-
|
|
166
|
-
onClick:
|
|
167
|
-
|
|
168
|
-
|
|
164
|
+
a(Ce, {
|
|
165
|
+
onClick: t(J),
|
|
166
|
+
bgColor: e.btnCreateBg,
|
|
167
|
+
class: ce(e.btnCreateClass)
|
|
169
168
|
}, {
|
|
170
|
-
default: n(() =>
|
|
171
|
-
v(
|
|
172
|
-
])
|
|
173
|
-
_: 1
|
|
174
|
-
|
|
175
|
-
}, 8, ["onClick"])
|
|
169
|
+
default: n(() => [
|
|
170
|
+
v(V(e.btnCreateText), 1)
|
|
171
|
+
]),
|
|
172
|
+
_: 1
|
|
173
|
+
}, 8, ["onClick", "bgColor", "class"])
|
|
176
174
|
]),
|
|
177
175
|
_: 1
|
|
178
176
|
})) : k("", !0),
|
|
179
|
-
|
|
180
|
-
items:
|
|
181
|
-
search:
|
|
177
|
+
a(pe, {
|
|
178
|
+
items: S.value,
|
|
179
|
+
search: t(c),
|
|
182
180
|
"searchable-keys": u.searchableKeys,
|
|
183
181
|
virtual: !1,
|
|
184
182
|
"items-per-intersection": 10,
|
|
185
|
-
enabled:
|
|
183
|
+
enabled: t(s),
|
|
186
184
|
"item-height": 48
|
|
187
185
|
}, {
|
|
188
|
-
default: n(({ item:
|
|
189
|
-
var
|
|
186
|
+
default: n(({ item: l, index: h, empty: ne }) => {
|
|
187
|
+
var z, A;
|
|
190
188
|
return [
|
|
191
|
-
!
|
|
192
|
-
value:
|
|
193
|
-
key: ((
|
|
194
|
-
disabled:
|
|
189
|
+
!ne && l ? (i(), d(I, {
|
|
190
|
+
value: l,
|
|
191
|
+
key: ((z = l.id) == null ? void 0 : z.toString()) ?? l.name,
|
|
192
|
+
disabled: t(Q)(l),
|
|
195
193
|
"bg-items": e.bgItemListColor,
|
|
196
194
|
"hover-bg": e.hoverItemListColor,
|
|
197
195
|
activeClass: e.selectedItemListColor,
|
|
198
196
|
density: e.density,
|
|
199
|
-
id: ((
|
|
197
|
+
id: ((A = l.id) == null ? void 0 : A.toString()) ?? l.name,
|
|
200
198
|
selectable: !0
|
|
201
199
|
}, {
|
|
202
200
|
default: n(() => [
|
|
203
|
-
|
|
201
|
+
a(x, { class: "text-wrap" }, {
|
|
204
202
|
default: n(() => [
|
|
205
|
-
v(
|
|
203
|
+
v(V(t(K)(l, e.itemTitle ?? t(P), "hasDefault")), 1)
|
|
206
204
|
]),
|
|
207
205
|
_: 2
|
|
208
206
|
}, 1024),
|
|
209
|
-
|
|
210
|
-
text: e.itemSubtitle ?
|
|
207
|
+
a(ke, {
|
|
208
|
+
text: e.itemSubtitle ? t(K)(l, e.itemSubtitle) : ""
|
|
211
209
|
}, null, 8, ["text"])
|
|
212
210
|
]),
|
|
213
211
|
_: 2
|
|
214
|
-
}, 1032, ["value", "disabled", "bg-items", "hover-bg", "activeClass", "density", "id"])) : (
|
|
212
|
+
}, 1032, ["value", "disabled", "bg-items", "hover-bg", "activeClass", "density", "id"])) : (i(), d(I, {
|
|
215
213
|
key: 1,
|
|
216
214
|
disabled: ""
|
|
217
215
|
}, {
|
|
218
216
|
default: n(() => [
|
|
219
|
-
|
|
220
|
-
default: n(() => o[
|
|
217
|
+
a(x, { class: "text-center w-full text-gray-500" }, {
|
|
218
|
+
default: n(() => o[2] || (o[2] = [
|
|
221
219
|
v(" No hay elementos disponibles ")
|
|
222
220
|
])),
|
|
223
221
|
_: 1,
|
|
224
|
-
__: [
|
|
222
|
+
__: [2]
|
|
225
223
|
})
|
|
226
224
|
]),
|
|
227
225
|
_: 1
|
|
@@ -242,27 +240,27 @@ const Ve = {
|
|
|
242
240
|
e.hasIcons ? {
|
|
243
241
|
name: "append-inner",
|
|
244
242
|
fn: n(() => [
|
|
245
|
-
e.clearable &&
|
|
243
|
+
e.clearable && r.value ? (i(), d(y, {
|
|
246
244
|
key: 0,
|
|
247
|
-
onClick:
|
|
245
|
+
onClick: t(L),
|
|
248
246
|
size: "small",
|
|
249
247
|
color: "error",
|
|
250
|
-
icon:
|
|
248
|
+
icon: t(m).close,
|
|
251
249
|
class: "mr-1 mt-1"
|
|
252
250
|
}, null, 8, ["onClick", "icon"])) : k("", !0),
|
|
253
|
-
|
|
251
|
+
a(y, {
|
|
254
252
|
color: "teal-darken-1",
|
|
255
253
|
size: "large",
|
|
256
254
|
class: "cursor-pointer",
|
|
257
|
-
icon:
|
|
258
|
-
onClick: me(
|
|
255
|
+
icon: t(s) ? t(m).menuUpOutline : t(m).menuDownOutline,
|
|
256
|
+
onClick: me(t(C), ["stop"])
|
|
259
257
|
}, null, 8, ["icon", "onClick"]),
|
|
260
|
-
e.required ? (
|
|
258
|
+
e.required ? (i(), d(y, {
|
|
261
259
|
key: 1,
|
|
262
260
|
color: "teal-darken-1",
|
|
263
261
|
size: "x-small",
|
|
264
262
|
class: "mb-4",
|
|
265
|
-
icon:
|
|
263
|
+
icon: t(m).asterisk
|
|
266
264
|
}, null, 8, ["icon"])) : k("", !0)
|
|
267
265
|
]),
|
|
268
266
|
key: "0"
|
|
@@ -46,30 +46,15 @@ const e = {
|
|
|
46
46
|
type: Boolean,
|
|
47
47
|
default: !0
|
|
48
48
|
},
|
|
49
|
-
closeOnSelect: {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
},
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
},
|
|
57
|
-
|
|
58
|
-
type: String,
|
|
59
|
-
default: "Seleccionar"
|
|
60
|
-
},
|
|
61
|
-
textNoItems: {
|
|
62
|
-
type: String,
|
|
63
|
-
default: "No hay elementos"
|
|
64
|
-
},
|
|
65
|
-
hasCreateItem: {
|
|
66
|
-
type: Boolean,
|
|
67
|
-
default: !1
|
|
68
|
-
},
|
|
69
|
-
multiple: {
|
|
70
|
-
type: Boolean,
|
|
71
|
-
default: !1
|
|
72
|
-
},
|
|
49
|
+
closeOnSelect: { type: Boolean, default: !0 },
|
|
50
|
+
startEmtpy: { type: Boolean, default: !1 },
|
|
51
|
+
placeholderText: { type: String, default: "Seleccionar" },
|
|
52
|
+
textNoItems: { type: String, default: "No hay elementos" },
|
|
53
|
+
hasCreateItem: { type: Boolean, default: !1 },
|
|
54
|
+
btnCreateClass: { type: String, default: "w-full" },
|
|
55
|
+
btnCreateBg: { typer: String, default: "bg-green-700" },
|
|
56
|
+
btnCreateText: { typer: String, default: "Crear item" },
|
|
57
|
+
multiple: { type: Boolean, default: !1 },
|
|
73
58
|
required: {
|
|
74
59
|
type: Boolean,
|
|
75
60
|
default: !1
|
|
@@ -40,8 +40,8 @@ const G = {
|
|
|
40
40
|
props: L,
|
|
41
41
|
emits: [
|
|
42
42
|
"update:modelValue",
|
|
43
|
-
"
|
|
44
|
-
"
|
|
43
|
+
"focus",
|
|
44
|
+
"blur",
|
|
45
45
|
"handleClick",
|
|
46
46
|
"keyDown",
|
|
47
47
|
"keyUp"
|
|
@@ -123,9 +123,9 @@ const G = {
|
|
|
123
123
|
autocomplete: "off",
|
|
124
124
|
class: p(["w-full h-full bg-transparent rounded focus:outline-none", [$.value, e.textColor, e.placeholderColor, e.textCenter ? "text-center" : ""]]),
|
|
125
125
|
"aria-invalid": e.error ? "true" : "false",
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
126
|
+
onBlur: r[1] || (r[1] = (...t) => o(C) && o(C)(...t)),
|
|
127
|
+
onFocus: r[2] || (r[2] = (...t) => o(g) && o(g)(...t)),
|
|
128
|
+
onInput: r[3] || (r[3] = (t) => o(N)(t.target.value)),
|
|
129
129
|
onKeydown: r[4] || (r[4] = (t) => y("keyDown", t)),
|
|
130
130
|
onKeyup: r[5] || (r[5] = (t) => y("keyUp", t))
|
|
131
131
|
}, null, 42, T)),
|
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
import { ref as
|
|
1
|
+
import { ref as t, computed as p, watch as g, nextTick as y } from "vue";
|
|
2
2
|
import { normalizeNumber as z } from "./numberFormatUtils.js";
|
|
3
|
-
function N(e,
|
|
4
|
-
const
|
|
5
|
-
function
|
|
6
|
-
const
|
|
7
|
-
if (
|
|
8
|
-
|
|
3
|
+
function N(e, a) {
|
|
4
|
+
const u = t(e.modelValue), r = t(null), m = t(null), f = t(0);
|
|
5
|
+
function c(n) {
|
|
6
|
+
const l = z(n, e.separator).split(e.separator);
|
|
7
|
+
if (l.length > 2) {
|
|
8
|
+
d();
|
|
9
9
|
return;
|
|
10
10
|
}
|
|
11
|
-
|
|
12
|
-
const i =
|
|
13
|
-
i ===
|
|
11
|
+
l.length === 2 && l[1].length > e.precision && (l[1] = l[1].slice(0, e.precision));
|
|
12
|
+
const i = l.join(e.separator);
|
|
13
|
+
i === u.value ? d() : u.value = i, a("update:modelValue", i);
|
|
14
14
|
}
|
|
15
|
-
function
|
|
15
|
+
function d() {
|
|
16
16
|
f.value++, y(() => {
|
|
17
|
-
var
|
|
18
|
-
(
|
|
17
|
+
var n;
|
|
18
|
+
(n = r.value) == null || n.focus();
|
|
19
19
|
});
|
|
20
20
|
}
|
|
21
|
-
function s() {
|
|
22
|
-
o((n.value || 0) + e.step);
|
|
23
|
-
}
|
|
24
21
|
function v() {
|
|
25
|
-
|
|
22
|
+
c((u.value || 0) + e.step);
|
|
23
|
+
}
|
|
24
|
+
function s() {
|
|
25
|
+
c((u.value || 0) - e.step);
|
|
26
26
|
}
|
|
27
27
|
function V() {
|
|
28
|
-
|
|
28
|
+
u.value = null, a("update:modelValue", null);
|
|
29
29
|
}
|
|
30
|
-
const
|
|
30
|
+
const o = t(!1);
|
|
31
31
|
function h() {
|
|
32
|
-
|
|
32
|
+
o.value = !0, u.value || (u.value = ""), a("focus");
|
|
33
33
|
}
|
|
34
34
|
function I() {
|
|
35
|
-
|
|
35
|
+
o.value = !1, u.value || (u.value = 0), a("blur");
|
|
36
36
|
}
|
|
37
|
-
const
|
|
38
|
-
return g(() => e.modelValue, (
|
|
39
|
-
|
|
37
|
+
const b = p(() => o.value || !!e.modelValue || e.dirty);
|
|
38
|
+
return g(() => e.modelValue, (n) => {
|
|
39
|
+
u.value = n;
|
|
40
40
|
}), {
|
|
41
|
-
inputValue:
|
|
41
|
+
inputValue: u,
|
|
42
42
|
numberInput: r,
|
|
43
|
-
rootRef:
|
|
43
|
+
rootRef: m,
|
|
44
44
|
inputKey: f,
|
|
45
|
-
updateValue:
|
|
46
|
-
onIncrement:
|
|
47
|
-
onDecrement:
|
|
45
|
+
updateValue: c,
|
|
46
|
+
onIncrement: v,
|
|
47
|
+
onDecrement: s,
|
|
48
48
|
onClear: V,
|
|
49
|
-
focus:
|
|
49
|
+
focus: o,
|
|
50
50
|
handleFocus: h,
|
|
51
|
-
isActive:
|
|
51
|
+
isActive: b,
|
|
52
52
|
handleBlur: I
|
|
53
53
|
};
|
|
54
54
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { getCurrentInstance as U, computed as d, useSlots as H, ref as q, createElementBlock as
|
|
1
|
+
import { getCurrentInstance as U, computed as d, useSlots as H, ref as q, createElementBlock as n, openBlock as o, createCommentVNode as r, createElementVNode as h, normalizeClass as u, toDisplayString as i, mergeProps as G, unref as t, renderSlot as k, withModifiers as J, createVNode as L } from "vue";
|
|
2
2
|
import { icons as P } from "../../../../icons/index.js";
|
|
3
3
|
import Q from "../composables/KunTextFieldProps.js";
|
|
4
4
|
import W from "../composables/useKunTextFieldComposable.js";
|
|
@@ -15,7 +15,7 @@ const Y = {
|
|
|
15
15
|
}, le = {
|
|
16
16
|
key: 0,
|
|
17
17
|
class: "h-[1.25rem]"
|
|
18
|
-
},
|
|
18
|
+
}, se = ["id"], ne = {
|
|
19
19
|
key: 1,
|
|
20
20
|
class: "text-xs text-center"
|
|
21
21
|
}, oe = {
|
|
@@ -26,8 +26,8 @@ const Y = {
|
|
|
26
26
|
props: { ...Q },
|
|
27
27
|
emits: [
|
|
28
28
|
"update:modelValue",
|
|
29
|
-
"
|
|
30
|
-
"
|
|
29
|
+
"focus",
|
|
30
|
+
"blur",
|
|
31
31
|
"handleClick",
|
|
32
32
|
"keyDown",
|
|
33
33
|
"keyUp"
|
|
@@ -66,12 +66,12 @@ const Y = {
|
|
|
66
66
|
const M = d(() => a.type === "password" ? v.value ? "text" : "password" : a.type), R = d(() => a.density === "compact" ? "p-1" : a.density === "comfortable" ? "p-2" : "p-3");
|
|
67
67
|
return (e, l) => {
|
|
68
68
|
var F;
|
|
69
|
-
return o(),
|
|
69
|
+
return o(), n("div", {
|
|
70
70
|
class: "w-full flex flex-col relative",
|
|
71
71
|
ref_key: "rootRef",
|
|
72
72
|
ref: w
|
|
73
73
|
}, [
|
|
74
|
-
e.label ? (o(),
|
|
74
|
+
e.label ? (o(), n("label", {
|
|
75
75
|
key: 0,
|
|
76
76
|
for: m,
|
|
77
77
|
class: u([
|
|
@@ -90,8 +90,8 @@ const Y = {
|
|
|
90
90
|
t(y) ? "bg-red-200 dark:bg-red-900" : ""
|
|
91
91
|
]])
|
|
92
92
|
}, [
|
|
93
|
-
e.prefix ? (o(),
|
|
94
|
-
N.value ? (o(),
|
|
93
|
+
e.prefix ? (o(), n("div", Y, i(e.prefix), 1)) : r("", !0),
|
|
94
|
+
N.value ? (o(), n("div", {
|
|
95
95
|
key: 1,
|
|
96
96
|
class: u([e.prependInnerClass, "flex items-center justify-center min-w-[32px] h-full px-1"])
|
|
97
97
|
}, [
|
|
@@ -111,42 +111,42 @@ const Y = {
|
|
|
111
111
|
class: u(["w-full h-full bg-transparent focus:outline-none", [R.value, e.textColor, e.placeholderColor, e.rounded, e.textCenter ? "text-center" : ""]]),
|
|
112
112
|
"aria-invalid": t(y) ? "true" : "false",
|
|
113
113
|
"aria-describedby": t(y) ? `error-${m}` : null,
|
|
114
|
-
onInput: l[0] || (l[0] = (...
|
|
115
|
-
onBlur: l[1] || (l[1] = (...
|
|
116
|
-
onFocus: l[2] || (l[2] = (...
|
|
117
|
-
onClick: l[3] || (l[3] = J((
|
|
118
|
-
onKeydown: l[4] || (l[4] = (
|
|
119
|
-
onKeyup: l[5] || (l[5] = (
|
|
114
|
+
onInput: l[0] || (l[0] = (...s) => t(g) && t(g)(...s)),
|
|
115
|
+
onBlur: l[1] || (l[1] = (...s) => t(C) && t(C)(...s)),
|
|
116
|
+
onFocus: l[2] || (l[2] = (...s) => t(I) && t(I)(...s)),
|
|
117
|
+
onClick: l[3] || (l[3] = J((s) => p("handleClick"), ["stop"])),
|
|
118
|
+
onKeydown: l[4] || (l[4] = (s) => p("keyDown", s)),
|
|
119
|
+
onKeyup: l[5] || (l[5] = (s) => p("keyUp", s))
|
|
120
120
|
}, null, 42, Z),
|
|
121
|
-
e.clearable && t(f) ? (o(),
|
|
121
|
+
e.clearable && t(f) ? (o(), n("button", {
|
|
122
122
|
key: 2,
|
|
123
123
|
type: "button",
|
|
124
|
-
onClick: l[6] || (l[6] = (...
|
|
124
|
+
onClick: l[6] || (l[6] = (...s) => t($) && t($)(...s)),
|
|
125
125
|
class: u(["ml-2", e.textColor]),
|
|
126
126
|
disabled: e.disabled || e.readonly
|
|
127
127
|
}, " × ", 10, _)) : r("", !0),
|
|
128
128
|
k(e.$slots, "default"),
|
|
129
|
-
e.type === "password" && e.showPasswordToggle ? (o(),
|
|
129
|
+
e.type === "password" && e.showPasswordToggle ? (o(), n("div", ee, [
|
|
130
130
|
L(X, {
|
|
131
131
|
icon: z.value,
|
|
132
132
|
onClick: A
|
|
133
133
|
}, null, 8, ["icon"])
|
|
134
134
|
])) : r("", !0),
|
|
135
|
-
O.value ? (o(),
|
|
135
|
+
O.value ? (o(), n("div", {
|
|
136
136
|
key: 4,
|
|
137
137
|
class: u([e.appendInnerClass, "flex items-center justify-center min-w-[32px] h-full px-1"])
|
|
138
138
|
}, [
|
|
139
139
|
k(e.$slots, "append-inner")
|
|
140
140
|
], 2)) : r("", !0),
|
|
141
|
-
e.suffix ? (o(),
|
|
141
|
+
e.suffix ? (o(), n("div", te, i(e.suffix), 1)) : r("", !0)
|
|
142
142
|
], 2),
|
|
143
|
-
e.hideDetails ? r("", !0) : (o(),
|
|
144
|
-
t(y) ? (o(),
|
|
143
|
+
e.hideDetails ? r("", !0) : (o(), n("div", le, [
|
|
144
|
+
t(y) ? (o(), n("div", {
|
|
145
145
|
key: 0,
|
|
146
146
|
id: `error-${m}`,
|
|
147
147
|
class: "text-red-500 text-sm text-center"
|
|
148
|
-
}, i(t(B) || e.errorMessage), 9,
|
|
149
|
-
e.counter && e.maxlength ? (o(),
|
|
148
|
+
}, i(t(B) || e.errorMessage), 9, se)) : e.hint && (e.persistentHint || t(b)) ? (o(), n("div", ne, i(e.hint), 1)) : r("", !0),
|
|
149
|
+
e.counter && e.maxlength ? (o(), n("div", oe, i(((F = t(f)) == null ? void 0 : F.length) || 0) + " / " + i(e.maxlength), 1)) : r("", !0)
|
|
150
150
|
]))
|
|
151
151
|
], 16)
|
|
152
152
|
], 512);
|
|
@@ -1,61 +1,62 @@
|
|
|
1
1
|
import { ref as a, inject as V, computed as E, watch as F, onUnmounted as T } from "vue";
|
|
2
2
|
import { debounce as j } from "../../../../utils/utils.js";
|
|
3
3
|
function R(u, r) {
|
|
4
|
-
const
|
|
4
|
+
const l = a(u.modelValue), o = a(!1), t = a(""), n = a(!1), g = a(null), h = a(null), s = a(!1), d = V("registerField", null), v = V("unregisterField", null), y = E(() => u.error || !!t.value && n.value), c = async () => {
|
|
5
5
|
for (const e of u.rules) {
|
|
6
|
-
const m = await Promise.resolve(e(
|
|
6
|
+
const m = await Promise.resolve(e(l.value));
|
|
7
7
|
if (m !== !0) return m;
|
|
8
8
|
}
|
|
9
9
|
return !0;
|
|
10
10
|
}, f = j(async () => {
|
|
11
11
|
const e = await c();
|
|
12
|
-
|
|
12
|
+
t.value = e === !0 ? "" : e;
|
|
13
13
|
}, u.debounce ?? 300);
|
|
14
14
|
F(() => u.modelValue, (e) => {
|
|
15
|
-
e !==
|
|
16
|
-
}), F(
|
|
15
|
+
e !== l.value && (s.value = !0, l.value = e);
|
|
16
|
+
}), F(l, () => {
|
|
17
17
|
if (s.value) {
|
|
18
18
|
s.value = !1;
|
|
19
19
|
return;
|
|
20
20
|
}
|
|
21
|
-
n.value = !0, r("update:modelValue",
|
|
21
|
+
n.value = !0, r("update:modelValue", l.value), u.validateOnBlur || f();
|
|
22
22
|
});
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
},
|
|
26
|
-
if (o.value = !1,
|
|
23
|
+
const b = (e) => {
|
|
24
|
+
l.value = e.target.value;
|
|
25
|
+
}, w = async () => {
|
|
26
|
+
if (o.value = !1, u.validateOnBlur) {
|
|
27
27
|
const e = await c();
|
|
28
|
-
|
|
28
|
+
t.value = e === !0 ? "" : e;
|
|
29
29
|
}
|
|
30
|
-
|
|
31
|
-
o.value = !0, r("focusInput");
|
|
30
|
+
r("blur");
|
|
32
31
|
}, B = () => {
|
|
33
|
-
|
|
32
|
+
o.value = !0, r("focus");
|
|
33
|
+
}, I = () => {
|
|
34
|
+
l.value = "", r("update:modelValue", ""), n.value = !0, u.validateOnBlur || f();
|
|
34
35
|
}, i = async () => {
|
|
35
36
|
n.value = !0;
|
|
36
37
|
const e = await c();
|
|
37
|
-
return
|
|
38
|
+
return t.value = e === !0 ? "" : e, e === !0;
|
|
38
39
|
}, O = () => {
|
|
39
|
-
|
|
40
|
+
l.value = u.modelValue, n.value = !1, t.value = "";
|
|
40
41
|
}, x = () => {
|
|
41
|
-
n.value = !1,
|
|
42
|
+
n.value = !1, t.value = "";
|
|
42
43
|
};
|
|
43
44
|
return d && d({ validate: i }), T(() => {
|
|
44
45
|
v && v({ validate: i });
|
|
45
46
|
}), {
|
|
46
47
|
inputField: g,
|
|
47
|
-
inputValue:
|
|
48
|
+
inputValue: l,
|
|
48
49
|
rootRef: h,
|
|
49
50
|
inputFocused: o,
|
|
50
|
-
validationError:
|
|
51
|
+
validationError: t,
|
|
51
52
|
hasError: y,
|
|
52
|
-
handleInput:
|
|
53
|
-
handleBlur:
|
|
54
|
-
focusInput:
|
|
53
|
+
handleInput: b,
|
|
54
|
+
handleBlur: w,
|
|
55
|
+
focusInput: B,
|
|
55
56
|
validate: i,
|
|
56
57
|
reset: O,
|
|
57
58
|
resetValidation: x,
|
|
58
|
-
clearInput:
|
|
59
|
+
clearInput: I
|
|
59
60
|
};
|
|
60
61
|
}
|
|
61
62
|
export {
|