adverich-kun-ui 0.1.359 → 0.1.360
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,98 +1,98 @@
|
|
|
1
|
-
import { mergeModels as
|
|
2
|
-
import { icons as
|
|
3
|
-
import { isNotEmpty as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import { useAutocomplete as
|
|
11
|
-
import { KunAutocompleteProps as
|
|
12
|
-
import
|
|
13
|
-
import
|
|
1
|
+
import { mergeModels as R, useModel as S, onMounted as te, ref as _, watch as oe, createElementBlock as C, openBlock as s, createVNode as n, unref as l, isRef as A, createSlots as ie, withCtx as i, createCommentVNode as w, Fragment as ne, renderList as ae, createBlock as m, createElementVNode as re, createTextVNode as V, toDisplayString as z, withModifiers as se } from "vue";
|
|
2
|
+
import { icons as f } from "../../../../icons/index.js";
|
|
3
|
+
import { isNotEmpty as ue, isArray as $ } from "../../../../utils/utils.js";
|
|
4
|
+
import de from "../../../KunInfiniteScroll/src/components/KunInfiniteScroll.vue.js";
|
|
5
|
+
import ce from "../../../KunList/src/components/KunList.vue.js";
|
|
6
|
+
import x from "../../../KunListItem/src/components/KunListItem.vue.js";
|
|
7
|
+
import F from "../../../KunListItemTitle/src/components/KunListItemTitle.vue.js";
|
|
8
|
+
import me from "../../../KunListItemSubtitle/src/components/KunListItemSubtitle.vue.js";
|
|
9
|
+
import fe from "../../../KunMenu/src/components/KunMenu.vue.js";
|
|
10
|
+
import { useAutocomplete as pe } from "../composables/useAutocomplete.js";
|
|
11
|
+
import { KunAutocompleteProps as he } from "../composables/KunAutocompleteProps.js";
|
|
12
|
+
import ve from "../../../KunTextField/src/components/KunTextField.vue.js";
|
|
13
|
+
import ye from "../../../KunChip/src/components/KunChip.vue.js";
|
|
14
14
|
import v from "../../../KunIcon/src/components/KunIcon.vue.js";
|
|
15
|
-
const
|
|
15
|
+
const ke = {
|
|
16
16
|
key: 0,
|
|
17
17
|
class: "flex justify-center align-center"
|
|
18
|
-
},
|
|
18
|
+
}, be = { class: "flex justify-center align-center" }, xe = {
|
|
19
19
|
__name: "KunAutocomplete",
|
|
20
|
-
props: /* @__PURE__ */
|
|
20
|
+
props: /* @__PURE__ */ R(he, {
|
|
21
21
|
modelValue: { default: null },
|
|
22
22
|
modelModifiers: {},
|
|
23
23
|
items: { default: [], type: Array, required: !0 },
|
|
24
24
|
itemsModifiers: {}
|
|
25
25
|
}),
|
|
26
|
-
emits: /* @__PURE__ */
|
|
27
|
-
setup(y, { emit:
|
|
28
|
-
const a =
|
|
26
|
+
emits: /* @__PURE__ */ R(["update:modelValue", "selectedItem", "createItem", "validation", "search"], ["update:modelValue", "update:items"]),
|
|
27
|
+
setup(y, { emit: B }) {
|
|
28
|
+
const a = S(y, "modelValue"), I = S(y, "items"), u = y, p = B, {
|
|
29
29
|
textFieldRef: k,
|
|
30
|
-
listRef:
|
|
30
|
+
listRef: b,
|
|
31
31
|
menuModel: r,
|
|
32
|
-
search:
|
|
33
|
-
removeItem:
|
|
34
|
-
clearSelection:
|
|
35
|
-
lightReset:
|
|
36
|
-
openMenu:
|
|
37
|
-
closeMenu:
|
|
38
|
-
toggleMenu:
|
|
39
|
-
onMenuKeydown:
|
|
40
|
-
getSelectedItem:
|
|
41
|
-
textArr:
|
|
42
|
-
getItemText:
|
|
43
|
-
isAlphanumeric:
|
|
44
|
-
checkDisabled:
|
|
45
|
-
itemToString:
|
|
46
|
-
placeholder:
|
|
47
|
-
} =
|
|
48
|
-
|
|
32
|
+
search: c,
|
|
33
|
+
removeItem: E,
|
|
34
|
+
clearSelection: N,
|
|
35
|
+
lightReset: T,
|
|
36
|
+
openMenu: g,
|
|
37
|
+
closeMenu: L,
|
|
38
|
+
toggleMenu: U,
|
|
39
|
+
onMenuKeydown: H,
|
|
40
|
+
getSelectedItem: O,
|
|
41
|
+
textArr: j,
|
|
42
|
+
getItemText: q,
|
|
43
|
+
isAlphanumeric: P,
|
|
44
|
+
checkDisabled: W,
|
|
45
|
+
itemToString: D,
|
|
46
|
+
placeholder: G
|
|
47
|
+
} = pe(u, p, a, I);
|
|
48
|
+
te(() => {
|
|
49
49
|
u.focusOnRender && k.value.focus();
|
|
50
50
|
});
|
|
51
|
-
const
|
|
51
|
+
const K = _(null), h = _(""), M = (e) => {
|
|
52
52
|
for (const o of u.rules) {
|
|
53
|
-
const
|
|
54
|
-
if (
|
|
55
|
-
return
|
|
53
|
+
const t = o(e);
|
|
54
|
+
if (t !== !0)
|
|
55
|
+
return h.value = t, p("validation", !1), !1;
|
|
56
56
|
}
|
|
57
|
-
return
|
|
57
|
+
return h.value = "", p("validation", !0), !0;
|
|
58
58
|
};
|
|
59
|
-
|
|
60
|
-
|
|
59
|
+
oe(() => a.value, (e, o) => {
|
|
60
|
+
ue(u.rules) && M(e);
|
|
61
61
|
});
|
|
62
|
-
function
|
|
62
|
+
function J() {
|
|
63
63
|
var e;
|
|
64
64
|
r.value = !1, (e = k.value.inputField) == null || e.focus();
|
|
65
65
|
}
|
|
66
|
-
function
|
|
67
|
-
var
|
|
66
|
+
function Q(e) {
|
|
67
|
+
var t, d;
|
|
68
68
|
const o = e.key;
|
|
69
69
|
if (o === "Tab" || o === "Shift") {
|
|
70
|
-
|
|
70
|
+
L();
|
|
71
71
|
return;
|
|
72
72
|
}
|
|
73
|
-
(
|
|
73
|
+
(P(o) || o === "Backspace") && g(), ["ArrowUp", "ArrowDown"].includes(o) && (e.preventDefault(), r.value || g(), console.log("listRef.value", b.value), (d = (t = b.value) == null ? void 0 : t.focusWithKey) == null || d.call(t, o));
|
|
74
74
|
}
|
|
75
|
-
function
|
|
76
|
-
|
|
75
|
+
function X(e) {
|
|
76
|
+
p("search", c);
|
|
77
77
|
}
|
|
78
|
-
function
|
|
79
|
-
|
|
78
|
+
function Y() {
|
|
79
|
+
M(a);
|
|
80
80
|
}
|
|
81
|
-
function
|
|
82
|
-
|
|
81
|
+
function Z(e) {
|
|
82
|
+
H(e);
|
|
83
83
|
}
|
|
84
|
-
function
|
|
84
|
+
function ee() {
|
|
85
85
|
}
|
|
86
86
|
return (e, o) => (s(), C("div", {
|
|
87
87
|
class: "w-full h-fit",
|
|
88
88
|
ref_key: "parentRef",
|
|
89
|
-
ref:
|
|
89
|
+
ref: K
|
|
90
90
|
}, [
|
|
91
|
-
|
|
92
|
-
modelValue:
|
|
91
|
+
n(ve, {
|
|
92
|
+
modelValue: l(c),
|
|
93
93
|
"onUpdate:modelValue": [
|
|
94
|
-
o[1] || (o[1] = (
|
|
95
|
-
|
|
94
|
+
o[1] || (o[1] = (t) => A(c) ? c.value = t : null),
|
|
95
|
+
X
|
|
96
96
|
],
|
|
97
97
|
label: e.label,
|
|
98
98
|
dirty: "",
|
|
@@ -101,114 +101,111 @@ const be = {
|
|
|
101
101
|
ref_key: "textFieldRef",
|
|
102
102
|
ref: k,
|
|
103
103
|
autocomplete: "off",
|
|
104
|
-
onFocusInput:
|
|
105
|
-
onHandleClick:
|
|
106
|
-
rounded:
|
|
107
|
-
onBlur:
|
|
108
|
-
onKeyDown:
|
|
109
|
-
placeholder: u.multiple &&
|
|
110
|
-
error: !!
|
|
111
|
-
"error-messages":
|
|
112
|
-
},
|
|
113
|
-
default:
|
|
114
|
-
|
|
115
|
-
(s(!0), C(
|
|
116
|
-
key:
|
|
104
|
+
onFocusInput: Y,
|
|
105
|
+
onHandleClick: l(U),
|
|
106
|
+
rounded: l(r) ? "rounded-t" : "rounded",
|
|
107
|
+
onBlur: ee,
|
|
108
|
+
onKeyDown: Q,
|
|
109
|
+
placeholder: u.multiple && l($)(a.value) && a.value.length ? "" : l(G),
|
|
110
|
+
error: !!h.value,
|
|
111
|
+
"error-messages": h.value
|
|
112
|
+
}, ie({
|
|
113
|
+
default: i(() => [
|
|
114
|
+
l($)(a.value) ? (s(), C("div", ke, [
|
|
115
|
+
(s(!0), C(ne, null, ae(a.value, (t) => (s(), m(ye, {
|
|
116
|
+
key: t.id ?? t.name,
|
|
117
117
|
size: "small",
|
|
118
118
|
class: "ml-1"
|
|
119
119
|
}, {
|
|
120
|
-
default:
|
|
121
|
-
|
|
122
|
-
V(
|
|
123
|
-
|
|
120
|
+
default: i(() => [
|
|
121
|
+
re("div", be, [
|
|
122
|
+
V(z(l(q)(t, e.itemTitle)) + " ", 1),
|
|
123
|
+
n(v, {
|
|
124
124
|
color: "error",
|
|
125
|
-
icon:
|
|
125
|
+
icon: l(f).close,
|
|
126
126
|
size: "small",
|
|
127
127
|
class: "ml-1",
|
|
128
|
-
onClick: (
|
|
128
|
+
onClick: (d) => l(E)(t)
|
|
129
129
|
}, null, 8, ["icon", "onClick"])
|
|
130
130
|
])
|
|
131
131
|
]),
|
|
132
132
|
_: 2
|
|
133
133
|
}, 1024))), 128))
|
|
134
134
|
])) : w("", !0),
|
|
135
|
-
|
|
135
|
+
n(fe, {
|
|
136
136
|
transition: "fade",
|
|
137
|
-
"onClick:outside":
|
|
138
|
-
modelValue:
|
|
139
|
-
"onUpdate:modelValue": o[0] || (o[0] = (
|
|
137
|
+
"onClick:outside": l(T),
|
|
138
|
+
modelValue: l(r),
|
|
139
|
+
"onUpdate:modelValue": o[0] || (o[0] = (t) => A(r) ? r.value = t : null),
|
|
140
140
|
activator: "parent",
|
|
141
141
|
"z-index": e.zIndex,
|
|
142
|
-
"parent-ref":
|
|
142
|
+
"parent-ref": K.value,
|
|
143
143
|
location: "bottom",
|
|
144
144
|
origin: "bottom left",
|
|
145
|
-
onHandleEscape:
|
|
145
|
+
onHandleEscape: J,
|
|
146
146
|
"close-on-content-click": e.closeOnSelect,
|
|
147
147
|
width: "w-full",
|
|
148
148
|
"max-height": e.maxHeight,
|
|
149
149
|
"hide-details": e.hideDetails
|
|
150
150
|
}, {
|
|
151
|
-
default:
|
|
152
|
-
|
|
153
|
-
"onClick:select":
|
|
151
|
+
default: i(() => [
|
|
152
|
+
n(ce, {
|
|
153
|
+
"onClick:select": l(O),
|
|
154
154
|
ref_key: "listRef",
|
|
155
|
-
ref:
|
|
156
|
-
onKeyDown:
|
|
155
|
+
ref: b,
|
|
156
|
+
onKeyDown: Z,
|
|
157
157
|
selectable: !0
|
|
158
158
|
}, {
|
|
159
|
-
default:
|
|
160
|
-
|
|
159
|
+
default: i(() => [
|
|
160
|
+
n(de, {
|
|
161
161
|
items: I.value,
|
|
162
|
-
search:
|
|
162
|
+
search: l(c),
|
|
163
163
|
"searchable-keys": u.searchableKeys,
|
|
164
164
|
virtual: !1,
|
|
165
165
|
"items-per-intersection": 10,
|
|
166
|
-
enabled:
|
|
166
|
+
enabled: l(r),
|
|
167
167
|
"item-height": 48
|
|
168
168
|
}, {
|
|
169
|
-
default:
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
}))
|
|
210
|
-
];
|
|
211
|
-
}),
|
|
169
|
+
default: i(({ item: t, index: d, empty: le }) => [
|
|
170
|
+
!le && t ? (s(), m(x, {
|
|
171
|
+
value: t,
|
|
172
|
+
key: d + 1,
|
|
173
|
+
id: d + 1,
|
|
174
|
+
disabled: l(W)(t),
|
|
175
|
+
"bg-items": e.bgItemListColor,
|
|
176
|
+
"hover-bg": e.hoverItemListColor,
|
|
177
|
+
activeClass: e.selectedItemListColor,
|
|
178
|
+
density: e.density,
|
|
179
|
+
selectable: !0
|
|
180
|
+
}, {
|
|
181
|
+
default: i(() => [
|
|
182
|
+
n(F, { class: "text-wrap" }, {
|
|
183
|
+
default: i(() => [
|
|
184
|
+
V(z(l(D)(t, e.itemTitle ?? l(j), "hasDefault")), 1)
|
|
185
|
+
]),
|
|
186
|
+
_: 2
|
|
187
|
+
}, 1024),
|
|
188
|
+
n(me, {
|
|
189
|
+
text: e.itemSubtitle ? l(D)(t, e.itemSubtitle) : ""
|
|
190
|
+
}, null, 8, ["text"])
|
|
191
|
+
]),
|
|
192
|
+
_: 2
|
|
193
|
+
}, 1032, ["value", "id", "disabled", "bg-items", "hover-bg", "activeClass", "density"])) : (s(), m(x, {
|
|
194
|
+
key: 1,
|
|
195
|
+
disabled: ""
|
|
196
|
+
}, {
|
|
197
|
+
default: i(() => [
|
|
198
|
+
n(F, { class: "text-center w-full text-gray-500" }, {
|
|
199
|
+
default: i(() => o[2] || (o[2] = [
|
|
200
|
+
V(" No hay elementos disponibles ")
|
|
201
|
+
])),
|
|
202
|
+
_: 1,
|
|
203
|
+
__: [2]
|
|
204
|
+
})
|
|
205
|
+
]),
|
|
206
|
+
_: 1
|
|
207
|
+
}))
|
|
208
|
+
]),
|
|
212
209
|
_: 1
|
|
213
210
|
}, 8, ["items", "search", "searchable-keys", "enabled"])
|
|
214
211
|
]),
|
|
@@ -222,28 +219,28 @@ const be = {
|
|
|
222
219
|
}, [
|
|
223
220
|
e.hasIcons ? {
|
|
224
221
|
name: "append-inner",
|
|
225
|
-
fn:
|
|
226
|
-
e.clearable && a.value ? (s(),
|
|
222
|
+
fn: i(() => [
|
|
223
|
+
e.clearable && a.value ? (s(), m(v, {
|
|
227
224
|
key: 0,
|
|
228
|
-
onClick:
|
|
225
|
+
onClick: l(N),
|
|
229
226
|
size: "small",
|
|
230
227
|
color: "error",
|
|
231
|
-
icon:
|
|
228
|
+
icon: l(f).close,
|
|
232
229
|
class: "mr-1 mt-1"
|
|
233
230
|
}, null, 8, ["onClick", "icon"])) : w("", !0),
|
|
234
|
-
|
|
231
|
+
n(v, {
|
|
235
232
|
color: "teal-darken-1",
|
|
236
233
|
size: "large",
|
|
237
234
|
class: "cursor-pointer",
|
|
238
|
-
icon:
|
|
239
|
-
onClick:
|
|
235
|
+
icon: l(r) ? l(f).menuUpOutline : l(f).menuDownOutline,
|
|
236
|
+
onClick: se(l(g), ["stop"])
|
|
240
237
|
}, null, 8, ["icon", "onClick"]),
|
|
241
|
-
e.required ? (s(),
|
|
238
|
+
e.required ? (s(), m(v, {
|
|
242
239
|
key: 1,
|
|
243
240
|
color: "teal-darken-1",
|
|
244
241
|
size: "x-small",
|
|
245
242
|
class: "mb-4",
|
|
246
|
-
icon:
|
|
243
|
+
icon: l(f).asterisk
|
|
247
244
|
}, null, 8, ["icon"])) : w("", !0)
|
|
248
245
|
]),
|
|
249
246
|
key: "0"
|
|
@@ -253,5 +250,5 @@ const be = {
|
|
|
253
250
|
}
|
|
254
251
|
};
|
|
255
252
|
export {
|
|
256
|
-
|
|
253
|
+
xe as default
|
|
257
254
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { mergeModels as
|
|
1
|
+
import { mergeModels as g, ref as v, useModel as D, provide as p, computed as B, onUpdated as C, createElementBlock as M, openBlock as S, mergeProps as I, withModifiers as E, renderSlot as L } from "vue";
|
|
2
2
|
const R = {
|
|
3
3
|
__name: "KunList",
|
|
4
|
-
props: /* @__PURE__ */
|
|
4
|
+
props: /* @__PURE__ */ g({
|
|
5
5
|
nav: Boolean,
|
|
6
6
|
sub: Boolean,
|
|
7
7
|
dense: Boolean,
|
|
@@ -20,39 +20,39 @@ const R = {
|
|
|
20
20
|
},
|
|
21
21
|
selectedModifiers: {}
|
|
22
22
|
}),
|
|
23
|
-
emits: /* @__PURE__ */
|
|
23
|
+
emits: /* @__PURE__ */ g(["keyDown", "click:select", "update:selected"], ["update:selected"]),
|
|
24
24
|
setup(o, { expose: w, emit: b }) {
|
|
25
|
-
const
|
|
25
|
+
const c = o, a = b, f = v(null), s = v([]), i = D(o, "selected");
|
|
26
26
|
p("registerListItemRef", (e) => {
|
|
27
|
-
e ?
|
|
28
|
-
const
|
|
29
|
-
return
|
|
30
|
-
}))
|
|
27
|
+
e ? e.isConnected && !s.value.includes(e) && (s.value.push(e), s.value.sort((t, n) => {
|
|
28
|
+
const r = t.id ?? "", l = n.id ?? "";
|
|
29
|
+
return r.localeCompare(l, void 0, { numeric: !0, sensitivity: "base" });
|
|
30
|
+
})) : s.value = s.value.filter((t) => t && t.isConnected);
|
|
31
31
|
});
|
|
32
|
-
const
|
|
32
|
+
const m = B(() => c.selectable && c.selectionMode === "multiple");
|
|
33
33
|
function y(e) {
|
|
34
|
-
if (!(!
|
|
35
|
-
if (
|
|
34
|
+
if (!(!c.selectable || e == null))
|
|
35
|
+
if (m.value) {
|
|
36
36
|
const t = i.value.includes(e);
|
|
37
37
|
i.value = t ? i.value.filter((n) => n !== e) : [...i.value, e];
|
|
38
38
|
} else
|
|
39
39
|
i.value = e;
|
|
40
40
|
}
|
|
41
41
|
C(() => {
|
|
42
|
-
|
|
42
|
+
s.value = s.value.filter((e) => e && e.isConnected);
|
|
43
43
|
});
|
|
44
44
|
function k(e) {
|
|
45
45
|
var t, n;
|
|
46
|
-
return !
|
|
46
|
+
return !c.selectable || e == null ? !1 : m.value ? (n = (t = i.value) == null ? void 0 : t.includes) == null ? void 0 : n.call(t, e) : i.value === e;
|
|
47
47
|
}
|
|
48
48
|
p("kunListContext", {
|
|
49
49
|
toggleItem: y,
|
|
50
50
|
isSelected: k
|
|
51
51
|
});
|
|
52
52
|
function A(e) {
|
|
53
|
-
var
|
|
53
|
+
var r;
|
|
54
54
|
a("keyDown", e);
|
|
55
|
-
const t = e.key, n =
|
|
55
|
+
const t = e.key, n = s.value.filter((l) => l && l.isConnected);
|
|
56
56
|
if (!(!n.length || !["ArrowUp", "ArrowDown", "Enter"].includes(t))) {
|
|
57
57
|
if (t === "Enter") {
|
|
58
58
|
const l = document.activeElement;
|
|
@@ -61,26 +61,26 @@ const R = {
|
|
|
61
61
|
}
|
|
62
62
|
if (t === "ArrowUp" || t === "ArrowDown") {
|
|
63
63
|
e.preventDefault();
|
|
64
|
-
const l = n.findIndex((
|
|
65
|
-
let
|
|
66
|
-
l === -1 ?
|
|
67
|
-
const
|
|
68
|
-
(
|
|
64
|
+
const l = n.findIndex((x) => x === document.activeElement);
|
|
65
|
+
let d = -1;
|
|
66
|
+
l === -1 ? d = t === "ArrowDown" ? 0 : n.length - 1 : t === "ArrowDown" ? d = (l + 1) % n.length : t === "ArrowUp" && (d = (l - 1 + n.length) % n.length);
|
|
67
|
+
const u = n[d];
|
|
68
|
+
(r = u == null ? void 0 : u.focus) == null || r.call(u);
|
|
69
69
|
return;
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
|
-
function
|
|
73
|
+
function h(e = "ArrowDown") {
|
|
74
74
|
var l;
|
|
75
|
-
const t =
|
|
75
|
+
const t = s.value.filter(Boolean);
|
|
76
76
|
if (!t.length) return;
|
|
77
|
-
const n = e === "ArrowDown" ? 0 : t.length - 1,
|
|
78
|
-
(l =
|
|
77
|
+
const n = e === "ArrowDown" ? 0 : t.length - 1, r = t[n];
|
|
78
|
+
(l = r == null ? void 0 : r.focus) == null || l.call(r);
|
|
79
79
|
}
|
|
80
|
-
return w({ focusWithKey:
|
|
80
|
+
return w({ focusWithKey: h, focus: () => {
|
|
81
81
|
var e, t;
|
|
82
82
|
return (t = (e = f.value) == null ? void 0 : e.focus) == null ? void 0 : t.call(e);
|
|
83
|
-
} }), (e, t) => (
|
|
83
|
+
} }), (e, t) => (S(), M("ul", I({
|
|
84
84
|
ref_key: "ulRef",
|
|
85
85
|
ref: f,
|
|
86
86
|
role: "list",
|