adverich-kun-ui 0.1.408 → 0.1.409

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

@@ -1,56 +1,45 @@
-import { useAttrs as re, ref as se, getCurrentInstance as le, computed as a, createElementBlock as l, openBlock as r, 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 s, 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: G, emit: P }) {
-    const o = F, C = P, K = re(), p = se(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 n = e.target, t = n.selectionStart, g = ((T = n.value.substring(0, t).match(/(^|\n)(\s*)[^\n]*$/)) == null ? void 0 : T[2]) ?? "", M = n.value.slice(0, t) + `
-` + g + n.value.slice(t);
-      n.value = M, z(M), ve(() => n.setSelectionRange(t + 1 + g.length, t + 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,155 +74,161 @@ 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, ne = R, te = a(() => {
-      const { class: e, ...n } = K;
-      return n;
+    }, props: o }, W = $, X = $, Y = a(() => {
+      const { class: e, ...t } = G;
+      return t;
     });
-    return G({
-      validate: j,
-      reset: H,
-      resetValidation: L,
-      errorMessages: w,
+    return P({
+      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, n) => (r(), l("div", E({
-      class: X.value,
+    }), (e, t) => (s(), l("div", E({
+      class: O.value,
       ref_key: "rootRef",
-      ref: B
-    }, te.value), [
-      i(e.$slots, "label", E({ for: N }, ee), () => [
-        e.label ? (r(), l("label", {
+      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 ? (r(), l("div", ye, [
-          i(e.$slots, "prepend", S(V(s(oe))), () => [
+      d("div", de, [
+        e.prependIcon || e.$slots.prepend ? (s(), l("div", ue, [
+          i(e.$slots, "prepend", I(R(r(W))), () => [
             d("div", {
-              onClick: n[0] || (n[0] = (t) => e.handleIconClick(t, "prepend"))
+              onClick: t[0] || (t[0] = (n) => e.handleIconClick(n, "prepend"))
             }, [
-              (r(), m(h(s(k)(e.prependIcon))))
+              (s(), b(m(r(k)(e.prependIcon))))
             ])
           ])
         ])) : u("", !0),
-        e.prependInnerIcon || e.$slots["prepend-inner"] ? (r(), l("div", me, [
+        e.prependInnerIcon || e.$slots["prepend-inner"] ? (s(), l("div", pe, [
           i(e.$slots, "prepend-inner", {}, () => [
             d("div", {
-              onClick: n[1] || (n[1] = (t) => e.handleIconClick(t, "prependInner"))
+              onClick: t[1] || (t[1] = (n) => e.handleIconClick(n, "prependInner"))
             }, [
-              (r(), m(h(s(k)(e.prependInnerIcon))))
+              (s(), b(m(r(k)(e.prependInnerIcon))))
             ])
           ])
         ])) : u("", !0),
         d("textarea", {
           ref_key: "textareaRef",
           ref: p,
-          value: s(v),
-          rows: e.autoGrow ? void 0 : e.rows,
+          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: n[2] || (n[2] = (t) => e.$emit("click:control", t)),
-          onMousedown: n[3] || (n[3] = (t) => e.$emit("mousedown:control", t))
-        }, null, 42, he),
-        e.clearable && s(v) ? (r(), 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: n[4] || (n[4] = (...t) => s(D) && s(D)(...t)),
+              onClick: t[8] || (t[8] = (...n) => r(z) && r(z)(...n)),
               class: "text-gray-500 hover:text-gray-700"
             }, [
-              (r(), m(h(s(k)(e.clearIcon))))
+              (s(), b(m(r(k)(e.clearIcon))))
             ])
           ])
         ], 2)) : u("", !0),
-        e.appendInnerIcon || e.$slots["append-inner"] ? (r(), l("div", ke, [
+        e.appendInnerIcon || e.$slots["append-inner"] ? (s(), l("div", ce, [
           i(e.$slots, "append-inner", {}, () => [
             d("div", {
-              onClick: n[5] || (n[5] = (t) => e.handleIconClick(t, "appendInner"))
+              onClick: t[9] || (t[9] = (n) => e.handleIconClick(n, "appendInner"))
             }, [
-              (r(), m(h(s(k)(e.appendInnerIcon))))
+              (s(), b(m(r(k)(e.appendInnerIcon))))
             ])
           ])
         ])) : u("", !0),
-        e.appendIcon || e.$slots.append ? (r(), l("div", Ce, [
-          i(e.$slots, "append", S(V(s(ne))), () => [
+        e.appendIcon || e.$slots.append ? (s(), l("div", fe, [
+          i(e.$slots, "append", I(R(r(X))), () => [
             d("div", {
-              onClick: n[6] || (n[6] = (t) => e.handleIconClick(t, "append"))
+              onClick: t[10] || (t[10] = (n) => e.handleIconClick(n, "append"))
             }, [
-              (r(), m(h(s(k)(e.appendIcon))))
+              (s(), b(m(r(k)(e.appendIcon))))
             ])
           ])
         ])) : u("", !0),
-        e.loading ? (r(), 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" && (s(w).length || e.hint) ? (r(), 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": s(f), "text-gray-500": !s(f) }])
+          class: g(["text-xs mt-1 space-y-1", { "text-red-500": r(f), "text-gray-500": !r(f) }])
         }, [
           i(e.$slots, "details", {}, () => [
-            s(f) ? (r(!0), l(ie, { key: 0 }, de(s(w), (t, g) => i(e.$slots, "message", {
-              key: g,
-              message: t
+            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(t), 1)
+              d("div", null, y(n), 1)
             ])), 128)) : e.hint ? i(e.$slots, "hint", {
               key: 1,
               hint: e.hint
             }, () => [
-              ue(d("div", null, y(e.hint), 513), [
-                [pe, e.persistentHint || s(c)]
+              re(d("div", null, y(e.hint), 513), [
+                [se, e.persistentHint || r(v)]
               ])
             ]) : u("", !0)
           ])
         ], 2)) : u("", !0),
-        W.value ? (r(), 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 ? (r(), 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 m, watch as R, nextTick as i, onMounted as T, onBeforeUnmount as $ } from "vue";
-function F(t, v) {
-  const c = l(null), o = l(""), f = l(t.modelValue), H = l(!1), s = l([]), y = l(null), d = m(() => t.formatModel === "json" || t.formatModel === "auto" && typeof t.modelValue == "object");
-  function M(e) {
-    if (d.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 F(t, v) {
       }
     return e ?? "";
   }
-  function S(e) {
-    if (d.value && typeof e == "string")
+  function R(e) {
+    if (c.value && typeof e == "string")
       try {
         return JSON.parse(e);
       } catch {
@@ -19,72 +19,72 @@ function F(t, v) {
       }
     return e;
   }
-  function O(e) {
-    const n = S(e);
-    f.value = n, v("update:modelValue", n), v("change", n);
+  function J(e) {
+    const n = R(e);
+    i.value = n, v("update:modelValue", n), v("change", n);
   }
-  R(() => t.modelValue, (e) => {
-    const n = JSON.stringify(e), u = JSON.stringify(f.value);
-    n !== u && (f.value = e, o.value = M(e), t.autoGrow && i(g));
+  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 g() {
-    const e = c.value;
-    !e || !t.autoGrow || i(() => {
-      e.style.height = "auto";
-      const n = t.maxHeight || 9999, u = e.scrollHeight;
-      e.style.height = `${Math.min(u, n)}px`;
-      const r = e.selectionStart;
-      e.setSelectionRange(r, r);
-    });
-  }
-  T(() => {
-    o.value = M(t.modelValue), i(() => {
-      t.autoGrow && g();
+  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();
     });
-  }), $(() => {
-    y.value && cancelAnimationFrame(y.value);
+  }), F(() => {
+    x.value && cancelAnimationFrame(x.value);
   });
-  const V = m(() => {
+  const M = g(() => {
     var e;
     return !!(s.value.length || (e = t.errorMessages) != null && e.length);
-  }), E = m(() => V.value ? [...t.errorMessages || [], ...s.value].slice(0, t.maxErrors) : []);
-  function I() {
-    const e = t.rules || [], n = t.required && !o.value ? null : S(o.value), u = [];
-    for (const r of e) {
-      const a = typeof r == "function" ? r(n) : r;
-      Array.isArray(a) ? u.push(...a) : typeof a == "string" ? u.push(a) : a === !1 && u.push("Campo inválido");
+  }), 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 s.value = u, u.length === 0;
+    return s.value = a, a.length === 0;
   }
-  function N() {
+  function E() {
     s.value = [];
   }
-  function j(e) {
-    var w;
-    if (!d.value || e.key !== "Enter") return;
-    const n = c.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 = o.value, a = "  ", h = r.slice(0, u), A = r.slice(u), G = h.lastIndexOf(`
-`) + 1, x = `
-${((w = h.slice(G).match(/^\s*/)) == null ? void 0 : w[0]) ?? ""}${a}`;
-    o.value = h + x + A, i(() => {
-      const J = u + x.length;
-      n.setSelectionRange(J, J);
+    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: c,
-    internalValue: o,
+    inputRef: m,
+    internalValue: r,
     isFocused: H,
-    hasError: V,
-    displayedMessages: E,
-    validate: I,
-    resetValidation: N,
-    updateModel: O,
-    adjustHeight: g,
-    handleJsonEnter: j
+    hasError: M,
+    displayedMessages: N,
+    validate: O,
+    resetValidation: E,
+    updateModel: J,
+    adjustHeight: f,
+    handleJsonEnter: I
   };
 }
 export {
-  F as default
+  L as default
 };

package/package.json

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