@cnamts/synapse 0.0.16-alpha → 1.0.1

package/src/components/DiacriticPicker/locales.ts

@@ -0,0 +1,6 @@
+export const locales = {
+	inputAriaLabel: 'Champ de saisie avec diacritiques',
+	title: 'caractères accentués',
+	uppercaseChars: 'Caractères majuscules',
+	lowercaseChars: 'Caractères minuscules',
+}

package/src/components/DiacriticPicker/tests/DiatriticPicker.spec.ts

@@ -0,0 +1,132 @@
+/* eslint-disable vue/one-component-per-file */
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+import { ref, nextTick, defineComponent, h } from 'vue'
+import DiacriticPicker from '../DiacriticPicker.vue'
+
+const defaultProps = {
+	modelValue: '',
+	diacritics: ['á', 'à', 'â', 'ä'],
+}
+
+describe('DiacriticPicker.vue', () => {
+	let wrapper: ReturnType<typeof mount>
+
+	beforeEach(async () => {
+		// Mount component with a slot containing an input
+		wrapper = mount(DiacriticPicker, {
+			props: defaultProps,
+			slots: {
+				default: `<input id="diacritic-input-${Math.random().toString(36).substr(2, 9)}" type="text" value="a" />`,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		await nextTick()
+	})
+
+	it('renders the diacritic button', () => {
+		const btn = wrapper.find('.sy-diacritic-btn')
+		expect(btn.exists()).toBe(true)
+	})
+
+	it('initially hides the dialog', () => {
+		const dialog = wrapper.find('.sy-diacritic-dialog')
+		expect(dialog.exists()).toBe(false)
+	})
+
+	it('shows dialog when button is clicked', async () => {
+		await wrapper.find('.sy-diacritic-btn').trigger('click')
+		await nextTick()
+
+		expect(wrapper.findComponent({ name: 'VDialog' }).vm.$props.modelValue).toBe(true)
+	})
+
+	it('inserts selected character into the input', async () => {
+		const model = ref('a')
+
+		const wrapper = mount(DiacriticPicker, {
+			global: { plugins: [vuetify] },
+			props: {
+				modelValue: model.value,
+				onUpdateModelValue: (val: string) => {
+					model.value = val
+				},
+				diacritics: ['á', 'à', 'â', 'ä'],
+			},
+			slots: {
+				default: defineComponent({
+					setup() {
+						return () => h('input', {
+							id: 'sy-diacritic-input',
+							value: model.value,
+						})
+					},
+				}),
+			},
+		})
+
+		await wrapper.find('.sy-diacritic-btn').trigger('click')
+		await nextTick()
+
+		const buttons = wrapper.findAllComponents({ name: 'VBtn' })
+		const button = buttons.find(btn => btn.text() === 'á')
+		expect(button).toBeTruthy()
+
+		await button!.trigger('click')
+		await nextTick()
+
+		expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe('aá')
+	})
+
+	it('sets correct ARIA attributes', () => {
+		const btn = wrapper.find('.sy-diacritic-btn')
+		expect(btn.attributes('aria-haspopup')).toBe('dialog')
+		expect(btn.attributes('aria-expanded')).toBe('false')
+		expect(btn.attributes('aria-controls')).toContain('diacritic-dialog')
+	})
+
+	it('closes dialog on click:outside', async () => {
+		await wrapper.find('.sy-diacritic-btn').trigger('click')
+		await nextTick()
+
+		const card = wrapper.findComponent({ name: 'VCard' })
+		await card.trigger('click:outside')
+		await nextTick()
+
+		expect(wrapper.findComponent({ name: 'VDialog' }).vm.$props.modelValue).toBe(false)
+	})
+
+	it('selects next diacritic on keydown', async () => {
+		const model1 = ref('a')
+
+		const wrapper = mount(DiacriticPicker, {
+			global: { plugins: [vuetify] },
+			props: {
+				modelValue: model1.value,
+				onUpdateModelValue: (val: string) => {
+					model1.value = val
+				},
+				diacritics: ['á', 'à', 'â', 'ä'],
+			},
+			slots: {
+				default: defineComponent({
+					setup() {
+						return () => h('input', {
+							id: 'sy-diacritic-input',
+							value: model1.value,
+						})
+					},
+				}),
+			},
+		})
+
+		const input = wrapper.find('#sy-diacritic-input')
+		await input.trigger('keydown', { key: '=' })
+		await nextTick()
+
+		expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe('á')
+	})
+})

package/src/components/DialogBox/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/DialogBox/DialogBox.vue

@@ -50,12 +50,10 @@
 			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
 		))
 
-		const filteredElements = elements.filter(element => (
+		return elements.filter(element => (
 			!element.hasAttribute('disabled')
 			&& !element.getAttribute('aria-hidden')
 		))
-
-		return filteredElements
 	}
 
 	async function handleFocus(e: KeyboardEvent): Promise<void> {

package/src/components/DownloadBtn/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/ErrorPage/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/ExternalLinks/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/FileList/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/FilePreview/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 ]

package/src/components/FileUpload/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 ]

package/src/components/FilterInline/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/FilterSideBar/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/FilterSideBar/FilterSideBar.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-	import { computed, ref, toRef } from 'vue'
+	import { computed, ref, toRef, watch } from 'vue'
 	import { locales as defaultLocales } from './locales'
 	import { mdiFilterVariant } from '@mdi/js'
 	import ChipList from '../ChipList/ChipList.vue'
 	import type { FilterProp } from '@/composables/useFilterable/useFilterable'
 	import useFilterable from '@/composables/useFilterable/useFilterable'
+	import { type VBtn, type VNavigationDrawer } from 'vuetify/components'
 
 	const props = withDefaults(defineProps<{
 		modelValue?: FilterProp
@@ -37,6 +38,9 @@
 		}, 0)
 	})
 
