@bexis2/bexis2-core-ui 0.0.30 → 0.1.0

package/dist/components/page/Alert.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        message?: string | undefined;
+        cssClass?: string | undefined;
+        deleteBtn?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        actions: {};
+    };
+};
+export type AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
+export default class Alert extends SvelteComponentTyped<AlertProps, AlertEvents, AlertSlots> {
+}
+export {};

package/dist/components/spinner/Spinner.svelte

@@ -1,5 +1,12 @@
+<script>import { Position } from "../../models/Enums";
+export let textCss = "text-secundary-500";
+export let label = "";
+export let position = Position.start;
+</script>
+
+<div class="flex justify-{position} items-{position} h-full w-full gap-5 pt-2">
 <div
-	class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] text-secundary-500"
+	class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] {textCss}"
 	role="status"
 >
 	<span
@@ -7,3 +14,6 @@
 		>Loading...</span
 	>
 </div>
+<span>{label}</span>
+</div>
+

package/dist/components/spinner/Spinner.svelte.d.ts

@@ -1,23 +1,19 @@
-/** @typedef {typeof __propDef.props}  SpinnerProps */
-/** @typedef {typeof __propDef.events}  SpinnerEvents */
-/** @typedef {typeof __propDef.slots}  SpinnerSlots */
-export default class Spinner extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SpinnerProps = typeof __propDef.props;
-export type SpinnerEvents = typeof __propDef.events;
-export type SpinnerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import { Position } from "../../models/Enums";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        textCss?: string | undefined;
+        label?: string | undefined;
+        position?: Position | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export type SpinnerProps = typeof __propDef.props;
+export type SpinnerEvents = typeof __propDef.events;
+export type SpinnerSlots = typeof __propDef.slots;
+export default class Spinner extends SvelteComponentTyped<SpinnerProps, SpinnerEvents, SpinnerSlots> {
+}
 export {};

package/dist/css/themes/theme-bexis2.css

@@ -8,10 +8,10 @@
 	--theme-rounded-container: 4px;
 	--theme-border-base: 1px;
 	/* =~= Theme On-X Colors =~= */
-	--on-primary: 0 0 0;
-	--on-secondary: 0 0 0;
+	--on-primary: 255 255 255;
+	--on-secondary: 255 255 255;
 	--on-tertiary: 0 0 0;
-	--on-success: 0 0 0;
+	--on-success: 255 255 255;
 	--on-warning: 255 255 255;
 	--on-error: 255 255 255;
 	--on-surface: 0 0 0;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import FileInfo from './components/file/FileInfo.svelte';
 import FileUploader from './components/file/FileUploader.svelte';
 import Spinner from './components/spinner/Spinner.svelte';
 import Page from './components/page/Page.svelte';
+import Alert from './components/page/Alert.svelte';
 import Checkbox from './components/form/Checkbox.svelte';
 import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
 import CheckboxList from './components/form/CheckboxList.svelte';
@@ -20,9 +21,10 @@ import { columnFilter, searchFilter } from './components/Table/filter';
 import type { TableConfig, Columns, Column } from './models/Models';
 export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiSelect, NumberInput, TextArea, TextInput };
 export { FileInfo, FileIcon, FileUploader };
-export { ListView, TableView, Spinner, Page };
+export { ListView, TableView, Spinner, Page, Alert };
 export { Api } from './services/Api.js';
 export { host, username, password, setApiConfig } from './stores/apistore.js';
-export type { user, Input, FileUploaderModel, Link } from './models/Models.js';
+export type { user, Input, FileUploaderModel, Link, ListItem, KvP } from './models/Models.js';
+export { Position } from './models/Enums';
 export { Table, TableFilter, columnFilter, searchFilter };
 export type { TableConfig, Columns, Column };

package/dist/index.js

@@ -7,6 +7,7 @@ import FileUploader from './components/file/FileUploader.svelte';
 //page
 import Spinner from './components/spinner/Spinner.svelte';
 import Page from './components/page/Page.svelte';
+import Alert from './components/page/Alert.svelte';
 // input 
 import Checkbox from './components/form/Checkbox.svelte';
 import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
@@ -25,9 +26,11 @@ export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiS
 //File
 export { FileInfo, FileIcon, FileUploader };
 //others
-export { ListView, TableView, Spinner, Page };
+export { ListView, TableView, Spinner, Page, Alert };
 //Api
 export { Api } from './services/Api.js';
 export { host, username, password, setApiConfig } from './stores/apistore.js';
+//enum
+export { Position } from './models/Enums';
 // Table
 export { Table, TableFilter, columnFilter, searchFilter };

package/dist/models/Enums.d.ts

@@ -0,0 +1,5 @@
+export declare enum Position {
+    start = "start",
+    end = "end",
+    center = "center"
+}

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

@@ -12,6 +12,7 @@ export interface Input {
     invalid: boolean;
     valid: boolean;
     required: boolean;
+    placeholder: string;
 }
 export interface FileInfo {
     name: string;
@@ -44,9 +45,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;
 }
@@ -61,3 +70,12 @@ export interface TableConfig<T> {
     defaultPageSize?: number;
     optionsComponent?: typeof SvelteComponent;
 }
+export interface KvP {
+    id: number;
+    text: string;
+}
+export interface ListItem {
+    id: number;
+    text: string;
+    group: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.0.30",
+  "version": "0.1.0",
   "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>