@cnamts/synapse 0.0.6-alpha → 0.0.7-alpha

package/src/components/HeaderNavigationBar/HeaderNavigationBar.stories.ts

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 
-import HeaderNavbar from './HeaderNavigationBar.vue'
+import HeaderNavigationBar from './HeaderNavigationBar.vue'
 import { VBtn } from 'vuetify/components'
 import BackBtn from '../BackBtn/BackBtn.vue'
 import { fn } from '@storybook/test'
 
 const meta = {
 	title: 'Composants/Structure/HeaderBar/HeaderNavigationBar',
-	component: HeaderNavbar,
+	component: HeaderNavigationBar,
 	parameters: {
 		layout: 'fullscreen',
 	},
@@ -248,7 +248,7 @@ const meta = {
 			},
 		},
 	},
-} satisfies Meta<typeof HeaderNavbar>
+} satisfies Meta<typeof HeaderNavigationBar>
 
 export default meta
 
@@ -272,7 +272,7 @@ export const Default: Story = {
 			{
 				name: 'Template',
 				code: `
-<HeaderNavbar
+<HeaderNavigationBar
 	:items="[
 		{ label: 'Home', href: '' },
 		{ label: 'About', href: '' },
@@ -280,6 +280,14 @@ export const Default: Story = {
 />
 				`,
 			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { HeaderNavigationBar } from '@cnamts/synapse'
+				</script>
+				`,
+			},
 		],
 	},
 }
@@ -313,7 +321,7 @@ export const WithScroll: Story = {
 			{
 				name: 'Template',
 				code: `<template>
-<HeaderNavbar
+<HeaderNavigationBar
 	:items="[
 		{ label: 'Home', href: '' },
 		{ label: 'About', href: '' },
@@ -325,6 +333,14 @@ export const WithScroll: Story = {
 </template>
 				`,
 			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { HeaderNavigationBar } from '@cnamts/synapse'
+				</script>
+				`,
+			},
 		],
 	},
 }
@@ -371,7 +387,7 @@ export const WithManyItems: Story = {
 			{
 				name: 'Template',
 				code: `
-<HeaderNavbar
+<HeaderNavigationBar
 	:items="[
 		{
 				label: 'Home',
@@ -409,6 +425,14 @@ export const WithManyItems: Story = {
 />
 				`,
 			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { HeaderNavigationBar } from '@cnamts/synapse'
+				</script>
+				`,
+			},
 		],
 	},
 }
@@ -419,12 +443,12 @@ export const WithSlots: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { HeaderNavbar, VBtn, BackBtn },
+			components: { HeaderNavigationBar, VBtn, BackBtn },
 			setup() {
 				return { args }
 			},
 			template: `
-				<HeaderNavbar v-bind="args">
+				<HeaderNavigationBar v-bind="args">
 					<template #logo-brand-content>
 						<svg
 							width="22"
@@ -468,7 +492,7 @@ export const WithSlots: Story = {
 							Besoin d’aide ?
 						</VBtn>
 					</template>
-				</HeaderNavbar>
+				</HeaderNavigationBar>
 			`,
 		}
 	},
@@ -477,7 +501,7 @@ export const WithSlots: Story = {
 			{
 				name: 'Template',
 				code: `<template>
-	<HeaderNavbar>
+	<HeaderNavigationBar>
 		<template #logo-brand-content>
 			<svg
 				width="22"
@@ -521,10 +545,18 @@ export const WithSlots: Story = {
 				Besoin d’aide ?
 			</VBtn>
 		</template>
-	</HeaderNavbar>
+	</HeaderNavigationBar>
 </template>
 				`,
 			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { HeaderNavigationBar } from '@cnamts/synapse'
+				</script>
+				`,
+			},
 		],
 	},
 }
@@ -535,12 +567,12 @@ export const WithLogoSlot: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { HeaderNavbar, VBtn, BackBtn },
+			components: { HeaderNavigationBar, VBtn, BackBtn },
 			setup() {
 				return { args }
 			},
 			template: `
-				<HeaderNavbar v-bind="args">
+				<HeaderNavigationBar v-bind="args">
 					<template #logo-brand-content>
 						<svg
 							width="22"
@@ -561,7 +593,7 @@ export const WithLogoSlot: Story = {
 							height="52px"
 						/>
 					</template>
-				</HeaderNavbar>
+				</HeaderNavigationBar>
 			`,
 		}
 	},
