@cnamts/synapse 1.0.7 → 1.0.9

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

@@ -1,10 +1,10 @@
 /* eslint-disable vue/one-component-per-file */
-import { describe, it, expect } from 'vitest'
-import { mount, shallowMount } from '@vue/test-utils'
 import { vuetify } from '@tests/unit/setup'
+import { mount, shallowMount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
 
-import { VCard } from 'vuetify/components'
 import { defineComponent } from 'vue'
+import { VCard } from 'vuetify/components'
 import DialogBox from '../DialogBox.vue'
 
 const defaultProps = {
@@ -370,4 +370,133 @@ describe('DialogBox', () => {
 		expect(confirmBtn.element).toEqual(document.activeElement)
 		wrapper.unmount()
 	})
+
+	describe('draggable dialog', () => {
+		it('renders the dialog as draggable when the draggable prop is true', async () => {
+			const wrapper = mount(DialogBox, {
+				props: {
+					...defaultProps,
+					draggable: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+				attachTo: document.body,
+			})
+
+			const card = wrapper.getComponent(VCard)
+			const titleBar = card.find<HTMLElement>('.sy-dialog-box-title')
+
+			expect(card.classes()).toContain('sy-dialog-box-draggable')
+
+			titleBar.trigger('mousedown', { clientX: 100, clientY: 100 })
+			await wrapper.vm.$nextTick()
+
+			expect(card.classes()).toContain('sy-dialog-box-draggable--active')
+
+			await wrapper.trigger('mousemove', { clientX: 200, clientY: 200 })
+			await wrapper.vm.$nextTick()
+
+			const overlayElement = card.element.closest('.v-overlay__content') as HTMLElement
+
+			expect(overlayElement.style.left).toBe('100px') // Check that left style has been set
+			expect(overlayElement.style.top).toBe('100px') // Check that top style has been set
+
+			await wrapper.trigger('mouseup')
+
+			expect(card.classes()).not.toContain('sy-dialog-box-draggable--active')
+			wrapper.unmount()
+		})
+
+		it('do not allow the dialog to be dragged outside the viewport', async () => {
+			const wrapper = mount(DialogBox, {
+				props: {
+					...defaultProps,
+					draggable: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+				attachTo: document.body,
+			})
+
+			const card = wrapper.getComponent(VCard)
+			const titleBar = card.find<HTMLElement>('.sy-dialog-box-title')
+
+			titleBar.trigger('mousedown', { clientX: 100, clientY: 100 })
+			await wrapper.vm.$nextTick()
+
+			await wrapper.trigger('mousemove', { clientX: -1000, clientY: -1000 })
+			await wrapper.vm.$nextTick()
+
+			const overlayElement = card.element.closest('.v-overlay__content') as HTMLElement
+
+			expect(parseInt(overlayElement.style.left, 10)).toBe(0)
+			expect(parseInt(overlayElement.style.top, 10)).toBe(0)
+
+			await wrapper.trigger('mousemove', { clientX: 10000, clientY: 10000 })
+			await wrapper.vm.$nextTick()
+
+			const windowWidth = window.innerWidth
+			const windowHeight = window.innerHeight
+			const overlayWidth = overlayElement.offsetWidth
+			const overlayHeight = overlayElement.offsetHeight
+
+			expect(parseInt(overlayElement.style.left, 10)).toBe(windowWidth - overlayWidth)
+			expect(parseInt(overlayElement.style.top, 10)).toBe(windowHeight - overlayHeight)
+
+			await wrapper.trigger('mouseup')
+
+			wrapper.unmount()
+		})
+
+		it('move the dialog to the left when the left arrow is pressed', async () => {
+			const wrapper = mount(DialogBox, {
+				props: {
+					...defaultProps,
+					draggable: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+				attachTo: document.body,
+			})
+
+			const card = wrapper.getComponent(VCard)
+
+			await card.trigger('keydown', { key: 'ArrowLeft' })
+			await wrapper.vm.$nextTick()
+
+			const overlayElement = card.element.closest('.v-overlay__content') as HTMLElement
+
+			expect(overlayElement.style.position).toBe('absolute')
+			expect(overlayElement.style.left).toBe(`0px`)
+		})
+
+		it('move the dialog to the right when the right arrow is pressed', async () => {
+			const wrapper = mount(DialogBox, {
+				props: {
+					...defaultProps,
+					draggable: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+				attachTo: document.body,
+			})
+
+			const card = wrapper.getComponent(VCard)
+
+			await card.trigger('keydown', { key: 'ArrowRight' })
+			await wrapper.vm.$nextTick()
+
+			const overlayElement = card.element.closest('.v-overlay__content') as HTMLElement
+			const computedStyle = getComputedStyle(overlayElement)
+			const marginLeft = parseFloat(computedStyle.marginLeft) || 0
+			const positionToLeft = window.innerWidth - overlayElement.offsetWidth - marginLeft * 2
+
+			expect(overlayElement.style.position).toBe('absolute')
+			expect(overlayElement.style.left).toBe(`${positionToLeft}px`)
+		})
+	})
 })

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

@@ -8,18 +8,17 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
   modelvalue="true"
   persistent="false"
   retain-focus="false"
+  scrim="true"
   width="600px"
 >
-  <div
-    class="
-      pa-6
-      v-card
-      v-card--density-default
-      v-card--variant-elevated
-      v-theme--light
-    "
-    id="dialog-content"
-  >
+  <div class="
+    pa-0
+    pb-6
+    v-card
+    v-card--density-default
+    v-card--variant-elevated
+    v-theme--light
+  ">
     <!---->
     <div class="v-card__loader">
       <div
@@ -77,8 +76,10 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
       d-flex
       flex-nowrap
       mb-6
-      mr-6
       pa-0
+      pt-6
+      px-6
+      sy-dialog-box-title
       v-card-title
     ">
       <h2
@@ -136,10 +137,12 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
         <!---->
       </button>
     </div>
+    <div class="px-6"></div>
     <div class="
       d-flex
       flex-wrap
       mt-6
+      px-6
       sy-dialog-box-actions-ctn
     ">
       <div class="v-spacer"></div>

package/src/components/DialogBox/useDraggable.ts

@@ -0,0 +1,98 @@
+import { ref, type Ref, type TemplateRef } from 'vue'
+import type { VDialog } from 'vuetify/components'
+
+export function useDraggable(
+	draggable: Readonly<Ref<boolean>>,
+	dialogContent: TemplateRef<VDialog | null | undefined>,
+) {
+	const isGrabbing = ref(false)
+	function startDragging(e: MouseEvent) {
+		if (!draggable.value) return
+
+		isGrabbing.value = true
+
+		const dialogElement = dialogContent?.value?.$el.querySelector('.sy-dialog-box-title') as HTMLElement
+		const overlayElement = dialogContent?.value?.$el.closest('.v-overlay__content') as HTMLElement
+		if (!dialogElement || !overlayElement) throw new Error('Dialog element not found')
+
+		const computedStyle = getComputedStyle(overlayElement)
+		const marginLeft = parseFloat(computedStyle.marginLeft) || 0
+		const marginTop = parseFloat(computedStyle.marginTop) || 0
+
+		const rect = overlayElement.getBoundingClientRect()
+		const offsetX = e.clientX - rect.left + marginLeft
+		const offsetY = e.clientY - rect.top + marginTop
+
+		function onMouseMove(e: MouseEvent) {
+			const windowWidth = window.innerWidth
+			const windowHeight = window.innerHeight
+
+			const overlayWidth = overlayElement.offsetWidth
+			const overlayHeight = overlayElement.offsetHeight
+
+			let left = e.clientX - offsetX
+			let top = e.clientY - offsetY
+
+			// Prevent the dialog from going outside the window horizontally
+			left = Math.max(-marginLeft, Math.min(left, windowWidth - overlayWidth - marginLeft))
+
+			// Prevent the dialog from going outside the window vertically
+			top = Math.max(-marginTop, Math.min(top, windowHeight - overlayHeight - marginTop))
+
+			overlayElement.style.position = 'absolute'
+			overlayElement.style.left = `${left}px`
+			overlayElement.style.top = `${top}px`
+		}
+
+		function onMouseUp() {
+			isGrabbing.value = false
+			window.removeEventListener('mousemove', onMouseMove)
+			window.removeEventListener('mouseup', onMouseUp)
+		}
+
+		window.addEventListener('mousemove', onMouseMove)
+		window.addEventListener('mouseup', onMouseUp)
+	}
+
+	/* Keyboard accessibility functions */
+
+	function moveToLeft() {
+		const overlayElement = dialogContent?.value?.$el.closest('.v-overlay__content') as HTMLElement
+		if (!overlayElement) throw new Error('Dialog element not found')
+
+		const computedStyle = getComputedStyle(overlayElement)
+		const marginLeft = parseFloat(computedStyle.marginLeft) || 0
+		const positionToLeft = window.innerWidth - overlayElement.offsetWidth - marginLeft * 2
+
+		if (overlayElement.style.left === `${positionToLeft}px`) {
+			overlayElement.style.position = 'static'
+			overlayElement.style.left = ``
+			return
+		}
+
+		overlayElement.style.position = 'absolute'
+		overlayElement.style.left = `0px`
+		overlayElement.style.top = ''
+	}
+
+	function moveToRight() {
+		const overlayElement = dialogContent?.value?.$el.closest('.v-overlay__content') as HTMLElement
+		if (!overlayElement) throw new Error('Dialog element not found')
+
+		const computedStyle = getComputedStyle(overlayElement)
+		const marginLeft = parseFloat(computedStyle.marginLeft) || 0
+		const positionToLeft = window.innerWidth - overlayElement.offsetWidth - marginLeft * 2
+
+		if (overlayElement.style.left === `0px`) {
+			overlayElement.style.position = 'static'
+			overlayElement.style.left = ``
+			return
+		}
+
+		overlayElement.style.position = 'absolute'
+		overlayElement.style.left = `${positionToLeft}px`
+		overlayElement.style.top = ''
+	}
+
+	return { isGrabbing, startDragging, moveToLeft, moveToRight }
+}

package/src/components/DownloadBtn/Accessibilite.mdx

@@ -1,10 +1,14 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as AccessStories from './Accessibilite.stories.ts';
+import '../../stories/styles/shared.css';
 
 <Meta of={AccessStories} />
 
-Accessibilité
-=============
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Informations sur l'accessibilité du composant</p>
+</div>
+
 <Story of={AccessStories.Legende} />
 <br />
 

package/src/components/DownloadBtn/DownloadBtn.mdx

@@ -1,12 +1,14 @@
 import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+import '../../stories/styles/shared.css';
 
 import * as DownloadBtnStories from './DownloadBtn.stories';
 
 <Meta of={DownloadBtnStories} />
 
-# DownloadBtn
-
-L'élément `DownloadBtn` est utilisé pour permettre à l'utilisateur de télécharger un document provenant d'une API.
+<div className="header">
+  <h1>DownloadBtn</h1>
+  <p>L'élément `DownloadBtn` est utilisé pour permettre à l'utilisateur de télécharger un document provenant d'une API.</p>
+</div>
 
 <Canvas of={DownloadBtnStories.Default} />
 
@@ -56,7 +58,8 @@ Exemple :
 	import type { Notification } from '@cnamts/synapse/src/components/NotificationBar/types'
 	import axios from 'axios'
 
-	function download() {
+	function download()
+{
 		return axios.get('https://run.mocky.io/v3/884c25f5-6dc2-4c01-b8d9-26c54042f94f')
 	}
 

package/src/components/DownloadBtn/DownloadBtn.vue

@@ -96,7 +96,7 @@
 		:loading="state === 'loading'"
 		class="sy-download-btn"
 		:color="buttonColor"
-		:class="`bg-${buttonBgColor}`"
+		:style="`background-color: ${buttonBgColor}`"
 		data-testid="download-btn"
 		@click="download"
 	>

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

@@ -39,8 +39,6 @@ describe('DownloadBtn', () => {
 		expect(DownloadBtn).toBeTruthy()
 
 		expect(element.exists()).toBe(true)
-
-		expect(wrapper.html()).toMatchSnapshot()
 	})
 
 	it('works correctly', async () => {
@@ -77,6 +75,7 @@ describe('DownloadBtn', () => {
 			},
 		})
 
-		expect(wrapper.html()).toMatchSnapshot()
+		element = wrapper.find('[data-testid="download-btn"]')
+		expect(element.text()).toBe(slot)
 	})
 })

package/src/components/ErrorPage/Accessibilite.mdx

@@ -1,10 +1,14 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as AccessStories from './Accessibilite.stories.ts';
+import '../../stories/styles/shared.css';
 
 <Meta of={AccessStories} />
 
-Accessibilité
-=============
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Informations sur l'accessibilité du composant</p>
+</div>
+
 <Story of={AccessStories.Legende} />
 <br />
 

package/src/components/ErrorPage/ErrorPage.mdx

@@ -3,10 +3,12 @@ import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
 import * as ErrorPageStories from './ErrorPage.stories'
 
 <Meta of={ErrorPageStories} />
+import '../../stories/styles/shared.css';
 
-# ErrorPage
-
-Le composant `ErrorPage` sert à afficher une page d'erreur.
+<div className="header">
+  <h1>ErrorPage</h1>
+  <p>Le composant `ErrorPage` sert à afficher une page d'erreur.</p>
+</div>
 
 <Canvas of={ErrorPageStories.Default} />
 

package/src/components/ExternalLinks/Accessibilite.mdx

@@ -1,10 +1,14 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as AccessStories from './Accessibilite.stories.ts';
+import '../../stories/styles/shared.css';
 
 <Meta of={AccessStories} />
 
-Accessibilité
-=============
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Informations sur l'accessibilité du composant</p>
+</div>
+
 <Story of={AccessStories.Legende} />
 <br />
 

package/src/components/ExternalLinks/ExternalLinks.mdx

@@ -4,26 +4,23 @@ 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.
+<div className="header">
+  <h1>ExternalLinks</h1>
+  <p>L'élément `ExternalLinks` est utilisé pour afficher un menu avec une liste vers des liens externes.</p>
+</div>
 
 <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é.
@@ -36,7 +33,6 @@ Il est possibles de personnalisé les props passé aux composants utilisés en i
 
 <Canvas of={ExternalLinksStories.VuetifyOptions} />
 
-
 ## Slot `link-icon`
 
 Vous pouvez utiliser le slot `link-icon` pour remplacer l'icône dans les liens.
@@ -69,6 +65,7 @@ Vous pouvez utiliser le slot `link-icon` pour remplacer l'icône dans les liens.
 
 			const arrowIcon = mdiArrowTopRight
 		</script>
+import '../../stories/styles/shared.css';
 
 		<template>
 			<ExternalLinks

package/src/components/ExternalLinks/Usages.mdx

@@ -1,9 +1,11 @@
 import { Meta, Story} from "@storybook/blocks";
+import '../../stories/styles/shared.css';
 import * as stories from "./Usages.stories.ts";
 
 <Meta of={stories} />
 
-# Usages
-
-<Story of={stories.UsagePage} />
+<div className="header">
+  <h1>Usages</h1>
+  
+</div><Story of={stories.UsagePage} />
 <br />

package/src/components/FileList/Accessibilite.mdx

@@ -1,10 +1,14 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as AccessStories from './Accessibilite.stories.ts';
+import '../../stories/styles/shared.css';
 
 <Meta of={AccessStories} />
 
-Accessibilité
-=============
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Informations sur l'accessibilité du composant</p>
+</div>
+
 <Story of={AccessStories.Legende} />
 <br />
 

package/src/components/FileList/FileList.mdx

@@ -3,9 +3,10 @@ import * as FileListStories from './FileList.stories';
 
 <Meta of={FileListStories} />
 
-# FileList
-
-Le composant `FileList` est utilisé pour afficher une liste de document à téléverser.
+<div className="header">
+  <h1>FileList</h1>
+  <p>Le composant `FileList` est utilisé pour afficher une liste de document à téléverser.</p>
+</div>
 
 <Canvas of={FileListStories.Default} />
 
@@ -15,7 +16,6 @@ Le composant `FileList` est utilisé pour afficher une liste de document à tél
 
 # Exemple d'utilisation
 
-
 ## Les différents états d'un fichier
 
 Un fichier peut être dans différents états : « initial », « success », « error » et « loading ».
@@ -76,6 +76,7 @@ Il est possible de personnaliser les icônes de fichier en utilisant le slot dyn
 					state: 'initial',
 				},
 			])
