Energy components:

energy-components es la librería de componentes basada en los estilos de Energy de Repsol Design Sistem, implementada en las tecnologías Vue3 + typescript para aprovechar las ventajas de ambas y poder construir las aplicaciones web corporativas de manera más eficiente.

En ella podemos encontrar un amplio catálogo de componentes atómicos listos para usarse, cuya documentación se puede encontrar en este mismo portal.

Para su funcionamiento, energy-components a su vez integra otra librería desarrollada por el equipo de Plataformas Webbap: energy-foundations, la cual está disponible también para su uso.

Features

• Build tool Vite
• TypeScript build tool
• Framework Vue 3
• Type system TypeScript / Vue tsc
• Vue SFC (Single File Components) Setup script setup

Quick start

Necesitas Vue.js versión 3.2+ para usar esta biblioteca. También es necesario instalar energy-foundations

Yarn (recomendado) Para instalar la biblioteca usando yarn, ejecuta el siguiente comando:

yarn add energy-components

Instalación via npm Para instalar la biblioteca usando npm, ejecuta el siguiente comando:

npm i energy-components

Uso

Recomendada: declarar componentes globales (treeshaking)

De esta manera sólo incluirás los componentes que vayas a utilizar en el bundle final de tu aplicación. No es necesario hacer un import de estilos, ya que cada componente importa el suyo.

Aunque puedes customizar el nombre del componente, recomendamos utilizar el mismo que la librería para mantener un estándar entre proyectos

// archivo -> main.ts import { RDSButton, RDSTextField }
from 'energy-components'; const app = createApp(App);
app.component('RDSButton', RDSButton);
app.component('RDSTextField', RDSTextField);

Declarar componentes localmente

De esta manera también utilizarás solo los componentes que importes. Pero así solo estarán disponibles dentro del componente padre en el que hagas el import

// *.vue
<script setup lang="ts">
import { RDSButton } from 'energy-components'
</script>

Uso de los módulos (charts)

Para importar los charts, podemos usar las formas anteriores pero importadas de `energy-components/charts``

Por ejemplo:

// *.vue
<script setup lang="ts">
import { RDSPieChart } from 'energy-components/charts'
</script>

CSS:

Es necesario importar el CSS de energy-foundations. Recomendamos cargarlos en otra hoja de estilos, por ejemplo en main.scss

// main.scss @import 'energy-foundations/dist/style.css';

Y a su vez, este debe ir en el fichero app.vue, sin el atributo scoped:

<style lang="scss" src="./styles/main.scss"></style>

Para aprovechar toda la potencia de energy-foundations recomendamos además añadir las variables en el vite.config como indica la librería en su documentación. De esta manera podrás utilizar los estilos corporativos fuera de los componentes, ayudándote con la maquetación genérica.

No recomendado: declarar todos los componentes globalmente

Debido a la gran cantidad de componentes que se disponibilizan en la librería, si utilizas esta manera de importarla tu bundle crecerá demasiado, comprometiendo el rendimiento de tu aplicación.

// archivo -> main.ts import RDSLibrary from 'energy-components';
const app = createApp(App); app.use(RDSLibrary);

Si elgies esta forma de importar la librería, deberás añadir un css adicional, en el main.css bajo el css de energy-foundations

// main.scss @import 'energy-foundations/dist/style.css';
@import 'energy-components/style';