@bexis2/bexis2-core-ui 0.0.22 → 0.0.25

package/src/lib/components/ListView.svelte

@@ -1,13 +1,11 @@
-<script lang="ts">
-
-type x={
- name:string
-}
-
-let result:x = {name:"david"}
-
-</script>
- 
-<h1>MyList</h1>
-{result.name}
-<b>from bexis-lib</b>
+<script lang="ts">
+	type x = {
+		name: string;
+	};
+
+	let result: x = { name: 'david' };
+</script>
+
+<h1>MyList</h1>
+{result.name}
+<b>from bexis-lib</b>

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

@@ -0,0 +1,184 @@
+<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>

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

@@ -0,0 +1,176 @@
+<script lang="ts">
+	import Fa from 'svelte-fa/src/fa.svelte';
+	import { faFilter } from '@fortawesome/free-solid-svg-icons';
+	import { popup } from '@skeletonlabs/skeleton';
+	import type { PopupSettings } from '@skeletonlabs/skeleton';
+
+	export let filterValue;
+	export let values;
+	export let id;
+	export let tableId;
+
+	let firstOption;
+	let firstValue;
+	let secondOption;
+	let secondValue;
+	let active = false;
+
+	const options = {
+		number: [
+			{
+				value: 'isequal',
+				label: 'Is equal to'
+			},
+			{
+				value: 'isgreaterorequal',
+				label: 'Is greater than or equal to'
+			},
+			{
+				value: 'isgreater',
+				label: 'Is greater than'
+			},
+			{
+				value: 'islessorequal',
+				label: 'Is less than or equal to'
+			},
+			{
+				value: 'isless',
+				label: 'Is less than'
+			},
+			{
+				value: 'isnotequal',
+				label: 'Is not equal to'
+			}
+		],
+		string: [
+			{
+				value: 'isequal',
+				label: 'Is equal to'
+			},
+			{
+				value: 'isnotequal',
+				label: 'Is not equal to'
+			},
+			{
+				value: 'starts',
+				label: 'Starts with'
+			},
+			{
+				value: 'contains',
+				label: 'Contains'
+			},
+			{
+				value: 'notcontains',
+				label: 'Does not contain'
+			},
+			{
+				value: 'ends',
+				label: 'Ends with'
+			}
+		]
+	};
+
+	const popupId = `${tableId}-${id}`;
+
+	const popupFeatured: PopupSettings = {
+		event: 'click',
+		target: popupId,
+		placement: 'bottom-start'
+	};
+
+	const type = typeof $values[0];
+</script>
+
+<form class="">
+	<button
+		class:variant-filled-primary={active}
+		class="btn w-max p-2"
+		type="button"
+		use:popup={popupFeatured}
+	>
+		<Fa icon={faFilter} size="12" />
+	</button>
+
+	<div data-popup={`${popupId}`}>
+		<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"
+				on:click={() => {
+					firstOption = 'isequal';
+					firstValue = undefined;
+					secondOption = 'isequal';
+					secondValue = undefined;
+
+					$filterValue = [firstOption, firstValue, secondOption, secondValue];
+					active = false;
+				}}>Clear Filter</button
+			>
+
+			<label for="" class="label normal-case text-sm">Show rows with value that</label>
+			<div class="grid gap-2 w-full">
+				<select
+					class="select border border-primary-500 text-sm p-1"
+					aria-label="Show rows with value that"
+					bind:value={firstOption}
+					on:click|stopPropagation
+				>
+					{#each options[type] as option (option)}
+						<option value={option.value}>{option.label}</option>
+					{/each}
+				</select>
+				{#if type === 'number'}
+					<input
+						type="number"
+						class="input p-1 border border-primary-500"
+						bind:value={firstValue}
+						on:click|stopPropagation
+					/>
+				{:else}
+					<input
+						type="text"
+						class="input p-1 border border-primary-500"
+						bind:value={firstValue}
+						on:click|stopPropagation
+					/>
+				{/if}
+			</div>
+			<label for="" class="label normal-case">And</label>
+			<div class="grid gap-2 w-max">
+				<select
+					class="select border border-primary-500 text-sm p-1"
+					aria-label="Show rows with value that"
+					bind:value={secondOption}
+					on:click|stopPropagation
+				>
+					{#each options[type] as option (option)}
+						<option value={option.value}>{option.label}</option>
+					{/each}
+				</select>
+				{#if type === 'number'}
+					<input
+						type="number"
+						class="input p-1 border border-primary-500"
+						bind:value={secondValue}
+						on:click|stopPropagation
+					/>
+				{:else}
+					<input
+						type="text"
+						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"
+				on:click={() => {
+					active = firstValue?.toString().length > 0 || secondValue?.toString().length > 0;
+					$filterValue = [firstOption, firstValue, secondOption, secondValue];
+				}}>Submit</button
+			>
+		</div>
+	</div>
+</form>

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import Fa from 'svelte-fa/src/fa.svelte';
+	import {
+		faAnglesRight,
+		faAngleRight,
+		faAnglesLeft,
+		faAngleLeft
+	} from '@fortawesome/free-solid-svg-icons';
+
+	export let pageConfig;
+	export let pageSizes;
+
+	const { pageIndex, pageCount, pageSize, hasNextPage, hasPreviousPage } = pageConfig;
+
+	const goToFirstPage = () => ($pageIndex = 0);
+	const goToLastPage = () => ($pageIndex = $pageCount - 1);
+	const goToNextPage = () => ($pageIndex += 1);
+	const goToPreviousPage = () => ($pageIndex -= 1);
+
+	$: goToFirstPageDisabled = !$pageIndex;
+	$: goToLastPageDisabled = $pageIndex == $pageCount - 1;
+	$: goToNextPageDisabled = !$hasNextPage;
+	$: goToPreviousPageDisabled = !$hasPreviousPage;
+</script>
+
+<div class="flex justify-center gap-1">
+	<button
+		class="btn btn-sm variant-filled-primary"
+		on:click={goToFirstPage}
+		disabled={goToFirstPageDisabled}
+	>
+		<Fa icon={faAnglesLeft} /></button
+	>
+	<button
+		class="btn btn-sm variant-filled-primary"
+		on:click={goToPreviousPage}
+		disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
+	>
+
+	<select
+		name="pageSize"
+		id="pageSize"
+		class="select btn btn-sm variant-filled-primary w-min font-bold"
+		bind:value={$pageSize}
+	>
+		{#each pageSizes as size}
+			<option value={size}>{size}</option>
+		{/each}
+	</select>
+
+	<button
+		class="btn btn-sm variant-filled-primary"
+		on:click={goToNextPage}
+		disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
+	>
+	<button
+		class="btn btn-sm variant-filled-primary"
+		on:click={goToLastPage}
+		disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
+	>
+</div>

package/src/lib/components/Table/filter.ts

@@ -0,0 +1,94 @@
+import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
+import type { TableFilterFn } from 'svelte-headless-table/lib/plugins/addTableFilter';
+
+const textFilter = (filterOption, filterValue, value) => {
+	switch (filterOption) {
+		case 'isequal':
+			return value.toLowerCase() === filterValue.toLowerCase();
+		case 'isnotequal':
+			return value.toLowerCase() !== filterValue.toLowerCase();
+		case 'starts':
+			return value.toLowerCase().startsWith(filterValue.toLowerCase());
+		case 'ends':
+			return value.toLowerCase().endsWith(filterValue.toLowerCase());
+		case 'contains':
+			return value.toLowerCase().includes(filterValue.toLowerCase());
+		case 'notcontains':
+			return !value.toLowerCase().includes(filterValue.toLowerCase());
+		default:
+			return false;
+	}
+};
+
+const numberFilter = (filterOption, filterValue, value) => {
+	switch (filterOption) {
+		case 'isequal':
+			return value === filterValue;
+		case 'isnotequal':
+			return value !== filterValue;
+		case 'isgreater':
+			return value > filterValue;
+		case 'isless':
+			return value < filterValue;
+		case 'isgreaterorequal':
+			return value >= filterValue;
+		case 'islessorequal':
+			return value <= filterValue;
+		default:
+			return false;
+	}
+};
+
+const numericFilter: ColumnFilterFn = ({ filterValue, value }) => {
+	const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
+	if (!firstFilterValue && !secondFilterValue) {
+		return true;
+	} else if ((!firstFilterOption || !firstFilterValue) && secondFilterOption && secondFilterValue) {
+		return numberFilter(secondFilterOption, secondFilterValue, value);
+	} else if ((!secondFilterOption || !secondFilterValue) && firstFilterOption && firstFilterValue) {
+		return numberFilter(firstFilterOption, firstFilterValue, value);
+	}
+	return (
+		numberFilter(firstFilterOption, firstFilterValue, value) &&
+		numberFilter(secondFilterOption, secondFilterValue, value)
+	);
+};
+
+const stringFilter: ColumnFilterFn = ({ filterValue, value }) => {
+	const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
+	if (!firstFilterValue?.length && !secondFilterValue?.length) {
+		return true;
+	} else if (
+		(!firstFilterOption || !firstFilterValue) &&
+		secondFilterOption &&
+		secondFilterValue?.length
+	) {
+		return textFilter(secondFilterOption, secondFilterValue, value);
+	} else if (
+		(!secondFilterOption || !secondFilterValue?.length) &&
+		firstFilterOption &&
+		firstFilterValue?.length
+	) {
+		return textFilter(firstFilterOption, firstFilterValue, value);
+	}
+	return (
+		textFilter(firstFilterOption, firstFilterValue, value) &&
+		textFilter(secondFilterOption, secondFilterValue, value)
+	);
+};
+
+export const columnFilter: ColumnFilterFn = ({ filterValue, value }) => {
+	if (typeof value === 'string') {
+		return stringFilter({ filterValue, value });
+	} else if (typeof value === 'number') {
+		return numericFilter({ filterValue, value });
+	}
+	return false;
+};
+
+export const searchFilter: TableFilterFn = ({ filterValue, value }) => {
+	if (value.toLowerCase().includes(filterValue.toLowerCase())) {
+		return true;
+	}
+	return false;
+};

package/src/lib/components/file/FileIcon.svelte

@@ -0,0 +1,45 @@
+<script>
+	import Fa from 'svelte-fa';
+	import { faFileAudio } from '@fortawesome/free-regular-svg-icons';
+	import { faFileVideo } from '@fortawesome/free-regular-svg-icons';
+	import { faFileWord } from '@fortawesome/free-regular-svg-icons';
+	import { faFilePdf } from '@fortawesome/free-regular-svg-icons';
+	import { faFileExcel } from '@fortawesome/free-regular-svg-icons';
+	import { faFileAlt } from '@fortawesome/free-regular-svg-icons';
+	import { faFileImage } from '@fortawesome/free-regular-svg-icons';
+	import { faFileArchive } from '@fortawesome/free-regular-svg-icons';
+
+	export let type = '';
+</script>
+
+{#if type.includes('excel') || type.includes('spreadsheetml')}
+	<Fa icon={faFileExcel} />
+{/if}
+
+{#if type.includes('text')}
+	<Fa icon={faFileAlt} />
+{/if}
+
+{#if type.includes('image')}
+	<Fa icon={faFileImage} />
+{/if}
+
+{#if type.includes('audio')}
+	<Fa icon={faFileAudio} />
+{/if}
+
+{#if type.includes('video')}
+	<Fa icon={faFileVideo} />
+{/if}
+
+{#if type.includes('word')}
+	<Fa icon={faFileWord} />
+{/if}
+
+{#if type.includes('pdf')}
+	<Fa icon={faFilePdf} />
+{/if}
+
+{#if type.includes('zip')}
+	<Fa icon={faFileArchive} />
+{/if}

package/src/lib/components/file/FileInfo.svelte

@@ -0,0 +1,13 @@
+<script>
+	import FileIcon from './FileIcon.svelte';
+
+	export let name = '';
+	export let type = '';
+	// export let description;
+	export let size = '';
+</script>
+
+<div style="font-size:{size}">
+	<FileIcon {type} />
+	{name}
+</div>