compote-ui 0.42.0 → 0.42.2

package/dist/components/data-table/column-helper.js

@@ -1,24 +1,30 @@
-function urlDefaults(options) {
-    if (options.type !== 'url')
+const TYPE_DEFAULTS = {
+    number: { align: 'right' },
+    currency: { align: 'right' },
+    percent: { align: 'right' },
+    date: { align: 'center', size: 110 },
+    time: { align: 'center', size: 80 },
+    'date-time': { align: 'center', size: 160 },
+    boolean: { align: 'center', size: 90 },
+    url: { align: 'center', size: 60, enableSorting: false }
+};
+function applyTypeDefaults(options) {
+    const defaults = options.type ? TYPE_DEFAULTS[options.type] : undefined;
+    if (!defaults)
         return options;
-    return {
-        align: 'center',
-        enableSorting: false,
-        size: 60,
-        ...options
-    };
+    return { ...defaults, ...options };
 }
 export function createDataTableColumnHelper() {
     return {
         accessor(accessorKey, options) {
             return {
-                ...urlDefaults(options),
+                ...applyTypeDefaults(options),
                 accessorKey
             };
         },
         accessorFn(accessorFn, options) {
             return {
-                ...urlDefaults(options),
+                ...applyTypeDefaults(options),
                 accessorFn
             };
         },

package/dist/components/data-table/create-table.js

@@ -1,4 +1,5 @@
 import { columnVisibilityFeature, columnResizingFeature, columnSizingFeature, columnFilteringFeature, columnFacetingFeature, columnPinningFeature, columnOrderingFeature, createSortedRowModel, createFilteredRowModel, createFacetedRowModel, createFacetedMinMaxValues, createFacetedUniqueValues, createTable as createTanStackTable, filterFns, renderComponent, renderSnippet, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures } from '@tanstack/svelte-table';
+import { createAtom } from '@tanstack/svelte-store';
 import { useLocaleContext } from '@ark-ui/svelte/locale';
 const dataTableFeatures = tableFeatures({
     columnVisibilityFeature,
@@ -17,6 +18,13 @@ function oneOfFilterFn(row, columnId, filterValue) {
 oneOfFilterFn.autoRemove = (val) => !Array.isArray(val) || val.length === 0;
 export function createTable(options) {
     const localeCtx = useLocaleContext();
+    const initialColumnVisibility = {
+        ...createColumnVisibility(options.columns),
+        ...options.initialState?.columnVisibility
+    };
+    const columnVisibilityAtom = options.onColumnVisibilityChange
+        ? createAtom(initialColumnVisibility)
+        : undefined;
     const table = createTanStackTable({
         _features: dataTableFeatures,
         _rowModels: {
@@ -38,12 +46,10 @@ export function createTable(options) {
         get columns() {
             return createColumns(options.columns, localeCtx);
         },
+        ...(columnVisibilityAtom ? { atoms: { columnVisibility: columnVisibilityAtom } } : {}),
         initialState: {
             ...options.initialState,
-            columnVisibility: {
-                ...createColumnVisibility(options.columns),
-                ...options.initialState?.columnVisibility
-            },
+            columnVisibility: initialColumnVisibility,
             columnSizing: {
                 ...createColumnSizing(options.columns),
                 ...options.initialState?.columnSizing
@@ -61,13 +67,16 @@ export function createTable(options) {
         sorting: state.sorting,
         columnFilters: state.columnFilters
     }));
-    if (options.onColumnVisibilityChange) {
+    if (columnVisibilityAtom && options.onColumnVisibilityChange) {
         const { onColumnVisibilityChange } = options;
-        const orig = table.setColumnVisibility.bind(table);
-        table.setColumnVisibility = (updater) => {
-            orig(updater);
-            onColumnVisibilityChange(table.store.state.columnVisibility);
-        };
+        let initialized = false;
+        columnVisibilityAtom.subscribe((value) => {
+            if (!initialized) {
+                initialized = true;
+                return;
+            }
+            onColumnVisibilityChange(value);
+        });
     }
     return table;
 }
@@ -168,6 +177,17 @@ const TYPE_FORMAT_DEFAULTS = {
     percent: { style: 'percent' },
     number: {}
 };
+const TYPE_DATE_FORMAT_DEFAULTS = {
+    date: { day: '2-digit', month: '2-digit', year: 'numeric' },
+    time: { hour: '2-digit', minute: '2-digit' },
+    'date-time': {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    }
+};
 function getFilterFnForType(type) {
     switch (type) {
         case 'number':
@@ -185,14 +205,24 @@ function getFilterFnForType(type) {
 function applyTypeFormat(column, value, localeCtx) {
     if (value === null || value === undefined || value === '')
         return undefined;
-    const defaults = column.type ? TYPE_FORMAT_DEFAULTS[column.type] : undefined;
-    if (defaults !== undefined) {
+    const numDefaults = column.type ? TYPE_FORMAT_DEFAULTS[column.type] : undefined;
+    if (numDefaults !== undefined) {
         const locale = column.formatLocale ?? localeCtx().locale;
         return new Intl.NumberFormat(locale, {
-            ...defaults,
+            ...numDefaults,
             ...column.formatOptions
         }).format(Number(value));
     }
+    if (column.type === 'date' || column.type === 'time' || column.type === 'date-time') {
+        const dateValue = value instanceof Date ? value : new Date(value);
+        if (isNaN(dateValue.getTime()))
+            return undefined;
+        const locale = column.formatLocale ?? localeCtx().locale;
+        return new Intl.DateTimeFormat(locale, {
+            ...TYPE_DATE_FORMAT_DEFAULTS[column.type],
+            ...column.formatOptions
+        }).format(dateValue);
+    }
     if (column.type === 'boolean')
         return value ? 'Yes' : 'No';
     return value;

package/dist/components/data-table/types.d.ts

@@ -1,7 +1,7 @@
 import type { CellData, ColumnDef, RowData, TableFeatures } from '@tanstack/svelte-table';
 import type { Snippet } from 'svelte';
 export type DataTableAlign = 'left' | 'center' | 'right';
-export type DataTableColumnType = 'text' | 'number' | 'currency' | 'percent' | 'boolean' | 'select' | 'url';
+export type DataTableColumnType = 'text' | 'number' | 'currency' | 'percent' | 'boolean' | 'select' | 'url' | 'date' | 'time' | 'date-time';
 export type DataTableCellRenderer<T extends RowData> = (value: unknown, row: T) => string | number | boolean | null | undefined;
 export type DataTableCellRenderProps<T extends RowData> = {
     value: unknown;
@@ -19,7 +19,7 @@ export type DataTableLeafColumnBase<T extends RowData> = DataTableColumnOptions<
     cellProps?: DataTableCellPropsResolver<T>;
     cellSnippet?: Snippet<[DataTableCellRenderProps<T>]>;
     type?: DataTableColumnType;
-    formatOptions?: Intl.NumberFormatOptions;
+    formatOptions?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions;
     formatLocale?: string;
     pinned?: 'left' | 'right';
     grow?: boolean;
@@ -53,7 +53,7 @@ export type DataTableColumn<T extends RowData> = DataTableLeafColumn<T> | DataTa
 export type DataTableColumnMeta = {
     align?: DataTableAlign;
     type?: DataTableColumnType;
-    formatOptions?: Intl.NumberFormatOptions;
+    formatOptions?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions;
     formatLocale?: string;
     grow?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.42.0",
+	"version": "0.42.2",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",