@bexis2/bexis2-core-ui 0.3.14 → 0.4.1

package/dist/themes/theme-bexis2.js

@@ -19,94 +19,94 @@ export const bexis2theme = {
         '--on-surface': '255 255 255',
         // =~= Theme Colors  =~=
         // primary | #45b2a1
-        '--color-primary-50': '227 243 241',
-        '--color-primary-100': '218 240 236',
-        '--color-primary-200': '209 236 232',
-        '--color-primary-300': '181 224 217',
-        '--color-primary-400': '125 201 189',
-        '--color-primary-500': '69 178 161',
-        '--color-primary-600': '62 160 145',
-        '--color-primary-700': '52 134 121',
-        '--color-primary-800': '41 107 97',
-        '--color-primary-900': '34 87 79',
+        '--color-primary-50': '227 243 241', // #e3f3f1
+        '--color-primary-100': '218 240 236', // #daf0ec
+        '--color-primary-200': '209 236 232', // #d1ece8
+        '--color-primary-300': '181 224 217', // #b5e0d9
+        '--color-primary-400': '125 201 189', // #7dc9bd
+        '--color-primary-500': '69 178 161', // #45b2a1
+        '--color-primary-600': '62 160 145', // #3ea091
+        '--color-primary-700': '52 134 121', // #348679
+        '--color-primary-800': '41 107 97', // #296b61
+        '--color-primary-900': '34 87 79', // #22574f
         // secondary | #ff9700
-        '--color-secondary-50': '255 239 217',
-        '--color-secondary-100': '255 234 204',
-        '--color-secondary-200': '255 229 191',
-        '--color-secondary-300': '255 213 153',
-        '--color-secondary-400': '255 182 77',
-        '--color-secondary-500': '255 151 0',
-        '--color-secondary-600': '230 136 0',
-        '--color-secondary-700': '191 113 0',
-        '--color-secondary-800': '153 91 0',
-        '--color-secondary-900': '125 74 0',
+        '--color-secondary-50': '255 239 217', // #ffefd9
+        '--color-secondary-100': '255 234 204', // #ffeacc
+        '--color-secondary-200': '255 229 191', // #ffe5bf
+        '--color-secondary-300': '255 213 153', // #ffd599
+        '--color-secondary-400': '255 182 77', // #ffb64d
+        '--color-secondary-500': '255 151 0', // #ff9700
+        '--color-secondary-600': '230 136 0', // #e68800
+        '--color-secondary-700': '191 113 0', // #bf7100
+        '--color-secondary-800': '153 91 0', // #995b00
+        '--color-secondary-900': '125 74 0', // #7d4a00
         // tertiary | #bee1da
-        '--color-tertiary-50': '245 251 249',
-        '--color-tertiary-100': '242 249 248',
-        '--color-tertiary-200': '239 248 246',
-        '--color-tertiary-300': '229 243 240',
-        '--color-tertiary-400': '210 234 229',
-        '--color-tertiary-500': '190 225 218',
-        '--color-tertiary-600': '171 203 196',
-        '--color-tertiary-700': '143 169 164',
-        '--color-tertiary-800': '114 135 131',
-        '--color-tertiary-900': '93 110 107',
+        '--color-tertiary-50': '245 251 249', // #f5fbf9
+        '--color-tertiary-100': '242 249 248', // #f2f9f8
+        '--color-tertiary-200': '239 248 246', // #eff8f6
+        '--color-tertiary-300': '229 243 240', // #e5f3f0
+        '--color-tertiary-400': '210 234 229', // #d2eae5
+        '--color-tertiary-500': '190 225 218', // #bee1da
+        '--color-tertiary-600': '171 203 196', // #abcbc4
+        '--color-tertiary-700': '143 169 164', // #8fa9a4
+        '--color-tertiary-800': '114 135 131', // #728783
+        '--color-tertiary-900': '93 110 107', // #5d6e6b
         // success | #4BB543
-        '--color-success-50': '228 244 227',
-        '--color-success-100': '219 240 217',
-        '--color-success-200': '210 237 208',
-        '--color-success-300': '183 225 180',
-        '--color-success-400': '129 203 123',
-        '--color-success-500': '75 181 67',
-        '--color-success-600': '68 163 60',
-        '--color-success-700': '56 136 50',
-        '--color-success-800': '45 109 40',
-        '--color-success-900': '37 89 33',
+        '--color-success-50': '228 244 227', // #e4f4e3
+        '--color-success-100': '219 240 217', // #dbf0d9
+        '--color-success-200': '210 237 208', // #d2edd0
+        '--color-success-300': '183 225 180', // #b7e1b4
+        '--color-success-400': '129 203 123', // #81cb7b
+        '--color-success-500': '75 181 67', // #4BB543
+        '--color-success-600': '68 163 60', // #44a33c
+        '--color-success-700': '56 136 50', // #388832
+        '--color-success-800': '45 109 40', // #2d6d28
+        '--color-success-900': '37 89 33', // #255921
         // warning | #EAB308
-        '--color-warning-50': '252 244 218',
-        '--color-warning-100': '251 240 206',
-        '--color-warning-200': '250 236 193',
-        '--color-warning-300': '247 225 156',
-        '--color-warning-400': '240 202 82',
-        '--color-warning-500': '234 179 8',
-        '--color-warning-600': '211 161 7',
-        '--color-warning-700': '176 134 6',
-        '--color-warning-800': '140 107 5',
-        '--color-warning-900': '115 88 4',
+        '--color-warning-50': '252 244 218', // #fcf4da
+        '--color-warning-100': '251 240 206', // #fbf0ce
+        '--color-warning-200': '250 236 193', // #faecc1
+        '--color-warning-300': '247 225 156', // #f7e19c
+        '--color-warning-400': '240 202 82', // #f0ca52
+        '--color-warning-500': '234 179 8', // #EAB308
+        '--color-warning-600': '211 161 7', // #d3a107
+        '--color-warning-700': '176 134 6', // #b08606
+        '--color-warning-800': '140 107 5', // #8c6b05
+        '--color-warning-900': '115 88 4', // #735804
         // error | #FF0000
-        '--color-error-50': '255 217 217',
-        '--color-error-100': '255 204 204',
-        '--color-error-200': '255 191 191',
-        '--color-error-300': '255 153 153',
-        '--color-error-400': '255 77 77',
-        '--color-error-500': '255 0 0',
-        '--color-error-600': '230 0 0',
-        '--color-error-700': '191 0 0',
-        '--color-error-800': '153 0 0',
-        '--color-error-900': '125 0 0',
+        '--color-error-50': '255 217 217', // #ffd9d9
+        '--color-error-100': '255 204 204', // #ffcccc
+        '--color-error-200': '255 191 191', // #ffbfbf
+        '--color-error-300': '255 153 153', // #ff9999
+        '--color-error-400': '255 77 77', // #ff4d4d
+        '--color-error-500': '255 0 0', // #FF0000
+        '--color-error-600': '230 0 0', // #e60000
+        '--color-error-700': '191 0 0', // #bf0000
+        '--color-error-800': '153 0 0', // #990000
+        '--color-error-900': '125 0 0', // #7d0000
         // surface | #c7c7c7
-        '--color-surface-50': '247 247 247',
-        '--color-surface-100': '244 244 244',
-        '--color-surface-200': '241 241 241',
-        '--color-surface-300': '233 233 233',
-        '--color-surface-400': '216 216 216',
-        '--color-surface-500': '199 199 199',
-        '--color-surface-600': '179 179 179',
-        '--color-surface-700': '149 149 149',
-        '--color-surface-800': '119 119 119',
+        '--color-surface-50': '247 247 247', // #f7f7f7
+        '--color-surface-100': '244 244 244', // #f4f4f4
+        '--color-surface-200': '241 241 241', // #f1f1f1
+        '--color-surface-300': '233 233 233', // #e9e9e9
+        '--color-surface-400': '216 216 216', // #d8d8d8
+        '--color-surface-500': '199 199 199', // #c7c7c7
+        '--color-surface-600': '179 179 179', // #b3b3b3
+        '--color-surface-700': '149 149 149', // #959595
+        '--color-surface-800': '119 119 119', // #777777
         '--color-surface-900': '98 98 98' // #626262
     },
     properties_dark: {
         // surface | #2e2e2e
-        '--color-surface-50': '224 224 224',
-        '--color-surface-100': '213 213 213',
-        '--color-surface-200': '203 203 203',
-        '--color-surface-300': '171 171 171',
-        '--color-surface-400': '109 109 109',
-        '--color-surface-500': '46 46 46',
-        '--color-surface-600': '41 41 41',
-        '--color-surface-700': '35 35 35',
-        '--color-surface-800': '28 28 28',
+        '--color-surface-50': '224 224 224', // #e0e0e0
+        '--color-surface-100': '213 213 213', // #d5d5d5
+        '--color-surface-200': '203 203 203', // #cbcbcb
+        '--color-surface-300': '171 171 171', // #ababab
+        '--color-surface-400': '109 109 109', // #6d6d6d
+        '--color-surface-500': '46 46 46', // #2e2e2e
+        '--color-surface-600': '41 41 41', // #292929
+        '--color-surface-700': '35 35 35', // #232323
+        '--color-surface-800': '28 28 28', // #1c1c1c
         '--color-surface-900': '23 23 23' // #171717
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.3.14",
+  "version": "0.4.1",
   "private": false,
   "scripts": {
     "dev": "vite dev",
@@ -13,38 +13,40 @@
     "test:unit": "vitest",
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
     "format": "prettier --plugin-search-dir . --write .",
+    "check outdated": "npm outdated",
+    "upgrade all": "ncu --upgrade",
     "1.npm - update package infos": "npm init --scope bexis2",
     "2.npm - package": "svelte-package",
     "3.npm - publish": "npm publish --access public"
   },
   "devDependencies": {
-    "@playwright/test": "^1.36.2",
-    "@skeletonlabs/skeleton": "^2.5.0",
-    "@skeletonlabs/tw-plugin": "^0.2.4",
-    "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.5.0",
-    "@sveltejs/package": "^2.0.2",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/typography": "^0.5.9",
-    "@types/node": "^20.9.0",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
+    "@playwright/test": "^1.42.1",
+    "@skeletonlabs/skeleton": "^2.9.0",
+    "@skeletonlabs/tw-plugin": "^0.3.1",
+    "@sveltejs/adapter-auto": "^3.1.1",
+    "@sveltejs/adapter-static": "^3.0.1",
+    "@sveltejs/kit": "^2.5.3",
+    "@sveltejs/package": "^2.3.0",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/node": "^20.11.26",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "postcss": "^8.4.23",
-    "prettier": "^2.8.0",
-    "prettier-plugin-svelte": "^2.8.1",
+    "postcss": "^8.4.35",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.2",
     "raw-loader": "^4.0.2",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.0.1",
-    "tailwindcss": "^3.3.2",
-    "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "vite": "^4.3.0",
-    "vitest": "^0.25.3"
+    "svelte": "^4.2.12",
+    "svelte-check": "^3.6.7",
+    "tailwindcss": "^3.4.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6",
+    "vitest": "^1.3.1"
   },
   "type": "module",
   "module": "./src/lib/index.ts",
@@ -59,30 +61,31 @@
     "src/lib"
   ],
   "dependencies": {
-    "@codemirror/lang-html": "^6.4.5",
-    "@codemirror/lang-javascript": "^6.1.9",
+    "@codemirror/lang-html": "^6.4.8",
+    "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lint": "^6.4.2",
+    "@codemirror/lint": "^6.5.0",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@floating-ui/dom": "^1.2.7",
-    "@fortawesome/fontawesome-free": "^6.2.1",
-    "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-regular-svg-icons": "^6.2.1",
-    "@fortawesome/free-solid-svg-icons": "^6.2.1",
-    "axios": "^1.2.1",
+    "@floating-ui/dom": "^1.6.3",
+    "@fortawesome/fontawesome-free": "^6.5.1",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "axios": "^1.6.7",
     "codemirror": "^6.0.1",
+    "dateformat": "^5.0.3",
     "delay": "^6.0.0",
-    "dotenv": "^16.3.1",
+    "dotenv": "^16.4.5",
     "eslint4b-prebuilt": "^6.7.2",
     "highlight.js": "^11.9.0",
     "highlightjs-svelte": "^1.0.6",
-    "svelte": "^3.54.0",
-    "svelte-codemirror-editor": "^1.1.0",
-    "svelte-fa": "^3.0.4",
+    "svelte": "^4.2.12",
+    "svelte-codemirror-editor": "^1.3.0",
+    "svelte-fa": "^4.0.2",
     "svelte-file-dropzone": "^2.0.4",
-    "svelte-headless-table": "^0.17.3",
+    "svelte-headless-table": "^0.18.2",
     "svelte-select": "5.8.3",
-    "vest": "^4.6.11"
+    "vest": "^5.2.10"
   },
   "author": "David Schöne",
   "license": "ISC",

