@bexis2/bexis2-core-ui 0.4.96 → 0.4.97

package/dist/components/page/menu/MenuSublist.svelte

@@ -54,14 +54,16 @@ async function logOffFn() {
 		<ListBoxItem
 			class="text-md sm:text-sm text-surface-800 py-1 hover:text-secondary-500 bg-transparent hover:bg-surface-200"
 			bind:group={item.Title}
-
 			name="medium"
 			value={item.Title}
-	
 		>
-		<a id={"menu-"+item.Title.replaceAll(' ', '-')}  href={item.Url} target="{item.Target}" class="w-full block" on:click|preventDefault={()=>clickFn(item)}>{item.Title}</a>
-
+			<a
+				id={'menu-' + item.Title.replaceAll(' ', '-')}
+				href={item.Url}
+				target={item.Target}
+				class="w-full block"
+				on:click|preventDefault={() => clickFn(item)}>{item.Title}</a
+			>
 		</ListBoxItem>
-
 	{/each}
 </ListBox>

package/dist/components/page/menu/SettingsBar.svelte

@@ -18,7 +18,10 @@ let popupCombobox = {
 	<div class="sm:hidden">
 		<AccordionItem padding="p-2">
 			<svelte:fragment slot="summary"
-				><button id="settings" class="flex items-center gap-x-1 text-sm text-surface-800 w-5 h-full">
+				><button
+					id="settings"
+					class="flex items-center gap-x-1 text-sm text-surface-800 w-5 h-full"
+				>
 					<span class="capitalize"><Fa icon={faCog} /></span>
 				</button></svelte:fragment
 			>

package/dist/components/toggle/Toggle.svelte

@@ -26,25 +26,25 @@ $: mode;
 
 <div
 	class="lightswitch-track {classesTrack}"
-	on:click={()=>mode=!mode}
+	on:click={() => (mode = !mode)}
 	on:click
-	on:keydown={()=>mode=!mode}
+	on:keydown={() => (mode = !mode)}
 	on:keydown
 	on:keyup
 	on:keypress
 	role="switch"
 	aria-label="Light Switch"
- aria-checked={mode}
+	aria-checked={mode}
 	title="xyz"
 	tabindex="0"
 >
 	<!-- Thumb -->
 	<div class="lightswitch-thumb {classesThumb}">
 		<!-- SVG -->
-  {#if mode}
-  <Fa icon={faPen} color="white" />
-  {:else}
-  <Fa icon={faTrash} />
-  {/if}
+		{#if mode}
+			<Fa icon={faPen} color="white" />
+		{:else}
+			<Fa icon={faTrash} />
+		{/if}
 	</div>
-</div>
+</div>

package/dist/css/core.ui.postcss

@@ -22,7 +22,7 @@ h2 {
 }
 
 input {
-	@apply pb-1 pt-1
+	@apply pb-1 pt-1;
 }
 
 .svelte-select,
@@ -37,4 +37,3 @@ input {
 .list-item .item.hover:not(.active):not(.list-group-title) {
 	@apply dark:!text-black;
 }
-

package/dist/services/Api.js

@@ -11,7 +11,7 @@ const apiRequest = (method, url, request, customHeaders = {}, customConfig = {})
     const requestVerificationToken = csrfToken;
     const headers = {
         authorization: 'Basic ' + btoa(username + ':' + password),
-        '__RequestVerificationToken': requestVerificationToken,
+        __RequestVerificationToken: requestVerificationToken,
         ...customHeaders
     };
     //using the axios instance to perform the request that received from each http method
@@ -27,16 +27,16 @@ const apiRequest = (method, url, request, customHeaders = {}, customConfig = {})
         return Promise.resolve(res);
     })
         .catch((er) => {
-        console.log("🚀 ~ apiRequest ~ err:", er);
+        console.log('🚀 ~ apiRequest ~ err:', er);
         const err = er.response;
         let error = {
             status: err.status,
             statusText: err.statusText,
             error: err.data.error,
-            stackTrace: err.data.stackTrace,
+            stackTrace: err.data.stackTrace
         };
         errorStore.set(error);
-        console.log("🚀 ~ apiRequest ~ error:", error);
+        console.log('🚀 ~ apiRequest ~ error:', error);
         return Promise.reject(new Error(error.error));
     });
 };

package/dist/services/BaseCaller.js

@@ -3,7 +3,7 @@
 import { host } from '../stores/apiStores';
 
 // go to a internal action
-export const goTo = async (url, intern = true, target="_self") => {
+export const goTo = async (url, intern = true, target = '_self') => {
 	if (intern == true) {
 		// go to inside bexis2
 		if (window != null && host != null && url != null) {

package/package.json

@@ -1,116 +1,116 @@
 {
-  "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.96",
-  "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": [
-    "bexis2",
-    "libary"
-  ],
-  "homepage": "https://github.com/BEXIS2/bexis2-core-ui#readme",
-  "bugs": {
-    "url": "https://github.com/BEXIS2/bexis2-core-ui/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/BEXIS2/bexis2-core-ui.git"
-  },
-  "license": "ISC",
-  "author": "David Schöne",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    },
-    "./dist/index.css": {
-      "import": "./dist/index.css",
-      "require": "./dist/index.css"
-    }
-  },
-  "main": "./src/lib/index.d.ts",
-  "types": "./src/lib/index.d.ts",
-  "directories": {
-    "test": "tests"
-  },
-  "files": [
-    "dist",
-    "src/lib"
-  ],
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "build package": "svelte-kit sync && svelte-package --watch",
-    "preview": "vite preview",
-    "test": "playwright test",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test:unit": "vitest",
-    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write .",
-    "check outdated": "npm outdated",
-    "upgrade all": "ncu --upgrade",
-    "0.npm login": "npm login",
-    "1.npm - update package infos": "npm init --scope bexis2",
-    "2.npm - package": "svelte-package",
-    "3.npm - publish": "npm publish --access public"
-  },
-  "dependencies": {
-    "@codemirror/lang-html": "^6.4.9",
-    "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lint": "^6.8.1",
-    "@codemirror/theme-one-dark": "^6.1.2",
-    "@floating-ui/dom": "^1.6.8",
-    "@fortawesome/fontawesome-free": "^6.6.0",
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@fortawesome/free-regular-svg-icons": "^6.6.0",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
-    "@sveltejs/kit": "^2.5.19",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "axios": "^1.7.3",
-    "codemirror": "^6.0.1",
-    "dateformat": "^5.0.3",
-    "delay": "^6.0.0",
-    "dotenv": "^16.4.5",
-    "eslint4b-prebuilt": "^6.7.2",
-    "highlight.js": "^11.10.0",
-    "highlightjs-svelte": "^1.0.6",
-    "svelte": "^4.2.18",
-    "svelte-codemirror-editor": "^1.4.0",
-    "svelte-fa": "^4.0.2",
-    "svelte-file-dropzone": "^2.0.7",
-    "svelte-headless-table": "^0.18.2",
-    "svelty-picker": "^5.2.12",
-    "svelte-select": "5.8.3",
-    "vest": "^5.4.0"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.45.3",
-    "@skeletonlabs/skeleton": "^2.10.2",
-    "@skeletonlabs/tw-plugin": "^0.4.0",
-    "@sveltejs/adapter-auto": "^3.2.2",
-    "@sveltejs/adapter-static": "^3.0.2",
-    "@sveltejs/package": "^2.3.2",
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.13",
-    "@types/node": "^22.0.2",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^8.0.0",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^9.8.0",
-    "eslint-config-prettier": "^9.1.0",
-    "postcss": "^8.4.40",
-    "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.6",
-    "raw-loader": "^4.0.2",
-    "svelte": "^4.2.18",
-    "svelte-check": "^3.8.5",
-    "tailwindcss": "^3.4.7",
-    "tslib": "^2.6.3",
-    "typescript": "^5.5.4",
-    "vite": "^5.3.5",
-    "vitest": "^2.0.5"
-  },
-  "module": "./src/lib/index.ts"
+	"name": "@bexis2/bexis2-core-ui",
+	"version": "0.4.97",
+	"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": [
+		"bexis2",
+		"libary"
+	],
+	"homepage": "https://github.com/BEXIS2/bexis2-core-ui#readme",
+	"bugs": {
+		"url": "https://github.com/BEXIS2/bexis2-core-ui/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/BEXIS2/bexis2-core-ui.git"
+	},
+	"license": "ISC",
+	"author": "David Schöne",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		},
+		"./dist/index.css": {
+			"import": "./dist/index.css",
+			"require": "./dist/index.css"
+		}
+	},
+	"main": "./src/lib/index.d.ts",
+	"types": "./src/lib/index.d.ts",
+	"directories": {
+		"test": "tests"
+	},
+	"files": [
+		"dist",
+		"src/lib"
+	],
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"build package": "svelte-kit sync && svelte-package --watch",
+		"preview": "vite preview",
+		"test": "playwright test",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test:unit": "vitest",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write .",
+		"check outdated": "npm outdated",
+		"upgrade all": "ncu --upgrade",
+		"0.npm login": "npm login",
+		"1.npm - update package infos": "npm init --scope bexis2",
+		"2.npm - package": "svelte-package",
+		"3.npm - publish": "npm publish --access public"
+	},
+	"dependencies": {
+		"@codemirror/lang-html": "^6.4.9",
+		"@codemirror/lang-javascript": "^6.2.2",
+		"@codemirror/lang-json": "^6.0.1",
+		"@codemirror/lint": "^6.8.1",
+		"@codemirror/theme-one-dark": "^6.1.2",
+		"@floating-ui/dom": "^1.6.8",
+		"@fortawesome/fontawesome-free": "^6.6.0",
+		"@fortawesome/fontawesome-svg-core": "^6.6.0",
+		"@fortawesome/free-regular-svg-icons": "^6.6.0",
+		"@fortawesome/free-solid-svg-icons": "^6.6.0",
+		"@sveltejs/kit": "^2.5.19",
+		"@sveltejs/vite-plugin-svelte": "^3.1.1",
+		"axios": "^1.7.3",
+		"codemirror": "^6.0.1",
+		"dateformat": "^5.0.3",
+		"delay": "^6.0.0",
+		"dotenv": "^16.4.5",
+		"eslint4b-prebuilt": "^6.7.2",
+		"highlight.js": "^11.10.0",
+		"highlightjs-svelte": "^1.0.6",
+		"svelte": "^4.2.18",
+		"svelte-codemirror-editor": "^1.4.0",
+		"svelte-fa": "^4.0.2",
+		"svelte-file-dropzone": "^2.0.7",
+		"svelte-headless-table": "^0.18.2",
+		"svelty-picker": "^5.2.12",
+		"svelte-select": "5.8.3",
+		"vest": "^5.4.0"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.45.3",
+		"@skeletonlabs/skeleton": "^2.10.2",
+		"@skeletonlabs/tw-plugin": "^0.4.0",
+		"@sveltejs/adapter-auto": "^3.2.2",
+		"@sveltejs/adapter-static": "^3.0.2",
+		"@sveltejs/package": "^2.3.2",
+		"@tailwindcss/forms": "^0.5.7",
+		"@tailwindcss/typography": "^0.5.13",
+		"@types/node": "^22.0.2",
+		"@typescript-eslint/eslint-plugin": "^8.0.0",
+		"@typescript-eslint/parser": "^8.0.0",
+		"autoprefixer": "^10.4.19",
+		"eslint": "^9.8.0",
+		"eslint-config-prettier": "^9.1.0",
+		"postcss": "^8.4.40",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.6",
+		"raw-loader": "^4.0.2",
+		"svelte": "^4.2.18",
+		"svelte-check": "^3.8.5",
+		"tailwindcss": "^3.4.7",
+		"tslib": "^2.6.3",
+		"typescript": "^5.5.4",
+		"vite": "^5.3.5",
+		"vitest": "^2.0.5"
+	},
+	"module": "./src/lib/index.ts"
 }

