adverich-kun-ui 0.1.114 → 0.1.115

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

@@ -1,24 +1,29 @@
-import { getCurrentInstance as z, computed as y, useSlots as A, createElementBlock as r, openBlock as s, createCommentVNode as o, createElementVNode as b, normalizeClass as a, toDisplayString as i, mergeProps as M, unref as l, renderSlot as v, withModifiers as N } from "vue";
-import T from "../composables/KunTextFieldProps.js";
-import U from "../composables/useKunTextFieldComposable.js";
-const H = { class: "w-full flex flex-col relative" }, q = {
+import { getCurrentInstance as M, computed as d, useSlots as U, ref as H, createElementBlock as s, openBlock as o, createCommentVNode as r, createElementVNode as b, normalizeClass as a, toDisplayString as i, mergeProps as q, unref as t, renderSlot as c, withModifiers as G, createVNode as J } from "vue";
+import { icons as F } from "../../../../icons/index.js";
+import L from "../composables/KunTextFieldProps.js";
+import Q from "../composables/useKunTextFieldComposable.js";
+import R from "../../../KunIcon/src/components/KunIcon.vue.js";
+const W = { class: "w-full flex flex-col relative" }, X = {
   key: 0,
   class: "mr-2"
-}, G = ["type", "value", "placeholder", "disabled", "readonly", "maxlength", "aria-invalid", "aria-describedby"], J = ["disabled"], L = {
-  key: 4,
+}, Y = ["type", "value", "placeholder", "disabled", "readonly", "maxlength", "aria-invalid", "aria-describedby"], Z = ["disabled"], _ = {
+  key: 3,
+  class: "flex items-center justify-center min-w-[32px] h-full px-1"
+}, ee = {
+  key: 5,
   class: "ml-2"
-}, O = {
+}, te = {
   key: 0,
   class: "h-[1.25rem]"
-}, Q = ["id"], R = {
+}, le = ["id"], ne = {
   key: 1,
   class: "text-xs text-center"
-}, W = {
+}, se = {
   key: 2,
   class: "text-xs text-right"
-}, _ = {
+}, ue = {
   __name: "KunTextField",
-  props: { ...T },
+  props: { ...L },
   emits: [
     "update:modelValue",
     "focusInput",
@@ -27,101 +32,111 @@ const H = { class: "w-full flex flex-col relative" }, q = {
     "keyDown",
     "keyUp"
   ],
-  setup(x, { expose: F, emit: V }) {
-    const h = x, d = V, {
+  setup(P, { expose: V, emit: j }) {
+    const u = P, p = j, {
       inputField: k,
-      inputValue: u,
-      inputFocused: m,
+      inputValue: f,
+      inputFocused: h,
       validationError: B,
-      hasError: p,
-      handleInput: g,
-      handleBlur: c,
+      hasError: m,
+      handleInput: w,
+      handleBlur: g,
       focusInput: C,
       validate: D,
       reset: E,
       resetValidation: K,
-      clearInput: w
-    } = U(h, d);
-    F({
+      clearInput: I
+    } = Q(u, p);
+    V({
       validate: D,
       reset: E,
       resetValidation: K,
       inputField: k
     });
-    const f = `input-${z().uid}`, j = y(() => m.value || !!u.value || h.dirty), I = A(), P = y(() => !!I["prepend-inner"]), S = y(() => !!I["append-inner"]);
-    return (e, t) => {
+    const y = `input-${M().uid}`, S = d(() => h.value || !!f.value || u.dirty), x = U(), T = d(() => !!x["prepend-inner"]), N = d(() => !!x["append-inner"]), v = H(!1), O = d(() => v.value ? F.eyeOffOutline : F.eyeOutline);
+    function z() {
+      v.value = !v.value;
+    }
+    const A = d(() => u.type === "password" ? v.value ? "text" : "password" : u.type);
+    return (e, l) => {
       var $;
-      return s(), r("div", H, [
-        e.label ? (s(), r("label", {
+      return o(), s("div", W, [
+        e.label ? (o(), s("label", {
           key: 0,
-          for: f,
+          for: y,
           class: a([
             e.labelColor,
             "absolute left-2 transition-all duration-200 ease-in-out pointer-events-none select-none z-10",
-            j.value || e.placeholder ? "-top-2.25 text-xs opacity-80" : "top-3 text-sm opacity-80"
+            S.value || e.placeholder ? "-top-2.25 text-xs opacity-80" : "top-3 text-sm opacity-80"
           ])
-        }, i(e.label), 3)) : o("", !0),
-        b("div", M({ class: "w-full flex flex-col justify-center relative" }, e.$attrs), [
+        }, i(e.label), 3)) : r("", !0),
+        b("div", q({ class: "w-full flex flex-col justify-center relative" }, e.$attrs), [
           b("div", {
             class: a(["flex flex-row items-center w-full h-full border", [
               e.bgInput,
               e.rounded,
-              l(m) ? "border-blue-600 shadow-[0_0_0_1px_rgba(59,130,246,0.5)]" : e.borderColor,
+              t(h) ? "border-blue-600 shadow-[0_0_0_1px_rgba(59,130,246,0.5)]" : e.borderColor,
               e.disabled ? "opacity-60 cursor-not-allowed" : "cursor-text",
-              l(p) ? "bg-red-200 : dark:bg-red-900" : ""
+              t(m) ? "bg-red-200 dark:bg-red-900" : ""
             ]])
           }, [
-            e.prefix ? (s(), r("div", q, i(e.prefix), 1)) : o("", !0),
-            P.value ? (s(), r("div", {
+            e.prefix ? (o(), s("div", X, i(e.prefix), 1)) : r("", !0),
+            T.value ? (o(), s("div", {
               key: 1,
               class: a([e.prependInnerClass, "flex items-center justify-center min-w-[32px] h-full px-1"])
             }, [
-              v(e.$slots, "prepend-inner")
-            ], 2)) : o("", !0),
+              c(e.$slots, "prepend-inner")
+            ], 2)) : r("", !0),
             b("input", {
               ref_key: "inputField",
               ref: k,
-              type: e.type,
-              value: l(u),
-              id: f,
+              type: A.value,
+              value: t(f),
+              id: y,
               placeholder: e.placeholder,
               disabled: e.disabled,
               readonly: e.readonly,
               maxlength: e.maxlength,
               autocomplete: "off",
               class: a(["w-full h-full bg-transparent rounded focus:outline-none p-3", [e.textColor, e.placeholderColor, e.textCenter ? "text-center" : ""]]),
-              "aria-invalid": l(p) ? "true" : "false",
-              "aria-describedby": l(p) ? `error-${f}` : null,
-              onInput: t[0] || (t[0] = (...n) => l(g) && l(g)(...n)),
-              onBlur: t[1] || (t[1] = (...n) => l(c) && l(c)(...n)),
-              onFocus: t[2] || (t[2] = (...n) => l(C) && l(C)(...n)),
-              onClick: t[3] || (t[3] = N((n) => d("handleClick"), ["stop"])),
-              onKeydown: t[4] || (t[4] = (n) => d("keyDown", n)),
-              onKeyup: t[5] || (t[5] = (n) => d("keyUp", n))
-            }, null, 42, G),
-            e.clearable && l(u) ? (s(), r("button", {
+              "aria-invalid": t(m) ? "true" : "false",
+              "aria-describedby": t(m) ? `error-${y}` : null,
+              onInput: l[0] || (l[0] = (...n) => t(w) && t(w)(...n)),
+              onBlur: l[1] || (l[1] = (...n) => t(g) && t(g)(...n)),
+              onFocus: l[2] || (l[2] = (...n) => t(C) && t(C)(...n)),
+              onClick: l[3] || (l[3] = G((n) => p("handleClick"), ["stop"])),
+              onKeydown: l[4] || (l[4] = (n) => p("keyDown", n)),
+              onKeyup: l[5] || (l[5] = (n) => p("keyUp", n))
+            }, null, 42, Y),
+            e.clearable && t(f) ? (o(), s("button", {
               key: 2,
               type: "button",
-              onClick: t[6] || (t[6] = (...n) => l(w) && l(w)(...n)),
+              onClick: l[6] || (l[6] = (...n) => t(I) && t(I)(...n)),
               class: a(["ml-2", e.textColor]),
               disabled: e.disabled || e.readonly
-            }, " × ", 10, J)) : o("", !0),
-            v(e.$slots, "default"),
-            S.value ? (s(), r("div", {
-              key: 3,
+            }, " × ", 10, Z)) : r("", !0),
+            c(e.$slots, "default"),
+            e.type === "password" || e.showPasswordToggle ? (o(), s("div", _, [
+              J(R, {
+                icon: O.value,
+                onClick: z
+              }, null, 8, ["icon"])
+            ])) : r("", !0),
+            N.value ? (o(), s("div", {
+              key: 4,
               class: a([e.appendInnerClass, "flex items-center justify-center min-w-[32px] h-full px-1"])
             }, [
-              v(e.$slots, "append-inner")
-            ], 2)) : o("", !0),
-            e.suffix ? (s(), r("div", L, i(e.suffix), 1)) : o("", !0)
+              c(e.$slots, "append-inner")
+            ], 2)) : r("", !0),
+            e.suffix ? (o(), s("div", ee, i(e.suffix), 1)) : r("", !0)
           ], 2),
-          e.hideDetails ? o("", !0) : (s(), r("div", O, [
-            l(p) ? (s(), r("div", {
+          e.hideDetails ? r("", !0) : (o(), s("div", te, [
+            t(m) ? (o(), s("div", {
               key: 0,
-              id: `error-${f}`,
+              id: `error-${y}`,
               class: "text-red-500 text-sm text-center"
-            }, i(l(B) || e.errorMessage), 9, Q)) : e.hint && (e.persistentHint || l(m)) ? (s(), r("div", R, i(e.hint), 1)) : o("", !0),
-            e.counter && e.maxlength ? (s(), r("div", W, i((($ = l(u)) == null ? void 0 : $.length) || 0) + " / " + i(e.maxlength), 1)) : o("", !0)
+            }, i(t(B) || e.errorMessage), 9, le)) : e.hint && (e.persistentHint || t(h)) ? (o(), s("div", ne, i(e.hint), 1)) : r("", !0),
+            e.counter && e.maxlength ? (o(), s("div", se, i((($ = t(f)) == null ? void 0 : $.length) || 0) + " / " + i(e.maxlength), 1)) : r("", !0)
           ]))
         ], 16)
       ]);
@@ -129,5 +144,5 @@ const H = { class: "w-full flex flex-col relative" }, q = {
   }
 };
 export {
-  _ as default
+  ue as default
 };

package/dist/components/KunTextField/src/composables/KunTextFieldProps.js

@@ -27,7 +27,8 @@ const e = {
   labelColor: { type: String, default: "text-black/80 dark:text-white/80" },
   placeholderColor: { type: String, default: "placeholder-black/60 dark:placeholder-white/60" },
   bgInput: { type: String, default: "bg-slate-200 dark:bg-slate-800" },
-  textCenter: { type: Boolean, default: !1 }
+  textCenter: { type: Boolean, default: !1 },
+  showPasswordToggle: { type: Boolean, default: !0 }
 };
 export {
   e as default

package/dist/icons/IconEyeOffOutline.vue.js

@@ -0,0 +1,20 @@
+import { createElementBlock as t, openBlock as c, createElementVNode as o } from "vue";
+import r from "../_virtual/_plugin-vue_export-helper.js";
+const n = {}, l = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+};
+function s(f, e) {
+  return c(), t("svg", l, e[0] || (e[0] = [
+    o("path", {
+      fill: "currentColor",
+      d: "M2 5.27L3.28 4L20 20.72L18.73 22l-3.08-3.08c-1.15.38-2.37.58-3.65.58c-5 0-9.27-3.11-11-7.5c.69-1.76 1.79-3.31 3.19-4.54zM12 9a3 3 0 0 1 3 3a3 3 0 0 1-.17 1L11 9.17A3 3 0 0 1 12 9m0-4.5c5 0 9.27 3.11 11 7.5a11.8 11.8 0 0 1-4 5.19l-1.42-1.43A9.86 9.86 0 0 0 20.82 12A9.82 9.82 0 0 0 12 6.5c-1.09 0-2.16.18-3.16.5L7.3 5.47c1.44-.62 3.03-.97 4.7-.97M3.18 12A9.82 9.82 0 0 0 12 17.5c.69 0 1.37-.07 2-.21L11.72 15A3.064 3.064 0 0 1 9 12.28L5.6 8.87c-.99.85-1.82 1.91-2.42 3.13"
+    }, null, -1)
+  ]));
+}
+const a = /* @__PURE__ */ r(n, [["render", s]]);
+export {
+  a as default
+};

package/dist/icons/IconEyeOutline.vue.js

@@ -0,0 +1,20 @@
+import { createElementBlock as t, openBlock as o, createElementVNode as r } from "vue";
+import n from "../_virtual/_plugin-vue_export-helper.js";
+const c = {}, l = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+};
+function a(s, e) {
+  return o(), t("svg", l, e[0] || (e[0] = [
+    r("path", {
+      fill: "currentColor",
+      d: "M12 9a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m0-4.5c5 0 9.27 3.11 11 7.5c-1.73 4.39-6 7.5-11 7.5S2.73 16.39 1 12c1.73-4.39 6-7.5 11-7.5M3.18 12a9.821 9.821 0 0 0 17.64 0a9.821 9.821 0 0 0-17.64 0"
+    }, null, -1)
+  ]));
+}
+const f = /* @__PURE__ */ n(c, [["render", a]]);
+export {
+  f as default
+};

package/dist/icons/index.js

@@ -1,23 +1,27 @@
 import o from "./IconAsterisk.vue.js";
-import r from "./IconCheck.vue.js";
-import e from "./IconClose.vue.js";
+import e from "./IconCheck.vue.js";
+import r from "./IconClose.vue.js";
 import t from "./IconDelete.vue.js";
 import n from "./IconEdit.vue.js";
-import m from "./IconMenuDownOutline.vue.js";
-import i from "./IconMenuUpOutline.vue.js";
+import i from "./IconMenuDownOutline.vue.js";
+import m from "./IconMenuUpOutline.vue.js";
 import c from "./IconSearch.vue.js";
-import p from "./IconStar.vue.js";
-const d = {
+import f from "./IconStar.vue.js";
+import p from "./IconEyeOutline.vue.js";
+import l from "./IconEyeOffOutline.vue.js";
+const w = {
   asterisk: o,
-  check: r,
-  close: e,
+  check: e,
+  close: r,
   delete: t,
   edit: n,
-  menuDownOutline: m,
-  menuUpOutline: i,
+  menuDownOutline: i,
+  menuUpOutline: m,
   search: c,
-  star: p
+  star: f,
+  eyeOutline: p,
+  eyeOffOutline: l
 };
 export {
-  d as icons
+  w as icons
 };

package/package.json

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