+import '../../stories/styles/shared.css';
 		</script>
 
 		<FileList

package/src/components/FilePreview/Accessibilite.mdx

@@ -1,10 +1,14 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as AccessStories from './Accessibilite.stories.ts';
+import '../../stories/styles/shared.css';
 
 <Meta of={AccessStories} />
 
-Accessibilité
-=============
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Informations sur l'accessibilité du composant</p>
+</div>
+
 <Story of={AccessStories.Legende} />
 <br />
 

package/src/components/FilePreview/FilePreview.mdx

@@ -1,22 +1,21 @@
 import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+import '../../stories/styles/shared.css';
 
 import * as FilePreviewStories from './FilePreview.stories.ts'
 
 <Meta of={FilePreviewStories} />
 
-
-# FilePreview
-
-L'élément `FilePreview` est utilisé pour afficher l'aperçu d'un fichier.
+<div className="header">
+  <h1>FilePreview</h1>
+  <p>L'élément `FilePreview` est utilisé pour afficher l'aperçu d'un fichier.</p>
+</div>
 
 <Canvas of={FilePreviewStories.Default} />
 
-
 # API
 
 <Controls of={FilePreviewStories.Default} />
 
-
 # Exemple
 
 ## Afficher un fichier depuis une API
@@ -69,7 +68,8 @@ Vous pouvez utiliser ce composant en combinaison avec `FileUpload` pour afficher
 			import { ref } from 'vue'
 			import { FilePreview, FileUpload } from '@cnamts/synapse'
 
