@bexis2/bexis2-core-ui 0.4.19 → 0.4.21

package/dist/components/form/DropdownKvP.svelte

@@ -39,7 +39,7 @@
 <InputContainer {id} label={title} {feedback} {required} {help}>
 	<select
 		{id}
-		class="select variant-form-material"
+		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		class:input-success={valid}
 		class:input-error={invalid}
 		bind:value={selected}

package/dist/components/form/InputContainer.svelte

@@ -13,7 +13,13 @@ function onMouseOut() {
 }
 </script>
 
-<div id="{id}-container" on:mouseover={onMouseOver} on:focus={onMouseOver} on:mouseout={onMouseOut} on:blur={onMouseOut}>
+<div
+	id="{id}-container"
+	on:mouseover={onMouseOver}
+	on:focus={onMouseOver}
+	on:mouseout={onMouseOut}
+	on:blur={onMouseOut}
+>
 	<label class="label">
 		<span
 			>{label}

package/dist/components/form/MultiSelect.svelte

@@ -4,8 +4,6 @@
 	import Select from 'svelte-select';
 	import { onMount } from 'svelte';
 
-
-
 	export let source;
 	export let target;
 	export let id;
@@ -35,16 +33,14 @@
 	$: groupBy;
 
 	function updateTarget(selection) {
+		console.log('updateTarget', target, selection, isMulti);
+		if (selection == undefined) {
+			console.log('no update');
 
-		console.log("updateTarget", target, selection, isMulti);
-  if(selection == undefined)
-		{
-		  console.log("no update");
-
-				return;
+			return;
 		}
 
-		console.log("update");
+		console.log('update');
 		//different cases
 		//a) source is complex model is simple return array
 		if (complexSource && !complexTarget && isLoaded && isMulti) {
@@ -75,8 +71,8 @@
 		}
 
 		if (!complexSource && !complexTarget && isLoaded && !isMulti) {
-			console.log("🚀 ~ updateTarget ~ selection:", selection)
-			if(selection){
+			console.log('🚀 ~ updateTarget ~ selection:', selection);
+			if (selection) {
 				target = selection.value;
 			}
 		}
@@ -167,118 +163,116 @@
 		//console.log(t,value)
 	}
 
-function filterItemStartFn(label, filterText, option) {
-	// console.log(label, filterText, option);
-	let itemFilter = label.toLowerCase().startsWith(filterText.toLowerCase());
+	function filterItemStartFn(label, filterText, option) {
+		// console.log(label, filterText, option);
+		let itemFilter = label.toLowerCase().startsWith(filterText.toLowerCase());
 
-	return itemFilter;
-}
+		return itemFilter;
+	}
 
-function filterItemExactFn(label, filterText, option) {
-	// console.log(label, filterText, option);
-	let itemFilter = label.toLowerCase() == filterText.toLowerCase();
+	function filterItemExactFn(label, filterText, option) {
+		// console.log(label, filterText, option);
+		let itemFilter = label.toLowerCase() == filterText.toLowerCase();
 
-	return itemFilter;
-}
+		return itemFilter;
+	}
 
-function filterItemIncludesFn(label, filterText, option) {
-	// console.log(label, filterText, option);
-	let itemFilter = label.toLowerCase().includes(filterText.toLowerCase());
+	function filterItemIncludesFn(label, filterText, option) {
+		// console.log(label, filterText, option);
+		let itemFilter = label.toLowerCase().includes(filterText.toLowerCase());
 
-	return itemFilter;
-}
+		return itemFilter;
+	}
 
-function filterFn({
-    loadOptions,
-    filterText,
-    items,
-    multiple,
-    value,
-    itemId,
-    groupBy,
-    filterSelectedItems,
-    itemFilter,
-    convertStringItemsToObjects,
-    filterGroupedItems,
-    label,
-}) {
-    if (items && loadOptions) return items;
-    if (!items) return [];
+	function filterFn({
+		loadOptions,
+		filterText,
+		items,
+		multiple,
+		value,
+		itemId,
+		groupBy,
+		filterSelectedItems,
+		itemFilter,
+		convertStringItemsToObjects,
+		filterGroupedItems,
+		label
+	}) {
+		if (items && loadOptions) return items;
+		if (!items) return [];
+
+		if (items && items.length > 0 && typeof items[0] !== 'object') {
+			items = convertStringItemsToObjects(items);
+		}
 
-    if (items && items.length > 0 && typeof items[0] !== 'object') {
-        items = convertStringItemsToObjects(items);
-    }
+		let filterResults = filterListFn(
+			items,
+			label,
+			filterText,
+			multiple,
+			value,
+			filterSelectedItems,
+			itemId
+		);
+
+		if (groupBy) {
+			filterResults = filterGroupedItems(filterResults, label, filterText);
+		}
 
-    let filterResults = filterListFn(items, label, filterText,multiple,value,filterSelectedItems, itemId)
+		return filterResults;
+	}
 
-    if (groupBy) {
-        filterResults = filterGroupedItems(filterResults, label, filterText);
-    }
+	// filter checks 3 types, exact, starts, includes
+	function filterListFn(items, label, filterText, multiple, value, filterSelectedItems, itemId) {
+		if (!items) return [];
 
-    return filterResults;
-}
+		let exact = items.filter((item) => {
+			let matchesFilter = filterItemExactFn(item[label], filterText, item);
+			if (matchesFilter && multiple && value?.length) {
+				matchesFilter = !value.some((x) => {
+					return filterSelectedItems ? x[itemId] === item[itemId] : false;
+				});
+			}
 
-// filter checks 3 types, exact, starts, includes
-function filterListFn(items ,label , filterText, multiple, value, filterSelectedItems, itemId)
-{
+			return matchesFilter;
+		});
 
-	 if (!items) return [];
+		let starts = items.filter((item) => {
+			let matchesFilter = filterItemStartFn(item[label], filterText, item);
+			if (matchesFilter && multiple && value?.length) {
+				matchesFilter = !value.some((x) => {
+					return filterSelectedItems ? x[itemId] === item[itemId] : false;
+				});
+			}
 
-		let exact = items.filter((item) => {
-						let matchesFilter = filterItemExactFn(item[label], filterText, item);
-						if (matchesFilter && multiple && value?.length) {
-            matchesFilter = !value.some((x) => {
-                return filterSelectedItems ? x[itemId] === item[itemId] : false;
-            });
-        }
+			return matchesFilter;
+		});
 
-							return matchesFilter;
-    });
+		let includes = items.filter((item) => {
+			let matchesFilter = filterItemIncludesFn(item[label], filterText, item);
+			if (matchesFilter && multiple && value?.length) {
+				matchesFilter = !value.some((x) => {
+					return filterSelectedItems ? x[itemId] === item[itemId] : false;
+				});
+			}
 
-		let starts = items.filter((item) => {
-				let matchesFilter = filterItemStartFn(item[label], filterText, item);
-						if (matchesFilter && multiple && value?.length) {
-            matchesFilter = !value.some((x) => {
-                return filterSelectedItems ? x[itemId] === item[itemId] : false;
-            });
-        }
-
-							return matchesFilter;
-
-    });
-
-			let includes = items.filter((item) => {
-				let matchesFilter = filterItemIncludesFn(item[label], filterText, item);
-						if (matchesFilter && multiple && value?.length) {
-            matchesFilter = !value.some((x) => {
-                return filterSelectedItems ? x[itemId] === item[itemId] : false;
-            });
-        }
-
-							return matchesFilter;
-    });
-
-	 
-				let result =  [...exact,...starts,...includes];
-				return [...new Set(result)];
-}
-
-function clearFn(e)
-{
-	 console.log("clear", target, e);
-		if(isMulti)
-		{
-				target = [];
-		}
-		else
-		{
-			target="";
-		}
+			return matchesFilter;
+		});
 
-	 console.log("after clear", target);
-}
+		let result = [...exact, ...starts, ...includes];
+		return [...new Set(result)];
+	}
 
+	function clearFn(e) {
+		console.log('clear', target, e);
+		if (isMulti) {
+			target = [];
+		} else {
+			target = '';
+		}
 
+		console.log('after clear', target);
+	}
 </script>
 
 <InputContainer {id} label={title} {feedback} {required} {help}>
@@ -295,7 +289,7 @@ function clearFn(e)
 		{loading}
 		{clearable}
 		{disabled}
-  filter={filterFn}
+		filter={filterFn}
 		on:change
 		on:input
 		on:focus

package/dist/components/form/NumberInput.svelte

@@ -15,7 +15,7 @@ export let disabled = false;
 <InputContainer {id} {label} {feedback} {required} {help}>
 	<input
 		{id}
-		class="input variant-form-material"
+		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		type="number"
 		class:input-success={valid}
 		class:input-error={invalid}

package/dist/components/form/TextArea.svelte

@@ -14,7 +14,7 @@ export let disabled = false;
 <InputContainer {id} {label} {feedback} {required} {help}>
 	<textarea
 		{id}
-		class="textarea variant-form-material"
+		class="textarea variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		class:input-success={valid}
 		class:input-error={invalid}
 		bind:value

package/dist/components/form/TextInput.svelte

@@ -14,7 +14,7 @@ export let disabled = false;
 <InputContainer {id} {label} {feedback} {required} {help}>
 	<input
 		{id}
-		class="input variant-form-material"
+		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
 		type="text"
 		class:input-success={valid}
 		class:input-error={invalid}

package/dist/components/page/Alert.svelte

@@ -27,7 +27,7 @@ $: show = true;
 			<slot name="actions" />
 
 			{#if deleteBtn}
-				<button class="btn hover:text-primary-100" on:click={() => (show = false)}>
+				<button class="btn hover:text-primary-100" title="Close alert" on:click={() => (show = false)}>
 					<Fa icon={faXmark} />
 				</button>
 			{/if}

package/dist/components/page/BackToTop.svelte

@@ -26,5 +26,5 @@
 <svelte:window on:scroll={handleOnScroll} />
 
 <div class="w-full items-center">
-	<button class="btn ring back-to-top" on:click={goTop} class:hidden>Back to top</button>
+	<button class="btn ring back-to-top" title="Back to top" on:click={goTop} class:hidden>Back to top</button>
 </div>

package/dist/components/page/GoToTop.svelte

@@ -17,6 +17,7 @@
 {#if showGotoTop}
  <button
  id="gotToTop"
+ title="Go to top"
  class="chip variant-filled-warning fixed bottom-5 right-20 shadow-md"
  on:click={gotoTop}
  ><Fa icon={faAngleUp}/></button >

package/dist/components/page/HelpPopUp.svelte

@@ -29,6 +29,7 @@ async function resetItemId() {
 {#if active}
 	<button
 		id="helpButton"
+		title="Open help window"
 		class="chip variant-filled-warning fixed bottom-5 right-10 shadow-md"
 		use:popup={helpClick}><Fa icon={faQuestion} /></button
 	>

package/dist/components/page/Page.svelte

@@ -59,10 +59,6 @@ function scrollToTop() {
 		</AppBar>
 	</svelte:fragment>
 
-	<svelte:fragment slot="footer">
-		<Footer />
-	</svelte:fragment>
-
 	<slot name="description" />
 
 	<div class="flex flex-initial space-x-5">
@@ -98,6 +94,11 @@ function scrollToTop() {
 	<GoToTop/>
 	<HelpPopUp active={help} />
 	<Notification />
+	
+	<svelte:fragment slot="footer">
+		<Footer />
+	</svelte:fragment>
+
 </AppShell>
 </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.19",
+  "version": "0.4.21",
   "private": false,
   "scripts": {
     "dev": "vite dev",

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

@@ -26,7 +26,7 @@
 				ref: ShowMore,
 				props: {
 					group,
-					handleSave,
+					handleApply,
 					handleCancel
 				}
 			}
@@ -45,7 +45,7 @@
 
 	const modalStore = getModalStore();
 
-	const handleSave = (group: SelectedFacetGroup) => {
+	const handleApply = (group: SelectedFacetGroup) => {
 		const { name: groupName, children } = group;
 
 		dispatch('showMoreOpenChange', {
@@ -110,9 +110,8 @@
 		changed.length && dispatch('facetSelect', changed);
 	};
 
-	// Keeping the sorting function, but stays unused for now
 	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)
@@ -121,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);
 
@@ -172,7 +178,7 @@
 	});
 
 	$: displayedGroups = structuredClone($groups);
-	$: selectedItems, mapSelected('items'); // sortOptions(); // Sorting is not used for now
+	$: selectedItems, mapSelected('items'), sortOptions();
 	$: selectedGroups, mapSelected('groups');
 </script>
 
@@ -186,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>
 
@@ -204,7 +210,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}
 					<!-- Trigger for the Modal to view all options -->
@@ -226,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,7 +2,7 @@
 	import type { SelectedFacetGroup } from '$models/Models';
 
 	export let group: SelectedFacetGroup;
-	export let handleSave: (group: SelectedFacetGroup) => {};
+	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
 		});
@@ -29,32 +29,46 @@
 	};
 
 	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}
 			/>