@@ -570,7 +602,7 @@ export const WithLogoSlot: Story = {
 			{
 				name: 'Template',
 				code: `
-<HeaderNavbar>
+<HeaderNavigationBar>
 	<template #logo-brand-content>
 		<svg
 			width="22"
@@ -591,7 +623,15 @@ export const WithLogoSlot: Story = {
 			height="52px"
 		/>
 	</template>
-</HeaderNavbar>
+</HeaderNavigationBar>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { HeaderNavigationBar } from '@cnamts/synapse'
+				</script>
 				`,
 			},
 		],
@@ -605,19 +645,19 @@ export const WithNavigationBarPrependSlot: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { HeaderNavbar, VBtn, BackBtn },
+			components: { HeaderNavigationBar, VBtn, BackBtn },
 			setup() {
 				return { args }
 			},
 			template: `
-				<HeaderNavbar v-bind="args" v-model="args.burgerMenu">
+				<HeaderNavigationBar v-bind="args" v-model="args.burgerMenu">
 					<template #navigation-bar-prepend>
 						<BackBtn
 							:dark="true"
 							class="mr-4"
 						/>
 					</template>
-				</HeaderNavbar>
+				</HeaderNavigationBar>
 			`,
 		}
 	},
@@ -626,14 +666,22 @@ export const WithNavigationBarPrependSlot: Story = {
 			{
 				name: 'Template',
 				code: `
-<HeaderNavbar>
+<HeaderNavigationBar>
 	<template #navigation-bar-prepend>
 		<BackBtn
 			:dark="true"
 			class="mr-4"
 		/>
 	</template>
-</HeaderNavbar>
+</HeaderNavigationBar>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { HeaderNavigationBar } from '@cnamts/synapse'
+				</script>
 				`,
 			},
 		],
@@ -646,12 +694,12 @@ export const WithNavigationBarAppendSlot: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { HeaderNavbar, VBtn, BackBtn },
+			components: { HeaderNavigationBar, VBtn, BackBtn },
 			setup() {
 				return { args }
 			},
 			template: `
-				<HeaderNavbar v-bind="args">
+				<HeaderNavigationBar v-bind="args">
 					<template #navigation-bar-append>
 						<VBtn
 							variant="tonal"
@@ -660,7 +708,7 @@ export const WithNavigationBarAppendSlot: Story = {
 							Besoin d’aide ?
 						</VBtn>
 					</template>
-				</HeaderNavbar>
+				</HeaderNavigationBar>
 			`,
 		}
 	},
@@ -670,7 +718,7 @@ export const WithNavigationBarAppendSlot: Story = {
 				name: 'Template',
 				code: `
 <template>
-	<HeaderNavbar>
+	<HeaderNavigationBar>
 		<template #navigation-bar-append>
 			<VBtn
 				variant="tonal"
@@ -679,10 +727,18 @@ export const WithNavigationBarAppendSlot: Story = {
 				Besoin d’aide ?
 			</VBtn>
 		</template>
-	</HeaderNavbar>
+	</HeaderNavigationBar>
 </template>
 				`,
 			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { HeaderNavigationBar } from '@cnamts/synapse'
+				</script>
+				`,
+			},
 		],
 	},
 }
@@ -695,12 +751,12 @@ export const WithNavigationMenuAppendSlot: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { HeaderNavbar, VBtn, BackBtn },
+			components: { HeaderNavigationBar, VBtn, BackBtn },
 			setup() {
 				return { args }
 			},
 			template: `
-				<HeaderNavbar
+				<HeaderNavigationBar
 					v-bind="args"
 					v-model="args.burgerMenu"
 					@update:burgerMenu="()=>{
@@ -717,7 +773,7 @@ export const WithNavigationMenuAppendSlot: Story = {
 							Besoin d’aide ?
 						</VBtn>
 					</template>
-				</HeaderNavbar>
+				</HeaderNavigationBar>
 				<div style="height: 200px;"></div>
 			`,
 		}
@@ -728,7 +784,7 @@ export const WithNavigationMenuAppendSlot: Story = {
 				name: 'Template',
 				code: `
 <template>
-	<HeaderNavbar
+	<HeaderNavigationBar
 		maxHorizontalMenuItems="0"
 		:items="[
 			{ label: 'Home', href: '' },
@@ -744,10 +800,18 @@ export const WithNavigationMenuAppendSlot: Story = {
 				Besoin d’aide ?
 			</VBtn>
 		</template>
-	</HeaderNavbar>
+	</HeaderNavigationBar>
 </template>
 				`,
 			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { HeaderNavigationBar } from '@cnamts/synapse'
+				</script>
+				`,
+			},
 		],
 	},
 }