package/src/lib/components/CodeEditor/CodeEditor.svelte

@@ -2,7 +2,7 @@
 	import { createEventDispatcher } from 'svelte';
 
 	import CodeMirror from 'svelte-codemirror-editor';
-	import Fa from 'svelte-fa/src/fa.svelte';
+	import Fa from 'svelte-fa';
 	import Linter from 'eslint4b-prebuilt';
 	import { html } from '@codemirror/lang-html';
 	import { javascript, esLint } from '@codemirror/lang-javascript';

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

@@ -19,6 +19,7 @@
 
 	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
+	import Spinner from '../page/Spinner.svelte';
 	import TableFilter from './TableFilter.svelte';
 	import TableFilterServer from './TableFilterServer.svelte';
 	import TablePagination from './TablePagination.svelte';
@@ -61,6 +62,7 @@
 	} = config;
 
 	let searchValue = '';
+	let isFetching = false;
 
 	const filters = writable<{
 		[key: string]: { [key in FilterOptionsEnum]?: number | string | Date };
@@ -194,7 +196,9 @@
 														tableId,
 														values,
 														toFilterableValueFn,
-														filters
+														filters,
+														toStringFn,
+														pageIndex
 												  });
 										}
 								  }
@@ -237,7 +241,8 @@
 												id,
 												tableId,
 												values,
