adverich-kun-ui 0.1.410 → 0.1.411

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,51 +1,53 @@
1
- import { useAttrs as oe, ref as te, getCurrentInstance as ne, computed as a, createElementBlock as l, openBlock as s, mergeProps as A, renderSlot as i, createElementVNode as d, createCommentVNode as u, normalizeClass as b, toDisplayString as g, normalizeProps as z, guardReactiveProps as B, unref as t, createBlock as y, resolveDynamicComponent as m, withKeys as re, withModifiers as se, Fragment as le, renderList as ae, withDirectives as ie, vShow as de, createTextVNode as ue } from "vue";
2
- import { kunTextareaProps as pe } from "../composables/KunTextareaProps.js";
3
- import ce from "../composables/useKunTextareaComposable.js";
1
+ import { useAttrs as oe, ref as te, getCurrentInstance as ne, computed as a, createElementBlock as l, openBlock as t, mergeProps as M, renderSlot as d, createElementVNode as i, createCommentVNode as u, normalizeClass as b, toDisplayString as g, normalizeProps as z, guardReactiveProps as B, unref as n, createBlock as y, resolveDynamicComponent as m, Fragment as re, renderList as se, withDirectives as le, vShow as ae, createTextVNode as de } from "vue";
2
+ import { kunTextareaProps as ie } from "../composables/KunTextareaProps.js";
3
+ import ue from "../composables/useKunTextareaComposable.js";
4
4
  import { renderIconSlot as h } from "../../../../utils/renderIcon.js";
