energy-components 1.2.0 → 1.4.0-beta.0

package/dist/components/textArea.es.js

@@ -1,12 +1,12 @@
-import { defineComponent as R, mergeModels as U, useModel as F, toRefs as G, computed as o, openBlock as s, createElementBlock as f, normalizeClass as h, createElementVNode as a, withDirectives as J, unref as e, vModelText as K, renderSlot as x, createBlock as M, mergeProps as I, toHandlers as q, createCommentVNode as i, createTextVNode as L, toDisplayString as u } from "vue";
-import { I as T } from "./icon-svg-GoL3_ayS.js";
-import { _ as O } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/textArea.css';function y(t, m = !0, d = !0) {
-  return m && !t.trim() ? (console.warn("Advertencia: El valor no puede estar vacío"), !1) : d && !/^[\w\-:]+$/.test(t) ? (console.warn("Advertencia: El valor contiene caracteres inválidos"), !1) : !0;
+import { defineComponent as G, mergeModels as J, useModel as K, toRefs as L, ref as O, computed as o, openBlock as s, createElementBlock as f, normalizeClass as h, createElementVNode as a, withDirectives as Q, unref as e, vModelText as W, renderSlot as y, createBlock as I, mergeProps as q, toHandlers as T, createCommentVNode as i, createTextVNode as X, toDisplayString as u } from "vue";
+import { R as $ } from "./icon-svg-u9BWBbvW.js";
+import { _ as Y } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/textArea.css';function b(t, _ = !0, d = !0) {
+  return _ && !t.trim() ? (console.warn("Advertencia: El valor no puede estar vacío"), !1) : d && !/^[\w\-:]+$/.test(t) ? (console.warn("Advertencia: El valor contiene caracteres inválidos"), !1) : !0;
 }