package/src/lib/components/CodeEditor/CodeEditor.svelte

@@ -49,8 +49,8 @@
 		language === 'js'
 			? [linter(esLint(new Linter())), lintGutter()]
 			: language === 'json'
-			? [linter(jsonParseLinter()), lintGutter()]
-			: [];
+				? [linter(jsonParseLinter()), lintGutter()]
+				: [];
 
 	const isValidJSON = (str: string) => {
 		try {
@@ -86,8 +86,8 @@
 				lang={language === 'html'
 					? html({ selfClosingTags: true })
 					: language === 'js'
-					? javascript()
-					: json()}
+						? javascript()
+						: json()}
 				theme={dark ? oneDark : null}
 				class="flex w-full"
 				{styles}

package/src/lib/components/Facets/Facets.svelte

@@ -178,8 +178,8 @@
 	});
 
 	$: displayedGroups = structuredClone($groups);
-	$: selectedItems, mapSelected('items'), sortOptions();
-	$: selectedGroups, mapSelected('groups');
+	$: (selectedItems, mapSelected('items'), sortOptions());
+	$: (selectedGroups, mapSelected('groups'));
 </script>
 
 <TreeView selection={groupSelection} multiple={groupSelection} padding="p-1" hover="">

package/src/lib/components/Facets/ShowMore.svelte

