@bexis2/bexis2-core-ui 0.2.28 → 0.2.30

package/src/lib/components/{file → File}/FileIcon.svelte

@@ -1,45 +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}
+<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/{dist/components/file → src/lib/components/File}/FileInfo.svelte

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

package/src/lib/components/ListView.svelte

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

@@ -47,8 +47,17 @@
 		expand: addExpandedRows()
 	});
 
-	const accessors: AccessorType[] =
-		$data.length > 0 ? (Object.keys($data[0]) as AccessorType[]) : [];
+	const allCols: { [key: string]: any } = {};
+	
+	$data.forEach((item) => {
+		Object.keys(item).forEach((key) => {
+			if (!allCols[key]) {
+				allCols[key] = {};
+			}
+		});
+	});
+
+	const accessors: AccessorType[] = Object.keys(allCols) as AccessorType[];
 
 	const tableColumns = [
 		...accessors
@@ -123,6 +132,9 @@
 					return table.column({
 						header: key,
 						accessor: accessor,
+						cell: ({ value }) => {
+							return (value === undefined) ? "" : value;
+						},
 						plugins: {
 							sort: {
 								invert: true
@@ -249,7 +261,11 @@
 							<tr {...rowAttrs} id="{tableId}-row-{row.id}">
 								{#each row.cells as cell (cell?.id)}
 									<Subscribe attrs={cell.attrs()} let:attrs>
-										<td {...attrs} class="!p-2 w-max focus:resize" id="{tableId}-{cell.id}-{row.id}">
+										<td
+											{...attrs}
+											class="!p-2 w-max focus:resize"
+											id="{tableId}-{cell.id}-{row.id}"
+										>
 											<div
 												class="flex items-center h-max overflow-x-auto resize-none hover:resize"
 												class:max-w-md={!fitToScreen}

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

@@ -105,12 +105,21 @@
 		placement: 'bottom-start'
 	};
 
-	let type: string = typeof (toFilterableValueFn ? toFilterableValueFn($values[0]) : $values[0]);
-	if (type === 'object') {
-		if ($values[0] instanceof Date) {
-			type = 'date';
+	let type: string = '';
+	let isDate = false;
+
+	$values.forEach((item) => {
+		if (item) {
+			type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
+			if (type === 'object') {
+				if (item instanceof Date) {
+					isDate = true;
+				}
+			}
 		}
-	}
+	});
+
+	type = isDate ? 'date' : type;
 </script>
 
 <form class="">
@@ -124,7 +133,7 @@
 		<Fa icon={faFilter} size="12" />
 	</button>
 
-	<div data-popup={`${popupId}`} id="{popupId}" class="z-50">
+	<div data-popup={`${popupId}`} id={popupId} class="z-50">
 		<div class="card p-3 grid gap-2 shadow-lg w-min bg-base-100">
 			<button
 				class="btn variant-filled-primary btn-sm"

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

@@ -1,141 +1,141 @@
-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 dateFilter = (filterOption, filterValue, value) => {
-	const filter = new Date(filterValue);
-
-	switch (filterOption) {
-		case 'ison':
-			return value === filter;
-		case 'isstartingfrom':
-			return value >= filter;
-		case 'isafter':
-			return value > filter;
-		case 'isuntil':
-			return value <= filter;
-		case 'isbefore':
-			return value < filter;
-		case 'isnoton':
-			return value !== filter;
-		default:
-			return false;
-	}
-};
-
-const numericFilter: ColumnFilterFn = ({ filterValue, value }) => {
-	const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
-	if (firstFilterValue == null && secondFilterValue == null) {
-		return true;
-	} else if (
-		(firstFilterOption == null || firstFilterValue == null) &&
-		secondFilterOption != null &&
-		secondFilterValue != null
-	) {
-		return numberFilter(secondFilterOption, secondFilterValue, value);
-	} else if (
-		(secondFilterOption == null || secondFilterValue == null) &&
-		firstFilterOption != null &&
-		firstFilterValue != null
-	) {
-		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)
-	);
-};
-
-const dateTypeFilter: ColumnFilterFn = ({ filterValue, value }) => {
-	const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
-	if (!firstFilterValue && !secondFilterValue) {
-		return true;
-	} else if ((!firstFilterOption || !firstFilterValue) && secondFilterOption && secondFilterValue) {
-		return dateFilter(secondFilterOption, secondFilterValue, value);
-	} else if ((!secondFilterOption || !secondFilterValue) && firstFilterOption && firstFilterValue) {
-		return dateFilter(firstFilterOption, firstFilterValue, value);
-	}
-
-	return (
-		dateFilter(firstFilterOption, firstFilterValue, value) &&
-		dateFilter(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 });
-	} else if (typeof value === 'object' && value instanceof Date) {
-		return dateTypeFilter({ filterValue, value });
-	}
-	return false;
-};
-
-export const searchFilter: TableFilterFn = ({ filterValue, value }) => {
-	if (value.toLowerCase().includes(filterValue.toLowerCase())) {
-		return true;
-	}
-	return false;
-};
+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 dateFilter = (filterOption, filterValue, value) => {
+	const filter = new Date(filterValue);
+
+	switch (filterOption) {
+		case 'ison':
+			return value === filter;
+		case 'isstartingfrom':
+			return value >= filter;
+		case 'isafter':
+			return value > filter;
+		case 'isuntil':
+			return value <= filter;
+		case 'isbefore':
+			return value < filter;
+		case 'isnoton':
+			return value !== filter;
+		default:
+			return false;
+	}
+};
+
+const numericFilter: ColumnFilterFn = ({ filterValue, value }) => {
+	const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
+	if (firstFilterValue == null && secondFilterValue == null) {
+		return true;
+	} else if (
+		(firstFilterOption == null || firstFilterValue == null) &&
+		secondFilterOption != null &&
+		secondFilterValue != null
+	) {
+		return numberFilter(secondFilterOption, secondFilterValue, value);
+	} else if (
+		(secondFilterOption == null || secondFilterValue == null) &&
+		firstFilterOption != null &&
+		firstFilterValue != null
+	) {
+		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)
+	);
+};
+
+const dateTypeFilter: ColumnFilterFn = ({ filterValue, value }) => {
+	const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
+	if (!firstFilterValue && !secondFilterValue) {
+		return true;
+	} else if ((!firstFilterOption || !firstFilterValue) && secondFilterOption && secondFilterValue) {
+		return dateFilter(secondFilterOption, secondFilterValue, value);
+	} else if ((!secondFilterOption || !secondFilterValue) && firstFilterOption && firstFilterValue) {
+		return dateFilter(firstFilterOption, firstFilterValue, value);
+	}
+
+	return (
+		dateFilter(firstFilterOption, firstFilterValue, value) &&
+		dateFilter(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 });
+	} else if (typeof value === 'object' && value instanceof Date) {
+		return dateTypeFilter({ filterValue, value });
+	}
+	return false;
+};
+
+export const searchFilter: TableFilterFn = ({ filterValue, value }) => {
+	if (value.toLowerCase().includes(filterValue.toLowerCase())) {
+		return true;
+	}
+	return false;
+};

package/src/lib/components/form/Checkbox.svelte

@@ -1,24 +1,24 @@
-<script lang="ts">
-	import InputContainer from './InputContainer.svelte';
-
-	export let id: string = '';
-	export let label: string = '';
-	export let checked: boolean = false;
-
-	export let valid: boolean;
-	export let invalid: boolean;
-	export let required: boolean;
-	export let feedback: [];
-</script>
-
-<InputContainer {label} {feedback} {required}>
-	<input
-		{id}
-		class="input variant-form-material"
-		type="checkbox"
-		class:input-success={valid}
-		class:input-error={invalid}
-		bind:checked
-		on:input
-	/>
-</InputContainer>
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+
+	export let id: string = '';
+	export let label: string = '';
+	export let checked: boolean = false;
+
+	export let valid: boolean;
+	export let invalid: boolean;
+	export let required: boolean;
+	export let feedback: [];
+</script>
+
+<InputContainer {label} {feedback} {required}>
+	<input
+		{id}
+		class="input variant-form-material"
+		type="checkbox"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:checked
+		on:input
+	/>
+</InputContainer>

package/src/lib/components/form/CheckboxKvPList.svelte

@@ -1,29 +1,29 @@
-<script lang="ts">
-	import InputContainer from './InputContainer.svelte';
-
-	export let id;
-	export let source;
-	export let target;
-	export let title;
-	export let description = '';
-	export let key;
-	export let help = false;
-
-	let required = false;
-	let feedback: [];
-</script>
-
-<InputContainer {id} label={title} {feedback} {required} {help}>
-	{#each source as item}
-		<label class="flex items-center space-x-2" for={key}>
-			<input
-				class="checkbox"
-				type="checkbox"
-				bind:group={target}
-				checked={item.key}
-				value={item.key}
-			/>
-			<p>{item.value}</p>
-		</label>
-	{/each}
-</InputContainer>
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+
+	export let id;
+	export let source;
+	export let target;
+	export let title;
+	export let description = '';
+	export let key;
+	export let help = false;
+
+	let required = false;
+	let feedback: [];
+</script>
+
+<InputContainer {id} label={title} {feedback} {required} {help}>
+	{#each source as item}
+		<label class="flex items-center space-x-2" for={key}>
+			<input
+				class="checkbox"
+				type="checkbox"
+				bind:group={target}
+				checked={item.key}
+				value={item.key}
+			/>
+			<p>{item.value}</p>
+		</label>
+	{/each}
+</InputContainer>

package/src/lib/components/form/CheckboxList.svelte

@@ -1,21 +1,21 @@
-<script lang="ts">
-	import InputContainer from './InputContainer.svelte';
-
-	export let source;
-	export let target;
-	export let title;
-	export let description = '';
-	export let key;
-
-	let required = false;
-	let feedback: [];
-</script>
-
-<InputContainer label={title} {feedback} {required}>
-	{#each source as item}
-		<label class="flex items-center space-x-2" for={key}>
-			<input class="checkbox" type="checkbox" bind:group={target} value={item} />
-			<p>{item}</p>
-		</label>
-	{/each}
-</InputContainer>
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+
+	export let source;
+	export let target;
+	export let title;
+	export let description = '';
+	export let key;
+
+	let required = false;
+	let feedback: [];
+</script>
+
+<InputContainer label={title} {feedback} {required}>
+	{#each source as item}
+		<label class="flex items-center space-x-2" for={key}>
+			<input class="checkbox" type="checkbox" bind:group={target} value={item} />
+			<p>{item}</p>
+		</label>
+	{/each}
+</InputContainer>