-			const files = ref<File[]>([])
+			const files = ref<File[]>
+([])
 		</script>
 		<template>
 			<div>

package/src/components/FileUpload/Accessibilite.mdx

@@ -1,10 +1,14 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as AccessStories from './Accessibilite.stories.ts';
+import '../../stories/styles/shared.css';
 
 <Meta of={AccessStories} />
 
-Accessibilité
-=============
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Informations sur l'accessibilité du composant</p>
+</div>
+
 <Story of={AccessStories.Legende} />
 <br />
 

package/src/components/FileUpload/FileUpload.mdx

@@ -1,12 +1,14 @@
 import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+import '../../stories/styles/shared.css';
 
 import * as FileUploadStories from './FileUpload.stories.ts';
 
 <Meta of={FileUploadStories} />
 
-# FileUpload
-
-Le composant `FileUpload` est un champ d'upload de fichier par glisser-déposer ou par sélection de fichier.
+<div className="header">
+  <h1>FileUpload</h1>
+  <p>Le composant `FileUpload` est un champ d'upload de fichier par glisser-déposer ou par sélection de fichier.</p>
+</div>
 
 <Canvas of={FileUploadStories.Default} />
 
@@ -115,7 +117,8 @@ import express from "express";
 import fileUpload from "express-fileupload";
 import cors from "cors";
 import { join } from "path";
-import { existsSync, mkdirSync } from "fs";
+import { existsSync, mkdirSync } from "
+fs";
 
 const app = express();
 

package/src/components/FilterInline/Accessibilite.mdx

@@ -1,10 +1,14 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as AccessStories from './Accessibilite.stories.ts';
+import '../../stories/styles/shared.css';
 
 <Meta of={AccessStories} />
 
-Accessibilité
-=============
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Informations sur l'accessibilité du composant</p>
+</div>
+
 <Story of={AccessStories.Legende} />
 <br />