@cnamts/synapse 0.0.16-alpha → 1.0.0

package/src/components/SyTextArea/wrapText.ts

@@ -0,0 +1,42 @@
+export function wrapText(maxLength: number) {
+	return (value: string) => {
+		const lines = value.split('\n')
+		const newLines: string[] = []
+		for (const line of lines) {
+			if (line.length > maxLength) {
+				const words = line.split(' ')
+				let currentLine = ''
+				for (const word of words) {
+					if (currentLine.length + word.length + 1 > maxLength) {
+						if (word.length > maxLength) {
+							if (currentLine) {
+								newLines.push(currentLine)
+							}
+							const wordRegex = new RegExp(`.{1,${maxLength - 1}}`, 'g')
+							const wordLines = word.match(wordRegex)
+							for (let i = 0; i < wordLines!.length - 1; i++) {
+								wordLines![i] += '-'
+								newLines.push(wordLines![i])
+							}
+							currentLine = wordLines![wordLines!.length - 1]
+						}
+						else {
+							newLines.push(currentLine)
+							currentLine = word
+						}
+					}
+					else {
+						currentLine += (currentLine.length ? ' ' : '') + word
+					}
+				}
+				if (currentLine) {
+					newLines.push(currentLine)
+				}
+			}
+			else {
+				newLines.push(line)
+			}
+		}
+		return newLines.join('\n')
+	}
+}

package/src/components/TableToolbar/TableToolbar.mdx

@@ -42,10 +42,95 @@ Vous pouvez personnaliser les différents labels en utilisant les props `addButt
 
 ## Slots
 
+Vous pouvez utiliser le slot `filters` pour ajouter des filtres à gauche du champ de recherche.
+
+<Canvas
+    of={TableToolbarStories.SlotFilters}
+    source={{
+        language: 'html',
+        format: 'dedent',
+        code: `
+		<script setup lang="ts">
+			import { TableToolbar, SySelect } from '@cnamts/synapse'
+			import { VDataTable } from 'vuetify/components'
+			import { ref } from 'vue'
+
+			const headers = [
+				{
+					title: 'Nom',
+					value: 'lastname',
+				},
+				{
+					title: 'Prénom',
+					value: 'firstname',
+				},
+				{
+					title: 'Email',
+					value: 'email',
+				},
+			]
+
+                        const items = [
+                            {
+                                firstname: 'Virginie',
+                                lastname: 'Beauchesne',
+                                email: 'virginie.beauchesne@example.com',
+                            },
+                            {
+                                firstname: 'Étienne',
+                                lastname: 'Salois',
+                                email: 'etienne.salois@example.com',
+                            },
+                        ]
+
+                        const search = ref('')
+
+                        const filterItems = ref<{ text: string, value: string }[]>([])
+
+                            items.forEach((item) => {
+                                filterItems.value.push({
+                                    text: item.lastname,
+                                    value: item.lastname,
+                                })
+                            })
+                    </script>
+
+                    <template>
+                        <VDataTable
+						:headers="headers"
+						:items="items"
+						:search="search"
+						hide-default-footer
+					>
+						<template #top>
+							<TableToolbar
+								v-model:search="search"
+								:nb-total="items.length"
+							>
+								<template #filters>
+									<div class="py-4">
+										<SySelect
+											v-model="search"
+											:items="filterItems"
+											label="Nom"
+											density="compact"
+											hide-messages
+											clearable
+										/>
+									</div>
+								</template>
+							</TableToolbar>
+						</template>
+					</VDataTable>
+                </template>
+		`
+	}}
+/>
+
 Vous pouvez utiliser les slots `search-left` ou `search-right` pour ajouter du contenu à gauche ou à droite du champ de recherche.
 
 <Canvas
-	of={TableToolbarStories.Slots}
+	of={TableToolbarStories.OtherSlots}
 	source={{
 		language: 'html',
 		format: 'dedent',