-												filters
+												filters,
+												pageIndex
 										  });
 								}
 							}
@@ -280,7 +285,6 @@
 	// Page configuration
 	const { pageIndex, pageSize } = pluginStates.page;
 
-	// TODO: Add loading animation for server-side fetch requests
 	const updateTable = async () => {
 		sendModel.limit = $pageSize;
 		sendModel.offset = $pageSize * $pageIndex;
@@ -288,14 +292,27 @@
 		sendModel.id = entityId;
 		sendModel.filter = normalizeFilters($filters);
 
-		const fetchData = await fetch(URL, {
-			headers: {
-				'Content-Type': 'application/json',
-				Authorization: `Bearer ${token}`
-			},
-			method: 'POST',
-			body: JSON.stringify(sendModel)
-		});
+		let fetchData;
+
+		try {
+			isFetching = true;
+			fetchData = await fetch(URL, {
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${token}`
+				},
+				method: 'POST',
+				body: JSON.stringify(sendModel)
+			});
+		} catch (error) {
+			throw new Error(`Network error: ${(error as Error).message}`);
+		} finally {
+			isFetching = false;
+		}
+
+		if (!fetchData.ok) {
+			throw new Error('Failed to fetch data');
+		}
 
 		const response: Receive = await fetchData.json();
 
@@ -335,7 +352,13 @@
 		<!-- Enable the search filter if table is not empty -->
 		{#if $data.length > 0}
 			{#if !serverSide}
-				<div class="flex gap-2">
+				<form
+					class="flex gap-2"
+					on:submit|preventDefault={() => {
+						sendModel.q = searchValue;
+						$filterValue = searchValue;
+					}}
+				>
 					<div class="relative w-full flex items-center">
 						<input
 							class="input p-2 border border-primary-500"
@@ -348,18 +371,20 @@
 							class="absolute right-3 items-center"
 							on:click|preventDefault={() => {
 								searchValue = '';
+								sendModel.q = '';
 								$filterValue = '';
 							}}><Fa icon={faXmark} /></button
 						>
 					</div>
 					<button
-						type="button"
+						type="submit"
 						class="btn variant-filled-primary"
 						on:click|preventDefault={() => {
 							$filterValue = searchValue;
+							sendModel.q = searchValue;
 						}}>Search</button
 					>
-				</div>
+				</form>
 			{/if}
 			<div class="flex justify-between items-center py-2 w-full">
 				<div>
@@ -460,6 +485,8 @@
 								</tr>
 							</Subscribe>
 						{/each}
+					{:else if isFetching}
+						<div class="p-10"><Spinner /></div>
 					{:else}
 						<!-- Table is empty -->
 						<p class="items-center justify-center flex w-full p-10 italic">Nothing to show here.</p>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Fa from 'svelte-fa/src/fa.svelte';
+	import Fa from 'svelte-fa';
 	import { faFilter, faPlus, faXmark } from '@fortawesome/free-solid-svg-icons';
 	import { popup } from '@skeletonlabs/skeleton';
 	import type { PopupSettings } from '@skeletonlabs/skeleton';
@@ -10,13 +10,33 @@
 	export let id;
 	export let tableId;
 	export let toFilterableValueFn: undefined | ((value: any) => any) = undefined;
+	export let toStringFn: undefined | ((value: any) => string) = undefined;
 	export let filterValue;
 	export let filters;
+	export let pageIndex;
 
 	// If the filter is applied and the displayed values are filtered
 	let active = false;
+	let type: string = 'string';
+	let isDate = false; // Options for different types of values
+	let dropdowns: {
+		option: FilterOptionsEnum;
+		value: string | number | Date | undefined;
+	}[] = [];
+
+	// Check the type of the column
+	$values.forEach((item) => {
+		if (item) {
+			type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
+
+			if (type === 'object') {
+				if (item instanceof Date) {
+					isDate = true;
+				}
+			}
+		}
+	});
 
-	// Options for different types of values
 	const options = {
 		number: [
 			{
@@ -98,11 +118,6 @@
 		]
 	};
 
-	let dropdowns: {
-		option: FilterOptionsEnum;
-		value: string | number | Date | undefined;
-	}[] = [];
-
 	// Unique ID for the column filter popup
 	const popupId = `${tableId}-${id}`;
 	// Popup config
@@ -112,24 +127,39 @@
 		placement: 'bottom-start'
 	};
 
-	let type: string = 'string';
-	let isDate = false;
-	// Check the type of the column
-	$values.forEach((item) => {
-		if (item) {
-			type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
+	// Converted string values and missingValues mapping
+	const stringValues =
+		// type === 'number' ?
+		$values.map((item) => (toStringFn ? toStringFn(item) : item));
+	// : [];
 
-			if (type === 'object') {
-				if (item instanceof Date) {
-					isDate = true;
-				}
-			}
-		}
-	});
+	const missingValues =
+		// type === 'number' ?
+		stringValues.reduce((acc, item, index) => {
+			acc[typeof item === 'string' ? item.toLowerCase() : item] = $values[index];
+			return acc;
+		}, {});
+	// : {};
+
+	const getMissingValue = (value: string) => {
+		// if (type === 'number' ||) {
+		return Object.keys(missingValues).includes(value.toLowerCase())
+			? missingValues[value.toLowerCase()]
+			: value;
+		// }
+		// return value;
+	};
 
 	const optionChangeHandler = (e, index) => {
 		delete $filters[id][dropdowns[index].option];
-		$filters[id] = { ...$filters[id], [e.target.value]: dropdowns[index].value };
+		$filters[id] = {
+			...$filters[id],
+			[e.target.value]:
+				// type === 'number'
+				// ?
+				getMissingValue(dropdowns[index].value as string)
+			// : dropdowns[index].value
+		};
 		$filters = $filters;
 
 		dropdowns[index] = {
@@ -141,17 +171,18 @@
 	const valueChangeHandler = (e, index) => {
 		dropdowns[index] = {
 			...dropdowns[index],
-			value:
-				type === 'number'
-					? +e.target.value
-					: type === 'date'
-					? new Date(e.target.value)
-					: e.target.value
+			value: type === 'date' ? new Date(e.target.value) : e.target.value
 		};
 
 		$filters = {
 			...$filters,
-			[id]: { ...$filters[id], [dropdowns[index].option]: dropdowns[index].value }
+			[id]: {
+				...$filters[id],
+				[dropdowns[index].option]:
+					// type === 'number' ?
+					getMissingValue(e.target.value)
+				//  : dropdowns[index].value
+			}
 		};
 	};
 
@@ -212,6 +243,7 @@
 					addFilter(options[type][0].value, undefined);
 					$filterValue = $filters[id];
 					active = false;
+					$pageIndex = 0;
 				}}>Clear Filters</button
 			>
 
@@ -246,14 +278,7 @@
 							{/if}
 						</div>
 
-						{#if type === 'number'}
-							<input
-								type="number"
-								class="input p-1 border border-primary-500"
-								on:input={(e) => valueChangeHandler(e, index)}
-								bind:value={dropdown.value}
-							/>
-						{:else if type === 'string'}
+						{#if type === 'number' || type === 'string'}
 							<input
 								type="text"
 								class="input p-1 border border-primary-500"
@@ -292,6 +317,7 @@
 				class="btn variant-filled-primary btn-sm"
 				type="button"
 				on:click|preventDefault={() => {
+					$pageIndex = 0;
 					$filterValue = $filters[id];
 					active = true;
 				}}>Apply</button

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Fa from 'svelte-fa/src/fa.svelte';
+	import Fa from 'svelte-fa';
 	import { faFilter, faPlus, faXmark } from '@fortawesome/free-solid-svg-icons';
 	import { popup } from '@skeletonlabs/skeleton';
 	import type { PopupSettings } from '@skeletonlabs/skeleton';

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Fa from 'svelte-fa/src/fa.svelte';
+	import Fa from 'svelte-fa';
 	import {
 		faAnglesRight,
 		faAngleRight,

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Fa from 'svelte-fa/src/fa.svelte';
+	import Fa from 'svelte-fa';
 	import {
 		faAnglesRight,
 		faAngleRight,

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

@@ -1,3 +1,5 @@
+import dateFormat from 'dateformat';
+
 import type { FilterOptionsEnum } from '$models/Enums';
 import type { Columns, Filter, ServerColumn } from '$models/Models';
 
@@ -115,14 +117,13 @@ export const convertServerColumns = (columns: ServerColumn[]) => {
 	columns.forEach((col) => {
 		let instructions = {};
 
-		// if (col.instructions?.displayPattern) {
-		// 	instructions = {
-		// 		toStringFn: (date: Date) =>
-		// 			date.toLocaleString('en-US', col.instructions?.displayPattern || {}),
-		// 		toSortableValueFn: (date: Date) => date.getTime(),
-		// 		toFilterableValueFn: (date: Date) => date
-		// 	};
-		// }
+		if (col.instructions?.displayPattern) {
+			instructions = {
+				toStringFn: (date: Date) => dateFormat(date, col.instructions?.displayPattern || ''),
+				toSortableValueFn: (date: Date) => date.getTime(),
+				toFilterableValueFn: (date: Date) => date
+			};
+		}
 
 		if (col.instructions?.missingValues) {
 			instructions = {

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

@@ -7,7 +7,7 @@
 	} from '../../models/Models.js';
 
 	import Dropzone from 'svelte-file-dropzone';
-	import Fa from 'svelte-fa/src/fa.svelte';
+	import Fa from 'svelte-fa';
 
 	import Spinner from '../page/Spinner.svelte';
 	import { createEventDispatcher } from 'svelte';