@cnamts/synapse 1.0.1 → 1.0.3

package/src/components/Amelipro/AmeliproMessage/AmeliproMessage.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+	import { computed, onMounted, ref } from 'vue'
+	import AmeliproIcon from '../AmeliproIcon/AmeliproIcon.vue'
+	import AmeliproIconBtn from '../AmeliproIconBtn/AmeliproIconBtn.vue'
+	import { AmeliproMessageTypes } from './AmeliproMessageTypes'
+	import { convertToHex } from '@/utils/functions/convertToHex'
+
+	const props = defineProps({
+		alignStart: {
+			type: Boolean,
+			default: false,
+		},
+		borderLeftMessage: {
+			type: Boolean,
+			default: false,
+		},
+		borderLeftMessageTitle: {
+			type: String,
+			default: undefined,
+		},
+		color: {
+			type: String,
+			default: undefined,
+		},
+		dark: {
+			type: Boolean,
+			default: false,
+		},
+		dismissible: {
+			type: Boolean,
+			default: false,
+		},
+		icon: {
+			type: String,
+			default: undefined,
+		},
+		iconBgColor: {
+			type: String,
+			default: undefined,
+		},
+		iconColor: {
+			type: String,
+			default: undefined,
+		},
+		maxWidth: {
+			type: String,
+			default: undefined,
+		},
+		noIcon: {
+			type: Boolean,
+			default: false,
+		},
+		text: {
+			type: Boolean,
+			default: false,
+		},
+		textColor: {
+			type: String,
+			default: undefined,
+		},
+		type: {
+			default: 'info',
+			type: String,
+			validator(value: string): boolean {
+				return ['info', 'error', 'warning', 'success'].includes(value.toLowerCase())
+			},
+		},
+		uniqueId: {
+			type: String,
+			default: undefined,
+		},
+		value: {
+			type: Boolean,
+			default: true,
+		},
+		width: {
+			type: String,
+			default: '100%',
+		},
+	})
+
+	const variant = computed<NonNullable<'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'> | undefined>(() => (props.text ? 'text' : 'flat'))
+	const visible = ref(props.value)
+	const role = computed(() => (props.type === 'error' ? 'alert' : undefined))
+	const iconName = computed(() => props.icon || AmeliproMessageTypes[props.type].icon)
+
+	const colorValue = computed(() => {
+		if (props.text) {
+			return convertToHex(props.textColor
+				|| AmeliproMessageTypes[props.type].textColor
+				|| props.color
+				|| AmeliproMessageTypes[props.type].color)
+		}
+		return convertToHex(props.color || AmeliproMessageTypes[props.type].color)
+	})
+
+	const colorBorderLeftMessageTitle = computed(() => convertToHex(props.textColor
+		|| AmeliproMessageTypes[props.type].textColor
+		|| props.color
+		|| AmeliproMessageTypes[props.type].color))
+
+	const iconBgColorValue = computed(() => props.iconBgColor || AmeliproMessageTypes[props.type].iconBgColor || AmeliproMessageTypes[props.type].color)
+
+	const iconColorValue = computed(() => props.iconColor || 'ap-white')
+
+	const isDark = computed(() => props.dark || AmeliproMessageTypes[props.type].type === 'dark')
+
+	const iconCloseColor = computed(() => {
+		if (isDark.value || props.text || props.borderLeftMessage) {
+			return convertToHex('ap-grey-darken-1')
+		}
+		return convertToHex('ap-white')
+	})
+
+	const emit = defineEmits(['click:close'])
+
+	const emitCloseEvent = () => {
+		visible.value = false
+		emit('click:close')
+	}
+
+	onMounted(() => {
+		visible.value = props.value
+	})
+</script>
+
+<template>
+	<VAlert
+		:id="uniqueId"
+		v-model="visible"
+		:border="borderLeftMessage ? 'start' : undefined"
+		:border-color="borderLeftMessage ? colorValue : undefined"
+		class="text-body-1 amelipro-message"
+		:class="{
+			'text-ap-white': !isDark && !text,
+			'text-ap-grey-darken-1': isDark && !text,
+			'pa-0': text,
+			'pa-3 pa-sm-4': !text && !borderLeftMessage,
+			'amelipro-message__radius': !text,
+			'message-align-start': alignStart,
+			'px-6 py-3 bg-ap-grey-lighten-6': borderLeftMessage,
+		}"
+		:color="colorValue"
+		dense
+		elevation="0"
+		:max-width="maxWidth"
+		:role="role"
+		:variant="variant"
+		:width="width"
+		v-bind="$attrs"
+	>
+		<template
+			v-if="!noIcon && !borderLeftMessage"
+			#prepend
+		>
+			<AmeliproIcon
+				bordered
+				class="mr-2 amelipro-message__icon"
+				:icon="iconName"
+				:icon-bg-color="iconBgColorValue"
+				:icon-color="isDark ? 'ap-grey-darken-1' : iconColorValue"
+				large
+				:unique-id="uniqueId ? `${uniqueId}-icon` : undefined"
+			/>
+		</template>
+
+		<slot name="default">
+			<div class="w-100 d-flex align-center mb-2">
+				<AmeliproIcon
+					v-if="!noIcon && borderLeftMessage"
+					class="mr-2 amelipro-message__icon"
+					:icon="iconName"
+					:icon-bg-color="iconBgColorValue"
+					:icon-color="isDark ? 'ap-grey-darken-1' : iconColorValue"
+					large
+					:unique-id="uniqueId ? `${uniqueId}-icon` : undefined"
+				/>
+
+				<p
+					v-if="borderLeftMessageTitle"
+					class="text-h5 mb-0"
+					:style="`color: ${colorBorderLeftMessageTitle};`"
+				>
+					{{ borderLeftMessageTitle }}
+				</p>
+			</div>
+
+			<slot name="borderLeftMessageContent" />
+		</slot>
+
+		<template
+			v-if="dismissible"
+			#close
+		>
+			<AmeliproIconBtn
+				btn-label="Fermer le message"
+				class="amelipro-message__close-btn"
+				icon="closeNoCircle"
+				icon-bg-color="transparent"
+				:icon-color="iconCloseColor"
+				icon-hover-bg-color="transparent"
+				:icon-hover-color="iconCloseColor"
+				large
+				title="Fermer le message"
+				:unique-id="uniqueId ? `${uniqueId}-dismiss-btn` : undefined"
+				@click="emitCloseEvent"
+			/>
+		</template>
+	</VAlert>
+</template>
+
+<style lang="scss" scoped>
+.v-alert--text {
+	&::before {
+		background-color: transparent !important;
+		opacity: 1 !important;
+	}
+}
+
+.v-alert {
+	display: flex;
+	line-height: 1.4;
+
+	& :deep(.v-alert__prepend) {
+		margin-inline-end: 0;
+	}
+
+	& :deep(.v-alert__border) {
+		opacity: 1 !important;
+		border-left-width: 12px !important;
+	}
+
+	& :deep(.v-alert__content) {
+		width: 100% !important;
+	}
+
+	&.amelipro-message__radius {
+		border-radius: 12px !important;
+	}
+
+	&.message-align-start {
+		align-items: flex-start;
+
+		& :deep(.v-alert__content) {
+			align-self: flex-start;
+		}
+	}
+
+	:deep(button):focus {
+		outline-color: v-bind(iconCloseColor) !important;
+	}
+}
+</style>

