@bexis2/bexis2-core-ui 0.4.96 → 0.4.98

package/dist/components/Table/TableContent.svelte

@@ -1,5 +1,5 @@
 <script>import { afterUpdate, createEventDispatcher, onDestroy, onMount } from "svelte";
-import { readable, writable } from "svelte/store";
+import { writable } from "svelte/store";
 import Fa from "svelte-fa";
 import { faCompress, faDownload, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { createTable, Subscribe, Render, createRender } from "svelte-headless-table";
@@ -21,6 +21,7 @@ import TableFilterServer from "./TableFilterServer.svelte";
 import TablePagination from "./TablePagination.svelte";
 import TablePaginationServer from "./TablePaginationServer.svelte";
 import ColumnsMenu from "./ColumnsMenu.svelte";
+import ClientDB from "./clientDB.js";
 import * as utils from "./utils";
 import { columnFilter, searchFilter } from "./filter";
 import { Send } from "../../models/Models";
@@ -56,20 +57,27 @@ let {
   // Whether to display the export button and enable export functionality
   server
 } = config;
+const clientDb = config.clientDb ?? false;
+const clientDbSeedData = config.clientDbSeedData ?? [];
+const initialServerCount = Number(config.__initialServerCount ?? 0);
 let searchValue = "";
 let isFetching = false;
 let tableRef;
-const serverSide = server !== void 0;
+let serverItemCountValue = Number.isFinite(initialServerCount) ? initialServerCount : 0;
+const serverSide = server !== void 0 || clientDb;
+let _clientDbInstance = null;
+let clientDbEnabled = clientDb;
+let clientDbReady = false;
+let clientDbInitSource = [];
+let clientDbSeedSize = 0;
 const { sendModel = new Send() } = server ?? {};
 const filters = writable({});
 const dispatch = createEventDispatcher();
 const actionDispatcher = (obj) => dispatch("action", obj);
 const rowHeights = writable({});
 const colWidths = writable([]);
-const serverItems = serverSide ? writable(0) : void 0;
-const serverItemCount = serverSide ? readable(0, (set) => {
-  serverItems.subscribe((val) => set(val));
-}) : void 0;
+const serverItems = serverSide ? writable(Number.isFinite(initialServerCount) ? initialServerCount : 0) : void 0;
+const serverItemCount = serverItems;
 const table = createTable(data, {
   colFilter: addColumnFilters(),
   tableFilter: addTableFilter({
@@ -97,6 +105,16 @@ $data.forEach((item) => {
     }
   });
 });
+if (columns && Object.keys(columns).length > 0) {
+  Object.keys(columns).forEach((key) => {
+    if (optionsComponent !== void 0 && key === "optionsColumn") {
+      return;
+    }
+    if (!allCols[key]) {
+      allCols[key] = {};
+    }
+  });
+}
 Object.keys(allCols).forEach((key) => {
   $filters = { ...$filters, [key]: {} };
 });
@@ -226,10 +244,21 @@ const tableColumns = [
     }
   })
 ];