@@ -766,7 +830,7 @@ export const WithVuetifyOptions: Story = {
 			{
 				name: 'Template',
 				code: `
-<HeaderNavbar
+<HeaderNavigationBar
 	:items="[
 		{ label: 'Home', href: '' },
 		{ label: 'About', href: '' },
@@ -779,6 +843,14 @@ export const WithVuetifyOptions: Story = {
 />
 				`,
 			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { HeaderNavigationBar } from '@cnamts/synapse'
+				</script>
+				`,
+			},
 		],
 	},
 }

package/src/components/HeaderToolbar/HeaderToolbar.vue

@@ -347,6 +347,20 @@
         font-size: 12px;
       }
     }
+
+    :deep(.sy-input-select) {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      @media (max-width: 768px) {
+        font-size: 12px;
+        span {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
   }
 
   #left-menu {
@@ -368,11 +382,19 @@
     }
 
     li:nth-child(2) {
-      min-width: 260px;
       z-index: 2;
+      max-height: 44px;
+      min-width: 260px;
       @media (max-width: 768px) {
+        max-height: 38px;
         min-width: 152px;
       }
+      a {
+        max-height: 44px;
+        @media (max-width: 768px) {
+          max-height: 38px;
+        }
+      }
     }
 
     li:nth-child(3) {

package/src/components/NirField/NirField.mdx

@@ -45,13 +45,10 @@ Le composant `NirField` est utilisé pour afficher un champ de saisie de numéro
                     class="mx-16 my-6"
                     @submit.prevent="handleSubmit"
                 >
-                    <Nirfield
+                    <NirField
                         ref="nirFieldRef"
                         v-model="model"
                         :display-key="true"
-                        key-tooltip="message d'aide pour la clef"
-                        nir-tooltip="message d'aide pour le NIR"
-                        outlined
                         required
                     />
                     <button type="submit">

package/src/components/NirField/NirField.stories.ts

@@ -90,6 +90,16 @@ const meta = {
 				},
 			},
 		},
+		showSuccessMessages: {
+			description: 'Indique si les messages de succès sont affichés.',
+			control: 'boolean',
+			default: false,
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
 		customNumberRules: {
 			description: 'Règles de validation personnalisées pour le champ numéro.',
 			control: 'object',
@@ -131,8 +141,7 @@ export const Default: Story = {
 				code: `
     <template>
      <NirField
-      modelValue=""
-      :outlined="true"
+      v-model="value"
       :required="false"
       numberLabel="Numéro de sécurité sociale"
       keyLabel="Clé"
@@ -146,6 +155,9 @@ export const Default: Story = {
 				code: `
     <script setup lang="ts">
      import NirField from './NirField.vue'
+     import { ref } from 'vue'
+     
+     const value = ref('')
     </script>
     `,
 			},
@@ -166,8 +178,7 @@ export const Required: Story = {
 				code: `
     <template>
      <NirField
-      modelValue=""
-      :outlined="true"
+      v-model="value"
       :required="true"
       numberLabel="Numéro de sécurité sociale"
       keyLabel="Clé"
@@ -181,6 +192,9 @@ export const Required: Story = {
 				code: `
     <script setup lang="ts">
      import NirField from './NirField.vue'
+     import { ref } from 'vue'
+     
+     const value = ref('')
     </script>
     `,
 			},
@@ -201,8 +215,7 @@ export const WithoutKey: Story = {
 				code: `
     <template>
      <NirField
-      modelValue=""
-      :outlined="true"
+      v-model="value"
       :required="false"
       numberLabel="Numéro de sécurité sociale"
       keyLabel="Clé"
@@ -216,6 +229,46 @@ export const WithoutKey: Story = {
 				code: `
     <script setup lang="ts">
      import NirField from './NirField.vue'
+     import { ref } from 'vue'
+     
+     const value = ref('')
+    </script>
+    `,
+			},
+		],
+	},
+}
+
+export const WithSuccessMessages: Story = {
+	args: {
+		...Default.args,
+		showSuccessMessages: true,
+	},
+	parameters: {
+		...Default.parameters,
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+    <template>
+     <NirField
+      v-model="value"
+      :required="false"
+      numberLabel="Numéro de sécurité sociale"
+      keyLabel="Clé"
+      :showSuccessMessages="true"
+     />
+    </template>
+    `,
+			},
+			{
+				name: 'Script',
+				code: `
+    <script setup lang="ts">
+     import NirField from './NirField.vue'
+     import { ref } from 'vue'
+     
+     const value = ref('')
     </script>
     `,
 			},
@@ -256,8 +309,7 @@ export const CustomRules: Story = {
 				code: `
     <template>
      <NirField
-      modelValue=""
-      :outlined="true"
+      v-model="value"
       :required="false"
       numberLabel="Numéro de sécurité sociale"
       keyLabel="Clé"
@@ -273,6 +325,9 @@ export const CustomRules: Story = {
 				code: `
     <script setup lang="ts">
      import NirField from './NirField.vue'
+     import { ref } from 'vue'
+     
+     const value = ref('')
     </script>
     `,
 			},
@@ -293,8 +348,7 @@ export const WithNumberTooltip: Story = {
 				code: `
     <template>
      <NirField
-      modelValue=""
-      :outlined="true"
+      v-model="value"
       :required="false"
       numberLabel="Numéro de sécurité sociale"
       keyLabel="Clé"
@@ -332,8 +386,7 @@ export const WithKeyTooltip: Story = {
 				code: `
     <template>
      <NirField
-      modelValue=""
-      :outlined="true"
+      v-model="value"
       :required="false"
       numberLabel="Numéro de sécurité sociale"
       keyLabel="Clé"

package/src/components/NirField/NirField.vue

@@ -20,6 +20,7 @@
 		numberLabel?: string
 		keyLabel?: string
 		displayKey?: boolean
+		showSuccessMessages?: boolean
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 		customNumberRules?: any
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
@@ -33,6 +34,7 @@
 		numberLabel: 'Numéro de sécurité sociale',
 		keyLabel: 'Clé',
 		displayKey: true,
+		showSuccessMessages: false,
 		customNumberRules: [],
 		customKeyRules: [],
 	})
@@ -239,18 +241,19 @@
 		validateOnSubmit,
 	})
 </script>
