@arche-mc2/vue-ui-lib

Bibliothèque de composants UI Vue 3 + TypeScript.

Stack : Vue 3 · TypeScript · Vite · SCSS · Storybook 9

Installation

yarn add @arche-mc2/vue-ui-lib
# ou
npm install @arche-mc2/vue-ui-lib

Setup

Dans main.ts, importer les styles et initialiser le système de toast :

import { createApp } from 'vue'
import '@arche-mc2/vue-ui-lib/dist/vue-ui-lib.css'
import { provideToast } from '@arche-mc2/vue-ui-lib'
import App from './App.vue'

const app = createApp(App)
provideToast(app)  // requis pour les toasts
app.mount('#app')

Placer <ToastBase /> une seule fois dans App.vue :

<template>
  <RouterView />
  <ToastBase />
</template>

Utilisation

import { ButtonBase, InputBase, SelectBase } from '@arche-mc2/vue-ui-lib'
import type { Option, ButtonTypes, IconName } from '@arche-mc2/vue-ui-lib'

Composants disponibles (23)

| Composant | Description | |-----------|-------------| | ButtonBase | Bouton avec variantes, icône, loader | | InputBase | Input texte/date/password/search avec label flottant | | SelectBase | Dropdown mono/multi-sélection | | CheckboxBase | Case à cocher avec état indéterminé | | RadioBase | Bouton radio | | ToggleBase | Interrupteur on/off | | ToggleAdvanced | Interrupteur 2 boutons gauche/droite | | SegmentedButton | Bouton 3 positions (gauche/centre/droite) | | ModalBase | Modale avec titre et overlay | | ToastBase | Notifications (système inject/provide) | | TooltipBase | Tooltip au survol | | FlyoutMenu | Menu contextuel positionné | | SideMenu | Menu latéral hiérarchique | | TabBar | Barre d'onglets | | DataGrid | Grille de données avancée | | WidgetBase | Carte conteneur avec slots | | CalendarBase | Calendrier (FullCalendar) | | DatePicker | Sélecteur de date | | SvgIcon | Icône SVG (532 icônes) | | LoaderBase | Indicateur de chargement | | TagBase | Badge coloré | | ListWithSearch | Liste filtrée avec recherche | | SelectionGroup | Tags de sélection avec débordement |

API des composants

ButtonBase

<ButtonBase type="primary" @click="save">Enregistrer</ButtonBase>
<ButtonBase type="secondary" icon-name="plus" :loading="isSaving">Ajouter</ButtonBase>

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | type | ButtonTypes | 'primary' | Variante visuelle | | iconName | IconName | — | Icône à gauche du texte | | loading | boolean | — | Affiche un loader | | disabled | boolean | — | Désactive le bouton | | active | boolean | — | État actif | | id | string | — | Attribut id HTML | | inert | boolean | — | Attribut inert HTML |

Slot : default

ButtonTypes : 'primary' 'primary-pink' 'secondary' 'secondary-pink' 'action1'…'action7'

InputBase

<InputBase v-model="name" label="Nom" />
<InputBase v-model="search" type="search" icon-name="search" clearable />
<InputBase v-model="pass" type="password" label="Mot de passe" password-control />
<InputBase v-model="date" type="date" label="Date de naissance" />
<InputBase v-model="email" type="email" label="Email" :error="true" error-message="Email invalide" required />

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | modelValue | string \| number | — | Valeur (v-model) | | label | string | — | Label flottant | | type | 'text'\|'number'\|'time'\|'search'\|'email'\|'password'\|'tel'\|'url'\|'date' | 'text' | Type d'input | | iconName | IconName | — | Icône | | clearable | boolean | — | Bouton de vidage | | passwordControl | boolean | — | Bouton afficher/masquer | | disabled | boolean | — | — | | error | boolean | — | État d'erreur | | errorMessage | string | — | Message sous le champ | | required | boolean | — | Badge "Requis" | | placeholder | string | — | — | | suggestions | Option[] | — | Autocomplete |

Événement : update:modelValue

Le type date intègre un masque dd/mm/yyyy et un DatePicker popup automatique.

SelectBase

