adverich-kun-ui 0.1.182 → 0.1.184

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

@@ -0,0 +1,237 @@
+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 { kunTextareaProps as W } from "../composables/KunTextareaProps.js";
+import { useKunTextarea as X } from "../composables/useKunTextareaComposable.js";
+import { renderIconSlot as C } from "../../../../utils/renderIcon.js";
+const Y = {
+  key: 0,
+  class: "block text-sm font-medium mb-1"
+}, Z = { class: "relative" }, x = {
+  key: 0,
+  class: "absolute left-2 top-2 flex items-center"
+}, _ = {
+  key: 1,
+  class: "absolute left-2 top-2 ml-1"
+}, ee = ["value", "rows", "disabled", "readonly", "placeholder"], re = {
+  key: 3,
+  class: "absolute right-2 top-2 mr-1"
+}, oe = {
+  key: 4,
+  class: "absolute right-2 top-2 flex items-center"
+}, ne = {
+  key: 5,
+  class: "mt-1"
+}, te = { class: "h-1 w-full bg-gray-200 rounded overflow-hidden" }, se = {
+  key: 7,
+  class: "text-xs text-right mt-1 text-gray-400"
+}, le = { key: 0 }, pe = {
+  __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), {
+      isFocused: v,
+      internalValue: c,
+      updateValue: D,
+      handleClear: z,
+      adjustHeight: F,
+      validate: M,
+      reset: T,
+      resetValidation: A,
+      hasError: b,
+      displayedMessages: w
+    } = X(r, V, u), E = p(() => {
+      switch (r.variant) {
+        case "filled":
+          return "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";
+        default:
+          return "";
+      }
+    }), G = p(() => {
+      switch (r.density) {
+        case "comfortable":
+          return "py-2";
+        case "compact":
+          return "py-1 text-sm";
+        default:
+          return "";
+      }
+    }), N = p(() => [
+      "w-full resize-none p-2 transition-colors duration-150",
+      r.inputClass,
+      {
+        "rounded-md": !r.tile,
+        "rounded-none": r.tile,
+        [`rounded-${r.rounded}`]: typeof r.rounded == "string" || typeof r.rounded == "number",
+        "shadow-md": r.variant === "solo" && !r.flat,
+        "shadow-none": r.flat,
+        [`text-${r.baseColor}`]: r.baseColor,
+        [`bg-${r.bgColor}`]: r.bgColor,
+        "text-gray-500 bg-gray-200": r.disabled,
+        "focus:outline-none focus:ring-2": !r.disabled,
+        [`focus:ring-${r.color}`]: r.color && !r.disabled && !b.value,
+        "border-red-500 ring-red-500 focus:ring-red-500": b.value,
+        "resize-none": r.noResize || r.autoGrow,
+        resize: !r.noResize && !r.autoGrow
+      }
+    ]), P = p(() => [
+      "relative w-full",
+      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) {
+      V(`click:${t}`, e);
+    }
+    return B({
+      validate: M,
+      reset: T,
+      resetValidation: A,
+      errorMessages: w,
+      isValid: p(() => !b.value)
+    }), (e, t) => (s(), l("div", {
+      class: f(P.value)
+    }, [
+      i(e.$slots, "label", y(k({ label: e.label, isFocused: n(v), isActive: !!n(c), controlRef: u.value, focus: () => {
+        var o;
+        return (o = u.value) == null ? void 0 : o.focus();
+      }, blur: () => {
+        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)
+      ]),
+      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"))
+            }, [
+              (s(), h($(n(C)(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"))
+            }, [
+              (s(), h($(n(C)(e.prependInnerIcon))))
+            ])
+          ])
+        ])) : d("", !0),
+        a("textarea", {
+          ref_key: "textareaRef",
+          ref: u,
+          value: n(c),
+          rows: e.rows,
+          disabled: e.disabled,
+          readonly: e.readonly,
+          placeholder: e.placeholder,
+          onInput: t[2] || (t[2] = (o) => {
+            n(D)(o.target.value), e.autoGrow && n(F)();
+          }),
+          onFocus: t[3] || (t[3] = (o) => {
+            v.value = !0, e.$emit("update:focused", !0);
+          }),
+          onBlur: t[4] || (t[4] = (o) => {
+            v.value = !1, e.$emit("update:focused", !1);
+          }),
+          onClick: t[5] || (t[5] = (o) => e.$emit("click:control", o)),
+          onMousedown: t[6] || (t[6] = (o) => e.$emit("mousedown:control", o)),
+          class: f([E.value, G.value, N.value])
+        }, null, 42, ee),
+        e.clearable && n(c) ? (s(), l("div", {
+          key: 2,
+          class: f(["absolute right-2 top-2", { "opacity-100": e.persistentClear, "hover:opacity-100 opacity-0 transition-opacity duration-200": !e.persistentClear }])
+        }, [
+          i(e.$slots, "clear", y(k({ isActive: !!n(c), isFocused: n(v), controlRef: u.value, focus: () => {
+            var o;
+            return (o = u.value) == null ? void 0 : o.focus();
+          }, blur: () => {
+            var o;
+            return (o = u.value) == null ? void 0 : o.blur();
+          }, props: r })), () => [
+            a("button", {
+              type: "button",
+              onClick: t[7] || (t[7] = (...o) => n(z) && n(z)(...o)),
+              class: "text-gray-500 hover:text-gray-700"
+            }, [
+              a("span", {
+                class: f(K.value)
+              }, null, 2)
+            ])
+          ])
+        ], 2)) : d("", !0),
+        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"))
+            }, [
+              (s(), h($(n(C)(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"))
+            }, [
+              (s(), h($(n(C)(e.appendIcon))))
+            ])
+          ])
+        ])) : d("", !0),
+        e.loading ? (s(), l("div", ne, [
+          i(e.$slots, "loader", {
+            color: e.loadingColor,
+            isActive: !0
+          }, () => [
+            a("div", te, [
+              a("div", {
+                class: f(["h-full transition-all duration-300", [`bg-${e.loadingColor}`]]),
+                style: { width: "100%" }
+              }, null, 2)
+            ])
+          ])
+        ])) : d("", !0),
+        !e.hideDetails || e.hideDetails === "auto" && (n(w).length || e.hint) ? (s(), l("div", {
+          key: 6,
+          class: f(["text-xs mt-1 space-y-1", { "text-red-500": n(b), "text-gray-500": !n(b) }])
+        }, [
+          i(e.$slots, "details", {}, () => [
+            n(b) ? (s(!0), l(q, { key: 0 }, J(n(w), (o, j) => i(e.$slots, "message", {
+              key: j,
+              message: o
+            }, () => [
+              a("div", null, m(o), 1)
+            ])), 128)) : e.hint ? i(e.$slots, "hint", {
+              key: 1,
+              hint: e.hint
+            }, () => [
+              O(a("div", null, m(e.hint), 513), [
+                [Q, e.persistentHint || n(v)]
+              ])
+            ]) : d("", !0)
+          ])
+        ], 2)) : d("", !0),
+        H.value ? (s(), l("div", se, [
+          i(e.$slots, "counter", {
+            counter: n(c).length,
+            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)
+          ])
+        ])) : d("", !0)
+      ])
+    ], 2));
+  }
+};
+export {
+  pe as default
+};

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

