@cnamts/synapse 1.0.1 → 1.0.2

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

@@ -25,13 +25,20 @@ export interface DataOptions {
 
 export type DataTableHeaders = {
 	title?: string
+	text?: string
 	value?: string
 	key?: string
 	filterable?: boolean
 	filterType?: FilterType
 	filterOptions?: Array<{ text: string, value: unknown }>
+	multiple?: boolean
+	chips?: boolean
+	sortable?: boolean
 	hideMessages?: boolean
 	dateFormat?: string
+	align?: 'start' | 'end' | 'center'
+	order?: number
+	hidden?: boolean
 }
 
 // Type to handle both Vuetify internal headers and our custom headers
@@ -42,6 +49,8 @@ export type TableColumnHeader = {
 	filterable?: boolean
 	filterType?: FilterType
 	filterOptions?: Array<{ text: string, value: unknown }>
+	multiple?: boolean
+	chips?: boolean
 	hideMessages?: boolean
 	dateFormat?: string
 	sort?: unknown
@@ -53,29 +62,31 @@ export type TableColumnHeader = {
 }
 
 // Component-specific props interfaces
-export interface SyTableProps {
+export type SyTableProps = {
 	items?: Record<string, unknown>[]
 	suffix: string
-	itemsPerPage?: number
 	caption?: string
 	showFilters?: boolean
-	headers?: DataTableHeaders[]
 	filterInputConfig?: Record<string, unknown>
 	density?: TableDensityType
 	striped?: boolean
 	resizableColumns?: boolean
+	enableColumnControls?: boolean
+	headers?: DataTableHeaders[]
+	showSelect?: boolean
 }
 
-export interface SyServerTableProps {
+export type SyServerTableProps = {
 	serverItemsLength: number
 	items?: Record<string, unknown>[]
 	suffix: string
-	itemsPerPage?: number
 	caption?: string
 	showFilters?: boolean
-	headers?: DataTableHeaders[]
 	resizableColumns?: boolean
 	filterInputConfig?: Record<string, unknown>
 	density?: TableDensityType
 	striped?: boolean
+	enableColumnControls?: boolean
+	headers?: DataTableHeaders[]
+	showSelect?: boolean
 }

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

@@ -0,0 +1,83 @@
+import { computed, nextTick, type Ref } from 'vue'
+import type { DataOptions } from './types'
+
+/**
+ * Composable for managing table pagination
+ *
+ * @param options - Reactive reference to table options
+ * @param itemsLength - Total number of items (for client-side) or serverItemsLength (for server-side)
+ * @param table - Reference to the table component
+ * @param emit - Emit function for update:options event
+ * @returns Pagination utilities and computed properties
+ */
+export function usePagination({
+	options,
+	itemsLength,
+	table,
+	emit,
+}: {
+	options: Ref<Partial<DataOptions>>
+	itemsLength: Ref<number>
+	table: Ref<unknown>
+	emit: (event: 'update:options', options: Partial<DataOptions>) => void
+}) {
+	// Current page with getter/setter
+	const page = computed({
+		get: () => options.value.page || 1,
+		set: (newPage: number) => {
+			options.value = {
+				...options.value,
+				page: newPage,
+			}
+		},
+	})
+
+	// Items per page with fallback to default
+	const itemsPerPageValue = computed(() => {
+		const value = options.value.itemsPerPage || 10
+		// If value is -1, it means "Tous" (all items)
+		return value
+	})
+
+	// Calculate total number of pages
+	const pageCount = computed(() => {
+		if (!itemsLength.value) return 0
+		// If itemsPerPageValue is -1 ("Tous"), return 1 page
+		if (itemsPerPageValue.value === -1) return 1
+		return Math.ceil(itemsLength.value / itemsPerPageValue.value)
+	})
+
+	/**
+   * Update items per page from pagination component
+   */
+	function updateItemsPerPage(newItemsPerPage: number) {
+		// Create a completely new options object to force reactivity
+		const newOptions = {
+			...options.value,
+			itemsPerPage: newItemsPerPage,
+			page: 1, // Reset to first page when changing items per page
+		}
+
+		// Update options with the new object
+		options.value = newOptions
+
+		// Force a refresh of the table
+		nextTick(() => {
+			// Try to force update if the table has that method
+			const tableValue = table.value as { $forceUpdate?: () => void }
+			if (tableValue && typeof tableValue.$forceUpdate === 'function') {
+				tableValue.$forceUpdate()
+			}
+
+			// Emit an event to notify parent components
+			emit('update:options', newOptions)
+		})
+	}
+
+	return {
+		page,
+		pageCount,
+		itemsPerPageValue,
+		updateItemsPerPage,
+	}
+}

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/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/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} />