@bexis2/bexis2-core-ui 0.4.96 → 0.4.97

package/dist/components/Table/clientDB.js

@@ -0,0 +1,236 @@
+// Simple client-side DB wrapper using IndexedDB directly (no worker)
+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);
+  });
+}
+
+function clearStore(db) {
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction('rows', 'readwrite');
+    const store = tx.objectStore('rows');
+    const req = store.clear();
+    req.onsuccess = () => resolve(undefined);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+function bulkInsert(db, rows) {
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction('rows', 'readwrite');
+    const store = tx.objectStore('rows');
+    for (let i = 0; i < rows.length; i++) {
+      store.add({ __r: rows[i] });
+    }
+    tx.oncomplete = () => resolve(undefined);
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+function matches(rowObj, q, filters) {
+  const row = rowObj.__r || rowObj;
+
+  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;
+  }
+
+  const normalizeKey = (k) => String(k || '').replaceAll('%%%', '.');
+  const getValue = (column) => {
+    const dot = normalizeKey(column);
+    return row[dot] ?? row[column] ?? row[dot.replaceAll('.', '%%%')];
+  };
+
+  const asComparableNumber = (v) => {
+    if (typeof v === 'number') return v;
+    if (typeof v === 'bigint') return Number(v);
+    const n = Number(v);
+    return Number.isNaN(n) ? null : n;
+  };
+
+  const asTime = (v) => {
+    if (v instanceof Date) return v.getTime();
+    const d = new Date(v);
+    const t = d.getTime();
+    return Number.isNaN(t) ? null : t;
+  };
+
+  if (filters && filters.length > 0) {
+    for (const f of filters) {
+      const op = f.filterBy;
+      const val = f.value;
+      const actual = getValue(f.column);
+      if (val == null) continue;
+
+      const aStr = String(actual ?? '').toLowerCase();
+      const vStr = String(val ?? '').toLowerCase();
+      const aNum = asComparableNumber(actual);
+      const vNum = asComparableNumber(val);
+      const aDate = asTime(actual);
+      const vDate = asTime(val);
+
+      if (op === 'c' && !aStr.includes(vStr)) return false;
+      if (op === 'nc' && aStr.includes(vStr)) return false;
+      if (op === 'sw' && !aStr.startsWith(vStr)) return false;
+      if (op === 'ew' && !aStr.endsWith(vStr)) return false;
+
+      if (op === 'e' && actual != val) return false;
+      if (op === 'ne' && actual == val) return false;
+
+      if (op === 'gt') {
+        if (aNum == null || vNum == null || !(aNum > vNum)) return false;
+      }
+      if (op === 'lt') {
+        if (aNum == null || vNum == null || !(aNum < vNum)) return false;
+      }
+      if (op === 'gte') {
+        if (aNum == null || vNum == null || !(aNum >= vNum)) return false;
+      }
+      if (op === 'lte') {
+        if (aNum == null || vNum == null || !(aNum <= vNum)) return false;
+      }
+
+      if (op === 'o') {
+        if (aDate == null || vDate == null || aDate !== vDate) return false;
+      }
+      if (op === 'sf' || op === 'a') {
+        if (aDate == null || vDate == null || !(aDate > vDate || aDate === vDate)) return false;
+      }
+      if (op === 'u' || op === 'b') {
+        if (aDate == null || vDate == null || !(aDate < vDate || aDate === vDate)) return false;
+      }
+      if (op === 'no') {
+        if (aDate == null || vDate == null || aDate === vDate) return false;
+      }
+    }
+  }
+
+  return true;
+}
+
+export default class ClientDB {
+  constructor(tableId) {
+    this.tableId = tableId;
+    this.db = null;
+  }
+
+  async init(rows) {
+    this.db = this.db || (await openDB(this.tableId));
+    await clearStore(this.db);
+
+    const CHUNK = 1000;
+    for (let i = 0; i < rows.length; i += CHUNK) {
+      const chunk = rows.slice(i, i + CHUNK);
+      await bulkInsert(this.db, chunk);
+      // Yield to keep the UI responsive while importing
+      await new Promise((r) => setTimeout(r, 0));
+    }
+
+    return { tableId: this.tableId, count: rows.length };
+  }
+
+  async query({ q = '', filters = [], order = [], offset = 0, limit = 100 } = {}) {
+    this.db = this.db || (await openDB(this.tableId));
+
+    const tx = this.db.transaction('rows', 'readonly');
+    const store = tx.objectStore('rows');
+    const req = store.openCursor();
+
+    const matched = [];
+
+    await new Promise((resolve, reject) => {
+      req.onsuccess = (evt) => {
+        const cursor = evt.target.result;
+        if (!cursor) {
+          resolve(undefined);
+          return;
+        }
+
+        const rec = cursor.value;
+        if (matches(rec, q, filters)) {
+          matched.push(rec.__r || rec);
+        }
+
+        cursor.continue();
+      };
+      req.onerror = () => reject(req.error);
+    });
+
+    const getValue = (row, column) => {
+      const dot = String(column || '').replaceAll('%%%', '.');
+      return row[dot] ?? row[column] ?? row[dot.replaceAll('.', '%%%')];
+    };
+
+    if (order && order.length > 0) {
+      const { column, direction } = order[0];
+      const dir = direction === 'desc' ? -1 : 1;
+      matched.sort((a, b) => {
+        const av = getValue(a, column);
+        const bv = getValue(b, column);
+
+        if (av == null && bv == null) return 0;
+        if (av == null) return -1 * dir;
+        if (bv == null) return 1 * dir;
+
+        if (typeof av === 'number' && typeof bv === 'number') {
+          return (av - bv) * dir;
+        }
+
+        if (typeof av === 'bigint' || typeof bv === 'bigint') {
+          const ai = BigInt(av);
+          const bi = BigInt(bv);
+          if (ai === bi) return 0;
+          return ai > bi ? dir : -dir;
+        }
+
+        const ad = new Date(av).getTime();
+        const bd = new Date(bv).getTime();
+        if (!Number.isNaN(ad) && !Number.isNaN(bd)) {
+          return (ad - bd) * dir;
+        }
+
+        return String(av).localeCompare(String(bv)) * dir;
+      });
+    }
+
+    const total = matched.length;
+    const rows = matched.slice(offset, offset + limit);
+
+    return { tableId: this.tableId, rows, total };
+  }
+
+  async clear() {
+    this.db = this.db || (await openDB(this.tableId));
+    await clearStore(this.db);
+  }
+
+  destroy() {
+    if (this.db) {
+      this.db.close();
+      this.db = null;
+    }
+  }
+}

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"