@cnamts/synapse 1.0.0 → 1.0.2

package/src/components/Tables/common/useTableCheckbox.ts

@@ -0,0 +1,58 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { toRef } from 'vue'
+
+interface UseTableCheckboxOptions {
+	/**
+   * The items to be displayed in the table
+   */
+	items: MaybeRefOrGetter<Record<string, unknown>[]>
+	/**
+   * The model value for selected items
+   */
+	modelValue: MaybeRefOrGetter<unknown[]>
+	/**
+   * Function to update the model value
+   */
+	updateModelValue: (value: unknown[]) => void
+}
+
+export function useTableCheckbox(options: UseTableCheckboxOptions) {
+	const itemsRef = toRef(options.items)
+	const modelValueRef = toRef(options.modelValue)
+
+	/**
+   * Function to get a unique identifier for each item
+   */
+	const getItemValue = (item: Record<string, unknown>) => {
+		// If the item has an id field, use that
+		if (item.id !== undefined) {
+			return item.id
+		}
+		// Otherwise, create a unique string representation of the item
+		return JSON.stringify(item)
+	}
+
+	/**
+   * Function to toggle selection of all rows
+   */
+	const toggleAllRows = () => {
+		// Ensure items is an array
+		const itemsArray = Array.isArray(itemsRef.value) ? itemsRef.value : []
+		const items = itemsArray.length > 0 ? itemsArray : []
+
+		if (modelValueRef.value.length === items.length) {
+			// If all items are selected, deselect all
+			options.updateModelValue([])
+		}
+		else {
+			// Otherwise, select all items
+			// We need to map the items to their values to ensure proper selection
+			options.updateModelValue(items.map(item => getItemValue(item)))
+		}
+	}
+
+	return {
+		getItemValue,
+		toggleAllRows,
+	}
+}

package/src/components/Tables/common/useTableFilter.ts

@@ -0,0 +1,19 @@
+import { inject } from 'vue'
+import type { FilterOption } from './types'
+import { filterItems as filterItemsUtil } from './tableFilterUtils'
+
+/**
+ * Composable pour utiliser les fonctionnalités de filtrage de tableau
+ *
+ * @returns Objet contenant les fonctions utilitaires de filtrage
+ */
+export function useTableFilter() {
+	// Récupère la fonction filterItems du modèle provide/inject
+	const filterItems = inject<
+		<T extends Record<string, unknown>>(items: T[], filters: FilterOption[]) => T[]
+	>('filterItems', filterItemsUtil)
+
+	return {
+		filterItems,
+	}
+}

package/src/components/Tables/common/useTableHeaders.ts

@@ -0,0 +1,88 @@
+import { computed, ref, watch, type Ref } from 'vue'
+import type { DataTableHeaders, TableColumnHeader } from './types'
+import { sortHeaders } from './organizeColumns/sortHeaders'
+
+/**
+ * Composable for processing and enhancing table headers
+ *
+ * @param headersProp - Reference to headers from props
+ * @param filterInputConfig - Configuration for filter inputs
+ * @returns Header utilities and computed properties
+ */
+export function useTableHeaders({
+	headersProp,
+	filterInputConfig = {},
+}: {
+	headersProp: Ref<DataTableHeaders[] | undefined>
+	filterInputConfig?: Record<string, unknown>
+}) {
+	// Process headers to ensure they have title property
+	const normalizedHeaders = computed(() => {
+		if (!Array.isArray(headersProp?.value)) {
+			return undefined
+		}
+		return headersProp.value.map(header => ({
+			...header,
+			title: header.title ?? header.text,
+		}))
+	})
+
+	// Get filterable headers
+	const filterableHeaders = computed(() => {
+		if (!normalizedHeaders.value) return []
+		return normalizedHeaders.value.filter(header => header.filterable)
+	})
+
+	/**
+   * Enhance header with filter type and configuration
+   */
+	function getEnhancedHeader(column: TableColumnHeader): TableColumnHeader {
+		// If column is not filterable, return as is
+		if (!column.filterable) return column
+
+		// Default filter type is 'text' if not specified
+		const filterType = column.filterType || 'text'
+
+		// Get column-specific filter config or empty object
+		const columnFilterConfig = column.key && filterInputConfig[column.key as string] ? filterInputConfig[column.key as string] : {}
+
+		// Return enhanced header with filter properties
+		return {
+			...(column as object),
+			filterType,
+			filterConfig: columnFilterConfig as Record<string, unknown>,
+		} as TableColumnHeader
+	}
+
+	// Mutable internal headers to manage state inside the component
+	const internalHeaders = ref<DataTableHeaders[] | undefined>([])
+
+	watch(normalizedHeaders, (newHeaders) => {
+		// Update internal headers when props.headers changes
+		internalHeaders.value = newHeaders
+	}, { immediate: true, deep: true })
+
+	/**
+   * Get header by key
+   */
+	function getHeaderByKey(key: string): TableColumnHeader | undefined {
+		return normalizedHeaders.value?.find(header => header.key === key)
+	}
+
+	/**
+	 * The headers filtered by visibility and sorted by order
+	 */
+	const displayHeaders = computed(() => {
+		if (!internalHeaders.value) return undefined
+		const filteredHeaders = internalHeaders.value.filter(header => header.hidden !== true)
+		return sortHeaders(filteredHeaders)
+	})
+
+	return {
+		headers: internalHeaders,
+		displayHeaders,
+		filterableHeaders,
+		getEnhancedHeader,
+		getHeaderByKey,
+	}
+}

package/src/components/Tables/common/useTableItems.ts

