@cnamts/synapse 1.1.0 → 1.1.1

package/src/components/PageContainer/PageContainer.stories.ts

@@ -1,13 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import PageContainer from './PageContainer.vue'
-import { VCard } from 'vuetify/components'
+import { VCard, VDivider } from 'vuetify/components'
+import HeaderBar from '../HeaderBar/HeaderBar.vue'
+import FooterBar from '../FooterBar/FooterBar.vue'
 
 const meta = {
 	title: 'Composants/Layout/PageContainer',
 	component: PageContainer,
 	parameters: {
 		layout: 'fullscreen',
-		controls: { exclude: ['spacingClass', 'containerSize'] },
+		controls: { exclude: ['spacingClass', 'containerSize', 'alignCenter'] },
 	},
 	argTypes: {
 		size: {
@@ -254,3 +256,169 @@ export const WithAriaRole: Story = {
 		}
 	},
 }
+
+export const WithHeaderAndFooter: Story = {
+	parameters: {
+		layout: 'fullscreen',
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <div class="d-flex flex-column" style="min-height: 100vh; width: 100%;">
+        <PageContainer style="flex: 1; width: 100%;">
+            <template #prepend="{ width }">
+                <HeaderBar
+                    service-title="Mon espace"
+                    service-subtitle="Service de santé"
+                    :heading-level-title="1"
+                    :width="width"
+                >
+                    <template #header-side>
+                        <div class="d-flex align-center ga-3 text-primary">
+                            <div class="text-body-2">
+                                <div class="font-weight-medium">Dr. Jean Dupont</div>
+                                <div>Cabinet médical</div>
+                                <div>12 rue de la Paix, 75001 Paris</div>
+                            </div>
+                            <VDivider vertical class="mx-2" style="height: 48px;" />
+                            <div class="text-body-2">
+                                <div class="font-weight-medium">Contact</div>
+                                <div>Tel: 01 23 45 67 89</div>
+                                <div>contact@cabinet.fr</div>
+                            </div>
+                        </div>
+                    </template>
+                    <template #append>
+                        <div class="bg-primary" style="width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center;">
+                            <div class="text-white font-weight-medium">Mon Espace Personnel</div>
+                        </div>
+                    </template>
+                </HeaderBar>
+            </template>
+            
+            <h2 class="text-h5 mb-4">Bienvenue dans votre espace professionnel</h2>
+            <p>
+                Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
+                à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
+                faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
+                un texte en faux latin, qui permet de faire office de texte d'attente.
+            </p>
+            <p class="mt-4">
+                L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil que la page
+                contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée
+                par le contenu, il demeure concentré seulement sur l'aspect graphique. Ce texte a pour autre
+                avantage d'utiliser des mots de longueur variable, essayant de simuler une occupation normale.
+            </p>
+            <p class="mt-4">
+                La méthode simplifiée consiste à ne pas s'embarrasser de prétentions philosophiques,
+                et à composer un texte en français présentable. On peut aussi utiliser des générateurs
+                de texte automatiques pour obtenir du contenu aléatoire, mais il faut veiller à ce que
+                le résultat soit cohérent et agréable à lire.
+            </p>
+            <p class="mt-4 mb-16">
+                Ce contenu supplémentaire permet de bien visualiser l'espacement entre le contenu principal
+                et le pied de page. Il est important de prévoir suffisamment d'espace pour que la mise en page
+                reste harmonieuse et que le contenu soit facilement lisible. Le texte d'attente peut être remplacé
+                par du texte réel dès que celui-ci est disponible.
+            </p>
+            
+            <template #append="{ width }">
+                <FooterBar
+                    :width="width"
+                    version="3.0.0"
+                    a11y-compliance="partiellement-conforme"
+                />
+            </template>
+        </PageContainer>
+    </div>
+</template>
+                `,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+    import { PageContainer, HeaderBar, FooterBar } from '@cnamts/synapse'
+    import { VDivider } from 'vuetify/components'
+</script>
+                `,
+			},
+		],
+	},
+	render: (args) => {
+		return {
+			components: { PageContainer, HeaderBar, FooterBar, VDivider },
+			setup() {
+				return { args }
+			},
+			template: `
+                <div class="d-flex flex-column" style="min-height: 100vh; width: 100%;">
+                    <PageContainer :size="args.size" :spacing="args.spacing" :color="args.color" style="flex: 1; width: 100%;">
+                        <template #prepend="{ width }">
+                            <HeaderBar
+                                service-title="Mon espace"
+                                service-subtitle="Service de santé"
+                                :heading-level-title="1"
+                                :width="width"
+                            >
+                                <template #header-side v-if="args.size !== 'xs' && args.size !== 'sm'">
+                                    <div class="d-flex align-center ga-3 text-primary mr-4">
+                                        <div class="text-body-2">
+                                            <div class="font-weight-medium">Dr. Jean Dupont</div>
+                                            <div>Cabinet médical</div>
+                                            <div>12 rue de la Paix, 75001 Paris</div>
+                                        </div>
+                                        <VDivider vertical class="mx-2" style="height: 48px;" />
+                                        <div class="text-body-2">
+                                            <div class="font-weight-medium">Contact</div>
+                                            <div>Tel: 01 23 45 67 89</div>
+                                            <div>contact@cabinet.fr</div>
+                                        </div>
+                                    </div>
+                                </template>
+                                <template #append>
+                                    <div class="bg-primary" style="width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center;">
+                                        <div class="text-white font-weight-medium">Mon Espace Personnel</div>
+                                    </div>
+                                </template>
+                            </HeaderBar>
+                        </template>
+                        
+                        <h2 class="text-h5 mb-4">Bienvenue dans votre espace professionnel</h2>
+                        <p>
+                            Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
+                            à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
+                            faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
+                            un texte en faux latin, qui permet de faire office de texte d'attente.
+                        </p>
+                        <p class="mt-4">
+                            L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil que la page
+                            contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée
+                            par le contenu, il demeure concentré seulement sur l'aspect graphique. Ce texte a pour autre
+                            avantage d'utiliser des mots de longueur variable, essayant de simuler une occupation normale.
+                        </p>
+                        <p class="mt-4">
+                            La méthode simplifiée consiste à ne pas s'embarrasser de prétentions philosophiques,
+                            et à composer un texte en français présentable. On peut aussi utiliser des générateurs
+                            de texte automatiques pour obtenir du contenu aléatoire, mais il faut veiller à ce que
+                            le résultat soit cohérent et agréable à lire.
+                        </p>
+                        <p class="mt-4 mb-16">
+                            Ce contenu supplémentaire permet de bien visualiser l'espacement entre le contenu principal
+                            et le pied de page. Il est important de prévoir suffisamment d'espace pour que la mise en page
+                            reste harmonieuse et que le contenu soit facilement lisible. Le texte d'attente peut être remplacé
+                            par du texte réel dès que celui-ci est disponible.
+                        </p>
+                        
+                        <template #append="{ width }">
+                            <FooterBar
+                                :width="width"
+                                version="3.0.0"
+                                a11y-compliance="partiellement-conforme"
+                            />
+                        </template>
+                    </PageContainer>
+                </div>
+            `,
+		}
+	},
+}

