@cnamts/synapse 0.0.6-alpha → 0.0.8-alpha

package/src/components/Customs/SyInputSelect/SyInputSelect.vue

@@ -200,53 +200,53 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 
 .sy-input-select {
-  text-transform: none !important;
-  font-size: 16px;
+	text-transform: none !important;
+	font-size: 16px;
 }
 
 .v-input {
-  cursor: pointer;
-  position: relative;
+	cursor: pointer;
+	position: relative;
 }
 
 .v-list {
-  position: absolute;
-  width: 100%;
-  z-index: 1;
-  background-color: white;
-  min-width: fit-content;
-  max-width: 100px;
-  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;
-  max-height: 300px;
+	position: absolute;
+	width: 100%;
+	z-index: 1;
+	background-color: white;
+	min-width: fit-content;
+	max-width: 100px;
+	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;
+	max-height: 300px;
 }
 
 .v-list-item:hover {
-  background-color: rgba(0, 0, 0, 0.04);
+	background-color: rgb(0 0 0 / 4%);
 }
 
 :deep(.v-list-item[aria-selected='true']) {
-  background-color: rgba(0, 0, 0, 0.08);
+	background-color: rgb(0 0 0 / 8%);
 
-  .v-list-item-title {
-    font-weight: bold;
-  }
+	.v-list-item-title {
+		font-weight: bold;
+	}
 }
 
 .error {
-  border-color: tokens.$danger-default;
+	border-color: tokens.$danger-default;
 }
 
 .v-btn {
-  color: tokens.$blue-base;
+	color: tokens.$blue-base;
 }
 
 .text-color {
-  color: tokens.$blue-base;
+	color: tokens.$blue-base;
 }
 </style>

package/src/components/Customs/SySelect/SySelect.mdx

@@ -35,11 +35,10 @@ Il est basé sur un `v-textfield`.
 	<main class="ma-12">
 		SelectedValue: {{ selectedValue }}
 		<div class="d-flex flex-wrap align-center">
-			<custom-select
+			<SySelect
 				v-model="selectedValue"
 				:items="items"
 				text-key="text"
-				outlined
 				required
 			/>
 		</div>

package/src/components/Customs/SySelect/SySelect.stories.ts

