adverich-kun-ui 0.1.407 → 0.1.409

package/dist/components/KunTextarea/src/components/KunTextarea.vue.js

@@ -1,56 +1,45 @@
-import { useAttrs as se, ref as re, getCurrentInstance as le, computed as a, createElementBlock as l, openBlock as s, mergeProps as E, renderSlot as i, createElementVNode as d, createCommentVNode as u, normalizeClass as b, toDisplayString as y, normalizeProps as S, guardReactiveProps as V, unref as r, createBlock as m, resolveDynamicComponent as h, withKeys as ae, Fragment as ie, renderList as de, withDirectives as ue, vShow as pe, createTextVNode as ce, nextTick as ve } from "vue";
-import { kunTextareaProps as fe } from "../composables/KunTextareaProps.js";
-import ge from "../composables/useKunTextareaComposable.js";
+import { useAttrs as x, ref as _, getCurrentInstance as ee, computed as a, createElementBlock as l, openBlock as s, mergeProps as E, renderSlot as i, createElementVNode as d, createCommentVNode as u, normalizeClass as g, toDisplayString as y, normalizeProps as I, guardReactiveProps as R, unref as r, createBlock as b, resolveDynamicComponent as m, withKeys as oe, Fragment as te, renderList as ne, withDirectives as re, vShow as se, createTextVNode as le } from "vue";
+import { kunTextareaProps as ae } from "../composables/KunTextareaProps.js";
+import ie from "../composables/useKunTextareaComposable.js";
 import { renderIconSlot as k } from "../../../../utils/renderIcon.js";