@@ -40,15 +40,13 @@
 			<h2 class="text-xl font-semibold">{group.displayName}</h2>
 
 			<!-- Items -->
-			<div class="gap-x-10 space-y-2 py-6 px-[2px] max-h-[500px] columns-[192px] overflow-auto min-h">
+			<div
+				class="gap-x-10 space-y-2 py-6 px-[2px] max-h-[500px] columns-[192px] overflow-auto min-h"
+			>
 				{#each Object.keys(selected) as key}
 					<label class="flex gap-3 items-center">
 						<input type="checkbox" class="checkbox" bind:checked={selected[key].selected} />
-						<span
-							title={selected[key].displayName}
-							class=""
-							>{selected[key].displayName}</span
-						>
+						<span title={selected[key].displayName} class="">{selected[key].displayName}</span>
 					</label>
 				{/each}
 			</div>

package/src/lib/components/File/FileUploader.svelte

@@ -35,7 +35,7 @@
 
 	export let data: fileUploaderType | undefined;
 
-	let isUploading:boolean = false;
+	let isUploading: boolean = false;
 
 	$: model = data;
 	$: submitBt = 'submit';
@@ -148,9 +148,10 @@
 			const response = await Api.post(url, formData);
 
 			if (response.status == 200) {
-				dispatch('submited',{
-					status:200,
-					data:response.data});
+				dispatch('submited', {
+					status: 200,
+					data: response.data
+				});
 
 				let message = files.accepted.length + ' is/are uploaded';
 
@@ -160,13 +161,12 @@
 				dispatch('success', { text: message, files: fileList });
 
 				files.accepted = [];
-			}
-			else
-			{
-					dispatch('submiterror', {
-					status:response.status,
-					data:response.data});
-					console.log('Error uploading file(s)', response);
+			} else {
+				dispatch('submiterror', {
+					status: response.status,
+					data: response.data
+				});
+				console.log('Error uploading file(s)', response);
 			}
 		}
 
