compote-ui 0.42.1 → 0.42.3

package/dist/components/combobox/combobox.svelte

@@ -19,6 +19,7 @@
 		multiple,
 		loading = false,
 		class: className,
+		onValueChange,
 		...restProps
 	}: ComboboxProps<T> = $props();
 
@@ -75,6 +76,7 @@
 			const found = items.find((item) => item.value.toString() === details.value[0]);
 			value = found?.value ?? null;
 		}
+		onValueChange?.(details);
 	}
 </script>
 

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

@@ -177,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':
@@ -194,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.1",
+	"version": "0.42.3",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",