@cnamts/synapse 0.0.3-alpha → 0.0.5-alpha

package/src/components/Customs/SyTextField/SyTextField.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import type { IconType, VariantStyle, ColorType } from './types'
+	import {
+		mdiAlertOutline,
+		mdiCheck,
+		mdiInformationOutline,
+		mdiClose,
+		mdiInformation,
+	} from '@mdi/js'
+
+	// only variantStyle need a default value
+	/* eslint-disable vue/require-default-prop */
+	const props = withDefaults(
+		defineProps<{
+			prependIcon?: IconType
+			appendIcon?: IconType
+			prependInnerIcon?: IconType
+			appendInnerIcon?: IconType
+			variantStyle?: VariantStyle
+			color?: ColorType
+			isClearable?: boolean
+			showDivider?: boolean
+			label?: string
+		}>(),
+		{
+			variantStyle: 'outlined', // Remplacez par la valeur par défaut souhaitée
+		},
+	)
+
+	const ICONS: Record<IconType, string> = {
+		info: mdiInformationOutline,
+		success: mdiCheck,
+		warning: mdiAlertOutline,
+		error: mdiInformation,
+		close: mdiClose,
+	}
+
+	const model = ref('')
+
+	const appendInnerIconColor = computed(() => {
+		return props.appendInnerIcon === 'error' || props.appendInnerIcon === 'success'
+			? props.appendInnerIcon
+			: 'black'
+	})
+
+	const dividerProps = {
+		thickness: 2,
+		length: '25px',
+		color: 'primary',
+		opacity: '1',
+	}
+
+	defineExpose({
+		appendInnerIconColor,
+	})
+</script>
+
+<template>
+	<VTextField
+		v-model="model"
+		:variant="props.variantStyle"
+		:color="props.color"
+		:clearable="props.isClearable"
+		:clear-icon="ICONS.close"
+		:aria-label="props.label"
+		:label="props.label"
+	>
+		<template #prepend>
+			<slot name="prepend">
+				<VIcon
+					v-if="props.prependIcon"
+					:icon="ICONS[props.prependIcon]"
+				/>
+			</slot>
+		</template>
+		<template #append>
+			<slot name="append">
+				<VIcon
+					v-if="props.appendIcon"
+					:icon="ICONS[props.appendIcon]"
+				/>
+			</slot>
+		</template>
+		<template #prepend-inner>
+			<slot name="prepend-inner">
+				<VIcon
+					v-if="props.prependInnerIcon"
+					:icon="ICONS[props.prependInnerIcon]"
+				/>
+			</slot>
+			<VDivider
+				v-if="props.showDivider"
+				v-bind="dividerProps"
+				class="mt-4 pa-1"
+				vertical
+			/>
+		</template>
+		<template #append-inner>
+			<slot name="append-inner">
+				<VIcon
+					v-if="props.appendInnerIcon"
+					:icon="ICONS[props.appendInnerIcon]"
+					:class="{ 'error-icon': props.appendInnerIcon === 'error' }"
+					:color="appendInnerIconColor"
+				/>
+			</slot>
+		</template>
+	</VTextField>
+</template>

package/src/components/Customs/SyTextField/tests/SyTextField.spec.ts