+	const drawerRef = ref<VNavigationDrawer | null>(null)
+	const drawerBtnRef = ref<VBtn | null>(null)
+
 	function toggleDrawer(): void {
 		drawer.value = !drawer.value
 	}
@@ -46,11 +50,20 @@
 		drawer.value = false
 	}
 
+	watch(drawer, (e) => {
+		if (e) {
+			drawerRef!.value!.$el.nextElementSibling.focus()
+		}
+		else {
+			drawerBtnRef.value!.$el.focus()
+		}
+	})
 </script>
 
 <template>
 	<div class="sy-filters-side-bar">
 		<VBtn
+			ref="drawerBtnRef"
 			class="px-8 py-3"
 			:class="{ 'v-btn--active': drawer }"
 			color="primary"
@@ -76,100 +89,105 @@
 				{{ mdiFilterVariant }}
 			</VIcon>
 		</VBtn>
-
-		<VNavigationDrawer
-			:model-value="drawer"
-			sticky
-			temporary
-			location="right"
-			rounded="0"
-			:scrim="false"
-			rail
-			rail-width="395"
-			disable-resize-watcher
-			class="elevation-6"
+		<Teleport
+			to="body"
 		>
-			<VExpansionPanels variant="accordion">
-				<VExpansionPanel
-					v-for="filter in filters"
-					:key="filter.name"
-					:class="`vd-filter-${filter.name}`"
-					tile
-					elevation="0"
-				>
-					<VExpansionPanelTitle class="text-subtitle-2">
-						{{ filter.title }}
-
-						<span
-							v-if="getFilterCount(filter)"
-							class="ml-1"
-						>
-							({{ getFilterCount(filter) }})
-						</span>
-					</VExpansionPanelTitle>
-
-					<VExpansionPanelText>
-						<ChipList
-							:items="getChips(filter)"
-							:overflow-limit="filter.chipOverflowLimit"
-							class="mb-5"
-							:vuetify-options="{ chip: { color: 'secondary' }, icon: { color: 'white'} }"
-							@remove="removeChip(filter, $event)"
-							@reset="resetFilter(filter)"
-						/>
-
-						<slot
-							:name="`${formatFilterName(filter.name)}`"
-							:props="{
-								modelValue: filter.value as any,
-								'onUpdate:modelValue': (value: unknown) =>
-									(filter.value = value),
-							}"
-						/>
-					</VExpansionPanelText>
-				</VExpansionPanel>
-			</VExpansionPanels>
-
-			<VSpacer />
-
-			<div class="px-4 pb-4 pt-10">
-				<VBtn
-					color="primary"
-					block
-					size="large"
-					variant="outlined"
-					class="mb-4"
-					@click="drawer = false"
-				>
-					{{ locales.close }}
-				</VBtn>
-
-				<VBtn
-					color="primary"
-					block
-					size="large"
-					variant="outlined"
-					class="mb-4"
-					@click.stop="resetAllFilters"
-				>
-					{{ locales.reset }}
-				</VBtn>
-
-				<VBtn
-					block
-					size="large"
-					color="primary"
-					@click.stop="applyFilters"
-				>
-					{{ locales.apply }}
-				</VBtn>
-			</div>
-		</VNavigationDrawer>
+			<VNavigationDrawer
+				ref="drawerRef"
+				:model-value="drawer"
+				sticky
+				temporary
+				location="right"
+				rounded="0"
+				:scrim="false"
+				rail
+				rail-width="395"
+				disable-resize-watcher
+				tabindex="0"
+				class="sy-filters-side-bar__content elevation-6 bg-white"
+			>
+				<VExpansionPanels variant="accordion">
+					<VExpansionPanel
+						v-for="filter in filters"
+						:key="filter.name"
+						:class="`vd-filter-${filter.name}`"
+						tile
+						elevation="0"
+					>
+						<VExpansionPanelTitle class="text-subtitle-2">
+							{{ filter.title }}
+
+							<span
+								v-if="getFilterCount(filter)"
+								class="ml-1"
+							>
+								({{ getFilterCount(filter) }})
+							</span>
+						</VExpansionPanelTitle>
+
+						<VExpansionPanelText>
+							<ChipList
+								:items="getChips(filter)"
+								:overflow-limit="filter.chipOverflowLimit"
+								class="mb-5"
+								:vuetify-options="{ chip: { color: 'secondary' }, icon: { color: 'white'} }"
+								@remove="removeChip(filter, $event)"
+								@reset="resetFilter(filter)"
+							/>
+
+							<slot
+								:name="`${formatFilterName(filter.name)}`"
+								:props="{
+									modelValue: filter.value as any,
+									'onUpdate:modelValue': (value: unknown) =>
+										(filter.value = value),
+								}"
+							/>
+						</VExpansionPanelText>
+					</VExpansionPanel>
+				</VExpansionPanels>
+
+				<VSpacer />
+
+				<div class="px-4 pb-4 pt-10">
+					<VBtn
+						color="primary"
+						block
+						size="large"
+						variant="outlined"
+						class="mb-4"
+						@click="drawer = false"
+					>
+						{{ locales.close }}
+					</VBtn>
+
+					<VBtn
+						color="primary"
+						block
+						size="large"
+						variant="outlined"
+						class="mb-4"
+						@click.stop="resetAllFilters"
+					>
+						{{ locales.reset }}
+					</VBtn>
+
+					<VBtn
+						block
+						size="large"
+						color="primary"
+						@click.stop="applyFilters"
+					>
+						{{ locales.apply }}
+					</VBtn>
+				</div>
+			</VNavigationDrawer>
+		</Teleport>
 	</div>
 </template>
 
 <style lang="scss" scoped>
