@cnamts/synapse 0.0.6-alpha → 0.0.8-alpha

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

@@ -0,0 +1,96 @@
+import { mount } from '@vue/test-utils'
+import PasswordField from '../PasswordField.vue'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { createVuetify } from 'vuetify'
+
+// 1. Define an interface for the properties/methods you're testing
+interface PasswordFieldVM {
+	showEyeIcon: boolean
+	errors: string[]
+	isValidating: boolean
+	validateOnSubmit: () => boolean
+}
+
+describe('PasswordField.vue', () => {
+	let vuetify
+
+	beforeEach(() => {
+		vuetify = createVuetify()
+	})
+
+	it('renders the password field', () => {
+		const wrapper = mount(PasswordField, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.exists()).toBe(true)
+	})
+
+	it('toggles password visibility', async () => {
+		const wrapper = mount(PasswordField, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		// 2. Cast wrapper.vm as your interface
+		const vm = wrapper.vm as unknown as PasswordFieldVM
+
+		const button = wrapper.find('button')
+		expect(vm.showEyeIcon).toBe(false) // from your interface
+		await button.trigger('click')
+		expect(vm.showEyeIcon).toBe(true)
+		await button.trigger('click')
+		expect(vm.showEyeIcon).toBe(false)
+	})
+
+	it('emits update:modelValue event on input', async () => {
+		const wrapper = mount(PasswordField, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		const input = wrapper.find('input')
+		await input.setValue('new-password')
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['new-password'])
+	})
+
+	it('validates the password field on blur', async () => {
+		const wrapper = mount(PasswordField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				required: true,
+			},
+		})
+		const vm = wrapper.vm as unknown as PasswordFieldVM
+
+		const input = wrapper.find('input')
+		await input.trigger('blur')
+		expect(vm.errors).toContain('Le mot de passe est requis.')
+	})
+
+	it('validates fields on submit and sets validating flag', async () => {
+		const wrapper = mount(PasswordField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: '',
+				outlined: false,
+				required: true,
+			},
+		})
+		const vm = wrapper.vm as unknown as PasswordFieldVM
+
+		const result = vm.validateOnSubmit()
+		expect(vm.isValidating).toBe(true)
+		expect(result).toBe(false)
+
+		// This awaits the Vue microtask queue to let any reactive data settle
+		await wrapper.vm.$nextTick()
+
+		expect(vm.errors).toContain('Le mot de passe est requis.')
+	})
+})

package/src/components/PhoneField/PhoneField.mdx

