@bexis2/bexis2-core-ui 0.4.95 → 0.4.97

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

@@ -41,13 +41,10 @@ export const getResizeStyles = (
 ) => {
 	return `
 	min-height: ${rowHeights && rowHeights[+id] ? `${rowHeights[+id].min}px` : 'auto'};
-	max-height: ${index !== 0 && rowHeights && rowHeights[+id]
-			? `${rowHeights[+id].max}px`
-			: 'auto'
-		};
+	max-height: ${index !== 0 && rowHeights && rowHeights[+id] ? `${rowHeights[+id].max}px` : 'auto'};
 	height: ${rowHeights && rowHeights[+id] ? `${rowHeights[+id].min}px` : 'auto'};
 	`;
-}
+};
 // Function to normalize the filters for back-end
 export const normalizeFilters = (filters: {
 	[key: string]: { [key in FilterOptionsEnum]?: number | string | Date };
@@ -103,14 +100,12 @@ export const jsonToCsv = (data: string): string => {
 	// Create CSV rows
 	const rows = [
 		headers.join(','), // Header row
-		...json.map((row) =>
-			headers.map(header => escapeCsvCell(row[header])).join(',')
-		) // Data rows
+		...json.map((row) => headers.map((header) => escapeCsvCell(row[header])).join(',')) // Data rows
 	];
 
 	// Join rows with newlines
 	return rows.join('\n');
-}
+};
 // Resetting the resized columns and/or rows
 export const resetResize = (
 	headerRows: any,
@@ -162,12 +157,12 @@ export const missingValuesFn = (
 	const foundKey =
 		typeof key === 'number' && key.toString().includes('e')
 			? Object.keys(missingValues).find((item) => {
-				return (item as string).toLowerCase() === key.toString().toLowerCase();
-			})
+					return (item as string).toLowerCase() === key.toString().toLowerCase();
+				})
 			: typeof key === 'string' && parseInt(key).toString().length !== key.length && new Date(key)
 				? Object.keys(missingValues).find(
-					(item) => new Date(item).getTime() === new Date(key).getTime()
-				)
+						(item) => new Date(item).getTime() === new Date(key).getTime()
+					)
 				: key in missingValues
 					? key
 					: undefined;