@@ -215,7 +215,6 @@ export const withCustomKey: Story = {
 							v-model="value"
 							:items="items"
 							text-key="customKey"
-							outlined
 						/>
 					</template>
 					`,
@@ -251,7 +250,6 @@ export const withCustomKey: Story = {
 				<div class="d-flex flex-wrap align-center pa-4">
 					<SySelect
 						v-bind="args"
-						outlined
 						text-key="customKey"
 					/>
 				</div>

package/src/components/Customs/SySelect/SySelect.vue

@@ -183,56 +183,57 @@
 </template>
 
 <style scoped lang="scss">
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 
 .sy-select {
-  display: flex;
-  flex-direction: column;
+	display: flex;
+	flex-direction: column;
 }
 
 .v-field {
-  position: relative;
+	position: relative;
 }
+
 .v-field--focused {
-  .v-icon.arrow {
-    transform: rotateX(180deg);
-  }
+	.v-icon.arrow {
+		transform: rotateX(180deg);
+	}
 }
 
 .v-list {
-  position: absolute;
-  left: inherit !important;
-  margin-top: -22px;
-  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;
+	margin-top: -22px;
+	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;
 }
 
 .v-list-item:hover {
-  background-color: rgba(0, 0, 0, 0.04);
+	background-color: rgb(0 0 0 / 4%);
 }
 
 .v-list-item[aria-selected='true'] {
-  background-color: rgba(0, 0, 0, 0.08);
+	background-color: rgb(0 0 0 / 8%);
 }
 
 .v-icon {
-  position: absolute;
-  right: 10px;
-  color: tokens.$grey-darken-20;
+	position: absolute;
+	right: 10px;
+	color: tokens.$grey-darken-20;
 }
 
 :deep(.v-field__input) {
- color: tokens.$grey-darken-20
+	color: tokens.$grey-darken-20;
 }
 
 .hidden-label {
-  visibility: hidden;
-  position: absolute;
-  white-space: nowrap;
+	visibility: hidden;
+	position: absolute;
+	white-space: nowrap;
 }
 </style>

package/src/components/DataList/DataList.stories.ts

@@ -421,8 +421,9 @@ export const ActionBtn: Story = {
 				code: `
 				<script setup lang="ts">
 					import { DataList } from '@cnamts/synapse'
+					import { ref } from 'vue'
 							
-					const items = [
+					const items = ref([
 						{
 							key: 'Nom',
 							value: 'Dupont',
@@ -436,7 +437,7 @@ export const ActionBtn: Story = {
 							value: '24/09/1970',
 							action: 'Modifier',
 						},
-					]
+					])
 					
 					const updateBirthdate = (index: number) => {
 						items[index].value = '25/09/1970'

package/src/components/DataList/DataList.vue

@@ -135,6 +135,6 @@
 
 <style lang="scss" scoped>
 :deep(ul) {
-  list-style: none;
+	list-style: none;
 }
 </style>

package/src/components/DataListGroup/DataListGroup.stories.ts

@@ -332,8 +332,9 @@ export const ActionBtn: Story = {
 				code: `
 				<script setup lang="ts">
 					import { DataListGroup } from '@cnamts/synapse'
+					import { ref } from 'vue'
 										
-					const items = [
+					const items = ref([
 						{
 							title: 'Informations patient',
 							items: [
@@ -374,7 +375,7 @@ export const ActionBtn: Story = {
 								},
 							],
 						},
-					]
+					])
 					
 					const updateBirthdate = (eventValue: object) => {
 						items.value[eventValue.dataListIndex].items[eventValue.itemIndex].value = '25/09/1970'

package/src/components/DataListItem/DataListItem.vue

@@ -111,25 +111,25 @@
 
 <style lang="scss" scoped>
 .vd-row {
-  display: flex;
-  flex-wrap: wrap;
+	display: flex;
+	flex-wrap: wrap;
 
-  .vd-data-list-item-label {
-    align-self: center;
+	.vd-data-list-item-label {
+		align-self: center;
 
-    &::after {
-      content: ':';
-      margin: 0 4px;
-    }
-  }
+		&::after {
+			content: ':';
+			margin: 0 4px;
+		}
+	}
 }
 
 .vd-data-list-item-action-btn.v-btn {
-  min-width: 0;
-  margin: 0 -1px;
+	min-width: 0;
+	margin: 0 -1px;
 }
 
 .v-icon.v-theme--light {
-  color: rgba(0, 0, 0, 0.54);
+	color: rgb(0 0 0 / 54%);
 }
 </style>

package/src/components/DialogBox/DialogBox.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
+import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
 import * as DialogBoxStories from './DialogBox.stories';
 
 <Meta of={DialogBoxStories} />
@@ -11,4 +11,30 @@ L’élément `DialogBox` est utilisé pour afficher une boîte de dialogue avec
 
 # API
 
-<Controls of={DialogBoxStories.Default} />
+<Controls of={DialogBoxStories.Default} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+    import { DialogBox } from '@cnamts/synapse'
+    import { ref } from 'vue'
+
+    const dialogOpen = ref(false)
+</script>
+
+<template>
+    <VBtn
+        color="primary"
+        @click="dialogOpen = !dialogOpen"
+    >Toggle DialogBox</VBtn>
+    <DialogBox
+        v-model="dialogOpen"
+        title="DialogBox title"
+        @confirm="dialogOpen = false"
+        @cancel="dialogOpen = false"
+    >
+        DialogBox content
+    </DialogBox>
+</template>
+`} />

package/src/components/DialogBox/DialogBox.stories.ts

@@ -429,7 +429,7 @@ export const Persistent: Story = {
 					<DialogBox
 						v-model="dialogOpen"
 						title="DialogBox title"
-						Persistent
+						persistent
 						@confirm="dialogOpen = false"
 						@cancel="dialogOpen = false"
 					>

package/src/components/DialogBox/DialogBox.vue

@@ -151,6 +151,7 @@
 
 <style lang="scss" scoped>
 @use '@/assets/tokens' as *;
+
 .v-card__title > * {
 	line-height: 1em;
 }
@@ -166,7 +167,7 @@ h2 {
 	text-wrap: balance;
 }
 
-.vd-dialog-box-actions-ctn  {
+.vd-dialog-box-actions-ctn {
 	display: flex;
 	flex-direction: column-reverse;
 	justify-content: stretch;
@@ -174,7 +175,7 @@ h2 {
 }
 
 @media screen and (min-width: $container-mobile-max-width) {
-	.vd-dialog-box-actions-ctn  {
+	.vd-dialog-box-actions-ctn {
 		flex-direction: row;
 	}
 }

package/src/components/DownloadBtn/DownloadBtn.mdx

@@ -52,13 +52,12 @@ Exemple :
 <Source dark code={`
 <script setup lang="ts">
 	import { DownloadBtn } from '@cnamts/synapse'
-	import { NotificationBar } from '@cnamts/synapse'
-	import axios from 'axios'
-	import { useNotificationService } from '@cnamts/synapse/src/services/NotificationService'
+	import { NotificationBar, useNotificationService } from '@cnamts/synapse'
 	import type { Notification } from '@cnamts/synapse/src/components/NotificationBar/types'
+	import axios from 'axios'
 
 	function download() {
-		return axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124')
+		return axios.get('https://run.mocky.io/v3/884c25f5-6dc2-4c01-b8d9-26c54042f94f')
 	}
 
 	const { addNotification } = useNotificationService()

package/src/components/DownloadBtn/DownloadBtn.stories.ts

@@ -24,7 +24,7 @@ const meta = {
 		},
 		filePromise: {
 			control: false,
-			description: 'Une fonction retournant un valeur de retour de Axios `Promise<AxiosResponse>`. <br>Exemple: `() => axios.get("https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124")`',
+			description: 'Une fonction retournant une valeur de retour de Axios `Promise<AxiosResponse>`. <br>Exemple: `() => axios.get("https://run.mocky.io/v3/884c25f5-6dc2-4c01-b8d9-26c54042f94f")`',
 			table: {
 				category: 'props',
 			},
@@ -99,8 +99,8 @@ export const Default: Story = {
 				code: `<template>
 	<DownloadBtn
 		:file-promise="download"
-		@error="onError"
-		@success="onSuccess"
+		@error="console.log('error')"
+		@success="console.log('success')"
 	>
 		Télécharger
 	</DownloadBtn>
@@ -114,7 +114,7 @@ export const Default: Story = {
 	import axios from 'axios'
 	
 	const download = () => {
-        return axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124')
+        return axios.get('https://run.mocky.io/v3/884c25f5-6dc2-4c01-b8d9-26c54042f94f')
 	}
 </script>
 				`,
@@ -122,7 +122,7 @@ export const Default: Story = {
 		],
 	},
 	args: {
-		filePromise: () => axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124'),
+		filePromise: () => axios.get('https://run.mocky.io/v3/884c25f5-6dc2-4c01-b8d9-26c54042f94f'),
 		default: 'Télécharger',
 		onError: fn(),
 		onSuccess: fn(),
@@ -138,8 +138,8 @@ export const Error: Story = {
 				code: `<template>
 	<DownloadBtn
 		:file-promise="download"
-		@error="onError"
-		@success="onSuccess"
+		@error="console.log('error')"
+		@success="console.log('success')"
 	>
 		Télécharger
 	</DownloadBtn>
@@ -177,8 +177,8 @@ export const Loading: Story = {
 				code: `<template>
 	<DownloadBtn
 		:file-promise="download"
-		@error="onError"
-		@success="onSuccess"
+		@error="console.log('error')"
+		@success="console.log('success')"
 	>
 		Télécharger
 	</DownloadBtn>
@@ -222,8 +222,8 @@ export const Dark: Story = {
 	<VThemeProvider theme="dark" with-background class="pa-4">
 		<DownloadBtn
 			:file-promise="download"
-			@error="onError"
-			@success="onSuccess"
+			@error="console.log('error')"
+			@success="console.log('success')"
 		>
 			Télécharger
 		</DownloadBtn>
@@ -257,7 +257,7 @@ export const Dark: Story = {
 		`,
 	}),
 	args: {
-		filePromise: () => axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124'),
+		filePromise: () => axios.get('https://run.mocky.io/v3/884c25f5-6dc2-4c01-b8d9-26c54042f94f'),
 		default: 'Télécharger',
 		onError: fn(),
 		onSuccess: fn(),
@@ -274,8 +274,8 @@ export const Notify: Story = {
 		<NotificationBar />
 		<DownloadBtn
 			:file-promise="download"
-			@error="onError"
-			@success="onSuccess"
+			@error="notify('Une error est survenue', 'error')"
+			@success="notify('Votre attestation a été téléchargée', 'success')"
 		>
 			Télécharger
 		</DownloadBtn>
@@ -286,8 +286,7 @@ export const Notify: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import { DownloadBtn } from '@cnamts/synapse'
-	import NotificationBar from '@cnamts/synapse'
+	import { DownloadBtn, NotificationBar } from '@cnamts/synapse'
 	
 	import axios from 'axios'
 	
@@ -312,7 +311,7 @@ export const Notify: Story = {
 		],
 	},
 	args: {
-		filePromise: () => axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124'),
+		filePromise: () => axios.get('https://run.mocky.io/v3/884c25f5-6dc2-4c01-b8d9-26c54042f94f'),
 		default: 'Télécharger',
 		onError: fn(),
 		onSuccess: fn(),
@@ -362,8 +361,8 @@ export const Customization: Story = {
 	<DownloadBtn
 		:file-promise="download"
 		:vuetify-options="vuetifyOptions"
-		@error="onError"
-		@success="onSuccess"
+		@error="console.log('error')"
+		@success="console.log('success')"
 	>
 		Télécharger
 	</DownloadBtn>
@@ -377,7 +376,7 @@ export const Customization: Story = {
 	import axios from 'axios'
 	
 	const download = () => {
-        return axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124')
+        return axios.get('https://run.mocky.io/v3/884c25f5-6dc2-4c01-b8d9-26c54042f94f')
 	}
     
     const vuetifyOptions = {
@@ -397,7 +396,7 @@ export const Customization: Story = {
 		],
 	},
 	args: {
-		filePromise: () => axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124'),
+		filePromise: () => axios.get('https://run.mocky.io/v3/884c25f5-6dc2-4c01-b8d9-26c54042f94f'),
 		default: 'Télécharger',
 		onError: fn(),
 		onSuccess: fn(),

package/src/components/DownloadBtn/DownloadBtn.vue

@@ -102,12 +102,13 @@
 	.v-btn__content {
 		flex-wrap: wrap;
 	}
+
 	.v-icon {
 		flex: none;
 	}
 }
 
 .outlined-style {
-	border: 1px solid currentColor;
+	border: 1px solid currentcolor;
 }
 </style>

package/src/components/ErrorPage/ErrorPage.vue

@@ -25,7 +25,7 @@
 </script>
 
 <template>
-	<PageContainer size="l">
+	<PageContainer size="md">
 		<VCard
 			:elevation="0"
 			class="pa-6 pa-sm-16"

package/src/components/ExternalLinks/ExternalLinks.mdx

@@ -0,0 +1,86 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+
+import * as ExternalLinksStories from './ExternalLinks.stories.ts'
+
+<Meta of={ExternalLinksStories} />
+
+
+# ExternalLinks
+
+L'élément `ExternalLinks` est utilisé pour afficher un menu avec une liste vers des liens externes.
+
+<Canvas of={ExternalLinksStories.Default} />
+
+
+# API
+
+<Controls of={ExternalLinksStories.Default} />
+
+
+## Décalage
+
+Vous pouvez décaler le composant vers le haut ou vers le bas en utilisant les props `nudge-top` et `nude-bottom`.
+
+<Canvas of={ExternalLinksStories.NudgeTop} />
+
+
+## Absence de données
+
+Lorsqu'il n'y a pas de données, un message par défaut est affiché.
+
+<Canvas of={ExternalLinksStories.NoData} />
+
+## Composants Vuetify
+
+Il est possibles de personnalisé les props passé aux composants utilisés en interne en utilisant la props `vuetifyOptions`.
+
+<Canvas of={ExternalLinksStories.VuetifyOptions} />
+
+
+## Slot `link-icon`
+
+Vous pouvez utiliser le slot `link-icon` pour remplacer l'icône dans les liens.
+
+<Canvas
+	of={ExternalLinksStories.CustomLinksIcon}
+	source={{
+		language: 'html',
+		format: 'dedent',
+		code: `
+		<script lang="ts" setup>
+			import { ExternalLinks } from '@cnamts/synapse'
+			import { VIcon } from 'vuetify/components'
+			import { mdiArrowTopRight } from '@mdi/js'
+
+			const items = [
+				{
+					text: 'ameli.fr',
+					href: 'https://www.ameli.fr',
+				},
+				{
+					text: 'Github',
+					href: 'https://www.github.com',
+				},
+				{
+					text: 'Twitter',
+					href: 'https://www.twitter.com',
+				},
+			]
+
+			const arrowIcon = mdiArrowTopRight
+		</script>
+
+		<template>
+			<ExternalLinks
+				:items
+			>
+				<template #link-icon>
+					<VIcon>
+						{{ arrowIcon }}
+					</VIcon>
+				</template>
+			</ExternalLinks>
+		</template>
+		`
+	}}
+/>