energy-components 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Chroma Software Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,94 @@
+# Energy Components:
+
+energy-components is a library of atomic components implemented using Vue3 + TypeScript technologies.
+
+For its functionality, energy-components also integrates another library developed by the Webbap Platforms team:
+[energy-foundations](https://www.npmjs.com/package/energy-foundations),
+which is also available for use.
+
+## Installation
+
+You need Vue.js version 3.2+ to use this library.
+It's also necessary to install energy-foundations >= [0.0.10 or the latest](https://www.npmjs.com/package/energy-foundations?activeTab=versions).
+
+**Yarn**
+
+```bash
+yarn add energy-components
+```
+
+If you use Yarn, you may see a `warning` indicating that the `energy-foundations` library is required.
+This is the moment to install it if you haven't done so already.
+
+```bash
+yarn add energy-foundations
+```
+
+**NPM**
+
+```bash
+npm i energy-components
+```
+
+If you use npm version >=7.0.0, it will automatically install the `energy-foundations` library.
+
+## Usage
+
+### Before You Begin:
+
+You need to import the energy-foundations styles in your application. If you haven't installed the library yet, follow
+this [documentation](https://www.npmjs.com/package/energy-foundations?activeTab=readme).
+
+### Recommended: Independent Components (tree-shaking)
+
+This approach includes only the components you use in the final bundle of your application.
+There's no need to import styles, as each component imports its own.
+
+Although you can customize the component names, we recommend using the same names as in the library to maintain
+consistency.
+
+```
+<div class="doc-notification">
+  <div class="doc-notification__body">
+    <p>Important: remember to import components from <b>'energy-components/components'</b> as shown below</p>
+  </div>
+</div>
+```
+
+### Declaring Components Globally
+
+```vue
+// main.ts import { RDSButton, RDSTextField } from 'energy-components/components'; const app =
+createApp(App); app.component('RDSButton', RDSButton); app.component('RDSTextField', RDSTextField);
+app.mount('#app');
+```
+
+### Declaring Components Locally
+
+With this approach, you'll also only use the components you import.
+However, they will only be available within the component where you do the `import`.
+
+```vue
+// *.vue
+<script setup lang="ts">
+import { RDSButton } from 'energy-components/components'
+</script>
+```
+
+### Not Recommended: Entire Library
+
+Due to the large number of components available in the library,
+using this approach may significantly increase your bundle size,
+affecting the performance of your application.
+
+```vue
+// main.ts import RDSLibrary from 'energy-components'; const app = createApp(App);
+app.use(RDSLibrary);
+```
+
+**Important:** If you choose this method of importing the library, you must add an additional CSS file in main.css,
+below the energy-foundations CSS.
+
+```vue
+// main.scss @import 'energy-foundations/dist/style.css'; @import 'energy-components/style';
+```

package/dist/components/_plugin-vue_export-helper-CHgC5LLL.js

@@ -0,0 +1,9 @@
+const s = (t, r) => {
+  const o = t.__vccOpts || t;
+  for (const [c, e] of r)
+    o[c] = e;
+  return o;
+};
+export {
+  s as _
+};

package/dist/components/accordion.es.js

@@ -0,0 +1,121 @@
+import { defineComponent as R, toRefs as D, ref as l, watch as B, nextTick as q, inject as v, onMounted as N, onBeforeUnmount as V, openBlock as _, createElementBlock as w, createElementVNode as r, toDisplayString as h, unref as d, createBlock as A, mergeProps as H, createCommentVNode as P, createVNode as T, normalizeClass as y, renderSlot as j, createTextVNode as E } from "vue";
+import { R as I } from "./icon-svg-Cpx09myr.js";
+import O from "./tag.es.js";
+import { _ as $ } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/accordion.css';const b = { class: "rds-accordion" }, z = { class: "rds-accordion-title" }, L = { class: "rds-accordion-title_right" }, M = /* @__PURE__ */ R({
+  __name: "accordion",
+  props: {
+    /**
+     * El identificador único del elemento.
+     */
+    id: {
+      type: String,
+      required: !0,
+      validator: (o) => !o || o.trim().length > 0 ? (console.error("[RDSAccordion]: La propiedad id es requerida."), !1) : !0
+    },
+    /**
+     * El título del acordeón.
+     */
+    title: {
+      type: String,
+      required: !0
+    },
+    /**
+     * El contenido del acordeón.
+     * Texto simple a mostrar si no tiene nada mas, si no se utiliza el slot por defecto.
+     */
+    content: {
+      type: String,
+      required: !1
+    },
+    /**
+     * Indica si el acordeón está abierto o cerrado.
+     */
+    open: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * La etiqueta del acordeón, mostrada a la derecha del panel.
+     */
+    tag: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ["update:open"],
+  setup(o, { expose: C, emit: S }) {
+    const n = o, k = S, { tag: a } = D(n), t = l(n.open), c = l(null), s = l(null), x = () => {
+      if (!c.value || !s.value) return;
+      const e = s.value.scrollHeight;
+      c.value.style.maxHeight = t.value ? `${e}px` : "0px";
+    }, i = (e) => {
+      e === void 0 ? t.value = !t.value : t.value = e, k("update:open", t.value), x();
+    }, u = () => {
+      i(!0);
+    }, p = () => {
+      i(!1);
+    };
+    B(
+      () => n.open,
+      (e) => q(() => {
+        i(e);
+      }),
+      { immediate: !0 }
+    );
+    const f = v("registerRDSAccordionChild"), m = v("unregisterRDSAccordionChild");
+    return N(() => {
+      f && f({
+        id: n.id,
+        open: u,
+        close: p
+      });
+    }), V(() => {
+      m && m(n.id);
+    }), C({
+      /**
+       * Abre el panel.
+       */
+      openPanel: u,
+      /**
+       * Cierra el panel.
+       */
+      closePanel: p
+    }), (e, g) => (_(), w("div", b, [
+      r("div", {
+        class: "rds-accordion-title_container",
+        onClick: g[0] || (g[0] = () => i())
+      }, [
+        r("span", z, h(o.title), 1),
+        r("div", L, [
+          d(a) && d(a).icon ? (_(), A(O, H({
+            key: 0,
+            class: "rds-accordion-title_tag"
+          }, d(a), { small: "" }), null, 16)) : P("", !0),
+          T(I, {
+            class: y(["rds-accordion-title_icon", { "rds-accordion-title_icon--open": t.value }]),
+            name: "arrow_down"
+          }, null, 8, ["class"])
+        ])
+      ]),
+      r("div", {
+        ref_key: "panel",
+        ref: c,
+        class: y(["rds-accordion-panel", { "rds-accordion-panel--open": t.value }])
+      }, [
+        r("div", {
+          ref_key: "panelContent",
+          ref: s,
+          class: "rds-accordion-panel_content"
+        }, [
+          j(e.$slots, "default", {}, () => [
+            E(h(o.content), 1)
+          ], !0)
+        ], 512)
+      ], 2)
+    ]));
+  }
+}), K = /* @__PURE__ */ $(M, [["__scopeId", "data-v-1a4408f9"]]);
+export {
+  K as default
+};

package/dist/components/accordionGroup.es.js

@@ -0,0 +1,32 @@
+import { defineComponent as s, ref as t, provide as r, openBlock as d, createElementBlock as i, renderSlot as a } from "vue";
+import { _ as p } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/accordionGroup.css';const u = { class: "rds-accordion-group" }, _ = /* @__PURE__ */ s({
+  __name: "accordion-group",
+  setup(f, { expose: n }) {
+    const e = t([]);
+    return r("registerRDSAccordionChild", (o) => {
+      e.value.push(o);
+    }), r("unregisterRDSAccordionChild", (o) => {
+      const c = e.value.findIndex((l) => l.id === o);
+      c > -1 && e.value.splice(c, 1);
+    }), n({
+      /**
+       * Abre todos los paneles del acordeón
+       */
+      openAll: () => {
+        e.value.forEach((o) => o.open());
+      },
+      /**
+       * Cierra todos los paneles del acordeón
+       */
+      closeAll: () => {
+        e.value.forEach((o) => o.close());
+      }
+    }), (o, c) => (d(), i("div", u, [
+      a(o.$slots, "default", {}, void 0, !0)
+    ]));
+  }
+}), x = /* @__PURE__ */ p(_, [["__scopeId", "data-v-a9d0f19c"]]);
+export {
+  x as default
+};

