energy-components 1.0.2

package/dist/components/textField.es.js

@@ -0,0 +1,254 @@
+import { defineComponent as P, toRefs as z, ref as F, computed as d, watch as H, openBlock as u, createElementBlock as m, normalizeClass as v, createElementVNode as n, renderSlot as h, createBlock as A, mergeProps as L, toHandlers as w, createCommentVNode as _, unref as t, toDisplayString as B, createVNode as G } from "vue";
+import { R as V } from "./icon-svg-Cpx09myr.js";
+import { _ as J } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/textField.css';const K = { class: "rds-textfield__container" }, M = { class: "rds-textfield__input-container" }, O = ["id", "type", "maxLength", "minLength", "disabled", "value", "autocomplete", "readonly"], Q = ["for"], U = {
+  key: 0,
+  class: "rds-textfield__icon rds-textfield__icon--right"
+}, W = { class: "rds-textfield__helper" }, X = /* @__PURE__ */ P({
+  __name: "text-field",
+  props: {
+    /**
+     * Etiqueta que se muestra sobre el campo de entrada. y Placeholder
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Identificador único del campo de entrada.
+     */
+    id: {
+      type: [String, Number],
+      required: !0,
+      default: "text-field-0"
+    },
+    /**
+     * v-model valor de entrada y salida
+     */
+    modelValue: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Indica si el campo de entrada está deshabilitado o no.
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Indica si el campo de entrada es de solo lectura o no.
+     */
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Número máximo de caracteres permitidos en el campo de entrada.
+     */
+    maxLength: {
+      type: Number,
+      default: 100,
+      validator: (l) => l < 0 ? (console.info("El valor de maxLength no puede ser menor a 0"), !1) : Number.isNaN(l) ? (console.info("El valor de maxLength debe ser un número"), !1) : !0
+    },
+    /**
+     * Número mínimo de caracteres permitidos en el campo de entrada.
+     */
+    minLength: {
+      type: Number,
+      default: 0,
+      validator: (l) => l < 0 ? (console.info("El valor de minLength no puede ser menor a 0"), !1) : Number.isNaN(l) ? (console.info("El valor de minLength debe ser un número"), !1) : !0
+    },
+    /**
+     * Nombre del icono que se mostrará dentro del campo de entrada.
+     * por defecto se mosrtrara a al izquierda del campo
+     */
+    icon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Muestra un icono a la derecha
+     * Se desactiva si la opccion de `clearable` esta activa
+     */
+    rightIcon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Indica si se debe mostrar un mensaje de ayuda debajo del campo de entrada o no.
+     */
+    helper: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Indica si el campo de entrada contiene un error o no.
+     */
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Texto que se muestra como mensaje de ayuda debajo del campo de entrada.
+     */
+    helperText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Muestra un boton para limpiar el campo de texto
+     */
+    clearable: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Muestra el campo de texto como password
+     */
+    password: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Indica si el campo de texto es para una nueva contraseña (solo para campos de contraseña).
+     * Opciones permitidas: 'new-password', 'current-password', 'off'.
+     */
+    autocomplete: {
+      type: String,
+      default: "off",
+      validator: (l, c) => {
+        const s = ["new-password", "current-password", "off"];
+        return c.password && !s.includes(l) ? (console.info(`[RDSTextfield]: El valor de autocomplete para un campo de contraseña debe ser uno de los siguientes: ${s.join(", ")}`), !1) : !0;
+      }
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(l, { emit: c }) {
+    const s = l, g = c, {
+      label: k,
+      id: x,
+      disabled: i,
+      maxLength: y,
+      minLength: b,
+      modelValue: a,
+      icon: E,
+      rightIcon: I,
+      helper: T,
+      error: f,
+      helperText: R,
+      clearable: $,
+      password: p,
+      autocomplete: D
+    } = z(s), o = F(!0), q = d(() => {
+      if (p.value)
+        return D.value;
+    }), S = (e) => {
+      g(
+        "update:modelValue",
+        e.target.value
+      );
+    }, C = d(() => !!(f.value || a.value.length && (a.value.length < b.value || a.value.length > y.value))), j = d(() => {
+      const e = [];
+      return a.value && e.push("rds-textfield--filled"), C.value && e.push("rds-textfield--error"), i.value && e.push("rds-textfield--disabled"), e.join(" ");
+    }), r = d(() => {
+      const e = {
+        name: E.value,
+        class: "",
+        events: {
+          click: () => {
+          }
+        }
+      }, N = {
+        left: {
+          ...e
+        },
+        right: {
+          ...e,
+          name: I.value
+        }
+      };
+      return p.value ? {
+        left: {
+          ...e,
+          name: null
+        },
+        right: {
+          ...e,
+          name: o.value ? "eye_open" : "eye_close",
+          class: "rds-textfield__icon--password",
+          events: {
+            click: () => o.value = !o.value
+          }
+        }
+      } : $.value ? {
+        left: {
+          ...e
+        },
+        right: {
+          ...e,
+          name: "close",
+          class: "rds-textfield__icon--clear",
+          events: {
+            click: () => g("update:modelValue", "")
+          }
+        }
+      } : N;
+    });
+    return H(
+      p,
+      (e) => o.value = !e,
+      { immediate: !0 }
+    ), (e, N) => (u(), m("div", {
+      class: v(["rds-textfield", j.value])
+    }, [
+      n("div", K, [
+        h(e.$slots, "left-icon", {}, () => [
+          r.value.left.name ? (u(), A(V, L({
+            key: 0,
+            class: "rds-textfield__icon rds-textfield__icon--left",
+            "aria-hidden": "true"
+          }, r.value.left, w(r.value.left.events)), null, 16)) : _("", !0)
+        ], !0),
+        n("div", M, [
+          n("input", {
+            id: t(x).toString(),
+            type: o.value ? "text" : "password",
+            class: "rds-textfield__input",
+            maxLength: t(y),
+            minLength: t(b),
+            disabled: t(i),
+            value: t(a),
+            autocomplete: q.value,
+            readonly: l.readonly,
+            onInput: S,
+            onBlur: S
+          }, null, 40, O),
+          n("label", {
+            for: t(x).toString(),
+            class: v(["rds-textfield__label", t(i) ? "rds-textfield__label--disabled" : ""])
+          }, B(t(k)), 11, Q)
+        ]),
+        r.value.right.name || e.$slots["right-icon"] ? (u(), m("span", U, [
+          h(e.$slots, "right-icon", {}, () => [
+            G(V, L({
+              "aria-hidden": "true",
+              class: "rds-textfield__icon rds-textfield__icon--right"
+            }, r.value.right, w(r.value.right.events)), null, 16)
+          ], !0)
+        ])) : _("", !0)
+      ]),
+      n("div", W, [
+        h(e.$slots, "helper-text", {}, () => [
+          (t(T) || t(f)) && !t(i) ? (u(), m("span", {
+            key: 0,
+            class: v(t(f) ? "rds-textfield__helper--error" : "")
+          }, B(t(R)), 3)) : _("", !0)
+        ], !0)
+      ])
+    ], 2));
+  }
+}), te = /* @__PURE__ */ J(X, [["__scopeId", "data-v-e9626824"]]);
+export {
+  te as default
+};