-const Q = { class: "rds-e-textarea__container" }, W = { class: "rds-e-textarea__input-container" }, X = ["id", "name", "maxlength", "minlength", "rows", "disabled"], Y = ["for"], Z = { key: 0 }, ee = { key: 0 }, te = { key: 1 }, re = { key: 0 }, ae = /* @__PURE__ */ R({
+const Z = { class: "rds-e-textarea__container" }, ee = { class: "rds-e-textarea__input-container" }, te = ["id", "name", "maxlength", "minlength", "rows", "disabled"], re = ["for"], ae = { key: 0 }, le = { key: 0 }, ne = { key: 1 }, se = { key: 0 }, oe = /* @__PURE__ */ G({
   __name: "text-area",
-  props: /* @__PURE__ */ U({
+  props: /* @__PURE__ */ J({
     /**
      * Etiqueta que se muestra sobre el campo de entrada. y Placeholder
      */
@@ -14,7 +14,7 @@ const Q = { class: "rds-e-textarea__container" }, W = { class: "rds-e-textarea__
       type: String,
       required: !0,
       validator(t) {
-        return y(t, !0, !0);
+        return b(t, !0, !0);
       }
     },
     /**
@@ -24,7 +24,7 @@ const Q = { class: "rds-e-textarea__container" }, W = { class: "rds-e-textarea__
       type: String,
       required: !1,
       validator(t) {
-        return y(t, !1, !0);
+        return b(t, !1, !0);
       }
     },
     /**
@@ -34,7 +34,7 @@ const Q = { class: "rds-e-textarea__container" }, W = { class: "rds-e-textarea__
       type: String,
       required: !1,
       validator(t) {
-        return y(t, !1, !0);
+        return b(t, !1, !0);
       }
     },
     /**
@@ -136,26 +136,30 @@ const Q = { class: "rds-e-textarea__container" }, W = { class: "rds-e-textarea__
   }),
   emits: ["update:modelValue"],
   setup(t) {
-    const m = t, d = F(t, "modelValue"), {
-      label: b,
-      id: w,
+    const _ = t, d = K(t, "modelValue"), {
+      label: w,
+      id: S,
       disabled: p,
-      maxlength: v,
+      maxlength: m,
       minlength: g,
       modelValue: c,
-      icon: $,
+      icon: A,
       rightIcon: k,
-      helper: A,
-      error: _,
-      helperText: z,
-      clearable: S,
-      lengthError: D
-    } = G(m), V = o(() => c.value.length === v.value), B = o(() => c.value.length === 0 ? !1 : c.value.length < g.value), E = o(() => D.value && (V.value || B.value)), P = o(() => {
+      helper: D,
+      error: x,
+      helperText: R,
+      clearable: V,
+      lengthError: z
+    } = L(_), v = O(!1), F = () => {
+      v.value = !1;
+    }, P = () => {
+      v.value = !0;
+    }, B = o(() => c.value.length === m.value), E = o(() => c.value.length === 0 ? !1 : c.value.length < g.value), N = o(() => z.value && (B.value || E.value)), j = o(() => {
       const r = [];
-      return c.value && r.push("rds-e-textarea--filled"), _.value && r.push("rds-e-textarea--error"), p.value && r.push("rds-e-textarea--disabled"), E.value && r.push("rds-e-textarea--error"), r.join(" ");
+      return c.value && r.push("rds-e-textarea--filled"), x.value && r.push("rds-e-textarea--error"), p.value && r.push("rds-e-textarea--disabled"), N.value && r.push("rds-e-textarea--error"), r.join(" ");
     }), l = o(() => {
       const r = {
-        name: $.value,
+        name: A.value,
         class: "",
         events: {
           click: () => {
@@ -165,7 +169,7 @@ const Q = { class: "rds-e-textarea__container" }, W = { class: "rds-e-textarea__
         left: { ...r },
         right: { ...r, name: k.value }
       };
-      return S.value && (n.right = {
+      return V.value && (n.right = {
         ...r,
         name: "close",
         class: "rds-e-textfield__icon--clear",
@@ -173,26 +177,28 @@ const Q = { class: "rds-e-textarea__container" }, W = { class: "rds-e-textarea__
           click: () => d.value = ""
         }
       }), n;
-    }), j = o(() => c.value.length);
+    }), H = o(() => c.value.length);
     return (r, n) => {
-      var N, C;
+      var C, M;
       return s(), f("div", {
-        class: h(["rds-e-textarea", P.value])
+        class: h(["rds-e-textarea", j.value])
       }, [
-        a("div", Q, [
-          a("div", W, [
-            J(a("textarea", {
-              id: (N = e(w)) == null ? void 0 : N.toString(),
-              "onUpdate:modelValue": n[0] || (n[0] = (H) => d.value = H),
+        a("div", Z, [
+          a("div", ee, [
+            Q(a("textarea", {
+              id: (C = e(S)) == null ? void 0 : C.toString(),
+              "onUpdate:modelValue": n[0] || (n[0] = (U) => d.value = U),
               type: "text",
-              class: "rds-e-textarea__input",
+              class: h(["rds-e-textarea__input", { "rds-e-textarea__input--active": v.value }]),
               name: t.name,
-              maxlength: e(v),
+              maxlength: e(m),
               minlength: e(g),
               rows: t.rows,
-              disabled: e(p)
-            }, null, 8, X), [
-              [K, d.value]
+              disabled: e(p),
+              onBlur: F,
+              onFocus: P
+            }, null, 42, te), [
+              [W, d.value]
             ]),
             n[1] || (n[1] = a("div", { class: "rds-e-textarea__resize-handle" }, [
               a("svg", {
@@ -210,52 +216,53 @@ const Q = { class: "rds-e-textarea__container" }, W = { class: "rds-e-textarea__
               ])
             ], -1)),
             a("label", {
-              for: (C = e(w)) == null ? void 0 : C.toString(),
+              for: (M = e(S)) == null ? void 0 : M.toString(),
               class: h(["rds-e-textarea__label", {
-                "rds-e-textarea__label--with-icon": l.value.left.name
+                "rds-e-textarea__label--with-icon": l.value.left.name,
+                "rds-e-textarea__label--active": v.value
               }])
             }, [
-              x(r.$slots, "left-icon", {}, () => [
-                l.value.left.name ? (s(), M(T, I({
+              y(r.$slots, "left-icon", {}, () => [
+                l.value.left.name ? (s(), I($, q({
                   key: 0,
-                  class: "rds-e-textarea__icon rds-e-textarea__icon--left",
+                  class: ["rds-e-textarea__icon rds-e-textarea__icon--left", { "rds-e-textarea__icon--hidden": v.value }],
                   "aria-hidden": "true"
-                }, l.value.left, q(l.value.left.events)), null, 16)) : i("", !0)
+                }, l.value.left, T(l.value.left.events)), null, 16, ["class"])) : i("", !0)
               ], !0),
-              L(" " + u(e(b)), 1)
-            ], 10, Y),
+              X(" " + u(e(w)), 1)
+            ], 10, re),
             a("div", {
               class: h(["rds-e-textarea__counter", {
                 "rds-e-textarea__counter--disabled": e(p),
-                "rds-e-textarea__counter--clearable": e(S)
+                "rds-e-textarea__counter--clearable": e(V)
               }])
             }, [
-              t.counter && !e(k) ? (s(), f("p", Z, u(j.value) + "/" + u(e(v)), 1)) : i("", !0),
-              x(r.$slots, "right-icon", {}, () => [
-                l.value.right.name && !l.value.left.name ? (s(), M(T, I({
+              t.counter && !e(k) ? (s(), f("p", ae, u(H.value) + "/" + u(e(m)), 1)) : i("", !0),
+              y(r.$slots, "right-icon", {}, () => [
+                l.value.right.name && !l.value.left.name ? (s(), I($, q({
                   key: 0,
                   class: "rds-e-textarea__icon rds-e-textarea__icon--right",
                   "aria-hidden": "true"
-                }, l.value.right, q(l.value.right.events)), null, 16)) : i("", !0)
+                }, l.value.right, T(l.value.right.events)), null, 16)) : i("", !0)
               ], !0)
             ], 2)
           ])
         ]),
         a("ul", {
-          class: h(["rds-e-textarea__helper", e(_) || E.value ? "rds-e-textarea__helper--error" : ""])
+          class: h(["rds-e-textarea__helper", e(x) || N.value ? "rds-e-textarea__helper--error" : ""])
         }, [
-          V.value ? (s(), f("li", ee, " Max text length is " + u(e(v)), 1)) : i("", !0),
-          B.value ? (s(), f("li", te, " Min text length is " + u(e(g)), 1)) : i("", !0),
+          B.value ? (s(), f("li", le, " Max text length is " + u(e(m)), 1)) : i("", !0),
+          E.value ? (s(), f("li", ne, " Min text length is " + u(e(g)), 1)) : i("", !0),
           a("li", null, [
-            x(r.$slots, "helper-text", {}, () => [
-              e(A) || e(_) ? (s(), f("span", re, u(e(z)), 1)) : i("", !0)
+            y(r.$slots, "helper-text", {}, () => [
+              e(D) || e(x) ? (s(), f("span", se, u(e(R)), 1)) : i("", !0)
             ], !0)
           ])
         ], 2)
       ], 2);
     };
   }
-}), oe = /* @__PURE__ */ O(ae, [["__scopeId", "data-v-51c6b51e"]]);
+}), ce = /* @__PURE__ */ Y(oe, [["__scopeId", "data-v-e01ef58d"]]);
 export {
-  oe as default
+  ce as default
 };

package/dist/components/textField.es.js

@@ -1,11 +1,11 @@
-import { defineComponent as H, toRefs as M, ref as L, computed as s, watch as U, openBlock as u, createElementBlock as v, normalizeClass as h, createElementVNode as i, renderSlot as _, createBlock as A, mergeProps as S, toHandlers as G, createCommentVNode as g, unref as t, toDisplayString as B, createVNode as J, withModifiers as K } from "vue";
-import { g as O } from "./getInstance-GhoEcxLF.js";
-import { I as V } from "./icon-svg-GoL3_ayS.js";
-import { _ as Q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/textField.css';const W = { class: "rds-e-textfield__container" }, X = { class: "rds-e-textfield__input-container" }, Y = ["id", "type", "maxLength", "minLength", "disabled", "value", "autocomplete", "readonly"], Z = ["for"], ee = {
+import { defineComponent as G, toRefs as J, ref as N, computed as i, watch as O, openBlock as c, createElementBlock as v, normalizeClass as _, createElementVNode as d, renderSlot as g, createBlock as Q, mergeProps as S, toHandlers as W, createCommentVNode as y, unref as t, toDisplayString as L, createVNode as X, withModifiers as Y } from "vue";
+import { g as Z } from "./getInstance-GhoEcxLF.js";
+import { R as B } from "./icon-svg-u9BWBbvW.js";
+import { _ as ee } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/textField.css';const te = { class: "rds-e-textfield__container" }, le = { class: "rds-e-textfield__input-container" }, re = ["id", "type", "maxLength", "minLength", "disabled", "value", "autocomplete", "readonly"], ae = ["for"], ne = {
   key: 0,
   class: "rds-e-textfield__icon rds-e-textfield__icon--right"
-}, te = { class: "rds-e-textfield__helper" }, le = /* @__PURE__ */ H({
+}, oe = { class: "rds-e-textfield__helper" }, se = /* @__PURE__ */ G({
   __name: "text-field",
   props: {
     /**
@@ -117,44 +117,54 @@ import './style/textField.css';const W = { class: "rds-e-textfield__container" }
     autocomplete: {
       type: String,
       default: "off",
-      validator: (l, c) => {
-        const a = ["new-password", "current-password", "off"];
-        return c.password && !a.includes(l) ? (console.info(`[RDSTextfield]: El valor de autocomplete para un campo de contraseña debe ser uno de los siguientes: ${a.join(", ")}`), !1) : !0;
+      validator: (l, f) => {
+        const n = ["new-password", "current-password", "off"];
+        return f.password && !n.includes(l) ? (console.info(`[RDSTextfield]: El valor de autocomplete para un campo de contraseña debe ser uno de los siguientes: ${n.join(", ")}`), !1) : !0;
       }
     }
   },
-  emits: ["update:modelValue"],
-  setup(l, { emit: c }) {
-    const a = l, x = c, {
-      label: E,
-      disabled: d,
-      maxLength: y,
+  emits: ["update:modelValue", "keydown", "keyup", "keypress", "change"],
+  setup(l, { emit: f }) {
+    const n = l, r = f, {
+      label: V,
+      disabled: u,
+      maxLength: x,
       minLength: b,
       modelValue: o,
-      icon: I,
-      rightIcon: T,
-      helper: $,
-      error: f,
-      helperText: C,
-      clearable: R,
-      password: p,
-      autocomplete: q
-    } = M(a), n = L(!0), m = L(!1), D = O(), N = s(() => a.id || `text-field-${D}`), F = s(() => {
-      if (p.value)
-        return q.value;
-    }), k = (e) => {
-      m.value = !1, x(
+      icon: E,
+      rightIcon: I,
+      helper: C,
+      error: p,
+      helperText: R,
+      clearable: T,
+      password: m,
+      autocomplete: $
+    } = J(n), s = N(!0), h = N(!1), D = Z(), k = i(() => n.id || `text-field-${D}`), q = i(() => {
+      if (m.value)
+        return $.value;
+    }), F = (e) => {
+      r(
         "update:modelValue",
         e.target.value
       );
+    }, K = () => {
+      h.value = !1;
     }, j = () => {
-      m.value = !0;
-    }, P = s(() => !!(f.value || o.value.length && (o.value.length < b.value || o.value.length > y.value))), z = s(() => {
+      h.value = !0;
+    }, P = (e) => {
+      r("keydown", e);
+    }, z = (e) => {
+      r("keyup", e);
+    }, H = (e) => {
+      r("keypress", e);
+    }, M = (e) => {
+      r("change", e);
+    }, U = i(() => !!(p.value || o.value.length && (o.value.length < b.value || o.value.length > x.value))), A = i(() => {
       const e = [];
-      return o.value && e.push("rds-e-textfield--filled"), P.value && e.push("rds-e-textfield--error"), d.value && e.push("rds-e-textfield--disabled"), e.join(" ");
-    }), r = s(() => {
+      return o.value && e.push("rds-e-textfield--filled"), U.value && e.push("rds-e-textfield--error"), u.value && e.push("rds-e-textfield--disabled"), e.join(" ");
+    }), a = i(() => {
       const e = {
-        name: I.value,
+        name: E.value,
         class: "",
         events: {
           click: () => {
@@ -166,23 +176,23 @@ import './style/textField.css';const W = { class: "rds-e-textfield__container" }
         },
         right: {
           ...e,
-          name: T.value
+          name: I.value
         }
       };
-      return p.value ? {
+      return m.value ? {
         left: {
           ...e,
           name: null
         },
         right: {
           ...e,
-          name: n.value ? "eye_open" : "eye_close",
+          name: s.value ? "eye_open" : "eye_close",
           class: "rds-e-textfield__icon--password",
           events: {
-            click: () => n.value = !n.value
+            click: () => s.value = !s.value
           }
         }
-      } : R.value ? {
+      } : T.value ? {
         left: {
           ...e
         },
@@ -191,68 +201,72 @@ import './style/textField.css';const W = { class: "rds-e-textfield__container" }
           name: "close",
           class: "rds-e-textfield__icon--clear",
           events: {
-            click: () => x("update:modelValue", "")
+            click: () => r("update:modelValue", "")
           }
         }
       } : w;
     });
-    return U(
-      p,
-      (e) => n.value = !e,
+    return O(
+      m,
+      (e) => s.value = !e,
       { immediate: !0 }
-    ), (e, w) => (u(), v("div", {
-      class: h(["rds-e-textfield", z.value])
+    ), (e, w) => (c(), v("div", {
+      class: _(["rds-e-textfield", A.value])
     }, [
-      i("div", W, [
-        _(e.$slots, "left-icon", {}, () => [
-          r.value.left.name ? (u(), A(V, S({
+      d("div", te, [
+        g(e.$slots, "left-icon", {}, () => [
+          a.value.left.name ? (c(), Q(B, S({
             key: 0,
-            class: ["rds-e-textfield__icon rds-e-textfield__icon--left", { "rds-e-textfield__icon--hidden": m.value }],
+            class: ["rds-e-textfield__icon rds-e-textfield__icon--left", { "rds-e-textfield__icon--hidden": h.value }],
             "aria-hidden": "true"
-          }, r.value.left, G(r.value.left.events)), null, 16, ["class"])) : g("", !0)
+          }, a.value.left, W(a.value.left.events)), null, 16, ["class"])) : y("", !0)
         ], !0),
-        i("div", X, [
-          i("input", {
-            id: N.value,
-            type: n.value ? "text" : "password",
+        d("div", le, [
+          d("input", {
+            id: k.value,
+            type: s.value ? "text" : "password",
             class: "rds-e-textfield__input",
-            maxLength: t(y),
+            maxLength: t(x),
             minLength: t(b),
-            disabled: t(d),
+            disabled: t(u),
             value: t(o),
-            autocomplete: F.value,
+            autocomplete: q.value,
             readonly: l.readonly,
-            onInput: k,
-            onBlur: k,
-            onFocus: j
-          }, null, 40, Y),
-          i("label", {
-            for: N.value,
-            class: h(["rds-e-textfield__label", t(d) ? "rds-e-textfield__label--disabled" : ""])
-          }, B(t(E)), 11, Z)
+            onInput: F,
+            onBlur: K,
+            onFocus: j,
+            onKeydown: P,
+            onKeyup: z,
+            onKeypress: H,
+            onChange: M
+          }, null, 40, re),
+          d("label", {
+            for: k.value,
+            class: _(["rds-e-textfield__label", t(u) ? "rds-e-textfield__label--disabled" : ""])
+          }, L(t(V)), 11, ae)
         ]),
-        r.value.right.name || e.$slots["right-icon"] ? (u(), v("span", ee, [
-          _(e.$slots, "right-icon", {}, () => [
-            J(V, S({
+        a.value.right.name || e.$slots["right-icon"] ? (c(), v("span", ne, [
+          g(e.$slots, "right-icon", {}, () => [
+            X(B, S({
               "aria-hidden": "true",
               class: "rds-e-textfield__icon rds-e-textfield__icon--right"
-            }, r.value.right, {
-              onClick: K(r.value.right.events.click, ["stop"])
+            }, a.value.right, {
+              onClick: Y(a.value.right.events.click, ["stop"])
             }), null, 16, ["onClick"])
           ], !0)
-        ])) : g("", !0)
+        ])) : y("", !0)
       ]),
-      i("div", te, [
-        _(e.$slots, "helper-text", {}, () => [
-          (t($) || t(f)) && !t(d) ? (u(), v("span", {
+      d("div", oe, [
+        g(e.$slots, "helper-text", {}, () => [
+          (t(C) || t(p)) && !t(u) ? (c(), v("span", {
             key: 0,
-            class: h(t(f) ? "rds-e-textfield__helper--error" : "")
-          }, B(t(C)), 3)) : g("", !0)
+            class: _(t(p) ? "rds-e-textfield__helper--error" : "")
+          }, L(t(R)), 3)) : y("", !0)
         ], !0)
       ])
     ], 2));
   }
-}), se = /* @__PURE__ */ Q(le, [["__scopeId", "data-v-2a397de0"]]);
+}), fe = /* @__PURE__ */ ee(se, [["__scopeId", "data-v-b490642c"]]);
 export {
-  se as default
+  fe as default
 };

package/dist/components/toggle.es.js

@@ -0,0 +1,53 @@
+import { defineComponent as T, toRefs as E, ref as L, onMounted as _, openBlock as y, createElementBlock as B, normalizeClass as d, createElementVNode as p, unref as i, toDisplayString as m } from "vue";
+import { _ as F } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/toggle.css';const I = /* @__PURE__ */ T({
+  __name: "toggle",
+  props: {
+    small: { type: Boolean },
+    modelValue: { type: [Number, Boolean, String] },
+    switchType: { type: Boolean },
+    fullWidth: { type: Boolean },
+    valueLeft: {},
+    valueRight: {},
+    labelLeft: {},
+    labelRight: {}
+  },
+  emits: ["update:modelValue"],
+  setup(f, { emit: v }) {
+    const b = f, n = v, { modelValue: e, switchType: s, valueLeft: u, valueRight: o } = E(b), t = {
+      LEFT: "left",
+      RIGHT: "right"
+    }, a = L(t.LEFT), g = (l) => {
+      n("update:modelValue", l);
+    };
+    return _(() => {
+      s != null && s.value ? (n("update:modelValue", e == null ? void 0 : e.value), a.value = e != null && e.value ? t.RIGHT : t.LEFT) : (e == null ? void 0 : e.value) === (o == null ? void 0 : o.value) ? (n("update:modelValue", o == null ? void 0 : o.value), a.value = t.RIGHT) : (n("update:modelValue", u == null ? void 0 : u.value), a.value = t.LEFT);
+    }), (l, r) => (y(), B("div", {
+      class: d(["rds-e-toggle", [
+        {
+          "rds-e-toggle--full-width": l.fullWidth && !l.small,
+          "rds-e-toggle--width": !l.fullWidth && !l.small,
+          "rds-e-toggle--small": l.small
+        }
+      ]])
+    }, [
+      p("button", {
+        class: d(["rds-e-toggle__tab", {
+          "rds-e-toggle__tab--active": a.value === t.LEFT
+        }]),
+        type: "button",
+        onClick: r[0] || (r[0] = (c) => (g(i(s) ? !0 : i(u)), a.value = t.LEFT))
+      }, m(l.labelLeft), 3),
+      p("button", {
+        class: d(["rds-e-toggle__tab", {
+          "rds-e-toggle__tab--active": a.value === t.RIGHT
+        }]),
+        type: "button",
+        onClick: r[1] || (r[1] = (c) => (g(i(s) ? !1 : i(o)), a.value = t.RIGHT))
+      }, m(l.labelRight), 3)
+    ], 2));
+  }
+}), H = /* @__PURE__ */ F(I, [["__scopeId", "data-v-191362c2"]]);
+export {
+  H as default
+};