@cnamts/synapse 0.0.8-alpha → 0.0.10-alpha

package/src/components/SelectBtnField/tests/__snapshots__/SelectBtnField.spec.ts.snap

@@ -0,0 +1,125 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SelectBtnField > display correctly in dark mode with an error 1`] = `
+"<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
+  <div class="v-application__wrap">
+    <div>
+      <div data-v-b3dd75c6="" class="select-btn-field">
+        <ul data-v-b3dd75c6="" class="v-btn-group v-theme--dark v-btn-group--density-default v-btn-toggle select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
+          <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--dark v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test1"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 1</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+              <!---->
+              <!---->
+            </button></li>
+          <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--dark v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test2"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 2</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+              <!---->
+              <!---->
+            </button></li>
+        </ul>
+        <p data-v-b3dd75c6="" class="theme--dark v-messages text-error px-3 mt-2 mb-0 opacity-100">Test</p>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`SelectBtnField > display correctly with an error 1`] = `
+"<div data-v-b3dd75c6="" class="form-input select-btn-field">
+  <ul data-v-b3dd75c6="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle d-flex flex-column select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test2"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 2</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center text-error justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test3"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 3</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+  </ul>
+  <p data-v-b3dd75c6="" class="theme--light v-messages text-error px-3 mt-2 mb-0 opacity-100">Test</p>
+</div>"
+`;
+
+exports[`SelectBtnField > display correctly with in dark mode with an hint 1`] = `
+"<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
+  <div class="v-application__wrap">
+    <div>
+      <div data-v-b3dd75c6="" class="select-btn-field">
+        <ul data-v-b3dd75c6="" class="v-btn-group v-theme--dark v-btn-group--density-default v-btn-toggle select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
+          <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--dark v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test1"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 1</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+              <!---->
+              <!---->
+            </button></li>
+          <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--dark v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test2"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 2</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--dark v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+              <!---->
+              <!---->
+            </button></li>
+        </ul>
+        <p data-v-b3dd75c6="" class="theme--dark v-messages px-3 mt-2 mb-0 opacity-100">Test</p>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`SelectBtnField > render correctly in multiple mode 1`] = `
+"<div data-v-b3dd75c6="" class="form-input select-btn-field">
+  <ul data-v-b3dd75c6="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle d-flex flex-column select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value=""><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 2</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test3"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 3</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+  </ul>
+  <p data-v-b3dd75c6="" class="theme--light v-messages px-3 mt-2 mb-0 opacity-100">Test</p>
+</div>"
+`;
+
+exports[`SelectBtnField > renders correctly 1`] = `
+"<div data-v-b3dd75c6="" class="form-input select-btn-field">
+  <ul data-v-b3dd75c6="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle d-flex flex-column select-btn-field-toggle d-flex flex-wrap text-primary"></ul>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`SelectBtnField > renders correctly with props 1`] = `
+"<div data-v-b3dd75c6="" class="form-input select-btn-field">
+  <ul data-v-b3dd75c6="" class="v-btn-group v-theme--light v-btn-group--density-default v-btn-toggle d-flex flex-column select-btn-field-toggle d-flex flex-wrap text-primary" aria-label="Test">
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value=""><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 2</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+    <li data-v-b3dd75c6="" class="select-list-item"><button data-v-b3dd75c6="" type="button" class="v-btn v-btn--flat v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-outlined py-2 d-flex align-items-center justify-start" style="height: auto; min-height: 40px;" activeclass="text-white" aria-expanded="true" label="" value="test3"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><span data-v-b3dd75c6="" class="text-body-1">Test 3</span><i data-v-b3dd75c6="" class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white flex-shrink-0 ml-1" style="visibility: hidden;" role="img" aria-hidden="true" aria-label="Sélectionné"></i></span>
+        <!---->
+        <!---->
+      </button></li>
+  </ul>
+  <p data-v-b3dd75c6="" class="theme--light v-messages px-3 mt-2 mb-0 opacity-100">Test</p>
+</div>"
+`;

package/src/components/SelectBtnField/types.d.ts

@@ -0,0 +1,11 @@
+export type SelectBtnValue =
+	| string
+	| number
+	| Array<string | number | null | undefined>
+	| null
+
+export interface SelectBtnItem {
+	text: string
+	value: string | number
+	unique?: boolean
+}

package/src/components/SyAlert/SyAlert.vue

@@ -32,7 +32,10 @@
 		}[props.type]
 	})
 
