@cnamts/synapse 0.0.3-alpha → 0.0.5-alpha

package/src/components/DataListGroup/DataListGroup.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+	import type { PropType } from 'vue'
+	import type { DataListIcons } from '../DataList/types'
+	import type { DataListGroupItems, DataListActionEvent } from './types'
+	import DataList from '../DataList/DataList.vue'
+
+	const props = defineProps({
+		items: {
+			type: Array as PropType<DataListGroupItems>,
+			required: true,
+		},
+		icons: {
+			type: Object as PropType<DataListIcons | undefined>,
+			default: undefined,
+		},
+		itemWidth: {
+			type: String,
+			default: '200px',
+		},
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		renderHtmlValue: {
+			type: Boolean,
+			default: false,
+		},
+	})
+
+	const emit = defineEmits(['click:list-item'])
+
+	const emitItemAction = (dataListIndex: number, itemIndex: number): void => {
+		const eventValue: DataListActionEvent = {
+			dataListIndex,
+			itemIndex,
+		}
+
+		emit('click:list-item', eventValue)
+	}
+</script>
+
+<template>
+	<div class="vd-data-list-group d-flex flex-wrap max-width-none ma-n4">
+		<DataList
+			v-for="(dataList, index) in props.items"
+			:key="`vd-data-list-${index}`"
+			:loading="props.loading"
+			:render-html-value="props.renderHtmlValue"
+			:list-title="dataList.title"
+			:items="dataList.items"
+			:items-number-loading="dataList.itemsNumberLoading"
+			:heading-loading="dataList.headingLoading"
+			:width="props.itemWidth"
+			:icons="props.icons"
+			class="ma-4"
+			@click:item-action="emitItemAction(index, $event)"
+		/>
+	</div>
+</template>

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

