@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 3.8+
• Pinia 3+
• Vue Router 5+
• Vue I18n 11+

Installation

npm install @bisom/web_package

Peer Dependencies

Assurez-vous d'avoir les dépendances suivantes installées dans votre projet :

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

| Dépendance | Version | | ------------------------ | ------- | | vue | ^3.5.13 | | vuetify | ^3.8.3 | | pinia | ^3.0.2 | | vue-router | ^5.0.1 | | vue-i18n | ^11.1.3 | | axios | ^1.13.4 | | leaflet | ^1.9.4 | | @vue-leaflet/vue-leaflet | ^0.10.1 |

Utilisation

Importer les composants

// main.ts ou plugin
import { createApp } from "vue";
import App from "./App.vue";
import vuetify from "./plugins/vuetify"; // Vuetify configuré pour votre app

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

// Importer les styles
import "@bisom/web_package/dist/bisom-lib.css";

const app = createApp(App);

// Enregistrer les composants globalement (optionnel)
app.component("BBisomImg", BBisomImg);
app.component("BMap", BMap);
app.component("BLineChart", BLineChart);
// ... autres composants

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

Utilisation dans un composant

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

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

Import des utilitaires

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

// Utilitaires disponibles
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 (theme, icônes)
• 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 herokuCheck | Vérification complète (lint + depcheck + typecheck) |

Avant chaque PR

npm run lint

Auteur

Laurent Mahieu