5
- const ve = { class: "relative" }, fe = {
5
+ import { debounce as pe } from "../../../../utils/utils.js";
6
+ const ce = { class: "relative" }, ve = {
6
7
  key: 0,
7
8
  class: "absolute left-2 top-2 flex items-center"
8
- }, be = {
9
+ }, fe = {
9
10
  key: 1,
10
11
  class: "absolute left-2 top-2 ml-1"
11
- }, ge = ["value", "rows", "disabled", "readonly", "placeholder"], ye = {
12
+ }, be = ["value", "rows", "disabled", "readonly", "placeholder"], ge = {
12
13
  key: 3,
13
14
  class: "absolute right-2 top-2 mr-1"
14
- }, me = {
15
+ }, ye = {
15
16
  key: 4,
16
17
  class: "absolute right-2 top-2 flex items-center"
17
- }, he = {
18
+ }, me = {
18
19
  key: 5,
19
20
  class: "mt-1"
20
- }, ke = { class: "h-1 w-full bg-gray-200 rounded overflow-hidden" }, Ce = {
21
+ }, he = { class: "h-1 w-full bg-gray-200 rounded overflow-hidden" }, ke = {
21
22
  key: 7,
22
23
  class: "text-xs text-right mt-1 text-gray-400"
23
- }, we = { key: 0 }, Re = {
24
+ }, Ce = { key: 0 }, Re = {
24
25
  __name: "KunTextarea",
25
- props: { ...pe },
26
+ props: { ...ie },
26
27
  emits: ["update:modelValue", "click:clear", "click:control", "update:focused", "mousedown:control"],
27
- setup(D, { expose: E, emit: F }) {
28
- const o = D, k = F, G = oe(), p = te(null), R = `textarea-${ne().uid}`, {
28
+ setup(A, { expose: D, emit: F }) {
29
+ const o = A, k = F, G = oe(), p = te(null), R = `textarea-${ne().uid}`, {
29
30
  isFocused: c,
30
31
  internalValue: v,
31
32
  updateModel: P,
32
33
  handleClear: S,
33
34
  validate: T,
34
- reset: K,
35
+ reset: E,
35
36
  resetValidation: N,
36
37
  hasError: f,
37
38
  displayedMessages: C,
38
- adjustHeight: H,
39
- handleJsonEnter: V
40
- } = ce(o, k, p), L = (e) => {
41
- P(e.target.value), o.autoGrow && H();
42
- }, j = () => {
39
+ adjustHeight: H
40
+ } = ue(o, k, p), L = (e) => {
41
+ v.value = e.target.value, j(e.target.value), o.autoGrow && H();
42
+ }, j = pe((e) => {
43
+ P(e);
44
+ }, 2e3), K = () => {
43
45
  c.value = !0, k("update:focused", !0);
44
- }, J = () => {
46
+ }, U = () => {
45
47
  c.value = !1, k("update:focused", !1);
46
- }, M = a(() => c.value || !!v.value || o.dirty), w = a(() => typeof v.value == "string" ? v.value.length : 0), I = a(() => o.counter === !0 ? 25 : o.counter || null), q = a(() => o.persistentCounter || o.counter && c.value), O = a(() => ["relative w-full flex flex-col", o.class, o.wrapperClass]), Q = a(
48
+ }, V = a(() => c.value || !!v.value || o.dirty), w = a(() => typeof v.value == "string" ? v.value.length : 0), I = a(() => o.counter === !0 ? 25 : o.counter || null), q = a(() => o.persistentCounter || o.counter && c.value), J = a(() => ["relative w-full flex flex-col", o.class, o.wrapperClass]), O = a(
47
49
  () => o.persistentClear ? "opacity-100" : "hover:opacity-100 opacity-0 transition-opacity duration-200"
48
- ), U = a(() => {
50
+ ), Q = a(() => {
49
51
  const e = o.bgColor ? "" : o.variant === "filled" ? "bg-gray-100 dark:bg-gray-900" : "";
50
52
  switch (o.variant) {
51
53
  case "filled":
@@ -79,12 +81,12 @@ const ve = { class: "relative" }, fe = {
79
81
  "resize-none": o.noResize || o.autoGrow,
80
82
  resize: !o.noResize && !o.autoGrow
81
83
  },
82
- U.value,
84
+ Q.value,
83
85
  W.value
84
86
  ]), Y = {
85
87
  label: o.label,
86
88
  isFocused: c,
87
- isActive: M,
89
+ isActive: V,
88
90
  controlRef: p,
89
91
  focus: () => {
90
92
  var e;
@@ -109,12 +111,12 @@ const ve = { class: "relative" }, fe = {
109
111
  },
110
112
  props: o
111
113
  }, Z = $, x = $, _ = a(() => {
112
- const { class: e, ...n } = G;
113
- return n;
114
+ const { class: e, ...r } = G;
115
+ return r;
114
116
  });
115
- return E({
117
+ return D({
116
118
  validate: T,
117
- reset: K,
119
+ reset: E,
118
120
  resetValidation: N,
119
121
  errorMessages: C,
120
122
  isValid: a(() => !f.value),
@@ -123,126 +125,125 @@ const ve = { class: "relative" }, fe = {
123
125
  return (e = p.value) == null ? void 0 : e.focus();
124
126
  },
125
127
  rootRef: p
126
- }), (e, n) => (s(), l("div", A({
127
- class: O.value,
128
+ }), (e, r) => (t(), l("div", M({
129
+ class: J.value,
128
130
  ref: "rootRef"
129
131
  }, _.value), [
130
- i(e.$slots, "label", A({ for: R }, Y), () => [
131
- e.label ? (s(), l("label", {
132
+ d(e.$slots, "label", M({ for: R }, Y), () => [
133
+ e.label ? (t(), l("label", {
132
134
  key: 0,
133
135
  for: R,
134
- class: b(["absolute left-2 transition-all duration-200 ease-in-out pointer-events-none select-none z-10", M.value || e.placeholder ? "-top-2.25 text-xs opacity-80" : "top-3 text-sm opacity-80"])
136
+ class: b(["absolute left-2 transition-all duration-200 ease-in-out pointer-events-none select-none z-10", V.value || e.placeholder ? "-top-2.25 text-xs opacity-80" : "top-3 text-sm opacity-80"])
135
137
  }, g(e.label), 3)) : u("", !0)
136
138
  ]),
137
- d("div", ve, [
138
- e.prependIcon || e.$slots.prepend ? (s(), l("div", fe, [
139
- i(e.$slots, "prepend", z(B(t(Z))), () => [
140
- d("div", {
141
- onClick: n[0] || (n[0] = (r) => e.handleIconClick(r, "prepend"))
139
+ i("div", ce, [
140
+ e.prependIcon || e.$slots.prepend ? (t(), l("div", ve, [
141
+ d(e.$slots, "prepend", z(B(n(Z))), () => [
142
+ i("div", {
143
+ onClick: r[0] || (r[0] = (s) => e.handleIconClick(s, "prepend"))
142
144
  }, [
143
- (s(), y(m(t(h)(e.prependIcon))))
145
+ (t(), y(m(n(h)(e.prependIcon))))
144
146
  ])
145
147
  ])
146
148
  ])) : u("", !0),
147
- e.prependInnerIcon || e.$slots["prepend-inner"] ? (s(), l("div", be, [
148
- i(e.$slots, "prepend-inner", {}, () => [
149
- d("div", {
150
- onClick: n[1] || (n[1] = (r) => e.handleIconClick(r, "prependInner"))
149
+ e.prependInnerIcon || e.$slots["prepend-inner"] ? (t(), l("div", fe, [
150
+ d(e.$slots, "prepend-inner", {}, () => [
151
+ i("div", {
152
+ onClick: r[1] || (r[1] = (s) => e.handleIconClick(s, "prependInner"))
151
153
  }, [
152
- (s(), y(m(t(h)(e.prependInnerIcon))))
154
+ (t(), y(m(n(h)(e.prependInnerIcon))))
153
155
  ])
154
156
  ])
155
157
  ])) : u("", !0),
156
- d("textarea", {
158
+ i("textarea", {
157
159
  ref_key: "textareaRef",
158
160
  ref: p,
159
- value: t(v),
161
+ value: n(v),
160
162
  rows: e.autoGrow ? void 0 : e.rows,
161
163
  disabled: e.disabled,
162
164
  readonly: e.readonly,
163
165
  placeholder: e.placeholder,
164
166
  onInput: L,
165
- onFocus: j,
166
- onBlur: J,
167
- onClick: n[2] || (n[2] = (r) => e.$emit("click:control", r)),
168
- onMousedown: n[3] || (n[3] = (r) => e.$emit("mousedown:control", r)),
169
- onKeydown: n[4] || (n[4] = re(se((...r) => t(V) && t(V)(...r), ["prevent"]), ["enter"])),
167
+ onFocus: K,
168
+ onBlur: U,
169
+ onClick: r[2] || (r[2] = (s) => e.$emit("click:control", s)),
170
+ onMousedown: r[3] || (r[3] = (s) => e.$emit("mousedown:control", s)),
170
171
  class: b([X.value]),
171
172
  style: { width: "100%", "box-sizing": "border-box", "overflow-y": "hidden" }
172
- }, null, 42, ge),
173
- e.clearable && t(v) ? (s(), l("div", {
173
+ }, null, 42, be),
174
+ e.clearable && n(v) ? (t(), l("div", {
174
175
  key: 2,
175
- class: b(["absolute right-2 top-2", Q.value])
176
+ class: b(["absolute right-2 top-2", O.value])
176
177
  }, [
177
- i(e.$slots, "clear", z(B($)), () => [
178
- d("button", {
178
+ d(e.$slots, "clear", z(B($)), () => [
179
+ i("button", {
179
180
  type: "button",
180
- onClick: n[5] || (n[5] = (...r) => t(S) && t(S)(...r)),
181
+ onClick: r[4] || (r[4] = (...s) => n(S) && n(S)(...s)),
181
182
  class: "text-gray-500 hover:text-gray-700"
182
183
  }, [
183
- (s(), y(m(t(h)(e.clearIcon))))
184
+ (t(), y(m(n(h)(e.clearIcon))))
184
185
  ])
185
186
  ])
186
187
  ], 2)) : u("", !0),
187
- e.appendInnerIcon || e.$slots["append-inner"] ? (s(), l("div", ye, [
188
- i(e.$slots, "append-inner", {}, () => [
189
- d("div", {
190
- onClick: n[6] || (n[6] = (r) => e.handleIconClick(r, "appendInner"))
188
+ e.appendInnerIcon || e.$slots["append-inner"] ? (t(), l("div", ge, [
189
+ d(e.$slots, "append-inner", {}, () => [
190
+ i("div", {
191
+ onClick: r[5] || (r[5] = (s) => e.handleIconClick(s, "appendInner"))
191
192
  }, [
192
- (s(), y(m(t(h)(e.appendInnerIcon))))
193
+ (t(), y(m(n(h)(e.appendInnerIcon))))
193
194
  ])
194
195
  ])
195
196
  ])) : u("", !0),
196
- e.appendIcon || e.$slots.append ? (s(), l("div", me, [
197
- i(e.$slots, "append", z(B(t(x))), () => [
198
- d("div", {
199
- onClick: n[7] || (n[7] = (r) => e.handleIconClick(r, "append"))
197
+ e.appendIcon || e.$slots.append ? (t(), l("div", ye, [
198
+ d(e.$slots, "append", z(B(n(x))), () => [
199
+ i("div", {
200
+ onClick: r[6] || (r[6] = (s) => e.handleIconClick(s, "append"))
200
201
  }, [
201
- (s(), y(m(t(h)(e.appendIcon))))
202
+ (t(), y(m(n(h)(e.appendIcon))))
202
203
  ])
203
204
  ])
204
205
  ])) : u("", !0),
205
- e.loading ? (s(), l("div", he, [
206
- i(e.$slots, "loader", {
206
+ e.loading ? (t(), l("div", me, [
207
+ d(e.$slots, "loader", {
207
208
  color: e.loadingColor,
208
209
  isActive: !0
209
210
  }, () => [
210
- d("div", ke, [
211
- d("div", {
211
+ i("div", he, [
212
+ i("div", {
212
213
  class: b(["h-full transition-all duration-300", [e.loadingColor]]),
213
214
  style: { width: "100%" }
214
215
  }, null, 2)
215
216
  ])
216
217
  ])
217
218
  ])) : u("", !0),
218
- !e.hideDetails || e.hideDetails === "auto" && (t(C).length || e.hint) ? (s(), l("div", {
219
+ !e.hideDetails || e.hideDetails === "auto" && (n(C).length || e.hint) ? (t(), l("div", {
219
220
  key: 6,
220
- class: b(["text-xs mt-1 space-y-1", { "text-red-500": t(f), "text-gray-500": !t(f) }])
221
+ class: b(["text-xs mt-1 space-y-1", { "text-red-500": n(f), "text-gray-500": !n(f) }])
221
222
  }, [
222
- i(e.$slots, "details", {}, () => [
223
- t(f) ? (s(!0), l(le, { key: 0 }, ae(t(C), (r, ee) => i(e.$slots, "message", {
223
+ d(e.$slots, "details", {}, () => [
224
+ n(f) ? (t(!0), l(re, { key: 0 }, se(n(C), (s, ee) => d(e.$slots, "message", {
224
225
  key: ee,
225
- message: r
226
+ message: s
226
227
  }, () => [
227
- d("div", null, g(r), 1)
228
- ])), 128)) : e.hint ? i(e.$slots, "hint", {
228
+ i("div", null, g(s), 1)
229
+ ])), 128)) : e.hint ? d(e.$slots, "hint", {
229
230
  key: 1,
230
231
  hint: e.hint
231
232
  }, () => [
232
- ie(d("div", null, g(e.hint), 513), [
233
- [de, e.persistentHint || t(c)]
233
+ le(i("div", null, g(e.hint), 513), [
234
+ [ae, e.persistentHint || n(c)]
234
235
  ])
235
236
  ]) : u("", !0)
236
237
  ])
237
238
  ], 2)) : u("", !0),
238
- q.value ? (s(), l("div", Ce, [
239
- i(e.$slots, "counter", {
239
+ q.value ? (t(), l("div", ke, [
240
+ d(e.$slots, "counter", {
240
241
  counter: w.value,
241
242
  max: I.value,
242
243
  value: w.value
243
244
  }, () => [
244
- ue(g(w.value), 1),
245
- I.value ? (s(), l("span", we, " / " + g(I.value), 1)) : u("", !0)
245
+ de(g(w.value), 1),
246
+ I.value ? (t(), l("span", Ce, " / " + g(I.value), 1)) : u("", !0)
246
247
  ])
247
248
  ])) : u("", !0)
248
249
  ])
@@ -5,10 +5,8 @@ const e = {
5
5
  class: String,
6
6
  bgColor: String,
7
7
  textColor: String,
8
- textAlign: {
9
- type: String,
10
- default: "left"
11
- },
8
+ textAlign: { type: String, default: "left" },
9
+ formatModel: { type: String, default: "auto" },
12
10
  loading: Boolean,
13
11
  prependIcon: [String, Object, Function],
14
12
  appendIcon: [String, Object, Function],
@@ -1,7 +1,7 @@
1
- import { ref as i, computed as h, watch as C, nextTick as m, onMounted as k, onBeforeUnmount as A } from "vue";
2
- function T(t, v, l) {
3
- const r = i(""), c = i(t.modelValue), J = i(!1), a = i([]), f = h(() => t.formatModel === "json" || t.formatModel === "auto" && typeof t.modelValue == "object");
4
- function y(e) {
1
+ import { ref as i, computed as h, watch as E, nextTick as m, onMounted as A, onBeforeUnmount as F } from "vue";
2
+ function $(t, H, l) {
3
+ const s = i(""), c = i(t.modelValue), J = i(!1), a = i([]), f = h(() => t.formatModel === "json" || t.formatModel === "auto" && typeof t.modelValue == "object");
4
+ function v(e) {
5
5
  if (f.value && e != null)
6
6
  try {
7
7
  return JSON.stringify(e, null, 2);
@@ -10,7 +10,7 @@ function T(t, v, l) {
10
10
  }
11
11
  return e ?? "";
12
12
  }
13
- function M(e) {
13
+ function y(e) {
14
14
  if (f.value && typeof e == "string")
15
15
  try {
16
16
  return JSON.parse(e);
@@ -20,14 +20,14 @@ function T(t, v, l) {
20
20
  return e;
21
21
  }
22
22
  function x(e) {
23
- const u = M(e);
24
- c.value = u, v("update:modelValue", u), v("change", u);
23
+ const u = y(e);
24
+ c.value = u, H("update:modelValue", u);
25
25
  }
26
- C(
26
+ E(
27
27
  () => t.modelValue,
28
28
  (e) => {
29
29
  const u = JSON.stringify(e), n = JSON.stringify(c.value);
30
- u !== n && (c.value = e, r.value = y(e), t.autoGrow && m(() => d()));
30
+ u !== n && (c.value = e, s.value = v(e), t.autoGrow && m(() => d()));
31
31
  },
32
32
  { immediate: !0 }
33
33
  );
@@ -42,51 +42,51 @@ function T(t, v, l) {
42
42
  l.value.style.height = e + "px";
43
43
  };
44
44
  function N(e) {
45
- var V;
46
- if (!f.value || e.key !== "Enter") return;
45
+ var S;
46
+ if (!f.value) return;
47
47
  const u = l.value;
48
48
  if (!u) return;
49
- const n = u.selectionStart, o = r.value, s = " ", g = o.slice(0, n), b = o.slice(n), j = g.lastIndexOf(`
50
- `) + 1, S = `
51
- ${((V = g.slice(j).match(/^\s*/)) == null ? void 0 : V[0]) ?? ""}${s}`;
52
- r.value = g + S + b, m(() => {
53
- const H = n + S.length;
54
- u.setSelectionRange(H, H);
49
+ const n = u.selectionStart, o = s.value, r = " ", g = o.slice(0, n), j = o.slice(n), C = g.lastIndexOf(`
50
+ `) + 1, w = `
51
+ ${((S = g.slice(C).match(/^\s*/)) == null ? void 0 : S[0]) ?? ""}${r}`;
52
+ s.value = g + w + j, m(() => {
53
+ const V = n + w.length;
54
+ u.setSelectionRange(V, V);
55
55
  }), e.preventDefault();
56
56
  }
57
- k(() => {
58
- r.value = y(t.modelValue), m(() => {
57
+ A(() => {
58
+ s.value = v(t.modelValue), m(() => {
59
59
  t.autoGrow && d();
60
60
  });
61
- }), A(() => {
61
+ }), F(() => {
62
62
  });
63
- const w = h(() => {
63
+ const M = h(() => {
64
64
  var e;
65
65
  return !!(a.value.length || (e = t.errorMessages) != null && e.length);
66
- }), O = h(() => w.value ? [...t.errorMessages || [], ...a.value].slice(0, t.maxErrors) : []);
67
- function E() {
68
- const e = t.rules || [], u = t.required && !r.value ? null : M(r.value), n = [];
66
+ }), O = h(() => M.value ? [...t.errorMessages || [], ...a.value].slice(0, t.maxErrors) : []);
67
+ function I() {
68
+ const e = t.rules || [], u = t.required && !s.value ? null : y(s.value), n = [];
69
69
  for (const o of e) {
70
- const s = typeof o == "function" ? o(u) : o;
71
- Array.isArray(s) ? n.push(...s) : typeof s == "string" ? n.push(s) : s === !1 && n.push("Campo inválido");
70
+ const r = typeof o == "function" ? o(u) : o;
71
+ Array.isArray(r) ? n.push(...r) : typeof r == "string" ? n.push(r) : r === !1 && n.push("Campo inválido");
72
72
  }
73
73
  return a.value = n, n.length === 0;
74
74
  }
75
- function I() {
75
+ function b() {
76
76
  a.value = [];
77
77
  }
78
78
  return {
79
- internalValue: r,
79
+ internalValue: s,
80
80
  isFocused: J,
81
- hasError: w,
81
+ hasError: M,
82
82
  displayedMessages: O,
83
- validate: E,
84
- resetValidation: I,
83
+ validate: I,
84
+ resetValidation: b,
85
85
  updateModel: x,
86
86
  adjustHeight: d,
87
87
  handleJsonEnter: N
88
88
  };
89
89
  }
90
90
  export {
91
- T as default
91
+ $ as default
92
92
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "adverich-kun-ui",
3
- "version": "0.1.410",
3
+ "version": "0.1.411",
4
4
  "type": "module",
5
5
  "description": "Una librería de componentes Vue.js con Tailwind CSS",
6
6
  "main": "dist/index.js",