sipa-bms-ui

Librairie de composants et plugins VueJS pour les projets de l'équipe BMS du groupe Sipa. Créée et maintenue par l'équipe BMS.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
sipa-bms-ui
2.2.03 days ago4 months agoMinified + gzip package size for sipa-bms-ui in KB

Readme

sipa-bms-ui
Librairie de composants et plugins VueJS pour les projets de l'équipe BMS du groupe Sipa. Créée et maintenue par l'équipe BMS.

Installation

Installer d'abord la librairie avec votre package manager préféré :
npm i -D sipa-bms-ui

Attention, cette librairie n'est pas compatible Vue 2 et n'embarque pas le runtime de Vue. Il faut que votre application importe elle-même Vue 3.

Theming

Il faut ajouter le CSS des composants qui a été extrait de manière globale en ajoutant à votre main.js ou main.ts la ligne suivante :
import 'sipa-bms-ui/dist/style.css';

Puis dans votre fichier scss utilisez le module fourni par la lib :
@use 'sipa-bms-ui/theming' as sbu;

@include sbu.styles;

Cela permet d'ajouter les variables par défaut, et donne accès aux mixins présent dans la lib. Si vous souhaitez personnaliser les couleurs, passez les nouvelles variables en paramètres de votre appel au module.
@use 'sipa-bms-ui/theming' as sbu with (
  $primaryColor: #6a6db4,
  $secondaryColor: #494b79,
  $fadeColor: #b1b4e6,
  $textColor: #3b3c4d,
  $dangerColor: #d7565c,
  $successColor: #22b57a,
  $fontFamily: #{'Roboto',
  Arial},
  $fontSize: 1.6rem
);

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

@include sbu.styles;

Utilisation

Deux modes d'instanciations sont disponibles pour les composants de la librairie. En mode composant par composant (on-demand) ou de manière globale. Il est recommandé d'utiliser le mode on demand pour avoir des bundle plus petit.

Méthode on-demand tree-shakeable

À l'intérieur de votre composant, importer ce que vous souhaitez depuis le paquet sipa-bms-ui :
<script setup lang="ts">
import { BmsButton } from 'sipa-bms-ui';
</script>

<template>
  <BmsButton></BmsButton>
</template>

Méthode globale

Pour la méthode globale, dans votre fichier de montage, il faut importer et utiliser la méthode createBmsUi() :
import { createApp } from 'vue';
import { createBmsUi } from 'sipa-bms-ui';
import App from './App.vue';

createApp(App).use(createBmsUi()).mount('#app');

Les plugins

Deux plugins sont pour le moment disponibles sur la librairie : field et notifications. Ils permettent de gérer des champs de formulaires très simpliste et des notifications en mode toast.
Pour les instancier, il faut les importer et les appeler comme n'importe quel plugin Vue.
import { createApp } from 'vue';
import { createBmsUi, field, notifications } from '.';
import App from './App.vue';

createApp(App).use(createBmsUi()).use(field).use(notifications).mount('#app');

Field

Utilisation du plugin field dans un template :
<field>
  <template #default="scope">
    <input type="text" v-field="scope" v-model="message" />
  </template>
</field>

notifications

Utilisation du plugin notification :
Dans le composant racine, tel que App.vue ou autre
<bms-notifications />

import { useNotifications } from 'sipa-bms-ui';

const { success, error } = useNotifications();

const onClickOnButtonOrAfterFormSubmit = () => {
  // (text, time). Si 0, dismiss manuel.
  success('This is a success', 6000);
};

const onErrorOfSomething = () => {
  // même signature que success
  error('This is an error');
};

Pour toute question, contactez l'équipe BMS.