energy-components 1.2.0 → 1.4.0-beta.0

package/dist/components/modal.es.js

@@ -1,15 +1,15 @@
 import { defineComponent as h, ref as C, computed as v, openBlock as r, createBlock as m, unref as a, withCtx as u, createVNode as k, normalizeStyle as b, withModifiers as w, createElementVNode as d, renderSlot as n, createCommentVNode as l, createElementBlock as c } from "vue";
-import x from "./overlay.es.js";
-import S from "./card.es.js";
-import { I as $ } from "./icon-svg-GoL3_ayS.js";
-import { _ as B } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/modal.css';const N = { class: "rds-e-modal__container" }, R = { class: "rds-e-modal__header" }, W = {
+import S from "./overlay.es.js";
+import x from "./card.es.js";
+import { R as $ } from "./icon-svg-u9BWBbvW.js";
+import { _ as R } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/modal.css';const B = { class: "rds-e-modal__container" }, N = { class: "rds-e-modal__header" }, W = {
   key: 0,
   class: "rds-e-modal__section-spacer"
 }, g = { class: "rds-e-modal__body" }, q = {
   key: 1,
   class: "rds-e-modal__section-spacer"
-}, I = { class: "rds-e-modal__footer" }, V = /* @__PURE__ */ h({
+}, D = { class: "rds-e-modal__footer" }, V = /* @__PURE__ */ h({
   __name: "modal",
   props: {
     /**
@@ -70,7 +70,7 @@ import './style/modal.css';const N = { class: "rds-e-modal__container" }, R = {
     }), y = () => {
       e.preventClose || i("onCloseRequest");
     };
-    return (o, s) => t.open ? (r(), m(a(x), {
+    return (o, s) => t.open ? (r(), m(a(S), {
       key: 0,
       ref_key: "overlay",
       ref: f,
@@ -79,15 +79,15 @@ import './style/modal.css';const N = { class: "rds-e-modal__container" }, R = {
       onClick: y
     }, {
       default: u(() => [
-        k(a(S), {
+        k(a(x), {
           class: "rds-e-modal__card",
           style: b(_.value),
           onClick: s[1] || (s[1] = w(() => {
           }, ["stop"]))
         }, {
           default: u(() => [
-            d("div", N, [
-              d("div", R, [
+            d("div", B, [
+              d("div", N, [
                 n(o.$slots, "header", {}, void 0, !0),
                 e.showClose ? (r(), m(a($), {
                   key: 0,
@@ -102,7 +102,7 @@ import './style/modal.css';const N = { class: "rds-e-modal__container" }, R = {
                 n(o.$slots, "body", {}, void 0, !0)
               ]),
               o.$slots.footer ? (r(), c("span", q)) : l("", !0),
-              d("div", I, [
+              d("div", D, [
                 n(o.$slots, "footer", {}, void 0, !0)
               ])
             ])
@@ -113,7 +113,7 @@ import './style/modal.css';const N = { class: "rds-e-modal__container" }, R = {
       _: 3
     }, 8, ["teleport"])) : l("", !0);
   }
-}), j = /* @__PURE__ */ B(V, [["__scopeId", "data-v-24bc0adc"]]);
+}), j = /* @__PURE__ */ R(V, [["__scopeId", "data-v-24bc0adc"]]);
 export {
   j as default
 };

package/dist/components/persistentToast.es.js

@@ -1,7 +1,7 @@
 import { defineComponent as f, toRefs as v, computed as y, openBlock as t, createElementBlock as s, normalizeClass as g, createElementVNode as n, createVNode as a, createCommentVNode as o, toDisplayString as c, renderSlot as h } from "vue";
-import { I as l } from "./icon-svg-GoL3_ayS.js";
+import { R as l } from "./icon-svg-u9BWBbvW.js";
 import { _ as k } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/persistentToast.css';const C = { class: "alert" }, S = {
+import './style/persistentToast.css';const S = { class: "alert" }, C = {
   key: 0,
   class: "rds-e-persistent-toast__custom-icon-block"
 }, $ = { class: "rds-e-persistent-toast__wrapper" }, b = { class: "rds-e-persistent-toast__title__wrapper" }, q = {
@@ -89,12 +89,12 @@ import './style/persistentToast.css';const C = { class: "alert" }, S = {
     ), p = () => {
       m("onCloseToastAction");
     };
-    return (i, I) => (t(), s("div", {
+    return (i, N) => (t(), s("div", {
       class: g(["rds-e-persistent-toast", _.value]),
       role: "alert"
     }, [
-      n("div", C, [
-        e.icon ? (t(), s("div", S, [
+      n("div", S, [
+        e.icon ? (t(), s("div", C, [
           a(l, {
             name: e.icon,
             class: "rds-e-persistent-toast__custom-icon",

package/dist/components/quantitySelector.es.js

@@ -1,21 +1,9 @@
-import { defineComponent as q, ref as i, watch as f, nextTick as c, openBlock as w, createElementBlock as B, normalizeClass as m, createElementVNode as r, createVNode as b, withDirectives as p, vShow as y, vModelText as V } from "vue";
-import { I as k } from "./icon-svg-GoL3_ayS.js";
-import { _ as S } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/quantitySelector.css';const _ = ["disabled"], D = ["disabled"], x = ["disabled"], M = ["disabled"], z = /* @__PURE__ */ q({
+import { defineComponent as V, mergeModels as c, useModel as w, ref as i, openBlock as B, createElementBlock as I, normalizeClass as r, createElementVNode as o, createVNode as m, withDirectives as f, vShow as v, vModelText as b } from "vue";
+import { R as y } from "./icon-svg-u9BWBbvW.js";
+import { _ as D } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/quantitySelector.css';const _ = ["disabled"], M = ["disabled"], S = ["disabled"], x = ["disabled"], R = /* @__PURE__ */ V({
   __name: "quantity-selector",
-  props: {
-    /**
-     * <span>Valor del componente.</span>
-     */
-    modelValue: {
-      type: Number,
-      default: 0,
-      validator(l) {
-        return l < 0 || l > 99 ? (console.warn(
-          `[RDSQuantitySelector]: El valor de modelValue debe estar entre 0 y 99. Valor actual: ${l}`
-        ), !1) : !0;
-      }
-    },
+  props: /* @__PURE__ */ c({
     /**
      * <span>Indica si se muestra el botón de borrado.</span>
      * <br>
@@ -43,118 +31,113 @@ import './style/quantitySelector.css';const _ = ["disabled"], D = ["disabled"],
       validator(l) {
         return ["default", "small"].includes(l);
       }
+    },
+    /**
+     * <span>Indica si el componente ocupa el 100% del ancho de su contenedor.</span>
+     */
+    fullWidth: {
+      type: Boolean,
+      default: !1
     }
-  },
-  emits: ["update:modelValue", "onClickPlus", "onClickMinus", "onChange", "onDelete"],
-  setup(l, { emit: C }) {
-    const v = l, t = C, e = i(v.modelValue), s = i(!1), d = i(null), o = i(null), N = () => {
-      e.value < 99 && (e.value++, t("onChange", e.value), t("update:modelValue", e.value)), t("onClickPlus");
-    }, g = () => {
-      v.deleteButton && e.value !== 0 ? (t("onDelete"), e.value = 0, t("onChange", e.value), t("update:modelValue", e.value)) : e.value > 0 && (e.value--, t("onChange", e.value), t("update:modelValue", e.value)), t("onClickMinus");
-    }, h = (a) => {
-      const u = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"];
-      if (!u.includes(a.key) && Number.isNaN(Number.parseInt(a.key))) {
-        a.preventDefault();
-        return;
-      }
-      if (d.value && String(d.value.value).length >= 2 && !u.includes(a.key)) {
-        a.preventDefault();
-        return;
+  }, {
+    modelValue: {
+      default: 0,
+      validator(l) {
+        return l < 0 || l > 99 ? (console.warn(
+          `[RDSQuantitySelector]: El valor de modelValue debe estar entre 0 y 99. Valor actual: ${l}`
+        ), !1) : !0;
       }
-      c(() => {
-        const n = Number.parseInt(d.value.value, 10);
-        !Number.isNaN(n) && n >= 0 && n <= 99 && (e.value = n, t("onChange", e.value), t("update:modelValue", e.value));
-      });
-    }, I = () => {
-      if (d.value && (d.value.value === null || d.value.value === ""))
-        e.value = 0, t("onChange", e.value), t("update:modelValue", e.value);
-      else if (d.value) {
-        const a = Number.parseInt(d.value.value, 10);
-        !Number.isNaN(a) && a >= 0 && a <= 99 && (e.value = a, t("onChange", e.value), t("update:modelValue", e.value));
+    },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ c(["onClickPlus", "onClickMinus", "onChange", "onDelete"], ["update:modelValue"]),
+  setup(l, { emit: p }) {
+    const h = l, n = p, e = w(l, "modelValue"), s = i(!1), u = i(null), k = i(null), C = () => {
+      e.value < 99 && (e.value++, n("onChange", e.value)), n("onClickPlus");
+    }, q = () => {
+      h.deleteButton && e.value !== 0 ? (n("onDelete"), e.value = 0, n("onChange", e.value)) : e.value > 0 && (e.value--, n("onChange", e.value)), n("onClickMinus");
+    }, N = (t) => {
+      const a = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"];
+      !a.includes(t.key) && Number.isNaN(Number.parseInt(t.key)) && t.preventDefault(), u.value && String(u.value.value).length >= 2 && !a.includes(t.key) && t.preventDefault();
+    }, g = () => {
+      if (u.value) {
+        let t = Number.parseInt(u.value.value, 10);
+        (u.value.value === null || u.value.value === "") && (t = 0), !Number.isNaN(t) && t >= 0 && t <= 99 ? (e.value = t, n("onChange", e.value)) : Number.isNaN(t) && (e.value = 0, n("onChange", e.value));
       }
-      s.value = !1, c(() => {
-        o.value && (o.value.value = String(e.value));
-      });
+      s.value = !1;
     };
-    return f(
-      () => v.modelValue,
-      (a) => {
-        e.value = a, o.value && (o.value.value = String(a));
-      }
-    ), f(s, (a) => {
-      a && c(() => {
-        var u, n;
-        (u = d.value) == null || u.focus(), (n = d.value) == null || n.select();
-      });
-    }), (a, u) => (w(), B("div", {
-      class: m(["rds-e-quantity-selector", {
+    return (t, a) => (B(), I("div", {
+      class: r(["rds-e-quantity-selector", {
         "rds-e-quantity-selector--disabled": l.disabled,
-        "rds-e-quantity-selector--small": l.size === "small"
+        "rds-e-quantity-selector--small": l.size === "small",
+        "rds-e-quantity-selector--full-width": l.fullWidth
       }])
     }, [
-      r("button", {
-        class: m(["rds-e-quantity-selector__button", {
-          "rds-e-quantity-selector__button--disabled": l.disabled || e.value === 0
+      o("button", {
+        class: r(["rds-e-quantity-selector__button", {
+          "rds-e-quantity-selector__button--disabled": l.disabled || e.value === 0,
+          "rds-e-quantity-selector__button--limit": e.value === 0
         }]),
         disabled: l.disabled || e.value === 0,
-        onClick: g
+        onClick: q
       }, [
-        b(k, {
+        m(y, {
           name: l.deleteButton && e.value !== 0 ? "delete" : "minus"
         }, null, 8, ["name"])
       ], 10, _),
-      p(r("input", {
+      f(o("input", {
         ref_key: "mainInput",
-        ref: o,
-        "onUpdate:modelValue": u[0] || (u[0] = (n) => e.value = n),
+        ref: k,
+        "onUpdate:modelValue": a[0] || (a[0] = (d) => e.value = d),
         type: "number",
         class: "rds-e-quantity-selector__input",
         disabled: l.disabled,
         max: 99,
         min: 0,
         readonly: "",
-        onClick: u[1] || (u[1] = (n) => s.value = !0)
-      }, null, 8, D), [
-        [y, !s.value],
+        onClick: a[1] || (a[1] = (d) => s.value = !0)
+      }, null, 8, M), [
+        [v, !s.value],
         [
-          V,
+          b,
           e.value,
           void 0,
           { number: !0 }
         ]
       ]),
-      p(r("input", {
+      f(o("input", {
         ref_key: "manualInput",
-        ref: d,
-        "onUpdate:modelValue": u[2] || (u[2] = (n) => e.value = n),
+        ref: u,
+        "onUpdate:modelValue": a[2] || (a[2] = (d) => e.value = d),
         type: "number",
         class: "rds-e-quantity-selector__input",
         disabled: l.disabled,
         max: 99,
         min: 0,
-        onBlur: I,
-        onKeydown: h
-      }, null, 40, x), [
-        [y, s.value],
+        onBlur: g,
+        onKeydown: N
+      }, null, 40, S), [
+        [v, s.value],
         [
-          V,
+          b,
           e.value,
           void 0,
           { number: !0 }
         ]
       ]),
-      r("button", {
-        class: m(["rds-e-quantity-selector__button", {
-          "rds-e-quantity-selector__button--disabled": l.disabled || e.value === 99
+      o("button", {
+        class: r(["rds-e-quantity-selector__button", {
+          "rds-e-quantity-selector__button--disabled": l.disabled || e.value === 99,
+          "rds-e-quantity-selector__button--limit": e.value === 99
         }]),
         disabled: l.disabled || e.value === 99,
-        onClick: N
+        onClick: C
       }, [
-        b(k, { name: "add" })
-      ], 10, M)
+        m(y, { name: "add" })
+      ], 10, x)
     ], 2));
   }
-}), A = /* @__PURE__ */ S(z, [["__scopeId", "data-v-dd3bb380"]]);
+}), A = /* @__PURE__ */ D(R, [["__scopeId", "data-v-e9c62df7"]]);
 export {
   A as default
 };

package/dist/components/radioButton.es.js

@@ -1,8 +1,8 @@
-import { defineComponent as R, ref as f, computed as m, inject as i, onMounted as _, onBeforeUnmount as D, openBlock as r, createElementBlock as b, normalizeClass as n, createElementVNode as v, unref as E, toDisplayString as N, createCommentVNode as w, createBlock as x } from "vue";
-import { I as C } from "./icon-svg-GoL3_ayS.js";
-import { g as I } from "./getInstance-GhoEcxLF.js";
-import { _ as G } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/radioButton.css';const L = ["id", "value", "name", "disabled", "checked"], $ = ["for"], j = /* @__PURE__ */ R({
+import { defineComponent as B, ref as f, computed as m, inject as i, onMounted as _, onBeforeUnmount as D, openBlock as r, createElementBlock as b, normalizeClass as n, createElementVNode as v, unref as E, toDisplayString as N, createCommentVNode as w, createBlock as x } from "vue";
+import { R as C } from "./icon-svg-u9BWBbvW.js";
+import { g as G } from "./getInstance-GhoEcxLF.js";
+import { _ as I } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/radioButton.css';const L = ["id", "value", "name", "disabled", "checked"], $ = ["for"], j = /* @__PURE__ */ B({
   __name: "radio-button",
   props: {
     /**
@@ -50,17 +50,17 @@ import './style/radioButton.css';const L = ["id", "value", "name", "disabled", "
     }
   },
   setup(e) {
-    const o = e, d = f(!1), t = f(!1), y = I(), l = m(() => o.id || `input-${y}`), a = i("radioGroupValue"), p = i("radioGroupName");
+    const o = e, d = f(!1), t = f(!1), y = G(), l = m(() => o.id || `input-${y}`), a = i("radioGroupValue"), p = i("radioGroupName");
     a || console.warn("RDSRadioButton debe estar dentro de un RDSRadioGroup");
-    const k = i("validateId");
-    o.id && !k(o.id) && console.warn(
+    const S = i("validateId");
+    o.id && !S(o.id) && console.warn(
       `RDSRadioButton con id ${o.id} tiene un id duplicado. Se generará un id único.`
     );
-    const S = m(() => (a == null ? void 0 : a.value) === o.option), g = () => {
+    const k = m(() => (a == null ? void 0 : a.value) === o.option), R = () => {
       !o.disabled && a && (a.value = o.option);
-    }, h = () => {
+    }, g = () => {
       t.value && (d.value = !0);
-    }, B = () => d.value = !1, s = (u) => {
+    }, h = () => d.value = !1, s = (u) => {
       u.key === "Tab" && (t.value = !0);
     }, c = () => {
       t.value = !1;
@@ -79,10 +79,10 @@ import './style/radioButton.css';const L = ["id", "value", "name", "disabled", "
         class: n(`rds-e-radio ${e.error ? " rds-e-radio--error" : ""}`),
         name: E(p),
         disabled: e.disabled,
-        checked: S.value,
-        onChange: g,
-        onFocus: h,
-        onBlur: B
+        checked: k.value,
+        onChange: R,
+        onFocus: g,
+        onBlur: h
       }, null, 42, L),
       v("label", {
         for: l.value,
@@ -101,7 +101,7 @@ import './style/radioButton.css';const L = ["id", "value", "name", "disabled", "
       ], 10, $)
     ], 2));
   }
-}), V = /* @__PURE__ */ G(j, [["__scopeId", "data-v-c8280e86"]]);
+}), V = /* @__PURE__ */ I(j, [["__scopeId", "data-v-c8280e86"]]);
 export {
   V as default
 };

package/dist/components/selectionChip.es.js

@@ -0,0 +1,87 @@
+import { defineComponent as r, ref as h, computed as s, openBlock as p, createElementBlock as u, normalizeClass as f, createVNode as g, createElementVNode as m, toDisplayString as _ } from "vue";
+import { R as b } from "./icon-svg-u9BWBbvW.js";
+import { _ as y } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/selectionChip.css';const C = ["disabled"], k = { class: "rds-e-selection-chip__text" }, S = /* @__PURE__ */ r({
+  __name: "selection-chip",
+  props: {
+    /**
+     * <span>Tipo de chip a base del fondo en donde se va a usar</span>
+     * <br>
+     * `['default', 'floating']`
+     */
+    surfaceType: {
+      type: String,
+      default: "default",
+      validator: (i) => ["default", "floating"].includes(i)
+    },
+    /**
+     * <span>Icono a mostrar en el chip</span>
+     */
+    icon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Valor del filtro representado por el chip.
+     */
+    filterValue: {
+      type: [String, Number, Object, Boolean],
+      required: !0
+    },
+    /**
+     * <span>Texto a mostrar en el chip</span>
+     */
+    text: {
+      type: String,
+      required: !0
+    },
+    /**
+     * <span>Indica si está disabled el componente</span>
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * <span>Indica si el componente está selected</span>
+     */
+    selected: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * <span>Estado del componente "highlight"</span>
+     */
+    highlight: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["onClickChip"],
+  setup(i, { emit: l }) {
+    const e = i, c = l, o = h(null), n = s(() => e.icon || "check"), a = s(() => {
+      const t = ["rds-e-selection-chip"];
+      return t.push(`rds-e-selection-chip--${e.surfaceType}`), e.disabled && t.push("rds-e-selection-chip--disabled"), e.selected && !e.highlight && t.push("rds-e-selection-chip--selected"), e.highlight && t.push("rds-e-selection-chip--highlight"), e.selected && e.highlight && t.push("rds-e-selection-chip--selected-highlight"), t;
+    }), d = () => {
+      e.disabled || c("onClickChip", e.filterValue);
+    };
+    return (t, x) => (p(), u("button", {
+      ref_key: "chipRef",
+      ref: o,
+      class: f(a.value),
+      disabled: i.disabled,
+      type: "button",
+      onClick: d
+    }, [
+      g(b, {
+        name: n.value,
+        class: "rds-e-selection-chip__icon",
+        "aria-hidden": "true"
+      }, null, 8, ["name"]),
+      m("span", k, _(i.text), 1)
+    ], 10, C));
+  }
+}), V = /* @__PURE__ */ y(S, [["__scopeId", "data-v-9b7aba98"]]);
+export {
+  V as default
+};

package/dist/components/sidedrawer.es.js

@@ -0,0 +1,85 @@
+import { defineComponent as S, ref as a, computed as n, watch as g, openBlock as o, createElementBlock as l, normalizeClass as c, createElementVNode as u, toDisplayString as k, createCommentVNode as m, createBlock as b, renderSlot as y } from "vue";
+import { R as B } from "./icon-svg-u9BWBbvW.js";
+import { _ as x } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/sidedrawer.css';const D = { class: "rds-e-sidedrawer__header rds-mb-24" }, E = {
+  key: 0,
+  class: "rds-headline-04 rds-content-high"
+}, H = /* @__PURE__ */ S({
+  __name: "sidedrawer",
+  props: {
+    /**
+     * <span>Texto a mostrar en el título</span>
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * <span>Mostrar o no la X de cierre</span>
+     */
+    iconClose: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["sidedrawerChange"],
+  setup(t, { expose: w, emit: _ }) {
+    const v = _, f = a(), e = a(!0), d = a(!0), h = n(() => ({
+      "rds-e-sidedrawer--hide": e.value,
+      "rds-e-sidedrawer--show": !e.value
+    })), p = n(() => ({
+      "rds-e-sidedrawer__content--hide": e.value,
+      "rds-e-sidedrawer__content--show": !e.value
+    })), C = () => {
+      v("sidedrawerChange", e.value);
+    }, s = (r) => {
+      e.value = r, C();
+    };
+    return g(e, (r) => {
+      r ? setTimeout(() => {
+        d.value = !0;
+      }, 500) : d.value = !1;
+    }), w({
+      /**
+       * { boolean } Muestra el estado actual del sidebar.
+       */
+      isHide: e,
+      /**
+       * { () => void } Abre el sidebar.
+       */
+      openSidedrawer: () => s(!1),
+      /**
+       * { () => void } Cierra el sidedrawer.
+       */
+      closeSidedrawer: () => s(!0),
+      /**
+       * { (state: boolean) => void } Cambia el estado del sidedrawer.
+       */
+      toogleSidedrawer: () => {
+        s(!e.value);
+      }
+    }), (r, i) => (o(), l("div", {
+      class: c(["rds-e-sidedrawer", [h.value, { "rds-e-sidedrawer--hidden": d.value }]])
+    }, [
+      u("div", {
+        ref_key: "sidebar",
+        ref: f,
+        class: c(["rds-e-sidedrawer__content rds-pa-24", p.value])
+      }, [
+        u("div", D, [
+          t.title ? (o(), l("h2", E, k(t.title), 1)) : m("", !0),
+          t.iconClose ? (o(), b(B, {
+            key: 1,
+            name: "close",
+            class: "rds-e-sidedrawer__icon",
+            onClick: i[0] || (i[0] = (I) => s(!0))
+          })) : m("", !0)
+        ]),
+        y(r.$slots, "content", {}, void 0, !0)
+      ], 2)
+    ], 2));
+  }
+}), $ = /* @__PURE__ */ x(H, [["__scopeId", "data-v-784b3aa8"]]);
+export {
+  $ as default
+};