@bexis2/bexis2-core-ui 0.2.31 → 0.3.0

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

@@ -24,6 +24,7 @@
 		id: tableId,
 		data,
 		columns,
+		resizable = 'none',
 		height = null,
 		optionsComponent,
 		defaultPageSize = 10,
@@ -48,7 +49,7 @@
 	});
 
 	const allCols: { [key: string]: any } = {};
-	
+
 	$data.forEach((item) => {
 		Object.keys(item).forEach((key) => {
 			if (!allCols[key]) {
@@ -133,7 +134,7 @@
 						header: key,
 						accessor: accessor,
 						cell: ({ value }) => {
-							return (value === undefined) ? "" : value;
+							return value ? value : '';
 						},
 						plugins: {
 							sort: {
@@ -158,7 +159,7 @@
 	if (optionsComponent !== undefined) {
 		tableColumns.push(
 			table.display({
-				id: 'actionsColumn',
+				id: 'optionsColumn',
 				header: '',
 				cell: ({ row }, _) => {
 					return createRender(optionsComponent!, {
@@ -175,13 +176,72 @@
 	const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } =
 		table.createViewModel(createdTableColumns);
 	const { filterValue } = pluginStates.tableFilter;
+
+	const minWidth = (id: string) => {
+		if (columns && id in columns) {
+			return columns[id].minWidth ?? 0;
+		}
+		return 0;
+	};
+
+	const fixedWidth = (id: string) => {
+		if (columns && id in columns) {
+			return columns[id].fixedWidth ?? 0;
+		}
+		return 0;
+	};
+
+	const cellStyle = (id: string) => {
+		const minW = minWidth(id);
+		const fixedW = fixedWidth(id);
+		const styles: string[] = [];
+
+		minW && styles.push(`min-width: ${minW}px`);
+		fixedW && styles.push(`width: ${fixedW}px`);
+
+		return styles.join(';');
+	};
+
+	const resetResize = () => {
+		if (resizable === 'columns' || resizable === 'both') {
+			$headerRows.forEach((row) => {
+				row.cells.forEach((cell) => {
+					const minW = minWidth(cell.id);
+					const fixedW = fixedWidth(cell.id);
+
+					fixedW &&
+						document
+							.getElementById(`th-${tableId}-${cell.id}`)
+							?.style.setProperty('width', `${fixedW}px`);
+					minW &&
+						document
+							.getElementById(`th-${tableId}-${cell.id}`)
+							?.style.setProperty('min-width', `${minW}px`);
+
+					!minW &&
+						!fixedW &&
+						document.getElementById(`th-${tableId}-${cell.id}`)?.style.setProperty('width', 'auto');
+				});
+			});
+		}
+
+		if (resizable === 'rows' || resizable === 'both') {
+			$pageRows.forEach((row) => {
+				row.cells.forEach((cell) => {
+					document
+						.getElementById(`${tableId}-${cell.id}-${row.id}`)
+						?.style.setProperty('height', 'auto');
+				});
+			});
+		}
+	};
 </script>
 
 <div class="grid gap-2 overflow-auto" class:w-fit={!fitToScreen} class:w-full={fitToScreen}>
 	<div class="table-container">
 		{#if $data.length > 0}
 			<input
-				class="input p-2 mb-2 border border-primary-500"
+				class="input p-2 border border-primary-500"
 				type="text"
 				bind:value={$filterValue}
 				placeholder="Search rows..."
@@ -189,24 +249,37 @@
 			/>
 		{/if}
 
-		{#if toggle}
-			<SlideToggle
-				name="slider-label"
-				active="bg-primary-500"
-				size="sm"
-				checked={fitToScreen}
-				id="{tableId}-toggle"
-				on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
-			>
-		{/if}
+		<div class="flex justify-between items-center py-2 w-full">
+			<div>
+				{#if toggle}
+					<SlideToggle
+						name="slider-label"
+						active="bg-primary-500"
+						size="sm"
+						checked={fitToScreen}
+						id="{tableId}-toggle"
+						on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
+					>
+				{/if}
+			</div>
+			<div>
+				{#if resizable !== 'none'}
+					<button
+						type="button"
+						class="btn btn-sm variant-filled-primary rounded-full order-last"
+						on:click|preventDefault={resetResize}>Reset sizing</button
+					>
+				{/if}
+			</div>
+		</div>
 
 		<div class="overflow-auto" style="height: {height}px">
 			<table
 				{...$tableAttrs}
-				class="table table-compact bg-tertiary-200 overflow-clip"
+				class="table table-auto table-compact bg-tertiary-500/30 overflow-clip"
 				id="{tableId}-table"
 			>
-				<thead class={height != null ? `sticky top-0` : ''}>
+				<thead class=" {height != null ? `sticky top-0` : ''}">
 					{#each $headerRows as headerRow (headerRow.id)}
 						<Subscribe
 							rowAttrs={headerRow.attrs()}
@@ -214,11 +287,19 @@
 							rowProps={headerRow.props()}
 							let:rowProps
 						>
-							<tr {...rowAttrs} class="bg-primary-300">
+							<tr {...rowAttrs} class="bg-primary-300 items-stretch">
 								{#each headerRow.cells as cell (cell.id)}
 									<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
-										<th scope="col" class="!p-2 w-min" {...attrs}>
-											<div class="flex w-full justify-between items-center">
+										<th
+											scope="col"
+											class="!p-2 overflow-auto"
+											class:resize-x={(resizable === 'columns' || resizable === 'both') &&
+												!fixedWidth(cell.id)}
+											{...attrs}
+											id="th-{tableId}-{cell.id}"
+											style={cellStyle(cell.id)}
+										>
+											<div class="flex justify-between items-center">
 												<div class="flex gap-1 whitespace-pre-wrap">
 													<span
 														class:underline={props.sort.order}
@@ -258,18 +339,18 @@
 				<tbody class="overflow-auto" {...$tableBodyAttrs}>
 					{#each $pageRows as row (row.id)}
 						<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-							<tr {...rowAttrs} id="{tableId}-row-{row.id}">
-								{#each row.cells as cell (cell?.id)}
+							<tr {...rowAttrs} id="{tableId}-row-{row.id}" class="">
+								{#each row.cells as cell, index (cell?.id)}
 									<Subscribe attrs={cell.attrs()} let:attrs>
 										<td
 											{...attrs}
-											class="!p-2 w-max focus:resize"
+											class="!p-2 overflow-auto {index === 0 &&
+											(resizable === 'rows' || resizable === 'both')
+												? 'resize-y'
+												: ''}"
 											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}
-											>
+											<div class="flex items-center h-max overflow-x-auto">
 												<Render of={cell.render()} />
 											</div>
 										</td>

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

@@ -105,12 +105,13 @@
 		placement: 'bottom-start'
 	};
 
-	let type: string = '';
+	let type: string = 'string';
 	let isDate = false;
 
 	$values.forEach((item) => {
 		if (item) {
 			type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
+
 			if (type === 'object') {
 				if (item instanceof Date) {
 					isDate = true;

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/{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/src/lib/components/{File → 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/{File → file}/FileUploader.svelte

@@ -148,11 +148,10 @@
 
 				let message = files.accepted.length + ' is/are uploaded';
 
-				let fileList:string[] = []; 
-				files.accepted.forEach(f => fileList.push(f.name))
+				let fileList: string[] = [];
+				files.accepted.forEach((f) => fileList.push(f.name));
 
-
-				dispatch('success', { text: message , files: fileList});
+				dispatch('success', { text: message, files: fileList });
 
 				files.accepted = [];
 			}