package/src/components/Amelipro/AmeliproMessage/AmeliproMessageTypes.ts

@@ -0,0 +1,26 @@
+import type { MessageTypes } from './types'
+
+export const AmeliproMessageTypes: MessageTypes = {
+	error: {
+		color: 'ap-red',
+		icon: 'sensInterdit',
+		type: 'light',
+	},
+	info: {
+		color: 'ap-parme-darken-1',
+		icon: 'information',
+		type: 'light',
+	},
+	success: {
+		color: 'ap-turquoise-darken-1',
+		icon: 'check',
+		type: 'light',
+	},
+	warning: {
+		color: 'ap-yellow',
+		icon: 'exclamation',
+		iconBgColor: 'ap-yellow',
+		textColor: 'ap-yellow-darken-4',
+		type: 'dark',
+	},
+}

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

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

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

@@ -0,0 +1,85 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproMessage > render correctly 1`] = `
+<div
+  class="
+    amelipro-message
+    amelipro-message__radius
+    elevation-0
+    pa-3
+    pa-sm-4
+    text-ap-white
+    text-body-1
+    v-alert
+    v-alert--density-default
+    v-alert--variant-flat
+    v-theme--light
+  "
+  dense=""
+  id="my-message-id"
+  style="background-color: #4D547D; color: #fff; caret-color: #fff; width: 100%;"
+>
+  <!---->
+  <span class="v-alert__underlay"></span>
+  <!---->
+  <div class="v-alert__prepend">
+    <span
+      class="
+        amelipro-icon
+        amelipro-message__icon
+        mr-2
+      "
+      id="my-message-id-icon"
+    >
+      <span
+        aria-hidden="true"
+        class="
+          amelipro-custom-icon
+          custom-color
+          large
+        "
+        focusable="false"
+        role="img"
+        style="color: #FFFFFF; border-radius: 50%; border: 1px solid #FFFFFF;"
+      >
+        <span>
+          <svg
+            aria-hidden="true"
+            style="enable-background:new 0 0 24 24;"
+            version="1.1"
+            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"
+            />
+            <g class="shape-color">
+              <rect
+                height="7.2"
+                width="2.4"
+                x="10.8"
+                y="10.8"
+              />
+              <path d="M11.1,6.3c-0.2,0.2-0.3,0.5-0.3,0.9c0,0.3,0.1,0.6,0.3,0.9c0.2,0.2,0.5,0.3,0.9,0.3c0.3,0,0.6-0.1,0.9-0.3s0.3-0.5,0.3-0.9c0-0.3-0.1-0.6-0.3-0.9C12.6,6.1,12.3,6,12,6C11.7,6,11.4,6.1,11.1,6.3z" />
+            </g>
+          </svg>
+        </span>
+      </span>
+    </span>
+  </div>
+  <div class="v-alert__content">
+    <!---->
+    <!---->
+    Contenu de mon Message
+  </div>
+  <!---->
+  <!---->
+</div>
+`;

package/src/components/Amelipro/AmeliproMessage/types.d.ts

@@ -0,0 +1,7 @@
+export type MessageTypes = Record<string, {
+	icon: string
+	textColor?: string
+	iconBgColor?: string
+	color: string
+	type: string
+}>

package/src/components/Amelipro/AmeliproMessagingLayout/AmeliproDropdownMenu/AmeliproDropdownMenu.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+	import { type PropType, computed, ref } from 'vue'
+	import AmeliproBtn from '../../AmeliproBtn/AmeliproBtn.vue'
+	import AmeliproDropdownMenuBtn from './AmeliproDropdownMenuBtn/AmeliproDropdownMenuBtn.vue'
+	import AmeliproIcon from '../../AmeliproIcon/AmeliproIcon.vue'
+	import type { DropdownItem } from './types'
+	import type { IndexedObject } from '../../types'
+
+	const props = defineProps({
+		items: {
+			type: Array as PropType<DropdownItem[]>,
+			required: true,
+		},
+		label: {
+			type: String,
+			required: true,
+		},
+		menuWidth: {
+			type: String,
+			default: '100%',
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+	})
+
+	const isOpen = ref(false)
+	const hover = ref(false)
+	const focus = ref(false)
+
+	const activeItemLabel = computed<string | undefined>(() => {
+		return props.items?.filter(item => item.active)?.map(item => item.label)[0]
+	})
+
+	const menuStyle = computed<IndexedObject>(() => {
+		return { width: props.menuWidth }
+	})
+
+	const setFocus = (id: string): void => {
+		const element = document.getElementById(id)
+
+		if (element !== null && element !== undefined) {
+			element.focus()
+		}
+	}
+
+	const openCloseMenu = (): void => {
+		if (isOpen.value) {
+			closeMenu()
+		}
+		else {
+			openMenu()
+		}
+	}
+
+	const openMenu = (focusLastItem?: boolean): void => {
+		isOpen.value = true
+		setTimeout(() => {
+			if (focusLastItem) {
+				setFocus(`${props.uniqueId}-btn-${props.items.length - 1}`)
+			}
+			else {
+				setFocus(`${props.uniqueId}-btn-0`)
+			}
+		}, 0)
+	}
+
+	const closeMenu = (): void => {
+		if (isOpen.value) {
+			isOpen.value = false
+			setFocus(`${props.uniqueId}-btn`)
+		}
+	}
+
+	const pressUp = (index: number): void => {
+		if (index === 0) {
+			setFocus(`${props.uniqueId}-btn-${props.items.length - 1}`)
+		}
+		else if (index > 0) {
+			setFocus(`${props.uniqueId}-btn-${index - 1}`)
+		}
+	}
+
+	const pressDown = (index: number): void => {
+		if (index === props.items.length - 1) {
+			setFocus(`${props.uniqueId}-btn-0`)
+		}
+		else if (index < props.items.length - 1) {
+			setFocus(`${props.uniqueId}-btn-${index + 1}`)
+		}
+	}
+
+	const pressCharacter = (index: number, firstChar: string): void => {
+		if (firstChar.length > 1) {
+			return
+		}
+
+		const firstCharLC = firstChar.toLowerCase()
+		const labelFirstChars = props.items.map(item => item.label.charAt(0).toLowerCase()
+			.normalize('NFD')
+			.replace(/[\u0300-\u036f]/g, ''))
+
+		let start = index + 1
+		if (start >= props.items.length) {
+			start = 0
+		}
+
+		let resultIndex = labelFirstChars.indexOf(firstCharLC, start)
+
+		if (resultIndex === -1) {
+			resultIndex = labelFirstChars.indexOf(firstCharLC, 0)
+		}
+
+		if (resultIndex > -1) {
+			setFocus(`${props.uniqueId}-btn-${resultIndex}`)
+		}
+	}
+</script>
+
+<template>
+	<div
+		:id="uniqueId"
+		v-click-outside="closeMenu"
+		class="dropdown-menu"
+		:style="menuStyle"
+	>
+		<AmeliproBtn
+			:aria-controls="`${uniqueId}-menu`"
+			:aria-expanded="isOpen === true ? 'true' : 'false'"
+			aria-haspopup="true"
+			class="w-100 text-none text-h6 font-weight-bold dropdown-menu__open-btn"
+			color="ap-white"
+			hover-color="ap-grey-lighten-4"
+			text-color="ap-grey-darken-1"
+			:unique-id="`${uniqueId}-btn`"
+			@click="openCloseMenu()"
+			@focus="focus = true"
+			@blur="focus = false"
+			@keyup.down="openMenu()"
+			@keyup.up="openMenu(true)"
+			@mouseenter="hover = true"
+			@mouseleave="hover = false"
+		>
+			<span
+				:id="`${uniqueId}-btn-text`"
+				class="w-100 text-left text-h6 font-weight-bold"
+			>
+				<span class="d-sr-only">
+					Page active :&nbsp;
+				</span>
+
+				{{ activeItemLabel }}
+			</span>
+
+			<AmeliproIcon
+				ref="ameliproIcon"
+				:icon="isOpen ? 'triangleUp' : 'triangleDown'"
+				icon-color="ap-grey-darken-1"
+				size="8px"
+				style="margin-top: -18px;"
+				:unique-id="`${uniqueId}-icon`"
+			/>
+		</AmeliproBtn>
+
+		<ul
+			v-show="isOpen"
+			:id="`${uniqueId}-menu`"
+			:aria-label="label"
+			class="ap-white list-style-none dropdown-menu__list"
+			role="menu"
+		>
+			<li
+				v-for="(item, index) in items"
+				:key="index"
+				class="dropdown-menu__item"
+				role="none"
+			>
+				<AmeliproDropdownMenuBtn
+					:href="item.href"
+					:label="item.label"
+					:to="item.to"
+					:unique-id="`${uniqueId}-btn-${index}`"
+					@down="pressDown(index)"
+					@end="setFocus(`${uniqueId}-btn-${items.length - 1}`)"
+					@esc="closeMenu()"
+					@home="setFocus(`${uniqueId}-btn-0`)"
+					@letters="pressCharacter(index, $event)"
+					@up="pressUp(index)"
+				/>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.dropdown-menu {
+	position: relative;
+}
+
+.dropdown-menu__open-btn {
+	border: 1px solid apTokens.$ap-grey !important;
+
+	& :deep(.v-btn__content) {
+		justify-content: space-between;
+		align-items: center;
+
+		& .amelipro-custom-btn {
+			width: 100%;
+			justify-content: space-between;
+		}
+	}
+}
+
+.dropdown-menu__list {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	width: 100%;
+	border: 1px solid apTokens.$ap-grey !important;
+	z-index: 10;
+}
+</style>

package/src/components/Amelipro/AmeliproMessagingLayout/AmeliproDropdownMenu/AmeliproDropdownMenuBtn/AmeliproDropdownMenuBtn.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+	import { type PropType, ref } from 'vue'
+	import AmeliproBtn from '../../../AmeliproBtn/AmeliproBtn.vue'
+	import type { RouteLocationRaw } from 'vue-router'
+
+	defineProps({
+		href: {
+			type: String,
+			default: undefined,
+		},
+		label: {
+			type: String,
+			required: true,
+		},
+		to: {
+			type: [Array, Object, String] as PropType<RouteLocationRaw>,
+			default: undefined,
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+	})
+
+	const focus = ref(false)
+
+	type TEventList = 'down' | 'end' | 'esc' | 'home' | 'up'
+	const emit = defineEmits(['letters', 'down', 'end', 'esc', 'home', 'up'])
+	const emitEvent = (eventName: TEventList): void => {
+		emit(eventName)
+	}
+
+	const emitLettersEvent = (event: KeyboardEvent): void => {
+		const key = event.key.toLowerCase()
+		const keyLength = String(key).length
+		const letters = /^[a-z]+$/
+
+		if (key.match(letters) && keyLength === 1) {
+			emit('letters', key)
+		}
+	}
+</script>
+
+<template>
+	<AmeliproBtn
+		class="w-100 text-none text-left dropdown-menu__btn"
+		:color="focus ? 'ap-grey-lighten-4' : 'ap-white'"
+		hover-color="ap-grey-lighten-4"
+		:href="href"
+		role="menuitem"
+		:tabindex="focus ? '0' : '-1'"
+		text-color="ap-grey-darken-1"
+		:to="to"
+		:unique-id="uniqueId"
+		@blur="focus = false"
+		@focus="focus = true"
+		@keyup="emitLettersEvent($event)"
+		@keyup.down="emitEvent('down')"
+		@keyup.end="emitEvent('end')"
+		@keyup.esc="emitEvent('esc')"
+		@keyup.home="emitEvent('home')"
+		@keyup.up="emitEvent('up')"
+	>
+		{{ label }}
+	</AmeliproBtn>
+</template>
+
+<style lang="scss" scoped>
+	a:hover {
+		text-decoration: none !important;
+	}
+
+	.dropdown-menu__btn {
+		border-radius: 0 !important;
+
+		& :deep(.v-btn__content) {
+			justify-content: flex-start;
+
+			& .amelipro-custom-btn {
+				width: 100%;
+				justify-content: flex-start;
+			}
+		}
+	}
+</style>