@cnamts/synapse 0.0.11-alpha → 0.0.12-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cnamts/synapse",
-  "version": "0.0.11-alpha",
+  "version": "0.0.12-alpha",
   "private": false,
   "description": "CNAM DS v3",
   "type": "module",

package/src/assets/_elevations.scss

@@ -0,0 +1,89 @@
+// Define theme elevation adjustments
+$elevation-cnam: 2px;
+$elevation-pa: 2px;
+
+// Modify elevations to include $elevation-cnam and $elevation-pa dynamically
+$cnam-elevation: (
+	0: none,
+	1: 0 1px calc(3px + #{$elevation-cnam}) rgb(0 0 0 / 12%),
+	2: 0 1px calc(5px + #{$elevation-cnam}) rgb(0 0 0 / 16%),
+	3: 0 1px calc(8px + #{$elevation-cnam}) rgb(0 0 0 / 24%),
+	4: 0 2px calc(4px + #{$elevation-cnam}) rgb(0 0 0 / 24%),
+	5: 0 2px calc(6px + #{$elevation-cnam}) rgb(0 0 0 / 28%),
+	6: 0 3px calc(6px + #{$elevation-cnam}) rgb(0 0 0 / 32%),
+	7: 0 3px calc(8px + #{$elevation-cnam}) rgb(0 0 0 / 36%),
+	8: 0 4px calc(8px + #{$elevation-cnam}) rgb(0 0 0 / 40%),
+	9: 0 4px calc(10px + #{$elevation-cnam}) rgb(0 0 0 / 44%),
+	10: 0 5px calc(10px + #{$elevation-cnam}) rgb(0 0 0 / 48%),
+	12: 0 6px calc(12px + #{$elevation-cnam}) rgb(0 0 0 / 52%),
+	14: 0 7px calc(14px + #{$elevation-cnam}) rgb(0 0 0 / 56%),
+	16: 0 8px calc(16px + #{$elevation-cnam}) rgb(0 0 0 / 60%),
+	18: 0 9px calc(18px + #{$elevation-cnam}) rgb(0 0 0 / 64%),
+	20: 0 10px calc(20px + #{$elevation-cnam}) rgb(0 0 0 / 68%),
+	24: 0 12px calc(24px + #{$elevation-cnam}) rgb(0 0 0 / 72%),
+	28: 0 14px calc(28px + #{$elevation-cnam}) rgb(0 0 0 / 76%),
+	32: 0 16px calc(32px + #{$elevation-cnam}) rgb(0 0 0 / 80%)
+);
+$pa-elevation: (
+	0: none,
+	1: 0 1px calc(3px + #{$elevation-pa}) rgb(0 0 0 / 10%),
+	2: 0 1px calc(5px + #{$elevation-pa}) rgb(0 0 0 / 14%),
+	3: 0 1px calc(8px + #{$elevation-pa}) rgb(0 0 0 / 20%),
+	4: 0 2px calc(4px + #{$elevation-pa}) rgb(0 0 0 / 20%),
+	5: 0 2px calc(6px + #{$elevation-pa}) rgb(0 0 0 / 24%),
+	6: 0 3px calc(6px + #{$elevation-pa}) rgb(0 0 0 / 28%),
+	7: 0 3px calc(8px + #{$elevation-pa}) rgb(0 0 0 / 32%),
+	8: 0 4px calc(8px + #{$elevation-pa}) rgb(0 0 0 / 36%),
+	9: 0 4px calc(10px + #{$elevation-pa}) rgb(0 0 0 / 40%),
+	10: 0 5px calc(10px + #{$elevation-pa}) rgb(0 0 0 / 44%),
+	12: 0 6px calc(12px + #{$elevation-pa}) rgb(0 0 0 / 48%),
+	14: 0 7px calc(14px + #{$elevation-pa}) rgb(0 0 0 / 52%),
+	16: 0 8px calc(16px + #{$elevation-pa}) rgb(0 0 0 / 56%),
+	18: 0 9px calc(18px + #{$elevation-pa}) rgb(0 0 0 / 60%),
+	20: 0 10px calc(20px + #{$elevation-pa}) rgb(0 0 0 / 64%),
+	24: 0 12px calc(24px + #{$elevation-pa}) rgb(0 0 0 / 68%),
+	28: 0 14px calc(28px + #{$elevation-pa}) rgb(0 0 0 / 72%),
+	32: 0 16px calc(32px + #{$elevation-pa}) rgb(0 0 0 / 76%)
+);
+
+// Define CSS variables globally
+:root {
+	--elevation-cnam: #{$elevation-cnam};
+	--elevation-pa: #{$elevation-pa};
+
+	@each $key, $value in $cnam-elevation {
+		--elevation-#{$key}: #{$value};
+	}
+}
+
+// Apply theme-based CNAM
+.theme-cnam {
+	@each $key, $value in $cnam-elevation {
+		--elevation-#{$key}: #{$value};
+	}
+}
+
+// Apply theme-based PA
+.theme-pa {
+	@each $key, $value in $pa-elevation {
+		--elevation-#{$key}: #{$value};
+	}
+}
+
+// Mixin to generate elevation classes dynamically
+@mixin generate-elevation-classes($prefix) {
+	@each $key, $value in $cnam-elevation {
+		.#{$prefix}-#{$key} {
+			box-shadow: var(--elevation-#{$key}) !important;
+		}
+	}
+}
+
+// Generate elevation classes
+@include generate-elevation-classes('elevation');
+
+// Ex of additional classes for specific shadow
+
+/* .v-btn {
+  box-shadow: var(--elevation-2) !important;
+} */

package/src/assets/_fonts.scss

@@ -0,0 +1,6 @@
+@use 'vuetify/settings' with (
+	$body-font-family: Arial
+);
+
+// Forward Vuetify settings
+@forward 'vuetify/settings';

package/src/assets/_radius.scss

@@ -0,0 +1,86 @@
+// Define theme radius separately
+$border-radius-cnam: 4px;
+$border-radius-pa: 4px;
+$cnam-radius: (
+	0: 0px,
+	'sm': calc($border-radius-cnam / 2),
+	'md': $border-radius-cnam,
+	'lg': calc($border-radius-cnam * 2),
+	'xl': calc($border-radius-cnam * 4),
+	'pill': 9999px,
+	'circle': 50%
+);
+$pa-radius: (
+	0: 0px,
+	'sm': calc($border-radius-pa / 2),
+	'md': $border-radius-pa,
+	'lg': calc($border-radius-pa * 2),
+	'xl': calc($border-radius-pa * 4),
+	'pill': 9999px,
+	'circle': 50%
+);
+
+// Define all possible radius keys to ensure consistent class generation
+$radius-keys: (0, 'sm', 'md', 'lg', 'xl', 'pill', 'circle');
+
+// ✅ Define CSS variables globally
+:root {
+	@each $key, $value in $cnam-radius {
+		--radius-#{$key}: #{$value};
+	}
+}
+
+// ✅ Apply theme-based cnam
+.theme-cnam {
+	@each $key, $value in $cnam-radius {
+		--radius-#{$key}: #{$value};
+	}
+}
+
+// ✅ Apply theme-based pa
+.theme-pa {
+	@each $key, $value in $pa-radius {
+		--radius-#{$key}: #{$value};
+	}
+}
+
+// ✅ Mixin to generate border-radius classes
+@mixin generate-radius-classes($prefix) {
+	@each $key in $radius-keys {
+		.#{$prefix}-#{$key} {
+			border-radius: var(--radius-#{$key}) !important;
+		}
+	}
+}
+
+// ✅ Generate radius classes once, using CSS variables
+@include generate-radius-classes('rounded');
+
+// Additional classes for specific radius
+.v-btn {
+	border-radius: var(--radius-md) !important;
+}
+
+.v-btn--rounded-md {
+	border-radius: var(--radius-md) !important;
+}
+
+.v-btn--rounded-sm {
+	border-radius: var(--radius-sm) !important;
+}
+
+.v-btn--rounded-lg {
+	border-radius: var(--radius-lg) !important;
+}
+
+.v-btn--rounded-xl {
+	border-radius: var(--radius-xl) !important;
+}
+
+.v-btn--rounded-pill {
+	border-radius: var(--radius-pill) !important;
+}
+
+.v-btn--rounded-circle {
+	border-radius: var(--radius-circle) !important;
+}

package/src/assets/_spacers.scss

@@ -0,0 +1,149 @@
+// Define base spacer values
+$base-spacer-cnam: 4px;
+$base-spacer-pa: 4px;
+
+// Define theme spacers using base values
+$cnam-spacers: (
+	0: 0px,
+	1: $base-spacer-cnam,
+	2: $base-spacer-cnam * 2,
+	3: $base-spacer-cnam * 3,
+	4: $base-spacer-cnam * 4,
+	5: $base-spacer-cnam * 5,
+	6: $base-spacer-cnam * 6,
+	7: $base-spacer-cnam * 7,
+	8: $base-spacer-cnam * 8,
+	9: $base-spacer-cnam * 9,
+	10: $base-spacer-cnam * 10,
+	11: $base-spacer-cnam * 11,
+	12: $base-spacer-cnam * 12,
+	13: $base-spacer-cnam * 13,
+	14: $base-spacer-cnam * 14,
+	15: $base-spacer-cnam * 15,
+	16: $base-spacer-cnam * 16,
+	17: $base-spacer-cnam * 17,
+	18: $base-spacer-cnam * 18,
+	19: $base-spacer-cnam * 19,
+	20: $base-spacer-cnam * 20,
+	24: $base-spacer-cnam * 24,
+	28: $base-spacer-cnam * 28,
+	32: $base-spacer-cnam * 32,
+	36: $base-spacer-cnam * 36,
+	40: $base-spacer-cnam * 40,
+	44: $base-spacer-cnam * 44,
+	48: $base-spacer-cnam * 48,
+	52: $base-spacer-cnam * 52,
+	56: $base-spacer-cnam * 56,
+	60: $base-spacer-cnam * 60,
+	64: $base-spacer-cnam * 64,
+);
+$pa-spacers: (
+	0: 0px,
+	1: $base-spacer-pa,
+	2: $base-spacer-pa * 2,
+	3: $base-spacer-pa * 3,
+	4: $base-spacer-pa * 4,
+	5: $base-spacer-pa * 5,
+	6: $base-spacer-pa * 6,
+	7: $base-spacer-pa * 7,
+	8: $base-spacer-pa * 8,
+	9: $base-spacer-pa * 9,
+	10: $base-spacer-pa * 10,
+	11: $base-spacer-pa * 11,
+	12: $base-spacer-pa * 12,
+	13: $base-spacer-pa * 13,
+	14: $base-spacer-pa * 14,
+	15: $base-spacer-pa * 15,
+	16: $base-spacer-pa * 16,
+	17: $base-spacer-pa * 17,
+	18: $base-spacer-pa * 18,
+	19: $base-spacer-pa * 19,
+	20: $base-spacer-pa * 20,
+	24: $base-spacer-pa * 24,
+	28: $base-spacer-pa * 28,
+	32: $base-spacer-pa * 32,
+	36: $base-spacer-pa * 36,
+	40: $base-spacer-pa * 40,
+	44: $base-spacer-pa * 44,
+	48: $base-spacer-pa * 48,
+	52: $base-spacer-pa * 52,
+	56: $base-spacer-pa * 56,
+	60: $base-spacer-pa * 60,
+	64: $base-spacer-pa * 64,
+);
+
+// Define CSS variables for spacers dynamically
+:root {
+	@each $key, $value in $cnam-spacers {
+		--spacing-#{$key}: #{$value};
+	}
+}
+
+// Apply theme-based spacing
+.theme-cnam {
+	@each $key, $value in $cnam-spacers {
+		--spacing-#{$key}: #{$value};
+	}
+}
+
+.theme-pa {
+	@each $key, $value in $pa-spacers {
+		--spacing-#{$key}: #{$value};
+	}
+}
+
+// Mixin to generate padding and margin classes
+@mixin generate-spacing-classes($property, $prefix) {
+	@for $i from 0 through 64 {
+		.#{$prefix}-#{$i} {
+			#{$property}: var(--spacing-#{$i}) !important;
+		}
+	}
+}
+
+// Apply spacing classes dynamically
+@include generate-spacing-classes(padding, pa);
+@include generate-spacing-classes(margin, ma);
+
+// Mixin for X (left & right) and Y (top & bottom) spacing
+@mixin generate-axis-spacing-classes($property, $prefix, $side1, $side2) {
+	@for $i from 0 through 64 {
+		.#{$prefix}-#{$i} {
+			#{$property}-#{$side1}: var(--spacing-#{$i}) !important;
+			#{$property}-#{$side2}: var(--spacing-#{$i}) !important;
+		}
+	}
+}
+
+// Generate px, py, mx, my spacing classes
+@include generate-axis-spacing-classes(padding, px, left, right);
+@include generate-axis-spacing-classes(padding, py, top, bottom);
+@include generate-axis-spacing-classes(margin, mx, left, right);
+@include generate-axis-spacing-classes(margin, my, top, bottom);
+
+// Mixin for individual side spacing classes
+@mixin generate-side-spacing-classes($property, $prefix, $side) {
+	@for $i from 0 through 64 {
+		.#{$prefix}-#{$i} {
+			#{$property}-#{$side}: var(--spacing-#{$i}) !important;
+		}
+	}
+}
+
+// Generate individual side padding classes
+@include generate-side-spacing-classes(padding, pt, top);
+@include generate-side-spacing-classes(padding, pr, right);
+@include generate-side-spacing-classes(padding, pb, bottom);
+@include generate-side-spacing-classes(padding, pl, left);
+
+// Generate individual side margin classes
+@include generate-side-spacing-classes(margin, mt, top);
+@include generate-side-spacing-classes(margin, mr, right);
+@include generate-side-spacing-classes(margin, mb, bottom);
+@include generate-side-spacing-classes(margin, ml, left);
+
+// Additional classes for specific spacing
+
+.v-btn {
+	padding: 0 var(--spacing-4) !important;
+}

package/src/assets/settings.scss

@@ -1,6 +1,6 @@
-@use 'vuetify/settings' with (
-	$body-font-family: Arial,
-);
+@use 'fonts';
+@use 'spacers';
+@use 'radius';
 
 .v-btn {
 	text-transform: inherit !important;
@@ -12,3 +12,7 @@
 .v-btn.v-tab {
 	text-transform: uppercase !important;
 }
+
+.v-tooltip .v-overlay__content {
+	background-color: rgb(0 0 0 / 70%) !important;
+}

package/src/assets/tokens.scss

@@ -419,35 +419,38 @@ $spacing-horizontal-xx-large: 56px;
 $spacing-horizontal-xxx-large: 64px;
 $spacing-horizontal-huge: 80px;
 
-// Surcharger toutes les élévations pour utiliser uniquement l'élévation 02
-.elevation-1,
-.elevation-2,
-.elevation-3,
-.elevation-4,
-.elevation-5,
-.elevation-6,
-.elevation-7,
-.elevation-8,
-.elevation-9,
-.elevation-10,
-.elevation-11,
-.elevation-12,
-.elevation-13,
-.elevation-14,
-.elevation-15,
-.elevation-16,
-.elevation-17,
-.elevation-18,
-.elevation-19,
-.elevation-20,
-.elevation-21,
-.elevation-22,
-.elevation-23,
-.elevation-24 {
-	box-shadow:
-		0 3px 1px -2px rgb(0 0 0 / 20%),
-		0 2px 2px 0 rgb(0 0 0 / 14%),
-		0 1px 5px 0 rgb(0 0 0 / 12%) !important;
+.theme-cnam,
+.theme-pa {
+	// Surcharger toutes les élévations pour utiliser uniquement l'élévation 02
+	.elevation-1,
+	.elevation-2,
+	.elevation-3,
+	.elevation-4,
+	.elevation-5,
+	.elevation-6,
+	.elevation-7,
+	.elevation-8,
+	.elevation-9,
+	.elevation-10,
+	.elevation-11,
+	.elevation-12,
+	.elevation-13,
+	.elevation-14,
+	.elevation-15,
+	.elevation-16,
+	.elevation-17,
+	.elevation-18,
+	.elevation-19,
+	.elevation-20,
+	.elevation-21,
+	.elevation-22,
+	.elevation-23,
+	.elevation-24 {
+		box-shadow:
+			0 3px 1px -2px rgb(0 0 0 / 20%),
+			0 2px 2px 0 rgb(0 0 0 / 14%),
+			0 1px 5px 0 rgb(0 0 0 / 12%) !important;
+	}
 }
 
 // global.scss

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

@@ -0,0 +1,6 @@
+declare module 'languages' {
+	import type { Language } from './types.d.ts'
+
+	export function getLanguageInfo(langCode: string): Language
+	export function getAllLanguageCode(): string[]
+};

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

@@ -0,0 +1,65 @@
+export interface Link {
+	id: number
+	url: string
+	name: string
+}
+
+export interface IndexedObject<T = string> {
+	[key: string]: T
+}
+
+export type Refs<T extends Record<string, unknown>> = Vue['$refs'] & T
+
+export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'smAndDown' | 'smAndUp' | 'mdAndDown' | 'mdAndUp' | 'lgAndDown' | 'lgAndUp' | 'xlAndDown'
+
+export interface IDataListItem {
+	id: number
+	[key: string]: string | number | undefined
+	accordionTitle?: string
+}
+
+export interface Theme {
+	primary: string
+	secondary: string
+	info: string
+	warning: string
+	error: string
+	success: string
+}
+
+export interface VuetifyTheme extends Theme {
+	[key: string]: string
+}
+
+export interface Color {
+	darken1?: string
+	darken2?: string
+	darken3?: string
+	darken4?: string
+	darken5?: string
+	darken6?: string
+	base: string
+	lighten1?: string
+	lighten2?: string
+	lighten3?: string
+	lighten4?: string
+	lighten5?: string
+	lighten6?: string
+}
+
+export interface Palette {
+	apBlue: Color
+	apGrey: Color
+	apWhite: Color
+	apBlack: Color
+	apYellow: Color
+	apGreen: Color
+	apRed: Color
+	apTurquoise: Color
+	apParme: Color
+	apPink: Color
+}
+
+export type Colors = Theme & Palette
+
+export type ValidateOn = 'lazy' | ('input' | 'blur' | 'submit') | 'input lazy' | 'blur lazy' | 'submit lazy' | 'lazy input' | 'lazy blur' | 'lazy submit' | undefined

package/src/components/Customs/SyInputSelect/SyInputSelect.stories.ts

@@ -20,6 +20,7 @@ const meta = {
 		textKey: { control: 'text' },
 		valueKey: { control: 'text' },
 		vuetifyOptions: { control: 'object' },
+		displayAsterisk: { control: 'boolean' },
 	},
 } as Meta<typeof SyInputSelect>
 
@@ -149,6 +150,70 @@ export const Required: Story = {
 	},
 }
 
+export const RequiredWithAsterisk: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: 'Version du champ de sélection requis avec un astérisque visuel.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <SyInputSelect
+    v-model="value"
+    :items="items"
+    label="Sélectionnez une option"
+    required
+    display-asterisk
+  />
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import SyInputSelect from '@cnamts/synapse'
+
+const value = ref('')
+const items = [
+  { text: 'Option 1', value: '1' },
+  { text: 'Option 2', value: '2' },
+]
+</script>
+        `,
+			},
+		],
+	},
+	args: {
+		...Default.args,
+		label: 'Sélectionnez une option',
+		required: true,
+		displayAsterisk: true,
+	},
+	render: (args) => {
+		return {
+			components: { SyInputSelect },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="pa-4">
+					<SyInputSelect
+						v-bind="args"
+						:required="args.required"
+						:display-asterisk="args.displayAsterisk"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
 export const withCustomError: Story = {
 	parameters: {
 		sourceCode: [

package/src/components/Customs/SyInputSelect/SyInputSelect.vue

@@ -14,6 +14,7 @@
 		required?: boolean
 		errorMessages?: string | string[]
 		isHeaderToolbar?: boolean
+		displayAsterisk?: boolean
 	}>(), {
 		modelValue: null,
 		items: () => [],
@@ -24,6 +25,7 @@
 		required: false,
 		errorMessages: () => [],
 		isHeaderToolbar: false,
+		displayAsterisk: false,
 	})
 
 	const options = useCustomizableOptions(defaultOptions, props)
@@ -65,7 +67,15 @@
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 			return (selectedItem.value as Record<string, any>)[props.textKey]
 		}
-		return props.label
+		return labelWithAsterisk.value
+	})
+
+	const isShouldDisplayAsterisk = computed(() => {
+		return props.displayAsterisk && props.required
+	})
+
+	const labelWithAsterisk = computed(() => {
+		return isShouldDisplayAsterisk.value ? `${props.label} *` : props.label
 	})
 
 	watch(() => props.modelValue, (newValue) => {
@@ -144,8 +154,8 @@
 		:id="inputId"
 		v-model="selectedItem"
 		:error-messages="localErrorMessages"
-		:label="props.label"
-		:title="props.label"
+		:label="labelWithAsterisk"
+		:title="labelWithAsterisk"
 		role="menu"
 		@click="checkForErrors"
 	>