@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import DataListGroup from '../DataListGroup.vue'
+
+import { dataListGroupItems } from './data/dataListGroupItems'
+import { vuetify } from '@tests/unit/setup'
+
+describe('DataListGroup', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(DataListGroup, {
+			props: {
+				items: dataListGroupItems,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.find('h4').text()).toBe('Catégorie 1')
+	})
+
+	it('renders loading state correctly', async () => {
+		const wrapper = mount(DataListGroup, {
+			props: {
+				loading: true,
+				items: dataListGroupItems,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.find('.vd-data-list-loading').exists()).toBe(true)
+	})
+
+	it('emit the right event when clicking on a item button', async () => {
+		const wrapper = mount(DataListGroup, {
+			props: {
+				items: dataListGroupItems,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const button = wrapper.find('button')
+		await button.trigger('click')
+
+		expect(wrapper.emitted('click:list-item')).toEqual([
+			[{ dataListIndex: 1, itemIndex: 0 }],
+		])
+	})
+})

package/src/components/DataListGroup/tests/data/dataListGroupItems.ts

@@ -0,0 +1,41 @@
+import type { DataList } from '../../../DataList/types'
+import type { DataListGroupItems } from '../../types'
+
+export const dataListItems: DataList = [
+	{
+		key: 'Libellé',
+		value: 'Texte saisi',
+	},
+	{
+		key: 'Libellé',
+		value: 'Texte saisi',
+	},
+]
+
+export const dataListItemsActions: DataList = [
+	{
+		key: 'Libellé',
+		value: 'Texte à modifier',
+		action: 'Modifier',
+	},
+	{
+		key: 'Libellé',
+		value: 'Texte à modifier',
+		action: 'Modifier',
+	},
+]
+
+export const dataListGroupItems: DataListGroupItems = [
+	{
+		title: 'Catégorie 1',
+		items: dataListItems,
+		itemsNumberLoading: 2,
+		headingLoading: true,
+	},
+	{
+		title: 'Catégorie 2',
+		items: dataListItemsActions,
+		itemsNumberLoading: 2,
+		headingLoading: true,
+	},
+]

package/src/components/DataListGroup/types.d.ts

@@ -0,0 +1,15 @@
+import type { DataList } from '../DataList/types'
+
+export interface DataListActionEvent {
+	dataListIndex: number
+	itemIndex: number
+}
+
+export interface DataListGroupItem {
+	title?: string
+	items: DataList
+	headingLoading?: boolean
+	itemsNumberLoading?: number
+}
+
+export type DataListGroupItems = DataListGroupItem[]

package/src/components/DataListItem/DataListItem.vue

@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+	import { computed } from 'vue'
+	import { useTheme } from 'vuetify'
+
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+
+	import { config } from './config'
+	import { locales } from './locales'
+
+	const props = withDefaults(defineProps<CustomizableOptions & {
+		label: string
+		value?: string | number
+		action?: string
+		placeholder?: string
+		chip?: boolean
+		icon?: string
+		row?: boolean
+		renderHtmlValue?: boolean
+	}>(), {
+		label: '',
+		value: undefined,
+		action: undefined,
+		placeholder: locales.placeholder,
+		chip: false,
+		icon: undefined,
+		row: false,
+		renderHtmlValue: false,
+	})
+
+	const emits = defineEmits(['click:action'])
+
+	const options = useCustomizableOptions(config, props)
+	const theme = useTheme()
+
+	const labelColor = computed(() => {
+		return theme.current.value.dark
+			? 'rgba(255, 255, 255, .7)'
+			: 'rgba(0, 0, 0, .6)'
+	})
+
+	const itemValue = computed(() => {
+		if (typeof props.value === 'number') {
+			return isNaN(props.value)
+				? props.placeholder
+				: props.value.toString()
+		}
+		return props.value || props.placeholder
+	})
+</script>
+
+<template>
+	<li class="vd-data-list-item d-flex flex-wrap">
+		<slot name="icon">
+			<VIcon
+				v-if="icon"
+				v-bind="options.icon"
+			>
+				{{ icon }}
+			</VIcon>
+		</slot>
+
+		<div class="vd-data-list-item-content">
+			<div :class="{ 'vd-row': row }">
+				<div
+					class="vd-data-list-item-label text-caption"
+					:style="{ color: labelColor }"
+				>
+					{{ label }}
+				</div>
+
+				<div class="vd-data-list-item-value">
+					<slot
+						name="value"
+						v-bind="{ itemValue }"
+					>
+						<VChip
+							v-if="chip"
+							v-bind="options.chip"
+						>
+							{{ itemValue }}
+						</VChip>
+
+						<span
+							v-else-if="renderHtmlValue"
+							class="text-body-1"
+							v-html="itemValue"
+						/>
+
+						<span
+							v-else
+							class="text-body-1"
+							v-text="itemValue"
+						/>
+					</slot>
+				</div>
+			</div>
+
+			<slot name="action">
+				<VBtn
+					v-if="action"
+					v-bind="options.actionBtn"
+					class="vd-data-list-item-action-btn"
+					@click="emits('click:action')"
+				>
+					{{ action }}
+				</VBtn>
+			</slot>
+		</div>
+	</li>
+</template>
+
+<style lang="scss" scoped>
+.vd-row {
+  display: flex;
+  flex-wrap: wrap;
+
+  .vd-data-list-item-label {
+    align-self: center;
+
+    &::after {
+      content: ':';
+      margin: 0 4px;
+    }
+  }
+}
+
+.vd-data-list-item-action-btn.v-btn {
+  min-width: 0;
+  margin: 0 -1px;
+}
+
+.v-icon.v-theme--light {
+  color: rgba(0, 0, 0, 0.54);
+}
+</style>

package/src/components/DataListItem/config.ts

@@ -0,0 +1,17 @@
+import type { VariantType } from '@/types/vuetifyTypes'
+
+export const config = {
+	icon: {
+		size: 24,
+		class: 'mr-4 mt-2',
+	},
+	chip: {
+		class: 'mt-1',
+	},
+	actionBtn: {
+		variant: 'text' as VariantType,
+		size: 'small',
+		color: 'secondary',
+		class: 'text-body-1 pa-0',
+	},
+}

package/src/components/DataListItem/locales.ts

@@ -0,0 +1,3 @@
+export const locales = {
+	placeholder: '…',
+}

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

@@ -0,0 +1,156 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import { vuetify } from '@tests/unit/setup'
+
+import DataListItem from '../DataListItem.vue'
+
+describe('DataListItem', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(DataListItem, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Test',
+				value: 'Sample Value',
+				action: 'Click Me',
+				chip: false,
+				row: true,
+			},
+			slots: {
+				icon: '<VIcon>mdi-home</VIcon>',
+				value: '<span>Custom Value</span>',
+				action: '<VBtn>Custom Action</VBtn>',
+			},
+		})
+
+		expect(wrapper.vm.value).toBe('Sample Value')
+	})
+
+	it('renders correctly with a number value', () => {
+		const wrapper = mount(DataListItem, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Test',
+				value: 123,
+			},
+		})
+
+		expect(wrapper.vm.value).toBe(123)
+	})
+
+	it('renders correctly with a NaN value', () => {
+		const wrapper = mount(DataListItem, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Test',
+				value: parseInt('test', 10),
+			},
+		})
+
+		expect(wrapper.vm.value).toBe(NaN)
+	})
+
+	it('renders correctly a value with HTML as text', () => {
+		const wrapper = mount(DataListItem, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Test',
+				value: '<span>Custom Value</span>',
+			},
+		})
+
+		const elValue = wrapper.find('.vd-data-list-item-value span')
+
+		expect(elValue.text()).toBe('<span>Custom Value</span>')
+	})
+
+	it('renders correctly a value as plain HTML', () => {
+		const wrapper = mount(DataListItem, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Test',
+				value: 'Paul<br> Dupont',
+				renderHtmlValue: true,
+			},
+		})
+
+		const elValue = wrapper.find('.vd-data-list-item-value span')
+
+		expect(elValue.text()).toBe('Paul Dupont')
+	})
+
+	it('renders correctly value in a chip', () => {
+		const wrapper = mount(DataListItem, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Test',
+				value: 'Chip Value',
+				chip: true,
+			},
+		})
+
+		const elChip = wrapper.find('.v-chip__content')
+		expect(elChip.text()).toBe('Chip Value')
+	})
+
+	it('renders correctly with an action', () => {
+		const wrapper = mount(DataListItem, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Test',
+				action: 'Click Me',
+			},
+		})
+
+		const elAction = wrapper.find('.vd-data-list-item-action-btn')
+		expect(elAction.text()).toBe('Click Me')
+	})
+
+	it('emits click:action event on button click', async () => {
+		const wrapper = mount(DataListItem, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Test',
+				action: 'Click Me',
+			},
+		})
+
+		const button = wrapper.find('.vd-data-list-item-action-btn')
+		await button.trigger('click')
+
+		expect(wrapper.emitted('click:action')).toBeTruthy()
+	})
+
+	it('renders correctly in row mode', () => {
+		const wrapper = mount(DataListItem, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Test',
+				value: 'Sample Value',
+				action: 'Click Me',
+				chip: false,
+				row: true,
+			},
+		})
+
+		const elRow = wrapper.find('.vd-row')
+		expect(elRow.exists()).toBe(true)
+	})
+})

package/src/components/DataListItem/types.d.ts

@@ -0,0 +1,23 @@
+import { useCustomizableOptions } from '@/composables/useCustomizableOptions'
+
+export interface IndexedObject<Type = string> {
+	[key: string]: Type
+}
+
+export interface DataListItem {
+	key: string
+	value?: string | number
+	action?: string
+	chip?: boolean
+	icon?: string
+	options?: useCustomizableOptions
+	class?: string
+}
+
+export type DataList = DataListItem[]
+
+export interface DataListIcons {
+	[iconName: string]: string
+}
+
+export type ItemClass = (string | undefined | IndexedObject<boolean>)[]

package/src/components/DialogBox/DialogBox.mdx

@@ -0,0 +1,14 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as DialogBoxStories from './DialogBox.stories';
+
+<Meta of={DialogBoxStories} />
+
+# DialogBox
+
+L’élément `DialogBox` est utilisé pour afficher une boîte de dialogue avec des bouttons d'action.
+
+<Canvas of={DialogBoxStories.Default}  />
+
+# API
+
+<Controls of={DialogBoxStories.Default} />