energy-components 1.2.0 → 1.3.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 M, mergeProps as q, toHandlers as T, createCommentVNode as i, createTextVNode as X, toDisplayString as u } from "vue";
+import { I as $ } from "./icon-svg-GoL3_ayS.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: k,
       disabled: p,
-      maxlength: v,
+      maxlength: m,
       minlength: g,
       modelValue: c,
-      icon: $,
-      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(() => {
+      icon: A,
+      rightIcon: S,
+      helper: z,
+      error: x,
+      helperText: D,
+      clearable: V,
+      lengthError: F
+    } = L(_), v = O(!1), P = () => {
+      v.value = !1;
+    }, j = () => {
+      v.value = !0;
+    }, B = o(() => c.value.length === m.value), E = o(() => c.value.length === 0 ? !1 : c.value.length < g.value), N = o(() => F.value && (B.value || E.value)), H = 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: () => {
@@ -163,9 +167,9 @@ const Q = { class: "rds-e-textarea__container" }, W = { class: "rds-e-textarea__
         }
       }, n = {
         left: { ...r },
-        right: { ...r, name: k.value }
+        right: { ...r, name: S.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);
+    }), R = o(() => c.value.length);
     return (r, n) => {
-      var N, C;
+      var C, I;
       return s(), f("div", {
-        class: h(["rds-e-textarea", P.value])
+        class: h(["rds-e-textarea", H.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(k)) == 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: P,
+              onFocus: j
+            }, 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: (I = e(k)) == null ? void 0 : I.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(), M($, 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(S) ? (s(), f("p", ae, u(R.value) + "/" + u(e(m)), 1)) : i("", !0),
+              y(r.$slots, "right-icon", {}, () => [
+                l.value.right.name && !l.value.left.name ? (s(), M($, 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(z) || e(x) ? (s(), f("span", se, u(e(D)), 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 M, toRefs as U, ref as w, computed as s, watch as A, openBlock as u, createElementBlock as v, normalizeClass as h, createElementVNode as i, renderSlot as _, createBlock as G, mergeProps as L, toHandlers as J, createCommentVNode as g, unref as t, toDisplayString as S, createVNode as K, withModifiers as O } from "vue";
+import { g as Q } from "./getInstance-GhoEcxLF.js";
+import { I as B } from "./icon-svg-GoL3_ayS.js";
+import { _ as W } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/textField.css';const X = { class: "rds-e-textfield__container" }, Y = { class: "rds-e-textfield__input-container" }, Z = ["id", "type", "maxLength", "minLength", "disabled", "value", "autocomplete", "readonly"], ee = ["for"], te = {
   key: 0,
   class: "rds-e-textfield__icon rds-e-textfield__icon--right"
-}, te = { class: "rds-e-textfield__helper" }, le = /* @__PURE__ */ H({
+}, le = { class: "rds-e-textfield__helper" }, re = /* @__PURE__ */ M({
   __name: "text-field",
   props: {
     /**
@@ -126,47 +126,49 @@ import './style/textField.css';const W = { class: "rds-e-textfield__container" }
   emits: ["update:modelValue"],
   setup(l, { emit: c }) {
     const a = l, x = c, {
-      label: E,
+      label: V,
       disabled: d,
       maxLength: y,
       minLength: b,
       modelValue: o,
-      icon: I,
-      rightIcon: T,
-      helper: $,
+      icon: E,
+      rightIcon: I,
+      helper: T,
       error: f,
-      helperText: C,
-      clearable: R,
+      helperText: $,
+      clearable: C,
       password: p,
-      autocomplete: q
-    } = M(a), n = L(!0), m = L(!1), D = O(), N = s(() => a.id || `text-field-${D}`), F = s(() => {
+      autocomplete: R
+    } = U(a), n = w(!0), m = w(!1), q = Q(), N = s(() => a.id || `text-field-${q}`), D = s(() => {
       if (p.value)
-        return q.value;
-    }), k = (e) => {
-      m.value = !1, x(
+        return R.value;
+    }), F = (e) => {
+      x(
         "update:modelValue",
         e.target.value
       );
     }, j = () => {
+      m.value = !1;
+    }, P = () => {
       m.value = !0;
-    }, P = s(() => !!(f.value || o.value.length && (o.value.length < b.value || o.value.length > y.value))), z = s(() => {
+    }, z = s(() => !!(f.value || o.value.length && (o.value.length < b.value || o.value.length > y.value))), H = s(() => {
       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(" ");
+      return o.value && e.push("rds-e-textfield--filled"), z.value && e.push("rds-e-textfield--error"), d.value && e.push("rds-e-textfield--disabled"), e.join(" ");
     }), r = s(() => {
       const e = {
-        name: I.value,
+        name: E.value,
         class: "",
         events: {
           click: () => {
           }
         }
-      }, w = {
+      }, k = {
         left: {
           ...e
         },
         right: {
           ...e,
-          name: T.value
+          name: I.value
         }
       };
       return p.value ? {
@@ -182,7 +184,7 @@ import './style/textField.css';const W = { class: "rds-e-textfield__container" }
             click: () => n.value = !n.value
           }
         }
-      } : R.value ? {
+      } : C.value ? {
         left: {
           ...e
         },
@@ -194,24 +196,24 @@ import './style/textField.css';const W = { class: "rds-e-textfield__container" }
             click: () => x("update:modelValue", "")
           }
         }
-      } : w;
+      } : k;
     });
-    return U(
+    return A(
       p,
       (e) => n.value = !e,
       { immediate: !0 }
-    ), (e, w) => (u(), v("div", {
-      class: h(["rds-e-textfield", z.value])
+    ), (e, k) => (u(), v("div", {
+      class: h(["rds-e-textfield", H.value])
     }, [
-      i("div", W, [
+      i("div", X, [
         _(e.$slots, "left-icon", {}, () => [
-          r.value.left.name ? (u(), A(V, S({
+          r.value.left.name ? (u(), G(B, L({
             key: 0,
             class: ["rds-e-textfield__icon rds-e-textfield__icon--left", { "rds-e-textfield__icon--hidden": m.value }],
             "aria-hidden": "true"
-          }, r.value.left, G(r.value.left.events)), null, 16, ["class"])) : g("", !0)
+          }, r.value.left, J(r.value.left.events)), null, 16, ["class"])) : g("", !0)
         ], !0),
-        i("div", X, [
+        i("div", Y, [
           i("input", {
             id: N.value,
             type: n.value ? "text" : "password",
@@ -220,39 +222,39 @@ import './style/textField.css';const W = { class: "rds-e-textfield__container" }
             minLength: t(b),
             disabled: t(d),
             value: t(o),
-            autocomplete: F.value,
+            autocomplete: D.value,
             readonly: l.readonly,
-            onInput: k,
-            onBlur: k,
-            onFocus: j
-          }, null, 40, Y),
+            onInput: F,
+            onBlur: j,
+            onFocus: P
+          }, null, 40, Z),
           i("label", {
             for: N.value,
             class: h(["rds-e-textfield__label", t(d) ? "rds-e-textfield__label--disabled" : ""])
-          }, B(t(E)), 11, Z)
+          }, S(t(V)), 11, ee)
         ]),
-        r.value.right.name || e.$slots["right-icon"] ? (u(), v("span", ee, [
+        r.value.right.name || e.$slots["right-icon"] ? (u(), v("span", te, [
           _(e.$slots, "right-icon", {}, () => [
-            J(V, S({
+            K(B, L({
               "aria-hidden": "true",
               class: "rds-e-textfield__icon rds-e-textfield__icon--right"
             }, r.value.right, {
-              onClick: K(r.value.right.events.click, ["stop"])
+              onClick: O(r.value.right.events.click, ["stop"])
             }), null, 16, ["onClick"])
           ], !0)
         ])) : g("", !0)
       ]),
-      i("div", te, [
+      i("div", le, [
         _(e.$slots, "helper-text", {}, () => [
-          (t($) || t(f)) && !t(d) ? (u(), v("span", {
+          (t(T) || t(f)) && !t(d) ? (u(), v("span", {
             key: 0,
             class: h(t(f) ? "rds-e-textfield__helper--error" : "")
-          }, B(t(C)), 3)) : g("", !0)
+          }, S(t($)), 3)) : g("", !0)
         ], !0)
       ])
     ], 2));
   }
-}), se = /* @__PURE__ */ Q(le, [["__scopeId", "data-v-2a397de0"]]);
+}), ie = /* @__PURE__ */ W(re, [["__scopeId", "data-v-ec322549"]]);
 export {
-  se as default
+  ie 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
+};