@cnamts/synapse 1.0.8 → 1.0.9

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

@@ -113,6 +113,18 @@ const meta: Meta<typeof DialogBox> = {
 				},
 			},
 		},
+		'draggable': {
+			control: 'boolean',
+			description: 'Rendre la boîte de dialogue déplaçable avec la souris ou les flèches gauche/droite du clavier',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+				defaultValue: {
+					summary: 'false',
+				},
+			},
+		},
 		'vuetifyOptions': {
 			control: 'object',
 			description: 'Personnalisation des composants Vuetify internes',
@@ -811,3 +823,74 @@ export const VuetifyOptions: Story = {
 		],
 	},
 }
+
+export const Draggable: Story = {
+	args: {
+		'modelValue': false,
+		'title': 'DialogBox title',
+		'default': 'DialogBox content',
+		'draggable': true,
+		'onCancel': fn(),
+		'onConfirm': fn(),
+		'onUpdate:modelValue': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { DialogBox, VBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="pa-4">
+					<VBtn
+						@click="args.modelValue = !args.modelValue"
+						color="primary"
+					>Toggle DialogBox</VBtn>
+					<DialogBox
+						v-bind="args"
+						@update:modelValue="args.modelValue = $event"
+						@confirm="args.modelValue = false"
+						@cancel="args.modelValue = false"
+					>
+						{{ args.default }}
+					</DialogBox>
+				</div>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VBtn
+						color="primary"
+						@click="dialogOpen = !dialogOpen"
+					>Toggle DialogBox</VBtn>
+					<DialogBox
+						v-model="dialogOpen"
+						title="DialogBox title"
+						draggable
+						@confirm="dialogOpen = false"
+						@cancel="dialogOpen = false"
+					>
+						DialogBox content
+					</DialogBox>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { DialogBox } from '@cnamts/synapse'
+					import { ref } from 'vue'
+
+					const dialogOpen = ref(false)
+				</script>
+				`,
+			},
+		],
+	},
+}

package/src/components/DialogBox/DialogBox.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { mdiClose } from '@mdi/js'
-	import { ref, useId, watch, nextTick } from 'vue'
+	import { nextTick, ref, toRef, useId, watch } from 'vue'
 	import type { VBtn, VDialog } from 'vuetify/components'
-	import { config } from './config'
-	import { locales } from './locales'
 	import { useDisplay } from 'vuetify/lib/framework.mjs'
 	import SyIcon from '../Customs/SyIcon/SyIcon.vue'
+	import { config } from './config'
+	import { locales } from './locales'
+	import { useDraggable } from './useDraggable'
 
 	const props = withDefaults(defineProps<{
 		title?: string
@@ -16,6 +17,7 @@
 		hideActions?: boolean
 		persistent?: boolean
 		autofocusValidateBtn?: boolean
+		draggable?: boolean
 	} & CustomizableOptions>(), {
 		title: undefined,
 		width: '800px',
@@ -100,11 +102,18 @@
 
 	const display = useDisplay()
 
+	const {
+		isGrabbing,
+		startDragging,
+		moveToLeft,
+		moveToRight,
+	} = useDraggable(toRef(props, 'draggable'), dialogContent)
 </script>
 
 <template>
 	<VDialog
 		v-model="dialog"
+		:scrim="props.draggable ? false : true"
 		v-bind="$attrs"
 		:width="props.width"
 		:persistent="props.persistent"
@@ -113,13 +122,24 @@
 		class="sy-dialog-box"
 		:aria-labelledby="id"
 		@keydown.tab="handleFocus"
+		@keydown.left="moveToLeft"
+		@keydown.right="moveToRight"
 	>
 		<VCard
 			v-bind="options.card"
-			id="dialog-content"
 			ref="dialogContent"
+			:class="{
+				'sy-dialog-box-draggable': props.draggable,
+				'sy-dialog-box-draggable--active': props.draggable && isGrabbing,
+			}"
+			:aria-label="props.draggable ? locales.draggable : undefined"
 		>
-			<VCardTitle v-bind="options.cardTitle">
+			<VCardTitle
+				class="sy-dialog-box-title"
+				v-bind="options.cardTitle"
+				:title="props.draggable ? locales.dragInstruction : undefined"
+				@mousedown="startDragging"
+			>
 				<slot name="title">
 					<h2
 						v-if="title"
@@ -146,7 +166,13 @@
 					/>
 				</VBtn>
 			</VCardTitle>
-			<slot />
+
+			<div
+				class="px-6"
+				v-bind="options.cardText"
+			>
+				<slot />
+			</div>
 
 			<div
 				v-if="!props.hideActions"
@@ -239,6 +265,15 @@ h2 {
 	gap: $spacing-small;
 }
 
+.sy-dialog-box-draggable .sy-dialog-box-title {
+	cursor: grab;
+}
+
+.sy-dialog-box-draggable--active .sy-dialog-box-title {
+	cursor: grabbing;
+	user-select: none;
+}
+
 @media screen and (min-width: $container-mobile-max-width) {
 	.sy-dialog-box-actions-ctn {
 		flex-direction: row;

package/src/components/DialogBox/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/DialogBox/config.ts

@@ -1,9 +1,9 @@
 export const config = {
 	card: {
-		class: 'pa-6',
+		class: 'pa-0 pb-6',
 	},
 	cardTitle: {
-		class: 'd-flex align-start flex-nowrap pa-0 mb-6 mr-6',
+		class: 'd-flex align-start flex-nowrap pa-0 pt-6 mb-6 px-6',
 	},
 	closeBtn: {
 		icon: true,
@@ -13,7 +13,7 @@ export const config = {
 		class: 'mt-n2 mr-n2 ml-4',
 	},
 	cardActions: {
-		class: 'd-flex flex-wrap mt-6',
+		class: 'd-flex flex-wrap mt-6 px-6',
 	},
 	cancelBtn: {
 		color: 'primary',

package/src/components/DialogBox/locales.ts

@@ -2,4 +2,6 @@ export const locales = {
 	closeBtn: 'Fermer la boîte de dialogue',
 	cancelBtn: 'Annuler',
 	confirmBtn: 'Valider',
+	draggable: 'Déplaçable',
+	dragInstruction: 'Déplacer la boîte de dialogue',
 }

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 />