npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rds-vue3

v3.0.10

Published

Rds-vue3 es la librería de componentes basada en los estilos de Oxygen 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 eficient

Downloads

550

Readme

RDS Vue 3:

Rds-vue3 es la librería de componentes basada en los estilos de Oxygen 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, rds-vue3 a su vez integra otra librería desarrollada por el equipo de Plataformas Webbap: rds-foundations, la cual está disponible también para su uso.

Features

Quick start

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

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

yarn add rds-vue3

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

npm i rds-vue3

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 'rds-vue3'; 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 'rds-vue3'
</script>

Uso de los módulos (charts)

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

Por ejemplo:

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

CSS:

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

// main.scss @import 'rds-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 rds-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 'rds-vue3';
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 rds-foundations

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