@cnamts/synapse 0.0.13-alpha → 0.0.14-alpha

package/dist/{src/vuetifyConfig.d.ts → vuetifyConfig.d.ts}

@@ -1,5 +1,6 @@
 export declare const createVuetifyInstance: () => {
     install: (app: import('vue').App<any>) => void;
+    unmount: () => void;
     defaults: import('vue').Ref<import('vuetify').DefaultsInstance, import('vuetify').DefaultsInstance>;
     display: import('vuetify').DisplayInstance;
     theme: import('vuetify').ThemeInstance & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cnamts/synapse",
-  "version": "0.0.13-alpha",
+  "version": "0.0.14-alpha",
   "private": false,
   "description": "CNAM DS v3",
   "type": "module",
@@ -10,7 +10,7 @@
   ],
   "main": "./dist/design-system-v3.umd.cjs",
   "module": "./dist/design-system-v3.js",
-  "types": "./dist/src/main.d.ts",
+  "types": "./dist/main.d.ts",
   "exports": {
     ".": {
       "import": "./dist/design-system-v3.js",
@@ -24,9 +24,9 @@
     "build": "vue-tsc -p tsconfig.app.json && vite build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "lint": "eslint 'src/**/*.{ts,vue}'",
-    "lint:style": "stylelint 'src/**/*.{css,scss,vue}'",
-    "lint:fix": "eslint 'src/**/*.{ts,vue}' --fix && stylelint 'src/**/*.{css,scss,vue}' --fix",
+    "lint": "eslint \"src/**/*.{ts,vue}\"",
+    "lint:style": "stylelint \"src/**/*.{css,scss,vue}\"",
+    "lint:fix": "eslint \"src/**/*.{ts,vue}\" --fix && stylelint \"src/**/*.{css,scss,vue}\" --fix",
     "test:unit": "vitest run",
     "prepare": "husky",
     "generate:changelog": "auto-changelog -o CHANGELOG-TEMP.md -p --starting-date 2024-10-10"
@@ -79,9 +79,11 @@
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "happy-dom": "^15.7.4",
     "husky": "^9.1.6",
+    "marked": "^15.0.7",
     "postcss-html": "^1.7.0",
     "postcss-scss": "^4.0.9",
     "resize-observer-polyfill": "^1.5.1",
+    "semantic-release": "^24.2.3",
     "storybook": "^8.5.6",
     "storybook-addon-vue-mdx": "^1.0.6",
     "stylelint": "^16.12.0",
@@ -96,7 +98,8 @@
     "vitest": "^2.0.5",
     "vue": "^3.4.33",
     "vue-router": "^4.4.5",
-    "vue-tsc": "^2.1.8"
+    "vue-tsc": "^2.1.8",
+    "vue3-snapshot-serializer": "^2.9.0"
   },
   "peerDependencies": {
     "vue": "^3.4.33",
@@ -108,11 +111,9 @@
     "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",
-    "semantic-release": "^24.1.2",
     "slugify": "^1.6.6"
   },
   "publishConfig": {

package/src/components/BackBtn/BackBtn.stories.ts

@@ -18,6 +18,34 @@ const meta = {
 		hideBackIcon: {
 			control: 'boolean',
 		},
+		locales: {
+			description: 'Traductions',
+			control: false,
+			table: {
+				category: 'props',
+				type: {
+					summary: undefined,
+				},
+				defaultValue: {
+					summary: `Locales`,
+					detail: `{
+	label: 'Retour',
+}`,
+				},
+			},
+		},
+		backgroundColor: {
+			control: { type: 'text' },
+			description: 'Couleur de fond du bouton parmi la palette du thème.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+				defaultValue: {
+					summary: 'white',
+				},
+			},
+		},
 	},
 } as Meta<typeof BackBtn>
 
