@agrotools1/at-components 2.0.30 → 2.0.32

package/dist/document-input/DocumentInput.vue.js

@@ -1,21 +1,21 @@
-import { defineComponent as te, useId as ae, ref as k, computed as A, watch as le, createElementBlock as v, openBlock as f, normalizeClass as x, unref as p, createBlock as b, createCommentVNode as m, createElementVNode as E, withCtx as re, createTextVNode as ne, toDisplayString as j, createVNode as R, mergeProps as ce } from "vue";
-import { cn as C } from "../lib/utils.js";
-import { AtCheckCircleRegularIcon as oe } from "../packages/at-icons/dist/AtCheckCircleRegularIcon/index.js";
+import { defineComponent as te, useId as le, ref as k, computed as x, watch as ae, createElementBlock as h, openBlock as d, normalizeClass as b, unref as p, createBlock as w, createCommentVNode as m, createElementVNode as R, withCtx as ne, createTextVNode as re, toDisplayString as V, createVNode as E, mergeProps as oe } from "vue";
+import { cn as T } from "../lib/utils.js";
+import { AtCheckCircleRegularIcon as ce } from "../packages/at-icons/dist/AtCheckCircleRegularIcon/index.js";
 import { AtCircleXMarkRegularIcon as se } from "../packages/at-icons/dist/AtCircleXMarkRegularIcon/index.js";
 import { AtCircleXMarkSolidIcon as ie } from "../packages/at-icons/dist/AtCircleXMarkSolidIcon/index.js";
 import ue from "../input/Input.vue.js";
 import pe from "../label/Label.vue.js";
