energy-components 1.0.2

package/dist/components/switch.es.js

@@ -0,0 +1,96 @@
+import { defineComponent as v, ref as c, onMounted as k, onBeforeUnmount as y, openBlock as n, createElementBlock as i, normalizeClass as g, createElementVNode as r, renderSlot as S, createTextVNode as p, toDisplayString as B, createBlock as V, createCommentVNode as u } from "vue";
+import { R as x } from "./icon-svg-Cpx09myr.js";
+import { _ as E } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/switch.css';const _ = ["id", "disabled", "checked"], N = ["for", "aria-label"], C = {
+  key: 0,
+  class: "rds-switch__label-text"
+}, D = /* @__PURE__ */ v({
+  __name: "switch",
+  props: {
+    /**
+     * ID del interruptor
+     */
+    id: {
+      type: [String, Number],
+      required: !0
+    },
+    /**
+     * Etiqueta para el interruptor
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Icono para el interruptor, se mostrara a la derecha del texto
+     */
+    icon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Si el interruptor está deshabilitado
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Si el interruptor está marcado o no
+     */
+    checked: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: m }) {
+    const f = e, l = m, a = c(!1), o = c(!1), h = () => {
+      o.value && (a.value = !0);
+    }, w = () => a.value = !1, s = (t) => {
+      t.key === "Tab" && (o.value = !0);
+    }, d = () => {
+      o.value = !1;
+    }, b = (t) => {
+      l("update:modelValue", t.target.checked);
+    };
+    return k(() => {
+      l("update:modelValue", f.checked), window.addEventListener("keydown", s), window.addEventListener("mousedown", d);
+    }), y(() => {
+      window.removeEventListener("keydown", s), window.removeEventListener("mousedown", d);
+    }), (t, L) => (n(), i("div", {
+      class: g(["rds-switch", { "rds-switch--focused": a.value }])
+    }, [
+      r("input", {
+        id: e.id.toString(),
+        class: "rds-switch__input",
+        type: "checkbox",
+        disabled: e.disabled,
+        checked: e.checked,
+        onChange: b,
+        onFocus: h,
+        onBlur: w
+      }, null, 40, _),
+      r("label", {
+        class: "rds-switch__label",
+        for: e.id.toString(),
+        "aria-label": e.label
+      }, [
+        e.label || t.$slots["text-label"] ? (n(), i("span", C, [
+          S(t.$slots, "text-label", {}, () => [
+            p(B(e.label), 1)
+          ], !0),
+          e.icon ? (n(), V(x, {
+            key: 0,
+            name: e.icon,
+            class: "rds-switch__label-icon",
+            "aria-hidden": "true"
+          }, null, 8, ["name"])) : u("", !0)
+        ])) : u("", !0)
+      ], 8, N)
+    ], 2));
+  }
+}), M = /* @__PURE__ */ E(D, [["__scopeId", "data-v-69c77348"]]);
+export {
+  M as default
+};

package/dist/components/tabBar.es.js