package/src/components/PageContainer/PageContainer.vue

@@ -10,6 +10,7 @@
 		uniqueId?: string
 		role?: AriaRole
 		ariaLabelledby?: string
+		alignCenter?: boolean
 	}>(), {
 		size: undefined,
 		spacing: undefined,
@@ -17,6 +18,7 @@
 		uniqueId: undefined,
 		role: undefined,
 		ariaLabelledby: undefined,
+		alignCenter: false,
 	})
 
 	const display = useDisplay()
@@ -53,6 +55,8 @@
 		}
 	})
 
+	const containerWidth = computed(() => `${containerSize.value}px`)
+
 	defineExpose({
 		spacingClass,
 		containerSize,
@@ -62,17 +66,54 @@
 <template>
 	<div
 		:id="uniqueId ? `${uniqueId}-container` : undefined"
-		:class="[spacingClass, 'vd-page-container d-flex justify-center']"
+		:class="['vd-page-container d-flex flex-column', { 'align-center': alignCenter }]"
 		:role="role"
 		:aria-labelledby="ariaLabelledby"
 	>
-		<VSheet
-			:id="uniqueId ? `${uniqueId}-content` : undefined"
-			:width="containerSize"
-			:color="color"
+		<!-- Slot prepend avec wrapper de largeur fixe -->
+		<div
+			v-if="$slots.prepend"
+			class="vd-page-container__slot-wrapper"
+		>
+			<div
+				class="vd-page-container__slot-content"
+				:style="{ width: containerWidth }"
+			>
+				<slot
+					name="prepend"
+					:width="containerWidth"
+				/>
+			</div>
+		</div>
+
+		<div
+			:class="spacingClass"
+			class="vd-page-container__content"
 		>
-			<slot />
-		</VSheet>
+			<VSheet
+				:id="uniqueId ? `${uniqueId}-content` : undefined"
+				:width="containerSize"
+				:color="color"
+			>
+				<slot />
+			</VSheet>
+		</div>
+
+		<!-- Slot append avec wrapper de largeur fixe -->
+		<div
+			v-if="$slots.append"
+			class="vd-page-container__slot-wrapper"
+		>
+			<div
+				class="vd-page-container__slot-content"
+				:style="{ width: containerWidth }"
+			>
+				<slot
+					name="append"
+					:width="containerWidth"
+				/>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -80,7 +121,21 @@
 .vd-page-container {
 	flex: 1;
 	width: 100%;
-	max-width: 1712px;
+}
+
+.vd-page-container__content {
+	display: flex;
+	justify-content: center;
+	width: 100%;
+}
+
+.vd-page-container__slot-wrapper {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+}
+
+.vd-page-container__slot-content {
 	margin: 0 auto;
 }
 </style>

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

@@ -3,18 +3,26 @@
 exports[`PageContainer > render correctly 1`] = `
 <div class="
   d-flex
-  justify-center
-  px-14
-  py-10
+  flex-column
   vd-page-container
 ">
-  <div
-    class="
-      bg-transparent
-      v-sheet
-      v-theme--light
-    "
-    style="width: 800px;"
-  ></div>
+  <!-- Slot prepend avec wrapper de largeur fixe -->
+  <!-- v-if -->
+  <div class="
+    px-14
+    py-10
+    vd-page-container__content
+  ">
+    <div
+      class="
+        bg-transparent
+        v-sheet
+        v-theme--light
+      "
+      style="width: 800px;"
+    ></div>
+  </div>
+  <!-- Slot append avec wrapper de largeur fixe -->
+  <!-- v-if -->
 </div>
 `;

package/src/components/PaginatedTable/PaginatedTable.mdx

@@ -28,7 +28,6 @@ import * as PaginatedTableStories from "./PaginatedTable.stories.ts";
 		itemsPerPage: 4,
 		sortBy: [{ key: 'calories', order: 'desc' }],
 	})