@@ -61,12 +89,12 @@ export const Default: Story = {
 					color="primary"
 					class="pa-4"
 				>
-				<BackBtn v-bind="args" />
-				</VSheet>
-				<VSheet
-					v-else
-					class="pa-4"
-				>
+					<BackBtn v-bind="args" />
+					</VSheet>
+					<VSheet
+						v-else
+						class="pa-4"
+					>
 					<BackBtn v-bind="args" />
 				</VSheet>
 			`,

package/src/components/BackBtn/BackBtn.vue

@@ -1,14 +1,16 @@
 <script lang="ts" setup>
-	import { ref, computed } from 'vue'
 	import { mdiArrowLeft } from '@mdi/js'
+	import { computed } from 'vue'
 	import { locales } from './locales'
 
-	const props = defineProps<{
+	const props = withDefaults(defineProps<{
 		hideBackIcon?: boolean
 		dark?: boolean
-	}>()
+		backgroundColor?: string
+	}>(), {
+		backgroundColor: 'white',
+	})
 
-	const backIcon = ref(mdiArrowLeft)
 	const isDark = computed(() => props.dark ?? false)
 	const iconColor = computed(() => isDark.value ? 'white' : 'primary')
 	const buttonVariant = computed(() => isDark.value ? 'outlined' : 'text')
@@ -28,8 +30,7 @@
 		:variant="buttonVariant"
 		:theme="buttonTheme"
 		:color="buttonColor"
-		:outlined="isDark"
-		:class="['vd-back-btn', 'text-none', buttonClasses]"
+		:class="['sy-back-btn', 'text-none', buttonClasses, `bg-${props.backgroundColor}`]"
 	>
 		<slot name="icon">
 			<VIcon
@@ -38,7 +39,7 @@
 				:class="{ 'ml-n1': isDark }"
 				class="mr-1"
 			>
-				{{ backIcon }}
+				{{ mdiArrowLeft }}
 			</VIcon>
 		</slot>
 
@@ -50,10 +51,18 @@
 
 <style lang="scss" scoped>
 // Désactiver l'état de hover sur le thème clair
-.v-btn.v-theme--light:deep() {
+.v-btn:deep() {
 	.v-btn__underlay,
 	.v-btn__overlay {
 		display: none;
 	}
 }
+
+.sy-back-btn:focus-visible {
+	outline: 0;
+}
+
+.sy-back-btn:focus-visible::after {
+	opacity: 1;
+}
 </style>

package/src/components/BackBtn/tests/BackBtn.spec.ts

@@ -44,7 +44,7 @@ describe('BackBtn', () => {
 			},
 			props: { dark: false, hideBackIcon: false },
 		})
-		expect(wrapper.find('.vd-back-btn').classes()).toContain('pr-1')
+		expect(wrapper.find('.sy-back-btn').classes()).toContain('pr-1')
 	})
 
 	it('applies correct button classes when dark is true and hideBackIcon is false', () => {
@@ -58,7 +58,7 @@ describe('BackBtn', () => {
 			},
 			props: { dark: true, hideBackIcon: false },
 		})
-		expect(wrapper.find('.vd-back-btn').classes()).not.toContain('pr-1')
+		expect(wrapper.find('.sy-back-btn').classes()).not.toContain('pr-1')
 	})
 	it('returns false when dark prop is not provided', () => {
 		const wrapper = mount(BackBtn, {

package/src/components/BackBtn/tests/__snapshots__/BackBtn.spec.ts.snap

@@ -1,9 +1,45 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BackBtn > render correctly 1`] = `
-"<button data-v-efb74141="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-text vd-back-btn text-none px-0 pr-1" outlined="false"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-  <!----><span class="v-btn__content" data-no-activator=""><i data-v-efb74141="" class="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z mdi v-icon notranslate v-theme--light v-icon--size-default text-primary mr-1" aria-hidden="true"></i>Retour</span>
+<button
+  class="
+    bg-white
+    pr-1
+    px-0
+    sy-back-btn
+    text-none
+    text-primary
+    v-btn
+    v-btn--density-default
+    v-btn--size-default
+    v-btn--variant-text
+    v-theme--light
+  "
+  type="button"
+>
+  <span class="v-btn__overlay"></span>
+  <span class="v-btn__underlay"></span>
   <!---->
+  <span
+    class="v-btn__content"
+    data-no-activator=""
+  >
+    <i
+      aria-hidden="true"
+      class="
+        M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z
+        mdi
+        mr-1
+        notranslate
+        text-primary
+        v-icon
+        v-icon--size-default
+        v-theme--light
+      "
+    ></i>
+    Retour
+  </span>
   <!---->
-</button>"
+  <!---->
+</button>
 `;

package/src/components/BackToTopBtn/tests/__snapshots__/BackToTopBtn.spec.ts.snap

@@ -1,17 +1,109 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BackToTopBtn > renders correctly 1`] = `
-"<transition-stub data-v-8ea81d33="" name="fade-transition" appear="false" persisted="false" css="true"><button data-v-8ea81d33="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined text-wrap px-0 px-md-4 vd-back-to-top-btn" style="bottom: 16px; margin-right: 16px; display: none;"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-    <!----><span class="v-btn__content" data-no-activator=""><span data-v-8ea81d33="" class="">Retour en haut</span><i data-v-8ea81d33="" class="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z mdi v-icon notranslate v-theme--light v-icon--size-small text-primary ml-0 ml-md-1" aria-hidden="true"></i></span>
+<transition-stub
+  appear="false"
+  css="true"
+  name="fade-transition"
+  persisted="false"
+>
+  <button
+    class="
+      px-0
+      px-md-4
+      text-primary
+      text-wrap
+      v-btn
+      v-btn--density-default
+      v-btn--size-default
+      v-btn--variant-outlined
+      v-theme--light
+      vd-back-to-top-btn
+    "
+    style="bottom: 16px; margin-right: 16px; display: none;"
+    type="button"
+  >
+    <span class="v-btn__overlay"></span>
+    <span class="v-btn__underlay"></span>
     <!---->