-const be = { class: "relative" }, ye = {
+const de = { class: "relative" }, ue = {
   key: 0,
   class: "absolute left-2 top-2 flex items-center"
-}, me = {
+}, pe = {
   key: 1,
   class: "absolute left-2 top-2 ml-1"
-}, he = ["value", "rows", "disabled", "readonly", "placeholder", "name"], ke = {
+}, ve = ["value", "rows", "disabled", "readonly", "placeholder"], ce = {
   key: 3,
   class: "absolute right-2 top-2 mr-1"
-}, Ce = {
+}, fe = {
   key: 4,
   class: "absolute right-2 top-2 flex items-center"
-}, we = {
+}, ge = {
   key: 5,
   class: "mt-1"
-}, Ie = { class: "h-1 w-full bg-gray-200 rounded overflow-hidden" }, $e = {
+}, ye = { class: "h-1 w-full bg-gray-200 rounded overflow-hidden" }, be = {
   key: 7,
   class: "text-xs text-right mt-1 text-gray-400"
-}, Re = { key: 0 }, De = {
+}, me = { key: 0 }, $e = {
   __name: "KunTextarea",
-  props: { ...fe },
+  props: { ...ae },
   emits: ["update:modelValue", "click:clear", "click:control", "update:focused", "mousedown:control"],
-  setup(F, { expose: P, emit: G }) {
-    const o = F, C = G, K = se(), p = re(null), N = `textarea-${le().uid}`, {
-      isFocused: c,
-      internalValue: v,
-      rootRef: B,
-      updateValue: z,
-      handleClear: D,
-      validate: j,
-      reset: H,
-      resetValidation: L,
+  setup(M, { expose: P, emit: T }) {
+    const o = M, F = T, G = x(), p = _(null), K = `textarea-${ee().uid}`, {
+      isFocused: v,
+      internalValue: c,
+      rootRef: V,
+      // si no usás, sacalo del composable y de acá
+      updateValue: N,
+      handleClear: z,
+      validate: H,
+      reset: L,
+      resetValidation: j,
       hasError: f,
-      displayedMessages: w,
-      adjustHeight: J
-    } = ge(o, C), q = (e) => {
-      z(e.target.value), o.autoGrow && J();
-    }, O = (e) => {
-      var T;
-      if (!o.jsonMode) return;
-      e.preventDefault();
-      const t = e.target, n = t.selectionStart, g = ((T = t.value.substring(0, n).match(/(^|\n)(\s*)[^\n]*$/)) == null ? void 0 : T[2]) ?? "", M = t.value.slice(0, n) + `
-` + g + t.value.slice(n);
-      t.value = M, z(M), ve(() => t.setSelectionRange(n + 1 + g.length, n + 1 + g.length));
-    }, Q = () => {
-      c.value = !0, C("update:focused", !0);
-    }, U = () => {
-      c.value = !1, C("update:focused", !1);
-    }, A = a(() => c.value || !!v.value || o.dirty), I = a(() => typeof v.value == "string" ? v.value.length : 0), $ = a(() => o.counter === !0 ? 25 : o.counter || null), W = a(() => o.persistentCounter || o.counter && c.value), X = a(() => ["relative w-full flex flex-col", o.class, o.wrapperClass]), Y = a(() => o.persistentClear ? "opacity-100" : "hover:opacity-100 opacity-0 transition-opacity duration-200"), Z = a(() => {
+      displayedMessages: C,
+      adjustHeight: J,
+      handleJsonEnter: B
+    } = ie(o, F), S = a(() => v.value || !!c.value || o.dirty), h = a(() => typeof c.value == "string" ? c.value.length : 0), w = a(() => o.counter === !0 ? 25 : o.counter || null), q = a(() => o.persistentCounter || o.counter && v.value), O = a(() => ["relative w-full flex flex-col", o.class, o.wrapperClass]), Q = a(() => o.persistentClear ? "opacity-100" : "hover:opacity-100 opacity-0 transition-opacity duration-200"), A = a(() => {
       const e = o.bgColor ? "" : o.variant === "filled" ? "bg-gray-100 dark:bg-gray-900" : "";
       switch (o.variant) {
         case "filled":
@@ -64,9 +53,10 @@ const be = { class: "relative" }, ye = {
         default:
           return "";
       }
-    }), x = a(
+    }), D = a(
       () => o.density === "compact" ? "p-1" : o.density === "comfortable" ? "p-2" : "p-3"
-    ), _ = a(() => [
+    );
+    a(() => [
       "w-full resize-none p-2 transition-colors duration-150 py-3",
       o.inputClass,
       {
@@ -84,134 +74,140 @@ const be = { class: "relative" }, ye = {
         "resize-none": o.noResize || o.autoGrow,
         resize: !o.noResize && !o.autoGrow
       },
-      Z.value,
-      x.value
-    ]), ee = { label: o.label, isFocused: c, isActive: A, controlRef: p, focus: () => {
+      A.value,
+      D.value
+    ]);
+    const U = { label: o.label, isFocused: v, isActive: S, controlRef: p, focus: () => {
       var e;
       return (e = p.value) == null ? void 0 : e.focus();
     }, blur: () => {
       var e;
       return (e = p.value) == null ? void 0 : e.blur();
-    }, props: o }, R = { isActive: !!v.value, isFocused: c, controlRef: p, focus: () => {
+    }, props: o }, $ = { isActive: !!c.value, isFocused: v, controlRef: p, focus: () => {
       var e;
       return (e = p.value) == null ? void 0 : e.focus();
     }, blur: () => {
       var e;
       return (e = p.value) == null ? void 0 : e.blur();
-    }, props: o }, oe = R, te = R, ne = a(() => {
-      const { class: e, ...t } = K;
+    }, props: o }, W = $, X = $, Y = a(() => {
+      const { class: e, ...t } = G;
       return t;
     });
     return P({
-      validate: j,
-      reset: H,
-      resetValidation: L,
-      errorMessages: w,
+      validate: H,
+      reset: L,
+      resetValidation: j,
+      errorMessages: C,
       isValid: a(() => !f.value),
-      rootRef: B,
+      rootRef: V,
       focus: () => {
         var e;
         return (e = p.value) == null ? void 0 : e.focus();
       }
     }), (e, t) => (s(), l("div", E({
-      class: X.value,
+      class: O.value,
       ref_key: "rootRef",
-      ref: B
-    }, ne.value), [
-      i(e.$slots, "label", E({ for: N }, ee), () => [
+      ref: V
+    }, Y.value), [
+      i(e.$slots, "label", E({ for: K }, U), () => [
         e.label ? (s(), l("label", {
           key: 0,
-          class: b(["absolute left-2 transition-all duration-200 ease-in-out pointer-events-none select-none z-10", A.value || e.placeholder ? "-top-2.25 text-xs opacity-80" : "top-3 text-sm opacity-80"])
+          class: g(["absolute left-2 transition-all duration-200 ease-in-out pointer-events-none select-none z-10", S.value || e.placeholder ? "-top-2.25 text-xs opacity-80" : "top-3 text-sm opacity-80"])
         }, y(e.label), 3)) : u("", !0)
       ]),
-      d("div", be, [
-        e.prependIcon || e.$slots.prepend ? (s(), l("div", ye, [
-          i(e.$slots, "prepend", S(V(r(oe))), () => [
+      d("div", de, [
+        e.prependIcon || e.$slots.prepend ? (s(), l("div", ue, [
+          i(e.$slots, "prepend", I(R(r(W))), () => [
             d("div", {
               onClick: t[0] || (t[0] = (n) => e.handleIconClick(n, "prepend"))
             }, [
-              (s(), m(h(r(k)(e.prependIcon))))
+              (s(), b(m(r(k)(e.prependIcon))))
             ])
           ])
         ])) : u("", !0),
-        e.prependInnerIcon || e.$slots["prepend-inner"] ? (s(), l("div", me, [
+        e.prependInnerIcon || e.$slots["prepend-inner"] ? (s(), l("div", pe, [
           i(e.$slots, "prepend-inner", {}, () => [
             d("div", {
               onClick: t[1] || (t[1] = (n) => e.handleIconClick(n, "prependInner"))
             }, [
-              (s(), m(h(r(k)(e.prependInnerIcon))))
+              (s(), b(m(r(k)(e.prependInnerIcon))))
             ])
           ])
         ])) : u("", !0),
         d("textarea", {
           ref_key: "textareaRef",
           ref: p,
-          value: r(v),
+          value: r(c),
           rows: e.rows,
           disabled: e.disabled,
           readonly: e.readonly,
           placeholder: e.placeholder,
-          name: e.name,
-          class: b(_.value),
-          onInput: q,
-          onKeydown: ae(O, ["enter"]),
-          onFocus: Q,
-          onBlur: U,
-          onClick: t[2] || (t[2] = (n) => e.$emit("click:control", n)),
-          onMousedown: t[3] || (t[3] = (n) => e.$emit("mousedown:control", n))
-        }, null, 42, he),
-        e.clearable && r(v) ? (s(), l("div", {
+          onInput: t[2] || (t[2] = (n) => {
+            r(N)(n.target.value), e.autoGrow && r(J)();
+          }),
+          onFocus: t[3] || (t[3] = (n) => {
+            v.value = !0, e.$emit("update:focused", !0);
+          }),
+          onBlur: t[4] || (t[4] = (n) => {
+            v.value = !1, e.$emit("update:focused", !1);
+          }),
+          onClick: t[5] || (t[5] = (n) => e.$emit("click:control", n)),
+          onMousedown: t[6] || (t[6] = (n) => e.$emit("mousedown:control", n)),
+          onKeydown: t[7] || (t[7] = oe((...n) => r(B) && r(B)(...n), ["enter"])),
+          class: g([[A.value, D.value, e.inputClasses], "py-3"])
+        }, null, 42, ve),
+        e.clearable && r(c) ? (s(), l("div", {
           key: 2,
-          class: b(["absolute right-2 top-2", Y.value])
+          class: g(["absolute right-2 top-2", Q.value])
         }, [
-          i(e.$slots, "clear", S(V(R)), () => [
+          i(e.$slots, "clear", I(R($)), () => [
             d("button", {
               type: "button",
-              onClick: t[4] || (t[4] = (...n) => r(D) && r(D)(...n)),
+              onClick: t[8] || (t[8] = (...n) => r(z) && r(z)(...n)),
               class: "text-gray-500 hover:text-gray-700"
             }, [
-              (s(), m(h(r(k)(e.clearIcon))))
+              (s(), b(m(r(k)(e.clearIcon))))
             ])
           ])
         ], 2)) : u("", !0),
-        e.appendInnerIcon || e.$slots["append-inner"] ? (s(), l("div", ke, [
+        e.appendInnerIcon || e.$slots["append-inner"] ? (s(), l("div", ce, [
           i(e.$slots, "append-inner", {}, () => [
             d("div", {
-              onClick: t[5] || (t[5] = (n) => e.handleIconClick(n, "appendInner"))
+              onClick: t[9] || (t[9] = (n) => e.handleIconClick(n, "appendInner"))
             }, [
-              (s(), m(h(r(k)(e.appendInnerIcon))))
+              (s(), b(m(r(k)(e.appendInnerIcon))))
             ])
           ])
         ])) : u("", !0),
-        e.appendIcon || e.$slots.append ? (s(), l("div", Ce, [
-          i(e.$slots, "append", S(V(r(te))), () => [
+        e.appendIcon || e.$slots.append ? (s(), l("div", fe, [
+          i(e.$slots, "append", I(R(r(X))), () => [
             d("div", {
-              onClick: t[6] || (t[6] = (n) => e.handleIconClick(n, "append"))
+              onClick: t[10] || (t[10] = (n) => e.handleIconClick(n, "append"))
             }, [
-              (s(), m(h(r(k)(e.appendIcon))))
+              (s(), b(m(r(k)(e.appendIcon))))
             ])
           ])
         ])) : u("", !0),
-        e.loading ? (s(), l("div", we, [
+        e.loading ? (s(), l("div", ge, [
           i(e.$slots, "loader", {
             color: e.loadingColor,
             isActive: !0
           }, () => [
-            d("div", Ie, [
+            d("div", ye, [
               d("div", {
-                class: b(["h-full transition-all duration-300", [e.loadingColor]]),
+                class: g(["h-full transition-all duration-300", [e.loadingColor]]),
                 style: { width: "100%" }
               }, null, 2)
             ])
           ])
         ])) : u("", !0),
-        !e.hideDetails || e.hideDetails === "auto" && (r(w).length || e.hint) ? (s(), l("div", {
+        !e.hideDetails || e.hideDetails === "auto" && (r(C).length || e.hint) ? (s(), l("div", {
           key: 6,
-          class: b(["text-xs mt-1 space-y-1", { "text-red-500": r(f), "text-gray-500": !r(f) }])
+          class: g(["text-xs mt-1 space-y-1", { "text-red-500": r(f), "text-gray-500": !r(f) }])
         }, [
           i(e.$slots, "details", {}, () => [
-            r(f) ? (s(!0), l(ie, { key: 0 }, de(r(w), (n, g) => i(e.$slots, "message", {
-              key: g,
+            r(f) ? (s(!0), l(te, { key: 0 }, ne(r(C), (n, Z) => i(e.$slots, "message", {
+              key: Z,
               message: n
             }, () => [
               d("div", null, y(n), 1)
@@ -219,20 +215,20 @@ const be = { class: "relative" }, ye = {
               key: 1,
               hint: e.hint
             }, () => [
-              ue(d("div", null, y(e.hint), 513), [
-                [pe, e.persistentHint || r(c)]
+              re(d("div", null, y(e.hint), 513), [
+                [se, e.persistentHint || r(v)]
               ])
             ]) : u("", !0)
           ])
         ], 2)) : u("", !0),
-        W.value ? (s(), l("div", $e, [
+        q.value ? (s(), l("div", be, [
           i(e.$slots, "counter", {
-            counter: I.value,
-            max: $.value,
-            value: I.value
+            counter: h.value,
+            max: w.value,
+            value: h.value
           }, () => [
-            ce(y(I.value), 1),
-            $.value ? (s(), l("span", Re, " / " + y($.value), 1)) : u("", !0)
+            le(y(h.value), 1),
+            w.value ? (s(), l("span", me, " / " + y(w.value), 1)) : u("", !0)
           ])
         ])) : u("", !0)
       ])
@@ -240,5 +236,5 @@ const be = { class: "relative" }, ye = {
   }
 };
 export {
-  De as default
+  $e as default
 };

package/dist/components/KunTextarea/src/composables/useKunTextareaComposable.js

@@ -1,8 +1,8 @@
-import { ref as l, computed as y, watch as C, nextTick as f, onMounted as F, onBeforeUnmount as G } from "vue";
-function k(t, M) {
-  const d = l(null), a = l(""), g = l(t.modelValue), O = l(!1), i = l([]), S = l(null), h = y(() => t.formatModel === "json" || t.formatModel === "auto" && typeof t.modelValue == "object");
-  function V(e) {
-    if (h.value && e != null)
+import { ref as o, computed as g, watch as A, nextTick as h, onMounted as C, onBeforeUnmount as F } from "vue";
+function L(t, v) {
+  const m = o(null), r = o(""), i = o(t.modelValue), H = o(!1), s = o([]), x = o(null), c = g(() => t.formatModel === "json" || t.formatModel === "auto" && typeof t.modelValue == "object");
+  function y(e) {
+    if (c.value && e != null)
       try {
         return JSON.stringify(e, null, 2);
       } catch {
@@ -10,8 +10,8 @@ function k(t, M) {
       }
     return e ?? "";
   }
-  function w(e) {
-    if (h.value && typeof e == "string")
+  function R(e) {
+    if (c.value && typeof e == "string")
       try {
         return JSON.parse(e);
       } catch {
@@ -19,72 +19,72 @@ function k(t, M) {
       }
     return e;
   }
-  function E(e) {
-    const n = w(e);
-    g.value = n, M("update:modelValue", n), M("change", n);
+  function J(e) {
+    const n = R(e);
+    i.value = n, v("update:modelValue", n), v("change", n);
   }
-  C(() => t.modelValue, (e) => {
-    const n = JSON.stringify(e), u = JSON.stringify(g.value);
-    n !== u && (g.value = e, a.value = V(e), t.autoGrow && f(m));
+  A(() => t.modelValue, (e) => {
+    const n = JSON.stringify(e), a = JSON.stringify(i.value);
+    n !== a && (i.value = e, r.value = y(e), t.autoGrow && h(f));
   });
-  function m() {
-    const e = d.value;
-    !e || !t.autoGrow || f(() => {
-      e.style.height = "auto";
-      const n = parseFloat(getComputedStyle(e).lineHeight) || 24, u = Number(t.rows) || 5, r = n * u, o = e.scrollHeight, s = t.maxHeight || 9999, v = Math.min(o, s);
-      e.style.height = `${Math.max(r, v)}px`;
-      const c = e.selectionStart;
-      e.setSelectionRange(c, c);
-    });
-  }
-  F(() => {
-    a.value = V(t.modelValue), f(() => {
-      t.autoGrow && m();
+  const f = () => {
+    if (!textareaRef.value) return;
+    textareaRef.value.style.height = "auto", textareaRef.value.style.overflowY = "hidden";
+    const e = textareaRef.value.scrollHeight, n = parseFloat(getComputedStyle(textareaRef.value).lineHeight || "24"), a = Number(t.maxRows || 0);
+    if (t.maxRows && a > 0) {
+      const u = a * n;
+      textareaRef.value.style.height = Math.min(e, u) + "px";
+    } else
+      textareaRef.value.style.height = e + "px";
+  };
+  C(() => {
+    r.value = y(t.modelValue), h(() => {
+      t.autoGrow && f();
     });
-  }), G(() => {
-    S.value && cancelAnimationFrame(S.value);
+  }), F(() => {
+    x.value && cancelAnimationFrame(x.value);
   });
-  const x = y(() => {
+  const M = g(() => {
     var e;
-    return !!(i.value.length || (e = t.errorMessages) != null && e.length);
-  }), I = y(() => x.value ? [...t.errorMessages || [], ...i.value].slice(0, t.maxErrors) : []);
-  function b() {
-    const e = t.rules || [], n = t.required && !a.value ? null : w(a.value), u = [];
-    for (const r of e) {
-      const o = typeof r == "function" ? r(n) : r;
-      Array.isArray(o) ? u.push(...o) : typeof o == "string" ? u.push(o) : o === !1 && u.push("Campo inválido");
+    return !!(s.value.length || (e = t.errorMessages) != null && e.length);
+  }), N = g(() => M.value ? [...t.errorMessages || [], ...s.value].slice(0, t.maxErrors) : []);
+  function O() {
+    const e = t.rules || [], n = t.required && !r.value ? null : R(r.value), a = [];
+    for (const u of e) {
+      const l = typeof u == "function" ? u(n) : u;
+      Array.isArray(l) ? a.push(...l) : typeof l == "string" ? a.push(l) : l === !1 && a.push("Campo inválido");
     }
-    return i.value = u, u.length === 0;
+    return s.value = a, a.length === 0;
   }
-  function j() {
-    i.value = [];
+  function E() {
+    s.value = [];
   }
-  function A(e) {
-    var J;
-    if (!h.value || e.key !== "Enter") return;
-    const n = d.value;
+  function I(e) {
+    var S;
+    if (!c.value || e.key !== "Enter") return;
+    const n = m.value;
     if (!n) return;
-    const u = n.selectionStart, r = a.value, o = "  ", s = r.slice(0, u), v = r.slice(u), c = s.lastIndexOf(`
-`) + 1, H = `
-${((J = s.slice(c).match(/^\s*/)) == null ? void 0 : J[0]) ?? ""}${o}`;
-    a.value = s + H + v, f(() => {
-      const N = u + H.length;
-      n.setSelectionRange(N, N);
+    const a = n.selectionStart, u = r.value, l = "  ", d = u.slice(0, a), b = u.slice(a), j = d.lastIndexOf(`
+`) + 1, w = `
+${((S = d.slice(j).match(/^\s*/)) == null ? void 0 : S[0]) ?? ""}${l}`;
+    r.value = d + w + b, h(() => {
+      const V = a + w.length;
+      n.setSelectionRange(V, V);
     }), e.preventDefault();
   }
   return {
-    inputRef: d,
-    internalValue: a,
-    isFocused: O,
-    hasError: x,
-    displayedMessages: I,
-    validate: b,
-    resetValidation: j,
-    updateModel: E,
-    adjustHeight: m,
-    handleJsonEnter: A
+    inputRef: m,
+    internalValue: r,
+    isFocused: H,
+    hasError: M,
+    displayedMessages: N,
+    validate: O,
+    resetValidation: E,
+    updateModel: J,
+    adjustHeight: f,
+    handleJsonEnter: I
   };
 }
 export {
-  k as default
+  L as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adverich-kun-ui",
-  "version": "0.1.407",
+  "version": "0.1.409",
   "type": "module",
   "description": "Una librería de componentes Vue.js con Tailwind CSS",
   "main": "dist/index.js",