energy-components 1.0.2

package/dist/components/checkbox.es.js

@@ -0,0 +1,130 @@
+import { defineComponent as x, ref as d, watch as v, onMounted as y, onBeforeUnmount as w, openBlock as b, createElementBlock as g, normalizeClass as o, createElementVNode as n, renderSlot as S, createTextVNode as B, toDisplayString as C, createBlock as E, createCommentVNode as L } from "vue";
+import { R as V } from "./icon-svg-Cpx09myr.js";
+import { _ } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/checkbox.css';const D = ["id", "checked", "aria-label", "required", "disabled"], N = ["for"], q = /* @__PURE__ */ x({
+  __name: "checkbox",
+  props: {
+    /**
+     * <span>Texto a mostrar en el label</span>
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * <span>Id del checkbox</span>
+     */
+    id: {
+      type: [String, Number],
+      default: ""
+    },
+    /**
+     * <span>Texto de accesibilidad</span>
+     */
+    accessibilityLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * <span>Icono a mostrar</span>
+     */
+    icon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * <span>Estado del checkbox</span>
+     */
+    isChecked: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * <span>Indica si el campo es requerido</span>
+     */
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * <span>Indica si el campo tiene error</span>
+     */
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * <span>Indica si el campo está deshabilitado</span>
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: u }) {
+    const s = e, f = u, t = d(s.isChecked), l = d(!1), c = d(!1);
+    v(() => s.isChecked, (a) => {
+      t.value = a;
+    });
+    const h = () => {
+      c.value && (l.value = !0);
+    }, k = () => l.value = !1, m = (a) => {
+      t.value = a.target.checked, f("update:modelValue", a.target.checked);
+    }, r = (a) => {
+      a.key === "Tab" && (c.value = !0);
+    }, i = () => {
+      c.value = !1;
+    };
+    return y(() => {
+      window.addEventListener("keydown", r), window.addEventListener("mousedown", i);
+    }), w(() => {
+      window.removeEventListener("keydown", r), window.removeEventListener("mousedown", i);
+    }), (a, R) => (b(), g("div", {
+      class: o(["rds-checkbox__container", { "rds-checkbox__container--focused": l.value }])
+    }, [
+      n("input", {
+        id: e.id.toString(),
+        checked: e.isChecked,
+        "aria-label": e.accessibilityLabel,
+        type: "checkbox",
+        class: o(["rds-checkbox", { "rds-checkbox--error": e.error }]),
+        required: e.required,
+        disabled: e.disabled,
+        onChange: m,
+        onFocus: h,
+        onBlur: k
+      }, null, 42, D),
+      n("label", {
+        for: e.id.toString(),
+        class: o(["rds-checkbox__label", {
+          "rds-checkbox__label--disabled": e.disabled,
+          "rds-checkbox__label--checked": t.value
+        }])
+      }, [
+        S(a.$slots, "label-text", {}, () => [
+          n("span", {
+            class: o([
+              "rds-checkbox__label-box",
+              {
+                "rds-checkbox__label-box--disabled": e.disabled,
+                "rds-checkbox__label-box--error": e.error
+              }
+            ])
+          }, [
+            B(C(e.label) + " ", 1),
+            e.icon ? (b(), E(V, {
+              key: 0,
+              class: "rds-checkbox__label-box--icon",
+              name: e.icon,
+              size: "sm"
+            }, null, 8, ["name"])) : L("", !0)
+          ], 2)
+        ], !0)
+      ], 10, N)
+    ], 2));
+  }
+}), K = /* @__PURE__ */ _(q, [["__scopeId", "data-v-ea21fb50"]]);
+export {
+  K as default
+};

package/dist/components/divider.es.js

@@ -0,0 +1,35 @@
+import { defineComponent as s, computed as i, openBlock as d, createElementBlock as n, normalizeClass as t } from "vue";
+import { _ as l } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/divider.css';const a = /* @__PURE__ */ s({
+  __name: "divider",
+  props: {
+    /**
+     * Si es true, el tipo será low, de lo contrario será high
+     */
+    low: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Si es true, el color será inverso
+     */
+    inverse: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(r) {
+    const e = r, o = i(() => ({
+      "rds-divider": !0,
+      "rds-divider--low": e.low && !e.inverse,
+      "rds-divider--inverse-low": e.low && e.inverse,
+      "rds-divider--inverse-high": !e.low && e.inverse
+    }));
+    return (v, c) => (d(), n("div", {
+      class: t(o.value)
+    }, null, 2));
+  }
+}), _ = /* @__PURE__ */ l(a, [["__scopeId", "data-v-84048551"]]);
+export {
+  _ as default
+};

package/dist/components/dropdown.es.js

