@cnamts/synapse 0.0.15-alpha → 1.0.0

package/src/components/SyAlert/SyAlert.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { computed } from 'vue'
+	import { computed, ref, onMounted, useAttrs } from 'vue'
 	import { locales } from './locales'
 	import {
 		mdiAlertOutline,
@@ -8,6 +8,7 @@
 		mdiInformationOutline,
 		mdiClose,
 	} from '@mdi/js'
+	import type { VIcon } from 'vuetify/components'
 
 	const show = defineModel<boolean>({
 		default: true,
@@ -23,6 +24,8 @@
 		variant: 'tonal',
 	})
 
+	const attrs = useAttrs()
+
 	const prependIcon = computed(() => {
 		return {
 			info: mdiInformationOutline,
@@ -43,58 +46,71 @@
 		prependIcon,
 		dismissAlert,
 	})
+
+	const alertIcon = ref<typeof VIcon | null>(null)
+	onMounted(() => {
+		alertIcon.value?.$el?.querySelector('svg')?.setAttribute('role', 'presentation')
+	})
 </script>
 
 <template>
-	<VAlert
-		v-model="show"
-		:type="props.type"
-		:closable="props.closable"
-		:variant="props.variant"
-		:class="`alert alert--${props.type}`"
-		:color="props.type"
-		:border="props.variant === 'tonal' ? 'start' : false"
+	<div
+		class="sy-alert"
+		role="alert"
 	>
-		<template #prepend>
-			<VIcon
-				class="alert-icon"
-				size="1.5rem"
-			>
-				<slot name="icon">
-					{{ prependIcon }}
-				</slot>
-			</VIcon>
-		</template>
-
-		<template #default>
-			<slot />
-		</template>
-
-		<template
-			v-if="props.closable"
-			#close
+		<VAlert
+			v-model="show"
+			v-bind="attrs"
+			:type="props.type"
+			:closable="props.closable"
+			:variant="props.variant"
+			:class="`alert alert--${props.type}`"
+			:color="props.type"
+			:border="props.variant === 'tonal' ? 'start' : false"
 		>
-			<VBtn
-				:color="props.variant === 'outlined' ? undefined : 'primary'"
-				:ripple="false"
-				variant="text"
-				width="auto"
-				height="100%"
-				class="alert-close-btn"
-				@click="dismissAlert"
-			>
+			<template #prepend>
 				<VIcon
-					size="small"
+					ref="alertIcon"
+					class="alert-icon"
+					size="1.5rem"
+					role="presentation"
 				>
-					{{ mdiClose }}
+					<slot name="icon">
+						{{ prependIcon }}
+					</slot>
 				</VIcon>
+			</template>
+
+			<template #default>
+				<slot />
+			</template>
 
-				<span>
-					{{ locales.close }}
-				</span>
-			</VBtn>
-		</template>
-	</VAlert>
+			<template
+				v-if="props.closable"
+				#close
+			>
+				<VBtn
+					:color="props.variant === 'outlined' ? undefined : 'primary'"
+					:ripple="false"
+					variant="text"
+					width="auto"
+					height="100%"
+					class="alert-close-btn"
+					@click="dismissAlert"
+				>
+					<VIcon
+						size="small"
+					>
+						{{ mdiClose }}
+					</VIcon>
+
+					<span>
+						{{ locales.close }}
+					</span>
+				</VBtn>
+			</template>
+		</VAlert>
+	</div>
 </template>
 
 <style lang="scss" scoped>
@@ -128,17 +144,24 @@
 .alert-close-btn {
 	cursor: pointer;
 	line-height: 0;
-
-	.v-btn__overlay {
-		display: none;
-	}
-}
-
-.v-btn {
 	text-transform: none;
 	font-weight: bold;
 	font-size: 0.75rem;
 	letter-spacing: normal;
+
+	&:focus-visible {
+		outline: solid 2px black !important;
+		outline-color: var(--v-primary-base) !important;
+		outline-offset: 2px !important;
+
+		&::after {
+			visibility: hidden;
+		}
+	}
+
+	.v-btn__overlay {
+		display: none;
+	}
 }
 
 @media screen and (width <= 440px) {
@@ -254,4 +277,18 @@
 		)
 	);
 }
+
+.v-alert.v-theme--dark {
+	&.v-alert--variant-outlined {
+		background-color: tokens.$white-base !important;
+	}
+
+	.alert-close-btn {
+		color: black !important;
+
+		&:focus-visible {
+			outline-color: black !important;
+		}
+	}
+}
 </style>

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

@@ -46,7 +46,16 @@ describe('Alert', () => {
 			modelValue: false,
 		})
 