@@ -0,0 +1,181 @@
+import { defineComponent as N, mergeModels as B, toRefs as W, useModel as D, ref as m, computed as h, onMounted as K, nextTick as $, onUnmounted as F, watch as L, openBlock as s, createElementBlock as d, normalizeClass as u, createVNode as R, createCommentVNode as g, createElementVNode as f, Fragment as q, renderList as H, unref as O, withKeys as S, withModifiers as V, createBlock as P, createTextVNode as U, toDisplayString as j, renderSlot as G } from "vue";
+import { R as w } from "./icon-svg-Cpx09myr.js";
+import { d as J } from "./functions-DIHwdgF0.js";
+import { _ as Q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/tabBar.css';const X = ["aria-selected", "tabindex", "onClick", "onKeydown"], Y = { class: "rds-top-bar__item-title" }, Z = {
+  class: "rds-top-bar__content",
+  role: "tabpanel"
+}, ee = /* @__PURE__ */ N({
+  __name: "tab-bar",
+  props: /* @__PURE__ */ B({
+    /**
+     * Pestaña activa
+     */
+    activeTab: {
+      type: String
+    },
+    /**
+     * Un array de objetos que representan las pestañas
+     * `{ id: string, title: string, icon?: string }`
+     */
+    options: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Si es `true` el componente ocupatra lo minimo posible
+     */
+    fluid: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Si es `true`, los arrow de navegacion aplican diferente color.
+     */
+    backgroundAlternative: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Si es `true`, se mostrara un divider entre el top-bar y el contenido.
+     */
+    divider: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Funcion async que se ejecuta antes de cambiar de pestaña.
+     * Debe retornar un booleano, si es `true` se cambiara de pestaña, si es `false` no se cambiara.
+     */
+    beforeTabChange: {
+      type: Function,
+      default: (o, v) => {
+        if (o === v.id) return Promise.resolve(!0);
+      }
+    }
+  }, {
+    activeTab: {
+      type: String,
+      default: ""
+    },
+    activeTabModifiers: {}
+  }),
+  emits: /* @__PURE__ */ B(["activeTabChanged"], ["update:activeTab"]),
+  setup(o, { emit: v }) {
+    const i = o, A = v, {
+      options: n
+    } = W(i), M = D(o, "activeTab"), a = m(""), b = m(null), l = m(null);
+    let p = [];
+    const y = h(() => l.value ? l.value.scrollWidth > l.value.clientWidth : !1), z = h(() => n.value.findIndex((t) => t.id === a.value) > 0 && y.value), E = h(() => l.value ? n.value.findIndex((t) => t.id === a.value) < i.options.length - 1 && y.value : !1), k = (e) => {
+      const t = i.options.find((r) => r.id === a.value);
+      return e ? t : t == null ? void 0 : t.id;
+    }, c = async (e) => {
+      const t = n.value.find((_) => _.id === e);
+      return t ? await i.beforeTabChange(e, t) ? (a.value = e, !0) : !1 : (console.error(`[RDSTabBar]: Tab with id ${e} not found`), !1);
+    }, x = async () => {
+      let e = n.value.findIndex((t) => t.id === a.value);
+      for (; e > 0 && (e--, !await c(n.value[e].id)); )
+        ;
+    }, I = async () => {
+      let e = n.value.findIndex((t) => t.id === a.value);
+      for (; e < i.options.length - 1 && (e++, !await c(n.value[e].id)); )
+        ;
+    };
+    function T(e) {
+      const t = n.value.findIndex((r) => r.id === e);
+      p[t] && p[t].scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "start"
+      });
+    }
+    const C = () => {
+      T(a.value);
+    };
+    return K(async () => {
+      await $(), b.value && (p = Array.from(
+        b.value.children
+      )), a.value = i.options[0].id ?? "", window.addEventListener("resize", J(C, 200));
+    }), F(() => {
+      window.removeEventListener("resize", C);
+    }), L(a, (e) => {
+      T(e), A("activeTabChanged", k(!1));
+    }), L(M, (e) => c(e)), (e, t) => (s(), d("div", {
+      class: u(["rds-top-bar", {
+        "rds-top-bar--fluid": o.fluid,
+        "rds-top-bar--divider": o.divider
+      }])
+    }, [
+      z.value ? (s(), d("div", {
+        key: 0,
+        class: u([
+          "rds-top-bar__button",
+          o.backgroundAlternative ? "rds-top-bar__button--left-bg2" : "rds-top-bar__button--left"
+        ]),
+        onClick: x
+      }, [
+        R(w, {
+          class: "rds-top-bar__icon",
+          name: "arrow_left"
+        })
+      ], 2)) : g("", !0),
+      f("div", {
+        ref_key: "tabsListWrapper",
+        ref: l,
+        class: "rds-top-bar__wrapper"
+      }, [
+        f("ul", {
+          ref_key: "tabsList",
+          ref: b,
+          class: "rds-top-bar__list",
+          role: "tablist"
+        }, [
+          (s(!0), d(q, null, H(O(n), (r, _) => (s(), d("li", {
+            key: _,
+            class: u(["rds-top-bar__item", {
+              active: a.value === r.id
+            }]),
+            role: "tab",
+            "aria-selected": a.value === r.id,
+            tabindex: a.value === r.id ? 0 : -1,
+            onClick: (te) => c(r.id),
+            onKeydown: [
+              S(V(x, ["prevent"]), ["left"]),
+              S(V(I, ["prevent"]), ["right"])
+            ]
+          }, [
+            f("span", Y, [
+              r.icon ? (s(), P(w, {
+                key: 0,
+                class: "rds-top-bar__item-title--icon",
+                name: r.icon
+              }, null, 8, ["name"])) : g("", !0),
+              U(" " + j(r.title), 1)
+            ])
+          ], 42, X))), 128))
+        ], 512)
+      ], 512),
+      E.value ? (s(), d("div", {
+        key: 1,
+        class: u([
+          "rds-top-bar__button",
+          o.backgroundAlternative ? "rds-top-bar__button--right-bg2" : "rds-top-bar__button--right"
+        ]),
+        onClick: I
+      }, [
+        R(w, {
+          class: "rds-top-bar__icon",
+          name: "arrow_right"
+        })
+      ], 2)) : g("", !0),
+      f("div", Z, [
+        G(e.$slots, a.value, {
+          tab: k(!0)
+        }, void 0, !0)
+      ])
+    ], 2));
+  }
+}), ie = /* @__PURE__ */ Q(ee, [["__scopeId", "data-v-1eaefe52"]]);
+export {
+  ie as default
+};