+const getUniqueOptionsColumnId = () => {
+  const used = new Set(unexcludedColumns.map((col) => String(col)));
+  let id = "optionsColumn";
+  let i = 1;
+  while (used.has(id)) {
+    id = `optionsColumn_${i}`;
+    i += 1;
+  }
+  return id;
+};
 if (optionsComponent !== void 0) {
+  const optionsColumnId = getUniqueOptionsColumnId();
   tableColumns.push(
     table.display({
-      id: "optionsColumn",
+      id: optionsColumnId,
       header: "",
       plugins: {
         export: {
@@ -251,7 +280,7 @@ const { filterValue } = pluginStates.tableFilter;
 const { exportedData } = pluginStates.export;
 const { pageIndex, pageSize } = pluginStates.page;
 const { hiddenColumnIds } = pluginStates.hideColumns;
-let prevSort = void 0;
+let prevSort = [];
 const sortServer = (order, id) => {
   if (!sendModel) throw new Error("Server-side configuration is missing");
   if (order === void 0) {
@@ -259,19 +288,137 @@ const sortServer = (order, id) => {
   } else {
     sendModel.order = [{ column: id, direction: order }];
   }
-  if (JSON.stringify(sendModel.order) !== JSON.stringify(prevSort) && prevSort !== void 0) {
+  if (JSON.stringify(sendModel.order) !== JSON.stringify(prevSort)) {
     $pageIndex = 0;
     $data = [];
     updateTableWithParams();
   }
-  if (order === void 0) {
-    prevSort = [];
-  } else {
-    prevSort = sendModel.order;
-  }
+  prevSort = sendModel.order ? [...sendModel.order] : [];
 };
 const updateTableWithParams = async () => {
-  if ($data.length > 0 && serverSide) {
+  if (clientDbEnabled) {
+    isFetching = true;
+    const filtersNormalized = utils.normalizeFilters($filters);
+    const q = sendModel?.q || "";
+    const offset2 = $pageSize * $pageIndex;
+    const limit = $pageSize;
+    if (!_clientDbInstance) {
+      _clientDbInstance = new ClientDB(tableId);
+    }
+    if (!clientDbReady) {
+      const source = clientDbInitSource.length > 0 ? clientDbInitSource : $data;
+      const getValue = (row, column) => {
+        const dot = String(column || "").replaceAll("%%%", ".");
+        return row[dot] ?? row[column] ?? row[dot.replaceAll(".", "%%%")];
+      };
+      const localMatches = (row) => {
+        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 (String(v).toLowerCase().includes(ql)) {
+              found = true;
+              break;
+            }
+          }
+          if (!found) return false;
+        }
+        for (const f of filtersNormalized) {
+          const actual = getValue(row, f.column);
+          const val = f.value;
+          if (val == null) continue;
+          const aStr = String(actual ?? "").toLowerCase();
+          const vStr = String(val ?? "").toLowerCase();
+          const aNum = Number(actual);
+          const vNum = Number(val);
+          const aDate = new Date(actual).getTime();
+          const vDate = new Date(val).getTime();
+          switch (f.filterBy) {
+            case "c":
+              if (!aStr.includes(vStr)) return false;
+              break;
+            case "nc":
+              if (aStr.includes(vStr)) return false;
+              break;
+            case "sw":
+              if (!aStr.startsWith(vStr)) return false;
+              break;
+            case "ew":
+              if (!aStr.endsWith(vStr)) return false;
+              break;
+            case "e":
+              if (actual != val) return false;
+              break;
+            case "ne":
+              if (actual == val) return false;
+              break;
+            case "gt":
+              if (Number.isNaN(aNum) || Number.isNaN(vNum) || !(aNum > vNum)) return false;
+              break;
+            case "lt":
+              if (Number.isNaN(aNum) || Number.isNaN(vNum) || !(aNum < vNum)) return false;
+              break;
+            case "gte":
+              if (Number.isNaN(aNum) || Number.isNaN(vNum) || !(aNum >= vNum)) return false;
+              break;
+            case "lte":
+              if (Number.isNaN(aNum) || Number.isNaN(vNum) || !(aNum <= vNum)) return false;
+              break;
+            case "o":
+              if (Number.isNaN(aDate) || Number.isNaN(vDate) || aDate !== vDate) return false;
+              break;
+            case "sf":
+            case "a":
+              if (Number.isNaN(aDate) || Number.isNaN(vDate) || !(aDate >= vDate)) return false;
+              break;
+            case "u":
+            case "b":
+              if (Number.isNaN(aDate) || Number.isNaN(vDate) || !(aDate <= vDate)) return false;
+              break;
+            case "no":
+              if (Number.isNaN(aDate) || Number.isNaN(vDate) || aDate === vDate) return false;
+              break;
+          }
+        }
+        return true;
+      };
+      const filtered = source.filter(localMatches);
+      const order = sendModel?.order || [];
+      if (order.length > 0) {
+        const { column, direction } = order[0];
+        const dir = direction === "desc" ? -1 : 1;
+        filtered.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;
+          return String(av).localeCompare(String(bv)) * dir;
+        });
+      }
+      const localRows = filtered.slice(offset2, offset2 + limit);
+      serverItems?.set(filtered.length);
+      data.set(localRows);
+      isFetching = false;
+      return { rows: localRows, total: filtered.length };
+    }
+    const res = await _clientDbInstance.query({
+      q,
+      filters: filtersNormalized,
+      order: sendModel?.order || [],
+      offset: offset2,
+      limit
+    });
+    const payload = res.payload ? res.payload : res;
+    serverItems?.set(payload.total ?? payload.totalCount ?? 0);
+    data.set(payload.rows ?? []);
+    isFetching = false;
+    return payload;
+  }
+  if ($data.length > 0 && serverSide && Number($serverItemCount) > 0) {
     console.log("Table is not empty");
     return;
   }
@@ -332,6 +479,9 @@ afterUpdate(() => {
   if (resizable !== "rows" && resizable !== "both") {
     return;
   }
+  if (!$pageRows || $pageRows.length === 0) {
+    return;
+  }
   const e = tableRef?.querySelector(`#${tableId}-row-${$pageRows[0].id}`);
   if (e) {
     getDimensions();
@@ -340,10 +490,45 @@ afterUpdate(() => {
 onDestroy(() => {
   resizeColumnsObserver.disconnect();
   resizeRowsObserver.disconnect();
+  if (_clientDbInstance) {
+    try {
+      _clientDbInstance.destroy();
+    } catch (e) {
+    }
+  }
 });
 $: sortKeys = pluginStates.sort.sortKeys;
-onMount(() => {
-  if (serverSide) {
+$: serverItemCountValue = clientDbEnabled ? Number($serverItemCount) > 0 ? Math.max(
+  Number($serverItemCount),
+  initialServerCount,
+  clientDbSeedSize,
+  clientDbInitSource.length,
+  $data.length
+) : Math.max(initialServerCount, clientDbSeedSize, clientDbInitSource.length, $data.length) : Number($serverItemCount);
+onMount(async () => {
+  if (clientDbEnabled) {
+    const seed = Array.isArray(clientDbSeedData) ? clientDbSeedData : [];
+    const hasSeed = seed.length > 0;
+    clientDbSeedSize = seed.length;
+    if (hasSeed || $data && $data.length > 0) {
+      clientDbInitSource = hasSeed ? [...seed] : [...$data];
+      const firstPage = clientDbInitSource.slice(0, $pageSize);
+      serverItems?.set(clientDbInitSource.length);
+      data.set(firstPage);
+      _clientDbInstance = new ClientDB(tableId);
+      _clientDbInstance.init(clientDbInitSource).then(async () => {
+        const result = await updateTableWithParams();
+        clientDbReady = true;
+        clientDbInitSource = [];
+        return result;
+      }).catch(() => {
+        clientDbReady = false;
+      });
+    } else if (!_clientDbInstance) {
+      _clientDbInstance = new ClientDB(tableId);
+    }
+  }
+  if (server !== void 0) {
     updateTableWithParams();
   }
 });
@@ -358,14 +543,19 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 			{#if search}
 				<form
 					class="flex gap-2"
-					on:submit|preventDefault={() => {
+					on:submit|preventDefault={async () => {
 						if (serverSide && !sendModel) {
 							throw new Error('Server-side configuration is missing');
 						} else {
 							sendModel.q = searchValue;
 						}
 
+						$pageIndex = 0;
 						$filterValue = searchValue;
+						if (serverSide) {
+							$data = [];
+							await updateTableWithParams();
+						}
 					}}
 				>
 					<div class="relative w-full flex items-center">
@@ -383,15 +573,20 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 							id="{tableId}-searchReset"
 							class="absolute right-3 items-center"
 							aria-label="Clear search"
-							on:click|preventDefault={() => {
+							on:click|preventDefault={async () => {
 								if (serverSide && !sendModel) {
 									throw new Error('Server-side configuration is missing');
 								} else {
 									sendModel.q = '';
 								}
 
+								$pageIndex = 0;
 								searchValue = '';
 								$filterValue = '';
+								if (serverSide) {
+									$data = [];
+									await updateTableWithParams();
+								}
 							}}><Fa icon={faXmark} /></button
 						>
 					</div>
@@ -401,14 +596,19 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 						id="{tableId}-searchSubmit"
 						class="btn variant-filled-primary"
 						aria-label="Search"
-						on:click|preventDefault={() => {
+						on:click|preventDefault={async () => {
 							if (serverSide && !sendModel) {
 								throw new Error('Server-side configuration is missing');
 							} else {
 								sendModel.q = searchValue;
 							}
 
+							$pageIndex = 0;
 							$filterValue = searchValue;
+							if (serverSide) {
+								$data = [];
+								await updateTableWithParams();
+							}
 						}}>Search</button
 					>
 				</form>
@@ -530,7 +730,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 																			? `Remove sorting by ${cell.label} column`
 																			: `Sort by ${cell.label} column in ascending order`}
 															>
-																{cell.render().replaceAll('%%%', '.')}
+																{String(cell.render()).replaceAll('%%%', '.')}
 															</span>
 															<div class="w-2">
 																{#if props.sort.order === 'asc'}
@@ -625,7 +825,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 			<TablePaginationServer
 				pageConfig={pluginStates.page}
 				{pageSizes}
-				itemCount={$serverItemCount}
+				itemCount={serverItemCountValue}
 				updateTable={updateTableWithParams}
 				id={tableId}
 				{data}

package/dist/components/Table/TablePaginationServer.svelte

@@ -7,6 +7,17 @@ export let pageSizes;
 export let id;
 export let updateTable;
 export let data;
+const toCount = (value) => {
+  if (typeof value === "number") return Number.isNaN(value) ? 0 : value;
+  const parsed = Number(String(value ?? "").replace(/[^0-9.-]/g, ""));
+  return Number.isNaN(parsed) ? 0 : parsed;
+};
+const getEffectiveCount = () => {
+  const count = toCount(itemCount);
+  if (count > 0) return count;
+  return Array.isArray($data) ? $data.length : 0;
+};
+let effectiveCount = 0;
 let indexInformation = "";
 const { pageIndex, pageCount, pageSize } = pageConfig;
 let pageSizeDropdownValue = $pageSize;
@@ -17,17 +28,19 @@ const pageSizePopup = {
   closeQuery: ".listbox-item"
 };
 const getIndexInfomationString = () => {
-  return itemCount === 0 ? "No items" : `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
+  const count = effectiveCount;
+  return count === 0 ? "No items" : `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
     ($pageIndex + 1) * $pageSize,
-    itemCount
-  )} of ${Math.min($pageCount * $pageSize, itemCount)}`;
+    count
+  )} of ${count}`;
 };
 function updateTableServer() {
   $data = [];
   updateTable();
 }
+$: effectiveCount = getEffectiveCount();
 $: paginationSettings = {
-  size: itemCount,
+  size: effectiveCount,
   limit: $pageSize,
   page: $pageIndex,
   amounts: pageSizes
@@ -52,9 +65,12 @@ $: $pageCount, $pageIndex, $pageSize, itemCount, indexInformation = getIndexInfo
 				{#each pageSizes as size}
 					<ListBoxItem
 						bind:group={pageSizeDropdownValue}
-						name="medium" value={size}
-						on:click={() => { $pageSize = size;  updateTableServer(); }}
-						>{size}</ListBoxItem
+						name="medium"
+						value={size}
+						on:click={() => {
+							$pageSize = size;
+							updateTableServer();
+						}}>{size}</ListBoxItem
 					>
 				{/each}
 			</ListBox>
@@ -63,7 +79,10 @@ $: $pageCount, $pageIndex, $pageSize, itemCount, indexInformation = getIndexInfo
 	</div>
 	<div class="flex justify-center">
 		<Paginator
-			on:page={(page) => {$pageIndex = page.detail; updateTableServer(); }}
+			on:page={(page) => {
+				$pageIndex = page.detail;
+				updateTableServer();
+			}}
 			settings={paginationSettings}
 			select="hidden"
 			active="!variant-filled-secondary !text-on-secondary-token"

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

@@ -0,0 +1,22 @@
+export default class ClientDB {
+    constructor(tableId: any);
+    tableId: any;
+    db: any;
+    init(rows: any): Promise<{
+        tableId: any;
+        count: any;
+    }>;
+    query({ q, filters, order, offset, limit }?: {
+        q?: string | undefined;
+        filters?: never[] | undefined;
+        order?: never[] | undefined;
+        offset?: number | undefined;
+        limit?: number | undefined;
+    }): Promise<{
+        tableId: any;
+        rows: any[];
+        total: number;
+    }>;
+    clear(): Promise<void>;
+    destroy(): void;
+}

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;
+    }
+  }
+}