-import '../../stories/styles/shared.css';
 
 	const headers = reactive([
 		{ text: 'Dessert (100g serving)', value: 'name' },

package/src/components/PeriodField/PeriodField.mdx

@@ -23,7 +23,6 @@ import * as PeriodFieldStories from "./PeriodField.stories.ts";
 	import { PeriodField } from '@cnamts/synapse'
 
 	const selectedPeriod = ref({ from: null, to: null })
-import '../../stories/styles/shared.css';
 </script>
 
 <template>

package/src/components/PhoneField/PhoneField.mdx

@@ -23,14 +23,13 @@ import { PhoneField } from '@cnamts/synapse'
 import { ref } from 'vue'
 
 const value = ref('')
-import '../../stories/styles/shared.css';
 
 const handleChange = (newValue) => {
     console.log('Value changed:', newValue)
 }
 const customIndicatifs = ref([
-    { code: '+99', country: 'Utopia', abbreviation: 'UT', mask: '## ## ## ##', phoneLength: 8 },
-    { code: '+98', country: 'Paradise', abbreviation: 'PA', mask: '## ## ## ##', phoneLength: 18 },
+    { code: '+99', country: 'Utopia', abbreviation: 'UT', mask: '## ## ## ##' },
+    { code: '+98', country: 'Paradise', abbreviation: 'PA', mask: '## ## ## ##' },
 ])
 </script>