package/dist/components/tag.es.js

@@ -0,0 +1,91 @@
+import { defineComponent as h, toRefs as x, computed as u, openBlock as o, createElementBlock as $, normalizeClass as r, unref as t, createBlock as p, createCommentVNode as d, createTextVNode as S, toDisplayString as B } from "vue";
+import { R as f } from "./icon-svg-Cpx09myr.js";
+import { _ as b } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/tag.css';const k = /* @__PURE__ */ h({
+  __name: "tag",
+  props: {
+    /**
+     * Nombre del icono a mostrar en la parte izquierda del tag
+     */
+    icon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Texto del tag
+     */
+    text: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Typo de tag
+     * <br>
+     * `[ default, information, success, error, warning, promo ]`
+     */
+    type: {
+      type: String,
+      default: "default",
+      validator: (s) => ["default", "information", "success", "error", "warning", "promo"].includes(s)
+    },
+    /**
+     * Define si el tag tiene una acción asociada.
+     */
+    actionable: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Indica si el esquema de colores es inverso
+     * <br>
+     * Solo para type `default`
+     */
+    inverse: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Define si el tag es pequeño
+     */
+    small: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(s) {
+    const m = s, {
+      type: l,
+      actionable: c,
+      icon: n,
+      text: _,
+      inverse: g,
+      small: v
+    } = x(m), y = u(() => {
+      const a = "rds-tag", e = [];
+      return g.value && e.push(`${a}--inverse`), c.value && e.push(`${a}--actionable`), n.value && e.push(`${a}--icon`), v.value && e.push(`${a}--small`), e.push(`${a}--${l.value}`), e.join(" ");
+    }), i = u(() => {
+      const a = "rds-tag_icon", e = [];
+      return e.push(`${a}--${l.value}`), e.join(" ");
+    });
+    return (a, e) => (o(), $("div", {
+      class: r(["rds-tag rds-caption-tag", y.value])
+    }, [
+      t(n) ? (o(), p(f, {
+        key: 0,
+        name: t(n),
+        class: r(["rds-tag__icon", i.value]),
+        "aria-hidden": "true"
+      }, null, 8, ["name", "class"])) : d("", !0),
+      S(" " + B(t(_)) + " ", 1),
+      t(c) ? (o(), p(f, {
+        key: 1,
+        name: "arrow_right",
+        class: r(["rds-tag__icon-actionable", i.value]),
+        "aria-hidden": "true"
+      }, null, 8, ["class"])) : d("", !0)
+    ], 2));
+  }
+}), D = /* @__PURE__ */ b(k, [["__scopeId", "data-v-9781baa5"]]);
+export {
+  D as default
+};