package/dist/components/actionButton.es.js

@@ -0,0 +1,64 @@
+import { defineComponent as o, openBlock as a, createBlock as r, mergeProps as n } from "vue";
+import s from "./button.es.js";
+import { _ as l } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/actionButton.css';const p = /* @__PURE__ */ o({
+  __name: "action-button",
+  props: {
+    /**
+     * <span>Icono a mostrar en el botón</span>
+     */
+    icon: {
+      type: String,
+      required: !0
+    },
+    /**
+     * <span>Variante del botón</span>
+     * <br>
+     *`['primary', 'secondary']`
+     */
+    variant: {
+      type: String,
+      default: "primary",
+      validator(e) {
+        return ["primary", "secondary"].includes(e);
+      }
+    },
+    /**
+     * <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>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(e) {
+    return (t, i) => (a(), r(s, n({ class: "rds-btn--action" }, { ...t.$props, ...t.$attrs }, {
+      text: "",
+      "is-action": ""
+    }), null, 16));
+  }
+}), f = /* @__PURE__ */ l(p, [["__scopeId", "data-v-3d4e563b"]]);
+export {
+  f as default
+};

package/dist/components/breadcrumbs.es.js

@@ -0,0 +1,90 @@
+import { defineComponent as g, toRefs as h, ref as y, watchEffect as C, onMounted as L, openBlock as c, createElementBlock 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({
+  __name: "breadcrumbs",
+  props: {
+    /**
+     * <span>Lista de items a mostrar en el breadcrumb</span>
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * <span>Indica si el breadcrumb se mostrará en modo inverso. En modo inverso, el texto es claro sobre un fondo oscuro.</span>
+     */
+    inverse: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * <span>Indica si el breadcrumb debe ser recortado en el medio, y mostrar un botón en su lugar.</span>
+     */
+    trimItems: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["onClickTrimmedList"],
+  setup(d, { emit: p }) {
+    const s = d, f = p, {
+      items: t,
+      inverse: o
+    } = h(s), n = y(), v = () => {
+      f("onClickTrimmedList", t.value.slice(1, -1));
+    }, m = () => {
+      n.value = [
+        t.value[0],
+        {
+          text: "...",
+          active: !1,
+          tag: "router-link",
+          to: "",
+          clickable: !0
+        },
+        t.value[t.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");
+    }, _ = (e, a) => {
+      const r = {
+        ...e,
+        inverse: o.value
+      };
+      return a !== n.value.length - 1 && Object.assign(r, {
+        arrow: !0,
+        right: !0
+      }), r;
+    }, b = (e) => ({
+      click: (r) => {
+        r.preventDefault(), r.stopPropagation(), e != null && e.clickable && v();
+      }
+    }), k = (e) => [
+      "rds-breadcrumbs__link",
+      e != null && e.active ? "rds-breadcrumbs__link--active" : "",
+      o.value && (e != null && e.active) ? "rds-breadcrumbs__link--inverse-active" : ""
+    ];
+    return C(() => {
+      u();
+    }), L(() => {
+      u();
+    }), (e, a) => (c(!0), l(I, null, w(n.value, (r, i) => (c(), l("ul", {
+      key: i,
+      class: x(["rds-breadcrumbs", `${B(o) ? "rds-breadcrumbs--inverse" : ""}`])
+    }, [
+      j(N, E({
+        class: k(r),
+        ref_for: !0
+      }, _(r, i), P(b(r))), {
+        default: T(() => [
+          r != null && r.clickable ? (c(), l("span", R, "...")) : D("", !0)
+        ]),
+        _: 2
+      }, 1040, ["class"])
+    ], 2))), 128));
+  }
+}), F = /* @__PURE__ */ O(V, [["__scopeId", "data-v-f010c3a0"]]);
+export {
+  F as default
+};

package/dist/components/button.es.js

@@ -0,0 +1,144 @@
+import { defineComponent as B, toRefs as S, computed as l, openBlock as b, createElementBlock as x, unref as s, normalizeClass as m, 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-Cpx09myr.js";
+import { _ as D } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/button.css';const E = ["type", "disabled"], L = { class: "rds-btn__text" }, w = /* @__PURE__ */ B({
+  __name: "button",
+  props: {
+    /**
+     * <span>Texto a mostrar en el botón</span>
+     */
+    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;
+      }
+    },
+    /**
+     * <span>Icono a mostrar en el botón</span>
+     */
+    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;
+      }
+    },
+    /**
+     * <span>Tipo de botón</span>
+     * <br>
+     * `['button', 'submit', 'reset']`
+     */
+    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;
+      }
+    },
+    /**
+     * <span>Variante del botón</span>
+     * <br>
+     *`['primary', 'secondary', 'ghost']`
+     */
+    variant: {
+      type: String,
+      default: "primary",
+      required: !0,
+      validator(e) {
+        const t = ["primary", "secondary", "ghost"].includes(e);
+        return t || console.info(
+          `La variante ${e} no es válida. Las variantes válidas son: primary, secondary, ghost`
+        ), t;
+      }
+    },
+    /**
+     * Indica si el boton ocupara el ancho completo del contenedor en dispositivos móviles.
+     */
+    mobileWidth: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * <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>Añade una clase por encima de opacidad <br>Los eventos funcionan</span>
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * <span>Cambia la posicion del icono al lado derecho</span>
+     */
+    revertIcon: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * <span>Cambia el estado del botón a cargando</span>
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    const t = e, {
+      text: o,
+      icon: n,
+      type: r,
+      variant: i,
+      small: f,
+      disabled: u,
+      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"].includes(i.value) ? i.value : "primary"), g = l(() => {
+      const a = ["rds-btn"];
+      return i.value && a.push(`rds-btn--${v.value}`), d.value && a.push(`rds-btn--${v.value}-inverse`), c.value && a.push(
+        o != null && o.value ? "rds-btn--with-icon" : "rds-btn--icon"
+      ), f.value && a.push("rds-btn--small"), _.value && a.push("rds-btn--revert"), u.value && a.push("rds-style-state-disabled"), p.value && a.push("rds-btn--loading"), y.value && a.push("rds-btn--mobile-width"), a.join(" ");
+    });
+    return (a, W) => (b(), x("button", {
+      type: h.value,
+      disabled: s(u),
+      class: m(g.value)
+    }, [
+      c.value ? (b(), I(V, {
+        key: 0,
+        name: c.value,
+        small: s(f),
+        class: m(["rds-btn__icon", [
+          s(d) ? `rds-btn__icon--${s(d)}` : "",
+          s(u) ? "rds-btn__icon--disabled" : ""
+        ]]),
+        "aria-hidden": "true"
+      }, null, 8, ["name", "small", "class"])) : k("", !0),
+      $("span", L, [
+        C(a.$slots, "default", {}, () => [
+          N(R(s(o)), 1)
+        ], !0)
+      ])
+    ], 10, E));
+  }
+}), F = /* @__PURE__ */ D(w, [["__scopeId", "data-v-238a49e9"]]);
+export {
+  F as default
+};