@@ -0,0 +1,66 @@
+const e = {
+  modelValue: [String, Number, Array, Object, Boolean],
+  formatModel: {
+    type: String,
+    default: "auto"
+    // auto | raw | json
+  },
+  label: String,
+  placeholder: String,
+  rows: { type: [String, Number], default: 1 },
+  autoGrow: Boolean,
+  noResize: Boolean,
+  maxRows: [Number, String],
+  clearable: Boolean,
+  clearIcon: {
+    type: [String, Function, Object],
+    default: "i-mdi-close"
+  },
+  disabled: Boolean,
+  readonly: Boolean,
+  variant: { type: String, default: "filled" },
+  density: { type: String, default: "default" },
+  // Estilo
+  rounded: [Boolean, String, Number],
+  tile: Boolean,
+  flat: Boolean,
+  color: String,
+  bgColor: String,
+  baseColor: String,
+  iconColor: [String, Boolean],
+  glow: Boolean,
+  class: [String, Array, Object],
+  inputClass: [String, Array, Object],
+  wrapperClass: [String, Array, Object],
+  // Iconos
+  prependIcon: [String, Object, Function, Array],
+  appendIcon: [String, Object, Function, Array],
+  prependInnerIcon: [String, Object, Function, Array],
+  appendInnerIcon: [String, Object, Function, Array],
+  // Validación
+  rules: {
+    type: Array,
+    default: () => []
+  },
+  error: Boolean,
+  errorMessages: {
+    type: [String, Array],
+    default: () => []
+  },
+  maxErrors: {
+    type: [String, Number],
+    default: 1
+  },
+  validationValue: null,
+  validateOn: String,
+  hint: String,
+  persistentHint: Boolean,
+  hideDetails: { type: [Boolean, String], default: !1 },
+  persistentCounter: Boolean,
+  // Loader
+  loading: Boolean,
+  loadingColor: { type: String, default: "bg-slate-500" }
+};
+export {
+  e as kunTextareaProps
+};

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