-import { isValidCpf as T, isValidCnpj as _, applyCnpjMask as N, applyCpfMask as P } from "./utils.js";
-const de = { key: 0 }, fe = { class: "relative flex items-center" }, me = {
+import { isValidCpf as v, isValidCnpj as g, applyCnpjMask as P, applyCpfMask as $ } from "./utils.js";
+const fe = { key: 0 }, de = { class: "relative flex items-center" }, me = {
   key: 0,
   class: "absolute right-2.5 flex items-center justify-center"
-}, be = /* @__PURE__ */ te({
+}, Te = /* @__PURE__ */ te({
   inheritAttrs: !1,
   __name: "DocumentInput",
   props: {
     id: {},
     modelValue: {},
-    documentType: { default: "generic" },
+    documentType: { default: "cpf-cnpj" },
     label: {},
     description: {},
     required: { type: Boolean },
@@ -23,19 +23,21 @@ const de = { key: 0 }, fe = { class: "relative flex items-center" }, me = {
     error: { type: [Boolean, String], default: !1 },
     success: { type: Boolean, default: !1 },
     allowAlpha: { type: Boolean, default: !1 },
+    withInternalValidation: { type: Boolean, default: !1 },
     placeholder: {},
     maxLength: {},
     toUpperCase: { type: Boolean, default: !1 },
     unmask: { type: Boolean, default: !0 },
     customMask: {},
     class: {},
-    inputClass: {}
+    inputClass: {},
+    withClearIcon: { type: Boolean, default: !0 }
   },
   emits: ["update:modelValue", "change", "blur", "focus", "validate", "clear"],
-  setup($, { expose: L, emit: D }) {
-    const e = $, s = D, h = e.id || ae(), w = `error-${h}`, V = `desc-${h}`, n = k(e.modelValue || ""), g = k(!1), B = A(
+  setup(N, { expose: D, emit: F }) {
+    const e = N, s = F, y = e.id || le(), B = `error-${y}`, I = `desc-${y}`, r = k(e.modelValue || ""), A = k(!1), _ = k(!1), M = x(
       () => e.documentType === "cnpj" || e.documentType === "cpf" || e.documentType === "cpf-cnpj"
-    ), F = A(() => {
+    ), L = x(() => {
       switch (e.documentType) {
         case "cnpj":
           return e.allowAlpha ? "AA.AAA.AAA/AAAA-DV" : "00.000.000/0000-00";
@@ -46,196 +48,210 @@ const de = { key: 0 }, fe = { class: "relative flex items-center" }, me = {
         default:
           return;
       }
-    }), d = A(() => !!e.error && !g.value), M = { cnpj: 18, cpf: 14 }, Z = A(() => {
-      if (!e.success || d.value || !n.value) return !1;
-      switch (e.documentType) {
-        case "cnpj":
-          return n.value.length === M.cnpj && _(n.value);
-        case "cpf":
-          return n.value.length === M.cpf && T(n.value);
-        case "cpf-cnpj":
-          return I(n.value);
-        default:
+    }), f = x(() => {
+      if (e.error) return !0;
+      if (e.withInternalValidation) {
+        if (!r.value || A.value) return !1;
+        const t = r.value.replace(/[^A-Z0-9]/gi, "");
+        if (!t) return !1;
+        if (t.length === 11 && !v(t) || t.length === 14 && !g(t) || _.value && (e.documentType === "cpf" && t.length !== 11 || e.documentType === "cnpj" && t.length !== 14 || e.documentType === "cpf-cnpj" && t.length !== 11 && t.length !== 14))
           return !0;
       }
+      return !1;
+    }), Z = x(() => {
+      if (f.value) return !1;
+      if (e.success) {
+        if (!r.value) return !1;
+        const t = j(r.value);
+        return !(e.documentType === "cpf" && t.length !== 11 || e.documentType === "cnpj" && t.length !== 14 || e.documentType === "cpf-cnpj" && t.length !== 11 && t.length !== 14);
+      }
+      if (e.withInternalValidation) {
+        if (!r.value) return !1;
+        const t = j(r.value);
+        if (e.documentType === "cpf") return v(t);
+        if (e.documentType === "cnpj") return g(t);
+        if (e.documentType === "cpf-cnpj")
+          return t.length === 11 ? v(t) : g(t);
+      }
+      return !1;
     });
-    function X(t) {
+    function j(t) {
       return t.replace(/[^A-Z0-9]/gi, "");
     }
-    function I(t) {
-      const a = t.replace(e.allowAlpha ? /[^A-Z0-9]/gi : /[^0-9]/g, "");
-      return a.length === 11 ? T(a) : a.length === 14 ? _(a) : !1;
+    function X(t) {
+      const l = t.replace(e.allowAlpha ? /[^A-Z0-9]/gi : /[^0-9]/g, "");
+      return l.length === 11 ? v(l) : l.length === 14 ? g(l) : !1;
     }
-    function q(t, a) {
-      if (!a) return t;
-      let r = t.replace(/[^0-9A-Za-z]/g, "");
-      if (!r) return "";
-      let o = "", l = 0;
-      for (let i = 0; i < a.length && l < r.length; i++) {
-        const c = a[i], u = r[l];
-        c === "9" ? /[0-9]/.test(u) ? (o += u, l++) : (l++, i--) : c === "A" ? /[A-Za-z]/.test(u) ? (o += e.toUpperCase ? u.toUpperCase() : u, l++) : (l++, i--) : c === "X" ? /[0-9A-Za-z]/.test(u) ? (o += e.toUpperCase ? u.toUpperCase() : u, l++) : (l++, i--) : o += c;
+    function q(t, l) {
+      if (!l) return t;
+      let n = t.replace(/[^0-9A-Za-z]/g, "");
+      if (!n) return "";
+      let c = "", a = 0;
+      for (let i = 0; i < l.length && a < n.length; i++) {
+        const o = l[i], u = n[a];
+        o === "9" ? /[0-9]/.test(u) ? (c += u, a++) : (a++, i--) : o === "A" ? /[A-Za-z]/.test(u) ? (c += e.toUpperCase ? u.toUpperCase() : u, a++) : (a++, i--) : o === "X" ? /[0-9A-Za-z]/.test(u) ? (c += e.toUpperCase ? u.toUpperCase() : u, a++) : (a++, i--) : c += o;
       }
-      return o;
+      return c;
     }
-    function G(t) {
-      let a = t;
-      return e.customMask && e.documentType === "generic" ? a = q(a, e.customMask) : (e.toUpperCase && (a = a.toUpperCase()), e.maxLength !== void 0 && a.length > e.maxLength && (a = a.slice(0, e.maxLength))), a;
+    function O(t) {
+      let l = t;
+      return e.customMask && e.documentType === "generic" ? l = q(l, e.customMask) : (e.toUpperCase && (l = l.toUpperCase()), e.maxLength !== void 0 && l.length > e.maxLength && (l = l.slice(0, e.maxLength))), l;
     }
-    function S(t) {
+    function z(t) {
       switch (e.documentType) {
         case "cnpj":
-          return N(t, e.allowAlpha);
+          return P(t, e.allowAlpha);
         case "cpf":
-          return P(t);
+          return $(t);
         case "cpf-cnpj": {
-          const a = t.replace(e.allowAlpha ? /[^A-Z0-9]/gi : /[^0-9]/g, "").slice(0, 14);
-          if (!a) return "";
-          const r = /[A-Z]/i.test(a);
-          return e.allowAlpha && r || a.length > 11 ? N(a, e.allowAlpha) : P(a);
+          const l = t.replace(e.allowAlpha ? /[^A-Z0-9]/gi : /[^0-9]/g, "").slice(0, 14);
+          if (!l) return "";
+          const n = /[A-Z]/i.test(l);
+          return e.allowAlpha && n || l.length > 11 ? P(l, e.allowAlpha) : $(l);
         }
         default:
-          return G(t);
+          return O(t);
       }
     }
-    function H(t) {
+    function G(t) {
       if (e.unmask) {
-        if (B.value)
-          return X(t);
+        if (M.value)
+          return j(t);
         if (e.documentType === "generic" || e.documentType === "cpf-cnpj")
           return e.customMask && e.documentType === "generic" || e.documentType === "cpf-cnpj" && e.allowAlpha ? t.replace(/[^0-9A-Za-z]/g, "") : t.replace(/[^0-9]/g, "");
       }
       return t;
     }
-    function O(t) {
-      const a = H(t);
-      s("update:modelValue", a), s("change", a);
+    function H(t) {
+      const l = G(t);
+      s("update:modelValue", l), s("change", l);
     }
-    function z(t) {
+    function S(t) {
       switch (e.documentType) {
         case "cnpj":
-          s("validate", _(t));
+          s("validate", g(t));
           break;
         case "cpf":
-          s("validate", T(t));
+          s("validate", v(t));
           break;
         case "cpf-cnpj":
-          s("validate", I(t));
+          s("validate", X(t));
           break;
       }
     }
-    le(
+    ae(
       () => e.modelValue,
       (t) => {
         if (t === void 0 || e.unmask && (e.documentType === "generic" || e.documentType === "cpf-cnpj"))
           return;
-        const a = S(t);
-        a !== n.value && (n.value = a);
+        const l = z(t);
+        l !== r.value && (r.value = l);
       }
     );
-    function J(t, a, r, o) {
-      const l = e.allowAlpha ? /[A-Z0-9]/gi : /[0-9]/g, i = (a.slice(0, o).match(l) || []).length;
-      let c = 0, u = 0;
+    function J(t, l, n, c) {
+      const a = e.allowAlpha ? /[A-Z0-9]/gi : /[0-9]/g, i = (l.slice(0, c).match(a) || []).length;
+      let o = 0, u = 0;
       if (i > 0) {
-        for (let y = 0; y < r.length && (/[A-Z0-9]/i.test(r[y]) && u++, c = y + 1, !(u >= i)); y++)
+        for (let C = 0; C < n.length && (/[A-Z0-9]/i.test(n[C]) && u++, o = C + 1, !(u >= i)); C++)
           ;
-        for (; c < r.length && !/[A-Z0-9]/i.test(r[c]); )
-          c++;
+        for (; o < n.length && !/[A-Z0-9]/i.test(n[o]); )
+          o++;
       }
-      t.value !== r && (t.value = r, t.setSelectionRange(c, c));
+      t.value !== n && (t.value = n, t.setSelectionRange(o, o));
     }
-    function K(t, a, r, o) {
-      const l = e.allowAlpha ? /[A-Za-z0-9]/g : /[0-9]/g, i = (a.slice(0, o).match(l) || []).length, c = Math.min(i, r.length);
-      t.value !== r && (t.value = r, t.setSelectionRange(c, c));
+    function K(t, l, n, c) {
+      const a = e.allowAlpha ? /[A-Za-z0-9]/g : /[0-9]/g, i = (l.slice(0, c).match(a) || []).length, o = Math.min(i, n.length);
+      t.value !== n && (t.value = n, t.setSelectionRange(o, o));
     }
     const Q = (t) => {
-      g.value = !1;
-      const a = t.target, r = a.value, o = a.selectionStart || 0, l = S(r);
-      B.value ? J(a, r, l, o) : e.documentType === "cpf-cnpj" ? K(a, r, l, o) : a.value !== l && (a.value = l), n.value !== l && (n.value = l, O(l), z(l));
+      A.value = !1;
+      const l = t.target, n = l.value, c = l.selectionStart || 0, a = z(n);
+      M.value ? J(l, n, a, c) : e.documentType === "cpf-cnpj" ? K(l, n, a, c) : l.value !== a && (l.value = a), r.value !== a && (r.value = a, H(a), S(a));
     }, W = (t) => {
       s("focus", t);
     }, Y = (t) => {
-      s("blur", t), z(n.value);
+      _.value = !0, s("blur", t), S(r.value);
     }, ee = () => {
-      n.value = "", g.value = !0, s("update:modelValue", ""), s("change", ""), s("clear"), e.documentType !== "generic" && s("validate", !1);
+      r.value = "", A.value = !0, s("update:modelValue", ""), s("change", ""), s("clear"), e.documentType !== "generic" && s("validate", !1);
     }, U = k(null);
-    return L({
+    return D({
       input: U,
-      localValue: n
-    }), (t, a) => (f(), v("div", {
-      class: x(p(C)("space-y-1.5 w-full", e.class))
+      localValue: r
+    }), (t, l) => (d(), h("div", {
+      class: b(p(T)("space-y-1.5 w-full", e.class))
     }, [
-      e.label ? (f(), b(p(pe), {
+      e.label ? (d(), w(p(pe), {
         key: 0,
-        for: p(h),
-        class: x(
-          p(C)(
+        for: p(y),
+        class: b(
+          p(T)(
             "text-[#101011] font-normal text-[10px] leading-[10px]",
-            d.value ? "text-[var(--alert-red-dark,#831511)]" : ""
+            f.value ? "text-[var(--alert-red-dark,#831511)]" : ""
           )
         )
       }, {
-        default: re(() => [
-          ne(j(e.label), 1),
-          e.required ? (f(), v("span", de, " (Obrigatório)")) : m("", !0)
+        default: ne(() => [
+          re(V(e.label), 1),
+          e.required ? (d(), h("span", fe, " (Obrigatório)")) : m("", !0)
         ]),
         _: 1
       }, 8, ["for", "class"])) : m("", !0),
-      E("div", fe, [
-        R(p(ue), ce({
-          id: p(h),
+      R("div", de, [
+        E(p(ue), oe({
+          id: p(y),
           ref_key: "inputRef",
           ref: U,
-          "model-value": n.value,
+          "model-value": r.value,
           disabled: e.disabled,
-          class: p(C)("pr-10", d.value || e.success ? "border-[#3E2E46]" : "", e.inputClass),
-          placeholder: e.placeholder ?? F.value,
-          "aria-invalid": d.value,
+          class: p(T)("pr-10", f.value || e.success ? "border-[#3E2E46]" : "", e.inputClass),
+          placeholder: e.placeholder ?? L.value,
+          "aria-invalid": f.value,
           "aria-describedby": [
-            e.error && !g.value ? w : void 0,
-            e.description ? V : void 0
+            e.error && !A.value ? B : void 0,
+            e.description ? I : void 0
           ].filter(Boolean).join(" ") || void 0
         }, t.$attrs, {
           onInput: Q,
           onBlur: Y,
           onFocus: W
         }), null, 16, ["id", "model-value", "disabled", "class", "placeholder", "aria-invalid", "aria-describedby"]),
-        Z.value || d.value || n.value ? (f(), v("div", me, [
-          Z.value ? (f(), b(p(oe), {
+        Z.value || f.value || r.value ? (d(), h("div", me, [
+          Z.value ? (d(), w(p(ce), {
             key: 0,
             size: "20",
             class: "text-[#4b715c] pointer-events-none"
-          })) : d.value || n.value ? (f(), b(p(se), {
+          })) : (f.value || r.value) && !e.disabled && e.withClearIcon ? (d(), w(p(se), {
             key: 1,
             size: "20",
-            class: x(
-              p(C)(
+            class: b(
+              p(T)(
                 "cursor-pointer transition-opacity hover:opacity-80",
-                d.value ? "text-[var(--alert-red-dark,#831511)]" : "text-gray-400"
+                f.value ? "text-[var(--alert-red-dark,#831511)]" : "text-gray-400"
               )
             ),
             onClick: ee
           }, null, 8, ["class"])) : m("", !0)
         ])) : m("", !0)
       ]),
-      e.description && !e.error ? (f(), v("div", {
+      e.description && !e.error ? (d(), h("div", {
         key: 1,
-        id: V,
+        id: I,
         class: "text-gray-500 text-[11px] leading-tight"
-      }, j(e.description), 1)) : m("", !0),
-      typeof e.error == "string" && d.value ? (f(), v("div", {
+      }, V(e.description), 1)) : m("", !0),
+      (typeof e.error == "string" || e.withInternalValidation && f.value) && f.value ? (d(), h("div", {
         key: 2,
-        id: w,
+        id: B,
         class: "text-[var(--alert-red-dark,#831511)] flex items-center gap-1 text-[11px] font-medium leading-tight pt-0.5"
       }, [
-        R(p(ie), {
+        E(p(ie), {
           size: "14",
           class: "text-[var(--alert-red-dark,#831511)] shrink-0"
         }),
-        E("span", null, j(e.error), 1)
+        R("span", null, V(typeof e.error == "string" ? e.error : "Documento inválido"), 1)
       ])) : m("", !0)
     ], 2));
   }
 });
 export {
-  be as default
+  Te as default
 };