@@ -0,0 +1,93 @@
+import { mount } from '@vue/test-utils'
+import SyTextField from '../SyTextField.vue'
+import { expect, describe, it } from 'vitest'
+import { VIcon } from 'vuetify/components'
+import { vuetify } from '@tests/unit/setup'
+
+describe('SyTextField', () => {
+	const factory = (props = {}, slots = {}) => {
+		return mount(SyTextField, {
+			props,
+			slots,
+			global: {
+				plugins: [vuetify],
+			},
+		})
+	}
+
+	it('renders correctly with default props', () => {
+		const wrapper = factory()
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.findComponent(VIcon).exists()).toBe(false) // No icons by default
+	})
+
+	it('applies the correct variant style', () => {
+		const wrapper = factory({ variantStyle: 'filled' })
+		const textField = wrapper.findComponent({ name: 'VTextField' })
+		expect(textField.props('variant')).toBe('filled')
+	})
+
+	it('renders default slots correctly', () => {
+		const wrapper = factory({}, {
+			prepend: '<div data-testid="prepend-slot">Prepend Slot Content</div>',
+			append: '<div data-testid="append-slot">Append Slot Content</div>',
+		})
+
+		const prependSlot = wrapper.find('[data-testid="prepend-slot"]')
+		const appendSlot = wrapper.find('[data-testid="append-slot"]')
+
+		expect(prependSlot.exists()).toBe(true)
+		expect(prependSlot.text()).toBe('Prepend Slot Content')
+		expect(appendSlot.exists()).toBe(true)
+		expect(appendSlot.text()).toBe('Append Slot Content')
+	})
+
+	it('renders inner slots correctly', () => {
+		const wrapper = factory({}, {
+			'prepend-inner': '<div data-testid="prepend-inner-slot">Prepend Inner Slot Content</div>',
+			'append-inner': '<div data-testid="append-inner-slot">Append Inner Slot Content</div>',
+		})
+
+		const prependInnerSlot = wrapper.find('[data-testid="prepend-inner-slot"]')
+		const appendInnerSlot = wrapper.find('[data-testid="append-inner-slot"]')
+
+		expect(prependInnerSlot.exists()).toBe(true)
+		expect(prependInnerSlot.text()).toBe('Prepend Inner Slot Content')
+		expect(appendInnerSlot.exists()).toBe(true)
+		expect(appendInnerSlot.text()).toBe('Append Inner Slot Content')
+	})
+
+	it('matches snapshot', () => {
+		const wrapper = factory({
+			prependIcon: 'info',
+			appendIcon: 'success',
+			prependInnerIcon: 'warning',
+			appendInnerIcon: 'error',
+			variantStyle: 'filled',
+			isClearable: true,
+			showDivider: true,
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('returns error color for appendInnerIcon when value is error', () => {
+		const wrapper = factory({ appendInnerIcon: 'error' })
+		expect(wrapper.vm.appendInnerIconColor).toBe('error')
+	})
+
+	it('returns success color for appendInnerIcon when value is success', () => {
+		const wrapper = factory({ appendInnerIcon: 'success' })
+		expect(wrapper.vm.appendInnerIconColor).toBe('success')
+	})
+
+	it('returns default color for appendInnerIcon when value is info', () => {
+		const wrapper = factory({ appendInnerIcon: 'info' })
+		expect(wrapper.vm.appendInnerIconColor).toBe('black')
+	})
+
+	it('returns default color for appendInnerIcon when value is undefined', () => {
+		const wrapper = factory({ appendInnerIcon: undefined })
+		expect(wrapper.vm.appendInnerIconColor).toBe('black')
+	})
+})

package/src/components/Customs/SyTextField/tests/__snapshots__/SyTextField.spec.ts.snap

@@ -0,0 +1,57 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SyTextField > matches snapshot 1`] = `
+"<div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field">
+  <div class="v-input__prepend"><i class="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i>
+    <!---->
+  </div>
+  <div class="v-input__control">
+    <div class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--no-label v-field--variant-filled v-theme--light v-locale--is-ltr">
+      <div class="v-field__overlay"></div>
+      <div class="v-field__loader">
+        <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+          <!---->
+          <div class="v-progress-linear__background" style="opacity: NaN;"></div>
+          <div class="v-progress-linear__buffer" style="opacity: NaN; width: 0%;"></div>
+          <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+            <div class="v-progress-linear__indeterminate">
+              <div class="v-progress-linear__indeterminate long"></div>
+              <div class="v-progress-linear__indeterminate short"></div>
+            </div>
+          </transition-stub>
+          <!---->
+        </div>
+      </div>
+      <div class="v-field__prepend-inner">
+        <!----><i class="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16 mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i>
+        <hr class="v-divider v-divider--vertical v-theme--light text-primary mt-4 pa-1" style="height: 25px; border-right-width: 2px; --v-border-opacity: 1;" aria-orientation="vertical" role="separator">
+      </div>
+      <div class="v-field__field" data-no-activator="">
+        <!---->
+        <!---->
+        <!----><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" class="v-field__input" value="">
+        <!---->
+      </div>
+      <transition-stub name="expand-x-transition" appear="false" persisted="false" css="true">
+        <div class="v-field__clearable" style="display: none;"><i class="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="Clear "></i></div>
+      </transition-stub>
+      <div class="v-field__append-inner"><i class="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z mdi v-icon notranslate v-theme--light v-icon--size-default text-error error-icon" aria-hidden="true"></i>
+        <!---->
+      </div>
+      <div class="v-field__outline">
+        <!---->
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="v-input__append">
+    <!----><i class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i>
+  </div>
+  <div class="v-input__details">
+    <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages" role="alert" aria-live="polite" id="input-0-messages">
+      <!---->
+    </transition-group-stub>
+    <!---->
+  </div>
+</div>"
+`;

package/src/components/Customs/SyTextField/types.d.ts

@@ -0,0 +1,3 @@
+export type IconType = 'info' | 'success' | 'warning' | 'error' | 'close'
+export type VariantStyle = 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled'
+export type ColorType = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error'

package/src/components/DataList/DataList.mdx

@@ -0,0 +1,77 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+import * as DataList from './DataList.stories';
+
+<Meta of={DataList} />
+
+# DataList
+
+L’élément `DataList` est utilisé pour afficher une liste d’informations.
+
+<Canvas of={DataList.Default} />
+
+# API
+
+<Controls of={DataList.Default} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+	import DataList from '@cnamts/synapse'
+
+	const items = [
+		{
+			title: 'Informations patient',
+			items: [
+				{
+					key: 'Nom',
+					value: 'Dupont',
+					icon: 'accountIcon',
+					chip: true,
+				},
+				{
+					key: 'Prénom',
+					value: 'Paul',
+					icon: 'accountIcon',
+				},
+				{
+					key: 'Date de naissance',
+					value: '24/09/1970',
+					icon: 'calendarIcon',
+					action: 'Modifier',
+				},
+			],
+		},
+		{
+			title: 'Médecin traitant',
+			items: [
+				{
+					key: 'Nom du praticien',
+					value: 'Gérard Leblanc',
+					icon: 'doctorIcon',
+				},
+
+				{
+					key: 'N° RPPS',
+					value: 'XXXXX',
+					icon: 'cardAccountIcon',
+				},
+			],
+		},
+		{
+			title: 'Autres informations',
+			items: [
+				{
+					key: 'Dernière modification',
+					value: '04/06/2020',
+					icon: 'editIcon',
+				},
+			],
+		},
+	]
+</script>
+
+<template>
+	<DataList :items="items" />
+</template>
+`} />