@bexis2/bexis2-core-ui 0.4.18 → 0.4.20

package/src/lib/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/src/lib/components/form/NumberInput.svelte

@@ -18,7 +18,7 @@
 <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/src/lib/components/form/TextArea.svelte

@@ -17,7 +17,7 @@
 <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/src/lib/components/form/TextInput.svelte

@@ -16,7 +16,7 @@
 <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/src/lib/components/page/Alert.svelte

@@ -32,7 +32,7 @@
 			<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/src/lib/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/src/lib/components/page/Docs.svelte

@@ -39,7 +39,7 @@
 	{/if}
 
 	{#each links as link}
-		<span class="chip variant-soft hover:variant-filled" on:click={() => goTo(link.url, false)} on:keypress={() => goTo(link.url, false)}>
+		<span class="chip variant-soft hover:variant-filled" role="button" tabindex="0" on:click={() => goTo(link.url, false)} on:keypress={() => goTo(link.url, false)}>
 			<span>{link.label}</span>
 		</span>
 	{/each}

package/src/lib/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/src/lib/components/page/HelpPopUp.svelte

@@ -45,6 +45,7 @@
 {#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/src/lib/components/page/Page.svelte

@@ -61,27 +61,23 @@ import type { helpItemType, helpStoreType } from '$models/Models';
 </script>
 
 <div class="app" bind:this={app}>
-<AppShell>
+<div class="w-full h-full flex flex-col overflow-hidden">
 	<!--header-->
-	<svelte:fragment slot="header">
-		<AppBar padding="0" spacing="space-y-0" background="white">
-			<svelte:fragment slot="headline">
-				<Header />
-				{#if true}
-					<Menu />
-				{/if}
-
-				<div class="grid grid-cols-2">
-					<Breadcrumb bind:title />
-					<Docs {links} {note} />
-				</div>
-			</svelte:fragment>
-		</AppBar>
-	</svelte:fragment>
+	<header class="flex-none z-10">
+		<Header />
+		{#if true}
+			<Menu />
+		{/if}
 
-	<svelte:fragment slot="footer">
+		<div class="grid grid-cols-2">
+			<Breadcrumb bind:title />
+			<Docs {links} {note} />
+		</div>
+	</header>
+
+	<footer	>
 		<Footer />
-	</svelte:fragment>
+	</footer>
 
 	<slot name="description" />
 
@@ -118,6 +114,5 @@ import type { helpItemType, helpStoreType } from '$models/Models';
 	<GoToTop/>
 	<HelpPopUp active={help} />
 	<Notification />
-</AppShell>
 </div>
-
+</div>

package/src/lib/components/page/menu/MenuSublist.svelte

@@ -23,24 +23,27 @@
 		}
 	}
 
-	function clickFn(item)
+	function clickFn(item, newWindow = false)
 	{
 		if(item.Title =="Log Off")
 		{
 					logOffFn();
 			return;
 		}
-		else{
+		else if (newWindow == false){
 				goTo(item.Url)
 		}
+		else{
+			window.open(item.Url)
+		}
 	}
 
-	
+
 	async function logOffFn() {
 
 		 console.log('logoff');
 				// Prepare the body content for the POST request
-			
+
 
 			let bodyContent = '__RequestVerificationToken='+ window.antiForgeryToken;
 
@@ -55,7 +58,7 @@
 									});
 									if (response.ok) {
 													// Redirect to login page after logout
-													window.location.href = '/Account/Login'; 
+													window.location.href = '/Account/Login';
 									} else {
 													console.error('Logout failed');
 									}
@@ -69,8 +72,8 @@
 
 <ListBox class="sm:bg-white sm:border overflow-y-auto max-h-[500px]">
 	{#each items as item}
-		{#if isNewModule(item.Module)}<hr class="text-surface-800" />{/if}
-
+		{#if isNewModule(item.Module)}<hr class="text-surface-800"/>{/if}
+		<span on:auxclick={() => clickFn(item, true)}>
 		<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}
@@ -80,6 +83,6 @@
 		>
 			{item.Title}
 		</ListBoxItem>
-
+		</span>
 	{/each}
 </ListBox>