@cnamts/synapse 0.0.11-alpha → 0.0.12-alpha

package/src/components/PeriodField/PeriodField.vue

@@ -276,65 +276,66 @@
 
 <template>
 	<div class="period-field">
-		<v-row>
-			<v-col
-				cols="12"
-				sm="6"
-			>
-				<DatePicker
-					ref="fromDateRef"
-					v-model="internalFromDate"
-					:custom-rules="fromDateRules"
-					:custom-warning-rules="props.customWarningRules"
-					:date-format-return="props.dateFormatReturn"
-					:display-append-icon="props.displayAppendIcon"
-					:display-icon="props.displayIcon"
-					:error-message="hasFromDateErrors"
-					:format="props.format"
-					:is-disabled="props.isDisabled"
-					:is-outlined="props.isOutlined"
-					:no-calendar="props.noCalendar"
-					:no-icon="props.noIcon"
-					:placeholder="props.placeholderFrom"
-					:required="props.required"
-					:show-week-number="props.showWeekNumber"
-					:success-message="hasFromDateSuccesses"
-					class="mr-2"
-					@closed="handleFromDateClosed"
-				/>
-			</v-col>
-			<v-col
-				cols="12"
-				sm="6"
-			>
-				<DatePicker
-					ref="toDateRef"
-					v-model="internalToDate"
-					:custom-rules="toDateRules"
-					:custom-warning-rules="props.customWarningRules"
-					:date-format-return="props.dateFormatReturn"
-					:display-append-icon="props.displayAppendIcon"
-					:display-icon="props.displayIcon"
-					:error-message="hasToDateErrors"
-					:format="props.format"
-					:is-disabled="props.isDisabled"
-					:is-outlined="props.isOutlined"
-					:no-calendar="props.noCalendar"
-					:no-icon="props.noIcon"
-					:placeholder="props.placeholderTo"
-					:required="props.required"
-					:show-week-number="props.showWeekNumber"
-					:success-message="hasToDateSuccesses"
-					@closed="handleToDateClosed"
-				/>
-			</v-col>
-		</v-row>
+		<div
+			class="period-field__col"
+		>
+			<DatePicker
+				ref="fromDateRef"
+				v-model="internalFromDate"
+				:custom-rules="fromDateRules"
+				:custom-warning-rules="props.customWarningRules"
+				:date-format-return="props.dateFormatReturn"
+				:display-append-icon="props.displayAppendIcon"
+				:display-icon="props.displayIcon"
+				:error-message="hasFromDateErrors"
+				:format="props.format"
+				:is-disabled="props.isDisabled"
+				:is-outlined="props.isOutlined"
+				:no-calendar="props.noCalendar"
+				:no-icon="props.noIcon"
+				:placeholder="props.placeholderFrom"
+				:required="props.required"
+				:show-week-number="props.showWeekNumber"
+				:success-message="hasFromDateSuccesses"
+				@closed="handleFromDateClosed"
+			/>
+		</div>
+		<div
+			class="period-field__col"
+		>
+			<DatePicker
+				ref="toDateRef"
+				v-model="internalToDate"
+				:custom-rules="toDateRules"
+				:custom-warning-rules="props.customWarningRules"
+				:date-format-return="props.dateFormatReturn"
+				:display-append-icon="props.displayAppendIcon"
+				:display-icon="props.displayIcon"
+				:error-message="hasToDateErrors"
+				:format="props.format"
+				:is-disabled="props.isDisabled"
+				:is-outlined="props.isOutlined"
+				:no-calendar="props.noCalendar"
+				:no-icon="props.noIcon"
+				:placeholder="props.placeholderTo"
+				:required="props.required"
+				:show-week-number="props.showWeekNumber"
+				:success-message="hasToDateSuccesses"
+				@closed="handleToDateClosed"
+			/>
+		</div>
 	</div>
 </template>
 
 <style scoped>
 .period-field {
 	display: flex;
-	gap: 10px;
+	gap: 24px;
+	flex-wrap: wrap;
+}
+
+.period-field__col {
+	flex: 1;
+	min-width: min(300px, 100%);
 }
 </style>

package/src/components/PhoneField/PhoneField.stories.ts

@@ -30,6 +30,7 @@ const meta = {
 			description: 'Permet d\'utiliser uniquement les indicatifs que vous renseignez dans la props customIndicatifs',
 		},
 		isValidatedOnBlur: { control: 'boolean' },
+		displayAsterisk: { control: 'boolean' },
 	},
 } satisfies Meta<typeof PhoneField>
 
@@ -192,6 +193,74 @@ export const Required: Story = {
 	},
 }
 
