@bexis2/bexis2-core-ui 0.4.98 → 0.4.100

package/README.md

@@ -1,5 +1,12 @@
 # bexis-core-ui
 
+## 0.4.100
+- Big Table
+  - support DB changes
+
+## 0.4.99
+- Support label and titel in each form component
+
 ## 0.4.98
 - Table:
    - fix column read detection

package/dist/components/Table/TableContent.svelte

@@ -68,6 +68,7 @@ const serverSide = server !== void 0 || clientDb;
 let _clientDbInstance = null;
 let clientDbEnabled = clientDb;
 let clientDbReady = false;
+let clientDbInitPromise = null;
 let clientDbInitSource = [];
 let clientDbSeedSize = 0;
 const { sendModel = new Send() } = server ?? {};
@@ -298,6 +299,9 @@ const sortServer = (order, id) => {
 const updateTableWithParams = async () => {
   if (clientDbEnabled) {
     isFetching = true;
+    if (!clientDbReady && clientDbInitPromise) {
+      await clientDbInitPromise;
+    }
     const filtersNormalized = utils.normalizeFilters($filters);
     const q = sendModel?.q || "";
     const offset2 = $pageSize * $pageIndex;
@@ -305,106 +309,6 @@ const updateTableWithParams = async () => {
     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,
@@ -516,10 +420,10 @@ onMount(async () => {
       serverItems?.set(clientDbInitSource.length);
       data.set(firstPage);
       _clientDbInstance = new ClientDB(tableId);
-      _clientDbInstance.init(clientDbInitSource).then(async () => {
-        const result = await updateTableWithParams();
+      clientDbInitPromise = _clientDbInstance.init(clientDbInitSource).then(async () => {
         clientDbReady = true;
         clientDbInitSource = [];
+        const result = await updateTableWithParams();
         return result;
       }).catch(() => {
         clientDbReady = false;

package/dist/components/Table/clientDB.js

@@ -3,7 +3,7 @@ const DB_PREFIX = 'table-db-';
 
 function openDB(name) {
   return new Promise((resolve, reject) => {
-    const req = indexedDB.open(DB_PREFIX + name, 1);
+    const req = indexedDB.open(DB_PREFIX + name);
     req.onupgradeneeded = () => {
       const db = req.result;
       if (!db.objectStoreNames.contains('rows')) {

package/dist/components/Table/tableWorker.js

@@ -4,7 +4,7 @@ const DB_PREFIX = 'table-db-';
 
 function openDB(name) {
   return new Promise((resolve, reject) => {
-    const req = indexedDB.open(DB_PREFIX + name, 1);
+    const req = indexedDB.open(DB_PREFIX + name);
     req.onupgradeneeded = () => {
       const db = req.result;
       if (!db.objectStoreNames.contains('rows')) {

package/dist/components/form/Checkbox.svelte

@@ -1,17 +1,27 @@
 <script>import InputContainer from "./InputContainer.svelte";
 export let id = "";
 export let label = "";
+export let title = "";
 export let checked = false;
 export let valid;
 export let invalid;
 export let required;
 export let feedback;
 export let description = "";
+$: {
+  if ((!label || label.trim() === "") && title && title.trim() !== "") {
+    label = title;
+  } else if ((!title || title.trim() === "") && label && label.trim() !== "") {
+    title = label;
+  }
+}
 </script>
 
+
 <InputContainer {label} {feedback} {required} {description}>
 	<input
 		{id}
+		{title}
 		class="input variant-form-material bg-zinc-50 dark:bg-zinc-50"
 		type="checkbox"
 		class:input-success={valid}

package/dist/components/form/Checkbox.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         id?: string;
         label?: string;
+        title?: string;
         checked?: boolean;
         valid: boolean;
         invalid: boolean;

package/dist/components/form/CheckboxKvPList.svelte

@@ -3,19 +3,28 @@ export let id;
 export let source;
 export let target;
 export let title;
+export let label;
 export let description = "";
 export let key;
 export let help = false;
 export let vertical = false;
+$: {
+  if ((!label || label.trim() === "") && title && title.trim() !== "") {
+    label = title;
+  } else if ((!title || title.trim() === "") && label && label.trim() !== "") {
+    title = label;
+  }
+}
 let required = false;
 export let feedback;
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description}>
+<InputContainer {id} {label} {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
+				 {title}
 					class="checkbox"
 					type="checkbox"
 					bind:group={target}

package/dist/components/form/CheckboxKvPList.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         source: any;
         target: any;
         title: any;
+        label: any;
         description?: string;
         key: any;
         help?: boolean;

package/dist/components/form/CheckboxList.svelte

@@ -2,13 +2,21 @@
 export let source;
 export let target;
 export let title;
+export let label;
 export let description = "";
 export let key;
+$: {
+  if ((!label || label.trim() === "") && title && title.trim() !== "") {
+    label = title;
+  } else if ((!title || title.trim() === "") && label && label.trim() !== "") {
+    title = label;
+  }
+}
 export let required = false;
 export let feedback;
 </script>
 
-<InputContainer label={title} {feedback} {required} {description}>
+<InputContainer {label} {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} />

package/dist/components/form/CheckboxList.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         source: any;
         target: any;
         title: any;
+        label: any;
         description?: string;
         key: any;
         required?: boolean;

package/dist/components/form/DateInput.svelte

@@ -1,6 +1,7 @@
 <script>import InputContainer from "./InputContainer.svelte";
 export let id = "";
 export let label = "";
+export let title = "";
 export let value = "";
 export let valid = false;
 export let invalid = false;
@@ -11,6 +12,13 @@ export let disabled = false;
 export let description = "";
 export let showDescription = false;
 export let showIcon = false;
+$: {
+  if ((!label || label.trim() === "") && title && title.trim() !== "") {
+    label = title;
+  } else if ((!title || title.trim() === "") && label && label.trim() !== "") {
+    title = label;
+  }
+}
 </script>
 
 <InputContainer
@@ -27,6 +35,7 @@ export let showIcon = false;
 >
 	<input
 		{id}
+		{title}
 		class="input variant-form-material bg-zinc-50 dark:bg-zinc-700 placeholder:text-gray-400"
 		type="date"
 		class:input-success={valid}

package/dist/components/form/DateInput.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         id?: string;
         label?: string;
+        title?: string;
         value?: string;
         valid?: boolean;
         invalid?: boolean;

package/dist/components/form/DatePickerInput.svelte

@@ -4,6 +4,7 @@ import InputContainer from "./InputContainer.svelte";
 import SveltyPicker from "svelty-picker";
 export let id = "";
 export let label = "";
+export let title = "";
 export let value = "";
 export let valid = false;
 export let invalid = false;
@@ -31,6 +32,13 @@ if (mode === "datetime" && (format === "yyyy-mm-dd" || displayFormat === "yyyy-m
 if (mode === "datetime") {
   width = "w-64";
 }
+$: {
+  if ((!label || label.trim() === "") && title && title.trim() !== "") {
+    label = title;
+  } else if ((!title || title.trim() === "") && label && label.trim() !== "") {
+    title = label;
+  }
+}
 </script>
 
 <InputContainer

package/dist/components/form/DatePickerInput.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         id?: string;
         label?: string;
+        title?: string;
         value?: string;
         valid?: boolean;
         invalid?: boolean;

package/dist/components/form/Dropdown.svelte

@@ -5,6 +5,7 @@
 	export let source;
 	export let target;
 	export let title;
+	export	let label;
 	export let valid = false;
 	export let invalid = false;
 	export let feedback = [''];
@@ -27,11 +28,21 @@
 	function updatedTarget(value) {
 		target = value;
 	}
+
+	$: {
+	if ((!label || label.trim() === '') && title && title.trim() !== '') {
+		label = title;
+	} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
+		title = label;
+	}
+}
+
+
 </script>
 
 <InputContainer
 	{id}
-	label={title}
+	{label}
 	{feedback}
 	{required}
 	{help}
@@ -43,6 +54,7 @@
 >
 	<select
 		{id}
+		{title}
 		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		class:input-success={valid}
 		class:input-error={invalid}

package/dist/components/form/Dropdown.svelte.d.ts

@@ -5,6 +5,7 @@ export default class Dropdown extends SvelteComponent<{
     id: any;
     target: any;
     title: any;
+    label: any;
     source: any;
     description?: string | undefined;
     showDescription?: boolean | undefined;
@@ -32,6 +33,7 @@ declare const __propDef: {
         id: any;
         target: any;
         title: any;
+        label: any;
         source: any;
         description?: string | undefined;
         showDescription?: boolean | undefined;

package/dist/components/form/DropdownKvP.svelte

@@ -5,6 +5,7 @@
 	export let source;
 	export let target;
 	export let title;
+	export let label;
 	export let valid = false;
 	export let invalid = false;
 	export let feedback = [''];
@@ -36,11 +37,20 @@
 			target = id;
 		}
 	}
+
+	$: {
+	if ((!label || label.trim() === '') && title && title.trim() !== '') {
+		label = title;
+	} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
+		title = label;
+	}
+}
+
 </script>
 
 <InputContainer
 	{id}
-	label={title}
+	{label}
 	{feedback}
 	{required}
 	{help}
@@ -52,6 +62,7 @@
 >
 	<select
 		{id}
+		{title}
 		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		class:input-success={valid}
 		class:input-error={invalid}

package/dist/components/form/DropdownKvP.svelte.d.ts

@@ -5,6 +5,7 @@ export default class DropdownKvP extends SvelteComponent<{
     id: any;
     target: any;
     title: any;
+    label: any;
     source: any;
     description?: string | undefined;
     showDescription?: boolean | undefined;
@@ -33,6 +34,7 @@ declare const __propDef: {
         id: any;
         target: any;
         title: any;
+        label: any;
         source: any;
         description?: string | undefined;
         showDescription?: boolean | undefined;

package/dist/components/form/MultiSelect.svelte

@@ -9,6 +9,7 @@
 	export let target;
 	export let id;
 	export let title;
+	export	let label;
 	export let itemId = 'value';
 	export let itemLabel = 'label';
 	export let itemGroup = '';
@@ -30,6 +31,15 @@
 
 	let isLoaded = false;
 
+	$: {
+	if ((!label || label.trim() === '') && title && title.trim() !== '') {
+		label = title;
+	} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
+		title = label;
+	}
+}
+
+
 	$: value = '';
 	$: updateTarget(value);
 	$: (target, setValue(target));
@@ -303,7 +313,7 @@
 
 <InputContainer
 	{id}
-	label={title}
+	{label}
 	{feedback}
 	{required}
 	{help}

package/dist/components/form/MultiSelect.svelte.d.ts

@@ -5,6 +5,7 @@ export default class MultiSelect extends SvelteComponent<{
     id: any;
     target: any;
     title: any;
+    label: any;
     source: any;
     description?: string | undefined;
     showDescription?: boolean | undefined;
@@ -49,6 +50,7 @@ declare const __propDef: {
         id: any;
         target: any;
         title: any;
+        label: any;
         source: any;
         description?: string | undefined;
         showDescription?: boolean | undefined;

package/dist/components/form/NumberInput.svelte

@@ -3,6 +3,7 @@ import { helpStore } from "../../stores/pageStores";
 import { convertServerColumns } from "../Table/utils";
 export let id = "";
 export let label = "";
+export let title = "";
 export let value = "";
 export let valid = false;
 export let invalid = false;
@@ -16,6 +17,13 @@ export let showDescription = false;
 export let showIcon = false;
 export let min = void 0;
 export let max = void 0;
+$: {
+  if ((!label || label.trim() === "") && title && title.trim() !== "") {
+    label = title;
+  } else if ((!title || title.trim() === "") && label && label.trim() !== "") {
+    title = label;
+  }
+}
 $: if (max != void 0 && parseInt(value) > max) {
   value = max.toString();
 }
@@ -38,6 +46,7 @@ $: if (min != void 0 && parseInt(value) < min) {
 >
 	<input
 		{id}
+		{title}
 		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		type="number"
 		class:input-success={valid}

package/dist/components/form/NumberInput.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         id?: string;
         label?: string;
+        title?: string;
         value?: string;
         valid?: boolean;
         invalid?: boolean;

package/dist/components/form/TextArea.svelte

@@ -1,6 +1,7 @@
 <script>import InputContainer from "./InputContainer.svelte";
 export let id = "";
 export let label = "";
+export let title = "";
 export let value = "";
 export let valid = false;
 export let invalid = false;
@@ -12,6 +13,13 @@ export let disabled = false;
 export let description = "";
 export let showDescription = false;
 export let showIcon = false;
+$: {
+  if ((!label || label.trim() === "") && title && title.trim() !== "") {
+    label = title;
+  } else if ((!title || title.trim() === "") && label && label.trim() !== "") {
+    title = label;
+  }
+}
 </script>
 
 <InputContainer
@@ -28,6 +36,7 @@ export let showIcon = false;
 >
 	<textarea
 		{id}
+		{title}
 		class="textarea variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		class:input-success={valid}
 		class:input-error={invalid}

package/dist/components/form/TextArea.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         id?: string;
         label?: string;
+        title?: string;
         value?: string;
         valid?: boolean;
         invalid?: boolean;

package/dist/components/form/TextInput.svelte

@@ -1,6 +1,7 @@
 <script>import InputContainer from "./InputContainer.svelte";
 export let id = "";
 export let label = "";
+export let title = "";
 export let value = "";
 export let valid = false;
 export let invalid = false;
@@ -12,6 +13,13 @@ export let disabled = false;
 export let description = "";
 export let showDescription = false;
 export let showIcon = false;
+$: {
+  if ((!label || label.trim() === "") && title && title.trim() !== "") {
+    label = title;
+  } else if ((!title || title.trim() === "") && label && label.trim() !== "") {
+    title = label;
+  }
+}
 </script>
 
 <InputContainer
@@ -28,6 +36,7 @@ export let showIcon = false;
 >
 	<input
 		{id}
+		{title}
 		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		type="text"
 		class:input-success={valid}

package/dist/components/form/TextInput.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         id?: string;
         label?: string;
+        title?: string;
         value?: string;
         valid?: boolean;
         invalid?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bexis2/bexis2-core-ui",
-	"version": "0.4.98",
+	"version": "0.4.100",
 	"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

@@ -67,6 +67,7 @@
 	let _clientDbInstance: any = null;
 	let clientDbEnabled = clientDb;
 	let clientDbReady = false;
+	let clientDbInitPromise: Promise<any> | null = null;
 	let clientDbInitSource: any[] = [];
 	let clientDbSeedSize = 0;
 	const { sendModel = new Send() } = server ?? {};
@@ -367,6 +368,9 @@
 		// If we're using a client-side DB (worker + IndexedDB), route queries there
 		if (clientDbEnabled) {
 			isFetching = true;
+			if (!clientDbReady && clientDbInitPromise) {
+				await clientDbInitPromise;
+			}
 			const filtersNormalized = utils.normalizeFilters($filters);
 			const q = sendModel?.q || '';
 			const offset = $pageSize * $pageIndex;
@@ -376,116 +380,6 @@
 				_clientDbInstance = new ClientDB(tableId);
 			}
 
-			if (!clientDbReady) {
-				// Fallback while DB is still importing: apply local search/filter/sort for responsiveness.
-				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 as any).getTime();
-						const vDate = new Date(val as any).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(offset, offset + limit);
-				serverItems?.set(filtered.length);
-				data.set(localRows);
-				isFetching = false;
-				return { rows: localRows, total: filtered.length };
-			}
-
 			const res = await _clientDbInstance.query({
 				q,
 				filters: filtersNormalized,
@@ -626,13 +520,13 @@
 				data.set(firstPage);
 
 				_clientDbInstance = new ClientDB(tableId);
-				_clientDbInstance
+				clientDbInitPromise = _clientDbInstance
 					.init(clientDbInitSource)
 					.then(async () => {
-						// Only mark ready and release seed after the first DB-backed query succeeds.
-						const result = await updateTableWithParams();
 						clientDbReady = true;
+						// Release the seed before refreshing so paging and filtering always query IndexedDB.
 						clientDbInitSource = [];
+						const result = await updateTableWithParams();
 						return result;
 					})
 					.catch(() => {

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

@@ -3,7 +3,7 @@ const DB_PREFIX = 'table-db-';
 
 function openDB(name) {
   return new Promise((resolve, reject) => {
-    const req = indexedDB.open(DB_PREFIX + name, 1);
+    const req = indexedDB.open(DB_PREFIX + name);
     req.onupgradeneeded = () => {
       const db = req.result;
       if (!db.objectStoreNames.contains('rows')) {

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

@@ -4,7 +4,7 @@ const DB_PREFIX = 'table-db-';
 
 function openDB(name) {
   return new Promise((resolve, reject) => {
-    const req = indexedDB.open(DB_PREFIX + name, 1);
+    const req = indexedDB.open(DB_PREFIX + name);
     req.onupgradeneeded = () => {
       const db = req.result;
       if (!db.objectStoreNames.contains('rows')) {

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

@@ -3,6 +3,7 @@
 
 	export let id: string = '';
 	export let label: string = '';
+	export let title: string = '';
 	export let checked: boolean = false;
 
 	export let valid: boolean;
@@ -10,11 +11,24 @@
 	export let required: boolean;
 	export let feedback: [];
 	export let description: string = '';
+
+$: {
+	if ((!label || label.trim() === '') && title && title.trim() !== '') {
+		label = title;
+	} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
+		title = label;
+	}
+}
+
+
+
 </script>
 
+
 <InputContainer {label} {feedback} {required} {description}>
 	<input
 		{id}
+		{title}
 		class="input variant-form-material bg-zinc-50 dark:bg-zinc-50"
 		type="checkbox"
 		class:input-success={valid}

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

@@ -5,20 +5,30 @@
 	export let source;
 	export let target;
 	export let title;
+	export let label
 	export let description = '';
 	export let key;
 	export let help = false;
 	export let vertical = false;
 
+	$: {
+	if ((!label || label.trim() === '') && title && title.trim() !== '') {
+		label = title;
+	} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
+		title = label;
+	}
+}
+
 	let required = false;
 	export let feedback: [];
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description}>
+<InputContainer {id} {label} {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
+				 {title}
 					class="checkbox"
 					type="checkbox"
 					bind:group={target}

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

@@ -4,14 +4,24 @@
 	export let source;
 	export let target;
 	export let title;
+	export let label;
 	export let description = '';
 	export let key;
 
+	$: {
+	if ((!label || label.trim() === '') && title && title.trim() !== '') {
+		label = title;
+	} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
+		title = label;
+	}
+}
+
+
 	export let required = false;
 	export let feedback: [];
 </script>
 
-<InputContainer label={title} {feedback} {required} {description}>
+<InputContainer {label} {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} />

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

@@ -3,6 +3,7 @@
 
 	export let id: string = '';
 	export let label: string = '';
+	export let title: string = '';
 	export let value: string = '';
 	export let valid: boolean = false;
 	export let invalid: boolean = false;
@@ -13,6 +14,16 @@
 	export let description: string = '';
 	export let showDescription: boolean = false;
 	export let showIcon: boolean = false;
+
+	$: {
+	if ((!label || label.trim() === '') && title && title.trim() !== '') {
+		label = title;
+	} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
+		title = label;
+	}
+}
+
+
 </script>
 
 <InputContainer
@@ -29,6 +40,7 @@
 >
 	<input
 		{id}
+		{title}
 		class="input variant-form-material bg-zinc-50 dark:bg-zinc-700 placeholder:text-gray-400"
 		type="date"
 		class:input-success={valid}

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

@@ -6,6 +6,7 @@
 
 	export let id: string = '';
 	export let label: string = '';
+	export let title: string = '';
 	export let value: string = '';
 	export let valid: boolean = false;
 	export let invalid: boolean = false;
@@ -37,6 +38,15 @@
 	if (mode === 'datetime') {
 		width = 'w-64';
 	}
+
+	$: {
+	if ((!label || label.trim() === '') && title && title.trim() !== '') {
+		label = title;
+	} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
+		title = label;
+	}
+}
+
 </script>
 
 <InputContainer

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

@@ -5,6 +5,7 @@
 	export let source;
 	export let target;
 	export let title;
+	export	let label;
 	export let valid = false;
 	export let invalid = false;
 	export let feedback = [''];
@@ -27,11 +28,21 @@
 	function updatedTarget(value) {
 		target = value;
 	}
+
+	$: {
+	if ((!label || label.trim() === '') && title && title.trim() !== '') {
+		label = title;
+	} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
+		title = label;
+	}
+}
+
+
 </script>
 
 <InputContainer
 	{id}
-	label={title}
+	{label}
 	{feedback}
 	{required}
 	{help}
@@ -43,6 +54,7 @@
 >
 	<select
 		{id}
+		{title}
 		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		class:input-success={valid}
 		class:input-error={invalid}

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

@@ -5,6 +5,7 @@
 	export let source;
 	export let target;
 	export let title;
+	export let label;
 	export let valid = false;
 	export let invalid = false;
 	export let feedback = [''];
@@ -36,11 +37,20 @@
 			target = id;
 		}
 	}
+
+	$: {
+	if ((!label || label.trim() === '') && title && title.trim() !== '') {
+		label = title;
+	} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
+		title = label;
+	}
+}
+
 </script>
 
 <InputContainer
 	{id}
-	label={title}
+	{label}
 	{feedback}
 	{required}
 	{help}
@@ -52,6 +62,7 @@
 >
 	<select
 		{id}
+		{title}
 		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		class:input-success={valid}
 		class:input-error={invalid}

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

@@ -9,6 +9,7 @@
 	export let target;
 	export let id;
 	export let title;
+	export	let label;
 	export let itemId = 'value';
 	export let itemLabel = 'label';
 	export let itemGroup = '';
@@ -30,6 +31,15 @@
 
 	let isLoaded = false;
 
+	$: {
+	if ((!label || label.trim() === '') && title && title.trim() !== '') {
+		label = title;
+	} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
+		title = label;
+	}
+}
+
+
 	$: value = '';
 	$: updateTarget(value);
 	$: (target, setValue(target));
@@ -303,7 +313,7 @@
 
 <InputContainer
 	{id}
-	label={title}
+	{label}
 	{feedback}
 	{required}
 	{help}

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

@@ -5,6 +5,7 @@
 
 	export let id: string = '';
 	export let label: string = '';
+	export let title: string = '';
 	export let value: string = '';
 
 	export let valid: boolean = false;
@@ -20,6 +21,14 @@
 	export let min: number | undefined = undefined;
 	export let max: number | undefined = undefined;
 
+	$: {
+	if ((!label || label.trim() === '') && title && title.trim() !== '') {
+		label = title;
+	} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
+		title = label;
+	}
+}
+	
 	// Diese Zeile wird jedes Mal ausgeführt, wenn sich "menge" ändert
 	$: if (max != undefined && parseInt(value) > max) {
 		value = max.toString();
@@ -44,6 +53,7 @@
 >
 	<input
 		{id}
+		{title}
 		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		type="number"
 		class:input-success={valid}

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

@@ -3,6 +3,7 @@
 
 	export let id: string = '';
 	export let label: string = '';
+	export	let title: string = '';
 	export let value: string = '';
 
 	export let valid: boolean = false;
@@ -15,6 +16,14 @@
 	export let description: string = '';
 	export let showDescription: boolean = false;
 	export let showIcon: boolean = false;
+
+		$: {
+	if ((!label || label.trim() === '') && title && title.trim() !== '') {
+		label = title;
+	} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
+		title = label;
+	}
+}
 </script>
 
 <InputContainer
@@ -31,6 +40,7 @@
 >
 	<textarea
 		{id}
+		{title}
 		class="textarea variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		class:input-success={valid}
 		class:input-error={invalid}

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

@@ -3,6 +3,7 @@
 
 	export let id: string = '';
 	export let label: string = '';
+	export	let title: string = '';
 	export let value: string = '';
 	export let valid: boolean = false;
 	export let invalid: boolean = false;
@@ -14,6 +15,15 @@
 	export let description: string = '';
 	export let showDescription: boolean = false;
 	export let showIcon: boolean = false;
+
+$: {
+	if ((!label || label.trim() === '') && title && title.trim() !== '') {
+		label = title;
+	} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
+		title = label;
+	}
+}
+
 </script>
 
 <InputContainer
@@ -30,6 +40,7 @@
 >
 	<input
 		{id}
+		{title}
 		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		type="text"
 		class:input-success={valid}