@bexis2/bexis2-core-ui 0.4.18 → 0.4.20

package/package.json

@@ -1,114 +1,114 @@
-{
-  "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.18",
-  "private": false,
-  "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",
-    "1.npm - update package infos": "npm init --scope bexis2",
-    "2.npm - package": "svelte-package",
-    "3.npm - publish": "npm publish --access public"
-  },
-  "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"
-  },
-  "type": "module",
-  "module": "./src/lib/index.ts",
-  "types": "./src/lib/index.d.ts",
-  "description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
-  "main": "./src/lib/index.d.ts",
-  "directories": {
-    "test": "tests"
-  },
-  "files": [
-    "dist",
-    "src/lib"
-  ],
-  "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",
-    "svelte-select": "5.8.3",
-    "vest": "^5.4.0"
-  },
-  "author": "David Schöne",
-  "license": "ISC",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/BEXIS2/bexis2-core-ui.git"
-  },
-  "bugs": {
-    "url": "https://github.com/BEXIS2/bexis2-core-ui/issues"
-  },
-  "homepage": "https://github.com/BEXIS2/bexis2-core-ui#readme",
-  "keywords": [
-    "bexis2",
-    "libary"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    },
-    "./dist/index.css": {
-      "import": "./dist/index.css",
-      "require": "./dist/index.css"
-    }
-  }
-}
+{
+  "name": "@bexis2/bexis2-core-ui",
+  "version": "0.4.20",
+  "private": false,
+  "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",
+    "1.npm - update package infos": "npm init --scope bexis2",
+    "2.npm - package": "svelte-package",
+    "3.npm - publish": "npm publish --access public"
+  },
+  "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"
+  },
+  "type": "module",
+  "module": "./src/lib/index.ts",
+  "types": "./src/lib/index.d.ts",
+  "description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
+  "main": "./src/lib/index.d.ts",
+  "directories": {
+    "test": "tests"
+  },
+  "files": [
+    "dist",
+    "src/lib"
+  ],
+  "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",
+    "svelte-select": "5.8.3",
+    "vest": "^5.4.0"
+  },
+  "author": "David Schöne",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BEXIS2/bexis2-core-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/BEXIS2/bexis2-core-ui/issues"
+  },
+  "homepage": "https://github.com/BEXIS2/bexis2-core-ui#readme",
+  "keywords": [
+    "bexis2",
+    "libary"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./dist/index.css": {
+      "import": "./dist/index.css",
+      "require": "./dist/index.css"
+    }
+  }
+}

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

@@ -100,6 +100,7 @@
 		<div class="flex gap-2">
 			<button
 				class="btn variant-filled-warning"
+				title="Reset"
 				id="{id}-reset"
 				on:click|preventDefault={() => modalStore.trigger(modal)}
 				><Fa icon={faArrowRotateLeft} /></button
@@ -108,6 +109,7 @@
 					class="btn border"
 					class:bg-slate-700={dark}
 					class:bg-white={!dark}
+					title="Toggle dark mode"
 					id="{id}-toggle"
 					on:click|preventDefault={() => (dark = !dark)}
 				>
@@ -124,11 +126,13 @@
 			<div class="flex gap-2">
 				<button
 					class="btn variant-filled-warning"
+					title="Cancel"
 					id="{id}-cancel"
 					on:click|preventDefault={() => dispatch('cancel')}><Fa icon={faXmark} /></button
 				>
 				<button
 					class="btn variant-filled-primary"
+					title="Save"
 					id="{id}-save"
 					disabled={!isValid}
 					on:click|preventDefault={() => dispatch('save')}><Fa icon={faSave} /></button

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

@@ -11,18 +11,14 @@
 	export let showAll = false;
 	export let open = false;
 
-	let selected: { [key: string]: SelectedFacetGroup };
-	let selectedItems: {
-		[key: string]: {
-			[key: string]: boolean;
-		};
-	} = {};
-	let selectedGroups: { [key: string]: boolean } = {};
+	export const showMore = (groupName: string) => {
+		const group: SelectedFacetGroup = selected[groupName];
 
-	const dispatch = createEventDispatcher();
+		dispatch('showMoreOpenChange', {
+			group: group.name,
+			open: true
+		});
 
-	const modalStore = getModalStore();
-	const showMore = (group: SelectedFacetGroup) => {
 		modalStore.trigger({
 			type: 'component',
 			title: `${group.displayName}`,
@@ -30,21 +26,57 @@
 				ref: ShowMore,
 				props: {
 					group,
-					handleSave,
+					handleApply,
 					handleCancel
 				}
 			}
 		});
 	};
 
