@bexis2/bexis2-core-ui 0.0.30 → 0.0.31

package/dist/models/Enums.js

@@ -0,0 +1,6 @@
+export var Position;
+(function (Position) {
+    Position["start"] = "start";
+    Position["end"] = "end";
+    Position["center"] = "center";
+})(Position || (Position = {}));

package/dist/models/Models.d.ts

@@ -44,9 +44,17 @@ export interface FileObj {
     type: string;
     webkitRelativePath: string;
 }
+export interface ColumnInstructions {
+    toStringFn?: (value: any) => string;
+    toSortableValueFn?: (value: any) => string | number;
+    toFilterableValueFn?: (value: any) => string | number | Date;
+}
 export interface Column {
     header?: string;
     exclude?: boolean;
+    instructions?: ColumnInstructions;
+    disableFiltering?: boolean;
+    disableSorting?: boolean;
     colFilterFn?: ColumnFilterFn;
     colFilterComponent?: typeof SvelteComponent;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "private": false,
   "scripts": {
     "dev": "vite dev",

package/src/lib/components/Table/Table.svelte

@@ -1,184 +1,230 @@
-<script lang="ts">
-	import { createTable, Subscribe, Render, createRender } from 'svelte-headless-table';
-	import {
-		addSortBy,
-		addPagination,
-		addExpandedRows,
-		addColumnFilters,
-		addTableFilter
-	} from 'svelte-headless-table/plugins';
-
-	import TableFilter from './TableFilter.svelte';
-	import TablePagination from './TablePagination.svelte';
-	import { columnFilter, searchFilter } from './filter';
-	import type { TableConfig } from '$lib/models/Models';
-
-	export let config: TableConfig<any>;
-	let {
-		id: tableId,
-		data,
-		columns,
-		optionsComponent,
-		defaultPageSize = 10,
-		pageSizes = [5, 10, 15, 20]
-	} = config;
-
-	type AccessorType = keyof (typeof $data)[0];
-
-	const table = createTable(data, {
-		colFilter: addColumnFilters(),
-		tableFilter: addTableFilter({
-			fn: searchFilter
-		}),
-		sort: addSortBy({ disableMultiSort: true }),
-		page: addPagination({ initialPageSize: defaultPageSize }),
-		expand: addExpandedRows()
-	});
-
-	const accessors: AccessorType[] = Object.keys($data[0]) as AccessorType[];
-
-	const tableColumns = [
-		...accessors
-			.filter((accessor) => {
-				const key = accessor as string;
-				if (columns !== undefined && key in columns && columns[key].exclude === true) {
-					return false;
-				}
-				return true;
-			})
-			.map((accessor) => {
-				const key = accessor as string;
-				if (columns !== undefined && key in columns) {
-					const { header, colFilterFn, colFilterComponent } = columns[key];
-					return table.column({
-						header: header ?? key,
-						accessor: accessor,
-						plugins: {
-							sort: { invert: true },
-							colFilter: {
-								fn: colFilterFn ?? columnFilter,
-								render: ({ filterValue, values, id }) =>
-									createRender(colFilterComponent ?? TableFilter, {
-										filterValue,
-										values,
-										id,
-										tableId
-									})
-							}
-						}
-					});
-				} else {
-					return table.column({
-						header: key,
-						accessor: accessor,
-						plugins: {
-							sort: { invert: true },
-							colFilter: {
-								fn: columnFilter,
-								render: ({ filterValue, values, id }) =>
-									createRender(TableFilter, { filterValue, values, id, tableId })
-							}
-						}
-					});
-				}
-			})
-	];
-
-	if (optionsComponent !== undefined) {
-		tableColumns.push(
-			table.display({
-				id: 'options',
-				header: '',
-				cell: ({ row }, _) => {
-					return createRender(optionsComponent!, {
-						row: row.isData() ? row.original : null
-					});
-				}
-			}) as any
-		);
-	}
-
-	const createdTableColumns = table.createColumns(tableColumns);
-
-	const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } =
-		table.createViewModel(createdTableColumns);
-	const { filterValue } = pluginStates.tableFilter;
-</script>
-
-<div class="grid gap-2">
-	<div class="table-container">
-		<input
-			class="input p-2 mb-2 border border-primary-500"
-			type="text"
-			bind:value={$filterValue}
-			placeholder="Search rows..."
-		/>
-		<table {...$tableAttrs} class="table table-compact bg-tertiary-200">
-			<thead>
-				{#each $headerRows as headerRow (headerRow.id)}
-					<Subscribe
-						rowAttrs={headerRow.attrs()}
-						let:rowAttrs
-						rowProps={headerRow.props()}
-						let:rowProps
-					>
-						<tr {...rowAttrs} class="bg-primary-300">
-							{#each headerRow.cells as cell (cell.id)}
-								<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
-									<th scope="col" class="!p-2" {...attrs}>
-										<div class="flex w-full justify-between items-center">
-											<div class="flex gap-1">
-												<span
-													class:underline={props.sort.order}
-													class:normal-case={cell.id !== cell.label}
-													on:click={props.sort.toggle}
-													on:keydown={props.sort.toggle}
-												>
-													{cell.render()}
-												</span>
-												<div class="w-2">
-													{#if props.sort.order === 'asc'}
-														▾
-													{:else if props.sort.order === 'desc'}
-														▴
-													{/if}
-												</div>
-											</div>
-											{#if cell.isData()}
-												{#if props.colFilter?.render}
-													<div>
-														<Render of={props.colFilter.render} />
-													</div>
-												{/if}
-											{/if}
-										</div>
-									</th>
-								</Subscribe>
-							{/each}
-						</tr>
-					</Subscribe>
-				{/each}
-			</thead>
-
-			<tbody class="" {...$tableBodyAttrs}>
-				{#each $pageRows as row (row.id)}
-					<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-						<tr {...rowAttrs}>
-							{#each row.cells as cell (cell?.id)}
-								<Subscribe attrs={cell.attrs()} let:attrs>
-									<td {...attrs} class="!p-2">
-										<div class="flex items-center w-full h-full table-cell-fit">
-											<Render of={cell.render()} />
-										</div>
-									</td>
-								</Subscribe>
-							{/each}
-						</tr>
-					</Subscribe>
-				{/each}
-			</tbody>
-		</table>
-	</div>
-
-	<TablePagination pageConfig={pluginStates.page} {pageSizes} />
-</div>
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { createTable, Subscribe, Render, createRender } from 'svelte-headless-table';
+	import {
+		addSortBy,
+		addPagination,
+		addExpandedRows,
+		addColumnFilters,
+		addTableFilter
+	} from 'svelte-headless-table/plugins';
+
+	import TableFilter from './TableFilter.svelte';
+	import TablePagination from './TablePagination.svelte';
+	import { columnFilter, searchFilter } from './filter';
+	import type { TableConfig } from '$lib/models/Models';
+
+	export let config: TableConfig<any>;
+	let {
+		id: tableId,
+		data,
+		columns,
+		optionsComponent,
+		defaultPageSize = 10,
+		pageSizes = [5, 10, 15, 20]
+	} = config;
+
+	type AccessorType = keyof (typeof $data)[0];
+
+	const dispatch = createEventDispatcher();
+	const actionDispatcher = (obj) => dispatch('action', obj);
+
+	const table = createTable(data, {
+		colFilter: addColumnFilters(),
+		tableFilter: addTableFilter({
+			fn: searchFilter
+		}),
+		sort: addSortBy({ disableMultiSort: true }),
+		page: addPagination({ initialPageSize: defaultPageSize }),
+		expand: addExpandedRows()
+	});
+
+	const accessors: AccessorType[] =
+		$data.length > 0 ? (Object.keys($data[0]) as AccessorType[]) : [];
+
+	const tableColumns = [
+		...accessors
+			.filter((accessor) => {
+				const key = accessor as string;
+				if (columns !== undefined && key in columns && columns[key].exclude === true) {
+					return false;
+				}
+				return true;
+			})
+			.map((accessor) => {
+				const key = accessor as string;
+				if (columns !== undefined && key in columns) {
+					const {
+						header,
+						colFilterFn,
+						colFilterComponent,
+						instructions,
+						disableFiltering = false,
+						disableSorting = false
+					} = columns[key];
+
+					const { toSortableValueFn, toFilterableValueFn, toStringFn } = instructions ?? {};
+
+					return table.column({
+						header: header ?? key,
+						accessor: accessor,
+						cell: ({ value }) => {
+							return toStringFn ? toStringFn(value) : value;
+						},
+						plugins: {
+							sort: {
+								disable: disableSorting,
+								invert: true,
+								getSortValue: (row) => {
+									return toSortableValueFn ? toSortableValueFn(row) : row;
+								}
+							},
+							colFilter: !disableFiltering
+								? {
+										fn: ({ filterValue, value }) => {
+											const val = toFilterableValueFn ? toFilterableValueFn(value) : value;
+
+											return colFilterFn
+												? colFilterFn({ filterValue, value: val })
+												: columnFilter({ filterValue, value: val });
+										},
+										render: ({ filterValue, values, id }) => {
+											return createRender(colFilterComponent ?? TableFilter, {
+												filterValue,
+												id,
+												tableId,
+												values
+											});
+										}
+								  }
+								: undefined,
+							tableFilter: {
+								getFilterValue: (row) => {
+									return toStringFn ? toStringFn(row) : row;
+								}
+							}
+						}
+					});
+				} else {
+					return table.column({
+						header: key,
+						accessor: accessor,
+						plugins: {
+							sort: {
+								invert: true
+							},
+							colFilter: {
+								fn: columnFilter,
+								render: ({ filterValue, values, id }) =>
+									createRender(TableFilter, {
+										filterValue,
+										id,
+										tableId,
+										values
+									})
+							}
+						}
+					});
+				}
+			})
+	];
+
+	if (optionsComponent !== undefined) {
+		tableColumns.push(
+			table.display({
+				id: 'options',
+				header: '',
+				cell: ({ row }, _) => {
+					return createRender(optionsComponent!, {
+						row: row.isData() ? row.original : null,
+						dispatchFn: actionDispatcher
+					});
+				}
+			}) as any
+		);
+	}
+
+	const createdTableColumns = table.createColumns(tableColumns);
+
+	const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } =
+		table.createViewModel(createdTableColumns);
+	const { filterValue } = pluginStates.tableFilter;
+</script>
+
+<div class="grid gap-2">
+	<div class="table-container">
+		<input
+			class="input p-2 mb-2 border border-primary-500"
+			type="text"
+			bind:value={$filterValue}
+			placeholder="Search rows..."
+		/>
+		<table {...$tableAttrs} class="table table-compact bg-tertiary-200">
+			<thead>
+				{#each $headerRows as headerRow (headerRow.id)}
+					<Subscribe
+						rowAttrs={headerRow.attrs()}
+						let:rowAttrs
+						rowProps={headerRow.props()}
+						let:rowProps
+					>
+						<tr {...rowAttrs} class="bg-primary-300">
+							{#each headerRow.cells as cell (cell.id)}
+								<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
+									<th scope="col" class="!p-2" {...attrs}>
+										<div class="flex w-full justify-between items-center">
+											<div class="flex gap-1">
+												<span
+													class:underline={props.sort.order}
+													class:normal-case={cell.id !== cell.label}
+													on:click={props.sort.toggle}
+													on:keydown={props.sort.toggle}
+												>
+													{cell.render()}
+												</span>
+												<div class="w-2">
+													{#if props.sort.order === 'asc'}
+														▾
+													{:else if props.sort.order === 'desc'}
+														▴
+													{/if}
+												</div>
+											</div>
+											{#if cell.isData()}
+												{#if props.colFilter?.render}
+													<div>
+														<Render of={props.colFilter.render} />
+													</div>
+												{/if}
+											{/if}
+										</div>
+									</th>
+								</Subscribe>
+							{/each}
+						</tr>
+					</Subscribe>
+				{/each}
+			</thead>
+
+			<tbody class="" {...$tableBodyAttrs}>
+				{#each $pageRows as row (row.id)}
+					<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
+						<tr {...rowAttrs}>
+							{#each row.cells as cell (cell?.id)}
+								<Subscribe attrs={cell.attrs()} let:attrs>
+									<td {...attrs} class="!p-2">
+										<div class="flex items-center w-full h-full table-cell-fit">
+											<Render of={cell.render()} />
+										</div>
+									</td>
+								</Subscribe>
+							{/each}
+						</tr>
+					</Subscribe>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+
+	<TablePagination pageConfig={pluginStates.page} {pageSizes} />
+</div>

package/src/lib/components/Table/TableFilter.svelte

@@ -67,6 +67,32 @@
 				value: 'ends',
 				label: 'Ends with'
 			}
+		],
+		date: [
+			{
+				value: 'ison',
+				label: 'Is on'
+			},
+			{
+				value: 'isstartingfrom',
+				label: 'Is starting from'
+			},
+			{
+				value: 'isafter',
+				label: 'Is after'
+			},
+			{
+				value: 'isuntil',
+				label: 'Is until'
+			},
+			{
+				value: 'isbefore',
+				label: 'Is before'
+			},
+			{
+				value: 'isnoton',
+				label: 'Is not on'
+			}
 		]
 	};
 
@@ -78,7 +104,12 @@
 		placement: 'bottom-start'
 	};
 
-	const type = typeof $values[0];
+	let type: string = typeof $values[0];
+	if (type === 'object') {
+		if ($values[0] instanceof Date) {
+			type = 'date';
+		}
+	}
 </script>
 
 <form class="">
@@ -95,7 +126,7 @@
 		<div class="card p-3 absolute grid gap-2 shadow-lg z-10 w-min">
 			<button
 				class="btn variant-filled-primary btn-sm"
-				type="submit"
+				type="button"
 				on:click|preventDefault={() => {
 					firstOption = 'isequal';
 					firstValue = undefined;
@@ -126,13 +157,20 @@
 						bind:value={firstValue}
 						on:click|stopPropagation
 					/>
-				{:else}
+				{:else if type === 'string'}
 					<input
 						type="text"
 						class="input p-1 border border-primary-500"
 						bind:value={firstValue}
 						on:click|stopPropagation
 					/>
+				{:else}
+					<input
+						type="date"
+						class="input p-1 border border-primary-500"
+						bind:value={firstValue}
+						on:click|stopPropagation
+					/>
 				{/if}
 			</div>
 			<label for="" class="label normal-case">And</label>
@@ -154,18 +192,25 @@
 						bind:value={secondValue}
 						on:click|stopPropagation
 					/>
-				{:else}
+				{:else if type === 'string'}
 					<input
 						type="text"
 						class="input p-1 border border-primary-500"
 						bind:value={secondValue}
 						on:click|stopPropagation
 					/>
+				{:else}
+					<input
+						type="date"
+						class="input p-1 border border-primary-500"
+						bind:value={secondValue}
+						on:click|stopPropagation
+					/>
 				{/if}
 			</div>
 			<button
 				class="btn variant-filled-primary btn-sm"
-				type="submit"
+				type="button"
 				on:click|preventDefault={() => {
 					active = firstValue?.toString().length > 0 || secondValue?.toString().length > 0;
 					$filterValue = [firstOption, firstValue, secondOption, secondValue];

package/src/lib/components/Table/TablePagination.svelte

@@ -40,7 +40,7 @@
 	<select
 		name="pageSize"
 		id="pageSize"
-		class="select btn btn-sm variant-filled-primary w-min font-bold"
+		class="select variant-filled-primary w-min font-bold"
 		bind:value={$pageSize}
 	>
 		{#each pageSizes as size}