@@ -0,0 +1,331 @@
+import { defineComponent as H, mergeModels as M, toRefs as J, useModel as K, ref as Q, computed as h, openBlock as i, createElementBlock as b, createVNode as V, mergeProps as W, unref as r, withModifiers as u, createSlots as q, withCtx as a, normalizeClass as X, renderSlot as d, createElementVNode as n, createBlock as E, createCommentVNode as B, Fragment as Y, toDisplayString as D, nextTick as I, pushScopeId as Z, popScopeId as ee } from "vue";
+import le from "./multiselect.es.js";
+import te from "./textField.es.js";
+import { R as se } from "./icon-svg-Cpx09myr.js";
+import oe from "./checkbox.es.js";
+import re from "./radioButton.es.js";
+import { _ as ae } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/dropdown.css';const de = (t) => (Z("data-v-0ad95116"), t = t(), ee(), t), ne = { class: "rds-dropdown" }, ie = /* @__PURE__ */ de(() => /* @__PURE__ */ n("span", null, null, -1)), ue = { class: "rds-dropdown__option" }, ce = { class: "rds-dropdown__option-container" }, me = { class: "rds-dropdown__option--prepend" }, pe = { class: "rds-dropdown__option--content" }, fe = {
+  key: 0,
+  class: "rds-dropdown__option-detail"
+}, ve = { key: 1 }, he = {
+  key: 0,
+  class: "rds-dropdown__option--append"
+}, be = { class: "rds-dropdown__after-list" }, ye = { class: "rds-dropdown__after-list-container" }, ke = /* @__PURE__ */ H({
+  __name: "dropdown",
+  props: /* @__PURE__ */ M({
+    /**
+     * Id del dropdown
+     */
+    id: {
+      type: [String, Number],
+      required: !0,
+      validator: (t) => !t || String(t).trim() === "" ? (console.error("[RDSDropdown]: `id` prop is required."), !1) : !0
+    },
+    label: {
+      type: String,
+      required: !0,
+      default: "",
+      validator: (t) => !t || t.trim() === "" ? (console.error("[RDSDropdown]: `label` prop is required."), !1) : !0
+    },
+    /**
+     * Valores a mostrar en el dropdown
+     */
+    options: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Indica si el dropdown está deshabilitado
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Indica si se pueden seleccionar múltiples valores
+     */
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Indica si se cierra el dropdown al seleccionar un valor
+     */
+    closeOnSelect: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Indica si el listado de opcciones es pequeño
+     */
+    small: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Indica si se muestra un radio button en las opcciones
+     * <br>
+     * Solo valido para seleccion unica
+     */
+    showRadio: {
+      type: Boolean,
+      default: !1,
+      validator: (t, $) => t && $.multiple ? (console.error("showRadio solo es valido para seleccion unica"), !1) : !0
+    },
+    /**
+     * Indica si el campo de entrada contiene un error o no.
+     */
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Indica si se debe mostrar un mensaje de ayuda debajo del campo de entrada o no.
+     */
+    helper: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Indica la cantidad maxima de elementos seleccionados a mostrar en el imput.
+     */
+    limit: {
+      type: Number,
+      default: 4
+    },
+    /**
+     * Texto a mostrar cuando se alcanza el limite de elementos seleccionados.
+     */
+    limitText: {
+      type: Function,
+      default: (t) => `Más de ${t} elementos seleccionados.`
+    }
+  }, {
+    modelValue: {
+      required: !0
+    },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ M(["open", "close", "select", "change"], ["update:modelValue"]),
+  setup(t, { expose: $, emit: j }) {
+    const c = t, m = j, {
+      disabled: p,
+      options: y,
+      limit: S,
+      multiple: f
+    } = J(c), s = K(t, "modelValue"), v = Q(), N = h(() => y.value.every((e) => typeof e == "object" && (e == null ? void 0 : e.id) && (e == null ? void 0 : e.label))), T = h(() => !f.value || c.closeOnSelect), O = h({
+      get: () => s.value ? c.multiple ? Array.isArray(s.value) ? s.value.length > S.value ? c.limitText(S.value) : s.value.map((e) => typeof e == "string" ? e : e.label).join(", ") : "" : typeof s.value == "object" ? s.value.label : typeof s.value == "string" ? s.value : "" : "",
+      set: () => null
+    }), F = h(() => ({
+      "rds-dropdown-input": !0,
+      "rds-dropdown--disabled": p.value,
+      "rds-dropdown--small": c.small
+    })), C = h(() => {
+      const e = {};
+      return N.value && Object.assign(e, {
+        "track-by": "id",
+        label: "label"
+      }), e;
+    }), k = (e) => {
+      if (s.value === e) return !0;
+      if (Array.isArray(s.value)) {
+        if (typeof e == "string") return s.value.includes(e);
+        if (C.value.label)
+          return s.value.some((o) => o.id === e.id);
+      }
+      return !1;
+    }, L = (e) => {
+      m("open", e);
+    }, x = (e) => {
+      m("close", e);
+    }, U = (e) => {
+      I(() => {
+        m("select", e);
+      });
+    }, P = () => {
+      I(() => {
+        if (f.value) {
+          const e = y.value.filter(
+            (o) => k(o)
+          ) || [];
+          m("change", e);
+        } else {
+          const e = y.value.find(
+            (o) => k(o)
+          );
+          m("change", [e]);
+        }
+      });
+    }, A = (e) => {
+      v.value.select(e);
+    }, _ = () => {
+      v.value.activate();
+    }, z = () => {
+      v.value.deactivate();
+    }, G = () => {
+      v.value.toggle();
+    };
+    return $({
+      /**
+       * Abre el dropdown
+       */
+      activate: _,
+      /**
+       * Cierra el dropdown
+       */
+      deactivate: z
+    }), (e, o) => (i(), b("div", ne, [
+      V(le, W({
+        ref_key: "multiselect",
+        ref: v,
+        modelValue: s.value,
+        "onUpdate:modelValue": o[2] || (o[2] = (l) => s.value = l),
+        class: F.value,
+        options: r(y),
+        "close-on-select": T.value,
+        "show-labels": !1,
+        disabled: r(p),
+        multiple: r(f),
+        searchable: !1,
+        "open-direction": "bottom",
+        limit: r(S),
+        "limit-text": t.limitText
+      }, C.value, {
+        onOpen: L,
+        onClose: x,
+        onSelect: U,
+        "onUpdate:modelValue": P,
+        onFocus: o[3] || (o[3] = u(() => _(), ["prevent"])),
+        onBlur: u(() => null, ["prevent"])
+      }), q({
+        selection: a(({ isOpen: l }) => [
+          V(r(te), {
+            id: `multiselect-dropdown-${t.id}`,
+            modelValue: O.value,
+            "onUpdate:modelValue": o[1] || (o[1] = (w) => O.value = w),
+            class: "rds-dropdown__input",
+            disabled: r(p),
+            label: t.label,
+            error: t.error,
+            helper: t.helper,
+            readonly: "",
+            onClick: u((w) => l ? null : _(), ["prevent", "stop"])
+          }, q({
+            "right-icon": a(() => [
+              V(r(se), {
+                name: "arrow_down",
+                "aria-hidden": "true",
+                class: X(["rds-dropdown__input-caret", {
+                  "rds-dropdown__input-caret--open": l
+                }]),
+                onClick: o[0] || (o[0] = u(() => {
+                }, ["self", "stop"])),
+                onMousedown: u(G, ["self", "prevent", "stop"])
+              }, null, 8, ["class"])
+            ]),
+            _: 2
+          }, [
+            e.$slots["helper-text"] ? {
+              name: "helper-text",
+              fn: a(() => [
+                d(e.$slots, "helper-text", {}, void 0, !0)
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["id", "modelValue", "disabled", "label", "error", "helper", "onClick"])
+        ]),
+        placeholder: a(() => [
+          ie
+        ]),
+        option: a(({ option: l, search: w, index: R }) => [
+          n("div", ue, [
+            n("div", ce, [
+              n("div", me, [
+                r(f) ? (i(), E(r(oe), {
+                  key: 0,
+                  id: `${R}-${l.id}`,
+                  small: t.small,
+                  "is-checked": k(l),
+                  disabled: r(p) || (l == null ? void 0 : l.$isDisabled) || !1,
+                  onClick: u((g) => A(l), ["prevent", "stop"])
+                }, null, 8, ["id", "small", "is-checked", "disabled", "onClick"])) : !r(f) && t.showRadio ? (i(), E(r(re), {
+                  key: 1,
+                  id: `${R}-${l.id}`,
+                  small: t.small,
+                  "group-name": `group-${t.id}`,
+                  checked: k(l),
+                  disabled: r(p) || (l == null ? void 0 : l.$isDisabled) || !1,
+                  option: l,
+                  onClick: u((g) => A(l), ["prevent", "stop"])
+                }, null, 8, ["id", "small", "group-name", "checked", "disabled", "option", "onClick"])) : B("", !0)
+              ]),
+              n("div", pe, [
+                d(e.$slots, "singleLabel", { option: l }, () => {
+                  var g;
+                  return [
+                    (g = C.value) != null && g.label ? (i(), b(Y, { key: 0 }, [
+                      n("span", null, D(l.label), 1),
+                      l != null && l.detail ? (i(), b("span", fe, D(l.detail), 1)) : B("", !0)
+                    ], 64)) : (i(), b("span", ve, D(l), 1))
+                  ];
+                }, !0)
+              ])
+            ]),
+            e.$slots.optionAppend ? (i(), b("div", he, [
+              d(e.$slots, "optionAppend", {
+                option: l,
+                search: w,
+                index: R
+              }, void 0, !0)
+            ])) : B("", !0)
+          ])
+        ]),
+        _: 2
+      }, [
+        e.$slots.limit ? {
+          name: "limit",
+          fn: a(() => [
+            d(e.$slots, "limit", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        e.$slots.maxElements ? {
+          name: "maxElements",
+          fn: a(() => [
+            d(e.$slots, "maxElements", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        e.$slots.noResult ? {
+          name: "noResult",
+          fn: a(({ search: l }) => [
+            d(e.$slots, "noResult", { search: l }, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        e.$slots.noOptions ? {
+          name: "noOptions",
+          fn: a(() => [
+            d(e.$slots, "noOptions", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        e.$slots.afterList ? {
+          name: "afterList",
+          fn: a(() => [
+            n("div", be, [
+              n("div", ye, [
+                d(e.$slots, "afterList", {}, void 0, !0)
+              ])
+            ])
+          ]),
+          key: "4"
+        } : void 0
+      ]), 1040, ["modelValue", "class", "options", "close-on-select", "disabled", "multiple", "limit", "limit-text"])
+    ]));
+  }
+}), Ve = /* @__PURE__ */ ae(ke, [["__scopeId", "data-v-0ad95116"]]);
+export {
+  Ve as default
+};

package/dist/components/floatingActionButton.es.js

@@ -0,0 +1,97 @@
+import { defineComponent as i, toRefs as p, computed as u, openBlock as f, createBlock as c, mergeProps as d } from "vue";
+import m from "./button.es.js";
+import { _ as b } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/floatingActionButton.css';const v = /* @__PURE__ */ i({
+  __name: "floating-action-button",
+  props: {
+    /**
+     * <span>Icono a mostrar en el botón</span>
+     */
+    icon: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Indica la posicion que ocupara el boton respecto del padre
+     * `['relative', 'absolute', 'fixed']`
+     */
+    position: {
+      type: String,
+      default: "relative",
+      required: !0,
+      validator: (t) => ["relative", "absolute", "fixed"].includes(t)
+    },
+    /**
+     * <span>Posicion del botón respecto del padre</span>
+     * `['top-left', 'top-right', 'bottom-left', 'bottom-right']` <br>
+     * solo es valido si la posicion es `absolute` o `fixed`
+     */
+    placement: {
+      type: String,
+      default: "bottom",
+      validator: (t) => [
+        "top-left",
+        "top-right",
+        "bottom-left",
+        "bottom-right"
+      ].includes(t)
+    },
+    /**
+     * <span>Indica si el botón es inverso</span>
+     */
+    inverse: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * <span>Indica si el botón es pequeño</span>
+     */
+    small: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * <span>Indica si el botón es extra pequeño</span>
+     */
+    extraSmall: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * <span>Añade una clase por encima de opacidad <br>Los eventos funcionan</span>
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * <span>Cambia el estado del botón a cargando</span>
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(t) {
+    const a = t, {
+      position: l,
+      placement: r,
+      extraSmall: n
+    } = p(a), s = u(() => {
+      const e = "rds-btn--fab", o = [];
+      return n.value && o.push("rds-btn--extra-small"), o.push(`${e}-${l.value}`), o.push(`${e}-${r.value}`), o.join(" ");
+    });
+    return (e, o) => (f(), c(m, d({
+      class: ["rds-btn--fab", [
+        s.value
+      ]]
+    }, { ...e.$props, ...e.$attrs }, {
+      text: "",
+      "is-action": "",
+      variant: "primary"
+    }), null, 16, ["class"]));
+  }
+}), _ = /* @__PURE__ */ b(v, [["__scopeId", "data-v-1cb63e33"]]);
+export {
+  _ as default
+};

package/dist/components/functions-DIHwdgF0.js

@@ -0,0 +1,18 @@
+function u(e, n) {
+  let i;
+  return (...t) => {
+    clearTimeout(i), i = setTimeout(() => e(...t), n);
+  };
+}
+function s(e, n) {
+  return e.length !== n.length ? !1 : e.every((i, t) => i === n[t]);
+}
+function f(e, n, i) {
+  const t = e.indexOf(n);
+  return i ? t === -1 && e.push(n) : t !== -1 && e.splice(t, 1), e;
+}
+export {
+  s as a,
+  u as d,
+  f as t
+};