+/**
+ * Story avec champ requis et astérisque.
+ */
+export const RequiredWithAsterisk: Story = {
+	args: {
+		...Default.args,
+		required: true,
+		displayAsterisk: true,
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: 'Version du champ téléphone requis avec un astérisque visuel.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <PhoneField
+    v-model="phoneNumber"
+    required
+    display-asterisk
+  />
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import PhoneField from '@cnamts/synapse'
+
+const phoneNumber = ref('')
+</script>
+        `,
+			},
+		],
+	},
+	render: (args) => {
+		return {
+			components: { PhoneField },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="pa-4">
+					<PhoneField
+						v-model="args.modelValue"
+						:required="args.required"
+						:outlined="args.outlined"
+						:outlinedIndicatif="args.outlinedIndicatif"
+						:withCountryCode="args.withCountryCode"
+						:countryCodeRequired="args.countryCodeRequired"
+						:displayFormat="args.displayFormat"
+						:customIndicatifs="args.customIndicatifs"
+						:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
+						:isValidatedOnBlur="args.isValidatedOnBlur"
+						:display-asterisk="args.displayAsterisk"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
 export const CustomIndicatifs: Story = {
 	parameters: {
 		sourceCode: [

package/src/components/PhoneField/PhoneField.vue

@@ -32,6 +32,7 @@
 		customIndicatifs: { type: Array as PropType<Indicatif[]>, default: () => [] },
 		useCustomIndicatifsOnly: { type: Boolean, default: false },
 		isValidatedOnBlur: { type: Boolean, default: true },
+		displayAsterisk: { type: Boolean, default: false },
 	})
 
 	const emit = defineEmits(['update:modelValue', 'update:selectedDialCode', 'change'])
@@ -133,6 +134,7 @@
 			:label="locales.indicatifLabel"
 			:outlined="outlinedIndicatif"
 			:required="props.countryCodeRequired"
+			:display-asterisk="props.displayAsterisk"
 			class="custom-select"
 			text-key="displayText"
 			value-key="code"
@@ -146,6 +148,7 @@
 			:required="props.required"
 			:rules="validationRules"
 			:variant="outlined ? 'outlined' : 'underlined'"
+			:display-asterisk="props.displayAsterisk"
 			class="phone-field"
 			color="primary"
 			@blur="validateInputOnBlur"

package/src/components/PhoneField/indicatifs.ts

@@ -1,5 +1,5 @@
 export const indicatifs = [
-	{ code: '+1', country: 'USA/Canada', abbreviation: 'US/CA', phoneLength: 10, mask: '###-###-####' },
+	{ code: '+1', country: 'USA/Canada', abbreviation: 'US/CA', phoneLength: 10, mask: '### ### ####' },
 	{ code: '+7', country: 'Russia/Kazakhstan', abbreviation: 'RU/KZ', phoneLength: 10, mask: '### ### ## ##' },
 	{ code: '+20', country: 'Egypt', abbreviation: 'EG', phoneLength: 9, mask: '### ### ####' },
 	{ code: '+27', country: 'South Africa', abbreviation: 'ZA', phoneLength: 9, mask: '### ### ####' },

package/src/components/UploadWorkflow/UploadWorkflow.mdx

@@ -0,0 +1,75 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+
+import * as UploadWorkflowStories from './UploadWorkflow.stories';
+
+<Meta of={UploadWorkflowStories} />
+
+# UploadWorkflow
+
+<Canvas of={UploadWorkflowStories.Default} />
+
+# API
+
+<Controls of={UploadWorkflowStories.Default} />
+
+# Exemple
+
+## Événements
+
+Vous pouvez réagir lorsque la liste des fichiers est mise à jour en utilisant l’événement `update:modelValue`, et réagir aux erreurs de validation en utilisant l’événement `error`.
+
+<Canvas of={UploadWorkflowStories.Events} />
+
+
+## Un seul fichier
+
+Lorsque que la liste ne contient qu’un seul fichier, la boîte de dialogue demandant à l’utilisateur de choisir quel fichier il a sélectionné ne sera pas affichée.
+
+<Canvas of={UploadWorkflowStories.OneFile} />
+
+
+## Fichiers optionnels
+
+Vous pouvez spécifier des fichiers optionnels en utilisant la propriété `optional`.
+
+<Canvas of={UploadWorkflowStories.OptionalDocument} />
+
+
+## Prévisualisation des fichiers
+
+Vous pouvez permettre à l’utilisateur de prévisualiser le fichier qu’il vient de sélectionner avant de valider en utilisant la prop `show-file-preview`.
+
+<Canvas of={UploadWorkflowStories.WithPreviewStep} />
+
+
+## Exemple d'utilisation
+
+<Source
+    language="typescript"
+    dark code={`
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { UploadWorkflow } from '@cnamts/synapse'
+
+	const files = ref([])
+
+	const uploadList = [
+		{
+			id: '1',
+			title: 'Carte d\\'identité',
+		},
+		{
+			id: '2',
+			title: 'Facture de soin',
+		},
+	]
+</script>
+
+<template>
+	<UploadWorkflow
+		v-model="files"
+		:uploadList="uploadList"
+	/>
+</template>
+`}
+/>