@bexis2/bexis2-core-ui 0.4.95 → 0.4.96

package/README.md

@@ -1,4 +1,11 @@
 # bexis-core-ui
+
+## 0.4.96
+- ServerSideTable
+  - Add support for boolean
+  - Fix missing value handling
+
+
 ## 0.4.95
 - Input
   - Add focus in/out for element

package/dist/components/Table/Table.svelte

@@ -3,6 +3,11 @@ export let config;
 let fetched = false;
 const data = config.data;
 $: if ($data.length > 0) fetched = true;
+if (typeof BigInt !== "undefined" && !BigInt.prototype.toJSON) {
+  BigInt.prototype.toJSON = function() {
+    return this.toString();
+  };
+}
 </script>
 
 {#key fetched}

package/dist/components/Table/TableFilter.svelte

@@ -16,7 +16,7 @@ let type = "string";
 let isDate = false;
 let dropdowns = [];
 $values.forEach((item) => {
-  if (item) {
+  if (item !== null && item !== void 0) {
     type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
     if (type === "object") {
       if (toFilterableValueFn && toFilterableValueFn(item) instanceof Date) {
@@ -105,6 +105,16 @@ const options = {
       value: FilterOptionsEnum.no,
       label: "Is not on"
     }
+  ],
+  boolean: [
+    {
+      value: FilterOptionsEnum.e,
+      label: "Is equal to"
+    },
+    {
+      value: FilterOptionsEnum.ne,
+      label: "Is not equal to"
+    }
   ]
 };
 const popupId = `${tableId}-${id}`;
@@ -129,14 +139,10 @@ const getMissingValue = (value) => {
 };
 const optionChangeHandler = (e, index) => {
   delete $filters[id][dropdowns[index].option];
+  const val = dropdowns[index].value;
   $filters[id] = {
     ...$filters[id],
-    [e.target.value]: (
-      // type === 'number'
-      // ?
-      getMissingValue(dropdowns[index].value)
-    )
-    // : dropdowns[index].value
+    [e.target.value]: type === "boolean" ? val === "" || val === void 0 ? void 0 : getMissingValue(val) === "true" || getMissingValue(val) === true : getMissingValue(val)
   };
   $filters = $filters;
   dropdowns[index] = {
@@ -154,11 +160,7 @@ const valueChangeHandler = (e, index) => {
     ...$filters,
     [id]: {
       ...$filters[id],
-      [dropdowns[index].option]: (
-        // type === 'number' ?
-        getMissingValue(e.target.value)
-      )
-      //  : dropdowns[index].value
+      [dropdowns[index].option]: type === "boolean" ? e.target.value === "" ? void 0 : getMissingValue(e.target.value) === "true" || getMissingValue(e.target.value) === true : getMissingValue(e.target.value)
     }
   };
 };
@@ -265,6 +267,17 @@ onMount(() => {
 								bind:value={dropdown.value}
 								aria-label="Filter value"
 							/>
+						{:else if type === 'boolean'}
+							<select
+								class="select border border-primary-500 text-sm p-1"
+								on:change={(e) => valueChangeHandler(e, index)}
+								bind:value={dropdown.value}
+								aria-label="Filter value"
+							>
+								<option value="" disabled selected>Select value...</option>
+								<option value="true">True</option>
+								<option value="false">False</option>
+							</select>
 						{:else}
 							<input
 								type="date"

package/dist/components/Table/TableFilterServer.svelte

@@ -16,8 +16,9 @@ let type = "string";
 let isDate = false;
 let dropdowns = [];
 $values.forEach((item) => {
-  if (item) {
-    type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
+  if (item !== null && item !== void 0) {
+    const rawType = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
+    type = rawType === "bigint" ? "number" : rawType;
     if (type === "object") {
       if ((toFilterableValueFn ? toFilterableValueFn(item) : item) instanceof Date) {
         isDate = true;
@@ -104,6 +105,16 @@ const options = {
     // 	value: FilterOptionsEnum.no,
     // 	label: 'Is not on'
     // }
+  ],
+  boolean: [
+    {
+      value: FilterOptionsEnum.e,
+      label: "Is equal to"
+    },
+    {
+      value: FilterOptionsEnum.ne,
+      label: "Is not equal to"
+    }
   ]
 };
 const popupId = `${tableId}-${id}`;
@@ -114,7 +125,8 @@ const popupFeatured = {
 };
 const stringValues = $values.map((item) => toStringFn ? toStringFn(item) : item);
 const missingValues = stringValues.reduce((acc, item, index) => {
-  acc[typeof item === "string" ? item.toLowerCase() : item] = $values[index];
+  const strRepresentation = String(item).toLowerCase();
+  acc[strRepresentation] = $values[index];
   return acc;
 }, {});
 const getMissingValue = (value) => {
@@ -122,9 +134,10 @@ const getMissingValue = (value) => {
 };
 const optionChangeHandler = (e, index) => {
   delete $filters[id][dropdowns[index].option];
+  const val = dropdowns[index].value;
   $filters[id] = {
     ...$filters[id],
-    [e.target.value]: getMissingValue(dropdowns[index].value)
+    [e.target.value]: type === "boolean" ? val === "" || val === void 0 ? void 0 : getMissingValue(val) === "true" || getMissingValue(val) === true : getMissingValue(dropdowns[index].value)
   };
   $filters = $filters;
   dropdowns[index] = {
@@ -142,7 +155,28 @@ const valueChangeHandler = (e, index) => {
     ...$filters,
     [id]: {
       ...$filters[id],
-      [dropdowns[index].option]: type === "number" ? parseFloat(getMissingValue(e.target.value)) || void 0 : getMissingValue(e.target.value)
+      [dropdowns[index].option]: (() => {
+        const rawVal = getMissingValue(e.target.value);
+        if (rawVal === "" || rawVal === void 0 || rawVal === null) {
+          return void 0;
+        }
+        if (type === "number") {
+          const cleanStr = String(rawVal).trim();
+          const isBigInt = /^\d+$/.test(cleanStr) && cleanStr.length >= 16;
+          if (isBigInt) {
+            try {
+              return BigInt(cleanStr);
+            } catch {
+              return cleanStr;
+            }
+          }
+          return parseFloat(cleanStr) || void 0;
+        }
+        if (type === "boolean") {
+          return rawVal === "true" || rawVal === true;
+        }
+        return rawVal;
+      })()
     }
   };
 };
@@ -241,7 +275,7 @@ $: console.log($filters);
 									on:click|preventDefault={() => removeFilter(dropdown.option)}
 									on:keydown|preventDefault={() => removeFilter(dropdown.option)}
 									aria-label="Remove filter"
-									>
+								>
 									<Fa icon={faXmark} />
 								</div>
 							{/if}
@@ -262,6 +296,17 @@ $: console.log($filters);
 								bind:value={dropdown.value}
 								aria-label="Filter value"
 							/>
+						{:else if type === 'boolean'}
+							<select
+								class="select border border-primary-500 text-sm p-1"
+								on:change={(e) => valueChangeHandler(e, index)}
+								bind:value={dropdown.value}
+								aria-label="Filter value"
+							>
+								<option value="" disabled selected>Select value...</option>
+								<option value="true">True</option>
+								<option value="false">False</option>
+							</select>
 						{:else}
 							<input
 								type="date"

package/dist/components/Table/filter.js

@@ -67,20 +67,35 @@ const applyFilter = (filterValue, value, filterFn) => {
         value: filterValue[key]
     }));
     filters.forEach((filter) => {
-        result = result && (filter.value ? filterFn(filter.option, filter.value, value) : true);
+        result = result && (filter.value !== undefined && filter.value !== '' && filter.value !== null ? filterFn(filter.option, filter.value, value) : true);
     });
     return result;
 };
+const booleanFilter = (filterOption, filterValue, value) => {
+    const filterBool = typeof filterValue === 'string' ? filterValue === 'true' : !!filterValue;
+    const valBool = !!value;
+    switch (filterOption) {
+        case FilterOptionsEnum.e:
+            return valBool === filterBool;
+        case FilterOptionsEnum.ne:
+            return valBool !== filterBool;
+        default:
+            return false;
+    }
+};
 export const columnFilter = ({ filterValue, value }) => {
     if (typeof value === 'object' && value instanceof Date) {
         return applyFilter(filterValue, value, dateFilter);
     }
-    else if (typeof value === 'number') {
+    else if (typeof value === 'number' || typeof value === 'bigint') {
         return applyFilter(filterValue, value, numberFilter);
     }
     else if (typeof value === 'string') {
         return applyFilter(filterValue, value, textFilter);
     }
+    else if (typeof value === 'boolean') {
+        return applyFilter(filterValue, value, booleanFilter);
+    }
     return false;
 };
 export const searchFilter = ({ filterValue, value }) => {

package/dist/components/Table/utils.js

@@ -176,13 +176,27 @@ export const updateTable = async (pageSize, pageIndex, server, filters, data, se
     if (!fetchData.ok) {
         throw new Error('Failed to fetch data');
     }
-    const response = await fetchData.json();
+    // 1. Get the raw text of the response instead of parsing it automatically
+    const rawText = await fetchData.text();
+    // 2. Parse it with a reviver function that targets large integers
+    const response = JSON.parse(rawText, (key, value, context) => {
+        // If the parser thinks it's a number, but we have the raw source text
+        if (context && context.source && typeof value === 'number') {
+            // Check if the number exceeds JavaScript's safe integer limit
+            if (!Number.isSafeInteger(value)) {
+                // Return it natively as a JavaScript BigInt (e.g., 9223372036854775806n)
+                return BigInt(context.source);
+            }
+        }
+        return value;
+    });
+    // console.log('Server response', response);
     // Format server columns to the client columns
     if (response.columns !== undefined) {
-        console.log('Server columns', response.columns);
+        //console.log('Server columns', response.columns);
         columns = convertServerColumns(response.columns, columns);
         const clientCols = response.columns.reduce((acc, col) => {
-            console.log(col.key, col.column);
+            // console.log(col.key, col.column);
             // replace the . with empty string
             //const key = col.key.replaceAll('.' ,'');
             ///console.log(key, col.column);
@@ -204,11 +218,11 @@ export const updateTable = async (pageSize, pageIndex, server, filters, data, se
         });
         dispatch('fetch', columns);
         data.set(tmpArr);
-        console.log('Server data', tmpArr);
+        // console.log('Server data', tmpArr);
         return data;
     }
     serverItems?.set(response.count);
-    console.log('Server data updated');
+    // console.log('Server data updated');
     // log the columns object
     console.log(response);
     return response;
@@ -264,7 +278,7 @@ export const convertServerColumns = (serverColumns, columns) => {
             };
         }
     });
-    console.log('Columns config', columnsConfig);
+    // console.log('Columns config', columnsConfig);
     return columnsConfig;
 };
 // Calculates the maximum height of the cells in each row

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.95",
+  "version": "0.4.96",
   "private": false,
   "description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
   "keywords": [

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

@@ -8,6 +8,12 @@
 	const data = config.data;
 
 	$: if ($data.length > 0) fetched = true;
+
+	if (typeof BigInt !== "undefined" && !BigInt.prototype.toJSON) {
+  BigInt.prototype.toJSON = function () {
+    return this.toString();
+  };
+}
 </script>
 
 {#key fetched}

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

@@ -28,7 +28,7 @@
 
 	// Check the type of the column
 	$values.forEach((item) => {
-		if (item) {
+		if (item !== null && item !== undefined) {
 			type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
 
 			if (type === 'object') {
@@ -119,6 +119,16 @@
 				value: FilterOptionsEnum.no,
 				label: 'Is not on'
 			}
+		],
+		boolean: [
+			{
+				value: FilterOptionsEnum.e,
+				label: 'Is equal to'
+			},
+			{
+				value: FilterOptionsEnum.ne,
+				label: 'Is not equal to'
+			}
 		]
 	};
 
@@ -156,13 +166,13 @@
 
 	const optionChangeHandler = (e, index) => {
 		delete $filters[id][dropdowns[index].option];
+		const val = dropdowns[index].value;
 		$filters[id] = {
 			...$filters[id],
 			[e.target.value]:
-				// type === 'number'
-				// ?
-				getMissingValue(dropdowns[index].value as string)
-			// : dropdowns[index].value
+				type === 'boolean'
+					? (val === '' || val === undefined ? undefined : getMissingValue(val as string) === 'true' || getMissingValue(val as string) === true)
+					: getMissingValue(val as string)
 		};
 		$filters = $filters;
 
@@ -184,9 +194,9 @@
 			[id]: {
 				...$filters[id],
 				[dropdowns[index].option]:
-					// type === 'number' ?
-					getMissingValue(e.target.value)
-				//  : dropdowns[index].value
+					type === 'boolean'
+						? (e.target.value === '' ? undefined : getMissingValue(e.target.value) === 'true' || getMissingValue(e.target.value) === true)
+						: getMissingValue(e.target.value)
 			}
 		};
 	};
@@ -304,6 +314,17 @@
 								bind:value={dropdown.value}
 								aria-label="Filter value"
 							/>
+						{:else if type === 'boolean'}
+							<select
+								class="select border border-primary-500 text-sm p-1"
+								on:change={(e) => valueChangeHandler(e, index)}
+								bind:value={dropdown.value}
+								aria-label="Filter value"
+							>
+								<option value="" disabled selected>Select value...</option>
+								<option value="true">True</option>
+								<option value="false">False</option>
+							</select>
 						{:else}
 							<input
 								type="date"

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

@@ -28,8 +28,11 @@
 
 	// Check the type of the column
 	$values.forEach((item) => {
-		if (item) {
-			type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
+		if (item !== null && item !== undefined) {
+			const rawType = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
+
+			// Treat bigint exactly as 'number' for layout options
+			type = rawType === 'bigint' ? 'number' : rawType;
 
 			if (type === 'object') {
 				if ((toFilterableValueFn ? toFilterableValueFn(item) : item) instanceof Date) {
@@ -119,6 +122,16 @@
 			// 	value: FilterOptionsEnum.no,
 			// 	label: 'Is not on'
 			// }
+		],
+		boolean: [
+			{
+				value: FilterOptionsEnum.e,
+				label: 'Is equal to'
+			},
+			{
+				value: FilterOptionsEnum.ne,
+				label: 'Is not equal to'
+			}
 		]
 	};
 
@@ -134,7 +147,9 @@
 	const stringValues = $values.map((item) => (toStringFn ? toStringFn(item) : item));
 
 	const missingValues = stringValues.reduce((acc, item, index) => {
-		acc[typeof item === 'string' ? item.toLowerCase() : item] = $values[index];
+		// Convert everything (including BigInt values) to string first
+		const strRepresentation = String(item).toLowerCase();
+		acc[strRepresentation] = $values[index];
 		return acc;
 	}, {});
 
@@ -146,9 +161,15 @@
 
 	const optionChangeHandler = (e, index) => {
 		delete $filters[id][dropdowns[index].option];
+		const val = dropdowns[index].value;
 		$filters[id] = {
 			...$filters[id],
-			[e.target.value]: getMissingValue(dropdowns[index].value as string)
+			[e.target.value]:
+				type === 'boolean'
+					? val === '' || val === undefined
+						? undefined
+						: getMissingValue(val as string) === 'true' || getMissingValue(val as string) === true
+					: getMissingValue(dropdowns[index].value as string)
 		};
 		$filters = $filters;
 
@@ -169,10 +190,34 @@
 			...$filters,
 			[id]: {
 				...$filters[id],
-				[dropdowns[index].option]:
-					type === 'number'
-						? parseFloat(getMissingValue(e.target.value)) || undefined
-						: getMissingValue(e.target.value)
+				[dropdowns[index].option]: (() => {
+					const rawVal = getMissingValue(e.target.value);
+
+					if (rawVal === '' || rawVal === undefined || rawVal === null) {
+						return undefined;
+					}
+
+					if (type === 'number') {
+						const cleanStr = String(rawVal).trim();
+						// If it's a 16+ digit integer, parse as BigInt to keep precision
+						const isBigInt = /^\d+$/.test(cleanStr) && cleanStr.length >= 16;
+
+						if (isBigInt) {
+							try {
+								return BigInt(cleanStr);
+							} catch {
+								return cleanStr;
+							}
+						}
+						return parseFloat(cleanStr) || undefined;
+					}
+
+					if (type === 'boolean') {
+						return rawVal === 'true' || rawVal === true;
+					}
+
+					return rawVal;
+				})()
 			}
 		};
 	};
@@ -284,7 +329,7 @@
 									on:click|preventDefault={() => removeFilter(dropdown.option)}
 									on:keydown|preventDefault={() => removeFilter(dropdown.option)}
 									aria-label="Remove filter"
-									>
+								>
 									<Fa icon={faXmark} />
 								</div>
 							{/if}
@@ -305,6 +350,17 @@
 								bind:value={dropdown.value}
 								aria-label="Filter value"
 							/>
+						{:else if type === 'boolean'}
+							<select
+								class="select border border-primary-500 text-sm p-1"
+								on:change={(e) => valueChangeHandler(e, index)}
+								bind:value={dropdown.value}
+								aria-label="Filter value"
+							>
+								<option value="" disabled selected>Select value...</option>
+								<option value="true">True</option>
+								<option value="false">False</option>
+							</select>
 						{:else}
 							<input
 								type="date"

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

@@ -78,19 +78,35 @@ const applyFilter = (filterValue, value, filterFn) => {
 	}));
 
 	filters.forEach((filter) => {
-		result = result && (filter.value ? filterFn(filter.option, filter.value, value) : true);
+		result = result && (filter.value !== undefined && filter.value !== '' && filter.value !== null ? filterFn(filter.option, filter.value, value) : true);
 	});
 
 	return result;
 };
 
+const booleanFilter = (filterOption, filterValue, value) => {
+	const filterBool = typeof filterValue === 'string' ? filterValue === 'true' : !!filterValue;
+	const valBool = !!value;
+
+	switch (filterOption) {
+		case FilterOptionsEnum.e:
+			return valBool === filterBool;
+		case FilterOptionsEnum.ne:
+			return valBool !== filterBool;
+		default:
+			return false;
+	}
+};
+
 export const columnFilter: ColumnFilterFn = ({ filterValue, value }) => {
 	if (typeof value === 'object' && value instanceof Date) {
 		return applyFilter(filterValue, value, dateFilter);
-	} else if (typeof value === 'number') {
+	} else if (typeof value === 'number' || typeof value === 'bigint') {
 		return applyFilter(filterValue, value, numberFilter);
 	} else if (typeof value === 'string') {
 		return applyFilter(filterValue, value, textFilter);
+	} else if (typeof value === 'boolean') {
+		return applyFilter(filterValue, value, booleanFilter);
 	}
 
 	return false;

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

@@ -227,15 +227,30 @@ export const updateTable = async (
 		throw new Error('Failed to fetch data');
 	}
 
-	const response: Receive = await fetchData.json();
+	// 1. Get the raw text of the response instead of parsing it automatically
+const rawText = await fetchData.text();
+
+// 2. Parse it with a reviver function that targets large integers
+const response: Receive = JSON.parse(rawText, (key, value, context) => {
+  // If the parser thinks it's a number, but we have the raw source text
+  if (context && context.source && typeof value === 'number') {
+    // Check if the number exceeds JavaScript's safe integer limit
+    if (!Number.isSafeInteger(value)) {
+      // Return it natively as a JavaScript BigInt (e.g., 9223372036854775806n)
+      return BigInt(context.source);
+    }
+  }
+  return value;
+});
+// console.log('Server response', response);
 
 	// Format server columns to the client columns
 	if (response.columns !== undefined) {
-		console.log('Server columns', response.columns);
+		//console.log('Server columns', response.columns);
 		columns = convertServerColumns(response.columns, columns);
 
 		const clientCols = response.columns.reduce((acc, col) => {
-			console.log(col.key, col.column);
+			// console.log(col.key, col.column);
 			// replace the . with empty string
 			//const key = col.key.replaceAll('.' ,'');
 			///console.log(key, col.column);
@@ -259,12 +274,12 @@ export const updateTable = async (
 		});
 		dispatch('fetch', columns);
 		data.set(tmpArr);
-		console.log('Server data', tmpArr);
+		// console.log('Server data', tmpArr);
 		return data;
 	}
 
 	serverItems?.set(response.count);
-	console.log('Server data updated');
+	// console.log('Server data updated');
 
 
 	// log the columns object
@@ -326,7 +341,7 @@ export const convertServerColumns = (
 			};
 		}
 	});
-	console.log('Columns config', columnsConfig);
+	// console.log('Columns config', columnsConfig);
 	return columnsConfig;
 };
 // Calculates the maximum height of the cells in each row