package/dist/components/textArea.es.js

@@ -0,0 +1,259 @@
+import { defineComponent as H, mergeModels as U, useModel as F, toRefs as G, computed as o, openBlock as l, createElementBlock as h, normalizeClass as g, createElementVNode as a, withDirectives as J, unref as t, vModelText as K, renderSlot as x, createBlock as C, mergeProps as M, toHandlers as q, createCommentVNode as s, createTextVNode as L, toDisplayString as i, pushScopeId as O, popScopeId as Q } from "vue";
+import { R as T } from "./icon-svg-Cpx09myr.js";
+import { _ as W } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/textArea.css';function y(e, f = !0, u = !0) {
+  return f && !e.trim() ? (console.warn("Advertencia: El valor no puede estar vacío"), !1) : u && !/^[a-z0-9\s]+$/i.test(e) ? (console.warn("Advertencia: El valor contiene caracteres inválidos"), !1) : !0;
+}
+const X = (e) => (O("data-v-dc860073"), e = e(), Q(), e), Y = { class: "rds-textarea__container" }, Z = { class: "rds-textarea__input-container" }, ee = ["id", "name", "maxlength", "minlength", "rows", "disabled"], te = /* @__PURE__ */ X(() => /* @__PURE__ */ a("div", { class: "rds-textarea__resize-handle" }, [
+  /* @__PURE__ */ a("svg", {
+    width: "12",
+    height: "14",
+    viewBox: "0 0 12 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, [
+    /* @__PURE__ */ a("path", {
+      d: "M11 1V3C11 8.52285 6.52285 13 1 13V13",
+      "stroke-width": "1.2",
+      "stroke-linecap": "round"
+    })
+  ])
+], -1)), re = ["for"], ae = { key: 0 }, le = { key: 0 }, ne = { key: 1 }, oe = { key: 0 }, se = /* @__PURE__ */ H({
+  __name: "text-area",
+  props: /* @__PURE__ */ U({
+    /**
+     * Etiqueta que se muestra sobre el campo de entrada. y Placeholder
+     */
+    label: {
+      type: String,
+      required: !0,
+      validator(e) {
+        return y(e, !0, !0);
+      }
+    },
+    /**
+     * Etiqueta que se muestra el nombre del control
+     */
+    name: {
+      type: String,
+      required: !1,
+      validator(e) {
+        return y(e, !1, !0);
+      }
+    },
+    /**
+     * Identificador único del campo de entrada.
+     */
+    id: {
+      type: String,
+      required: !1,
+      validator(e) {
+        return y(e, !1, !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
+    },
+    /**
+     * Número máximo de caracteres permitidos en el campo de entrada.
+     */
+    maxlength: {
+      type: Number,
+      default: 100
+    },
+    /**
+     * Número mínimo de caracteres permitidos en el campo de entrada.
+     */
+    minlength: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Muestra estilos de error si el length del input no es correcto.
+     */
+    lengthError: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Número de rows.
+     */
+    rows: {
+      type: Number,
+      default: 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 se debe mostrar el counter.
+     */
+    counter: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Indica si el campo de entrada contiene un error o no.
+     */
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Muestra un boton para limpiar el campo de texto
+     */
+    clearable: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Texto que se muestra como mensaje de ayuda debajo del campo de entrada.
+     */
+    helperText: {
+      type: String,
+      default: ""
+    }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const f = e, u = F(e, "modelValue"), {
+      label: S,
+      id: b,
+      disabled: p,
+      maxlength: v,
+      minlength: m,
+      modelValue: d,
+      icon: $,
+      rightIcon: w,
+      helper: z,
+      error: _,
+      helperText: A,
+      clearable: k,
+      lengthError: D
+    } = G(f), V = o(() => d.value.length === v.value), B = o(() => d.value.length === 0 ? !1 : d.value.length < m.value), E = o(() => D.value && (V.value || B.value)), R = o(() => {
+      const r = [];
+      return d.value && r.push("rds-textarea--filled"), _.value && r.push("rds-textarea--error"), p.value && r.push("rds-textarea--disabled"), E.value && r.push("rds-textarea--error"), r.join(" ");
+    }), n = o(() => {
+      const r = {
+        name: $.value,
+        class: "",
+        events: {
+          click: () => {
+          }
+        }
+      }, c = {
+        left: { ...r },
+        right: { ...r, name: w.value }
+      };
+      return k.value && (c.right = {
+        ...r,
+        name: "close",
+        class: "rds-textfield__icon--clear",
+        events: {
+          click: () => u.value = ""
+        }
+      }), c;
+    }), P = o(() => d.value.length);
+    return (r, c) => {
+      var I, N;
+      return l(), h("div", {
+        class: g(["rds-textarea", R.value])
+      }, [
+        a("div", Y, [
+          a("div", Z, [
+            J(a("textarea", {
+              id: (I = t(b)) == null ? void 0 : I.toString(),
+              "onUpdate:modelValue": c[0] || (c[0] = (j) => u.value = j),
+              type: "text",
+              class: "rds-textarea__input",
+              name: e.name,
+              maxlength: t(v),
+              minlength: t(m),
+              rows: e.rows,
+              disabled: t(p)
+            }, null, 8, ee), [
+              [K, u.value]
+            ]),
+            te,
+            a("label", {
+              for: (N = t(b)) == null ? void 0 : N.toString(),
+              class: "rds-textarea__label"
+            }, [
+              x(r.$slots, "left-icon", {}, () => [
+                n.value.left.name ? (l(), C(T, M({
+                  key: 0,
+                  class: "rds-textarea__icon rds-textarea__icon--left",
+                  "aria-hidden": "true"
+                }, n.value.left, q(n.value.left.events)), null, 16)) : s("", !0)
+              ], !0),
+              L(" " + i(t(S)), 1)
+            ], 8, re),
+            a("div", {
+              class: g(["rds-textarea__counter", {
+                "rds-textarea__counter--disabled": t(p),
+                "rds-textarea__counter--clearable": t(k)
+              }])
+            }, [
+              e.counter && !t(w) ? (l(), h("p", ae, i(P.value) + "/" + i(t(v)), 1)) : s("", !0),
+              x(r.$slots, "right-icon", {}, () => [
+                n.value.right.name ? (l(), C(T, M({
+                  key: 0,
+                  class: "rds-textarea__icon rds-textarea__icon--right",
+                  "aria-hidden": "true"
+                }, n.value.right, q(n.value.right.events)), null, 16)) : s("", !0)
+              ], !0)
+            ], 2)
+          ])
+        ]),
+        a("ul", {
+          class: g(["rds-textarea__helper", t(_) || E.value ? "rds-textarea__helper--error" : ""])
+        }, [
+          V.value ? (l(), h("li", le, " Max text length is " + i(t(v)), 1)) : s("", !0),
+          B.value ? (l(), h("li", ne, " Min text length is " + i(t(m)), 1)) : s("", !0),
+          a("li", null, [
+            x(r.$slots, "helper-text", {}, () => [
+              t(z) || t(_) ? (l(), h("span", oe, i(t(A)), 1)) : s("", !0)
+            ], !0)
+          ])
+        ], 2)
+      ], 2);
+    };
+  }
+}), ce = /* @__PURE__ */ W(se, [["__scopeId", "data-v-dc860073"]]);
+export {
+  ce as default
+};