@@ -0,0 +1,76 @@
+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 v = (e) => {
+    o.value = e;
+    const a = m(e);
+    s("update:modelValue", a);
+  }, H = () => {
+    v(""), s("click:clear");
+  }, c = () => {
+    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
+      l.value.style.height = e + "px";
+  };
+  T(() => {
+    t.autoGrow && M(c);
+  });
+  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 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] : r.value;
+  });
+  return {
+    isFocused: h,
+    internalValue: o,
+    updateValue: v,
+    handleClear: H,
+    adjustHeight: c,
+    isPristine: S,
+    validate: j,
+    reset: x,
+    resetValidation: y,
+    validationErrors: r,
+    hasError: C,
+    displayedMessages: E
+  };
+}
+export {
+  k as useKunTextarea
+};

package/dist/index.js

@@ -14,22 +14,22 @@ import c from "./components/KunCardText/src/components/KunCardText.vue.js";
 import l from "./components/KunCardTitle/src/components/KunCardTitle.vue.js";
 import $ from "./components/KunChip/src/components/KunChip.vue.js";
 import d from "./components/KunCol/src/components/KunCol.vue.js";
-import C from "./components/KunContainer/src/components/KunContainer.vue.js";
-import L from "./components/KunCurrency/src/components/KunCurrency.vue.js";
-import T from "./components/KunDialog/src/components/KunDialog.vue.js";
+import T from "./components/KunContainer/src/components/KunContainer.vue.js";
+import C from "./components/KunCurrency/src/components/KunCurrency.vue.js";
+import L from "./components/KunDialog/src/components/KunDialog.vue.js";
 import b from "./components/KunDivider/src/components/KunDivider.vue.js";
 import I from "./components/KunDrawer/src/components/KunDrawer.vue.js";
 import A from "./components/KunForm/src/components/KunForm.vue.js";
 import S from "./components/KunIcon/src/components/KunIcon.vue.js";
-import F from "./components/KunList/src/components/KunList.vue.js";
-import x from "./components/KunListGroup/src/components/KunListGroup.vue.js";
+import x from "./components/KunList/src/components/KunList.vue.js";
+import F from "./components/KunListGroup/src/components/KunListGroup.vue.js";
 import g from "./components/KunListImg/src/components/KunListImg.vue.js";
 import M from "./components/KunListItem/src/components/KunListItem.vue.js";
 import h from "./components/KunListItemAction/src/components/KunListItemAction.vue.js";
 import v from "./components/KunListItemAvatar/src/components/KunListItemAvatar.vue.js";
 import w from "./components/KunListItemSubtitle/src/components/KunListItemSubtitle.vue.js";
-import B from "./components/KunListItemTitle/src/components/KunListItemTitle.vue.js";
-import D from "./components/KunListItemText/src/components/KunListItemText.vue.js";
+import D from "./components/KunListItemTitle/src/components/KunListItemTitle.vue.js";
+import B from "./components/KunListItemText/src/components/KunListItemText.vue.js";
 import y from "./components/KunListSubheader/src/components/KunListSubheader.vue.js";
 import G from "./components/kunMenu/src/components/kunMenu.vue.js";
 import R from "./components/KunModalFooter/src/components/KunModalFooter.vue.js";
@@ -41,11 +41,12 @@ import N from "./components/KunSlider/src/components/KunSlider.vue.js";
 import E from "./components/KunSpacer/src/components/KunSpacer.vue.js";
 import H from "./components/KunSwitch/src/components/KunSwitch.vue.js";
 import J from "./components/KunTable/src/components/KunTable.vue.js";
