@cnamts/synapse 0.0.11-alpha → 0.0.13-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cnamts/synapse",
-  "version": "0.0.11-alpha",
+  "version": "0.0.13-alpha",
   "private": false,
   "description": "CNAM DS v3",
   "type": "module",
@@ -105,8 +105,10 @@
   "dependencies": {
     "@emotion/css": "^11.13.5",
     "@mdi/js": "^7.4.47",
+    "dayjs": "^1.11.13",
     "deepmerge": "^4.3.1",
     "iso-639-1": "^3.1.3",
+    "marked": "^15.0.7",
     "maska": "^3.0.3",
     "sass-embedded": "^1.83.0",
     "sass-loader": "^16.0.3",

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,92 @@
+// 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;
+}
+
+.v-date-picker {
+	.v-btn {
+		border-radius: var(--radius-pill) !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,15 @@
 .v-btn.v-tab {
 	text-transform: uppercase !important;
 }
+
+.v-tooltip .v-overlay__content {
+	background-color: rgb(0 0 0 / 70%) !important;
+}
+
+.v-messages {
+	font-size: 14px !important;
+
+	.v-messages__message {
+		line-height: 16px !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/types.ts

@@ -0,0 +1,40 @@
+export interface IndexedObject<T = string> {
+	[key: string]: T
+}
+
+export interface Theme {
+	primary: string
+	secondary: string
+	info: string
+	warning: string
+	error: string
+	success: 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
+}

package/src/components/ChipList/ChipList.stories.ts

@@ -116,9 +116,9 @@ export const Default: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-   import ChipList from '@cnamts/synapse'
+   import { ChipList, type ChipItem } from '@cnamts/synapse'
    
-	const items = [
+	const items: ChipItem[] = [
 		{
 			text: 'Email',
 			value: 'email',
@@ -205,9 +205,9 @@ export const Success: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-   import ChipList from '@cnamts/synapse'
+   import { ChipList, type ChipItem } from '@cnamts/synapse'
    
-	const items = [
+	const items: ChipItem[] = [
 		{
 			text: 'Email',
 			value: 'email',
@@ -298,9 +298,9 @@ export const Info: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-   import ChipList from '@cnamts/synapse'
+   import { ChipList, type ChipItem } from '@cnamts/synapse'
    
-	const items = [
+	const items: ChipItem[] = [
 		{
 			text: 'Email',
 			value: 'email',
@@ -391,9 +391,9 @@ export const Warning: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-   import ChipList from '@cnamts/synapse'
+   import { ChipList, type ChipItem } from '@cnamts/synapse'
    
-	const items = [
+	const items: ChipItem[] = [
 		{
 			text: 'Email',
 			value: 'email',
@@ -484,9 +484,9 @@ export const Error: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-   import ChipList from '@cnamts/synapse'
+   import { ChipList, type ChipItem } from '@cnamts/synapse'
    
-	const items = [
+	const items: ChipItem[] = [
 		{
 			text: 'Email',
 			value: 'email',
@@ -578,9 +578,9 @@ export const ReadOnly: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-   import ChipList from '@cnamts/synapse'
+   import { ChipList, type ChipItem } from '@cnamts/synapse'
    
-	const items = [
+	const items: ChipItem[] = [
 		{
 			text: 'Email',
 			value: 'email',
@@ -659,9 +659,9 @@ export const CustomResetText: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-   import ChipList from '@cnamts/synapse'
+   import { ChipList, type ChipItem } from '@cnamts/synapse'
    
-	const items = [
+	const items: ChipItem[] = [
 		{
 			text: 'Email',
 			value: 'email',
@@ -728,9 +728,9 @@ export const WithOverflow: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-   import ChipList from '@cnamts/synapse'
+   import { ChipList, type ChipItem } from '@cnamts/synapse'
    
-	const items = [
+	const items: ChipItem[] = [
 		{
 			text: 'Email',
 			value: 'email',
@@ -822,10 +822,9 @@ export const WithEvents: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-import ChipList from '@cnamts/synapse'
-import type { ChipItem } from '@cnamts/synapse/src/components/ChipList/types'
+import { ChipList, type ChipItem } from '@cnamts/synapse'
 
-const items = [
+const items: ChipItem[] = [
 	{
 		text: 'Email',
 		value: 'email',
@@ -933,9 +932,9 @@ export const WithPrependStateIcon: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-import ChipList from '@cnamts/synapse'
+import { ChipList, type ChipItem } from '@cnamts/synapse'
 
-const items = [
+const items: ChipItem[] = [
 	{
 		text: 'Email',
 		value: 'email',
@@ -1011,9 +1010,9 @@ export const WithAppendStateIcon: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-import ChipList from '@cnamts/synapse'
+import { ChipList, type ChipItem } from '@cnamts/synapse'
 
-const items = [
+const items: ChipItem[] = [
 	{
 		text: 'Email',
 		value: 'email',
@@ -1090,10 +1089,10 @@ export const WithCustomIcon: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-import ChipList from '@cnamts/synapse'
+import { ChipList, type ChipItem } from '@cnamts/synapse'
 import { mdiAccount } from '@mdi/js'
 
-const items = [
+const items: ChipItem[] = [
 	{
 		text: 'Email',
 		value: 'email',
@@ -1172,9 +1171,9 @@ export const Customization: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-   import ChipList from '@/components/ChipList/ChipList.vue'
+   import { ChipList, type ChipItem } from '@cnamts/synapse'
    
-	const items = [
+	const items: ChipItem[] = [
 		{
 			text: 'Email',
 			value: 'email',

package/src/components/ChipList/ChipList.vue

@@ -203,7 +203,7 @@
 				color="primary"
 				size="small"
 				data-test-id="reset-btn"
-				class="overflow-btn px-1 ml-0 my-1"
+				class="overflow-btn px-1 ml-1 my-1"
 				@click="emitResetEvent"
 			>
 				{{ resetButtonText }}
@@ -243,4 +243,8 @@
 .overflow-btn :deep(.v-btn__overlay) {
 	display: none;
 }
+
+.remove-chip {
+	padding: 0 !important;
+}
 </style>

package/src/components/ChipList/config.ts

@@ -20,6 +20,7 @@ export const config: ComponentConfig = {
 		size: 'small',
 		density: 'compact',
 		variant: 'text' as VuetifyVariant,
+		rounded: 'pill',
 	},
 	icon: {
 		size: 'medium',

package/src/components/CookiesSelection/CookiesInformation/CookiesInformation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { required } from '@/utils/rules/required'
+	import { isRequired } from '@/utils/rules/isRequired'
 	import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
 	import { computed, ref } from 'vue'
 	import CookiesTable from '../CookiesTable/CookiesTable.vue'
@@ -70,7 +70,7 @@
 		<VRadioGroup
 			v-if="type !== 'essentials'"
 			:model-value="parsedValue"
-			:rules="[required]"
+			:rules="[isRequired]"
 			data-test-id="radio-group"
 			inline
 			:label="locales.fieldLabel(locales[type].title)"