@cnamts/synapse 1.0.23 → 1.0.24

package/src/components/SyTextArea/useDefaultValidationRules.ts

@@ -0,0 +1,74 @@
+import { computed, type Ref } from 'vue'
+import { locales } from './locales'
+import type { ValidationRule as SyValidationRule } from '@/composables/validation/useValidation'
+
+export type TextareaRule = (value: string) => boolean | string
+
+export function useDefaultValidationRules(params: {
+	required: Ref<boolean>
+	maxLines: Ref<number | undefined>
+	hasInteracted: Ref<boolean>
+}) {
+	const vuetifyRules = computed<TextareaRule[]>(() => {
+		const rules: TextareaRule[] = []
+
+		rules.push((value: string) => {
+			if (params.required.value && params.hasInteracted.value && !value) {
+				return locales.required
+			}
+			return true
+		})
+
+		rules.push((value: string) => {
+			if (params.maxLines.value === undefined) {
+				return true
+			}
+
+			const lines = value.split('\n').length
+			if (lines > params.maxLines.value) {
+				return locales.maxLines(params.maxLines.value)
+			}
+
+			return true
+		})
+
+		return rules
+	})
+
+	const customRules = computed<SyValidationRule[]>(() => {
+		const rules: SyValidationRule[] = []
+
+		if (params.required.value) {
+			rules.push({
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						if (!params.hasInteracted.value) {
+							return true
+						}
+						return !!value || locales.required
+					},
+				},
+			})
+		}
+
+		if (params.maxLines.value !== undefined) {
+			rules.push({
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						const lines = value.split('\n').length
+						return lines <= params.maxLines.value! || locales.maxLines(params.maxLines.value!)
+					},
+				},
+			})
+		}
+
+		return rules
+	})
+
+	return {
+		vuetifyRules,
+		customRules,
+	}
+}

package/src/components/Tables/SyServerTable/SyServerTable.mdx

@@ -67,6 +67,31 @@ Exemple d'utilisation :
 />
 `}/>
 
+### Click des lignes
+
+La prop `clickableRow` active le clic sur toute la ligne du tableau. Quand cette prop vaut `true`, un clic sur une ligne émet l'événement `row-click` avec l'item correspondant.
+
+Les lignes deviennent également focusables au clavier afin de pouvoir être activées avec <kbd>Entrée</kbd> ou <kbd>Espace</kbd>.
+
+Les éléments interactifs déjà présents dans la ligne, comme les cases à cocher, liens ou boutons, conservent leur comportement propre et ne déclenchent pas `row-click`.
+
+L'événement `row-click` est  lorsqu'une ligne est activée alors que `clickableRow` est à `true`.
+
+- Payload : l'objet de la ligne cliquée
+- Cas pris en charge : clic souris sur la ligne, activation clavier via <kbd>Entrée</kbd> ou <kbd>Espace</kbd>
+- Cas exclus : interaction avec un élément interactif imbriqué dans la ligne
+
+Exemple :
+<Source dark code={`
+<SyServerTable
+  :items="items"
+  :headers="headers"
+  :server-items-length="totalItems"
+  clickable-row
+  @row-click="handleRowClick"
+/>
+`}/>
+
 ### Slot item
 Le composant permet de personnaliser l'affichage des contenus en utilisant le slot `item`. Vous pouvez définir la structure de chaque contenu en fonction de vos besoins.