-import O from "./components/KunTextField/src/components/KunTextField.vue.js";
-import P from "./components/KunToolbar/src/components/KunToolbar.vue.js";
-import Q from "./components/KunToolbar/src/components/KunToolbarTitle.vue.js";
-import U from "./components/KunTooltip/src/components/KunTooltip.vue.js";
-const n = {
+import O from "./components/KunTextarea/src/components/KunTextarea.vue.js";
+import P from "./components/KunTextField/src/components/KunTextField.vue.js";
+import Q from "./components/KunToolbar/src/components/KunToolbar.vue.js";
+import U from "./components/KunToolbar/src/components/KunToolbarTitle.vue.js";
+import V from "./components/KunTooltip/src/components/KunTooltip.vue.js";
+const r = {
   KunAlert: o,
   KunAppbar: i,
   KunAppbarTitle: t,
@@ -57,26 +58,26 @@ const n = {
   KunCardActions: _,
   KunCardItem: e,
   KunCardSubtitle: p,
-  KunListItemTitle: B,
+  KunListItemTitle: D,
   KunCardText: c,
   KunCardTitle: l,
   KunChip: $,
   KunCol: d,
-  KunContainer: C,
-  KunCurrency: L,
-  KunDialog: T,
+  KunContainer: T,
+  KunCurrency: C,
+  KunDialog: L,
   KunDivider: b,
   KunDrawer: I,
   KunForm: A,
   KunIcon: S,
-  KunList: F,
-  KunListGroup: x,
+  KunList: x,
+  KunListGroup: F,
   KunListImg: g,
   KunListItem: M,
   KunListItemAction: h,
   KunListItemAvatar: v,
   KunListItemSubtitle: w,
-  KunListItemText: D,
+  KunListItemText: B,
   KunListSubheader: y,
   KunMenu: G,
   KunModalFooter: R,
@@ -88,14 +89,15 @@ const n = {
   KunSpacer: E,
   KunSwitch: H,
   KunTable: J,
-  KunTextField: O,
-  KunToolbar: P,
-  KunToolbarTitle: Q,
-  KunTooltip: U
+  KunTextarea: O,
+  KunTextField: P,
+  KunToolbar: Q,
+  KunToolbarTitle: U,
+  KunTooltip: V
 };
-function Em(r) {
-  for (const m in n)
-    r.component(m, n[m]);
+function Jm(n) {
+  for (const m in r)
+    n.component(m, r[m]);
 }
 export {
   o as KunAlert,
@@ -113,22 +115,22 @@ export {
   l as KunCardTitle,
   $ as KunChip,
   d as KunCol,
-  C as KunContainer,
-  L as KunCurrency,
-  T as KunDialog,
+  T as KunContainer,
+  C as KunCurrency,
+  L as KunDialog,
   b as KunDivider,
   I as KunDrawer,
   A as KunForm,
   S as KunIcon,
-  F as KunList,
-  x as KunListGroup,
+  x as KunList,
+  F as KunListGroup,
   g as KunListImg,
   M as KunListItem,
   h as KunListItemAction,
   v as KunListItemAvatar,
   w as KunListItemSubtitle,
-  D as KunListItemText,
-  B as KunListItemTitle,
+  B as KunListItemText,
+  D as KunListItemTitle,
   y as KunListSubheader,
   q as KunLoaderCircular,
   G as KunMenu,
@@ -139,9 +141,10 @@ export {
   E as KunSpacer,
   H as KunSwitch,
   J as KunTable,
-  O as KunTextField,
-  P as KunToolbar,
-  Q as KunToolbarTitle,
-  U as KunTooltip,
-  Em as install
+  P as KunTextField,
+  O as KunTextarea,
+  Q as KunToolbar,
+  U as KunToolbarTitle,
+  V as KunTooltip,
+  Jm as install
 };

package/dist/utils/renderIcon.js

@@ -0,0 +1,6 @@
+function r(e, n = {}, t = null) {
+  return e ? typeof e == "string" ? h("span", { class: e, ...n }) : typeof e == "function" ? h(e, n) : h(resolveComponent("KunIcon"), { icon: e, ...n }) : t;
+}
+export {
+  r as renderIconSlot
+};

package/package.json

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