@bexis2/bexis2-core-ui 0.4.102 → 0.4.103

package/README.md

@@ -1,5 +1,9 @@
 # bexis-core-ui
-## 0.4.101
+## 0.4.103
+- Big Table
+  - fix DB communication 
+
+## 0.4.102
 - NumericInput
   - add integerOnly flag to prevent add numbers instead of integers
 

package/dist/components/Table/TableContent.svelte

@@ -59,6 +59,7 @@ let {
 } = config;
 const clientDb = config.clientDb ?? false;
 const clientDbSeedData = config.clientDbSeedData ?? [];
+const clientDbRefresh = config.clientDbRefresh ?? null;
 const initialServerCount = Number(config.__initialServerCount ?? 0);
 let searchValue = "";
 let isFetching = false;
@@ -425,7 +426,8 @@ onMount(async () => {
         clientDbInitSource = [];
         const result = await updateTableWithParams();
         return result;
-      }).catch(() => {
+      }).catch((err) => {
+        console.error("ClientDB init failed:", err);
         clientDbReady = false;
       });
     } else if (!_clientDbInstance) {
@@ -438,6 +440,11 @@ onMount(async () => {
 });
 $: serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
 $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => col.id);
+let lastRefresh = 0;
+$: if (clientDbEnabled && clientDbRefresh && $clientDbRefresh !== lastRefresh) {
+  lastRefresh = $clientDbRefresh;
+  updateTableWithParams();
+}
 </script>
 
 <div class="grid gap-2 overflow-auto" class:w-fit={!fitToScreen} class:w-full={fitToScreen}>

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

