@bisom/web_package

@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

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

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

Configuration

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

Scripts de développement

Avant chaque PR

npm run lint

Auteur

Laurent Mahieu