🐛 vue-dot: Fix menu position in ExternalLinks (#1263)

CHANGELOG.md

@@ -12,6 +12,7 @@
   - **ExternalLinks:** Correction de l'affichage du bouton en mobile ([#1218](https://github.com/assurance-maladie-digital/design-system/pull/1218)) ([32742b2](https://github.com/assurance-maladie-digital/design-system/commit/32742b28a7fedbdd69b9f885bca415a4fc7a2758))
   - **FilterModule:** Correction des événements manquants ([#1256](https://github.com/assurance-maladie-digital/design-system/pull/1256)) ([195617f](https://github.com/assurance-maladie-digital/design-system/commit/195617fba865fb4900b4291c05a123142c03bddf))
   - **FranceConnectBtn:** Ajout d'un nouveau composant ([#1268](https://github.com/assurance-maladie-digital/design-system/pull/1268) ([8261209](https://github.com/assurance-maladie-digital/design-system/commit/82612092f3775984d03fc28effb15c18d27aa8d1))
+  - **ExternalLinks:** Correction de la position du menu ([#1263](https://github.com/assurance-maladie-digital/design-system/pull/1263))
 
 - ♻️ **Refactoring**
   - **PaginatedTable:** Modification de la valeur par défaut de la prop `suffix` à `undefined` ([#1205](https://github.com/assurance-maladie-digital/design-system/pull/1205)) ([8df8e55](https://github.com/assurance-maladie-digital/design-system/commit/8df8e55c59fe820e99f0c0722e243f25b5cd9ffc))
@@ -73,7 +74,7 @@
   - **lint-staged:** Mise à jour vers la `v11.1.1` ([#1289](https://github.com/assurance-maladie-digital/design-system/pull/1289)) ([f36712b](https://github.com/assurance-maladie-digital/design-system/commit/f36712bff984f5ae606a41be285023d693339663))
   - **@types/node:** Mise à jour vers la `v14.17.6` ([#1293](https://github.com/assurance-maladie-digital/design-system/pull/1293)) ([1277b7b](https://github.com/assurance-maladie-digital/design-system/commit/1277b7b3609a28188deaee6a3ed952c5bca9f82d))
   - **eslint-plugin-jsdoc:** Mise à jour vers la `v36` ([#1294](https://github.com/assurance-maladie-digital/design-system/pull/1294)) ([056bedc](https://github.com/assurance-maladie-digital/design-system/commit/056bedc3a388653febe21c6583fef583895152c0))
-  - **typescript-eslint:** Mise à jour du monorepo vers la `v4.28.5` ([#1296](https://github.com/assurance-maladie-digital/design-system/pull/1296))
+  - **typescript-eslint:** Mise à jour du monorepo vers la `v4.28.5` ([#1296](https://github.com/assurance-maladie-digital/design-system/pull/1296)) ([670a498](https://github.com/assurance-maladie-digital/design-system/commit/670a49821a58a1be6fbadef5ea18dc20d24a121d))
 
 ## v2.0.0-beta.11
 

packages/vue-dot/src/elements/ExternalLinks/ExternalLinks.vue

@@ -1,5 +1,6 @@
 <template>
 	<VMenu
+		ref="menu"
 		v-model="menu"
 		v-bind="options.menu"
 		:top="bottom"
@@ -16,6 +17,7 @@
 				class="vd-external-links-btn"
 				@mouseenter="hover = true"
 				@mouseleave="hover = false"
+				@click="setMenuPosition"
 				v-on="on"
 			>
 				<span
@@ -81,8 +83,8 @@
 
 	import { PositionEnum } from './PositionEnum';
 
-	import { ExternalLink, Position } from './types';
-	import { IndexedObject } from '../../types';
+	import { ExternalLink, Position, StylesField } from './types';
+	import { IndexedObject, Refs } from '../../types';
 
 	import { customizable } from '../../mixins/customizable';
 
@@ -146,13 +148,23 @@
 
 	@Component
 	export default class ExternalLinks extends MixinsDeclaration {
+		// Extend $refs
+		$refs!: Refs<{
+			menu: {
+				pageWidth: string;
+				styles: StylesField;
+			};
+		}>;
+
 		locales = locales;
 
 		linkIcon = mdiOpenInNew;
 
 		menu = false;
 		hover = false;
 
+		menuClass = '';
+
 		get computedPosition(): Position {
 			const [ y, x ] = this.position.split(SPACE_CHARACTER);
 
@@ -179,12 +191,6 @@
 			return this.menu || this.hover;
 		}
 
-		get menuClass(): string {
-			const positionClass = this.right ? 'right-0' : 'left-0';
-
-			return `vd-external-links-menu ${positionClass}`;
-		}
-
 		get btnTextSpacing(): string {
 			return this.right ? 'ml-2' : 'mr-2';
 		}
@@ -243,6 +249,38 @@
 
 			return iconMapping[this.computedPosition.x];
 		}
+
+		setMenuClass(): void {
+			const VUETIFY_THRESHOLD = 12;
+			const position = this.computedPosition.x;
+			let positionClass = '';
+
+			if (position === PositionEnum.LEFT) {
+				const nudge = parseInt(this.$refs.menu.styles.left);
+
+				if (nudge <= VUETIFY_THRESHOLD) {
+					positionClass = ' left-0';
+				}
+			}
+
+			if (position === PositionEnum.RIGHT) {
+				const pageWidth = parseInt(this.$refs.menu.pageWidth, 10);
+				const left = parseInt(this.$refs.menu.styles.left, 10);
+				const minWidth = parseInt(this.$refs.menu.styles.minWidth, 10);
+				const nudge = pageWidth - left - minWidth;
+
+				if (nudge <= VUETIFY_THRESHOLD) {
+					positionClass = ' right-0';
+				}
+			}
+
+			this.menuClass = 'vd-external-links-menu' + positionClass;
+		}
+
+		setMenuPosition(): void {
+			// Wait until the menu is rendered
+			setTimeout(() => this.setMenuClass(), 100);
+		}
 	}
 </script>
 

packages/vue-dot/src/elements/ExternalLinks/tests/__snapshots__/ExternalLinks.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ExternalLinks.vue renders correctly 1`] = `
-<vmenu-stub opendelay="0" closedelay="0" contentclass="vd-external-links-menu left-0" maxwidth="auto" nudgebottom="0" nudgeleft="0" nudgeright="0" nudgetop="0" nudgewidth="0" openonclick="true" zindex="4" tile="true" closeonclick="true" closeoncontentclick="true" maxheight="auto" offsety="true" origin="top left" transition="v-menu-transition" class="vd-external-links">
+<vmenu-stub opendelay="0" closedelay="0" contentclass="" maxwidth="auto" nudgebottom="0" nudgeleft="0" nudgeright="0" nudgetop="0" nudgewidth="0" openonclick="true" zindex="4" tile="true" closeonclick="true" closeoncontentclick="true" maxheight="auto" offsety="true" origin="top left" transition="v-menu-transition" class="vd-external-links">
   <vsheet-stub elevation="0" tag="div" class="px-4 py-3">
     <p class="mb-0">
       Pas de données.

packages/vue-dot/src/elements/ExternalLinks/types.d.ts

@@ -7,3 +7,8 @@ export interface Position {
 	x: string;
 	y: string;
 }
+
+export interface StylesField {
+	left: string
+	minWidth: string
+}