@@ -1,7 +1,9 @@
+export function openDB(name: any): Promise<any>;
 export default class ClientDB {
     constructor(tableId: any);
     tableId: any;
     db: any;
+    _ensureDB(): Promise<any>;
     init(rows: any): Promise<{
         tableId: any;
         count: any;
@@ -18,5 +20,8 @@ export default class ClientDB {
         total: number;
     }>;
     clear(): Promise<void>;
+    ensureIndex(columnName: any): Promise<void>;
+    getByIndex(columnName: any, value: any): Promise<any>;
+    put(record: any): Promise<any>;
     destroy(): void;
 }

package/dist/components/Table/clientDB.js

@@ -1,16 +1,46 @@
 // Simple client-side DB wrapper using IndexedDB directly (no worker)
 const DB_PREFIX = 'table-db-';
 
-function openDB(name) {
+export function openDB(name) {
+  const dbName = DB_PREFIX + name;
   return new Promise((resolve, reject) => {
-    const req = indexedDB.open(DB_PREFIX + name);
+    const req = indexedDB.open(dbName);
     req.onupgradeneeded = () => {
       const db = req.result;
       if (!db.objectStoreNames.contains('rows')) {
         db.createObjectStore('rows', { keyPath: '__id', autoIncrement: true });
       }
     };
-    req.onsuccess = () => resolve(req.result);
+    req.onsuccess = () => {
+      const db = req.result;
+
+      db.onversionchange = () => {
+        db.close();
+      };
+
+      if (!db.objectStoreNames.contains('rows')) {
+        const currentVersion = db.version;
+        db.close();
+        const upgradeReq = indexedDB.open(dbName, currentVersion + 1);
+        upgradeReq.onupgradeneeded = () => {
+          const upgradeDb = upgradeReq.result;
+          if (!upgradeDb.objectStoreNames.contains('rows')) {
+            upgradeDb.createObjectStore('rows', { keyPath: '__id', autoIncrement: true });
+          }
+        };
+        upgradeReq.onsuccess = () => {
+          const result = upgradeReq.result;
+          result.onversionchange = () => {
+            result.close();
+          };
+          resolve(result);
+        };
+        upgradeReq.onerror = () => reject(upgradeReq.error);
+        upgradeReq.onblocked = () => reject(new Error(`IndexedDB upgrade blocked for "${dbName}" — close other tabs using this database`));
+      } else {
+        resolve(db);
+      }
+    };
     req.onerror = () => reject(req.error);
   });
 }
@@ -137,8 +167,21 @@ export default class ClientDB {
     this.db = null;
   }
 
+  async _ensureDB() {
+    if (this.db) {
+      return this.db;
+    }
+    this.db = await openDB(this.tableId);
+    const dbInstance = this.db;
+    dbInstance.onversionchange = () => {
+      dbInstance.close();
+      this.db = null;
+    };
+    return this.db;
+  }
+
   async init(rows) {
-    this.db = this.db || (await openDB(this.tableId));
+    await this._ensureDB();
     await clearStore(this.db);
 
     const CHUNK = 1000;
@@ -153,7 +196,7 @@ export default class ClientDB {
   }
 
   async query({ q = '', filters = [], order = [], offset = 0, limit = 100 } = {}) {
-    this.db = this.db || (await openDB(this.tableId));
+    await this._ensureDB();
 
     const tx = this.db.transaction('rows', 'readonly');
     const store = tx.objectStore('rows');
@@ -223,10 +266,77 @@ export default class ClientDB {
   }
 
   async clear() {
-    this.db = this.db || (await openDB(this.tableId));
+    await this._ensureDB();
     await clearStore(this.db);
   }
 
+  async ensureIndex(columnName) {
+    const indexName = `__r.by${columnName}`;
+    await this._ensureDB();
+
+    const exists = await new Promise((resolve, reject) => {
+      const tx = this.db.transaction('rows', 'readonly');
+      const store = tx.objectStore('rows');
+      resolve(store.indexNames.contains(indexName));
+      tx.onerror = () => reject(tx.error);
+    });
+
+    if (exists) return;
+
+    const dbName = DB_PREFIX + this.tableId;
+    const currentVersion = this.db.version;
+    this.db.close();
+    this.db = null;
+
+    await new Promise((resolve, reject) => {
+      const upgradeReq = indexedDB.open(dbName, currentVersion + 1);
+      upgradeReq.onupgradeneeded = (event) => {
+        const upgradeDb = event.target.result;
+        const store = event.target.transaction.objectStore('rows');
+        if (!store.indexNames.contains(indexName)) {
+          store.createIndex(indexName, `__r.${columnName}`);
+        }
+      };
+      upgradeReq.onsuccess = () => {
+        upgradeReq.result.close();
+        resolve();
+      };
+      upgradeReq.onerror = () => reject(upgradeReq.error);
+      upgradeReq.onblocked = () =>
+        reject(new Error(`IndexedDB upgrade blocked for "${dbName}" — close other tabs using this database`));
+    });
+
+    await this._ensureDB();
+  }
+
+  async getByIndex(columnName, value) {
+    await this._ensureDB();
+    const indexName = `__r.by${columnName}`;
+
+    return new Promise((resolve, reject) => {
+      const tx = this.db.transaction('rows', 'readonly');
+      const store = tx.objectStore('rows');
+      if (!store.indexNames.contains(indexName)) {
+        resolve(undefined);
+        return;
+      }
+      const req = store.index(indexName).getAll(value);
+      req.onsuccess = () => resolve(req.result[0]);
+      req.onerror = () => resolve(undefined);
+    });
+  }
+
+  async put(record) {
+    await this._ensureDB();
+    return new Promise((resolve, reject) => {
+      const tx = this.db.transaction('rows', 'readwrite');
+      const store = tx.objectStore('rows');
+      const req = store.put(record);
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => reject(req.error);
+    });
+  }
+
   destroy() {
     if (this.db) {
       this.db.close();

package/dist/css/themes/theme-bexis2.css_old

@@ -0,0 +1,100 @@
+[data-theme='bexis2theme'] {
+	/* =~= Theme Properties =~= */
+	--base-font-family: system-ui;
+	--base-font-color: var(--color-surface-900);
+	--base-font-color-dark: 255 255 255;
+	/*--theme-rounded-base: 4px;
+	--theme-rounded-container: 4px;
+	--theme-border-base: 1px;*/
+	--radius-base: 4px;
+	--radius-container: 4px;
+	--default-border-width: 1px;
+	--default-divide-width: 1px;
+	--default-ring-width: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 255 255 255;
+	--on-secondary: 255 255 255;
+	--on-tertiary: 0 0 0;
+	--on-success: 255 255 255;
+	--on-warning: 255 255 255;
+	--on-error: 255 255 255;
+	--on-surface: 0 0 0;
+	/* =~= Theme Colors  =~= */
+	/* primary | #45b2a1 */
+	--color-primary-50: #e3f3f1;
+	--color-primary-100: #daf0ec;
+	--color-primary-200: #d1ece8;
+	--color-primary-300: #b5e0d9;
+	--color-primary-400: #7dc9bd;
+	--color-primary-500: #45b2a1;
+	--color-primary-600: #3ea091;
+	--color-primary-700: #348679;
+	--color-primary-800: #296b61;
+	--color-primary-900: #22574f;
+	/* secondary | #ff9700 */
+	--color-secondary-50: #ffefd9;
+	--color-secondary-100: #ffeacc;
+	--color-secondary-200: #ffe5bf;
+	--color-secondary-300: #ffd599;
+	--color-secondary-400: #ffb64d;
+	--color-secondary-500: #ff9700;
+	--color-secondary-600: #e68800;
+	--color-secondary-700: #bf7100;
+	--color-secondary-800: #995b00;
+	--color-secondary-900: #7d4a00;
+	/* tertiary | #bee1da */
+	--color-tertiary-50: #f5fbf9;
+	--color-tertiary-100: #f2f9f8;
+	--color-tertiary-200: #eff8f6;
+	--color-tertiary-300: #e5f3f0;
+	--color-tertiary-400: #d2eae5;
+	--color-tertiary-500: #bee1da;
+	--color-tertiary-600: #abcbc4;
+	--color-tertiary-700: #8fa9a4;
+	--color-tertiary-800: #728783;
+	--color-tertiary-900: #5d6e6b;
+	/* success | #4BB543 */
+	--color-success-50: #e4f4e3;
+	--color-success-100: #dbf0d9;
+	--color-success-200: #d2edd0;
+	--color-success-300: #b7e1b4;
+	--color-success-400: #81cb7b;
+	--color-success-500: #4bb543;
+	--color-success-600: #44a33c;
+	--color-success-700: #388832;
+	--color-success-800: #2d6d28;
+	--color-success-900: #255921;
+	/* warning | #EAB308 */
+	--color-warning-50: #fcf4da;
+	--color-warning-100: #fbf0ce;
+	--color-warning-200: #faecc1;
+	--color-warning-300: #f7e19c;
+	--color-warning-400: #f0ca52;
+	--color-warning-500: #eab308;
+	--color-warning-600: #d3a107;
+	--color-warning-700: #b08606;
+	--color-warning-800: #8c6b05;
+	--color-warning-900: #735804;
+	/* error | #FF0000 */
+	--color-error-50: #ffd9d9;
+	--color-error-100: #ffcccc;
+	--color-error-200: #ffbfbf;
+	--color-error-300: #ff9999;
+	--color-error-400: #ff4d4d;
+	--color-error-500: #ff0000;
+	--color-error-600: #e60000;
+	--color-error-700: #bf0000;
+	--color-error-800: #990000;
+	--color-error-900: #7d0000;
+	/* surface | #c7c7c7 */
+	--color-surface-50: #f7f7f7;
+	--color-surface-100: #f4f4f4;
+	--color-surface-200: #f1f1f1;
+	--color-surface-300: #e9e9e9;
+	--color-surface-400: #d8d8d8;
+	--color-surface-500: #c7c7c7;
+	--color-surface-600: #b3b3b3;
+	--color-surface-700: #959595;
+	--color-surface-800: #777777;
+	--color-surface-900: #626262;
+}

package/dist/index.d.ts

@@ -43,6 +43,7 @@ export { Notification };
 export { TablePlaceholder };
 export { positionType, pageContentLayoutType, decimalCharacterType, orientationType, textMarkerType, textSeperatorType } from './models/Enums';
 export { Table, TableFilter, columnFilter, searchFilter };
+export { default as ClientDB } from './components/Table/clientDB.js';
 export { Facets };
 export type { FacetGroup, FacetOption, SelectedFacetGroup };
 export { CodeEditor };

package/dist/index.js

@@ -58,6 +58,7 @@ export { TablePlaceholder };
 export { positionType, pageContentLayoutType, decimalCharacterType, orientationType, textMarkerType, textSeperatorType } from './models/Enums';
 // Table
 export { Table, TableFilter, columnFilter, searchFilter };
+export { default as ClientDB } from './components/Table/clientDB.js';
 // Facets
 export { Facets };
 // CodeEditor

package/dist/themes/theme-bexis2 copy.d.ts

@@ -0,0 +1,2 @@
+import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
+export declare const bexis2theme: CustomThemeConfig;

package/dist/themes/theme-bexis2 copy.js

@@ -0,0 +1,112 @@
+export const bexis2theme = {
+    name: 'bexis2theme',
+    properties: {
+        // =~= Theme Properties =~=
+        '--theme-font-family-base': `system-ui`,
+        '--theme-font-family-heading': `system-ui`,
+        '--theme-font-color-base': 'var(--color-surface-900)',
+        '--theme-font-color-dark': '#ffffff',
+        '--theme-rounded-base': '4px',
+        '--theme-rounded-container': '4px',
+        '--theme-border-base': '1px',
+        // =~= Theme On-X Colors =~=
+        '--on-primary': '255 255 255',
+        '--on-secondary': '255 255 255',
+        '--on-tertiary': '0 0 0',
+        '--on-success': '255 255 255',
+        '--on-warning': '255 255 255',
+        '--on-error': '255 255 255',
+        '--on-surface': '255 255 255',
+        // =~= Theme Colors  =~=
+        // primary | #45b2a1
+        '--color-primary-50': '#e3f3f1',
+        '--color-primary-100': '#daf0ec',
+        '--color-primary-200': '#d1ece8',
+        '--color-primary-300': '#b5e0d9',
+        '--color-primary-400': '#7dc9bd',
+        '--color-primary-500': '#45b2a1',
+        '--color-primary-600': '#3ea091',
+        '--color-primary-700': '#348679',
+        '--color-primary-800': '#296b61',
+        '--color-primary-900': '#22574f',
+        // secondary | #ff9700
+        '--color-secondary-50': '#ffefd9',
+        '--color-secondary-100': '#ffeacc',
+        '--color-secondary-200': '#ffe5bf',
+        '--color-secondary-300': '#ffd599',
+        '--color-secondary-400': '#ffb64d',
+        '--color-secondary-500': '#ff9700',
+        '--color-secondary-600': '#e68800',
+        '--color-secondary-700': '#bf7100',
+        '--color-secondary-800': '#995b00',
+        '--color-secondary-900': '#7d4a00',
+        // tertiary | #bee1da
+        '--color-tertiary-50': '#f5fbf9',
+        '--color-tertiary-100': '#f2f9f8',
+        '--color-tertiary-200': '#eff8f6',
+        '--color-tertiary-300': '#e5f3f0',
+        '--color-tertiary-400': '#d2eae5',
+        '--color-tertiary-500': '#bee1da',
+        '--color-tertiary-600': '#abcbc4',
+        '--color-tertiary-700': '#8fa9a4',
+        '--color-tertiary-800': '#728783',
+        '--color-tertiary-900': '#5d6e6b',
+        // success | #4BB543
+        '--color-success-50': '#e4f4e3',
+        '--color-success-100': '#dbf0d9',
+        '--color-success-200': '#d2edd0',
+        '--color-success-300': '#b7e1b4',
+        '--color-success-400': '#81cb7b',
+        '--color-success-500': '#4bb543',
+        '--color-success-600': '#44a33c',
+        '--color-success-700': '#388832',
+        '--color-success-800': '#2d6d28',
+        '--color-success-900': '#255921',
+        // warning | #EAB308
+        '--color-warning-50': '#fcf4da',
+        '--color-warning-100': '#fbf0ce',
+        '--color-warning-200': '#faecc1',
+        '--color-warning-300': '#f7e19c',
+        '--color-warning-400': '#f0ca52',
+        '--color-warning-500': '#eab308',
+        '--color-warning-600': '#d3a107',
+        '--color-warning-700': '#b08606',
+        '--color-warning-800': '#8c6b05',
+        '--color-warning-900': '#735804',
+        // error | #FF0000
+        '--color-error-50': '#ffd9d9',
+        '--color-error-100': '#ffcccc',
+        '--color-error-200': '#ffbfbf',
+        '--color-error-300': '#ff9999',
+        '--color-error-400': '#ff4d4d',
+        '--color-error-500': '#ff0000',
+        '--color-error-600': '#e60000',
+        '--color-error-700': '#bf0000',
+        '--color-error-800': '#990000',
+        '--color-error-900': '#7d0000',
+        // surface | #c7c7c7
+        '--color-surface-50': '#f7f7f7',
+        '--color-surface-100': '#f4f4f4',
+        '--color-surface-200': '#f1f1f1',
+        '--color-surface-300': '#e9e9e9',
+        '--color-surface-400': '#d8d8d8',
+        '--color-surface-500': '#c7c7c7',
+        '--color-surface-600': '#b3b3b3',
+        '--color-surface-700': '#959595',
+        '--color-surface-800': '#777777',
+        '--color-surface-900': '#626262'
+    },
+    properties_dark: {
+        // surface | #2e2e2e
+        '--color-surface-50': '#e0e0e0',
+        '--color-surface-100': '#d5d5d5',
+        '--color-surface-200': '#cbcbcb',
+        '--color-surface-300': '#ababab',
+        '--color-surface-400': '#6d6d6d',
+        '--color-surface-500': '#2e2e2e',
+        '--color-surface-600': '#292929',
+        '--color-surface-700': '#232323',
+        '--color-surface-800': '#1c1c1c',
+        '--color-surface-900': '#171717'
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bexis2/bexis2-core-ui",
-	"version": "0.4.102",
+	"version": "0.4.103",
 	"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/TableContent.svelte

@@ -56,6 +56,7 @@
 	// `clientDb` is optional and may not be part of the `TableConfig` type
 	const clientDb = (config as any).clientDb ?? false;
 	const clientDbSeedData = (config as any).clientDbSeedData ?? [];
+	const clientDbRefresh = (config as any).clientDbRefresh ?? null;
 	const initialServerCount = Number((config as any).__initialServerCount ?? 0);
 
 	let searchValue = '';
@@ -529,9 +530,10 @@
 						const result = await updateTableWithParams();
 						return result;
 					})
-					.catch(() => {
-						clientDbReady = false;
-					});
+				.catch((err) => {
+					console.error('ClientDB init failed:', err);
+					clientDbReady = false;
+				});
 			} else if (!_clientDbInstance) {
 				_clientDbInstance = new ClientDB(tableId);
 			}
@@ -544,6 +546,11 @@
 	});
 	$: serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
 	$: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => col.id);
+	let lastRefresh = 0;
+	$: if (clientDbEnabled && clientDbRefresh && $clientDbRefresh !== lastRefresh) {
+		lastRefresh = $clientDbRefresh;
+		updateTableWithParams();
+	}
 </script>
 
 <div class="grid gap-2 overflow-auto" class:w-fit={!fitToScreen} class:w-full={fitToScreen}>

package/src/lib/components/Table/clientDB.js

@@ -1,16 +1,46 @@
 // Simple client-side DB wrapper using IndexedDB directly (no worker)
 const DB_PREFIX = 'table-db-';
 
-function openDB(name) {
+export function openDB(name) {
+  const dbName = DB_PREFIX + name;
   return new Promise((resolve, reject) => {
-    const req = indexedDB.open(DB_PREFIX + name);
+    const req = indexedDB.open(dbName);
     req.onupgradeneeded = () => {
       const db = req.result;
       if (!db.objectStoreNames.contains('rows')) {
         db.createObjectStore('rows', { keyPath: '__id', autoIncrement: true });
       }
     };
-    req.onsuccess = () => resolve(req.result);
+    req.onsuccess = () => {
+      const db = req.result;
+
+      db.onversionchange = () => {
+        db.close();
+      };
+
+      if (!db.objectStoreNames.contains('rows')) {
+        const currentVersion = db.version;
+        db.close();
+        const upgradeReq = indexedDB.open(dbName, currentVersion + 1);
+        upgradeReq.onupgradeneeded = () => {
+          const upgradeDb = upgradeReq.result;
+          if (!upgradeDb.objectStoreNames.contains('rows')) {
+            upgradeDb.createObjectStore('rows', { keyPath: '__id', autoIncrement: true });
+          }
+        };
+        upgradeReq.onsuccess = () => {
+          const result = upgradeReq.result;
+          result.onversionchange = () => {
+            result.close();
+          };
+          resolve(result);
+        };
+        upgradeReq.onerror = () => reject(upgradeReq.error);
+        upgradeReq.onblocked = () => reject(new Error(`IndexedDB upgrade blocked for "${dbName}" — close other tabs using this database`));
+      } else {
+        resolve(db);
+      }
+    };
     req.onerror = () => reject(req.error);
   });
 }
@@ -137,8 +167,21 @@ export default class ClientDB {
     this.db = null;
   }
 
+  async _ensureDB() {
+    if (this.db) {
+      return this.db;
+    }
+    this.db = await openDB(this.tableId);
+    const dbInstance = this.db;
+    dbInstance.onversionchange = () => {
+      dbInstance.close();
+      this.db = null;
+    };
+    return this.db;
+  }
+
   async init(rows) {
-    this.db = this.db || (await openDB(this.tableId));
+    await this._ensureDB();
     await clearStore(this.db);
 
     const CHUNK = 1000;
@@ -153,7 +196,7 @@ export default class ClientDB {
   }
 
   async query({ q = '', filters = [], order = [], offset = 0, limit = 100 } = {}) {
-    this.db = this.db || (await openDB(this.tableId));
+    await this._ensureDB();
 
     const tx = this.db.transaction('rows', 'readonly');
     const store = tx.objectStore('rows');
@@ -223,10 +266,77 @@ export default class ClientDB {
   }
 
   async clear() {
-    this.db = this.db || (await openDB(this.tableId));
+    await this._ensureDB();
     await clearStore(this.db);
   }
 
+  async ensureIndex(columnName) {
+    const indexName = `__r.by${columnName}`;
+    await this._ensureDB();
+
+    const exists = await new Promise((resolve, reject) => {
+      const tx = this.db.transaction('rows', 'readonly');
+      const store = tx.objectStore('rows');
+      resolve(store.indexNames.contains(indexName));
+      tx.onerror = () => reject(tx.error);
+    });
+
+    if (exists) return;
+
+    const dbName = DB_PREFIX + this.tableId;
+    const currentVersion = this.db.version;
+    this.db.close();
+    this.db = null;
+
+    await new Promise((resolve, reject) => {
+      const upgradeReq = indexedDB.open(dbName, currentVersion + 1);
+      upgradeReq.onupgradeneeded = (event) => {
+        const upgradeDb = event.target.result;
+        const store = event.target.transaction.objectStore('rows');
+        if (!store.indexNames.contains(indexName)) {
+          store.createIndex(indexName, `__r.${columnName}`);
+        }
+      };
+      upgradeReq.onsuccess = () => {
+        upgradeReq.result.close();
+        resolve();
+      };
+      upgradeReq.onerror = () => reject(upgradeReq.error);
+      upgradeReq.onblocked = () =>
+        reject(new Error(`IndexedDB upgrade blocked for "${dbName}" — close other tabs using this database`));
+    });
+
+    await this._ensureDB();
+  }
+
+  async getByIndex(columnName, value) {
+    await this._ensureDB();
+    const indexName = `__r.by${columnName}`;
+
+    return new Promise((resolve, reject) => {
+      const tx = this.db.transaction('rows', 'readonly');
+      const store = tx.objectStore('rows');
+      if (!store.indexNames.contains(indexName)) {
+        resolve(undefined);
+        return;
+      }
+      const req = store.index(indexName).getAll(value);
+      req.onsuccess = () => resolve(req.result[0]);
+      req.onerror = () => resolve(undefined);
+    });
+  }
+
+  async put(record) {
+    await this._ensureDB();
+    return new Promise((resolve, reject) => {
+      const tx = this.db.transaction('rows', 'readwrite');
+      const store = tx.objectStore('rows');
+      const req = store.put(record);
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => reject(req.error);
+    });
+  }
+
   destroy() {
     if (this.db) {
       this.db.close();

package/src/lib/css/themes/theme-bexis2.css_old

@@ -0,0 +1,100 @@
+[data-theme='bexis2theme'] {
+	/* =~= Theme Properties =~= */
+	--base-font-family: system-ui;
+	--base-font-color: var(--color-surface-900);
+	--base-font-color-dark: 255 255 255;
+	/*--theme-rounded-base: 4px;
+	--theme-rounded-container: 4px;
+	--theme-border-base: 1px;*/
+	--radius-base: 4px;
+	--radius-container: 4px;
+	--default-border-width: 1px;
+	--default-divide-width: 1px;
+	--default-ring-width: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 255 255 255;
+	--on-secondary: 255 255 255;
+	--on-tertiary: 0 0 0;
+	--on-success: 255 255 255;
+	--on-warning: 255 255 255;
+	--on-error: 255 255 255;
+	--on-surface: 0 0 0;
+	/* =~= Theme Colors  =~= */
+	/* primary | #45b2a1 */
+	--color-primary-50: #e3f3f1;
+	--color-primary-100: #daf0ec;
+	--color-primary-200: #d1ece8;
+	--color-primary-300: #b5e0d9;
+	--color-primary-400: #7dc9bd;
+	--color-primary-500: #45b2a1;
+	--color-primary-600: #3ea091;
+	--color-primary-700: #348679;
+	--color-primary-800: #296b61;
+	--color-primary-900: #22574f;
+	/* secondary | #ff9700 */
+	--color-secondary-50: #ffefd9;
+	--color-secondary-100: #ffeacc;
+	--color-secondary-200: #ffe5bf;
+	--color-secondary-300: #ffd599;
+	--color-secondary-400: #ffb64d;
+	--color-secondary-500: #ff9700;
+	--color-secondary-600: #e68800;
+	--color-secondary-700: #bf7100;
+	--color-secondary-800: #995b00;
+	--color-secondary-900: #7d4a00;
+	/* tertiary | #bee1da */
+	--color-tertiary-50: #f5fbf9;
+	--color-tertiary-100: #f2f9f8;
+	--color-tertiary-200: #eff8f6;
+	--color-tertiary-300: #e5f3f0;
+	--color-tertiary-400: #d2eae5;
+	--color-tertiary-500: #bee1da;
+	--color-tertiary-600: #abcbc4;
+	--color-tertiary-700: #8fa9a4;
+	--color-tertiary-800: #728783;
+	--color-tertiary-900: #5d6e6b;
+	/* success | #4BB543 */
+	--color-success-50: #e4f4e3;
+	--color-success-100: #dbf0d9;
+	--color-success-200: #d2edd0;
+	--color-success-300: #b7e1b4;
+	--color-success-400: #81cb7b;
+	--color-success-500: #4bb543;
+	--color-success-600: #44a33c;
+	--color-success-700: #388832;
+	--color-success-800: #2d6d28;
+	--color-success-900: #255921;
+	/* warning | #EAB308 */
+	--color-warning-50: #fcf4da;
+	--color-warning-100: #fbf0ce;
+	--color-warning-200: #faecc1;
+	--color-warning-300: #f7e19c;
+	--color-warning-400: #f0ca52;
+	--color-warning-500: #eab308;
+	--color-warning-600: #d3a107;
+	--color-warning-700: #b08606;
+	--color-warning-800: #8c6b05;
+	--color-warning-900: #735804;
+	/* error | #FF0000 */
+	--color-error-50: #ffd9d9;
+	--color-error-100: #ffcccc;
+	--color-error-200: #ffbfbf;
+	--color-error-300: #ff9999;
+	--color-error-400: #ff4d4d;
+	--color-error-500: #ff0000;
+	--color-error-600: #e60000;
+	--color-error-700: #bf0000;
+	--color-error-800: #990000;
+	--color-error-900: #7d0000;
+	/* surface | #c7c7c7 */
+	--color-surface-50: #f7f7f7;
+	--color-surface-100: #f4f4f4;
+	--color-surface-200: #f1f1f1;
+	--color-surface-300: #e9e9e9;
+	--color-surface-400: #d8d8d8;
+	--color-surface-500: #c7c7c7;
+	--color-surface-600: #b3b3b3;
+	--color-surface-700: #959595;
+	--color-surface-800: #777777;
+	--color-surface-900: #626262;
+}

package/src/lib/index.ts

@@ -113,6 +113,7 @@ export {
 
 // Table
 export { Table, TableFilter, columnFilter, searchFilter };
+export { default as ClientDB } from './components/Table/clientDB.js';
 
 // Facets
 export { Facets };

package/src/lib/themes/theme-bexis2 copy.ts

@@ -0,0 +1,114 @@
+import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
+
+export const bexis2theme: CustomThemeConfig = {
+	name: 'bexis2theme',
+	properties: {
+		// =~= Theme Properties =~=
+		'--theme-font-family-base': `system-ui`,
+		'--theme-font-family-heading': `system-ui`,
+		'--theme-font-color-base': 'var(--color-surface-900)',
+		'--theme-font-color-dark': '#ffffff',
+		'--theme-rounded-base': '4px',
+		'--theme-rounded-container': '4px',
+		'--theme-border-base': '1px',
+		// =~= Theme On-X Colors =~=
+		'--on-primary': '255 255 255',
+		'--on-secondary': '255 255 255',
+		'--on-tertiary': '0 0 0',
+		'--on-success': '255 255 255',
+		'--on-warning': '255 255 255',
+		'--on-error': '255 255 255',
+		'--on-surface': '255 255 255',
+		// =~= Theme Colors  =~=
+		// primary | #45b2a1
+		'--color-primary-50': '#e3f3f1',
+		'--color-primary-100': '#daf0ec',
+		'--color-primary-200': '#d1ece8',
+		'--color-primary-300': '#b5e0d9',
+		'--color-primary-400': '#7dc9bd',
+		'--color-primary-500': '#45b2a1',
+		'--color-primary-600': '#3ea091',
+		'--color-primary-700': '#348679',
+		'--color-primary-800': '#296b61',
+		'--color-primary-900': '#22574f',
+		// secondary | #ff9700
+		'--color-secondary-50': '#ffefd9',
+		'--color-secondary-100': '#ffeacc',
+		'--color-secondary-200': '#ffe5bf',
+		'--color-secondary-300': '#ffd599',
+		'--color-secondary-400': '#ffb64d',
+		'--color-secondary-500': '#ff9700',
+		'--color-secondary-600': '#e68800',
+		'--color-secondary-700': '#bf7100',
+		'--color-secondary-800': '#995b00',
+		'--color-secondary-900': '#7d4a00',
+		// tertiary | #bee1da
+		'--color-tertiary-50': '#f5fbf9',
+		'--color-tertiary-100': '#f2f9f8',
+		'--color-tertiary-200': '#eff8f6',
+		'--color-tertiary-300': '#e5f3f0',
+		'--color-tertiary-400': '#d2eae5',
+		'--color-tertiary-500': '#bee1da',
+		'--color-tertiary-600': '#abcbc4',
+		'--color-tertiary-700': '#8fa9a4',
+		'--color-tertiary-800': '#728783',
+		'--color-tertiary-900': '#5d6e6b',
+		// success | #4BB543
+		'--color-success-50': '#e4f4e3',
+		'--color-success-100': '#dbf0d9',
+		'--color-success-200': '#d2edd0',
+		'--color-success-300': '#b7e1b4',
+		'--color-success-400': '#81cb7b',
+		'--color-success-500': '#4bb543',
+		'--color-success-600': '#44a33c',
+		'--color-success-700': '#388832',
+		'--color-success-800': '#2d6d28',
+		'--color-success-900': '#255921',
+		// warning | #EAB308
+		'--color-warning-50': '#fcf4da',
+		'--color-warning-100': '#fbf0ce',
+		'--color-warning-200': '#faecc1',
+		'--color-warning-300': '#f7e19c',
+		'--color-warning-400': '#f0ca52',
+		'--color-warning-500': '#eab308',
+		'--color-warning-600': '#d3a107',
+		'--color-warning-700': '#b08606',
+		'--color-warning-800': '#8c6b05',
+		'--color-warning-900': '#735804',
+		// error | #FF0000
+		'--color-error-50': '#ffd9d9',
+		'--color-error-100': '#ffcccc',
+		'--color-error-200': '#ffbfbf',
+		'--color-error-300': '#ff9999',
+		'--color-error-400': '#ff4d4d',
+		'--color-error-500': '#ff0000',
+		'--color-error-600': '#e60000',
+		'--color-error-700': '#bf0000',
+		'--color-error-800': '#990000',
+		'--color-error-900': '#7d0000',
+		// surface | #c7c7c7
+		'--color-surface-50': '#f7f7f7',
+		'--color-surface-100': '#f4f4f4',
+		'--color-surface-200': '#f1f1f1',
+		'--color-surface-300': '#e9e9e9',
+		'--color-surface-400': '#d8d8d8',
+		'--color-surface-500': '#c7c7c7',
+		'--color-surface-600': '#b3b3b3',
+		'--color-surface-700': '#959595',
+		'--color-surface-800': '#777777',
+		'--color-surface-900': '#626262'
+	},
+	properties_dark: {
+		// surface | #2e2e2e
+		'--color-surface-50': '#e0e0e0',
+		'--color-surface-100': '#d5d5d5',
+		'--color-surface-200': '#cbcbcb',
+		'--color-surface-300': '#ababab',
+		'--color-surface-400': '#6d6d6d',
+		'--color-surface-500': '#2e2e2e',
+		'--color-surface-600': '#292929',
+		'--color-surface-700': '#232323',
+		'--color-surface-800': '#1c1c1c',
+		'--color-surface-900': '#171717'
+	}
+};