+    <span
+      class="v-btn__content"
+      data-no-activator=""
+    >
+      <span class="">
+        Retour en haut
+      </span>
+      <i
+        aria-hidden="true"
+        class="
+          M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z
+          mdi
+          ml-0
+          ml-md-1
+          notranslate
+          text-primary
+          v-icon
+          v-icon--size-small
+          v-theme--light
+        "
+      ></i>
+    </span>
     <!---->
-  </button></transition-stub>"
+    <!---->
+  </button>
+</transition-stub>
 `;
 
 exports[`BackToTopBtn > renders correctly when nudgeBottom and nudgeRight are set to invalid values 1`] = `
-"<transition-stub data-v-8ea81d33="" name="fade-transition" appear="false" persisted="false" css="true"><button data-v-8ea81d33="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined text-wrap px-0 px-md-4 vd-back-to-top-btn" style="bottom: 0px; margin-right: 0px; display: none;"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-    <!----><span class="v-btn__content" data-no-activator=""><span data-v-8ea81d33="" class="">Retour en haut</span><i data-v-8ea81d33="" class="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z mdi v-icon notranslate v-theme--light v-icon--size-small text-primary ml-0 ml-md-1" aria-hidden="true"></i></span>
+<transition-stub
+  appear="false"
+  css="true"
+  name="fade-transition"
+  persisted="false"
+>
+  <button
+    class="
+      px-0
+      px-md-4
+      text-primary
+      text-wrap
+      v-btn
+      v-btn--density-default
+      v-btn--size-default
+      v-btn--variant-outlined
+      v-theme--light
+      vd-back-to-top-btn
+    "
+    style="bottom: 0px; margin-right: 0px; display: none;"
+    type="button"
+  >
+    <span class="v-btn__overlay"></span>
+    <span class="v-btn__underlay"></span>
+    <!---->
+    <span
+      class="v-btn__content"
+      data-no-activator=""
+    >
+      <span class="">
+        Retour en haut
+      </span>
+      <i
+        aria-hidden="true"
+        class="
+          M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z
+          mdi
+          ml-0
+          ml-md-1
+          notranslate
+          text-primary
+          v-icon
+          v-icon--size-small
+          v-theme--light
+        "
+      ></i>
+    </span>
     <!---->
     <!---->
-  </button></transition-stub>"
+  </button>
+</transition-stub>
 `;

package/src/components/ChipList/ChipList.vue

@@ -177,6 +177,7 @@
 						<VIcon
 							v-bind="options.icon"
 							:icon="deleteIcon"
+							:color="item.state"
 						/>
 					</VBtn>
 				</div>

package/src/components/ContextualMenu/tests/__snapshots__/ContextualMenu.spec.ts.snap

@@ -1,10 +1,36 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ContextualMenu > renders correctly with items 1`] = `
-"<ul data-v-b65f24a2="" class="vd-contextual-menu">
-  <li data-v-b65f24a2=""><a data-v-b65f24a2="" href="#example-1" class="text-medium-emphasis d-flex align-center text-decoration-none text-body-1 px-4 py-2">Titre 1</a></li>
-  <li data-v-b65f24a2=""><a data-v-b65f24a2="" href="#example-2" class="text-medium-emphasis d-flex align-center text-decoration-none text-body-1 px-4 py-2">Titre 2</a></li>
-</ul>"
+<ul class="vd-contextual-menu">
+  <li>
+    <a
+      class="
+        align-center
+        d-flex
+        px-4
+        py-2
+        text-body-1
+        text-decoration-none
+        text-medium-emphasis
+      "
+      href="#example-1"
+    >Titre 1</a>
+  </li>
+  <li>
+    <a
+      class="
+        align-center
+        d-flex
+        px-4
+        py-2
+        text-body-1
+        text-decoration-none
+        text-medium-emphasis
+      "
+      href="#example-2"
+    >Titre 2</a>
+  </li>
+</ul>
 `;
 
-exports[`ContextualMenu > renders correctly without items 1`] = `"<!--v-if-->"`;
+exports[`ContextualMenu > renders correctly without items 1`] = `<!-- v-if -->`;