const selected = ref<Option[]>([])
const options = [{ value: 'fr', label: 'France' }, { value: 'de', label: 'Allemagne' }]

<SelectBase v-model="selected" :options="options" label="Pays" placeholder="Choisir..." />
<SelectBase v-model="tags" :options="tagOpts" label="Tags" multiple searchable />

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | modelValue | Option[] | requis | Sélection (v-model) — toujours un tableau | | options | Option[] | requis | Options disponibles | | label | string | — | Label flottant | | placeholder | string | — | — | | multiple | boolean | — | Multi-sélection | | searchable | boolean | — | Filtre par recherche | | clearable | boolean | true | Suppression des tags | | disabled | boolean | — | — |

CheckboxBase

<CheckboxBase v-model="accepted" label="J'accepte les CGU" />
<CheckboxBase v-model="allSelected" :indeterminate="isPartial" />

| Prop | Type | Défaut | |------|------|--------| | modelValue | boolean | false | | label | string | — | | indeterminate | boolean | — | | disabled | boolean | — | | icon | IconName | — | | theme | {--amc2-checkbox-color?, --amc2-checkmark-color?, ...} | — |

RadioBase

<RadioBase v-model="gender" value="male" label="Homme" />
<RadioBase v-model="gender" value="female" label="Femme" />

| Prop | Type | Description | |------|------|-------------| | modelValue | any | Valeur partagée du groupe (v-model) | | value | any | Requis — valeur de cette option | | label | string | — | | disabled | boolean | — | | theme | {--amc2-radio-color?, ...} | — |

ToggleBase

<ToggleBase v-model="notifications" label="Notifications" />

| Prop | Type | Description | |------|------|-------------| | modelValue | boolean | État (v-model) | | label | string | — | | disabled | boolean | — | | theme | ToggleTheme | CSS custom properties de couleurs |

ToggleAdvanced

<ToggleAdvanced v-model="isListView" label-left="Liste" icon-left="list"
  label-right="Grille" icon-right="grid" />

| Prop | Type | Description | |------|------|-------------| | modelValue | boolean | true = gauche actif (v-model) | | labelLeft / iconLeft | string / IconName | Bouton gauche | | labelRight / iconRight | string / IconName | Bouton droit | | disabled | boolean | — | | theme | ToggleTheme | — |

SegmentedButton

<SegmentedButton v-model="sortOrder" label-left="A→Z" label-right="Z→A" />

modelValue : 'left' | 'center' | 'right' (défaut : 'center')

ModalBase

<ModalBase :visible="showModal" title="Confirmation" @close="showModal = false">
  <p>Êtes-vous sûr ?</p>
  <ButtonBase @click="confirm">Confirmer</ButtonBase>
</ModalBase>

| Prop | Type | Description | |------|------|-------------| | visible | boolean | Requis | | title | string | Requis | | additionnal | boolean | Modale secondaire (empilée) |

Événement : close | Slot : default

ToastBase + useToast

import { useToast } from '@arche-mc2/vue-ui-lib'
const toast = useToast()

toast.show('Enregistré !', 'success')
toast.show('Erreur réseau', 'error', 5000)   // 3ème arg = durée ms
toast.show('Info disponible', 'info')
toast.show('Données incomplètes', 'warning')

Intents : 'success' · 'warning' · 'error' · 'info'

TooltipBase

<TooltipBase position="top">
  <ButtonBase>Supprimer</ButtonBase>
  <template #content>Action irréversible</template>
</TooltipBase>

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | position | Position | 'bottom' | top\|bottom\|left\|right\|bottom-left | | removeDelay | number | — | Délai disparition en ms | | style | CSSProperties | — | Styles inline |

Slots : default (déclencheur) · content (contenu)

FlyoutMenu

<!-- Liste d'actions -->
<FlyoutMenu :items="[{ label: 'Éditer', onClick: edit }]">
  <ButtonBase>Actions</ButtonBase>
</FlyoutMenu>

<!-- Contenu libre -->
<FlyoutMenu position="bottom-left">
  <SvgIcon icon-name="settings" />
  <template #content><div>Filtres...</div></template>
</FlyoutMenu>

| Prop | Type | Défaut | |------|------|--------| | items | FlyoutMenuItem[] | — | | position | Position | 'bottom' | | autoClose | boolean | true |

