adverich-kun-ui 0.1.358 → 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.
Files changed (4) hide show
  1. package/dist/components/KunAutocomplete/src/components/KunAutocomplete.vue.js +151 -171
  2. package/dist/components/KunList/src/components/KunList.vue.js +23 -17
  3. package/dist/components/KunListItem/src/components/KunListItem.vue.js +81 -75
  4. package/package.json +1 -1
package/dist/components/KunAutocomplete/src/components/KunAutocomplete.vue.js CHANGED
@@ -1,231 +1,211 @@
1
- import { mergeModels as A, useModel as R, onMounted as ie, ref as $, watch as re, createElementBlock as k, openBlock as r, createVNode as i, unref as t, isRef as B, createSlots as ae, withCtx as n, createCommentVNode as v, Fragment as se, renderList as ue, createBlock as c, createElementVNode as de, createTextVNode as y, toDisplayString as V, normalizeClass as ce, withModifiers as me } from "vue";
2
- import { icons as m } from "../../../../icons/index.js";
3
- import { isNotEmpty as fe, isArray as F } from "../../../../utils/utils.js";
4
- import pe from "../../../KunInfiniteScroll/src/components/KunInfiniteScroll.vue.js";
5
- import he from "../../../KunList/src/components/KunList.vue.js";
6
- import T from "../../../KunListItem/src/components/KunListItem.vue.js";
7
- import x from "../../../KunListItemTitle/src/components/KunListItemTitle.vue.js";
8
- import ke from "../../../KunListItemSubtitle/src/components/KunListItemSubtitle.vue.js";
9
- import ve from "../../../KunMenu/src/components/KunMenu.vue.js";
10
- import { useAutocomplete as ye } from "../composables/useAutocomplete.js";
11
- import { KunAutocompleteProps as be } from "../composables/KunAutocompleteProps.js";
12
- import ge from "../../../KunTextField/src/components/KunTextField.vue.js";
13
- import Ce from "../../../KunBtn/src/components/KunBtn.vue.js";
14
- import we from "../../../KunChip/src/components/KunChip.vue.js";
15
- import b from "../../../KunIcon/src/components/KunIcon.vue.js";
16
- const Ve = {
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
+ import v from "../../../KunIcon/src/components/KunIcon.vue.js";
15
+ const ke = {
17
16
  key: 0,
18
17
  class: "flex justify-center align-center"
19
- }, Ie = { class: "flex justify-center align-center" }, Se = {
20
- key: 0,
21
- class: "sticky top-0 z-10 p-2 border-b"
22
- }, Ue = {
18
+ }, be = { class: "flex justify-center align-center" }, xe = {
23
19
  __name: "KunAutocomplete",
24
- props: /* @__PURE__ */ A(be, {
20
+ props: /* @__PURE__ */ R(he, {
25
21
  modelValue: { default: null },
26
22
  modelModifiers: {},
27
23
  items: { default: [], type: Array, required: !0 },
28
24
  itemsModifiers: {}
29
25
  }),
30
- emits: /* @__PURE__ */ A(["update:modelValue", "selectedItem", "createItem", "validation", "search"], ["update:modelValue", "update:items"]),
31
- setup(g, { emit: E }) {
32
- const a = R(g, "modelValue"), I = R(g, "items"), u = g, f = E, {
33
- textFieldRef: C,
34
- listRef: S,
35
- menuModel: s,
36
- search: d,
37
- removeItem: N,
38
- clearSelection: L,
39
- lightReset: U,
40
- openMenu: w,
41
- closeMenu: H,
42
- toggleMenu: O,
43
- onMenuKeydown: j,
44
- getSelectedItem: q,
45
- textArr: P,
46
- getItemText: W,
47
- isAlphanumeric: G,
48
- createItem: J,
49
- checkDisabled: Q,
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
+ textFieldRef: k,
30
+ listRef: b,
31
+ menuModel: r,
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,
50
45
  itemToString: D,
51
- placeholder: X
52
- } = ye(u, f, a, I);
53
- ie(() => {
54
- u.focusOnRender && C.value.focus();
46
+ placeholder: G
47
+ } = pe(u, p, a, I);
48
+ te(() => {
49
+ u.focusOnRender && k.value.focus();
55
50
  });
56
- const K = $(null), p = $(""), M = (e) => {
51
+ const K = _(null), h = _(""), M = (e) => {
57
52
  for (const o of u.rules) {
58
- const l = o(e);
59
- if (l !== !0)
60
- return p.value = l, f("validation", !1), !1;
53
+ const t = o(e);
54
+ if (t !== !0)
55
+ return h.value = t, p("validation", !1), !1;
61
56
  }
62
- return p.value = "", f("validation", !0), !0;
57
+ return h.value = "", p("validation", !0), !0;
63
58
  };
64
- re(() => a.value, (e, o) => {
65
- fe(u.rules) && M(e);
59
+ oe(() => a.value, (e, o) => {
60
+ ue(u.rules) && M(e);
66
61
  });
67
- function Y() {
62
+ function J() {
68
63
  var e;
69
- s.value = !1, (e = C.value.inputField) == null || e.focus();
64
+ r.value = !1, (e = k.value.inputField) == null || e.focus();
70
65
  }
71
- function Z(e) {
72
- var l, h;
66
+ function Q(e) {
67
+ var t, d;
73
68
  const o = e.key;
74
69
  if (o === "Tab" || o === "Shift") {
75
- H();
70
+ L();
76
71
  return;
77
72
  }
78
- (G(o) || o === "Backspace") && w(), ["ArrowUp", "ArrowDown"].includes(o) && (e.preventDefault(), s.value || w(), (h = (l = S.value) == null ? void 0 : l.focusWithKey) == null || h.call(l, o));
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));
79
74
  }
80
- function ee(e) {
81
- f("search", d);
75
+ function X(e) {
76
+ p("search", c);
82
77
  }
83
- function le() {
78
+ function Y() {
84
79
  M(a);
85
80
  }
86
- function te(e) {
87
- j(e);
81
+ function Z(e) {
82
+ H(e);
88
83
  }
89
- function oe() {
84
+ function ee() {
90
85
  }
91
- return (e, o) => (r(), k("div", {
86
+ return (e, o) => (s(), C("div", {
92
87
  class: "w-full h-fit",
93
88
  ref_key: "parentRef",
94
89
  ref: K
95
90
  }, [
96
- i(ge, {
97
- modelValue: t(d),
91
+ n(ve, {
92
+ modelValue: l(c),
98
93
  "onUpdate:modelValue": [
99
- o[1] || (o[1] = (l) => B(d) ? d.value = l : null),
100
- ee
94
+ o[1] || (o[1] = (t) => A(c) ? c.value = t : null),
95
+ X
101
96
  ],
102
97
  label: e.label,
103
98
  dirty: "",
104
99
  "hide-details": e.hideDetails,
105
100
  density: e.density,
106
101
  ref_key: "textFieldRef",
107
- ref: C,
102
+ ref: k,
108
103
  autocomplete: "off",
109
- onFocusInput: le,
110
- onHandleClick: t(O),
111
- rounded: t(s) ? "rounded-t" : "rounded",
112
- onBlur: oe,
113
- onKeyDown: Z,
114
- placeholder: u.multiple && t(F)(a.value) && a.value.length ? "" : t(X),
115
- error: !!p.value,
116
- "error-messages": p.value
117
- }, ae({
118
- default: n(() => [
119
- t(F)(a.value) ? (r(), k("div", Ve, [
120
- (r(!0), k(se, null, ue(a.value, (l) => (r(), c(we, {
121
- key: l.id ?? l.name,
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,
122
117
  size: "small",
123
118
  class: "ml-1"
124
119
  }, {
125
- default: n(() => [
126
- de("div", Ie, [
127
- y(V(t(W)(l, e.itemTitle)) + " ", 1),
128
- i(b, {
120
+ default: i(() => [
121
+ re("div", be, [
122
+ V(z(l(q)(t, e.itemTitle)) + " ", 1),
123
+ n(v, {
129
124
  color: "error",
130
- icon: t(m).close,
125
+ icon: l(f).close,
131
126
  size: "small",
132
127
  class: "ml-1",
133
- onClick: (h) => t(N)(l)
128
+ onClick: (d) => l(E)(t)
134
129
  }, null, 8, ["icon", "onClick"])
135
130
  ])
136
131
  ]),
137
132
  _: 2
138
133
  }, 1024))), 128))
139
- ])) : v("", !0),
140
- i(ve, {
134
+ ])) : w("", !0),
135
+ n(fe, {
141
136
  transition: "fade",
142
- "onClick:outside": t(U),
143
- modelValue: t(s),
144
- "onUpdate:modelValue": o[0] || (o[0] = (l) => B(s) ? s.value = l : null),
137
+ "onClick:outside": l(T),
138
+ modelValue: l(r),
139
+ "onUpdate:modelValue": o[0] || (o[0] = (t) => A(r) ? r.value = t : null),
145
140
  activator: "parent",
146
141
  "z-index": e.zIndex,
147
142
  "parent-ref": K.value,
148
143
  location: "bottom",
149
144
  origin: "bottom left",
150
- onHandleEscape: Y,
145
+ onHandleEscape: J,
151
146
  "close-on-content-click": e.closeOnSelect,
152
147
  width: "w-full",
153
148
  "max-height": e.maxHeight,
154
149
  "hide-details": e.hideDetails
155
150
  }, {
156
- default: n(() => [
157
- e.hasCreateItem ? (r(), k("div", Se, [
158
- i(Ce, {
159
- onClick: t(J),
160
- bgColor: e.btnCreateBg,
161
- class: ce(e.btnCreateClass)
162
- }, {
163
- default: n(() => [
164
- y(V(e.btnCreateText), 1)
165
- ]),
166
- _: 1
167
- }, 8, ["onClick", "bgColor", "class"])
168
- ])) : v("", !0),
169
- i(he, {
170
- "onClick:select": t(q),
151
+ default: i(() => [
152
+ n(ce, {
153
+ "onClick:select": l(O),
171
154
  ref_key: "listRef",
172
- ref: S,
173
- onKeyDown: te,
155
+ ref: b,
156
+ onKeyDown: Z,
174
157
  selectable: !0
175
158
  }, {
176
- default: n(() => [
177
- i(pe, {
159
+ default: i(() => [
160
+ n(de, {
178
161
  items: I.value,
179
- search: t(d),
162
+ search: l(c),
180
163
  "searchable-keys": u.searchableKeys,
181
164
  virtual: !1,
182
165
  "items-per-intersection": 10,
183
- enabled: t(s),
166
+ enabled: l(r),
184
167
  "item-height": 48
185
168
  }, {
186
- default: n(({ item: l, index: h, empty: ne }) => {
187
- var _, z;
188
- return [
189
- !ne && l ? (r(), c(T, {
190
- value: l,
191
- key: ((_ = l.id) == null ? void 0 : _.toString()) ?? l.name,
192
- disabled: t(Q)(l),
193
- "bg-items": e.bgItemListColor,
194
- "hover-bg": e.hoverItemListColor,
195
- activeClass: e.selectedItemListColor,
196
- density: e.density,
197
- id: ((z = l.id) == null ? void 0 : z.toString()) ?? l.name,
198
- selectable: !0
199
- }, {
200
- default: n(() => [
201
- i(x, { class: "text-wrap" }, {
202
- default: n(() => [
203
- y(V(t(D)(l, e.itemTitle ?? t(P), "hasDefault")), 1)
204
- ]),
205
- _: 2
206
- }, 1024),
207
- i(ke, {
208
- text: e.itemSubtitle ? t(D)(l, e.itemSubtitle) : ""
209
- }, null, 8, ["text"])
210
- ]),
211
- _: 2
212
- }, 1032, ["value", "disabled", "bg-items", "hover-bg", "activeClass", "density", "id"])) : (r(), c(T, {
213
- key: 1,
214
- disabled: ""
215
- }, {
216
- default: n(() => [
217
- i(x, { class: "text-center w-full text-gray-500" }, {
218
- default: n(() => o[2] || (o[2] = [
219
- y(" No hay elementos disponibles ")
220
- ])),
221
- _: 1,
222
- __: [2]
223
- })
224
- ]),
225
- _: 1
226
- }))
227
- ];
228
- }),
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
+ ]),
229
209
  _: 1
230
210
  }, 8, ["items", "search", "searchable-keys", "enabled"])
231
211
  ]),
@@ -239,29 +219,29 @@ const Ve = {
239
219
  }, [
240
220
  e.hasIcons ? {
241
221
  name: "append-inner",
242
- fn: n(() => [
243
- e.clearable && a.value ? (r(), c(b, {
222
+ fn: i(() => [
223
+ e.clearable && a.value ? (s(), m(v, {
244
224
  key: 0,
245
- onClick: t(L),
225
+ onClick: l(N),
246
226
  size: "small",
247
227
  color: "error",
248
- icon: t(m).close,
228
+ icon: l(f).close,
249
229
  class: "mr-1 mt-1"
250
- }, null, 8, ["onClick", "icon"])) : v("", !0),
251
- i(b, {
230
+ }, null, 8, ["onClick", "icon"])) : w("", !0),
231
+ n(v, {
252
232
  color: "teal-darken-1",
253
233
  size: "large",
254
234
  class: "cursor-pointer",
255
- icon: t(s) ? t(m).menuUpOutline : t(m).menuDownOutline,
256
- onClick: me(t(w), ["stop"])
235
+ icon: l(r) ? l(f).menuUpOutline : l(f).menuDownOutline,
236
+ onClick: se(l(g), ["stop"])
257
237
  }, null, 8, ["icon", "onClick"]),
258
- e.required ? (r(), c(b, {
238
+ e.required ? (s(), m(v, {
259
239
  key: 1,
260
240
  color: "teal-darken-1",
261
241
  size: "x-small",
262
242
  class: "mb-4",
263
- icon: t(m).asterisk
264
- }, null, 8, ["icon"])) : v("", !0)
243
+ icon: l(f).asterisk
244
+ }, null, 8, ["icon"])) : w("", !0)
265
245
  ]),
266
246
  key: "0"
267
247
  } : void 0
@@ -270,5 +250,5 @@ const Ve = {
270
250
  }
271
251
  };
272
252
  export {
273
- Ue as default
253
+ xe as default
274
254
  };
package/dist/components/KunList/src/components/KunList.vue.js CHANGED
@@ -1,4 +1,4 @@
1
- import { mergeModels as g, ref as w, useModel as D, provide as p, computed as B, createElementBlock as M, openBlock as S, mergeProps as I, withModifiers as E, renderSlot as L } from "vue";
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
4
  props: /* @__PURE__ */ g({
@@ -21,32 +21,38 @@ const R = {
21
21
  selectedModifiers: {}
22
22
  }),
23
23
  emits: /* @__PURE__ */ g(["keyDown", "click:select", "update:selected"], ["update:selected"]),
24
- setup(o, { expose: b, emit: y }) {
25
- const u = o, a = y, f = w(null), c = w([]), s = D(o, "selected");
24
+ setup(o, { expose: w, emit: b }) {
25
+ const c = o, a = b, f = v(null), s = v([]), i = D(o, "selected");
26
26
  p("registerListItemRef", (e) => {
27
- e && !c.value.includes(e) && c.value.push(e);
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);
28
31
  });
29
- const m = B(() => u.selectable && u.selectionMode === "multiple");
30
- function v(e) {
31
- if (!(!u.selectable || e == null))
32
+ const m = B(() => c.selectable && c.selectionMode === "multiple");
33
+ function y(e) {
34
+ if (!(!c.selectable || e == null))
32
35
  if (m.value) {
33
- const t = s.value.includes(e);
34
- s.value = t ? s.value.filter((n) => n !== e) : [...s.value, e];
36
+ const t = i.value.includes(e);
37
+ i.value = t ? i.value.filter((n) => n !== e) : [...i.value, e];
35
38
  } else
36
- s.value = e;
39
+ i.value = e;
37
40
  }
41
+ C(() => {
42
+ s.value = s.value.filter((e) => e && e.isConnected);
43
+ });
38
44
  function k(e) {
39
45
  var t, n;
40
- return !u.selectable || e == null ? !1 : m.value ? (n = (t = s.value) == null ? void 0 : t.includes) == null ? void 0 : n.call(t, e) : s.value === e;
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;
41
47
  }
42
48
  p("kunListContext", {
43
- toggleItem: v,
49
+ toggleItem: y,
44
50
  isSelected: k
45
51
  });
46
52
  function A(e) {
47
53
  var r;
48
54
  a("keyDown", e);
49
- const t = e.key, n = c.value.filter(Boolean);
55
+ const t = e.key, n = s.value.filter((l) => l && l.isConnected);
50
56
  if (!(!n.length || !["ArrowUp", "ArrowDown", "Enter"].includes(t))) {
51
57
  if (t === "Enter") {
52
58
  const l = document.activeElement;
@@ -58,20 +64,20 @@ const R = {
58
64
  const l = n.findIndex((x) => x === document.activeElement);
59
65
  let d = -1;
60
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);
61
- const i = n[d];
62
- (r = i == null ? void 0 : i.focus) == null || r.call(i);
67
+ const u = n[d];
68
+ (r = u == null ? void 0 : u.focus) == null || r.call(u);
63
69
  return;
64
70
  }
65
71
  }
66
72
  }
67
73
  function h(e = "ArrowDown") {
68
74
  var l;
69
- const t = c.value.filter(Boolean);
75
+ const t = s.value.filter(Boolean);
70
76
  if (!t.length) return;
71
77
  const n = e === "ArrowDown" ? 0 : t.length - 1, r = t[n];
72
78
  (l = r == null ? void 0 : r.focus) == null || l.call(r);
73
79
  }
74
- return b({ focusWithKey: h, focus: () => {
80
+ return w({ focusWithKey: h, focus: () => {
75
81
  var e, t;
76
82
  return (t = (e = f.value) == null ? void 0 : e.focus) == null ? void 0 : t.call(e);
77
83
  } }), (e, t) => (S(), M("ul", I({
package/dist/components/KunListItem/src/components/KunListItem.vue.js CHANGED
@@ -1,19 +1,19 @@
1
- import { useAttrs as q, computed as r, ref as H, inject as R, onMounted as J, onBeforeUnmount as Q, createBlock as u, openBlock as a, unref as T, withCtx as B, resolveDynamicComponent as v, mergeProps as h, withKeys as L, withModifiers as N, createElementVNode as C, createElementBlock as n, createCommentVNode as s, renderSlot as c, normalizeClass as i, toDisplayString as I } from "vue";
2
- import P from "../../../KunIcon/src/components/KunIcon.vue.js";
3
- import { RouterLink as W } from "vue-router";
4
- const X = { class: "flex w-full items-center" }, Y = {
1
+ import { useAttrs as H, computed as r, ref as J, inject as R, getCurrentInstance as Q, onMounted as T, onBeforeUnmount as W, createBlock as o, openBlock as l, unref as X, withCtx as $, resolveDynamicComponent as v, mergeProps as h, withKeys as L, withModifiers as P, createElementVNode as C, createElementBlock as a, createCommentVNode as s, renderSlot as c, normalizeClass as i, toDisplayString as I } from "vue";
2
+ import M from "../../../KunIcon/src/components/KunIcon.vue.js";
3
+ import { RouterLink as Y } from "vue-router";
4
+ const Z = { class: "flex w-full items-center" }, _ = {
5
5
  key: 0,
6
6
  class: "shrink-0 flex items-center gap-2 me-2"
7
- }, Z = ["src"], _ = {
7
+ }, ee = ["src"], te = {
8
8
  key: 1,
9
9
  class: "shrink-0 flex items-center gap-2 ms-3"
10
- }, ee = ["src"], te = { class: "flex w-full items-center" }, le = {
10
+ }, ne = ["src"], le = { class: "flex w-full items-center" }, ae = {
11
11
  key: 0,
12
12
  class: "shrink-0 flex items-center gap-2 me-2"
13
- }, ae = ["src"], ne = {
13
+ }, se = ["src"], re = {
14
14
  key: 1,
15
15
  class: "shrink-0 flex items-center gap-2 ms-3"
16
- }, se = ["src"], re = "w-full flex transition duration-150 ease-in-out", oe = {
16
+ }, ie = ["src"], de = "w-full flex transition duration-150 ease-in-out", fe = {
17
17
  __name: "KunListItem",
18
18
  props: {
19
19
  value: [String, Number, Boolean, Object, Array, null],
@@ -46,31 +46,35 @@ const X = { class: "flex w-full items-center" }, Y = {
46
46
  titleClass: { type: String, default: "font-medium" },
47
47
  subtitle: [String, Number, Boolean],
48
48
  subtitleClass: { type: String, default: "text-sm text-slate-800 dark:text-slate-200" },
49
- containerClass: { type: [String, Array, Object], default: "" }
49
+ containerClass: { type: [String, Array, Object], default: "" },
50
+ id: [String, Number]
50
51
  },
51
52
  emits: ["click"],
52
53
  setup(e, { emit: D }) {
53
- const $ = q(), x = r(() => $.class), j = r(() => {
54
- const { class: l, ...m } = $;
54
+ const B = H(), x = r(() => B.class), j = r(() => {
55
+ const { class: n, ...m } = B;
55
56
  return m;
56
- }), t = e, G = D, f = H(null), y = R("registerListItemRef", null), o = R("kunListContext", null);
57
- J(() => {
58
- y && f.value && y(f.value);
59
- }), Q(() => {
60
- y && y(null);
57
+ }), t = e, G = D, f = J(null), g = R("registerListItemRef", null), u = R("kunListContext", null), E = r(() => {
58
+ var n;
59
+ return t.id ? t.id : `kun-list-item-${((n = Q()) == null ? void 0 : n.uid) ?? Math.random().toString(36).slice(2, 7)}`;
61
60
  });
62
- const g = (l) => typeof l == "object" || typeof l == "function", E = r(() => !!(t.prependIcon || t.prependAvatar)), K = r(() => !!(t.appendIcon || t.appendAvatar)), S = r(() => {
63
- var l;
64
- return ((l = o == null ? void 0 : o.isSelected) == null ? void 0 : l.call(o, t.value)) ?? !1;
65
- }), w = r(() => t.active), M = r(() => !!t.to);
66
- function b(l, m = null) {
61
+ T(() => {
62
+ g && f.value && g(f.value);
63
+ }), W(() => {
64
+ g && g(null);
65
+ });
66
+ const y = (n) => typeof n == "object" || typeof n == "function", K = r(() => !!(t.prependIcon || t.prependAvatar)), N = r(() => !!(t.appendIcon || t.appendAvatar)), S = r(() => {
67
+ var n;
68
+ return ((n = u == null ? void 0 : u.isSelected) == null ? void 0 : n.call(u, t.value)) ?? !1;
69
+ }), w = r(() => t.active), V = r(() => !!t.to);
70
+ function b(n, m = null) {
67
71
  var p, k;
68
72
  if (t.disabled) return;
69
- G("click", l);
73
+ G("click", n);
70
74
  const d = ((p = f.value) == null ? void 0 : p.$el) ?? f.value;
71
- d != null && d.dispatchEvent && d.dispatchEvent(new CustomEvent("select", { detail: t.value, bubbles: !0 })), o && t.selectable && t.value !== null && ((k = o.toggleItem) == null || k.call(o, t.value), d != null && d.dispatchEvent && d.dispatchEvent(new CustomEvent("selected", { detail: t.value, bubbles: !0 }))), m && m(l);
75
+ d != null && d.dispatchEvent && d.dispatchEvent(new CustomEvent("select", { detail: t.value, bubbles: !0 })), u && t.selectable && t.value !== null && ((k = u.toggleItem) == null || k.call(u, t.value), d != null && d.dispatchEvent && d.dispatchEvent(new CustomEvent("selected", { detail: t.value, bubbles: !0 }))), m && m(n);
72
76
  }
73
- const V = r(() => {
77
+ const z = r(() => {
74
78
  switch (t.variant) {
75
79
  case "outlined":
76
80
  return "border border-gray-300 dark:border-gray-700";
@@ -85,7 +89,7 @@ const X = { class: "flex w-full items-center" }, Y = {
85
89
  default:
86
90
  return "";
87
91
  }
88
- }), z = r(() => {
92
+ }), F = r(() => {
89
93
  switch (t.density) {
90
94
  case "comfortable":
91
95
  return "py-2";
@@ -94,12 +98,12 @@ const X = { class: "flex w-full items-center" }, Y = {
94
98
  default:
95
99
  return "py-3";
96
100
  }
97
- }), F = r(() => t.tile ? "rounded-none" : t.rounded === !0 ? "rounded-md" : t.rounded === !1 ? "" : `rounded-${t.rounded}`), U = r(() => t.ripple ? "relative overflow-hidden" : ""), O = r(() => [
98
- re,
99
- V.value,
101
+ }), U = r(() => t.tile ? "rounded-none" : t.rounded === !0 ? "rounded-md" : t.rounded === !1 ? "" : `rounded-${t.rounded}`), q = r(() => t.ripple ? "relative overflow-hidden" : ""), O = r(() => [
102
+ de,
100
103
  z.value,
101
104
  F.value,
102
105
  U.value,
106
+ q.value,
103
107
  t.textColor,
104
108
  t.itemPosition,
105
109
  t.bgItems,
@@ -111,14 +115,15 @@ const X = { class: "flex w-full items-center" }, Y = {
111
115
  },
112
116
  t.containerClass
113
117
  ]);
114
- return (l, m) => M.value ? (a(), u(T(W), {
118
+ return (n, m) => V.value ? (l(), o(X(Y), {
115
119
  key: 0,
116
120
  to: e.to,
117
121
  replace: e.replace,
118
122
  custom: !0
119
123
  }, {
120
- default: B(({ href: d, navigate: p, isActive: k }) => [
121
- (a(), u(v(e.tag), h({
124
+ default: $(({ href: d, navigate: p, isActive: k }) => [
125
+ (l(), o(v(e.tag), h({
126
+ id: E.value,
122
127
  ref_key: "liRef",
123
128
  ref: f,
124
129
  href: d,
@@ -128,20 +133,20 @@ const X = { class: "flex w-full items-center" }, Y = {
128
133
  tabindex: "-1",
129
134
  class: O.value,
130
135
  onClick: (A) => b(A, p),
131
- onKeydown: L(N((A) => b(A, p), ["prevent"]), ["enter"])
132
- }, l.$attrs), {
133
- default: B(() => [
134
- C("div", X, [
135
- E.value || l.$slots.prepend ? (a(), n("div", Y, [
136
- c(l.$slots, "prepend", {}, () => [
137
- e.prependAvatar ? (a(), n("img", {
136
+ onKeydown: L(P((A) => b(A, p), ["prevent"]), ["enter"])
137
+ }, n.$attrs), {
138
+ default: $(() => [
139
+ C("div", Z, [
140
+ K.value || n.$slots.prepend ? (l(), a("div", _, [
141
+ c(n.$slots, "prepend", {}, () => [
142
+ e.prependAvatar ? (l(), a("img", {
138
143
  key: 0,
139
144
  src: e.prependAvatar,
140
145
  class: i(["rounded-full", e.prependClass])
141
- }, null, 10, Z)) : g(e.prependIcon) ? (a(), u(v(e.prependIcon), {
146
+ }, null, 10, ee)) : y(e.prependIcon) ? (l(), o(v(e.prependIcon), {
142
147
  key: 1,
143
148
  class: i(e.prependClass)
144
- }, null, 8, ["class"])) : typeof e.prependIcon == "string" ? (a(), u(P, {
149
+ }, null, 8, ["class"])) : typeof e.prependIcon == "string" ? (l(), o(M, {
145
150
  key: 2,
146
151
  icon: e.prependIcon,
147
152
  class: i(e.prependClass)
@@ -151,32 +156,32 @@ const X = { class: "flex w-full items-center" }, Y = {
151
156
  C("div", h({
152
157
  class: ["flex flex-col min-w-0 flex-1", x.value]
153
158
  }, j.value), [
154
- c(l.$slots, "default", {}, () => [
155
- c(l.$slots, "title", {}, () => [
156
- e.title ? (a(), n("div", {
159
+ c(n.$slots, "default", {}, () => [
160
+ c(n.$slots, "title", {}, () => [
161
+ e.title ? (l(), a("div", {
157
162
  key: 0,
158
163
  class: i(["truncate", e.titleClass])
159
164
  }, I(e.title), 3)) : s("", !0)
160
165
  ]),
161
- c(l.$slots, "subtitle", {}, () => [
162
- e.subtitle ? (a(), n("div", {
166
+ c(n.$slots, "subtitle", {}, () => [
167
+ e.subtitle ? (l(), a("div", {
163
168
  key: 0,
164
169
  class: i(["truncate", e.subtitleClass])
165
170
  }, I(e.subtitle), 3)) : s("", !0)
166
171
  ])
167
172
  ])
168
173
  ], 16),
169
- K.value ? (a(), n("div", _, [
170
- c(l.$slots, "append", {}, () => [
171
- e.appendAvatar ? (a(), n("img", {
174
+ N.value ? (l(), a("div", te, [
175
+ c(n.$slots, "append", {}, () => [
176
+ e.appendAvatar ? (l(), a("img", {
172
177
  key: 0,
173
178
  src: e.appendAvatar,
174
179
  class: "w-8 h-8 rounded-full"
175
- }, null, 8, ee)) : s("", !0),
176
- g(e.appendIcon) ? (a(), u(v(e.appendIcon), {
180
+ }, null, 8, ne)) : s("", !0),
181
+ y(e.appendIcon) ? (l(), o(v(e.appendIcon), {
177
182
  key: 1,
178
183
  class: "w-5 h-5"
179
- })) : e.appendIcon ? (a(), n("i", {
184
+ })) : e.appendIcon ? (l(), a("i", {
180
185
  key: 2,
181
186
  class: i([e.appendClass, "text-xl leading-none"])
182
187
  }, null, 2)) : s("", !0)
@@ -185,11 +190,12 @@ const X = { class: "flex w-full items-center" }, Y = {
185
190
  ])
186
191
  ]),
187
192
  _: 2
188
- }, 1040, ["href", "aria-selected", "aria-disabled", "class", "onClick", "onKeydown"]))
193
+ }, 1040, ["id", "href", "aria-selected", "aria-disabled", "class", "onClick", "onKeydown"]))
189
194
  ]),
190
195
  _: 3
191
- }, 8, ["to", "replace"])) : (a(), u(v(e.tag), h({
196
+ }, 8, ["to", "replace"])) : (l(), o(v(e.tag), h({
192
197
  key: 1,
198
+ id: E.value,
193
199
  ref_key: "liRef",
194
200
  ref: f,
195
201
  role: "option",
@@ -198,20 +204,20 @@ const X = { class: "flex w-full items-center" }, Y = {
198
204
  tabindex: "-1",
199
205
  class: [O.value],
200
206
  onClick: b,
201
- onKeydown: L(N(b, ["prevent"]), ["enter"])
202
- }, l.$attrs), {
203
- default: B(() => [
204
- C("div", te, [
205
- E.value || l.$slots.prepend ? (a(), n("div", le, [
206
- c(l.$slots, "prepend", {}, () => [
207
- e.prependAvatar ? (a(), n("img", {
207
+ onKeydown: L(P(b, ["prevent"]), ["enter"])
208
+ }, n.$attrs), {
209
+ default: $(() => [
210
+ C("div", le, [
211
+ K.value || n.$slots.prepend ? (l(), a("div", ae, [
212
+ c(n.$slots, "prepend", {}, () => [
213
+ e.prependAvatar ? (l(), a("img", {
208
214
  key: 0,
209
215
  src: e.prependAvatar,
210
216
  class: i(["rounded-full", e.prependClass])
211
- }, null, 10, ae)) : g(e.prependIcon) ? (a(), u(v(e.prependIcon), {
217
+ }, null, 10, se)) : y(e.prependIcon) ? (l(), o(v(e.prependIcon), {
212
218
  key: 1,
213
219
  class: i(e.prependClass)
214
- }, null, 8, ["class"])) : typeof e.prependIcon == "string" ? (a(), u(P, {
220
+ }, null, 8, ["class"])) : typeof e.prependIcon == "string" ? (l(), o(M, {
215
221
  key: 2,
216
222
  icon: e.prependIcon,
217
223
  class: i(e.prependClass)
@@ -221,32 +227,32 @@ const X = { class: "flex w-full items-center" }, Y = {
221
227
  C("div", h({
222
228
  class: ["flex flex-col min-w-0 flex-1", x.value]
223
229
  }, j.value), [
224
- c(l.$slots, "default", {}, () => [
225
- c(l.$slots, "title", {}, () => [
226
- e.title ? (a(), n("div", {
230
+ c(n.$slots, "default", {}, () => [
231
+ c(n.$slots, "title", {}, () => [
232
+ e.title ? (l(), a("div", {
227
233
  key: 0,
228
234
  class: i(["truncate", e.titleClass])
229
235
  }, I(e.title), 3)) : s("", !0)
230
236
  ]),
231
- c(l.$slots, "subtitle", {}, () => [
232
- e.subtitle ? (a(), n("div", {
237
+ c(n.$slots, "subtitle", {}, () => [
238
+ e.subtitle ? (l(), a("div", {
233
239
  key: 0,
234
240
  class: i(["truncate", e.subtitleClass])
235
241
  }, I(e.subtitle), 3)) : s("", !0)
236
242
  ])
237
243
  ])
238
244
  ], 16),
239
- K.value ? (a(), n("div", ne, [
240
- c(l.$slots, "append", {}, () => [
241
- e.appendAvatar ? (a(), n("img", {
245
+ N.value ? (l(), a("div", re, [
246
+ c(n.$slots, "append", {}, () => [
247
+ e.appendAvatar ? (l(), a("img", {
242
248
  key: 0,
243
249
  src: e.appendAvatar,
244
250
  class: "w-8 h-8 rounded-full"
245
- }, null, 8, se)) : s("", !0),
246
- g(e.appendIcon) ? (a(), u(v(e.appendIcon), {
251
+ }, null, 8, ie)) : s("", !0),
252
+ y(e.appendIcon) ? (l(), o(v(e.appendIcon), {
247
253
  key: 1,
248
254
  class: "w-5 h-5"
249
- })) : e.appendIcon ? (a(), n("i", {
255
+ })) : e.appendIcon ? (l(), a("i", {
250
256
  key: 2,
251
257
  class: i([e.appendIcon, "text-xl leading-none"])
252
258
  }, null, 2)) : s("", !0)
@@ -255,9 +261,9 @@ const X = { class: "flex w-full items-center" }, Y = {
255
261
  ])
256
262
  ]),
257
263
  _: 3
258
- }, 16, ["aria-selected", "aria-disabled", "class", "onKeydown"]));
264
+ }, 16, ["id", "aria-selected", "aria-disabled", "class", "onKeydown"]));
259
265
  }
260
266
  };
261
267
  export {
262
- oe as default
268
+ fe as default
263
269
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "adverich-kun-ui",
3
- "version": "0.1.358",
3
+ "version": "0.1.360",
4
4
  "type": "module",
5
5
  "description": "Una librería de componentes Vue.js con Tailwind CSS",
6
6
  "main": "dist/index.js",