@cnamts/synapse 0.0.14-alpha → 0.0.15-alpha

package/src/components/PaginatedTable/PaginatedTable.stories.ts

@@ -56,7 +56,7 @@ const meta = {
 			control: { type: 'number' },
 		},
 		suffix: {
-			description: 'Suffixe pour la pagination',
+			description: 'Suffixe permettant de gérer individuellement le stockage des options d’un tableau d’une page à l’autre. S’il n’est pas renseigné, le stockage s’effectue globalement pour tous les tableaux.',
 			control: { type: 'text' },
 		},
 		itemsPerPage: {
@@ -133,12 +133,12 @@ export const Default: Story = {
 							email: 'thierry.bobu@example.com',
 						},
 						{
-                            firstname: 'Bernadette',
+							firstname: 'Bernadette',
 							lastname: 'Langelier',
 							email: 'bernadette.langelier@exemple.com'
 						},
 						{
-                            firstname: 'Agate',
+							firstname: 'Agate',
 							lastname: 'Roy',
 							email: 'agate.roy@exemple.com'
 						}
@@ -207,14 +207,14 @@ export const Default: Story = {
 				return { args }
 			},
 			template: `
-              <div class="pa-4">
-                <PaginatedTable
+				<div class="pa-4">
+				<PaginatedTable
 					v-model:options="args.options"
 					:items="args.items"
 					:headers="args.headers"
 				/>
-              </div>
-            `,
+				</div>
+			`,
 		}
 	},
 }
@@ -255,7 +255,7 @@ export const SortBy: Story = {
 							key: 'firstname',
 						},
 						{
-                            title: 'Email',
+							title: 'Email',
 							value: 'email',
 						},
 					])
@@ -282,12 +282,12 @@ export const SortBy: Story = {
 							email: 'thierry.bobu@example.com',
 						},
 						{
-                            firstname: 'Bernadette',
+							firstname: 'Bernadette',
 							lastname: 'Langelier',
 							email: 'bernadette.langelier@exemple.com'
 						},
 						{
-                            firstname: 'Agate',
+							firstname: 'Agate',
 							lastname: 'Roy',
 							email: 'agate.roy@exemple.com'
 						}
@@ -356,14 +356,14 @@ export const SortBy: Story = {
 				return { args }
 			},
 			template: `
-              <div class="pa-4">
-                <PaginatedTable
+			<div class="pa-4">
+				<PaginatedTable
 					v-model:options="args.options"
 					:items="args.items"
 					:headers="args.headers"
 				/>
-              </div>
-            `,
+			</div>
+			`,
 		}
 	},
 }
@@ -574,8 +574,8 @@ export const TableServer: Story = {
 				return { args, headers, users, options, state, fetchData, totalUsers, StateEnum }
 			},
 			template: `
-              <div class="pa-4">
-                <PaginatedTable
+			<div class="pa-4">
+				<PaginatedTable
 					v-model:options="options"
 					:items="users"
 					:headers="headers"
@@ -584,8 +584,134 @@ export const TableServer: Story = {
 					suffix="api-example"
 					@update:options="fetchData"
 				/>
-              </div>
-            `,
+			</div>
+			`,
+		}
+	},
+}
+
+export const ManyTables: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div class="pa-4">
+						<PaginatedTable
+							suffix="table1"
+							:items="itemsTable1"
+						/>
+						<hr class="my-4">
+						<PaginatedTable
+							suffix="table2"
+							:items="itemsTable2"
+						/>
+					</div>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { PaginatedTable } from '@cnamts/synapse'
+
+	const itemsTable1 = ref([
+		{
+			id: 1,
+			lastname: 'Doe',
+			firstname: 'John',
+		},
+		{
+			id: 2,
+			lastname: 'Smith',
+			firstname: 'Jane',
+		},
+		{
+			id: 3,
+			lastname: 'Brown',
+			firstname: 'Charlie',
+		},
+	])
+
+	const itemsTable2 = ref([
+		{
+			id: 1,
+			lastname: 'Smith',
+			firstname: 'Jane',
+		},
+		{
+			id: 2,
+			lastname: 'Doe',
+			firstname: 'John',
+		},
+		{
+			id: 3,
+			lastname: 'Brown',
+			firstname: 'Charlie',
+		},
+	])
+</script>
+				`,
+			},
+		],
+	},
+	render: (args) => {
+		return {
+			components: { PaginatedTable },
+			setup() {
+				const itemsTable1 = ref([
+					{
+						id: 1,
+						lastname: 'Doe',
+						firstname: 'John',
+					},
+					{
+						id: 2,
+						lastname: 'Smith',
+						firstname: 'Jane',
+					},
+					{
+						id: 3,
+						lastname: 'Brown',
+						firstname: 'Charlie',
+					},
+				])
+
+				const itemsTable2 = ref([
+					{
+						id: 1,
+						lastname: 'Smith',
+						firstname: 'Jane',
+					},
+					{
+						id: 2,
+						lastname: 'Doe',
+						firstname: 'John',
+					},
+					{
+						id: 3,
+						lastname: 'Brown',
+						firstname: 'Charlie',
+					},
+				])
+				return { args, itemsTable1, itemsTable2 }
+			},
+			template: `
+			<div class="pa-4">
+				<PaginatedTable
+					suffix="table1"
+					:items="itemsTable1"
+				/>
+				<hr class="my-4">
+				<PaginatedTable
+					suffix="table2"
+					:items="itemsTable2"
+				/>
+			</div>
+			`,
 		}
 	},
 }