@@ -180,13 +175,13 @@ export const updateTable = async (
 	pageIndex: number,
 	server: ServerConfig | undefined,
 	filters: {
-		[key: string]: { [key in FilterOptionsEnum]?: number | string | Date }
+		[key: string]: { [key in FilterOptionsEnum]?: number | string | Date };
 	},
 	data: Writable<any[]>,
 	serverItems: Writable<number> | undefined,
 	columns: Columns | undefined,
 	dispatch: any,
-	order: OrderBy[] = [],
+	order: OrderBy[] = []
 ) => {
 	const { baseUrl, entityId, versionId, sendModel = new Send() } = server ?? {};
 
@@ -202,7 +197,7 @@ export const updateTable = async (
 	// remove %%% from the columns object
 	if (sendModel.order) {
 		sendModel.order.forEach((order) => {
-			if (order.column.includes("%%%")) {
+			if (order.column.includes('%%%')) {
 				const newKey = order.column.replaceAll('%%%', '.');
 				order.column = newKey;
 			}
@@ -227,22 +222,52 @@ 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;
+	});
+
+	const rawCount = (response as any).count;
+	const hasRawCount =
+		rawCount !== undefined && rawCount !== null && String(rawCount).trim().length > 0;
+	const parsedServerCount = hasRawCount
+		? typeof rawCount === 'number'
+			? rawCount
+			: Number(String(rawCount).replace(/[^0-9.-]/g, ''))
+		: Number.NaN;
+	const hasServerCount = hasRawCount && Number.isFinite(parsedServerCount) && parsedServerCount >= 0;
+	const normalizedCount = hasServerCount
+		? parsedServerCount
+		: Array.isArray(response.data)
+			? response.data.length
+			: 0;
+	// 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);
 			// set the key to the columns object
-			col.column = col.column.replaceAll('.', "%%%");
-			col.key = col.key.replaceAll('.', "%%%");
-			acc[col.key] = col.column
+			col.column = col.column.replaceAll('.', '%%%');
+			col.key = col.key.replaceAll('.', '%%%');
+			acc[col.key] = col.column;
 			//acc[col.column] = col.column;
 
 			return acc;
@@ -253,23 +278,24 @@ export const updateTable = async (
 		response.data.forEach((row, index) => {
 			const tmp: { [key: string]: any } = {};
 			Object.keys(row).forEach((key) => {
-				tmp[clientCols[key.replaceAll('.', "%%%") ]] = row[key]
+				tmp[clientCols[key.replaceAll('.', '%%%')]] = row[key];
 			});
 			tmpArr.push(tmp);
 		});
-		dispatch('fetch', columns);
+		dispatch('fetch', {
+			columns,
+			count: hasServerCount ? parsedServerCount : tmpArr.length
+		});
+		serverItems?.set(hasServerCount ? parsedServerCount : tmpArr.length);
 		data.set(tmpArr);
-		console.log('Server data', tmpArr);
+		// console.log('Server data', tmpArr);
 		return data;
 	}
 
-	serverItems?.set(response.count);
-	console.log('Server data updated');
-
-
-	// log the columns object
-	console.log(response);
-	return response;
+	serverItems?.set(normalizedCount);
+	// If backend does not provide column metadata, still render returned rows.
+	data.set(response.data ?? []);
+	return data;
 };
 // Function to convert server data to client data
 export const convertServerColumns = (
@@ -316,17 +342,17 @@ export const convertServerColumns = (
 		}
 
 		if (columns && col.column in columns) {
-			columnsConfig[col.column.replaceAll('.', "%%%")] = {
-				...columns[col.column.replaceAll('.', "%%%")],
+			columnsConfig[col.column.replaceAll('.', '%%%')] = {
+				...columns[col.column.replaceAll('.', '%%%')],
 				instructions
 			};
 		} else {
-			columnsConfig[col.column.replaceAll('.', "%%%") ] = {
+			columnsConfig[col.column.replaceAll('.', '%%%')] = {
 				instructions
 			};
 		}
 	});
-	console.log('Columns config', columnsConfig);
+	// console.log('Columns config', columnsConfig);
 	return columnsConfig;
 };
 // Calculates the maximum height of the cells in each row
@@ -340,6 +366,8 @@ export const getMaxCellHeightInRow = (
 ) => {
 	if (!tableRef || resizable === 'columns' || resizable === 'none') return;
 
+	const measuredHeights: { [key: number]: { max: number; min: number } } = {};
+
 	tableRef.querySelectorAll('tbody tr').forEach((row, index) => {
 		const cells = row.querySelectorAll('td');
 
@@ -357,17 +385,23 @@ export const getMaxCellHeightInRow = (
 			}
 		});
 
-		rowHeights.update((rh) => {
-			const id = +row.id.split(`${tableId}-row-`)[1];
-			return {
-				...rh,
-				[id]: {
-					max: maxHeight - 24,
-					min: Math.max(minHeight - 24, rowHeight ?? 20)
-				}
+		const id = +row.id.split(`${tableId}-row-`)[1];
+		if (Number.isFinite(id)) {
+			measuredHeights[id] = {
+				max: maxHeight - 24,
+				min: Math.max(minHeight - 24, rowHeight ?? 20)
 			};
-		});
+		}
 	});
+
+	if (Object.keys(measuredHeights).length === 0) {
+		return;
+	}
+
+	rowHeights.update((rh) => ({
+		...rh,
+		...measuredHeights
+	}));
 };
 // Calculates the minimum width of the cells in each column
 export const getMinCellWidthInColumn = (
@@ -394,4 +428,4 @@ export const getMinCellWidthInColumn = (
 		});
 		return cw;
 	});
-};
+};

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

@@ -9,7 +9,7 @@
 	export let invalid: boolean;
 	export let required: boolean;
 	export let feedback: [];
-	export	let description: string = '';
+	export let description: string = '';
 </script>
 
 <InputContainer {label} {feedback} {required} {description}>

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

@@ -12,23 +12,22 @@
 
 	let required = false;
 	export let feedback: [];
-
 </script>
 
 <InputContainer {id} label={title} {feedback} {required} {help} {description}>