Événement : close | Slots : default · content

SideMenu

const items: MenuItem[] = [
  { id: 1, label: 'Accueil', icon: 'home', action: () => router.push('/') },
  { id: 2, label: 'Gestion', icon: 'users', children: [
    { id: 3, label: 'Clients', action: () => router.push('/clients') },
  ]},
]

<SideMenu :items="items" :id-selected="activeId" />

TabBar

const tabs = ['Infos', 'Documents', 'Historique']
const active = ref('Infos')

<TabBar :list-items="tabs" :list-type="active" @change="active = $event" />

DataGrid

Grille avancée : colonnes configurables, tri, filtre, sélection, scroll infini, menu d'actions.

const headers = ref<DatagridHeader[]>([
  {
    key: 'name', label: 'Nom', dataType: 'string', sortable: true,
    visibility: { isShown: true, isDisabled: false, update: (v) => { headers.value[0].visibility.isShown = v } }
  },
])

const items = ref([
  { id: 1, name: 'Alice', isSelected: false,
    actions: [{ label: 'Éditer', onClick: () => open(1) }] }
])

<DataGrid
  :headers="headers" :items="items" :has-more="hasMore"
  selection
  @load-more="loadMore"
  @update-check-item="(id, v) => toggleItem(id, v)"
/>

Props principales :

| Prop | Type | Défaut | |------|------|--------| | headers | DatagridHeader[] | requis | | items | any[] | requis | | hasMore | boolean | requis | | selection | boolean | false | | displaySettingsHeader | boolean | true | | displaySettings | boolean | true | | modalFilter | (header) => void | — | | dataSort | (header) => void | — |

Événements : loadMore · updateCheckItem(id, isChecked) · updateCheckAll(isChecked)

Expose : resetScroll() · checkLoadMore()

Rendu custom dans une cellule :

import { h } from 'vue'
import { TagBase } from '@arche-mc2/vue-ui-lib'
items.value = [{ id: 1, status: { render: () => h(TagBase, { label: 'Actif', backgroundColor: 'green' }) } }]

WidgetBase

<WidgetBase width="100%" height="250px" :is-loading="loading">
  <template #header><h3>Mon widget</h3></template>
  <template #body><p>Contenu</p></template>
  <template #footer><ButtonBase type="secondary">Voir plus</ButtonBase></template>
</WidgetBase>

| Prop | Type | Défaut | |------|------|--------| | width | string | '50%' | | height | string | '180px' | | color | string | — | | isLoading | boolean | — |

CalendarBase

<CalendarBase
  :events="events" initial-view="month" btn-today btn-view-option
  @on-select-date="range => createEvent(range)"
  @on-click-event="event => openEvent(event)"
/>

// Type event
interface CalendarEvent { id: string; title: string; start: string; end: string }

DatePicker

Principalement utilisé via InputBase avec type="date". Usage direct :

<DatePicker v-model="selectedDate" :min="minDate" :max="maxDate" />

SvgIcon

532 icônes disponibles (liste via import { iconNames } from '@arche-mc2/vue-ui-lib').

<SvgIcon icon-name="user" color="#5B4DBE" width="24" height="24" />

| Prop | Type | Défaut | |------|------|--------| | iconName | IconName | requis | | color | string | '#2C2274' | | colorHover | string | — | | height / width | string | '20' | | accessibilityTitle | string | — |

LoaderBase

<LoaderBase :size="30" />

TagBase

<TagBase label="Actif" background-color="green" />

backgroundColor : 'blue' · 'green' · 'primary' · 'secondary'

Types TypeScript exportés

import type {
  ButtonTypes, IconName, Option, Intent, Position,
  MenuItem, Header, DatagridHeader,
  FlyoutMenuItem, ToggleTheme,
  CalendarEvent, CalendarRange,
  Toast, DayInfo, WeekInfo
} from '@arche-mc2/vue-ui-lib'

Développement

yarn storybook          # Démo interactive http://localhost:6006
yarn build              # Build bibliothèque → dist/
yarn build-storybook    # Build Storybook statique

Voir storybook-docs.md pour le guide complet de contribution et de publication.