-.sy-filters-side-bar :deep() {
+.sy-filters-side-bar__content :deep() {
 	.v-navigation-drawer {
 		&__content {
 			display: flex;

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

@@ -53,6 +53,9 @@ describe('FilterSideBar', () => {
 		const wrapper = mount(TestComponent, {
 			global: {
 				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
 			},
 			props: {
 				modelValue: [],
@@ -75,6 +78,9 @@ describe('FilterSideBar', () => {
 			},
 			global: {
 				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
 			},
 		})
 
@@ -103,6 +109,9 @@ describe('FilterSideBar', () => {
 			},
 			global: {
 				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
 			},
 		})
 
@@ -122,6 +131,9 @@ describe('FilterSideBar', () => {
 			},
 			global: {
 				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
 			},
 		})
 
@@ -154,6 +166,9 @@ describe('FilterSideBar', () => {
 			},
 			global: {
 				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
 			},
 		})
 
@@ -172,6 +187,9 @@ describe('FilterSideBar', () => {
 			},
 			global: {
 				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
 			},
 		})
 
@@ -204,6 +222,9 @@ describe('FilterSideBar', () => {
 			},
 			global: {
 				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
 			},
 		})
 
@@ -247,6 +268,9 @@ describe('FilterSideBar', () => {
 			},
 			global: {
 				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
 			},
 		})
 
@@ -290,6 +314,9 @@ describe('FilterSideBar', () => {
 			},
 			global: {
 				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
 			},
 		})