-<div	class="flex gap-2" class:flex-col={vertical} >
-	{#each source as item}
-		<label class="flex items-center space-x-2" for={item.key}>
-			<input
-				class="checkbox"
-				type="checkbox"
-				bind:group={target}
-				checked={item.key}
-				value={item.key}
-				id={item.key}
-			/>
-			<p>{item.value}</p>
-		</label>
-	{/each}
-</div>
+	<div class="flex gap-2" class:flex-col={vertical}>
+		{#each source as item}
+			<label class="flex items-center space-x-2" for={item.key}>
+				<input
+					class="checkbox"
+					type="checkbox"
+					bind:group={target}
+					checked={item.key}
+					value={item.key}
+					id={item.key}
+				/>
+				<p>{item.value}</p>
+			</label>
+		{/each}
+	</div>
 </InputContainer>

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

@@ -14,7 +14,7 @@
 <InputContainer label={title} {feedback} {required} {description}>
 	{#each source as item}
 		<label class="flex items-center space-x-2" for={item}>
-			<input class="checkbox" type="checkbox" bind:group={target} value={item} id={item}/>
+			<input class="checkbox" type="checkbox" bind:group={target} value={item} id={item} />
 			<p>{item}</p>
 		</label>
 	{/each}

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

@@ -10,12 +10,23 @@
 	export let feedback: string[] = [''];
 	export let help = false;
 	export let disabled: boolean = false;
-	export let description	: string = '';
+	export let description: string = '';
 	export let showDescription: boolean = false;
 	export let showIcon: boolean = false;
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
+<InputContainer
+	{id}
+	{label}
+	{feedback}
+	{required}
+	{help}
+	{description}
+	{showDescription}
+	{showIcon}
+	on:showDescription
+	on:hideDescription
+>
 	<input
 		{id}
 		class="input variant-form-material bg-zinc-50 dark:bg-zinc-700 placeholder:text-gray-400"

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

@@ -39,33 +39,55 @@
 	}
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
-<!-- 1. Wrap everything in a relative container so the icon positions against this boundary -->
-<div class="relative w-full">
-    
-    <SveltyPicker
-        {mode}
-        name={label}
-        {format}
-        {displayFormat}
-        {initialDate}
-        bind:value
-        on:input
-        on:change
-        {disabled}
-        {placeholder}
-        manualInput={true}
-        
-        inputClasses="input variant-form-material bg-zinc-50 dark:bg-zinc-700 placeholder:text-gray-400 pr-10 {valid ? 'input-success' : ''} {invalid ? 'input-error' : ''}"
-    />
-	{#if mode === 'time'}
-		<Fa icon={faClock} class="absolute inset-y-2 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300" />
-	{:else if mode === 'date' }
-		<Fa icon={faCalendar} class="absolute inset-y-2 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300" />
-	{:else if mode === 'datetime'}
-		<Fa icon={faCalendar} class="absolute inset-y-2 right-5 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300" />
-		<Fa icon={faClock} class="absolute inset-y-2 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300" />
-	{/if}
-</div>
-	
+<InputContainer
+	{id}
+	{label}
+	{feedback}
+	{required}
+	{help}
+	{description}
+	{showDescription}
+	{showIcon}
+	on:showDescription
+	on:hideDescription
+>
+	<!-- 1. Wrap everything in a relative container so the icon positions against this boundary -->
+	<div class="relative w-full">
+		<SveltyPicker
+			{mode}
+			name={label}
+			{format}
+			{displayFormat}
+			{initialDate}
+			bind:value
+			on:input
+			on:change
+			{disabled}
+			{placeholder}
+			manualInput={true}
+			inputClasses="input variant-form-material bg-zinc-50 dark:bg-zinc-700 placeholder:text-gray-400 pr-10 {valid
+				? 'input-success'
+				: ''} {invalid ? 'input-error' : ''}"
+		/>
+		{#if mode === 'time'}
+			<Fa
+				icon={faClock}
+				class="absolute inset-y-2 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300"
+			/>
+		{:else if mode === 'date'}
+			<Fa
+				icon={faCalendar}
+				class="absolute inset-y-2 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300"
+			/>
+		{:else if mode === 'datetime'}
+			<Fa
+				icon={faCalendar}
+				class="absolute inset-y-2 right-5 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300"
+			/>
+			<Fa
+				icon={faClock}
+				class="absolute inset-y-2 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300"
+			/>
+		{/if}
+	</div>
 </InputContainer>

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

@@ -20,16 +20,27 @@
 
 	function updatedSelectedValue(selection) {
 		if (selection != null) {
-				selected = selection;
+			selected = selection;
 		}
 	}
 
 	function updatedTarget(value) {
-			target = value;		
+		target = value;
 	}
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
+<InputContainer
+	{id}
+	label={title}
+	{feedback}
+	{required}
+	{help}
+	{description}
+	{showDescription}
+	{showIcon}
+	on:showDescription
+	on:hideDescription
+>
 	<select
 		{id}
 		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

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

@@ -11,7 +11,7 @@
 	export let required = false;
 	export let complexTarget = false;
 	export let help = false;
-	export	let description = '';
+	export let description = '';
 	export let showDescription = false;
 	export let showIcon = false;
 	$: selected = null;
@@ -38,7 +38,18 @@
 	}
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
+<InputContainer
+	{id}
+	label={title}
+	{feedback}
+	{required}
+	{help}
+	{description}
+	{showDescription}
+	{showIcon}
+	on:showDescription
+	on:hideDescription
+>
 	<select
 		{id}
 		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

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

@@ -9,7 +9,7 @@
 	export let required: boolean;
 	export let feedback: string[];
 	export let help: boolean = false;
-	export let description : string = '';
+	export let description: string = '';
 	export let showDescription: boolean = false;
 	export let showIcon: boolean = false;
 
@@ -23,7 +23,6 @@
 			// dispatch an event to show the description
 			dispatch('showDescription', { id, description });
 		}
-
 	}
 
 	export function onMouseOut() {
@@ -44,33 +43,35 @@
 	on:focus={onMouseOver}
 	on:mouseout={onMouseOut}
 	on:blur={onMouseOut}
-	on:focusin={onMouseOver}  
-    on:focusout={onMouseOut}
-
+	on:focusin={onMouseOver}
+	on:focusout={onMouseOut}
 >
-	<label class="label w-full flex" for="{id}">
+	<label class="label w-full flex" for={id}>
 		<span class="grow"
 			>{label}
-			{#if required} <span class="text-xs text-red-600">*</span> {/if}
+			{#if required}
+				<span class="text-xs text-red-600">*</span>
+			{/if}
 		</span>
 		{#if description && showIcon}
-				<button class="badge " on:click={()=>showDescription = !showDescription}><Fa icon={faQuestion} /></button>
+			<button class="badge" on:click={() => (showDescription = !showDescription)}
+				><Fa icon={faQuestion} /></button
+			>
 		{/if}
 	</label>
 
-
 	{#if description && showDescription}
-		<div	class="card text-sm text-gray-500 p-2 mb-2">{@html description}</div>
+		<div class="card text-sm text-gray-500 p-2 mb-2">{@html description}</div>
 	{/if}
 	<slot />
 	<div class="min-h-5">
-	<span class="text-xs text-error-600 ">
-	{#if feedback}
-			<ul>
-				{#each feedback as message}
-					<li>{message}</li>
-				{/each}
-			</ul>
+		<span class="text-xs text-error-600">
+			{#if feedback}
+				<ul>
+					{#each feedback as message}
+						<li>{message}</li>
+					{/each}
+				</ul>
 			{/if}
 		</span>
 	</div>

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

@@ -32,10 +32,10 @@
 
 	$: value = '';
 	$: updateTarget(value);
-	$: target, setValue(target);
+	$: (target, setValue(target));
 
 	let groupBy;
-	$: groupBy = itemGroup ? (item) => item[itemGroup] : undefined; 
+	$: groupBy = itemGroup ? (item) => item[itemGroup] : undefined;
 
 	const dispatch = createEventDispatcher();
 
@@ -47,8 +47,6 @@
 			return;
 		}
 
-		
-
 		//console.log('update');
 		//different cases
 		//a) source is complex model is simple return array
@@ -151,28 +149,23 @@
 		if (!isMulti) {
 			//console.log("onmount",complexSource,complexTarget,value,target)
 			if (!complexSource && !complexTarget) {
-
-
-				if(groupBy) { // if groupby is set, the value needs to be set as object with label and value, otherwise the select component does not recognize the value
+				if (groupBy) {
+					// if groupby is set, the value needs to be set as object with label and value, otherwise the select component does not recognize the value
+					value = {
+						value: t,
+						label: t
+					};
+				} else //	if there is no groupby, the value can be set as simple value, otherwise the select component does not recognize the value
+				{
+					if (t === null || t === undefined || t === '') {
+						value = '';
+					} else {
 						value = {
-								value: t,
-								label: t
-							};
+							value: t,
+							label: t
+						};
 					}
-					else //	if there is no groupby, the value can be set as simple value, otherwise the select component does not recognize the value
-					{
-							if(t === null || t === undefined || t === '') {
-									value = ''
-								}
-								else
-								{
-									value = {
-										value: t,
-										label: t
-									};
-								}
-					}
-				
+				}
 			}
 
 			if (complexSource && complexTarget) {
@@ -304,13 +297,22 @@
 			target = '';
 		}
 
-		dispatch('clear', e)
-
+		dispatch('clear', e);
 	}
-	
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
+<InputContainer
+	{id}
+	label={title}
+	{feedback}
+	{required}
+	{help}
+	{description}
+	{showDescription}
+	{showIcon}
+	on:showDescription
+	on:hideDescription
+>
 	<Select
 		{id}
 		items={source}
@@ -320,7 +322,6 @@
 		multiple={isMulti}
 		bind:value
 		{placeholder}
-
 		hasError={invalid}
 		{loading}
 		{clearable}