energy-components 1.10.0 → 1.11.0

package/dist/components/breadcrumbs.es.js

@@ -1,7 +1,7 @@
-import { defineComponent as g, toRefs as h, ref as y, watchEffect as C, onMounted as L, createElementBlock as c, openBlock as l, Fragment as I, renderList as w, normalizeClass as x, unref as B, createVNode as j, mergeProps as E, toHandlers as P, withCtx as T, createCommentVNode as D } from "vue";
+import { defineComponent as g, toRefs as h, ref as C, watchEffect as y, onMounted as L, createElementBlock as c, openBlock as l, Fragment as I, renderList as w, normalizeClass as x, unref as B, createVNode as j, mergeProps as E, toHandlers as P, withCtx as T, createCommentVNode as D } from "vue";
 import N from "./link.es.js";
 import { _ as O } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/breadcrumbs.css';const R = { key: 0 }, V = /* @__PURE__ */ g({
+import './style/breadcrumbs.css';const R = { key: 0 }, S = /* @__PURE__ */ g({
   __name: "breadcrumbs",
   props: {
     /**
@@ -28,14 +28,14 @@ import './style/breadcrumbs.css';const R = { key: 0 }, V = /* @__PURE__ */ g({
   },
   emits: ["onClickTrimmedList"],
   setup(d, { emit: p }) {
-    const s = d, f = p, {
-      items: t,
+    const t = d, f = p, {
+      items: s,
       inverse: o
-    } = h(s), n = y(), v = () => {
-      f("onClickTrimmedList", t.value.slice(1, -1));
-    }, m = () => {
+    } = h(t), n = C(), m = () => {
+      f("onClickTrimmedList", s.value.slice(1, -1));
+    }, v = () => {
       n.value = [
-        t.value[0],
+        s.value[0],
         {
           text: "...",
           active: !1,
@@ -43,29 +43,31 @@ import './style/breadcrumbs.css';const R = { key: 0 }, V = /* @__PURE__ */ g({
           to: "",
           clickable: !0
         },
-        t.value[t.value.length - 1]
+        s.value[s.value.length - 1]
       ];
     }, u = () => {
-      s.trimItems && t.value.length > 3 ? m() : typeof s.items == "object" ? n.value = s.items : console.error("energy-components: The prop is not an Object");
-    }, b = (e, a) => {
+      t.trimItems && s.value.length > 3 ? v() : typeof t.items == "object" ? n.value = t.items : console.error("energy-components: The prop is not an Object");
+    }, _ = (e, a) => {
       const r = {
         ...e,
-        inverse: o.value
+        inverse: o.value,
+        customClass: "rds-e-breadcrumbs__link--text"
       };
       return a !== n.value.length - 1 && Object.assign(r, {
         arrow: !0,
-        right: !0
+        right: !0,
+        arrowSmall: !0
       }), r;
-    }, _ = (e) => ({
+    }, b = (e) => ({
       click: (r) => {
-        r.preventDefault(), r.stopPropagation(), e != null && e.clickable && v();
+        r.preventDefault(), r.stopPropagation(), e != null && e.clickable && m();
       }
     }), k = (e) => [
       "rds-e-breadcrumbs__link",
       e != null && e.active ? "rds-e-breadcrumbs__link--active" : "",
       o.value && (e != null && e.active) ? "rds-e-breadcrumbs__link--inverse-active" : ""
     ];
-    return C(() => {
+    return y(() => {
       u();
     }), L(() => {
       u();
@@ -75,7 +77,7 @@ import './style/breadcrumbs.css';const R = { key: 0 }, V = /* @__PURE__ */ g({
     }, [
       j(N, E({
         class: k(r)
-      }, { ref_for: !0 }, b(r, i), P(_(r))), {
+      }, { ref_for: !0 }, _(r, i), P(b(r))), {
         default: T(() => [
           r != null && r.clickable ? (l(), c("span", R, "...")) : D("", !0)
         ]),
@@ -83,7 +85,7 @@ import './style/breadcrumbs.css';const R = { key: 0 }, V = /* @__PURE__ */ g({
       }, 1040, ["class"])
     ], 2))), 128));
   }
-}), F = /* @__PURE__ */ O(V, [["__scopeId", "data-v-f9b5ced9"]]);
+}), A = /* @__PURE__ */ O(S, [["__scopeId", "data-v-696e4937"]]);
 export {
-  F as default
+  A as default
 };

package/dist/components/button.es.js

@@ -1,7 +1,7 @@
-import { defineComponent as B, toRefs as S, computed as l, createElementBlock as x, openBlock as b, normalizeClass as m, unref as o, createBlock as I, createCommentVNode as k, createElementVNode as $, renderSlot as C, createTextVNode as N, toDisplayString as R } from "vue";
-import { R as V } from "./icon-svg-DuzOdbk1.js";
-import { _ as D } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/button.css';const E = ["type", "disabled"], L = { class: "rds-e-btn__text" }, w = /* @__PURE__ */ B({
+import { defineComponent as S, toRefs as x, computed as r, createElementBlock as I, openBlock as b, normalizeClass as m, unref as s, createBlock as $, createCommentVNode as k, createElementVNode as C, renderSlot as N, createTextVNode as R, toDisplayString as V } from "vue";
+import { R as D } from "./icon-svg-DuzOdbk1.js";
+import { _ as E } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/button.css';const L = ["type", "disabled"], w = { class: "rds-e-btn__text" }, W = /* @__PURE__ */ S({
   __name: "button",
   props: {
     /**
@@ -10,8 +10,8 @@ import './style/button.css';const E = ["type", "disabled"], L = { class: "rds-e-
     text: {
       type: String,
       default: "",
-      validator(e, t) {
-        return !e && !t.icon ? (console.info("No se han pasado ni texto ni icono al botón"), !1) : !0;
+      validator(t, a) {
+        return !t && !a.icon ? (console.info("No se han pasado ni texto ni icono al botón"), !1) : !0;
       }
     },
     /**
@@ -20,8 +20,8 @@ import './style/button.css';const E = ["type", "disabled"], L = { class: "rds-e-
     icon: {
       type: String,
       default: "",
-      validator(e, t) {
-        return !e && !t.text ? (console.info("No se han pasado ni texto ni icono al botón"), !1) : !0;
+      validator(t, a) {
+        return !t && !a.text ? (console.info("No se han pasado ni texto ni icono al botón"), !1) : !0;
       }
     },
     /**
@@ -32,11 +32,11 @@ import './style/button.css';const E = ["type", "disabled"], L = { class: "rds-e-
     type: {
       type: String,
       default: "button",
-      validator(e) {
-        const t = ["button", "submit", "reset"].includes(e);
-        return t || console.info(
-          `El tipo ${e} no es válido. Los tipos válidos son: button, submit, reset`
-        ), t;
+      validator(t) {
+        const a = ["button", "submit", "reset"].includes(t);
+        return a || console.info(
+          `El tipo ${t} no es válido. Los tipos válidos son: button, submit, reset`
+        ), a;
       }
     },
     /**
@@ -47,11 +47,11 @@ import './style/button.css';const E = ["type", "disabled"], L = { class: "rds-e-
     variant: {
       type: String,
       default: "primary",
-      validator(e) {
-        const t = ["primary", "secondary", "ghost", "commercial"].includes(e);
-        return t || console.info(
-          `La variante ${e} no es válida. Las variantes válidas son: primary, secondary, ghost, commercial`
-        ), t;
+      validator(t) {
+        const a = ["primary", "secondary", "ghost", "commercial"].includes(t);
+        return a || console.info(
+          `La variante ${t} no es válida. Las variantes válidas son: primary, secondary, ghost, commercial`
+        ), a;
       }
     },
     /**
@@ -95,49 +95,57 @@ import './style/button.css';const E = ["type", "disabled"], L = { class: "rds-e-
     loading: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * <span>Indica si el botón es destructivo (solo para variantes 'secondary' y 'ghost')</span>
+     */
+    destructive: {
+      type: Boolean,
+      default: !1
     }
   },
-  setup(e) {
-    const t = e, {
-      text: s,
+  setup(t) {
+    const a = t, {
+      text: l,
       icon: n,
-      type: r,
-      variant: i,
-      small: f,
-      disabled: u,
+      type: i,
+      variant: u,
+      small: p,
+      disabled: d,
       mobileWidth: y,
-      inverse: d,
-      revertIcon: _,
-      loading: p
-    } = S(t), c = l(() => p.value ? "loading" : n != null && n.value ? n == null ? void 0 : n.value : ""), h = l(() => r.value && ["button", "submit", "reset"].includes(r.value) ? r.value : "button"), v = l(() => ["primary", "secondary", "ghost", "commercial"].includes(i.value) ? i.value : "primary"), g = l(() => {
-      const a = ["rds-e-btn"];
-      return i.value && a.push(`rds-e-btn--${v.value}`), d.value && a.push(`rds-e-btn--${v.value}-inverse`), c.value && a.push(
-        s != null && s.value ? "rds-e-btn--with-icon" : "rds-e-btn--icon"
-      ), f.value && a.push("rds-e-btn--small"), _.value && a.push("rds-e-btn--revert"), u.value && a.push("rds-e-style-state-disabled"), p.value && a.push("rds-e-btn--loading"), y.value && a.push("rds-e-btn--mobile-width"), a.join(" ");
+      inverse: c,
+      revertIcon: h,
+      loading: v,
+      destructive: _
+    } = x(a), f = r(() => v.value ? "loading" : n != null && n.value ? n == null ? void 0 : n.value : ""), g = r(() => i.value && ["button", "submit", "reset"].includes(i.value) ? i.value : "button"), o = r(() => ["primary", "secondary", "ghost", "commercial"].includes(u.value) ? u.value : "primary"), B = r(() => {
+      const e = ["rds-e-btn"];
+      return u.value && e.push(`rds-e-btn--${o.value}`), c.value && e.push(`rds-e-btn--${o.value}-inverse`), f.value && e.push(
+        l != null && l.value ? "rds-e-btn--with-icon" : "rds-e-btn--icon"
+      ), p.value && e.push("rds-e-btn--small"), h.value && e.push("rds-e-btn--revert"), d.value && e.push("rds-e-style-state-disabled"), v.value && e.push("rds-e-btn--loading"), y.value && e.push("rds-e-btn--mobile-width"), _.value && (o.value === "secondary" || o.value === "ghost") && e.push(`rds-e-btn--${o.value}-destructive`), e.join(" ");
     });
-    return (a, W) => (b(), x("button", {
-      type: h.value,
-      disabled: o(u),
-      class: m(g.value)
+    return (e, j) => (b(), I("button", {
+      type: g.value,
+      disabled: s(d),
+      class: m(B.value)
     }, [
-      c.value ? (b(), I(V, {
+      f.value ? (b(), $(D, {
         key: 0,
-        name: c.value,
-        small: o(f),
+        name: f.value,
+        small: s(p),
         class: m(["rds-e-btn__icon", [
-          o(d) ? `rds-e-btn__icon--${o(d)}` : "",
-          o(u) ? "rds-e-btn__icon--disabled" : ""
+          s(c) ? `rds-e-btn__icon--${s(c)}` : "",
+          s(d) ? "rds-e-btn__icon--disabled" : ""
         ]]),
         "aria-hidden": "true"
       }, null, 8, ["name", "small", "class"])) : k("", !0),
-      $("span", L, [
-        C(a.$slots, "default", {}, () => [
-          N(R(o(s)), 1)
+      C("span", w, [
+        N(e.$slots, "default", {}, () => [
+          R(V(s(l)), 1)
         ], !0)
       ])
-    ], 10, E));
+    ], 10, L));
   }
-}), T = /* @__PURE__ */ D(w, [["__scopeId", "data-v-ad01f4e1"]]);
+}), q = /* @__PURE__ */ E(W, [["__scopeId", "data-v-9550b6cc"]]);
 export {
-  T as default
+  q as default
 };

package/dist/components/collapsable.es.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./collapsable.scss_vue_type_style_index_0_src_true_lang-DfOWp1XD.js";
+export {
+  f as default
+};

package/dist/components/collapsable.scss_vue_type_style_index_0_src_true_lang-DfOWp1XD.js

@@ -0,0 +1,86 @@
+import { defineComponent as w, ref as d, computed as r, watch as f, nextTick as c, createElementBlock as B, openBlock as m, normalizeClass as i, createElementVNode as a, withKeys as C, createBlock as S, createCommentVNode as $, createVNode as I, toDisplayString as v, renderSlot as N, createTextVNode as V } from "vue";
+import { R as h } from "./icon-svg-DuzOdbk1.js";
+import './style/collapsable.css';const H = ["id", "aria-expanded", "aria-controls", "disabled"], x = { class: "rds-e-collapsable__header-title" }, D = { class: "rds-e-collapsable__header-title-text" }, E = ["id", "aria-labelledby"], W = /* @__PURE__ */ w({
+  __name: "collapsable",
+  props: {
+    title: {},
+    content: { default: "" },
+    icon: { default: "" },
+    open: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    fullWidth: { type: Boolean, default: !1 },
+    id: { default: "" }
+  },
+  emits: ["update:open"],
+  setup(y, { emit: g }) {
+    const o = y, k = g, l = d(o.open), t = d(null), s = d(null), p = r(() => o.id || `rds-collapsable-${Math.random().toString(36).substr(2, 9)}`), u = r(() => `${p.value}-panel`), b = r(() => `${p.value}-header`), n = () => {
+      if (!t.value || !s.value) return;
+      const e = s.value.scrollHeight;
+      t.value.style.maxHeight = l.value ? `${e}px` : "0px";
+    }, _ = () => {
+      o.disabled || (l.value = !l.value, k("update:open", l.value), c(() => {
+        n();
+      }));
+    };
+    return f(() => o.open, (e) => {
+      l.value = e, c(() => {
+        n();
+      });
+    }), f(l, () => {
+      c(() => {
+        n();
+      });
+    }, { immediate: !0 }), (e, K) => (m(), B("div", {
+      class: i(["rds-e-collapsable", {
+        "rds-e-collapsable--open": l.value,
+        "rds-e-collapsable--disabled": e.disabled,
+        "rds-e-collapsable--full-width": e.fullWidth
+      }])
+    }, [
+      a("button", {
+        id: b.value,
+        class: "rds-e-collapsable__header",
+        type: "button",
+        "aria-expanded": l.value,
+        "aria-controls": u.value,
+        disabled: e.disabled,
+        onClick: _,
+        onKeydown: C(_, ["enter", "space"])
+      }, [
+        e.icon ? (m(), S(h, {
+          key: 0,
+          name: e.icon,
+          class: "rds-e-collapsable__header-icon"
+        }, null, 8, ["name"])) : $("", !0),
+        a("span", x, [
+          a("span", D, v(e.title), 1)
+        ]),
+        I(h, {
+          class: i(["rds-e-collapsable__header-arrow", { "rds-e-collapsable__header-arrow--open": l.value }]),
+          name: "arrow_down"
+        }, null, 8, ["class"])
+      ], 40, H),
+      a("div", {
+        id: u.value,
+        ref_key: "panel",
+        ref: t,
+        class: i(["rds-e-collapsable__panel", { "rds-e-collapsable__panel--open": l.value }]),
+        role: "region",
+        "aria-labelledby": b.value
+      }, [
+        a("div", {
+          ref_key: "panelContent",
+          ref: s,
+          class: "rds-e-collapsable__panel-content"
+        }, [
+          N(e.$slots, "default", {}, () => [
+            V(v(e.content), 1)
+          ])
+        ], 512)
+      ], 10, E)
+    ], 2));
+  }
+});
+export {
+  W as _
+};