adverich-kun-ui 0.1.365 → 0.1.366

package/dist/components/KunAutocomplete/src/composables/KunAutocompleteProps.js

@@ -62,8 +62,8 @@ const e = {
   // ***** STYLE ***** //
   height: { default: "h-[500px]" },
   maxHeight: { default: "max-h-1/2" },
-  density: { type: String, default: "comfortable" },
-  zIndex: { type: String, default: "z-50" },
+  density: { type: String, default: "default" },
+  zIndex: { type: String, default: "z-250" },
   hideDetails: {
     type: Boolean,
     default: !0

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

@@ -1,48 +1,45 @@
-import { ref as q, computed as p, createElementBlock as l, openBlock as s, mergeProps as J, renderSlot as i, createElementVNode as a, normalizeProps as y, guardReactiveProps as k, unref as t, createCommentVNode as d, toDisplayString as m, createBlock as h, resolveDynamicComponent as C, normalizeClass as g, Fragment as O, renderList as Q, withDirectives as U, vShow as W, createTextVNode as X } from "vue";
-import { kunTextareaProps as Y } from "../composables/KunTextareaProps.js";
-import { useKunTextarea as Z } from "../composables/useKunTextareaComposable.js";
-import { renderIconSlot as $ } from "../../../../utils/renderIcon.js";
-const x = {
-  key: 0,
-  class: "block text-sm font-medium mb-1"
-}, _ = { class: "relative" }, ee = {
+import { ref as Q, getCurrentInstance as U, computed as p, createElementBlock as l, openBlock as s, mergeProps as B, renderSlot as i, createElementVNode as a, unref as t, createCommentVNode as d, normalizeClass as g, toDisplayString as y, normalizeProps as w, guardReactiveProps as I, createBlock as m, resolveDynamicComponent as k, Fragment as W, renderList as X, withDirectives as Y, vShow as Z, createTextVNode as x } from "vue";
+import { kunTextareaProps as _ } from "../composables/KunTextareaProps.js";
+import { useKunTextarea as ee } from "../composables/useKunTextareaComposable.js";
+import { renderIconSlot as h } from "../../../../utils/renderIcon.js";
+const oe = { class: "relative" }, re = {
   key: 0,
   class: "absolute left-2 top-2 flex items-center"
-}, re = {
+}, te = {
   key: 1,
   class: "absolute left-2 top-2 ml-1"
-}, oe = ["value", "rows", "disabled", "readonly", "placeholder"], te = {
+}, ne = ["value", "rows", "disabled", "readonly", "placeholder"], se = {
   key: 3,
   class: "absolute right-2 top-2 mr-1"
-}, ne = {
+}, le = {
   key: 4,
   class: "absolute right-2 top-2 flex items-center"
-}, se = {
+}, ae = {
   key: 5,
   class: "mt-1"
-}, le = { class: "h-1 w-full bg-gray-200 rounded overflow-hidden" }, ae = {
+}, ie = { class: "h-1 w-full bg-gray-200 rounded overflow-hidden" }, de = {
   key: 7,
   class: "text-xs text-right mt-1 text-gray-400"
-}, ie = { key: 0 }, ve = {
+}, ue = { key: 0 }, ge = {
   __name: "KunTextarea",
-  props: Y,
+  props: _,
   emits: ["update:modelValue", "click:clear", "click:control", "update:focused", "mousedown:control"],
-  setup(B, { expose: S, emit: D }) {
-    const r = B, R = D, u = q(null), {
+  setup(S, { expose: D, emit: F }) {
+    const o = S, R = F, u = Q(null), A = `textarea-${U().uid}`, M = p(() => v.value || !!c.value || o.dirty), {
       isFocused: v,
       internalValue: c,
       rootRef: V,
-      updateValue: F,
+      updateValue: P,
       handleClear: z,
-      adjustHeight: M,
-      validate: P,
-      reset: T,
-      resetValidation: A,
+      adjustHeight: T,
+      validate: E,
+      reset: G,
+      resetValidation: N,
       hasError: f,
-      displayedMessages: w
-    } = Z(r, R, u), E = p(() => {
-      const e = !!r.bgColor;
-      switch (r.variant) {
+      displayedMessages: C
+    } = ee(o, R, u), H = p(() => {
+      const e = !!o.bgColor;
+      switch (o.variant) {
         case "filled":
           return [
             e ? "" : "bg-gray-100 dark:bg-gray-900",
@@ -60,82 +57,76 @@ const x = {
         default:
           return "";
       }
-    }), G = p(() => {
-      switch (r.density) {
-        case "comfortable":
-          return "py-2";
-        case "compact":
-          return "py-1 text-sm";
-        default:
-          return "";
-      }
-    }), N = p(() => [
+    }), K = p(() => o.density === "compact" ? "p-1" : o.density === "comfortable" ? "p-2" : "p-3"), j = p(() => [
       "w-full resize-none p-2 transition-colors duration-150",
-      r.inputClass,
+      o.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.textColor}`]: r.textColor,
-        [`${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 && !f.value,
+        "rounded-md": !o.tile,
+        "rounded-none": o.tile,
+        [`rounded-${o.rounded}`]: typeof o.rounded == "string" || typeof o.rounded == "number",
+        "shadow-md": o.variant === "solo" && !o.flat,
+        "shadow-none": o.flat,
+        [`text-${o.textColor}`]: o.textColor,
+        [`${o.bgColor}`]: o.bgColor,
+        "text-gray-500 bg-gray-200": o.disabled,
+        "focus:outline-none focus:ring-2": !o.disabled,
+        [`focus:ring-${o.color}`]: o.color && !o.disabled && !f.value,
         "border-red-500 ring-red-500 focus:ring-red-500": f.value,
-        "resize-none": r.noResize || r.autoGrow,
-        resize: !r.noResize && !r.autoGrow
+        "resize-none": o.noResize || o.autoGrow,
+        resize: !o.noResize && !o.autoGrow
       }
-    ]), H = 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), K = p(() => r.persistentCounter ? !0 : !!r.counter && v.value), j = p(() => typeof r.clearIcon == "string" ? r.clearIcon : "i-heroicons-x-mark-20-solid");
+    ]), L = p(() => [
+      "relative w-full flex flex-col",
+      o.class,
+      o.wrapperClass
+    ]), $ = p(() => o.counter === !0 ? 25 : typeof o.counter == "number" || typeof o.counter == "string" ? o.counter : null), q = p(() => o.persistentCounter ? !0 : !!o.counter && v.value), J = p(() => typeof o.clearIcon == "string" ? o.clearIcon : "i-heroicons-x-mark-20-solid");
     function b(e, n) {
       R(`click:${n}`, e);
     }
-    return S({
-      validate: P,
-      reset: T,
-      resetValidation: A,
-      errorMessages: w,
+    return D({
+      validate: E,
+      reset: G,
+      resetValidation: N,
+      errorMessages: C,
       isValid: p(() => !f.value),
       rootRef: V,
       focus: () => {
         var e;
         return (e = u.value) == null ? void 0 : e.focus();
       }
-    }), (e, n) => (s(), l("div", J({
-      class: H.value,
+    }), (e, n) => (s(), l("div", B({
+      class: L.value,
       ref_key: "rootRef",
       ref: V
     }, e.$attrs), [
-      i(e.$slots, "label", y(k({ label: e.label, isFocused: t(v), isActive: !!t(c), controlRef: u.value, focus: () => {
-        var o;
-        return (o = u.value) == null ? void 0 : o.focus();
+      i(e.$slots, "label", B({ for: A }, { label: e.label, isFocused: t(v), isActive: !!t(c), controlRef: u.value, focus: () => {
+        var r;
+        return (r = u.value) == null ? void 0 : r.focus();
       }, blur: () => {
-        var o;
-        return (o = u.value) == null ? void 0 : o.blur();
-      }, props: r })), () => [
-        e.label ? (s(), l("label", x, m(e.label), 1)) : d("", !0)
+        var r;
+        return (r = u.value) == null ? void 0 : r.blur();
+      }, props: o }), () => [
+        e.label ? (s(), l("label", {
+          key: 0,
+          class: g(["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"])
+        }, y(e.label), 3)) : d("", !0)
       ]),
-      a("div", _, [
-        e.prependIcon || e.$slots.prepend ? (s(), l("div", ee, [
-          i(e.$slots, "prepend", y(k(e.prependSlotBindings)), () => [
+      a("div", oe, [
+        e.prependIcon || e.$slots.prepend ? (s(), l("div", re, [
+          i(e.$slots, "prepend", w(I(e.prependSlotBindings)), () => [
             a("div", {
-              onClick: n[0] || (n[0] = (o) => b(o, "prepend"))
+              onClick: n[0] || (n[0] = (r) => b(r, "prepend"))
             }, [
-              (s(), h(C(t($)(e.prependIcon))))
+              (s(), m(k(t(h)(e.prependIcon))))
             ])
           ])
         ])) : d("", !0),
-        e.prependInnerIcon || e.$slots["prepend-inner"] ? (s(), l("div", re, [
+        e.prependInnerIcon || e.$slots["prepend-inner"] ? (s(), l("div", te, [
           i(e.$slots, "prepend-inner", {}, () => [
             a("div", {
-              onClick: n[1] || (n[1] = (o) => b(o, "prependInner"))
+              onClick: n[1] || (n[1] = (r) => b(r, "prependInner"))
             }, [
-              (s(), h(C(t($)(e.prependInnerIcon))))
+              (s(), m(k(t(h)(e.prependInnerIcon))))
             ])
           ])
         ])) : d("", !0),
@@ -147,65 +138,65 @@ const x = {
           disabled: e.disabled,
           readonly: e.readonly,
           placeholder: e.placeholder,
-          onInput: n[2] || (n[2] = (o) => {
-            t(F)(o.target.value), e.autoGrow && t(M)();
+          onInput: n[2] || (n[2] = (r) => {
+            t(P)(r.target.value), e.autoGrow && t(T)();
           }),
-          onFocus: n[3] || (n[3] = (o) => {
+          onFocus: n[3] || (n[3] = (r) => {
             v.value = !0, e.$emit("update:focused", !0);
           }),
-          onBlur: n[4] || (n[4] = (o) => {
+          onBlur: n[4] || (n[4] = (r) => {
             v.value = !1, e.$emit("update:focused", !1);
           }),
-          onClick: n[5] || (n[5] = (o) => e.$emit("click:control", o)),
-          onMousedown: n[6] || (n[6] = (o) => e.$emit("mousedown:control", o)),
-          class: g([E.value, G.value, N.value])
-        }, null, 42, oe),
+          onClick: n[5] || (n[5] = (r) => e.$emit("click:control", r)),
+          onMousedown: n[6] || (n[6] = (r) => e.$emit("mousedown:control", r)),
+          class: g([[H.value, K.value, j.value], "py-3"])
+        }, null, 42, ne),
         e.clearable && t(c) ? (s(), l("div", {
           key: 2,
           class: g(["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: !!t(c), isFocused: t(v), controlRef: u.value, focus: () => {
-            var o;
-            return (o = u.value) == null ? void 0 : o.focus();
+          i(e.$slots, "clear", w(I({ isActive: !!t(c), isFocused: t(v), controlRef: u.value, focus: () => {
+            var r;
+            return (r = u.value) == null ? void 0 : r.focus();
           }, blur: () => {
-            var o;
-            return (o = u.value) == null ? void 0 : o.blur();
-          }, props: r })), () => [
+            var r;
+            return (r = u.value) == null ? void 0 : r.blur();
+          }, props: o })), () => [
             a("button", {
               type: "button",
-              onClick: n[7] || (n[7] = (...o) => t(z) && t(z)(...o)),
+              onClick: n[7] || (n[7] = (...r) => t(z) && t(z)(...r)),
               class: "text-gray-500 hover:text-gray-700"
             }, [
               a("span", {
-                class: g(j.value)
+                class: g(J.value)
               }, null, 2)
             ])
           ])
         ], 2)) : d("", !0),
-        e.appendInnerIcon || e.$slots["append-inner"] ? (s(), l("div", te, [
+        e.appendInnerIcon || e.$slots["append-inner"] ? (s(), l("div", se, [
           i(e.$slots, "append-inner", {}, () => [
             a("div", {
-              onClick: n[8] || (n[8] = (o) => b(o, "appendInner"))
+              onClick: n[8] || (n[8] = (r) => b(r, "appendInner"))
             }, [
-              (s(), h(C(t($)(e.appendInnerIcon))))
+              (s(), m(k(t(h)(e.appendInnerIcon))))
             ])
           ])
         ])) : d("", !0),
-        e.appendIcon || e.$slots.append ? (s(), l("div", ne, [
-          i(e.$slots, "append", y(k(e.appendSlotBindings)), () => [
+        e.appendIcon || e.$slots.append ? (s(), l("div", le, [
+          i(e.$slots, "append", w(I(e.appendSlotBindings)), () => [
             a("div", {
-              onClick: n[9] || (n[9] = (o) => b(o, "append"))
+              onClick: n[9] || (n[9] = (r) => b(r, "append"))
             }, [
-              (s(), h(C(t($)(e.appendIcon))))
+              (s(), m(k(t(h)(e.appendIcon))))
             ])
           ])
         ])) : d("", !0),
-        e.loading ? (s(), l("div", se, [
+        e.loading ? (s(), l("div", ae, [
           i(e.$slots, "loader", {
             color: e.loadingColor,
             isActive: !0
           }, () => [
-            a("div", le, [
+            a("div", ie, [
               a("div", {
                 class: g(["h-full transition-all duration-300", [`${e.loadingColor}`]]),
                 style: { width: "100%" }
@@ -213,34 +204,34 @@ const x = {
             ])
           ])
         ])) : d("", !0),
-        !e.hideDetails || e.hideDetails === "auto" && (t(w).length || e.hint) ? (s(), l("div", {
+        !e.hideDetails || e.hideDetails === "auto" && (t(C).length || e.hint) ? (s(), l("div", {
           key: 6,
           class: g(["text-xs mt-1 space-y-1", { "text-red-500": t(f), "text-gray-500": !t(f) }])
         }, [
           i(e.$slots, "details", {}, () => [
-            t(f) ? (s(!0), l(O, { key: 0 }, Q(t(w), (o, L) => i(e.$slots, "message", {
-              key: L,
-              message: o
+            t(f) ? (s(!0), l(W, { key: 0 }, X(t(C), (r, O) => i(e.$slots, "message", {
+              key: O,
+              message: r
             }, () => [
-              a("div", null, m(o), 1)
+              a("div", null, y(r), 1)
             ])), 128)) : e.hint ? i(e.$slots, "hint", {
               key: 1,
               hint: e.hint
             }, () => [
-              U(a("div", null, m(e.hint), 513), [
-                [W, e.persistentHint || t(v)]
+              Y(a("div", null, y(e.hint), 513), [
+                [Z, e.persistentHint || t(v)]
               ])
             ]) : d("", !0)
           ])
         ], 2)) : d("", !0),
-        K.value ? (s(), l("div", ae, [
+        q.value ? (s(), l("div", de, [
           i(e.$slots, "counter", {
             counter: t(c).length,
-            max: I.value,
+            max: $.value,
             value: t(c).length
           }, () => [
-            X(m(t(c).length), 1),
-            I.value ? (s(), l("span", ie, " / " + m(I.value), 1)) : d("", !0)
+            x(y(t(c).length), 1),
+            $.value ? (s(), l("span", ue, " / " + y($.value), 1)) : d("", !0)
           ])
         ])) : d("", !0)
       ])
@@ -248,5 +239,5 @@ const x = {
   }
 };
 export {
-  ve as default
+  ge as default
 };

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

@@ -6,6 +6,7 @@ const e = {
     // auto | raw | json
   },
   label: String,
+  dirty: { type: Boolean, default: !1 },
   placeholder: String,
   rows: { type: [String, Number], default: 1 },
   autoGrow: Boolean,

package/package.json

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