From f46f9387f8981178b5383b55b08d656355b3e303 Mon Sep 17 00:00:00 2001
From: David FYON <davidfyon@gmail.com>
Date: Wed, 4 Dec 2024 09:52:00 +0100
Subject: [PATCH] fix tooltip bg

---
 .../src/patterns/NirField/NirField.vue        | 503 +++++++++---------
 .../synapse-bridge/src/styles/settings.scss   |   2 +-
 2 files changed, 252 insertions(+), 253 deletions(-)

diff --git a/packages/synapse-bridge/src/patterns/NirField/NirField.vue b/packages/synapse-bridge/src/patterns/NirField/NirField.vue
index 72723813c..0dca017ce 100644
--- a/packages/synapse-bridge/src/patterns/NirField/NirField.vue
+++ b/packages/synapse-bridge/src/patterns/NirField/NirField.vue
@@ -1,291 +1,290 @@
-// packages/synapse-bridge/src/patterns/NirField/NirField.vue
-
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { config } from './config';
-import { locales } from './locales';
-import type { Refs } from '@/types';
-import { customizable } from '@/mixins/customizable';
-import { vMaska } from 'maska';
-import { mdiInformationOutline } from '@mdi/js';
-import deepMerge from 'deepmerge';
-import type { ValidationRule } from '@/rules/types';
-import { NUMBER_LENGTH, KEY_LENGTH, checkNIR, isNIRKeyValid } from './nirValidations';
-
-const SINGLE_FIELD = NUMBER_LENGTH;
-const DOUBLE_FIELD = NUMBER_LENGTH + KEY_LENGTH;
-
-export default defineComponent({
-	inheritAttrs: false,
-	mixins: [customizable(config)],
-	directives: { maska: vMaska },
-	emits: ['update:modelValue'],
-	props: {
-		modelValue: {
-			type: String,
-			default: null,
-		},
-		nirLength: {
-			type: Number,
-			default: DOUBLE_FIELD,
-			validator(value: number): boolean {
-				return [SINGLE_FIELD, DOUBLE_FIELD].includes(value);
+	import { defineComponent } from 'vue';
+	import { config } from './config';
+	import { locales } from './locales';
+	import type { Refs } from '@/types';
+	import { customizable } from '@/mixins/customizable';
+	import { vMaska } from 'maska';
+	import { mdiInformationOutline } from '@mdi/js';
+	import deepMerge from 'deepmerge';
+	import type { ValidationRule } from '@/rules/types';
+	import { NUMBER_LENGTH, KEY_LENGTH, checkNIR, isNIRKeyValid } from './nirValidations';
+
+	const SINGLE_FIELD = NUMBER_LENGTH;
+	const DOUBLE_FIELD = NUMBER_LENGTH + KEY_LENGTH;
+
+	export default defineComponent({
+		inheritAttrs: false,
+		mixins: [customizable(config)],
+		directives: { maska: vMaska },
+		emits: ['update:modelValue'],
+		props: {
+			modelValue: {
+				type: String,
+				default: null,
 			},
-		},
-		required: {
-			type: Boolean,
-			default: false,
-		},
-		outlined: {
-			type: Boolean,
-			default: false,
-		},
-		tooltip: {
-			type: String,
-			default: undefined,
-		},
-		numberLabel: {
-			type: String,
-			default: locales.numberLabel,
-		},
-		keyLabel: {
-			type: String,
-			default: locales.keyLabel,
-		},
-	},
-	data() {
-		return {
-			$refs: {} as Refs<{
-				numberField: HTMLElement;
-				keyField: HTMLElement;
-			}>,
-
-			locales,
-
-			infoIcon: mdiInformationOutline,
-
-			maskaNumberValue: {
-				masked: '',
-				unmasked: '',
-				completed: false,
+			nirLength: {
+				type: Number,
+				default: DOUBLE_FIELD,
+				validator(value: number): boolean {
+					return [SINGLE_FIELD, DOUBLE_FIELD].includes(value);
+				},
 			},
-
-			maskaKeyValue: {
-				masked: '',
-				unmasked: '',
-				completed: false,
+			required: {
+				type: Boolean,
+				default: false,
+			},
+			outlined: {
+				type: Boolean,
+				default: false,
 			},
+			tooltip: {
+				type: String,
+				default: undefined,
+			},
+			numberLabel: {
+				type: String,
+				default: locales.numberLabel,
+			},
+			keyLabel: {
+				type: String,
+				default: locales.keyLabel,
+			},
+		},
+		data() {
+			return {
+				$refs: {} as Refs<{
+					numberField: HTMLElement;
+					keyField: HTMLElement;
+				}>,
 
-			numberValue: '',
-			keyValue: '',
+				locales,
 
-			internallyUpdatedValue: null as string | null,
+				infoIcon: mdiInformationOutline,
 
-			numberMask: {
-				mask: '# ## ## #C ### ###',
-				preProcess: (value: string) => value.toUpperCase(),
-				tokens: {
-					C: {
-						pattern: /[0-9AB]/,
-						transform: (char: string) => char.toUpperCase(),
-					},
+				maskaNumberValue: {
+					masked: '',
+					unmasked: '',
+					completed: false,
 				},
-			},
-			keyMask: { mask: '##' },
-
-			numberErrors: [] as string[],
-			keyErrors: [] as string[],
-		};
-	},
-	watch: {
-		modelValue: {
-			immediate: true,
-			handler(newValue) {
-				if (newValue === null) {
-					this.numberValue = '';
-					this.keyValue = '';
 
-					return;
-				}
+				maskaKeyValue: {
+					masked: '',
+					unmasked: '',
+					completed: false,
+				},
 
-				if (this.internallyUpdatedValue === newValue) {
-					this.internallyUpdatedValue = null;
+				numberValue: '',
+				keyValue: '',
 
-					return;
-				}
+				internallyUpdatedValue: null as string | null,
 
-				this.numberValue = newValue.slice(0, NUMBER_LENGTH);
-				this.keyValue = newValue.slice(NUMBER_LENGTH, DOUBLE_FIELD);
+				numberMask: {
+					mask: '# ## ## #C ### ###',
+					preProcess: (value: string) => value.toUpperCase(),
+					tokens: {
+						C: {
+							pattern: /[0-9AB]/,
+							transform: (char: string) => char.toUpperCase(),
+						},
+					},
+				},
+				keyMask: { mask: '##' },
 
-				this.validateNumberValue(this.numberValue);
-				if (!this.isSingleField) {
-					this.validateKeyValue(this.keyValue);
-				}
-			},
-		},
-	},
-	computed: {
-		isSingleField(): boolean {
-			return this.nirLength === SINGLE_FIELD;
-		},
-		textFieldOptions() {
-			return deepMerge(config, this.$attrs);
+				numberErrors: [] as string[],
+				keyErrors: [] as string[],
+			};
 		},
-
-		numberRules(): ValidationRule[] {
-			return [
-				(value: string | null) => {
-					if (this.required && !value) {
-						return this.locales.errorRequiredNumber;
-					}
-					return true;
-				},
-				(value: string | null) => {
-					if (value && value.length !== NUMBER_LENGTH && value.length > 0) {
-						return this.locales.errorLengthNumber(NUMBER_LENGTH);
-					}
-					return true;
-				},
-				(value: string | null) => {
-					if (value && !checkNIR(value) && value.length > 0) {
-						return this.locales.errorInvalidFormat;
+		watch: {
+			modelValue: {
+				immediate: true,
+				handler(newValue) {
+					if (newValue === null) {
+						this.numberValue = '';
+						this.keyValue = '';
+
+						return;
 					}
-					return true;
-				},
-			];
-		},
 
-		keyRules(): ValidationRule[] {
-			if (this.isSingleField) {
-				return [];
-			}
-			return [
-				(value: string | null) => {
-					if (this.required && !value) {
-						return this.locales.errorRequiredKey;
-					}
-					return true;
-				},
-				(value: string | null) => {
-					if (value && value.length > 0 && value.length !== KEY_LENGTH) {
-						return this.locales.errorLengthKey(KEY_LENGTH);
+					if (this.internallyUpdatedValue === newValue) {
+						this.internallyUpdatedValue = null;
+
+						return;
 					}
-					return true;
-				},
-				(value: string | null) => {
-					if (value) {
-						const fullNIR = this.numberValue + value;
-						if (!isNIRKeyValid(fullNIR)) {
-							return this.locales.errorInvalidKey;
-						}
+
+					this.numberValue = newValue.slice(0, NUMBER_LENGTH);
+					this.keyValue = newValue.slice(NUMBER_LENGTH, DOUBLE_FIELD);
+
+					this.validateNumberValue(this.numberValue);
+					if (!this.isSingleField) {
+						this.validateKeyValue(this.keyValue);
 					}
-					return true;
 				},
-			];
+			},
 		},
-		rules() {
-			const numberRules = () => {
-				this.validateNumberValue(this.maskaNumberValue.unmasked)
-				return this.numberErrors.length === 0;
-
-			};
+		computed: {
+			isSingleField(): boolean {
+				return this.nirLength === SINGLE_FIELD;
+			},
+			textFieldOptions() {
+				return deepMerge(config, this.$attrs);
+			},
 
-			return this.isSingleField
-				? [numberRules]
-				: [
-					numberRules,
-					() => {
-						this.validateKeyValue(this.maskaKeyValue.unmasked);
+			numberRules(): ValidationRule[] {
+				return [
+					(value: string | null) => {
+						if (this.required && !value) {
+							return this.locales.errorRequiredNumber;
+						}
+						return true;
+					},
+					(value: string | null) => {
+						if (value && value.length !== NUMBER_LENGTH && value.length > 0) {
+							return this.locales.errorLengthNumber(NUMBER_LENGTH);
+						}
+						return true;
+					},
+					(value: string | null) => {
+						if (value && !checkNIR(value) && value.length > 0) {
+							return this.locales.errorInvalidFormat;
+						}
+						return true;
+					},
+				];
+			},
 
-						return this.keyErrors.length === 0;
+			keyRules(): ValidationRule[] {
+				if (this.isSingleField) {
+					return [];
+				}
+				return [
+					(value: string | null) => {
+						if (this.required && !value) {
+							return this.locales.errorRequiredKey;
+						}
+						return true;
+					},
+					(value: string | null) => {
+						if (value && value.length > 0 && value.length !== KEY_LENGTH) {
+							return this.locales.errorLengthKey(KEY_LENGTH);
+						}
+						return true;
+					},
+					(value: string | null) => {
+						if (value) {
+							const fullNIR = this.numberValue + value;
+							if (!isNIRKeyValid(fullNIR)) {
+								return this.locales.errorInvalidKey;
+							}
+						}
+						return true;
 					},
 				];
-		},
+			},
+			rules() {
+				const numberRules = () => {
+					this.validateNumberValue(this.maskaNumberValue.unmasked)
+					return this.numberErrors.length === 0;
+
+				};
+
+				return this.isSingleField
+					? [numberRules]
+					: [
+						numberRules,
+						() => {
+							this.validateKeyValue(this.maskaKeyValue.unmasked);
+
+							return this.keyErrors.length === 0;
+						},
+					];
+			},
 
-		errors(): string[] | never[] {
-			return [...this.numberErrors ?? null, ...this.keyErrors ?? null];
-		},
-	},
-	methods: {
-		changeNumberValue(): void {
-			if (this.isSingleField) {
-				this.internallyUpdatedValue = this.maskaNumberValue.unmasked;
-				this.$emit('update:modelValue', this.maskaNumberValue.unmasked);
-
-				return;
-			}
-			this.doubleFieldUpdated();
+			errors(): string[] | never[] {
+				return [...this.numberErrors ?? null, ...this.keyErrors ?? null];
+			},
 		},
+		methods: {
+			changeNumberValue(): void {
+				if (this.isSingleField) {
+					this.internallyUpdatedValue = this.maskaNumberValue.unmasked;
+					this.$emit('update:modelValue', this.maskaNumberValue.unmasked);
 
-		changeKeyValue(): void {
-			this.doubleFieldUpdated();
-		},
+					return;
+				}
+				this.doubleFieldUpdated();
+			},
 
-		doubleFieldUpdated(): void {
-			const internalValue =
-				this.maskaNumberValue.unmasked + this.maskaKeyValue.unmasked;
+			changeKeyValue(): void {
+				this.doubleFieldUpdated();
+			},
 
-			this.internallyUpdatedValue = internalValue;
-			this.$emit('update:modelValue', internalValue);
-		},
+			doubleFieldUpdated(): void {
+				const internalValue =
+					this.maskaNumberValue.unmasked + this.maskaKeyValue.unmasked;
 
-		validateNumberValue(numberFieldValue: string): void {
-			this.numberErrors = this.numberRules
-				.map((rule) => {
-					const result = rule(numberFieldValue);
-					return result === true ? null : result;
-				})
-				.filter((error): error is string => error !== null);
-		},
+				this.internallyUpdatedValue = internalValue;
+				this.$emit('update:modelValue', internalValue);
+			},
 
-		validateKeyValue(keyFieldValue: string): void {
-			this.keyErrors = this.keyRules
-				.map((rule) => {
-					const result = rule(keyFieldValue);
-					return result === true ? null : result;
-				})
-				.filter((error): error is string => error !== null);
-		},
+			validateNumberValue(numberFieldValue: string): void {
+				this.numberErrors = this.numberRules
+					.map((rule) => {
+						const result = rule(numberFieldValue);
+						return result === true ? null : result;
+					})
+					.filter((error): error is string => error !== null);
+			},
 
-		focusKeyField({
-						  key,
-						  altKey,
-						  ctrlKey,
-						  metaKey,
-						  shiftKey,
-					  }: KeyboardEvent): void {
-			const isSingleField = this.isSingleField;
-			const notFilled = !this.maskaNumberValue.completed;
-			const keyHasModifier = altKey || ctrlKey || metaKey || shiftKey;
-			const isNotSingleAlphaNumChar = !/^[a-zA-Z0-9| ]$/.test(key);
-			const isContentSelected =
-				this.$refs.numberField.selectionStart !==
-				this.$refs.numberField.selectionEnd;
-
-			const shouldNotFocus =
-				isSingleField ||
-				notFilled ||
-				keyHasModifier ||
-				isNotSingleAlphaNumChar ||
-				isContentSelected;
-
-			if (shouldNotFocus) {
-				return;
-			}
-
-			this.$refs.keyField.focus();
-		},
+			validateKeyValue(keyFieldValue: string): void {
+				this.keyErrors = this.keyRules
+					.map((rule) => {
+						const result = rule(keyFieldValue);
+						return result === true ? null : result;
+					})
+					.filter((error): error is string => error !== null);
+			},
+
+			focusKeyField({
+							  key,
+							  altKey,
+							  ctrlKey,
+							  metaKey,
+							  shiftKey,
+						  }: KeyboardEvent): void {
+				const isSingleField = this.isSingleField;
+				const notFilled = !this.maskaNumberValue.completed;
+				const keyHasModifier = altKey || ctrlKey || metaKey || shiftKey;
+				const isNotSingleAlphaNumChar = !/^[a-zA-Z0-9| ]$/.test(key);
+				const isContentSelected =
+					this.$refs.numberField.selectionStart !==
+					this.$refs.numberField.selectionEnd;
+
+				const shouldNotFocus =
+					isSingleField ||
+					notFilled ||
+					keyHasModifier ||
+					isNotSingleAlphaNumChar ||
+					isContentSelected;
+
+				if (shouldNotFocus) {
+					return;
+				}
 
-		focusNumberField(): void {
-			if (this.maskaKeyValue.unmasked.length !== 0) {
-				return;
-			}
+				this.$refs.keyField.focus();
+			},
 
-			this.$refs.numberField.focus();
+			focusNumberField(): void {
+				if (this.maskaKeyValue.unmasked.length !== 0) {
+					return;
+				}
+
+				this.$refs.numberField.focus();
+			},
 		},
-	},
-});
+	});
 </script>
+
 <template>
 	<div
 		class="vd-nir-field d-flex align-start"
diff --git a/packages/synapse-bridge/src/styles/settings.scss b/packages/synapse-bridge/src/styles/settings.scss
index aa0f28bfb..b223a4d46 100644
--- a/packages/synapse-bridge/src/styles/settings.scss
+++ b/packages/synapse-bridge/src/styles/settings.scss
@@ -261,7 +261,7 @@ a {
 }
 
 .v-tooltip > .v-overlay__content {
-	background: rgba(#545859, 0.95) !important;
+	background: rgba(84, 88, 89, 0.95) !important;
 }
 
 // Btn : lowercase text-transform and padding