@cnamts/synapse 1.0.2 → 1.0.4

package/src/components/Amelipro/AmeliproDialog/AmeliproDialog.vue

@@ -0,0 +1,326 @@
+<script setup lang="ts">
+	import { computed, onUnmounted, onUpdated, ref, watch } from 'vue'
+	import AmeliproBtn from '../AmeliproBtn/AmeliproBtn.vue'
+	import AmeliproIconBtn from '../AmeliproIconBtn/AmeliproIconBtn.vue'
+	import type { IndexedObject } from '../types'
+	import { useDisplay } from 'vuetify'
+
+	const props = defineProps({
+		attach: {
+			type: Boolean,
+			default: false,
+		},
+		cancelBtnLabel: {
+			type: String,
+			default: 'Annuler',
+		},
+		eager: {
+			type: Boolean,
+			default: false,
+		},
+		fullscreen: {
+			type: Boolean,
+			default: false,
+		},
+		hiddenCancelBtn: {
+			type: Boolean,
+			default: false,
+		},
+		labelledby: {
+			type: String,
+			required: true,
+		},
+		mainContentMaxHeight: {
+			type: String,
+			default: undefined,
+		},
+		mainContentMinHeight: {
+			type: String,
+			default: '150px',
+		},
+		modelValue: {
+			type: Boolean,
+			default: false,
+		},
+		noClickOutside: {
+			type: Boolean,
+			default: false,
+		},
+		noFooter: {
+			type: Boolean,
+			default: true,
+		},
+		persistent: {
+			type: Boolean,
+			default: false,
+		},
+		title: {
+			type: String,
+			default: undefined,
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+		validationBtnLabel: {
+			type: String,
+			default: 'Valider',
+		},
+		width: {
+			type: String,
+			default: '800px',
+		},
+	})
+
+	const { smAndUp } = useDisplay()
+	const emit = defineEmits(['change', 'confirm', 'update:model-value'])
+
+	const dialog = computed({
+		get: (): boolean => props.modelValue,
+		set: (newValue: boolean): void => {
+			emit('update:model-value', newValue)
+		},
+	})
+
+	const emitCloseEvent = (closeModal = true): void => {
+		if (!props.persistent && closeModal) {
+			dialog.value = false
+			emit('change', false)
+		}
+	}
+
+	const mainContentStyles = computed((): IndexedObject => {
+		if (props.mainContentMaxHeight) {
+			return {
+				maxHeight: props.mainContentMaxHeight,
+				minHeight: props.mainContentMinHeight,
+				overflowY: 'auto',
+			}
+		}
+
+		return { minHeight: props.mainContentMinHeight }
+	})
+
+	const emitConfirmEvent = (): void => {
+		emit('confirm')
+	}
+
+	// set accessibility attributes on the dialog box
+	const setDialogAttributes = (): void => {
+		const wrapper = document.body.querySelector(`#${props.uniqueId}`)?.parentElement?.parentElement
+		wrapper?.setAttribute('aria-labelledby', props.labelledby)
+		getFocusableElements()
+	}
+
+	// tabbableEl find all focusable elements in the dialog
+	const tabbableEl = ref(document.getElementById(props.uniqueId)?.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'))
+
+	// visibleEl returns visible elements from tabbableEl
+	const visibleEl = computed(() => {
+		if (tabbableEl.value !== undefined) {
+			return Array.from(tabbableEl.value).filter((el: Element) => getComputedStyle(el).getPropertyValue('display') !== 'none' && !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden') && !el.getAttribute('style')?.includes('display: none'))
+		}
+		return undefined
+	})
+
+	// event on tab for last element of the dialogbox and event on tab+shift for the first element of dialogbox
+	const tabEvent = (event: KeyboardEvent, position: string): void => {
+		if (event.code === 'Tab' && event.shiftKey && position === 'first') {
+			event.preventDefault()
+			const element = document.body.querySelector('[data-focusable="last"]') as HTMLElement
+			element?.focus()
+		}
+
+		if (event.code === 'Tab' && position === 'last' && !event.shiftKey) {
+			event.preventDefault()
+			const element = document.body.querySelector('[data-focusable="first"]') as HTMLElement
+			element?.focus()
+		}
+	}
+
+	// get all visible and focusable elements and set attributes on the first and the last one
+	const getFocusableElements = (): void => {
+		if (tabbableEl.value) {
+			const tabbableElArray = Array.from(tabbableEl.value)
+			// reset attributes and events already existing before
+			tabbableElArray.filter((el: Element) => el.hasAttribute('data-focusable')).forEach((el: Element) => {
+				el.removeEventListener('keydown', (e: Event) => tabEvent(e as KeyboardEvent, 'first'))
+				el.removeEventListener('keydown', (e: Event) => tabEvent(e as KeyboardEvent, 'last'))
+				el.removeAttribute('data-focusable')
+			})
+
+			if (visibleEl.value) {
+				const firstFocusable = visibleEl.value[0]
+				const lastFocusable = visibleEl.value[visibleEl.value.length - 1]
+				// set a data-focusable="first" on the first one and a data-focusable="last"
+				firstFocusable?.setAttribute('data-focusable', 'first')
+				lastFocusable?.setAttribute('data-focusable', 'last')
+
+				// set an event on the first and last element to make the focus loop into the dialogbox
+				firstFocusable?.addEventListener('keydown', (e: Event) => tabEvent(e as KeyboardEvent, 'first'))
+				lastFocusable?.addEventListener('keydown', (e: Event) => tabEvent(e as KeyboardEvent, 'last'))
+			}
+		}
+	}
+	// create an observer to check DOM changes and update focus loop elements
+	const observerConfig = { attributes: true, childList: true, subtree: true }
+	const observer = new MutationObserver(() => {
+		tabbableEl.value = document.getElementById(props.uniqueId)?.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')
+	})
+	const openedOnce = ref(false)
+	onUpdated(() => {
+		if (dialog.value) {
+			if (!openedOnce.value) {
+				openedOnce.value = true
+				tabbableEl.value = document.getElementById(props.uniqueId)?.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')
+				observer.observe(document.getElementById(props.uniqueId) as Node, observerConfig)
+			}
+			setDialogAttributes()
+		}
+	})
+
+	watch(() => useDisplay().name, () => {
+		// we reset tabbableEl to update visibleEl which will trigger the secund watch
+		tabbableEl.value = document.getElementById(props.uniqueId)?.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')
+	})
+
+	watch(() => visibleEl.value, () => {
+		// we disconnect the observer and reconnect it after setDialogAttributes to avoid infinite loop
+		observer.disconnect()
+		setDialogAttributes()
+		observer.observe(document.getElementById(props.uniqueId) as Node, observerConfig)
+	})
+
+	onUnmounted(() => observer.disconnect())
+</script>
+
+<template>
+	<VDialog
+		v-model="dialog"
+		:attach="attach"
+		:class="fullscreen ? undefined : 'dialog-radius'"
+		:eager="eager"
+		:fullscreen="fullscreen"
+		:persistent="persistent || noClickOutside"
+		:width="width"
+		@click:outside="noClickOutside ? emitCloseEvent(false) : emitCloseEvent"
+		@keydown.escape="emitCloseEvent"
+	>
+		<div
+			:id="uniqueId"
+			class="bg-ap-white dialog"
+		>
+			<div
+				:id="`${uniqueId}-header`"
+				class="mb-0 w-100 d-flex align-center flex-nowrap dialog__header"
+			>
+				<div class="dialog__title">
+					<slot name="header">
+						<h2
+							v-if="title"
+							:id="`${uniqueId}-title`"
+							class="ma-0 text-h3"
+						>
+							{{ title }}
+						</h2>
+					</slot>
+				</div>
+
+				<AmeliproIconBtn
+					v-if="!persistent"
+					btn-label="Fermer la fenêtre modale"
+					class="ml-auto dialog__close-btn"
+					icon="croix"
+					icon-bg-color="transparent"
+					icon-color="ap-blue-darken-1"
+					icon-hover-bg-color="transparent"
+					icon-hover-color="ap-blue-darken-2"
+					size="40px"
+					:unique-id="`${ uniqueId }-close-btn`"
+					@click="emitCloseEvent"
+				/>
+			</div>
+
+			<div
+				:id="`${uniqueId}-content`"
+				class="w-100 mt-4 dialog__content"
+				:style="mainContentStyles"
+			>
+				<slot />
+			</div>
+
+			<div
+				v-if="$slots.footer || !noFooter"
+				:id="`${uniqueId}-footer`"
+				class="w-100 mt-4 dialog__footer"
+				:class="{
+					'd-flex flex-column flex-sm-row align-center': !$slots.footer,
+					'justify-sm-space-between': !$slots.footer && !hiddenCancelBtn,
+					'justify-sm-end': !$slots.footer && hiddenCancelBtn,
+				}"
+			>
+				<slot name="footer">
+					<AmeliproBtn
+						v-if="!smAndUp"
+						class="mb-4 w-100 dialog__validation-btn--mobile"
+						:unique-id="`${ uniqueId }-validation-btn-mobile`"
+						@click="emitConfirmEvent"
+					>
+						{{ validationBtnLabel }}
+					</AmeliproBtn>
+
+					<AmeliproBtn
+						v-if="!hiddenCancelBtn"
+						bordered
+						class="dialog__cancel-btn"
+						:class="smAndUp ? undefined : 'w-100'"
+						color="ap-white"
+						hover-color="ap-blue-lighten-3"
+						text-color="ap-blue-darken-1"
+						:unique-id="`${ uniqueId }-cancel-btn`"
+						@click="emitCloseEvent"
+					>
+						{{ cancelBtnLabel }}
+					</AmeliproBtn>
+
+					<AmeliproBtn
+						v-if="smAndUp"
+						class="dialog__validation-btn"
+						:unique-id="`${ uniqueId }-validation-btn-desktop`"
+						@click="emitConfirmEvent"
+					>
+						{{ validationBtnLabel }}
+					</AmeliproBtn>
+				</slot>
+			</div>
+		</div>
+	</VDialog>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.v-dialog {
+	& :deep(.v-overlay__content) {
+		overflow-y: auto !important;
+	}
+
+	&.dialog-radius :deep(.v-overlay__content) {
+		border-radius: apTokens.$card-radius;
+	}
+}
+
+.dialog {
+	padding: apTokens.$dialog-padding;
+}
+
+.dialog__header {
+	padding-bottom: 0.5rem;
+	border-bottom: 1px solid apTokens.$ap-grey-lighten3;
+}
+
+.dialog__title {
+	width: calc(100% - 60px);
+	font-size: apTokens.$font-size-lg;
+}
+</style>

package/src/components/Amelipro/AmeliproDialog/tests/AmeliproDialog.spec.ts

@@ -0,0 +1,26 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import AmeliproDialog from '../AmeliproDialog.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('AmeliproDialog', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproDialog, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					VDialog: {
+						template: '<div><slot></slot></div>',
+					},
+				},
+			},
+			props: {
+				modelValue: true,
+				labelledby: 'amelipro-dialog-id-title',
+				uniqueId: 'amelipro-dialog-id',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

package/src/components/Amelipro/AmeliproDialog/tests/__snapshots__/AmeliproDialog.spec.ts.snap

@@ -0,0 +1,133 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproDialog > render correctly 1`] = `
+<div
+  attach="false"
+  class="dialog-radius"
+  eager="false"
+  fullscreen="false"
+  modelvalue="true"
+  persistent="false"
+  width="800px"
+>
+  <div
+    class="
+      bg-ap-white
+      dialog
+    "
+    id="amelipro-dialog-id"
+  >
+    <div
+      class="
+        align-center
+        d-flex
+        dialog__header
+        flex-nowrap
+        mb-0
+        w-100
+      "
+      id="amelipro-dialog-id-header"
+    >
+      <div class="dialog__title">
+        <!-- v-if -->
+      </div>
+      <button
+        class="
+          btn--icon
+          dialog__close-btn
+          elevation-0
+          ml-auto
+          rounded-0
+          v-btn
+          v-btn--density-default
+          v-btn--elevated
+          v-btn--icon
+          v-btn--size-default
+          v-btn--variant-elevated
+          v-theme--light
+        "
+        id="amelipro-dialog-id-close-btn"
+        plain=""
+        style="
+          height: auto;
+          width: auto;
+        "
+        type="button"
+      >
+        <span class="v-btn__overlay"></span>
+        <span class="v-btn__underlay"></span>
+        <!---->
+        <span
+          class="v-btn__content"
+          data-no-activator=""
+        >
+          <span
+            class="d-sr-only"
+            id="amelipro-dialog-id-close-btn-btn-label"
+          >
+            Fermer la fenêtre modale
+          </span>
+          <span
+            class="
+              amelipro-icon
+              icon-custom
+            "
+            id="amelipro-dialog-id-close-btn-icon"
+          >
+            <span
+              aria-hidden="true"
+              class="
+                amelipro-custom-icon
+                custom-color
+              "
+              focusable="false"
+              role="img"
+              style="
+                color: #00749C;
+                height: 40px;
+                width: 40px;
+              "
+            >
+              <span>
+                <svg
+                  aria-hidden="true"
+                  style="enable-background:new 0 0 24 24;"
+                  viewBox="0 0 24 24"
+                  x="0px"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  y="0px"
+                >
+                  <circle
+                    class="circle-color"
+                    cx="12"
+                    cy="12"
+                    r="12"
+                  />
+                  <polygon
+                    class="shape-color"
+                    points="15.3,16.7 12,13.4 8.7,16.7 7.3,15.3 10.6,12 7.3,8.7 8.7,7.3 12,10.6 15.3,7.3 16.7,8.7 13.4,12 16.7,15.3 "
+                  />
+                </svg>
+              </span>
+            </span>
+          </span>
+        </span>
+        <!---->
+        <!---->
+      </button>
+    </div>
+    <div
+      class="
+        dialog__content
+        mt-4
+        w-100
+      "
+      id="amelipro-dialog-id-content"
+      style="min-height: 150px;"
+    ></div>
+    <!-- v-if -->
+  </div>
+</div>
+`;

package/src/components/Amelipro/AmeliproDisclosure/AmeliproDisclosure.mdx

@@ -0,0 +1,15 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+
+import * as AmeliproDisclosureStories from './AmeliproDisclosure.stories';
+
+<Meta of={AmeliproDisclosureStories} />
+
+# AmeliproDisclosure
+
+L’élément `AmeliproDisclosure` est utilisé pour créer des blocs dépliables sans carte
+
+<Canvas of={AmeliproDisclosureStories.Default}  />
+
+## API
+
+<Controls of={AmeliproDisclosureStories.Default} />

package/src/components/Amelipro/AmeliproDisclosure/AmeliproDisclosure.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AmeliproDisclosure from './AmeliproDisclosure.vue'
+
+const meta = {
+	argTypes: {
+		default: { description: 'Contenu du panneau dépliant' },
+		isOpen: { description: 'Défini si le panneau dépliant est ouvert au chargement du composant' },
+		title: { description: 'Titre du panneau dépliant' },
+		uniqueId: { description: 'Identifiant unique du panneau dépliant' },
+	},
+	component: AmeliproDisclosure,
+	title: 'Composants/Amelipro/Blocs dépliants/AmeliproDisclosure',
+} as Meta<typeof AmeliproDisclosure>
+
+export default meta
+
+type Story = StoryObj<typeof AmeliproDisclosure>
+
+export const Default: Story = {
+	args: {
+		default: '[Slot: default]',
+		title: 'Mon titre',
+		uniqueId: 'amelipro-disclosure-unique-id',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproDisclosure
+		title="Mon titre"
+		unique-id="amelipro-disclosure-unique-id"
+	>
+		[Slot: default]
+	</AmeliproDisclosure>
+</template>`,
+			},
+			{
+				name: 'Scripts',
+				code: `<script setup lang="ts">
+	import { AmeliproDisclosure } from '@cnamts/synapse'
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproDisclosure },
+		setup() {
+			return { args }
+		},
+		template: `
+<AmeliproDisclosure
+	v-bind="args"
+>
+	{{ args.default }}
+</AmeliproDisclosure>`,
+	}),
+}

package/src/components/Amelipro/AmeliproDisclosure/AmeliproDisclosure.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+	import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
+	import AmeliproBtn from '../AmeliproBtn/AmeliproBtn.vue'
+	import { ref } from 'vue'
+
+	const props = defineProps({
+		isOpen: {
+			type: Boolean,
+			default: false,
+		},
+		title: {
+			type: String,
+			required: true,
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+	})
+
+	const opened = ref(props.isOpen)
+</script>
+
+<template>
+	<div
+		:id="`${uniqueId}-container`"
+		class="w-100 mb-3 amelipro-disclosure"
+	>
+		<AmeliproBtn
+			:aria-controls="uniqueId"
+			:aria-expanded="opened ? 'true' : 'false'"
+			class="text-none amelipro-disclosure__btn"
+			hover-underline
+			text
+			type="button"
+			:unique-id="`${uniqueId}-open-close-btn`"
+			@click="opened = !opened"
+		>
+			{{ title }}
+
+			<template
+				v-if="!opened"
+				#icon
+			>
+				{{ mdiChevronDown }}
+			</template>
+
+			<template
+				v-else
+				#icon
+			>
+				{{ mdiChevronUp }}
+			</template>
+		</AmeliproBtn>
+
+		<div
+			v-show="opened === true"
+			:id="uniqueId"
+			class="amelipro-disclosure__content"
+		>
+			<slot />
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.accordion-btn {
+	padding: 0;
+	background-color: transparent;
+	border: 0;
+
+	&:focus {
+		outline: 1px dotted apTokens.$ap-grey-darken1;
+	}
+}
+</style>

package/src/components/Amelipro/AmeliproDisclosure/tests/AmeliproDisclosure.spec.ts

@@ -0,0 +1,23 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import AmeliproDisclosure from '../AmeliproDisclosure.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('AmeliproDisclosure', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproDisclosure, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				title: 'titre disclosure',
+				uniqueId: 'my-disclosure-id',
+			},
+			slots: {
+				default: 'Contenu disclosure',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})