@cnamts/synapse 0.0.6-alpha → 0.0.8-alpha

package/src/components/CookieBanner/CookieBanner.vue

@@ -158,7 +158,6 @@
 </template>
 
 <style lang="scss" scoped>
-
 .vd-cookie-banner {
 	position: fixed;
 	left: 50%;
@@ -176,16 +175,17 @@
 	display: flex;
 	flex-direction: column;
 	width: 100%;
-  background: transparent;
+	background: transparent;
 }
 
 .vd-cookie-banner-content {
 	overflow-y: auto;
 	padding-right: 8px;
-  background: transparent;
-  div {
-    background: transparent;
-  }
+	background: transparent;
+
+	div {
+		background: transparent;
+	}
 }
 
 .vd-cookie-banner-action-ctn .v-btn {
@@ -193,12 +193,13 @@
 }
 
 .v-btn--icon {
-	color: rgba(0, 0, 0, 0.54);
+	color: rgb(0 0 0 / 54%);
 	position: absolute;
 	right: 24px;
 }
 
-.height-enter-active, .height-leave-active {
+.height-enter-active,
+.height-leave-active {
 	box-sizing: border-box;
 	transition: height 2s ease;
 	interpolate-size: allow-keywords;
@@ -214,11 +215,13 @@
 	transition: height 0.1s ease;
 }
 
-.height-enter-from, .height-leave-to {
+.height-enter-from,
+.height-leave-to {
 	height: 0;
 }
 
-.height-enter-to, .height-leave-from {
+.height-enter-to,
+.height-leave-from {
 	height: auto;
 }
 

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

@@ -42,9 +42,9 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
             <table>
               <thead data-v-d0e8c396="">
                 <tr data-v-d0e8c396="">
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Dénomination du cookie</th>
-                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left">Finalité</th>
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Durée de conservation</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Dénomination du cookie</th>
+                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left" scope="col">Finalité</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Durée de conservation</th>
                 </tr>
               </thead>
               <tbody data-v-d0e8c396="">
@@ -77,9 +77,9 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
             <table>
               <thead data-v-d0e8c396="">
                 <tr data-v-d0e8c396="">
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Dénomination du cookie</th>
-                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left">Finalité</th>
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Durée de conservation</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Dénomination du cookie</th>
+                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left" scope="col">Finalité</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Durée de conservation</th>
                 </tr>
               </thead>
               <tbody data-v-d0e8c396="">
@@ -96,9 +96,10 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
       </details>
       <div data-v-2ca04413="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-radio-group vd-cookies-information__radio-group" data-test-id="radio-group">
         <!---->
-        <div class="v-input__control">
-          <!---->
-          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" aria-describedby="radio-group-7-messages">
+        <div class="v-input__control"><label class="v-label" id="radio-group-7">
+            <!---->Accepter les cookies de type Cookies fonctionnels, ce champ est requis.
+          </label>
+          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" label="Accepter les cookies de type Cookies fonctionnels, ce champ est requis." aria-describedby="radio-group-7-messages" aria-labelledby="radio-group-7">
             <div data-v-2ca04413="" class="v-spacer"></div>
             <div data-v-2ca04413="" class="v-selection-control v-selection-control--inline v-selection-control--density-default v-radio">
               <div class="v-selection-control__wrapper">
@@ -133,9 +134,9 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
             <table>
               <thead data-v-d0e8c396="">
                 <tr data-v-d0e8c396="">
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Dénomination du cookie</th>
-                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left">Finalité</th>
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Durée de conservation</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Dénomination du cookie</th>
+                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left" scope="col">Finalité</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Durée de conservation</th>
                 </tr>
               </thead>
               <tbody data-v-d0e8c396="">
@@ -152,9 +153,10 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
       </details>
       <div data-v-2ca04413="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-radio-group vd-cookies-information__radio-group" data-test-id="radio-group">
         <!---->
-        <div class="v-input__control">
-          <!---->
-          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" aria-describedby="radio-group-12-messages">
+        <div class="v-input__control"><label class="v-label" id="radio-group-12">
+            <!---->Accepter les cookies de type Cookies d’analyse, ce champ est requis.
+          </label>
+          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" label="Accepter les cookies de type Cookies d’analyse, ce champ est requis." aria-describedby="radio-group-12-messages" aria-labelledby="radio-group-12">
             <div data-v-2ca04413="" class="v-spacer"></div>
             <div data-v-2ca04413="" class="v-selection-control v-selection-control--inline v-selection-control--density-default v-radio">
               <div class="v-selection-control__wrapper">

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

@@ -73,6 +73,7 @@
 			:rules="[required]"
 			data-test-id="radio-group"
 			inline
+			:label="locales.fieldLabel(locales[type].title)"
 			hide-details="auto"
 			class="vd-cookies-information__radio-group"
 			@update:model-value="status = $event === 'accept'"
@@ -96,7 +97,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 
 details > summary {
 	cursor: pointer;
@@ -119,5 +120,9 @@ details > summary {
 	:deep(.v-messages) {
 		text-align: end;
 	}
+
+	:deep(.v-label) {
+		justify-content: end;
+	}
 }
 </style>

package/src/components/CookiesSelection/CookiesInformation/locales.ts

@@ -18,4 +18,5 @@ export const locales = {
 	hideInformation: 'Masquer les cookies',
 	reject: 'Refuser',
 	accept: 'Accepter',
+	fieldLabel: (cookieCategory: string) => `Accepter les cookies de type ${cookieCategory}, ce champ est requis.`,
 } as const

package/src/components/CookiesSelection/CookiesTable/CookiesTable.vue

@@ -14,6 +14,7 @@
 					:key="index"
 					:style="{ width: item.width }"
 					class="text-left"
+					scope="col"
 				>
 					{{ item.label }}
 				</th>

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

@@ -42,9 +42,9 @@ exports[`CookiesSelection > renders correctly 1`] = `
             <table>
               <thead data-v-d0e8c396="">
                 <tr data-v-d0e8c396="">
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Dénomination du cookie</th>
-                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left">Finalité</th>
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Durée de conservation</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Dénomination du cookie</th>
+                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left" scope="col">Finalité</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Durée de conservation</th>
                 </tr>
               </thead>
               <tbody data-v-d0e8c396="">
@@ -77,9 +77,9 @@ exports[`CookiesSelection > renders correctly 1`] = `
             <table>
               <thead data-v-d0e8c396="">
                 <tr data-v-d0e8c396="">
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Dénomination du cookie</th>
-                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left">Finalité</th>
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Durée de conservation</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Dénomination du cookie</th>
+                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left" scope="col">Finalité</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Durée de conservation</th>
                 </tr>
               </thead>
               <tbody data-v-d0e8c396="">
@@ -96,9 +96,10 @@ exports[`CookiesSelection > renders correctly 1`] = `
       </details>
       <div data-v-2ca04413="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-radio-group vd-cookies-information__radio-group" data-test-id="radio-group">
         <!---->
-        <div class="v-input__control">
-          <!---->
-          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" aria-describedby="radio-group-2-messages">
+        <div class="v-input__control"><label class="v-label" id="radio-group-2">
+            <!---->Accepter les cookies de type Cookies fonctionnels, ce champ est requis.
+          </label>
+          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" label="Accepter les cookies de type Cookies fonctionnels, ce champ est requis." aria-describedby="radio-group-2-messages" aria-labelledby="radio-group-2">
             <div data-v-2ca04413="" class="v-spacer"></div>
             <div data-v-2ca04413="" class="v-selection-control v-selection-control--inline v-selection-control--density-default v-radio">
               <div class="v-selection-control__wrapper">
@@ -133,9 +134,9 @@ exports[`CookiesSelection > renders correctly 1`] = `
             <table>
               <thead data-v-d0e8c396="">
                 <tr data-v-d0e8c396="">
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Dénomination du cookie</th>
-                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left">Finalité</th>
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Durée de conservation</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Dénomination du cookie</th>
+                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left" scope="col">Finalité</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Durée de conservation</th>
                 </tr>
               </thead>
               <tbody data-v-d0e8c396="">
@@ -152,9 +153,10 @@ exports[`CookiesSelection > renders correctly 1`] = `
       </details>
       <div data-v-2ca04413="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-radio-group vd-cookies-information__radio-group" data-test-id="radio-group">
         <!---->
-        <div class="v-input__control">
-          <!---->
-          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" aria-describedby="radio-group-7-messages">
+        <div class="v-input__control"><label class="v-label" id="radio-group-7">
+            <!---->Accepter les cookies de type Cookies d’analyse, ce champ est requis.
+          </label>
+          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" label="Accepter les cookies de type Cookies d’analyse, ce champ est requis." aria-describedby="radio-group-7-messages" aria-labelledby="radio-group-7">
             <div data-v-2ca04413="" class="v-spacer"></div>
             <div data-v-2ca04413="" class="v-selection-control v-selection-control--inline v-selection-control--density-default v-radio">
               <div class="v-selection-control__wrapper">

package/src/components/CopyBtn/CopyBtn.stories.ts

@@ -207,8 +207,11 @@ export const SlotIcon: Story = {
 		<CopyBtn
 			label="Copier le numéro de patient"
 			text-to-copy="1970756541"
-			:icon="duplicateIcon"
-		/>
+		>
+			<template #icon>
+				<VIcon :icon="duplicateIcon" />
+			</template>
+		</CopyBtn>
 	</div>
 </template>
 				`,

package/src/components/CopyBtn/CopyBtn.vue

@@ -86,17 +86,17 @@
 </template>
 
 <style lang="scss">
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 
 .vd-copy-tooltip-menu {
-  padding: 6px 16px;
-  box-shadow: none;
-  margin-top: 2px;
-  background: rgba(84, 88, 89, 0.95);
-  color: white;
+	padding: 6px 16px;
+	box-shadow: none;
+	margin-top: 2px;
+	background: rgb(84 88 89 / 95%);
+	color: white;
 }
 
 .v-btn--icon .v-icon {
-  color: tokens.$grey-lighten-20;
+	color: tokens.$grey-lighten-20;
 }
 </style>

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

@@ -86,52 +86,6 @@ const items = [
 	},
 }
 
-export const withLink: Story = {
-	parameters: {
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-<template>
-  <SyBtnSelect 
-  	:primary-info="primaryInfo" 
-  	:menu-items="items" 
-  />
-</template>
-				`,
-			},
-			{
-				name: 'Script',
-				code: `
-<script setup lang="ts">
-import SyBtnSelect from './SyBtnSelect.vue'
-
-const primaryInfo = 'Mes options'
-const items = ['Option 1', 'Option 2']
-</script>
-				`,
-			},
-		],
-	},
-	args: {
-		primaryInfo: 'Mes options',
-		menuItems: ['Option 1', 'Option 2'],
-	},
-	render: (args) => {
-		return {
-			components: { SyBtnSelect },
-			setup() {
-				return { args }
-			},
-			template: `
-              <div class="d-flex flex-wrap align-center pa-4">
-                <SyBtnSelect v-bind="args"/>
-              </div>
-            `,
-		}
-	},
-}
-
 export const MobileView: Story = {
 	parameters: {
 		sourceCode: [
@@ -203,6 +157,7 @@ export const WithSlotPrependIcon: Story = {
 				code: `
 <script setup lang="ts">
 import SyBtnSelect from './SyBtnSelect.vue'
+import { mdiAccount } from '@mdi/js'
 
 const primaryInfo = 'Jane Doe'
 const items = ['Option 1', 'Option 2']
@@ -260,6 +215,7 @@ export const WithSlotAppendIcon: Story = {
 				code: `
 <script setup lang="ts">
 import SyBtnSelect from './SyBtnSelect.vue'
+import { mdiAccount } from '@mdi/js'
 
 const primaryInfo = 'Jane Doe'
 const items = ['Option 1', 'Option 2']
@@ -315,6 +271,7 @@ export const WithIconOnly: Story = {
 				code: `
 <script setup lang="ts">
 import SyBtnSelect from './SyBtnSelect.vue'
+import { mdiAccount } from '@mdi/js'
 
 const primaryInfo = 'Jane Doe'
 const items = ['Option 1', 'Option 2']
@@ -359,7 +316,7 @@ export const WithLogoutItemSlot: Story = {
   	:menu-items="items"
   >
     <template #footer-list-item>
-      <VListItem @click="args.logout">
+      <VListItem @click="console.log('logout')">
         <VListItemTitle>Logout</VListItemTitle>
       </VListItem>
     </template>
@@ -394,7 +351,7 @@ const items = ['Option 1', 'Option 2']
               <div class="d-flex flex-wrap align-center pa-4">
                 <SyBtnSelect v-bind="args">
                   <template #footer-list-item>
-                    <VListItem @click="args.logout">
+                    <VListItem @click="console.log('logout')">
                       <VListItemTitle>Logout</VListItemTitle>
                     </VListItem>
                   </template>
@@ -413,7 +370,6 @@ export const WithCustomKeys: Story = {
 				code: `
 <template>
   <SyBtnSelect
-    v-bind="args"
     text-key="customText"
     value-key="customValue"
     :menu-items="menuItems"
@@ -430,6 +386,7 @@ export const WithCustomKeys: Story = {
 				code: `
 <script setup lang="ts">
 import SyBtnSelect from './SyBtnSelect.vue'
+import { mdiAccount } from '@mdi/js'
 
 const primaryInfo = 'Information principale'
 const menuItems = [
@@ -485,7 +442,7 @@ export const WithMultipleSlots: Story = {
       <VIcon :icon="mdiAccount" />
     </template>
     <template #footer-list-item>
-      <VListItem @click="args.logout">
+      <VListItem @click="console.log('logout')">
         <VListItemTitle>Se déconnecter</VListItemTitle>
       </VListItem>
     </template>
@@ -498,6 +455,7 @@ export const WithMultipleSlots: Story = {
 				code: `
 <script setup lang="ts">
 import SyBtnSelect from './SyBtnSelect.vue'
+import { mdiAccount } from '@mdi/js'
 
 const primaryInfo = 'Information principale'
 const menuItems = ['Option 1', 'Option 2']
@@ -522,7 +480,7 @@ const menuItems = ['Option 1', 'Option 2']
                     <VIcon :icon="mdiAccount"/>
                   </template>
                   <template #footer-list-item>
-                    <VListItem @click="args.logout">
+                    <VListItem @click="console.log('logout')">
                       <VListItemTitle>Se déconnecter</VListItemTitle>
                     </VListItem>
                   </template>
@@ -560,6 +518,7 @@ export const WithCustomStyles: Story = {
 				code: `
 <script setup lang="ts">
 import SyBtnSelect from './SyBtnSelect.vue'
+import { mdiAccount } from '@mdi/js'
 
 const primaryInfo = 'Jane Doe'
 const items = ['Option 1', 'Option 2']
@@ -619,6 +578,7 @@ export const WithStyledOptions: Story = {
 				code: `
 <script setup lang="ts">
 import SyBtnSelect from './SyBtnSelect.vue'
+import { mdiAccount } from '@mdi/js'
 
 const primaryInfo = 'Information principale'
 const menuItems = ['Option 1', 'Option 2']

package/src/components/Customs/SyBtnSelect/SyBtnSelect.vue

@@ -213,42 +213,42 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 @use '@/assets/tokens' as *;
 
 .vd-user-menu-btn-ctn {
-  position: relative;
-  z-index: 1;
+	position: relative;
+	z-index: 1;
 
-  .v-btn.v-btn--density-default {
-    height: auto !important;
-  }
+	.v-btn.v-btn--density-default {
+		height: auto !important;
+	}
 
-  .v-btn {
-    text-transform: none !important;
-  }
+	.v-btn {
+		text-transform: none !important;
+	}
 }
 
 .vd-user-menu-btn {
-  outline: none;
-  padding: 12px !important;
-
-  &:hover:before {
-    background: #000;
-    opacity: 0.05;
-  }
-
-  &:focus:before {
-    background: tokens.$blue-base;
-    opacity: 0.08;
-  }
-
-  &:focus {
-    background: rgba(tokens.$blue-base, 0.08) !important;
-  }
+	outline: none;
+	padding: 12px !important;
+
+	&:hover::before {
+		background: #000;
+		opacity: 0.05;
+	}
+
+	&:focus::before {
+		background: tokens.$blue-base;
+		opacity: 0.08;
+	}
+
+	&:focus {
+		background: rgba(tokens.$blue-base, 0.08) !important;
+	}
 }
 
 :deep(.vd-user-menu-btn:focus > .v-btn__overlay) {
-  opacity: 0 !important;
+	opacity: 0 !important;
 }
 </style>

package/src/components/Customs/SyInputSelect/SyInputSelect.mdx

@@ -21,11 +21,14 @@ Il est basé sur un `v-input`.
 <Source dark code={`
 <script setup lang="ts">
 	import { SyInputSelect } from '@cnamts/synapse'
+	import { ref } from 'vue'
 
 	const items = [
         { text: 'Option 1', value: '1' },
         { text: 'Option 2', value: '2' },
-    ],
+    ]
+
+    const value = ref(undefined)
 </script>
 
 <template>

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

@@ -44,12 +44,15 @@ export const Default: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SyInputSelect from '@cnamts/SyInputSelect'
+					import SyInputSelect from '@cnamts/synapse'
+					import { ref } from 'vue'
 					
 					const items =  [
 						{ text: 'Option 1', value: '1' },
 						{ text: 'Option 2', value: '2' },
 					],
+					
+					const value = ref(undefined)
 				</script>
 				`,
 			},
@@ -107,12 +110,15 @@ export const Required: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SyInputSelect from '@cnamts/SyInputSelect'
+					import SyInputSelect from '@cnamts/synapse'
+					import { ref } from 'vue'
 					
 					const items =  [
 						{ text: 'Option 1', value: '1' },
 						{ text: 'Option 2', value: '2' },
 					],
+					
+					const value = ref(undefined)
 				</script>
 				`,
 			},
@@ -165,7 +171,7 @@ export const withCustomError: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SyInputSelect from '@cnamts/SyInputSelect'
+					import SyInputSelect from '@cnamts/synapse'
 					import { ref } from 'vue'
 					
 					const items =  [
@@ -178,6 +184,8 @@ export const withCustomError: Story = {
 					const triggerError = () => {
 						errorMessages.value = ['This is a test error message']
 					}
+                    
+                    const value = ref(undefined)
 				</script>
 				`,
 			},
@@ -226,7 +234,6 @@ export const withCustomKey: Story = {
 						v-model="value"
 						:items="items"
 						text-key="customKey"
-						outlined
 					/>
 				</template>
 				`,
@@ -235,12 +242,15 @@ export const withCustomKey: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SyInputSelect from '@cnamts/SyInputSelect'
+					import SyInputSelect from '@cnamts/synapse'
+					import { ref } from 'vue'
 					
 					const items =  [
 						{ customKey: 'Choix 1', value: '1' },
 						{ customKey: 'Choix 2', value: '2' }
 					]
+					
+					const value = ref(undefined)
 				</script>
 				`,
 			},
@@ -262,7 +272,6 @@ export const withCustomKey: Story = {
 				<div class="d-flex flex-wrap align-center pa-4">
 					<SyInputSelect
 						v-bind="args"
-						outlined
 						text-key="customKey"
 					/>
 				</div>
@@ -290,7 +299,8 @@ export const withCustomStyles: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SyInputSelect from '@cnamts/SyInputSelect'
+					import SyInputSelect from '@cnamts/synapse'
+					import { ref } from 'vue'
 					
 					const items =  [
 						{ text: 'Option 1', value: '1' },
@@ -305,6 +315,8 @@ export const withCustomStyles: Story = {
 							color: 'secondary',
 						},
 					}
+                    
+                    const value = ref(undefined)
 				</script>
 				`,
 			},