@@ -41,8 +41,6 @@ const customIndicatifs = ref([
         display-format="code-abbreviation"
         :custom-indicatifs="customIndicatifs"
         :use-custom-indicatifs-only="true"
-        outlined
-        outlined-indicatif
         @change="handleChange"
     />
 </template>

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

@@ -47,8 +47,6 @@ export const Default: Story = {
 					<PhoneField
 						v-model="modelValue"
 						:required="required"
-						:outlined="outlined"
-						:outlinedIndicatif="outlinedIndicatif"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
@@ -63,12 +61,10 @@ export const Default: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import PhoneField from '@cnamts/PhoneField'
+					import { PhoneField } from '@cnamts/synapse'
 					
 					const modelValue = ref('')
 					const required = ref(true)
-					const outlined = ref(true)
-					const outlinedIndicatif = ref(true)
 					const withCountryCode = ref(true)
 					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code')
@@ -129,8 +125,6 @@ export const Required: Story = {
 					<PhoneField
 						v-model="modelValue"
 						:required="required"
-						:outlined="outlined"
-						:outlinedIndicatif="outlinedIndicatif"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
@@ -145,12 +139,10 @@ export const Required: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import PhoneField from '@cnamts/PhoneField'
+					import { PhoneField } from '@cnamts/synapse'
 					
 					const modelValue = ref('')
 					const required = ref(true)
-					const outlined = ref(true)
-					const outlinedIndicatif = ref(true)
 					const withCountryCode = ref(true)
 					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code')
@@ -210,8 +202,6 @@ export const CustomIndicatifs: Story = {
 					<PhoneField
 						v-model="modelValue"
 						:required="required"
-						:outlined="outlined"
-						:outlinedIndicatif="outlinedIndicatif"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
@@ -226,12 +216,10 @@ export const CustomIndicatifs: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import PhoneField from '@cnamts/PhoneField'
+					import { PhoneField } from '@cnamts/synapse'
 					
 					const modelValue = ref('')
 					const required = ref(true)
-					const outlined = ref(true)
-					const outlinedIndicatif = ref(true)
 					const withCountryCode = ref(true)
 					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code')
@@ -301,8 +289,6 @@ export const NotValidatedOnBlur: Story = {
 					<PhoneField
 						v-model="modelValue"
 						:required="required"
-						:outlined="outlined"
-						:outlinedIndicatif="outlinedIndicatif"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
@@ -317,12 +303,10 @@ export const NotValidatedOnBlur: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import PhoneField from '@cnamts/PhoneField'
+					import { PhoneField } from '@cnamts/synapse'
 					
 					const modelValue = ref('')
 					const required = ref(true)
-					const outlined = ref(true)
-					const outlinedIndicatif = ref(true)
 					const withCountryCode = ref(true)
 					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code')
@@ -382,8 +366,6 @@ export const DisplayFormatCode: Story = {
 					<PhoneField
 						v-model="modelValue"
 						:required="required"
-						:outlined="outlined"
-						:outlinedIndicatif="outlinedIndicatif"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
@@ -398,12 +380,10 @@ export const DisplayFormatCode: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import PhoneField from '@cnamts/PhoneField'
+					import { PhoneField } from '@cnamts/synapse'
 					
 					const modelValue = ref('')
 					const required = ref(true)
-					const outlined = ref(true)
-					const outlinedIndicatif = ref(true)
 					const withCountryCode = ref(true)
 					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code')
@@ -463,8 +443,6 @@ export const DisplayFormatCodeAbbreviation: Story = {
 					<PhoneField
 						v-model="modelValue"
 						:required="required"
-						:outlined="outlined"
-						:outlinedIndicatif="outlinedIndicatif"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
@@ -479,12 +457,10 @@ export const DisplayFormatCodeAbbreviation: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import PhoneField from '@cnamts/PhoneField'
+					import { PhoneField } from '@cnamts/synapse'
 					
 					const modelValue = ref('')
 					const required = ref(true)
-					const outlined = ref(true)
-					const outlinedIndicatif = ref(true)
 					const withCountryCode = ref(true)
 					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code-abbreviation')
@@ -544,8 +520,6 @@ export const DisplayFormatCodeCountry: Story = {
 					<PhoneField
 						v-model="modelValue"
 						:required="required"
-						:outlined="outlined"
-						:outlinedIndicatif="outlinedIndicatif"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
@@ -560,12 +534,10 @@ export const DisplayFormatCodeCountry: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import PhoneField from '@cnamts/PhoneField'
+					import { PhoneField } from '@cnamts/synapse'
 					
 					const modelValue = ref('')
 					const required = ref(true)
-					const outlined = ref(true)
-					const outlinedIndicatif = ref(true)
 					const withCountryCode = ref(true)
 					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code-country')
@@ -625,8 +597,6 @@ export const DisplayFormatCountry: Story = {
 					<PhoneField
 						v-model="modelValue"
 						:required="required"
-						:outlined="outlined"
-						:outlinedIndicatif="outlinedIndicatif"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
@@ -641,12 +611,10 @@ export const DisplayFormatCountry: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import PhoneField from '@cnamts/PhoneField'
+					import { PhoneField } from '@cnamts/synapse'
 					
 					const modelValue = ref('')
 					const required = ref(true)
-					const outlined = ref(true)
-					const outlinedIndicatif = ref(true)
 					const withCountryCode = ref(true)
 					const countryCodeRequired = ref(true)
 					const displayFormat = ref('country')
@@ -706,8 +674,6 @@ export const DisplayFormatAbbreviation: Story = {
 					<PhoneField
 						v-model="modelValue"
 						:required="required"
-						:outlined="outlined"
-						:outlinedIndicatif="outlinedIndicatif"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
@@ -722,12 +688,10 @@ export const DisplayFormatAbbreviation: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import PhoneField from '@cnamts/PhoneField'
+					import { PhoneField } from '@cnamts/synapse'
 					
 					const modelValue = ref('')
 					const required = ref(true)
-					const outlined = ref(true)
-					const outlinedIndicatif = ref(true)
 					const withCountryCode = ref(true)
 					const countryCodeRequired = ref(true)
 					const displayFormat = ref('abbreviation')
@@ -791,8 +755,6 @@ export const DisplayModels: Story = {
             v-model="modelValue"
             v-model:selectedDialCode="selectedDialCode"
             :required="required"
-            :outlined="outlined"
-            :outlinedIndicatif="outlinedIndicatif"
             :withCountryCode="withCountryCode"
             :countryCodeRequired="countryCodeRequired"
             :displayFormat="displayFormat"
@@ -807,13 +769,11 @@ export const DisplayModels: Story = {
 				name: 'Script',
 				code: `
         <script setup lang="ts">
-          import PhoneField from '@cnamts/PhoneField'
+          import { PhoneField } from '@cnamts/synapse'
 
           const modelValue = ref('')
           const selectedDialCode = ref('')
           const required = ref(true)
-          const outlined = ref(true)
-          const outlinedIndicatif = ref(true)
           const withCountryCode = ref(true)
           const countryCodeRequired = ref(true)
           const displayFormat = ref('code-country')

package/src/components/PhoneField/PhoneField.vue

@@ -24,8 +24,8 @@
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 		dialCodeModel: { type: [String, Object] as PropType<string | Record<string, any>>, default: '' },
 		required: { type: Boolean, default: false },
-		outlined: { type: Boolean, default: false },
-		outlinedIndicatif: { type: Boolean, default: false },
+		outlined: { type: Boolean, default: true },
+		outlinedIndicatif: { type: Boolean, default: true },
 		withCountryCode: { type: Boolean, default: false },
 		countryCodeRequired: { type: Boolean, default: false },
 		displayFormat: { type: String as PropType<DisplayFormat>, default: 'code' },
@@ -163,7 +163,7 @@
 			:label="locales.label"
 			:variant="outlined ? 'outlined' : 'underlined'"
 			color="primary"
-			class="phoneField"
+			class="phone-field"
 			@input="handlePhoneInput"
 			@blur="validateInputOnBlur"
 		>
@@ -184,46 +184,46 @@
 
 <style scoped>
 .phone-field-container {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	width: 100%;
 }
 
-.phoneField {
-  width: 100%;
+.phone-field {
+	width: 100%;
 }
 
 .custom-select {
-  width: 30%;
+	width: 30%;
 }
 
-@media (min-width: 600px) {
-  .phone-field-container {
-    flex-direction: row;
-    align-items: center;
-  }
-
-  .custom-select {
-    margin-right: 1rem;
-    margin-bottom: 0;
-    min-width: 144px;
-  }
-
-  .phoneField {
-    min-width: 350px;
-  }
+@media (width >= 600px) {
+	.phone-field-container {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.custom-select {
+		margin-right: 1rem;
+		margin-bottom: 0;
+		min-width: 144px;
+	}
+
+	.phone-field {
+		min-width: 350px;
+	}
 }
 
 :deep(.v-list) {
-  position: absolute;
-  left: inherit !important;
-  background-color: white;
-  max-height: 300px;
-  padding: 0;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.08);
-  border-radius: 4px;
-  overflow-y: auto;
-  z-index: 2;
+	position: absolute;
+	left: inherit !important;
+	background-color: white;
+	max-height: 300px;
+	padding: 0;
+	box-shadow: 0 2px 5px rgb(0 0 0 / 12%), 0 2px 10px rgb(0 0 0 / 8%);
+	border-radius: 4px;
+	overflow-y: auto;
+	z-index: 2;
 }
 </style>

package/src/components/SkipLink/SkipLink.vue

@@ -63,17 +63,17 @@
 </template>
 
 <style lang="scss" scoped>
-@use '/src/assets/tokens.scss';
+@use '/src/assets/tokens';
 
 .vd-skip-link {
-  z-index: 150;
-  position: fixed;
-  top: 0;
-  right: 0;
-  transition: none;
-  width: 100%;
-  background: #fff;
-  outline: none; // Disable outline to use border
-  border: 2px solid tokens.$blue-darken-60;
+	z-index: 150;
+	position: fixed;
+	top: 0;
+	right: 0;
+	transition: none;
+	width: 100%;
+	background: #fff;
+	outline: none; // Disable outline to use border
+	border: 2px solid tokens.$blue-darken-60;
 }
 </style>

package/src/components/SocialMediaLinks/SocialMediaLinks.vue

@@ -17,7 +17,7 @@
 			{{ locales.followUs }}
 		</span>
 
-		<ul class="d-flex max-width-none">
+		<ul class="vd-social-media-links-content d-flex max-width-none">
 			<li
 				v-for="(social, index) in props.links"
 				:key="index"
@@ -44,49 +44,57 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 
 .vd-social-media-links {
-  display: flex;
-  flex-direction: column;
+	display: flex;
+	flex-direction: column;
 }
 
 li {
-  list-style: none;
+	list-style: none;
 }
 
 .vd-social-media-links-label.text--primary {
-  color: tokens.$blue-base;
-  font-weight: 600;
+	color: tokens.$blue-base;
+	font-weight: 600;
 }
 
 .v-theme--dark .vd-social-media-links-label.text--primary {
-  color: white;
+	color: white;
 }
 
 .vd-social-media-links-icon {
-  color: tokens.$grey-base;
+	color: tokens.$grey-base;
 }
 
 .v-btn--icon {
-  width: calc(var(--v-btn-height) + 5px);
-  height: calc(var(--v-btn-height) + 5px);
-  border: 0;
+	width: calc(var(--v-btn-height) + 5px);
+	height: calc(var(--v-btn-height) + 5px);
+	border: 0;
 }
 
 .v-theme--dark .v-btn--variant-text:hover :deep() {
-  background: rgba(white, 0.1);
+	background: rgba(white, 0.1);
 }
 
-@media (min-width: 768px) {
-  .vd-social-media-links-label {
-    text-align: right;
-  }
+@media (width >= 768px) {
+	.vd-social-media-links-label {
+		text-align: right;
+	}
+
+	.vd-social-media-links-content {
+		justify-content: flex-end;
+	}
 }
 
-@media (max-width: 767px) {
-  .vd-social-media-links-label {
-    text-align: left;
-  }
+@media (width <= 767px) {
+	.vd-social-media-links-label {
+		text-align: left;
+	}
+
+	.vd-social-media-links-content {
+		justify-content: flex-start;
+	}
 }
 </style>

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

@@ -2,13 +2,13 @@
 
 exports[`SocialMediaLinks > renders correctly with default props 1`] = `
 "<div data-v-9d3df26f="" class="d-flex flex-column"><span data-v-9d3df26f="" class="vd-social-media-links-label text-subtitle-2 text--primary">Suivez-nous :</span>
-  <ul data-v-9d3df26f="" class="d-flex max-width-none"></ul>
+  <ul data-v-9d3df26f="" class="vd-social-media-links-content d-flex max-width-none"></ul>
 </div>"
 `;
 
 exports[`SocialMediaLinks > renders correctly with provided links 1`] = `
 "<div data-v-9d3df26f="" class="d-flex flex-column"><span data-v-9d3df26f="" class="vd-social-media-links-label text-subtitle-2 text--primary">Suivez-nous :</span>
-  <ul data-v-9d3df26f="" class="d-flex max-width-none">
+  <ul data-v-9d3df26f="" class="vd-social-media-links-content d-flex max-width-none">
     <li data-v-9d3df26f=""><a data-v-9d3df26f="" class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text" href="https://twitter.com" id="social-btn-0" target="_blank" rel="noopener noreferrer" aria-label="Lien vers Twitter"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
         <!----><span class="v-btn__content" data-no-activator=""><i data-v-9d3df26f="" class="mdi-twitter mdi v-icon notranslate v-theme--light vd-social-media-links-icon" style="font-size: 30px; height: 30px; width: 30px;" aria-hidden="true"></i></span>
         <!---->

package/src/components/SubHeader/SubHeader.stories.ts

@@ -295,8 +295,9 @@ export const ActionBtn: Story = {
 				code: `
 				<script setup lang="ts">
 					import { SubHeader } from '@cnamts/synapse'
+					import { ref } from 'vue'
 										
-					const items = [
+					const items = ref([
 						{
 							title: 'Informations patient',
 							items: [
@@ -317,10 +318,12 @@ export const ActionBtn: Story = {
 								{ key: 'Dernière modification', value: '04/06/2020' },
 							],
 						},
-					]
+					])
 					
 					const updateInfo = (eventValue: { dataListIndex: number, itemIndex: number }) => {
-						items[eventValue.dataListIndex].items[eventValue.itemIndex].value = '25/09/1970'
+                        if (items) {
+							items[eventValue.dataListIndex].items[eventValue.itemIndex].value = '25/09/1970'
+						}
 					}
 				</script>
 				`,

package/src/components/SubHeader/SubHeader.vue

@@ -137,49 +137,50 @@
 
 <style lang="scss" scoped>
 .vd-sub-header {
-  overflow-x: auto;
+	overflow-x: auto;
 }
 
 .vd-sub-header-back-btn {
-  margin: 0 -6px;
+	margin: 0 -6px;
 }
 
 .vd-data-list-group,
 .vd-sub-header-informations {
-  // Don't take all available space
-  max-width: none;
+	// Don't take all available space
+	max-width: none;
 }
 
 .vd-data-list-group :deep(.vd-data-list) {
-  max-width: 200px;
-
-  // Apply margin right to avoid empty
-  // space on smaller screens
-  &:not(:last-child) {
-    margin-right: 80px !important;
-  }
-
-  .vd-key {
-    display: inline-block;
-    font-size: 0.75rem !important;
-  }
-
-  .vd-data-list-item-label {
-    color: rgba(255, 255, 255, 0.7) !important;
-  }
-
-  .vd-data-list-item-action-btn {
-    color: #fff !important;
-  }
+	max-width: 200px;
+
+	// Apply margin right to avoid empty
+	// space on smaller screens
+	&:not(:last-child) {
+		margin-right: 80px !important;
+	}
+
+	.vd-key {
+		display: inline-block;
+		font-size: 0.75rem !important;
+	}
+
+	.vd-data-list-item-label {
+		color: rgb(255 255 255 / 70%) !important;
+	}
+
+	.vd-data-list-item-action-btn {
+		color: #fff !important;
+	}
 }
 
 .vd-subheader-loading :deep() {
-  background: transparent;
-  .v-skeleton-loader__button {
-    margin: 0;
-    min-height: 28px;
-    height: auto;
-    background: rgba(white, var(--v-border-opacity));
-  }
+	background: transparent;
+
+	.v-skeleton-loader__button {
+		margin: 0;
+		min-height: 28px;
+		height: auto;
+		background: rgba(white, var(--v-border-opacity));
+	}
 }
 </style>