@bexis2/bexis2-core-ui 0.4.96 → 0.4.98

package/dist/components/Table/filter.js

@@ -67,7 +67,11 @@ const applyFilter = (filterValue, value, filterFn) => {
         value: filterValue[key]
     }));
     filters.forEach((filter) => {
-        result = result && (filter.value !== undefined && filter.value !== '' && filter.value !== null ? 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;
 };

package/dist/components/Table/tableWorker.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Table/tableWorker.js

@@ -0,0 +1,179 @@
+// @ts-nocheck
+// Lightweight web worker that stores rows in IndexedDB and answers simple queries
+const DB_PREFIX = 'table-db-';
+
+function openDB(name) {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_PREFIX + name, 1);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains('rows')) {
+        db.createObjectStore('rows', { keyPath: '__id', autoIncrement: true });
+      }
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+async function clearStore(db) {
+  return new Promise((res, rej) => {
+    const tx = db.transaction('rows', 'readwrite');
+    const store = tx.objectStore('rows');
+    const r = store.clear();
+    r.onsuccess = () => res(undefined);
+    r.onerror = () => rej(r.error);
+  });
+}
+
+async function bulkInsert(db, rows) {
+  return new Promise((res, rej) => {
+    const tx = db.transaction('rows', 'readwrite');
+    const store = tx.objectStore('rows');
+    for (let i = 0; i < rows.length; i++) {
+      // wrap row to avoid clashes with internal __id
+      const toPut = { __r: rows[i] };
+      store.add(toPut);
+    }
+    tx.oncomplete = () => res(undefined);
+    tx.onerror = () => rej(tx.error);
+  });
+}
+
+function matches(rowObj, q, filters) {
+  const row = rowObj.__r || rowObj;
+  // full text query
+  if (q && q.length > 0) {
+    const ql = String(q).toLowerCase();
+    let found = false;
+    for (const k in row) {
+      const v = row[k];
+      if (v == null) continue;
+      if (typeof v === 'string' && v.toLowerCase().includes(ql)) {
+        found = true;
+        break;
+      }
+      if (typeof v === 'number' && String(v).includes(ql)) {
+        found = true;
+        break;
+      }
+    }
+    if (!found) return false;
+  }
+
+  // simple equality filters: filters is array of {column, filterBy, value}
+  if (filters && filters.length > 0) {
+    for (const f of filters) {
+      const col = (f.column || '').replaceAll('%%%', '.');
+      const val = f.value;
+      const actual = row[col] ?? row[f.column] ?? row[col.replaceAll('.', '%%%')];
+      if (val == null) continue;
+      if (typeof actual === 'string') {
+        if (!String(actual).toLowerCase().includes(String(val).toLowerCase())) return false;
+      } else if (typeof actual === 'number') {
+        if (Number(val) !== actual) return false;
+      } else {
+        if (actual !== val) return false;
+      }
+    }
+  }
+
+  return true;
+}
+
+// handle messages
+let dbs = {};
+let initCounts = {};
+self.addEventListener('message', async (e) => {
+  const { type, payload } = e.data;
+  try {
+    if (type === 'init-start') {
+      const { tableId } = payload;
+      const db = await openDB(tableId);
+      await clearStore(db);
+      dbs[tableId] = db;
+      initCounts[tableId] = 0;
+      postMessage({ type: 'init-ack', payload: { tableId } });
+      return;
+    }
+
+    if (type === 'init-chunk') {
+      const { tableId, rows } = payload;
+      const db = dbs[tableId] || (await openDB(tableId));
+      await bulkInsert(db, rows);
+      initCounts[tableId] = (initCounts[tableId] || 0) + rows.length;
+      postMessage({ type: 'init-progress', payload: { tableId, inserted: initCounts[tableId] } });
+      return;
+    }
+
+    if (type === 'init-done') {
+      const { tableId } = payload;
+      const total = initCounts[tableId] || 0;
+      postMessage({ type: 'inited', payload: { tableId, count: total } });
+      delete initCounts[tableId];
+      return;
+    }
+
+    if (type === 'init') {
+      const { tableId, rows } = payload;
+      const db = await openDB(tableId);
+      await clearStore(db);
+      // insert in chunks to avoid blocking
+      const CHUNK = 1000;
+      for (let i = 0; i < rows.length; i += CHUNK) {
+        const chunk = rows.slice(i, i + CHUNK);
+        await bulkInsert(db, chunk);
+      }
+      dbs[tableId] = db;
+      postMessage({ type: 'inited', payload: { tableId, count: rows.length } });
+    }
+
+    if (type === 'query') {
+      const { tableId, q, filters = [], offset = 0, limit = 100 } = payload;
+      const db = dbs[tableId] || (await openDB(tableId));
+      dbs[tableId] = db;
+
+      const tx = db.transaction('rows', 'readonly');
+      const store = tx.objectStore('rows');
+      const req = store.openCursor();
+
+      const results = [];
+      let total = 0;
+      let skipped = 0;
+
+      await new Promise((res, rej) => {
+        req.onsuccess = (evt) => {
+          const cursor = evt.target.result;
+          if (!cursor) {
+            res();
+            return;
+          }
+          const rec = cursor.value;
+          if (matches(rec, q, filters)) {
+            total++;
+            if (skipped < offset) {
+              skipped++;
+            } else if (results.length < limit) {
+              results.push(rec.__r || rec);
+            }
+          }
+          cursor.continue();
+        };
+        req.onerror = () => rej(req.error);
+      });
+
+      postMessage({ type: 'result', payload: { tableId, rows: results, total } });
+    }
+
+    if (type === 'clear') {
+      const { tableId } = payload;
+      const db = dbs[tableId] || (await openDB(tableId));
+      await clearStore(db);
+      postMessage({ type: 'cleared', payload: { tableId } });
+    }
+  } catch (err) {
+    postMessage({ type: 'error', payload: { message: err?.message ?? String(err) } });
+  }
+});
+
+export {};

package/dist/components/Table/utils.d.ts

@@ -1,6 +1,5 @@
 import { SvelteComponent } from 'svelte';
 import type { Writable } from 'svelte/store';
-import { Receive } from '../../models/Models';
 import type { FilterOptionsEnum } from '../../models/Enums';
 import type { Columns, Filter, OrderBy, ServerColumn, ServerConfig } from '../../models/Models';
 export declare const minWidth: (id: string, columns: Columns | undefined) => number;
@@ -23,7 +22,7 @@ export declare const missingValuesFn: (key: number | string, missingValues: {
 }) => string | number;
 export declare const updateTable: (pageSize: number, pageIndex: number, server: ServerConfig | undefined, filters: {
     [key: string]: { [key in FilterOptionsEnum]?: number | string | Date; };
-}, data: Writable<any[]>, serverItems: Writable<number> | undefined, columns: Columns | undefined, dispatch: any, order?: OrderBy[]) => Promise<Receive | Writable<any[]>>;
+}, data: Writable<any[]>, serverItems: Writable<number> | undefined, columns: Columns | undefined, dispatch: any, order?: OrderBy[]) => Promise<Writable<any[]>>;
 export declare const convertServerColumns: (serverColumns: ServerColumn[], columns: Columns | undefined) => Columns;
 export declare const getMaxCellHeightInRow: (tableRef: HTMLTableElement, resizable: "columns" | "rows" | "none" | "both", optionsComponent: typeof SvelteComponent | undefined, rowHeights: Writable<{
     [key: number]: {

package/dist/components/Table/utils.js

@@ -31,9 +31,7 @@ export const cellStyle = (id, columns) => {
 export const getResizeStyles = (rowHeights, id, index) => {
     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'};
 	`;
 };
@@ -86,7 +84,7 @@ export const jsonToCsv = (data) => {
     // 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');
@@ -154,7 +152,7 @@ export const updateTable = async (pageSize, pageIndex, server, filters, data, se
     // 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;
             }
@@ -190,6 +188,19 @@ export const updateTable = async (pageSize, pageIndex, server, filters, data, se
         }
         return value;
     });
+    const rawCount = response.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) {
@@ -201,8 +212,8 @@ export const updateTable = async (pageSize, pageIndex, server, filters, data, se
             //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('.', "%%%");
+            col.column = col.column.replaceAll('.', '%%%');
+            col.key = col.key.replaceAll('.', '%%%');
             acc[col.key] = col.column;
             //acc[col.column] = col.column;
             return acc;
@@ -212,20 +223,23 @@ export const updateTable = async (pageSize, pageIndex, server, filters, data, se
         response.data.forEach((row, index) => {
             const tmp = {};
             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);
         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 = (serverColumns, columns) => {
@@ -267,13 +281,13 @@ export const convertServerColumns = (serverColumns, columns) => {
             };
         }
         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
             };
         }
@@ -285,6 +299,7 @@ export const convertServerColumns = (serverColumns, columns) => {
 export const getMaxCellHeightInRow = (tableRef, resizable, optionsComponent, rowHeights, tableId, rowHeight) => {
     if (!tableRef || resizable === 'columns' || resizable === 'none')
         return;
+    const measuredHeights = {};
     tableRef.querySelectorAll('tbody tr').forEach((row, index) => {
         const cells = row.querySelectorAll('td');
         let maxHeight = optionsComponent ? 56 : 44;
@@ -299,17 +314,21 @@ export const getMaxCellHeightInRow = (tableRef, resizable, optionsComponent, row
                 minHeight = cellHeight + 2;
             }
         });
-        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 = (tableRef, colWidths, headerRowsLength, resizable) => {

package/dist/components/form/CheckboxKvPList.svelte

@@ -12,19 +12,19 @@ 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/dist/components/form/CheckboxList.svelte

@@ -11,7 +11,7 @@ export let feedback;
 <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/dist/components/form/DateInput.svelte

@@ -13,7 +13,18 @@ export let showDescription = false;
 export let showIcon = 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/dist/components/form/DatePickerInput.svelte

@@ -33,33 +33,55 @@ if (mode === "datetime") {
 }
 </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/dist/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/dist/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/dist/components/form/InputContainer.svelte

@@ -36,33 +36,35 @@ export function onMouseOut() {
 	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>