@bisom/web_package

Bibliothèque de composants Vue 3 et utilitaires BISOM : cartes, formulaires, cartes, vidéo, visio et dashboard.

Prérequis

• Vue 3.5+
• Vuetify 4
• Pinia 3+
• Vue Router 5+
• Vue I18n 11+

Installation

npm install @bisom/web_package

Le package est ESM (import). Les types TypeScript et le CSS sont exposés via exports.

Peer Dependencies

Les peers obligatoires doivent être installés dans l’application consommatrice :

npm install vue vuetify@^4 pinia vue-router vue-i18n axios leaflet @vue-leaflet/vue-leaflet

| Dépendance | Version | Notes | | ------------------------ | ------- | -------------------- | | vue | ^3.5.13 | | | vuetify | ^4.0.0 | Vuetify 4 uniquement | | pinia | ^3.0.2 | | | vue-router | ^5.0.1 | | | vue-i18n | ^11.1.3 | | | axios | ^1.13.5 | | | leaflet | ^1.9.4 | | | @vue-leaflet/vue-leaflet | ^0.10.1 | |

Optionnelles

À installer seulement si vous utilisez les composants concernés :

# Cartes IGN (BMap avec useIgnLayer)
npm install geoportal-extensions-leaflet

# Graphiques (BLineChart)
npm install chart.js

# Cropper (BCropper)
npm install vue-advanced-cropper

# Animations Rive
npm install @rive-app/canvas

| Dépendance | Version | Composants | | ---------------------------- | ------- | ----------------------------------- | | geoportal-extensions-leaflet | ^2.4.3 | BMap (useIgnLayer), couches IGN | | chart.js | ^4.5.0 | BLineChart | | vue-advanced-cropper | ^2.8.0 | BCropper | | @rive-app/canvas | ^2.34.0 | RiveComponent |

geoportal-extensions-leaflet n’est pas bundlé : l’app le résout depuis node_modules (tree-shaking, une seule instance Leaflet).

Utilisation

Importer les composants

import { createApp } from "vue";
import App from "./App.vue";
import vuetify from "./plugins/vuetify"; // createVuetify (Vuetify 4)

import {
  BBisomImg,
  BMap,
  BLineChart,
  vuetifyConfig,
  bisomI18n,
  BisomUtils,
  apiHeader,
} from "@bisom/web_package";

import "@bisom/web_package/style.css";

const app = createApp(App);

app.component("BBisomImg", BBisomImg);
app.component("BMap", BMap);
app.component("BLineChart", BLineChart);

app.use(vuetify).mount("#app");

Les styles peuvent aussi s’importer via @bisom/web_package/bisom-lib.css.

vuetifyConfig (thème, icônes, defaults) se fusionne dans createVuetify de l’app, par exemple :

import { createVuetify } from "vuetify";
import { vuetifyConfig } from "@bisom/web_package";

export default createVuetify({
  defaults: vuetifyConfig.default_component,
  theme: {
    defaultTheme: "light",
    themes: { light: vuetifyConfig.theme_light },
  },
});

Utilisation dans un composant

<template>
  <BBisomImg height="200" class="ma-3" />
</template>

<script setup lang="ts">
import { BBisomImg } from "@bisom/web_package";
</script>

Les exports nommés sont typés (props des SFC). Exemple :

import type { Teammate, Vehicle, HospitalDashboard } from "@bisom/web_package";

Import des utilitaires

import { BisomUtils, apiHeader } from "@bisom/web_package";

BisomUtils.getAccessToken();
BisomUtils.downloadFile();
BisomUtils.compressImg();
BisomUtils.parseJwt();

Exports disponibles

Composants

| Composant | Description | | --------------------------------------------------------- | -------------------- | | BBisomImg | Image BISOM | | BBisomLoader | Loader BISOM | | BMap | Carte Leaflet | | BLineChart | Graphique Chart.js | | BTextField, BDateInput, BTextarea | Champs de formulaire | | BButtonIconText, BGenderBtn, BIconBtnWithTooltip | Boutons | | BChatCard, BNodata, BCardHeader | Cartes | | BFullscreenModal, BIncompletProfil, BVehicleLocationModal | Modales | | BDashboardMapChart, BDashboardHospitalTable | Dashboard SSE | | BShareVisio, VideoCard, RemoteVideoCard, VisioInfosCard | Visio | | … | Et plus |

Configuration

• vuetifyConfig — configuration Vuetify 4 (theme, icônes, defaults)
• bisomI18n — traductions françaises (fr-FR, dates)

Scripts de développement

| Commande | Description | | ------------------- | ------------------------------------ | | npm run dev | Démarre le serveur de développement | | npm run build | Build de la bibliothèque | | npm run lint | Lint du code | | npm run format | Formatage Prettier | | npm run typecheck | Vérification TypeScript | | npm run test:unit | Tests unitaires Vitest | | npm run appcheck | Format + lint + typecheck + outdated |

Avant chaque PR

npm run lint

Auteur

Laurent Mahieu