@@ -0,0 +1,87 @@
+import { computed, type Ref } from 'vue'
+import { processItems } from './formatters'
+import type { DataOptions, FilterOption, TableColumnHeader } from './types'
+
+/**
+ * Composable for handling table items processing
+ *
+ * @param items - Reference to table items
+ * @param headers - Reference to table headers
+ * @param filters - Reference to active filters
+ * @param options - Reference to table options
+ * @param filterItems - Function to filter items (from useTableFilter)
+ * @returns Item utilities and computed properties
+ */
+export function useTableItems({
+	items,
+	headers,
+	filters,
+	options,
+	filterItems,
+}: {
+	items: Ref<Record<string, unknown>[]>
+	headers: Ref<TableColumnHeader[] | undefined>
+	filters: Ref<FilterOption[]>
+	options: Ref<Partial<DataOptions>>
+	filterItems: <T extends Record<string, unknown>>(items: T[], filters: FilterOption[]) => T[]
+}) {
+	// Process items with formatters based on headers
+	const processedItems = computed(() => {
+		if (!headers.value) return items.value
+		// Just return the items as is since we can't process them with headers
+		return processItems(items.value)
+	})
+
+	// Filter items based on active filters
+	const filteredItems = computed(() => {
+		// Create a deep copy of items to avoid modifying originals
+		const itemsCopy = processedItems.value.map((item) => {
+			return JSON.parse(JSON.stringify(item))
+		})
+
+		// Apply filters to copied items
+		return filterItems(itemsCopy, filters.value)
+	})
+
+	// Apply pagination to filtered items
+	const paginatedItems = computed(() => {
+		if (!filteredItems.value.length) return []
+
+		const page = options.value.page || 1
+		const itemsPerPage = options.value.itemsPerPage || 10
+
+		// If itemsPerPage is -1 ("Tous"), return all items
+		if (itemsPerPage === -1) return filteredItems.value
+
+		const start = (page - 1) * itemsPerPage
+		const end = start + itemsPerPage
+
+		return filteredItems.value.slice(start, end)
+	})
+
+	/**
+   * Create an empty item that maintains the structure of columns
+   * Useful for displaying empty state with correct column structure
+   */
+	function createEmptyItemWithStructure(): Record<string, unknown>[] {
+		if (!headers.value || !headers.value.length) return []
+
+		const emptyItem: Record<string, unknown> = {}
+
+		// Create an empty object with all header keys
+		headers.value.forEach((header) => {
+			if (header.key) {
+				emptyItem[header.key] = ''
+			}
+		})
+
+		return [emptyItem]
+	}
+
+	return {
+		processedItems,
+		filteredItems,
+		paginatedItems,
+		createEmptyItemWithStructure,
+	}
+}

package/src/components/Tables/common/useTableOptions.ts

@@ -0,0 +1,93 @@
+import { computed, type Ref } from 'vue'
+import type { DataOptions, FilterOption } from './types'
+
+/**
+ * Composable for managing table options and filters
+ *
+ * @param options - Reactive reference to table options
+ * @returns Table options utilities and computed properties
+ */
+export function useTableOptions({
+	options,
+}: {
+	options: Ref<Partial<DataOptions>>
+}) {
+	// Computed for filters with getter/setter
+	const filters = computed({
+		get: () => options.value.filters || [],
+		set: (newFilters: FilterOption[]) => {
+			options.value = {
+				...options.value,
+				filters: newFilters,
+				page: 1, // reset
+			}
+		},
+	})
+
+	// Computed for sorting options
+	const sortBy = computed({
+		get: () => options.value.sortBy || [],
+		set: (newSortBy) => {
+			options.value = {
+				...options.value,
+				sortBy: newSortBy,
+			}
+		},
+	})
+
+	/**
+   * Update options with new values
+   */
+	function updateOptions(newOptions: Partial<DataOptions>) {
+		options.value = {
+			...options.value,
+			...newOptions,
+		}
+	}
+
+	/**
+   * Reset filters to empty array
+   */
+	function resetFilters() {
+		options.value = {
+			...options.value,
+			filters: [],
+			page: 1, // Reset to first page when clearing filters
+		}
+	}
+
+	/**
+   * Update a specific filter or add it if it doesn't exist
+   */
+	function updateFilter(filter: FilterOption) {
+		const currentFilters = [...filters.value]
+		const existingFilterIndex = currentFilters.findIndex(f => f.key === filter.key)
+
+		if (existingFilterIndex >= 0) {
+			// Update existing filter
+			currentFilters[existingFilterIndex] = filter
+		}
+		else {
+			// Add new filter
+			currentFilters.push(filter)
+		}
+
+		filters.value = currentFilters
+	}
+
+	/**
+   * Remove a filter by key
+   */
+	function removeFilter(key: string) {
+		filters.value = filters.value.filter(f => f.key !== key)
+	}
+
+	return {
+		filters,
+		sortBy,
+		updateOptions,
+		resetFilters,
+		updateFilter,
+		removeFilter,
+	}
+}

package/src/components/Tables/index.ts

@@ -0,0 +1,3 @@
+// Export types
+export * from './common/types'
+export * from './common/constants/StateEnum'

package/src/components/ToolbarContainer/ToolbarContainer.mdx

@@ -0,0 +1,16 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+
+import * as ToolbarContainerStories from './ToolbarContainer.stories';
+
+<Meta of={ToolbarContainerStories} />
+
+# ToolbarContainer
+
+Le composant `ToolbarContainer` est un conteneur pour les barres d'outils, il permet de regrouper plusieurs bouttons d'actions sous un simple action 'tab'. Les bouttons sont alors accessibles au clavier via l'usage des flèches directionnelles.
+
+Ce composant intègre [le pattern `toolbar` tel que défini par le W3C](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/).
+
+<Canvas of={ToolbarContainerStories.Default} />
+# API
+
+<Controls of={ToolbarContainerStories.Default} />