-	const handleSave = (group: SelectedFacetGroup) => {
-		Object.keys(group.children).forEach((key) => {
-			selectedItems[group.name][key] = group.children[key].selected || false;
+	let selected: { [key: string]: SelectedFacetGroup };
+	let selectedItems: {
+		[key: string]: {
+			[key: string]: boolean;
+		};
+	} = {};
+	let selectedGroups: { [key: string]: boolean } = {};
+
+	const dispatch = createEventDispatcher();
+
+	const modalStore = getModalStore();
+
+	const handleApply = (group: SelectedFacetGroup) => {
+		const { name: groupName, children } = group;
+
+		dispatch('showMoreOpenChange', {
+			group: groupName,
+			open: false
 		});
+
+		for (const key in children) {
+			const selectedValue = children[key].selected || false;
+			selectedItems[groupName][key] = selectedValue;
+
+			if (selected[groupName].children[key].selected !== selectedValue) {
+				selected[groupName].children[key].selected = selectedValue;
+			}
+		}
+
+		dispatch('showMoreSelect', [
+			{
+				parent: groupName,
+				selected: Object.keys(children).map((key) => children[key].selected)
+			}
+		]);
+
 		modalStore.close();
 	};
 
-	const handleCancel = () => {
+	const handleCancel = (groupName: string) => {
+		dispatch('showMoreOpenChange', {
+			group: groupName,
+			open: false
+		});
 		modalStore.close();
 	};
 
@@ -75,11 +107,11 @@
 			});
 		}
 
-		changed.length && dispatch('change', changed);
+		changed.length && dispatch('facetSelect', changed);
 	};
 
 	const sortOptions = () => {
-		// Sort facets in a descending order if count exits, or sort alphabetically
+		// Sort facets in a descending order if count exits
 		Object.keys(selected).forEach((group) => {
 			const checked = Object.keys(selected[group].children)
 				.filter((item) => selected[group].children[item].selected)
@@ -88,13 +120,20 @@
 					if (a.count != undefined && b.count != undefined) {
 						return b.count - a.count;
 					}
-					return a.displayName.localeCompare(b.displayName);
+					return 0;
 				})
 				.map((item) => item.name);
 
-			const unchecked = Object.keys(selected[group].children).filter(
-				(item) => !checked.includes(item)
-			);
+			const unchecked = Object.keys(selected[group].children)
+				.filter((item) => !checked.includes(item))
+				.map((item) => selected[group].children[item])
+				.sort((a, b) => {
+					if (a.count != undefined && b.count != undefined) {
+						return b.count - a.count;
+					}
+					return 0;
+				})
+				.map((item) => item.name);
 
 			const groupIndex = displayedGroups.findIndex((g) => g.name === group);
 
@@ -153,7 +192,7 @@
 			bind:checked={selectedGroups[group.name]}
 			bind:group={selectedGroups}
 		>
-			<p class="font-semibold">
+			<p class="font-semibold whitespace-nowrap">
 				{group.displayName}{group.count !== undefined ? ` (${group.count})` : ''}
 			</p>
 
@@ -171,13 +210,18 @@
 							selection
 							multiple
 						>
-							<p>{item.displayName} ({item.count})</p>
+							<div class="flex gap-2">
+								<p class="w-max grow truncate">
+									<span title={item.displayName}>{item.displayName}</span>
+								</p>
+								<span>({item.count})</span>
+							</div>
 						</TreeViewItem>
 					{/each}
 					<!-- Trigger for the Modal to view all options -->
 					{#if group.children.length > 5}
 						<TreeViewItem hyphenOpacity="opacity-0">
-							<button class="anchor" on:click={() => showMore(selected[group.name])}>more</button
+							<button class="anchor" on:click={() => showMore(group.name)}>more</button
 							></TreeViewItem
 						>
 					{/if}
@@ -193,7 +237,12 @@
 							selection
 							multiple
 						>
-							<p>{item.displayName} ({item.count})</p>
+							<div class="flex gap-2">
+								<p class="w-max grow truncate">
+									<span title={item.displayName}>{item.displayName}</span>
+								</p>
+								<span>({item.count})</span>
+							</div>
 						</TreeViewItem>
 					{/each}
 				{/if}

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

@@ -2,8 +2,8 @@
 	import type { SelectedFacetGroup } from '$models/Models';
 
 	export let group: SelectedFacetGroup;
-	export let handleSave: (group: SelectedFacetGroup) => {};
-	export let handleCancel: () => {};
+	export let handleApply: (group: SelectedFacetGroup) => {};
+	export let handleCancel: (groupName: string) => {};
 
 	let selected = structuredClone(group.children);
 
@@ -15,8 +15,8 @@
 		Object.keys(selected).forEach((key) => (selected[key].selected = false));
 	};
 
-	const onSave = () => {
-		handleSave({
+	const onApply = () => {
+		handleApply({
 			...group,
 			children: selected
 		});
@@ -25,36 +25,50 @@
 	const onCancel = () => {
 		console.log(selected, group.children);
 		selected = structuredClone(group.children);
-		handleCancel();
+		handleCancel(group.name);
 	};
 
 	const gridClass = (items: any[]) => {
-		if (items.length >= 50) {
-			return 'grid-cols-5';
-		} else if (items.length >= 30) {
-			return 'grid-cols-4';
-		} else if (items.length >= 20) {
-			return 'grid-cols-3';
-		}
+		const ceil = Math.ceil(Math.sqrt(items.length));
+		const max = Math.max(ceil, Math.floor(items.length / 3));
 
-		return 'grid-cols-2';
+		const classes = [
+			'grid-rows-1',
+			'grid-rows-2',
+			'grid-rows-3',
+			'grid-rows-4',
+			'grid-rows-5',
+			'grid-rows-6',
+			'grid-rows-7',
+			'grid-rows-8',
+			'grid-rows-9',
+			'grid-rows-10',
+			'grid-rows-11',
+			'grid-rows-12'
+		];
+
+		if (max > 12) {
+			return 'grid-rows-12';
+		} else return classes[max - 1 || 1];
 	};
 </script>
 
-<div class="p-5 rounded-md bg-surface-50 dark:bg-surface-800 border-primary-500 border-2">
+<div class="p-5 rounded-md max-w-6xl bg-surface-50 dark:bg-surface-800 border-primary-500 border-2">
 	<!-- Header -->
 	<h2 class="text-xl font-semibold">{group.displayName}</h2>
 
 	<!-- Items -->
 	<div
-		class="grid {gridClass(
+		class="{gridClass(
 			Object.keys(selected)
-		)} !gap-x-20 gap-y-2 py-10 px-2 max-h-[1000px] overflow-x-auto max-w-6xl"
+		)} grid grid-flow-col gap-x-10 gap-y-2 py-10 px-2 h-full overflow-x-auto"
 	>
 		{#each Object.keys(selected) as key}
-			<label class="flex gap-3 items-center">
+			<label class="flex gap-3 items-center w-48">
 				<input type="checkbox" class="checkbox" bind:checked={selected[key].selected} />
-				<span class="whitespace-nowrap break-before-avoid break-after-avoid"
+				<span
+					title={selected[key].displayName}
+					class="whitespace-nowrap break-before-avoid break-after-avoid truncate"
 					>{selected[key].displayName}</span
 				>
 			</label>
@@ -68,7 +82,7 @@
 			<button class="btn btn-sm variant-filled-tertiary" on:click={selectAll}>All</button>
 		</div>
 		<div class="flex gap-3">
-			<button class="btn btn-sm variant-filled-primary" on:click={onSave}>Save</button>
+			<button class="btn btn-sm variant-filled-primary" on:click={onApply}>Apply</button>
 			<button class="btn btn-sm variant-filled-secondary" on:click={onCancel}>Cancel</button>
 		</div>
 	</div>

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

@@ -193,7 +193,7 @@
 			{/if}
 		</div>
 
-		<button 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/ColumnsMenu.svelte

@@ -14,7 +14,9 @@
 
 <button
 	type="button"
+	title="Hide or show columns"
 	class="btn btn-sm variant-filled-primary rounded-full order-last"
+	aria-label="Open menu to hide/show columns"
 	use:popup={popupCombobox}>Columns</button
 >
 
@@ -24,8 +26,11 @@
 >
 	{#each columns as column}
 		<div class="flex gap-3 items-center">
+			<label for={column.id} class="cursor-pointer" title={column.label}></label>
 			<input
+				aria-label="Toggle column visibility for column {column.label}"
 				type="checkbox"
+				id = {column.id}
 				bind:checked={column.visible}
 				disabled={columns.filter((c) => c.visible).length === 1 && column.visible}
 			/>