@@ -192,17 +192,20 @@
 				<p>
 					{#if model.accept}
 						{#each model.accept as ext, i}
-							{ext}{#if i < model.accept.length - 1}, {/if}
+							{ext}{#if i < model.accept.length - 1},
+							{/if}
 						{/each}
 					{/if}
 				</p>
 			</Dropzone>
 			{#if isUploading}
-					<ProgressBar  value={undefined}/>
+				<ProgressBar value={undefined} />
 			{/if}
 		</div>
 
-		<button title="Submit" id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
+		<button title="Submit" id={submitBt} color="primary" style="display:none"
+			><Fa icon={faSave} /></button
+		>
 	{:else}
 		<!-- while data is not loaded show a loading information -->
 

package/src/lib/components/Table/Table.svelte

@@ -3,23 +3,44 @@
 	import type { TableConfig } from '$models/Models';
 
 	export let config: TableConfig<any>;
+	let remountKey = 0;
+	let didInitialColumnsRemount = false;
 
-	let fetched = false;
-	const data = config.data;
+	const normalizeColumns = (cols: unknown) => {
+		if (!cols || typeof cols !== 'object') return '';
+		const c = cols as Record<string, unknown>;
+		const keys = Object.keys(c).sort();
+		return JSON.stringify(keys.map((k) => [k, c[k]]));
+	};
 
-	$: if ($data.length > 0) fetched = true;
+	const onFetch = (event) => {
+		const payload = event.detail;
+		const nextColumns = payload?.columns ?? payload;
+		const nextCount = Number(payload?.count ?? 0);
+		const before = normalizeColumns((config as any)?.columns);
+		const after = normalizeColumns(nextColumns);
+		config = {
+			...config,
+			columns: nextColumns,
+			...(nextCount > 0 ? { __initialServerCount: nextCount } : {})
+		};
+		if (!didInitialColumnsRemount && before === '' && after !== '') {
+			remountKey += 1;
+			didInitialColumnsRemount = true;
+		}
+	};
 
-	if (typeof BigInt !== "undefined" && !BigInt.prototype.toJSON) {
-  BigInt.prototype.toJSON = function () {
-    return this.toString();
-  };
-}
+	if (typeof BigInt !== 'undefined' && !BigInt.prototype.toJSON) {
+		BigInt.prototype.toJSON = function () {
+			return this.toString();
+		};
+	}
 </script>
 
-{#key fetched}
+{#key remountKey}
 	<Table
 		{config}
-		on:fetch={(columns) => (config = { ...config, columns: columns.detail })}
+		on:fetch={onFetch}
 		on:action
 	/>
 {/key}