+
 <template>
 	<div class="d-flex align-start">
 		<v-input
 			ref="vInput"
 			:class="{
-				'v-messages__message--success': successes.length > 0,
+				'v-messages__message--success': successes.length > 0 && props.showSuccessMessages,
 				'v-messages__message--error': errors.length > 0
 			}"
 			:error-messages="errors"
 			:label="numberLabel"
 			:max-errors="3"
-			:messages="successes"
+			:messages="props.showSuccessMessages ? successes : []"
 			:model-value="[numberValue, keyValue]"
 			class="vd-nir-field__fields-wrapper multi-line"
 			validate-on="blur lazy"

package/src/components/NirField/tests/NirField.spec.ts

@@ -17,6 +17,7 @@ describe('NirField.vue', () => {
 			props: {
 				modelValue: '',
 				required: true,
+				showSuccessMessages: true,
 			},
 		})
 	})

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

@@ -11,12 +11,12 @@ const meta = {
 	},
 	argTypes: {
 		size: {
-			options: ['xl', 'l', 'm', 's'],
+			options: ['xl', 'lg', 'md', 'sm', 'xs'],
 			control: { type: 'select' },
-			default: 'xl',
+			default: undefined,
 		},
 		spacing: {
-			options: ['xs', 'sm', 'md', 'lg', 'xl'],
+			options: ['xl', 'lg', 'md', 'sm', 'xs'],
 			control: { type: 'select' },
 			default: undefined,
 		},
@@ -77,7 +77,7 @@ export const Size: Story = {
 			{
 				name: 'Template',
 				code: `<template>
-	<PageContainer size="s">
+	<PageContainer size="sm">
 		Contenu de la page
 	</PageContainer>
 </template>
@@ -94,7 +94,7 @@ export const Size: Story = {
 	},
 	args: {
 		default: 'Contenu de la page',
-		size: 's',
+		size: 'sm',
 	},
 	render: (args) => {
 		return {

package/src/components/PageContainer/PageContainer.vue

@@ -3,11 +3,11 @@
 	import { useDisplay } from 'vuetify'
 
 	const props = withDefaults(defineProps<{
-		size?: 'xl' | 'l' | 'm' | 's'
-		spacing?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+		size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+		spacing?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
 		color?: string
 	}>(), {
-		size: 'xl',
+		size: undefined,
 		spacing: undefined,
 		color: 'transparent',
 	})
@@ -38,7 +38,12 @@
 	})
 
 	const containerSize = computed(() => {
-		return sizeMapping[display.name.value] ?? sizeMapping[props.size ?? 'xl']
+		if (props.size) {
+			return sizeMapping[props.size]
+		}
+		else {
+			return sizeMapping[display.name.value] ?? sizeMapping['xl']
+		}
 	})
 
 	defineExpose({

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

@@ -44,7 +44,7 @@ describe('PageContainer', () => {
 	it('containerSize computed property', async () => {
 		const wrapper = mount(PageContainer, {
 			props: {
-				size: 'l',
+				size: 'md',
 			},
 			global: {
 				plugins: [vuetify],