-		expect(wrapper.html()).toBeFalsy()
+		expect(wrapper.html()).toMatchInlineSnapshot(`
+			<div
+			  class="sy-alert"
+			  message="message"
+			  role="alert"
+			  title="title"
+			>
+			  <!---->
+			</div>
+		`)
 
 		await wrapper.setProps({
 			modelValue: true,
@@ -79,7 +88,16 @@ describe('Alert', () => {
 
 		await closeBtn.element.click()
 
-		expect(wrapper.html()).toBeFalsy()
+		expect(wrapper.html()).toMatchInlineSnapshot(`
+			<div
+			  class="sy-alert"
+			  message="message"
+			  role="alert"
+			  title="title"
+			>
+			  <!---->
+			</div>
+		`)
 		expect(wrapper.emitted('update:modelValue')![0]![0]).toBe(false)
 	})
 

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

@@ -2,86 +2,94 @@
 
 exports[`Alert > render correctly 1`] = `
 <div
-  class="
-    alert
-    alert--success
-    text-success
-    v-alert
-    v-alert--border
-    v-alert--border-start
-    v-alert--density-default
-    v-alert--variant-tonal
-    v-theme--light
-  "
+  class="sy-alert"
   message="message"
   role="alert"
+  title="title"
 >
-  <!---->
-  <span class="v-alert__underlay"></span>
-  <div class="v-alert__border"></div>
-  <div class="v-alert__prepend">
-    <i
-      aria-hidden="true"
-      class="
-        11.59L6
-        12
-        12
-        12
-        12
-        12
-        12
-        12S6.5
-        12S7.59
-        13L10
-        14.17L7.41
-        16.41
-        16.41
-        17.5
-        17.5
-        17L18
-        2
-        2
-        2
-        2
-        20
-        20
-        20
-        20
-        20C7.59
-        20M16.59
-        22
-        22
-        22
-        22
-        2C6.5
-        2M12
-        4
-        4
-        4
-        4
-        6.5
-        7.58L10
-        7.58Z
-        7.59
-        9L16.59
-        M12
-        alert-icon
-        mdi
-        notranslate
-        v-icon
-        v-theme--light
-      "
-      style="font-size: 1.5rem; height: 1.5rem; width: 1.5rem;"
-    ></i>
-  </div>
-  <div class="v-alert__content">
-    <div class="v-alert-title">
-      title
+  <div
+    class="
+      alert
+      alert--success
+      text-success
+      v-alert
+      v-alert--border
+      v-alert--border-start
+      v-alert--density-default
+      v-alert--variant-tonal
+      v-theme--light
+    "
+    message="message"
+    role="alert"
+  >
+    <!---->
+    <span class="v-alert__underlay"></span>
+    <div class="v-alert__border"></div>
+    <div class="v-alert__prepend">
+      <i
+        aria-hidden="true"
+        class="
+          11.59L6
+          12
+          12
+          12
+          12
+          12
+          12
+          12S6.5
+          12S7.59
+          13L10
+          14.17L7.41
+          16.41
+          16.41
+          17.5
+          17.5
+          17L18
+          2
+          2
+          2
+          2
+          20
+          20
+          20
+          20
+          20C7.59
+          20M16.59
+          22
+          22
+          22
+          22
+          2C6.5
+          2M12
+          4
+          4
+          4
+          4
+          6.5
+          7.58L10
+          7.58Z
+          7.59
+          9L16.59
+          M12
+          alert-icon
+          mdi
+          notranslate
+          v-icon
+          v-theme--light
+        "
+        role="presentation"
+        style="font-size: 1.5rem; height: 1.5rem; width: 1.5rem;"
+      ></i>
     </div>
+    <div class="v-alert__content">
+      <div class="v-alert-title">
+        title
+      </div>
+      <!---->
+      slot content
+    </div>
+    <!---->
     <!---->
-    slot content
   </div>
-  <!---->
-  <!---->
 </div>
 `;

package/src/components/SyTextArea/SyTextArea.mdx

@@ -0,0 +1,17 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+
+import * as SyTextAreaStories from './SyTextArea.stories';
+
+<Meta of={SyTextAreaStories} />
+
+# SyTextArea
+
+Le composant `SyTextArea` étend les fonctionnalitées du composants `VTextArea` de `Vuetify` en ajoutant des contraintes.
+
+<Canvas of={SyTextAreaStories.Default}  />
+
+# API
+
+Les props du composant `SyTextArea` sont les mêmes que celles du composant `VTextArea` de `Vuetify`, avec quelques ajouts :
+
+<Controls of={SyTextAreaStories.Default} />