adverich-kun-ui 0.1.183 → 0.1.185

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

@@ -1,7 +1,7 @@
-import { ref as L, computed as p, createElementBlock as l, openBlock as s, normalizeClass as f, renderSlot as i, createElementVNode as a, normalizeProps as y, guardReactiveProps as k, unref as n, createCommentVNode as d, toDisplayString as m, createBlock as h, resolveDynamicComponent as $, Fragment as q, renderList as J, withDirectives as O, vShow as Q, createTextVNode as U } from "vue";
+import { ref as L, computed as p, createElementBlock as l, openBlock as s, normalizeClass as f, renderSlot as i, createElementVNode as a, normalizeProps as y, guardReactiveProps as k, unref as n, createCommentVNode as d, toDisplayString as g, createBlock as h, resolveDynamicComponent as C, Fragment as q, renderList as J, withDirectives as O, vShow as Q, createTextVNode as U } from "vue";
 import { kunTextareaProps as W } from "../composables/KunTextareaProps.js";
 import { useKunTextarea as X } from "../composables/useKunTextareaComposable.js";
-import { renderIconSlot as C } from "../../../../utils/renderIcon.js";
+import { renderIconSlot as $ } from "../../../../utils/renderIcon.js";
 const Y = {
   key: 0,
   class: "block text-sm font-medium mb-1"
@@ -27,8 +27,8 @@ const Y = {
   __name: "KunTextarea",
   props: W,
   emits: ["update:modelValue", "click:clear", "click:control", "update:focused", "mousedown:control"],
-  setup(R, { expose: B, emit: S }) {
-    const r = R, V = S, u = L(null), {
+  setup(B, { expose: R, emit: S }) {
+    const r = B, V = S, u = L(null), {
       isFocused: v,
       internalValue: c,
       updateValue: D,
@@ -40,15 +40,22 @@ const Y = {
       hasError: b,
       displayedMessages: w
     } = X(r, V, u), E = p(() => {
+      const e = !!r.bgColor;
       switch (r.variant) {
         case "filled":
-          return "bg-gray-100 dark:bg-gray-900 border border-transparent";
+          return [
+            e ? "" : "bg-gray-100 dark:bg-gray-900",
+            "border border-transparent"
+          ];
         case "outlined":
           return "border border-gray-300 bg-transparent";
         case "underlined":
           return "border-b border-gray-300 bg-transparent rounded-none";
         case "solo":
-          return "bg-white dark:bg-black shadow-md border-transparent";
+          return [
+            e ? "" : "bg-white dark:bg-black",
+            "shadow-md border-transparent"
+          ];
         default:
           return "";
       }
@@ -84,10 +91,10 @@ const Y = {
       r.class,
       r.wrapperClass
     ]), I = p(() => r.counter === !0 ? 25 : typeof r.counter == "number" || typeof r.counter == "string" ? r.counter : null), H = p(() => r.persistentCounter ? !0 : !!r.counter && v.value), K = p(() => typeof r.clearIcon == "string" ? r.clearIcon : "i-heroicons-x-mark-20-solid");
-    function g(e, t) {
+    function m(e, t) {
       V(`click:${t}`, e);
     }
-    return B({
+    return R({
       validate: M,
       reset: T,
       resetValidation: A,
@@ -103,24 +110,24 @@ const Y = {
         var o;
         return (o = u.value) == null ? void 0 : o.blur();
       }, props: r })), () => [
-        e.label ? (s(), l("label", Y, m(e.label), 1)) : d("", !0)
+        e.label ? (s(), l("label", Y, g(e.label), 1)) : d("", !0)
       ]),
       a("div", Z, [
         e.prependIcon || e.$slots.prepend ? (s(), l("div", x, [
           i(e.$slots, "prepend", y(k(e.prependSlotBindings)), () => [
             a("div", {
-              onClick: t[0] || (t[0] = (o) => g(o, "prepend"))
+              onClick: t[0] || (t[0] = (o) => m(o, "prepend"))
             }, [
-              (s(), h($(n(C)(e.prependIcon))))
+              (s(), h(C(n($)(e.prependIcon))))
             ])
           ])
         ])) : d("", !0),
         e.prependInnerIcon || e.$slots["prepend-inner"] ? (s(), l("div", _, [
           i(e.$slots, "prepend-inner", {}, () => [
             a("div", {
-              onClick: t[1] || (t[1] = (o) => g(o, "prependInner"))
+              onClick: t[1] || (t[1] = (o) => m(o, "prependInner"))
             }, [
-              (s(), h($(n(C)(e.prependInnerIcon))))
+              (s(), h(C(n($)(e.prependInnerIcon))))
             ])
           ])
         ])) : d("", !0),
@@ -170,18 +177,18 @@ const Y = {
         e.appendInnerIcon || e.$slots["append-inner"] ? (s(), l("div", re, [
           i(e.$slots, "append-inner", {}, () => [
             a("div", {
-              onClick: t[8] || (t[8] = (o) => g(o, "appendInner"))
+              onClick: t[8] || (t[8] = (o) => m(o, "appendInner"))
             }, [
-              (s(), h($(n(C)(e.appendInnerIcon))))
+              (s(), h(C(n($)(e.appendInnerIcon))))
             ])
           ])
         ])) : d("", !0),
         e.appendIcon || e.$slots.append ? (s(), l("div", oe, [
           i(e.$slots, "append", y(k(e.appendSlotBindings)), () => [
             a("div", {
-              onClick: t[9] || (t[9] = (o) => g(o, "append"))
+              onClick: t[9] || (t[9] = (o) => m(o, "append"))
             }, [
-              (s(), h($(n(C)(e.appendIcon))))
+              (s(), h(C(n($)(e.appendIcon))))
             ])
           ])
         ])) : d("", !0),
@@ -207,12 +214,12 @@ const Y = {
               key: j,
               message: o
             }, () => [
-              a("div", null, m(o), 1)
+              a("div", null, g(o), 1)
             ])), 128)) : e.hint ? i(e.$slots, "hint", {
               key: 1,
               hint: e.hint
             }, () => [
-              O(a("div", null, m(e.hint), 513), [
+              O(a("div", null, g(e.hint), 513), [
                 [Q, e.persistentHint || n(v)]
               ])
             ]) : d("", !0)
@@ -224,8 +231,8 @@ const Y = {
             max: I.value,
             value: n(c).length
           }, () => [
-            U(m(n(c).length), 1),
-            I.value ? (s(), l("span", le, " / " + m(I.value), 1)) : d("", !0)
+            U(g(n(c).length), 1),
+            I.value ? (s(), l("span", le, " / " + g(I.value), 1)) : d("", !0)
           ])
         ])) : d("", !0)
       ])

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

@@ -1,15 +1,16 @@
 const e = {
-  modelValue: [String, Number],
+  modelValue: [String, Number, Array, Object, Boolean],
+  formatModel: {
+    type: String,
+    default: "auto"
+    // auto | raw | json
+  },
   label: String,
   placeholder: String,
-  rows: {
-    type: [String, Number],
-    default: 1
-  },
+  rows: { type: [String, Number], default: 1 },
   autoGrow: Boolean,
   noResize: Boolean,
   maxRows: [Number, String],
-  // 🔧 Agregado
   clearable: Boolean,
   clearIcon: {
     type: [String, Function, Object],
@@ -17,14 +18,8 @@ const e = {
   },
   disabled: Boolean,
   readonly: Boolean,
-  variant: {
-    type: String,
-    default: "filled"
-  },
-  density: {
-    type: String,
-    default: "default"
-  },
+  variant: { type: String, default: "filled" },
+  density: { type: String, default: "default" },
   // Estilo
   rounded: [Boolean, String, Number],
   tile: Boolean,
@@ -60,17 +55,11 @@ const e = {
   validateOn: String,
   hint: String,
   persistentHint: Boolean,
-  hideDetails: {
-    type: [Boolean, String],
-    default: !1
-  },
+  hideDetails: { type: [Boolean, String], default: !1 },
   persistentCounter: Boolean,
   // Loader
   loading: Boolean,
-  loadingColor: {
-    type: String,
-    default: "bg-slate-500"
-  }
+  loadingColor: { type: String, default: "bg-slate-500" }
 };
 export {
   e as kunTextareaProps

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

@@ -1,58 +1,76 @@
-import { ref as i, watch as E, nextTick as m, onMounted as k, computed as y } from "vue";
-function F(t, n, h) {
-  const f = i(!1), s = i(t.modelValue ?? "");
-  E(() => t.modelValue, (e) => {
-    s.value = e ?? "", t.autoGrow && m(c);
+import { ref as n, watch as N, nextTick as M, onMounted as T, computed as V } from "vue";
+function k(t, s, l) {
+  const h = n(!1), w = n(t.modelValue), g = (e) => {
+    if (t.formatModel === "raw") return String(e ?? "");
+    if ((t.formatModel === "json" || t.formatModel === "auto") && typeof e == "object" && e !== null)
+      try {
+        return JSON.stringify(e, null, 2);
+      } catch {
+        return String(e);
+      }
+    return String(e ?? "");
+  }, m = (e) => {
+    if (t.formatModel === "raw") return e;
+    try {
+      const a = JSON.parse(e);
+      if (t.formatModel === "json" || t.formatModel === "auto")
+        return a;
+    } catch {
+    }
+    return e;
+  }, o = n(g(t.modelValue));
+  N(() => t.modelValue, (e) => {
+    w.value = e, o.value = g(e), t.autoGrow && M(c);
   });
-  const g = (e) => {
-    s.value = e, n("update:modelValue", e);
-  }, x = () => {
-    g(""), n("click:clear");
+  const v = (e) => {
+    o.value = e;
+    const a = m(e);
+    s("update:modelValue", a);
+  }, H = () => {
+    v(""), s("click:clear");
   }, c = () => {
-    if (!h.value) return;
-    const e = h.value;
-    e.style.height = "auto", e.style.overflowY = "hidden";
-    const u = e.scrollHeight, d = getComputedStyle(e).lineHeight, o = parseFloat(d) || 24, l = Number(t.maxRows || 0);
-    if (t.maxRows && l > 0) {
-      const r = l * o;
-      e.style.height = Math.min(u, r) + "px";
+    if (!l.value) return;
+    l.value.style.height = "auto", l.value.style.overflowY = "hidden";
+    const e = l.value.scrollHeight, a = parseFloat(getComputedStyle(l.value).lineHeight || "24"), i = Number(t.maxRows || 0);
+    if (t.maxRows && i > 0) {
+      const u = i * a;
+      l.value.style.height = Math.min(e, u) + "px";
     } else
-      e.style.height = u + "px";
+      l.value.style.height = e + "px";
   };
-  k(() => {
-    t.autoGrow && m(c);
+  T(() => {
+    t.autoGrow && M(c);
   });
-  const a = i([]), V = i(!0), w = (e = !1) => {
-    const u = t.validationValue ?? s.value, d = t.rules ?? [], o = [];
-    for (const l of d) {
-      const r = typeof l == "function" ? l(u) : l;
-      typeof r == "string" ? o.push(r) : r === !1 && o.push("Campo inválido");
+  const r = n([]), S = n(!0), j = (e = !1) => {
+    const a = t.validationValue ?? m(o.value), i = t.rules ?? [], u = [];
+    for (const d of i) {
+      const f = typeof d == "function" ? d(a) : d;
+      typeof f == "string" ? u.push(f) : f === !1 && u.push("Campo inválido");
     }
-    return a.value = o.slice(0, t.maxErrors ?? 1), e || n("update:focused", f.value), a.value;
-  }, v = () => {
-    a.value = [];
-  }, H = () => {
-    s.value = "", v(), n("update:modelValue", "");
-  }, M = y(() => t.error || a.value.length > 0), C = y(() => {
+    return r.value = u.slice(0, t.maxErrors ?? 1), e || s("update:focused", h.value), r.value;
+  }, y = () => {
+    r.value = [];
+  }, x = () => {
+    o.value = "", y(), s("update:modelValue", "");
+  }, C = V(() => t.error || r.value.length > 0), E = V(() => {
     var e;
-    return (e = t.errorMessages) != null && e.length ? Array.isArray(t.errorMessages) ? t.errorMessages : [t.errorMessages] : a.value;
+    return (e = t.errorMessages) != null && e.length ? Array.isArray(t.errorMessages) ? t.errorMessages : [t.errorMessages] : r.value;
   });
   return {
-    isFocused: f,
-    internalValue: s,
-    updateValue: g,
-    handleClear: x,
+    isFocused: h,
+    internalValue: o,
+    updateValue: v,
+    handleClear: H,
     adjustHeight: c,
-    // validación
-    isPristine: V,
-    validate: w,
-    reset: H,
-    resetValidation: v,
-    validationErrors: a,
-    hasError: M,
-    displayedMessages: C
+    isPristine: S,
+    validate: j,
+    reset: x,
+    resetValidation: y,
+    validationErrors: r,
+    hasError: C,
+    displayedMessages: E
   };
 }
 export {
-  F as useKunTextarea
+  k as useKunTextarea
 };

package/package.json

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