+	const emit = defineEmits(['click:close'])
+
 	function dismissAlert() {
+		emit('click:close')
 		show.value = false
 	}
 
@@ -45,12 +48,12 @@
 <template>
 	<VAlert
 		v-model="show"
-		:type
-		:closable
-		:variant
-		:class="`alert alert--${type}`"
-		:color="type"
-		:border="variant === 'tonal' ? 'start' : false"
+		:type="props.type"
+		:closable="props.closable"
+		:variant="props.variant"
+		:class="`alert alert--${props.type}`"
+		:color="props.type"
+		:border="props.variant === 'tonal' ? 'start' : false"
 	>
 		<template #prepend>
 			<VIcon
@@ -68,11 +71,11 @@
 		</template>
 
 		<template
-			v-if="closable"
+			v-if="props.closable"
 			#close
 		>
 			<VBtn
-				:color="variant === 'outlined' ? undefined : 'primary'"
+				:color="props.variant === 'outlined' ? undefined : 'primary'"
 				:ripple="false"
 				variant="text"
 				width="auto"
@@ -251,5 +254,4 @@
 		)
 	);
 }
-
 </style>

package/src/components/TableToolbar/TableToolbar.mdx

@@ -0,0 +1,130 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+
+import * as TableToolbarStories from './TableToolbar.stories';
+
+<Meta of={TableToolbarStories} />
+
+# TableToolbar
+
+Le composant `TableToolbar` est utilisé pour afficher une barre d'outils pour les tableaux.
+
+<Canvas of={TableToolbarStories.Default}  />
+
+# API
+
+<Controls of={TableToolbarStories.Default} />
+
+# Exemples
+
+## Bouton `Ajouter`
+
+Vous pouvez afficher un bouton permettant une action d’ajout en utilisant la prop `show-add-button`.
+
+<Canvas of={TableToolbarStories.AddButton} />
+
+## Nombre de lignes filtrées
+
+Vous pouvez afficher le nombre de lignes filtrées par rapport au nombre total en utilisant la prop `nb-filtered`.
+
+<Canvas of={TableToolbarStories.NbFiltered} />
+
+## Mode chargement
+
+Vous pouvez afficher le composant en mode chargement en utilisant la prop `loading`, cela va désactiver les éléments interactifs.
+
+<Canvas of={TableToolbarStories.Loading} />
+
+## Textes par défaut
+
+Vous pouvez personnaliser les différents labels en utilisant les props `addButtonLabel` et `searchLabel`.
+
+<Canvas of={TableToolbarStories.Labels} />
+
+## Slots
+
+Vous pouvez utiliser les slots `search-left` ou `search-right` pour ajouter du contenu à gauche ou à droite du champ de recherche.
+
+<Canvas
+	of={TableToolbarStories.Slots}
+	source={{
+		language: 'html',
+		format: 'dedent',
+		code: `
+		<script setup lang="ts">
+			import { TableToolbar } from '@cnamts/synapse'
+			import { VDataTable } from 'vuetify/components'
+			import { ref } from 'vue'
+
+			const headers = [
+				{
+					title: 'Nom',
+					value: 'lastname',
+				},
+				{
+					title: 'Prénom',
+					value: 'firstname',
+				},
+				{
+					title: 'Email',
+					value: 'email',
+				},
+			]
+
+			const items = [
+				{
+					firstname: 'Virginie',
+					lastname: 'Beauchesne',
+					email: 'virginie.beauchesne@example.com',
+				},
+				{
+					firstname: 'Étienne',
+					lastname: 'Salois',
+					email: 'etienne.salois@example.com',
+				},
+			]
+
+			const vuetifyOptions = {
+				toolbar: {
+					class: 'py-2',
+				},
+				textField: {
+					variant: 'outlined',
+					density: 'compact',
+				},
+				addBtn: {
+					height: '40px',
+					color: '#663399',
+				},
+				addIcon: {
+					class: 'd-none',
+				},
+			}
+
+			const search = ref('')
+		</script>
+
+		<template>
+			<VDataTable
+				:headers="headers"
+				:items="items"
+				hide-default-footer
+			>
+				<template #top>
+					<TableToolbar
+						v-model="search"
+						:nb-total="10"
+						show-add-button
+						:vuetifyOptions
+					/>
+				</template>
+			</VDataTable>
+		</template>
+		`
+	}}
+/>
+
+## Personnalisation
+
+Vous pouvez personnaliser les composants Vuetify utilisés par ce composant en utilisant la prop vuetify-options.
+
+<Canvas of={TableToolbarStories.Customization} />