@cnamts/synapse 1.0.15 → 1.0.16

package/src/components/DataList/DataList.stories.ts

@@ -1,6 +1,7 @@
 import DataList from './DataList.vue'
 import type { Meta, StoryObj } from '@storybook/vue3'
 import { mdiAccount, mdiCalendar, mdiInformationOutline } from '@mdi/js'
+import SyAlert from '../../components/SyAlert/SyAlert.vue'
 
 const meta: Meta<typeof DataList> = {
 	title: 'Composants/Données/DataList',
@@ -20,6 +21,10 @@ const meta: Meta<typeof DataList> = {
 		loading: { control: 'boolean' },
 		itemsNumberLoading: { control: 'number' },
 		headingLoading: { control: 'boolean' },
+		renderHtmlValue: {
+			control: 'boolean',
+			description: '<b>@deprecated</b> Utiliser un slot (par exemple "item") pour rendre du HTML plutôt qu\'une string interprétée via v-html.',
+		},
 	},
 }
 
@@ -118,7 +123,6 @@ export const Default: Story = {
 						:loading="args.loading"
 						:items-number-loading="args.itemsNumberLoading"
 						:heading-loading="args.headingLoading"
-						:render-html-value="args.renderHtmlValue"
 					/>
 				</div>
 			`,
@@ -209,7 +213,6 @@ export const Row: Story = {
 						:loading="args.loading"
 						:items-number-loading="args.itemsNumberLoading"
 						:heading-loading="args.headingLoading"
-						:render-html-value="args.renderHtmlValue"
 					/>
 				</div>
 			`,
@@ -300,7 +303,6 @@ export const Title: Story = {
 						:loading="args.loading"
 						:items-number-loading="args.itemsNumberLoading"
 						:heading-loading="args.headingLoading"
-						:render-html-value="args.renderHtmlValue"
 					/>
 				</div>
 			`,
@@ -573,7 +575,7 @@ export const Chips: Story = {
 			},
 			template: `
 				<div class="pa-4">
-                    <DataList 
+					<DataList 
 						v-bind="args" 
 						:items="args.items"
 					/>
@@ -593,9 +595,23 @@ export const HtmlValue: Story = {
 				<template>
 					<DataList 
 						:items="items"
-						item-width="auto"
-						render-html-value
-					/>
+					>
+						<template #item="{ item, index, itemValue }">
+							<span
+								v-if="item.key === 'Adresse'"
+								class="text-body-1"
+							>
+								<b>{{ itemValue }}</b><br>
+								75020 Paris
+							</span>
+							<span
+								v-else
+								class="text-body-1"
+							>
+								{{ itemValue }}
+							</span>
+						</template>
+					</DataList>
 				</template>
 				`,
 			},
@@ -604,7 +620,7 @@ export const HtmlValue: Story = {
 				code: `
 				<script setup lang="ts">
 					import { DataList } from '@cnamts/synapse'
-										
+					
 					const items = [
 						{
 							key: 'Nom',
@@ -616,7 +632,7 @@ export const HtmlValue: Story = {
 						},
 						{
 							key: 'Adresse',
-							value: '<b>50 Avenue du Professeur André Lemierre</b><br>75020 Paris'
+							value: '50 Avenue du Professeur André Lemierre'
 						}
 					]
 				</script>
@@ -636,10 +652,9 @@ export const HtmlValue: Story = {
 			},
 			{
 				key: 'Adresse',
-				value: '<b>50 Avenue du Professeur André Lemierre</b><br>75020 Paris',
+				value: '50 Avenue du Professeur André Lemierre',
 			},
 		],
-		renderHtmlValue: true,
 	},
 	render: (args) => {
 		return {
@@ -649,11 +664,26 @@ export const HtmlValue: Story = {
 			},
 			template: `
 				<div class="pa-4">
-                    <DataList 
+					<DataList 
 						v-bind="args" 
 						:items="args.items"
-						:render-html-value="args.renderHtmlValue"
-					/>
+					>
+						<template #item="{ item, index, itemValue }">
+							<span
+								v-if="item.key === 'Adresse'"
+								class="text-body-1"
+							>
+								<b>{{ itemValue }}</b><br>
+								75020 Paris
+							</span>
+							<span
+								v-else
+								class="text-body-1"
+							>
+								{{ itemValue }}
+							</span>
+						</template>
+					</DataList>
 				</div>
 			`,
 		}
@@ -662,7 +692,7 @@ export const HtmlValue: Story = {
 
 export const Loading: Story = {
 	parameters: {
-		controls: { exclude: ['icons', 'titleClass', 'row', 'placeholder', 'renderHtmlValue', 'listTitle', 'title', 'click:item-action', 'width', 'minWidth', 'maxWidth'] },
+		controls: { exclude: ['icons', 'listTitle', 'titleClass', 'row', 'placeholder', 'title', 'click:item-action', 'width', 'minWidth', 'maxWidth'] },
 		sourceCode: [
 			{
 				name: 'Template',
@@ -683,7 +713,7 @@ export const Loading: Story = {
 				code: `
 				<script setup lang="ts">
 					import { DataList } from '@cnamts/synapse'
-										
+					
 					const items = [
 						{
 							key: 'Nom',
@@ -731,7 +761,7 @@ export const Loading: Story = {
 			},
 			template: `
 				<div class="pa-4">
-                    <DataList 
+					<DataList 
 						v-bind="args" 
 						:items="args.items"
 						:items-number-loading="args.itemsNumberLoading"
@@ -959,3 +989,23 @@ export const Customisation: Story = {
 		}
 	},
 }
+
+export const InfoIntro = {
+	render: () => {
+		return {
+			components: { SyAlert },
+			setup() {
+				return {}
+			},
+			template: `
+			  <SyAlert type="info" variant="tonal" :closable="false">
+				<template #default>
+				 La propriété <b>renderHtmlValue</b> est dépréciée car elle repose sur v-html et peut exposer votre application à des failles XSS.
+Utilisez à la place le slot item de DataList (ou le slot value de DataListItem) pour rendre du HTML de manière contrôlée depuis le composant parent.
+				</template>
+			  </SyAlert>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/DataList/DataList.vue

@@ -132,7 +132,19 @@
 					:class="getItemClass(index, item.class)"
 					class="sy-data-list-item text-body-1"
 					@click:action="emit('click:item-action', index)"
-				/>
+				>
+					<template
+						v-if="$slots.item"
+						#value="{ itemValue }"
+					>
+						<slot
+							name="item"
+							:item="item"
+							:index="index"
+							:item-value="itemValue"
+						/>
+					</template>
+				</DataListItem>
 			</dl>
 		</component>
 	</VFadeTransition>

package/src/components/DataListGroup/DataListGroup.stories.ts

@@ -14,7 +14,10 @@ const meta: Meta<typeof DataListGroup> = {
 		icons: { control: 'object' },
 		itemWidth: { control: 'text' },
 		loading: { control: 'boolean' },
-		renderHtmlValue: { control: 'boolean' },
+		renderHtmlValue: {
+			control: 'boolean',
+			description: '@deprecated Utiliser un slot (par exemple "item") pour rendre du HTML plutôt qu\'une string interprétée via v-html.',
+		},
 	},
 }
 
@@ -131,7 +134,6 @@ export const Default: Story = {
 		icons: undefined,
 		itemWidth: '200px',
 		loading: false,
-		renderHtmlValue: false,
 	},
 	render: (args) => {
 		return {
@@ -147,7 +149,6 @@ export const Default: Story = {
 						:icons="args.icons"
 						:item-width="args.itemWidth"
 						:loading="args.loading"
-						:render-html-value="args.renderHtmlValue"
 					/>
 				</div>
 			`,
@@ -735,8 +736,23 @@ export const HtmlValue: Story = {
 				<template>
 					<DataListGroup 
 						:items="items" 
-						render-html-value
-					/>
+					>
+						<template #item="{ item, dataListIndex, index, itemValue }">
+							<span
+								v-if="item.key === 'Adresse'"
+								class="text-body-1"
+							>
+								<b>{{ itemValue }}</b><br>
+								75020 Paris
+							</span>
+							<span
+								v-else
+								class="text-body-1"
+							>
+								{{ itemValue }}
+							</span>
+						</template>
+					</DataListGroup>
 				</template>
 				`,
 			},
@@ -782,8 +798,8 @@ export const HtmlValue: Story = {
 							items: [
 								{
 									key: 'Adresse',
-									value: '<b>50 Avenue du Professeur André Lemierre</b><br>75020 Paris'
-								},
+									value: '50 Avenue du Professeur André Lemierre',
+								}
 							],
 						},
 					]
@@ -830,12 +846,11 @@ export const HtmlValue: Story = {
 				items: [
 					{
 						key: 'Adresse',
-						value: '<b>50 Avenue du Professeur André Lemierre</b><br>75020 Paris',
+						value: '50 Avenue du Professeur André Lemierre',
 					},
 				],
 			},
 		],
-		renderHtmlValue: true,
 	},
 	render: (args) => {
 		return {
@@ -845,11 +860,26 @@ export const HtmlValue: Story = {
 			},
 			template: `
 				<div class="pa-4">
-                    <DataListGroup 
+					<DataListGroup 
 						v-bind="args" 
 						:items="args.items"
-						:render-html-value="args.renderHtmlValue"
-					/>
+					>
+						<template #item="{ item, dataListIndex, index, itemValue }">
+							<span
+								v-if="item.key === 'Adresse'"
+								class="text-body-1"
+							>
+								<b>{{ itemValue }}</b><br>
+								75020 Paris
+							</span>
+							<span
+								v-else
+								class="text-body-1"
+							>
+								{{ itemValue }}
+							</span>
+						</template>
+					</DataListGroup>
 				</div>
 			`,
 		}

package/src/components/DataListGroup/DataListGroup.vue

@@ -62,7 +62,20 @@
 				:icons="props.icons"
 				class="ma-4"
 				@click:item-action="emitItemAction(index, $event)"
-			/>
+			>
+				<template
+					v-if="$slots.item"
+					#item="{ item, index: itemIndex, itemValue }"
+				>
+					<slot
+						name="item"
+						:item="item"
+						:index="itemIndex"
+						:item-value="itemValue"
+						:data-list-index="index"
+					/>
+				</template>
+			</DataList>
 		</li>
 	</ul>
 </template>

package/src/components/DataListItem/DataListItem.vue

@@ -14,6 +14,9 @@
 		chip?: boolean
 		icon?: string
 		row?: boolean
+		/**
+		 * @deprecated Utiliser le slot "value" pour rendre du HTML dans le template parent.
+		 */
 		renderHtmlValue?: boolean
 	}>(), {
 		label: '',
@@ -26,6 +29,10 @@
 		renderHtmlValue: false,
 	})
 
+	if (import.meta.env.DEV && props.renderHtmlValue) {
+		console.warn('[DataListItem] La prop "renderHtmlValue" est dépréciée. Utilisez le slot "value" pour rendre du HTML en toute sécurité.')
+	}
+
 	const emits = defineEmits(['click:action'])
 
 	const options = useCustomizableOptions(config, props)
@@ -89,8 +96,9 @@
 				<span
 					v-else-if="renderHtmlValue"
 					class="text-body-1"
-					v-html="itemValue"
-				/>
+				>
+					renderHtmlValue est obsolète. Merci de vous référer à la documentation pour connaître l’API recommandée.
+				</span>
 
 				<span
 					v-else

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

@@ -69,7 +69,7 @@ describe('DataListItem', () => {
 
 		const elValue = wrapper.find('.sy-data-list-item-value span')
 
-		expect(elValue.text()).toBe('Paul Dupont')
+		expect(elValue.text()).toBe('renderHtmlValue est obsolète. Merci de vous référer à la documentation pour connaître l’API recommandée.')
 	})
 
 	it('renders correctly value in a chip', () => {