package/src/components/PasswordField/PasswordField.stories.ts

@@ -53,7 +53,7 @@ const meta = {
 			control: 'object',
 			description: 'Messages de succès à afficher',
 		},
-		readOnly: {
+		readonly: {
 			control: 'boolean',
 			description: 'Indique si le champ est en lecture seule',
 		},
@@ -99,7 +99,7 @@ const meta = {
 		errorMessages: null,
 		warningMessages: null,
 		successMessages: null,
-		readOnly: false,
+		readonly: false,
 		disabled: false,
 		placeholder: 'Entrez votre mot de passe',
 		customRules: [],
@@ -162,7 +162,7 @@ export const Default: Story = {
 				:error-messages="args.errorMessages"
 				:warning-messages="args.warningMessages"
 				:success-messages="args.successMessages"
-				:read-only="args.readOnly"
+				:readonly="args.readonly"
 				:disabled="args.disabled"
 				:placeholder="args.placeholder"
 				:custom-rules="args.customRules"
@@ -301,7 +301,7 @@ export const ReadOnly: Story = {
 					<PasswordField
 						v-model="password"
 						label="Mot de passe"
-						:read-only="true"
+						:readonly="true"
 					/>
 				</template>
 				`,
@@ -320,7 +320,7 @@ export const ReadOnly: Story = {
 		],
 	},
 	args: {
-		readOnly: true,
+		readonly: true,
 		modelValue: 'MonMotDePasse123',
 	},
 }
@@ -832,7 +832,7 @@ export const WithCustomRules: Story = {
 				:color="args.color"
 				:label="args.label"
 				:required="args.required"
-				:read-only="args.readOnly"
+				:readonly="args.readonly"
 				:disabled="args.disabled"
 				:placeholder="args.placeholder"
 				:custom-rules="customRules"

package/src/components/PasswordField/PasswordField.vue

@@ -23,7 +23,7 @@
 		errorMessages?: string[] | null
 		warningMessages?: string[] | null
 		successMessages?: string[] | null
-		readOnly?: boolean
+		readonly?: boolean
 		disabled?: boolean
 		placeholder?: string
 		customRules?: ValidationRule[]
@@ -42,7 +42,7 @@
 		errorMessages: null,
 		warningMessages: null,
 		successMessages: null,
-		readOnly: false,
+		readonly: false,
 		disabled: false,
 		placeholder: undefined,
 		customRules: () => [],
@@ -191,7 +191,7 @@
 		:error-messages="errors"
 		:warning-messages="warnings"
 		:success-messages="successes"
-		:read-only="props.readOnly"
+		:readonly="props.readonly"
 		:disabled="props.disabled"
 		:placeholder="props.placeholder"
 		:type="showEyeIcon ? 'text' : 'password'"

package/src/components/PeriodField/PeriodField.vue

@@ -28,7 +28,7 @@
 		customRules?: ValidationRule[]
 		customWarningRules?: ValidationRule[]
 		disableErrorHandling?: boolean
-		readOnly?: boolean
+		readonly?: boolean
 	}>(), {
 		modelValue: () => ({ from: null, to: null }),
 		placeholderFrom: 'Début',
@@ -47,7 +47,7 @@
 		customRules: () => [],
 		customWarningRules: () => [],
 		disableErrorHandling: false,
-		readOnly: false,
+		readonly: false,
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -347,7 +347,7 @@
 				:show-week-number="props.showWeekNumber"
 				:show-success-messages="showSuccessMessagesActual"
 				:success-message="fromDateValidation.hasSuccess"
-				:read-only="props.readOnly"
+				:readonly="props.readonly"
 				@closed="handleFromDateClosed"
 			/>
 		</div>
@@ -371,7 +371,7 @@
 				:show-week-number="props.showWeekNumber"
 				:show-success-messages="showSuccessMessagesActual"
 				:success-message="toDateValidation.hasSuccess"
-				:read-only="props.readOnly"
+				:readonly="props.readonly"
 				@closed="handleToDateClosed"
 			/>
 		</div>