@bexis2/bexis2-core-ui 0.4.8 → 0.4.10

package/package.json

@@ -1,114 +1,114 @@
-{
-  "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.8",
-  "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.43.0",
-    "@skeletonlabs/skeleton": "^2.9.0",
-    "@skeletonlabs/tw-plugin": "^0.3.1",
-    "@sveltejs/adapter-auto": "^3.2.0",
-    "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/package": "^2.3.1",
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.12",
-    "@types/node": "^20.12.5",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^8.0.0",
-    "eslint-config-prettier": "^8.0.0",
-    "postcss": "^8.4.38",
-    "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.2",
-    "raw-loader": "^4.0.2",
-    "svelte": "^4.2.12",
-    "svelte-check": "^3.6.9",
-    "tailwindcss": "^3.4.3",
-    "tslib": "^2.6.2",
-    "typescript": "^5.4.4",
-    "vite": "^5.2.8",
-    "vitest": "^1.4.0"
-  },
-  "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.8",
-    "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lint": "^6.5.0",
-    "@codemirror/theme-one-dark": "^6.1.2",
-    "@floating-ui/dom": "^1.6.3",
-    "@fortawesome/fontawesome-free": "^6.5.2",
-    "@fortawesome/fontawesome-svg-core": "^6.5.2",
-    "@fortawesome/free-regular-svg-icons": "^6.5.2",
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
-    "@sveltejs/kit": "^2.5.5",
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
-    "axios": "^1.6.8",
-    "codemirror": "^6.0.1",
-    "dateformat": "^5.0.3",
-    "delay": "^6.0.0",
-    "dotenv": "^16.4.5",
-    "eslint4b-prebuilt": "^6.7.2",
-    "highlight.js": "^11.9.0",
-    "highlightjs-svelte": "^1.0.6",
-    "svelte": "^4.2.12",
-    "svelte-codemirror-editor": "^1.3.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.2.12"
-  },
-  "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.10",
+  "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/Facets/Facets.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { getModalStore, Modal, TreeView, TreeViewItem } from '@skeletonlabs/skeleton';
+
+	import ShowMore from './ShowMore.svelte';
+	import type { FacetOption, FacetGroup } from '$models/Models';
+
+	export let groupSelection = false;
+	export let groups: FacetGroup;
+	export let selected: FacetGroup;
+	export let selectedGroups: { [key: string]: boolean } = {};
+	export let showAll = false;
+	export let open = false;
+
+	const modalStore = getModalStore();
+	const showMore = (group: string) => {
+		modalStore.trigger({
+			type: 'component',
+			title: `${group}`,
+			component: {
+				ref: ShowMore,
+				props: {
+					group,
+					handleSave,
+					handleCancel,
+					selected: selected[group],
+					items: groups[group].sort((a, b) => a.value.localeCompare(b.value))
+				}
+			}
+		});
+	};
+
+	const handleSave = (group: string, selectedItems: FacetOption[]) => {
+		selected[group] = selectedItems;
+		modalStore.close();
+	};
+
+	const handleCancel = () => {
+		modalStore.close();
+	};
+
+	const sortOptions = () => {
+		// Sort facets in a descending order if count exits, or sort alphabetically
+		Object.keys(groups).forEach((group) => {
+			groups[group] = [
+				...selected[group].sort((a, b) => {
+					if (a.count != undefined && b.count != undefined) {
+						return b.count - a.count;
+					}
+					return a.value.localeCompare(b.value);
+				}),
+				...groups[group]
+					.filter((item) => !selected[group].includes(item))
+					.sort((a, b) => {
+						if (a.count != undefined && b.count != undefined) {
+							return b.count - a.count;
+						}
+						return a.value.localeCompare(b.value);
+					})
+			];
+		});
+	};
+
+	$: selected, sortOptions();
+</script>
+
+<TreeView selection={groupSelection} multiple={groupSelection} padding="p-1" hover="">
+	{#each Object.keys(groups) as group}
+		<TreeViewItem
+			name="groups"
+			value={group}
+			{open}
+			hyphenOpacity="opacity-0"
+			bind:group={selectedGroups}
+			bind:checked={selectedGroups[group]}
+		>
+			<p class="font-semibold">{group}</p>
+
+			<svelte:fragment slot="children">
+				<!-- If more than 5 choices, show the remaining in the Modal -->
+				{#if !showAll}
+					{#each groups[group].slice(0, 5) as item}
+						<TreeViewItem
+							bind:group={selected[group]}
+							name={group}
+							value={item}
+							hyphenOpacity="opacity-0"
+							spacing="space-x-3"
+							selection
+							multiple
+						>
+							<p>{item.value} ({item.count})</p>
+						</TreeViewItem>
+					{/each}
+					<!-- Trigger for the Modal to view all options -->
+					{#if groups[group].length > 5}
+						<TreeViewItem hyphenOpacity="opacity-0">
+							<button class="anchor" on:click={() => showMore(group)}>more</button></TreeViewItem
+						>
+					{/if}
+				{:else}
+					{#each groups[group] as item}
+						<TreeViewItem
+							bind:group={selected[group]}
+							name={group}
+							value={item}
+							hyphenOpacity="opacity-0"
+							spacing="space-x-3"
+							selection
+							multiple
+						>
+							<p>{item.value} ({item.count})</p>
+						</TreeViewItem>
+					{/each}
+				{/if}
+			</svelte:fragment>
+		</TreeViewItem>
+	{/each}
+</TreeView>
+
+<Modal />

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

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { FacetOption } from '$models/Models';
+
+	export let group: string; // Group name
+	export let items: FacetOption[]; // All possible choices
+	export let selected: FacetOption[]; // Initially selected items
+	export let handleSave: (group: string, selectedItems: FacetOption[]) => {};
+	export let handleCancel: () => {};
+
+	// This local variable is needed for resetting the Modal when the user cancels selection.
+	let selectedItems = selected; // Selected items in the Modal.
+
+	const handleCheck = (e, index: number) => {
+		const target = e.target as HTMLInputElement;
+		if (target.checked) {
+			selectedItems = [...selectedItems, items[index]];
+		} else {
+			selectedItems = selectedItems.filter((item) => item !== items[index]);
+		}
+	};
+
+	const selectAll = () => {
+		selectedItems = items;
+	};
+
+	const selectNone = () => {
+		selectedItems = [];
+	};
+
+	const onSave = () => {
+		handleSave(group, selectedItems);
+	};
+
+	const onCancel = () => {
+		selectedItems = selected;
+		handleCancel();
+	};
+
+	const gridClass = (items: FacetOption[]) => {
+		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';
+		}
+
+		return 'grid-cols-2';
+	};
+</script>
+
+<div class="p-5 rounded-md bg-surface-50 dark:bg-surface-800 border-primary-500 border-2">
+	<!-- Header -->
+	<h2 class="text-xl font-semibold">{group}</h2>
+
+	<!-- Items -->
+	<div
+		class="grid {gridClass(
+			items
+		)} !gap-x-20 gap-y-2 py-10 px-2 max-h-[1000px] overflow-x-auto max-w-6xl"
+	>
+		{#each items as item, index}
+			<label class="flex gap-3 items-center">
+				<input
+					type="checkbox"
+					class="checkbox"
+					value={item.value}
+					on:click={(e) => handleCheck(e, index)}
+					checked={selectedItems.includes(item)}
+				/>
+				<span class="whitespace-nowrap break-before-avoid break-after-avoid">{item.value}</span>
+			</label>
+		{/each}
+	</div>
+
+	<!-- Footer -->
+	<div class="flex w-full justify-between gap-5">
+		<div class="flex gap-3">
+			<button class="btn btn-sm variant-filled-tertiary" on:click={selectNone}>None</button>
+			<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-secondary" on:click={onCancel}>Cancel</button>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { popup } from '@skeletonlabs/skeleton';
+	import type { PopupSettings } from '@skeletonlabs/skeleton';
+
+	export let columns: { id: string; label: string; visible: boolean }[] = [];
+	export let tableId: string;
+
+	const popupCombobox: PopupSettings = {
+		event: 'click',
+		target: `${tableId}-columns-menu`,
+		placement: 'bottom'
+	};
+</script>
+
+<button
+	type="button"
+	class="btn btn-sm variant-filled-primary rounded-full order-last"
+	use:popup={popupCombobox}>Columns</button
+>
+
+<div
+	class="bg-white dark:bg-surface-500 p-4 rounded-md shadow-md z-10"
+	data-popup="{tableId}-columns-menu"
+>
+	{#each columns as column}
+		<div class="flex gap-3 items-center">
+			<input
+				type="checkbox"
+				bind:checked={column.visible}
+				disabled={columns.filter((c) => c.visible).length === 1 && column.visible}
+			/>
+			<span>{column.label}</span>
+		</div>
+	{/each}
+
+	<div class="arrow bg-white dark:bg-surface-500" />
+</div>