@bexis2/bexis2-core-ui 0.4.96 → 0.4.97

package/src/lib/components/form/NumberInput.svelte

@@ -14,25 +14,34 @@
 	export let placeholder: string = '';
 	export let help: boolean = false;
 	export let disabled: boolean = false;
-	export let description	: string = '';
+	export let description: string = '';
 	export let showDescription: boolean = false;
 	export let showIcon: boolean = false;
-	export let min	: number | undefined = undefined;
-	export let max	: number | undefined = undefined;
+	export let min: number | undefined = undefined;
+	export let max: number | undefined = undefined;
 
 	// Diese Zeile wird jedes Mal ausgeführt, wenn sich "menge" ändert
-  $: if (max!=undefined && (parseInt(value) > max)) {
-    value = max.toString();
-  }
-
-		$: if (min!=undefined && (parseInt(value) < min)) {
-    value = min.toString();
-  }
-
+	$: if (max != undefined && parseInt(value) > max) {
+		value = max.toString();
+	}
 
+	$: if (min != undefined && parseInt(value) < min) {
+		value = min.toString();
+	}
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
+<InputContainer
+	{id}
+	{label}
+	{feedback}
+	{required}
+	{help}
+	{description}
+	{showDescription}
+	{showIcon}
+	on:showDescription
+	on:hideDescription
+>
 	<input
 		{id}
 		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/src/lib/components/form/TextArea.svelte

@@ -12,12 +12,23 @@
 	export let placeholder: string = '';
 	export let help: boolean = false;
 	export let disabled: boolean = false;
-	export let description	: string = '';
+	export let description: string = '';
 	export let showDescription: boolean = false;
 	export let showIcon: boolean = false;
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
+<InputContainer
+	{id}
+	{label}
+	{feedback}
+	{required}
+	{help}
+	{description}
+	{showDescription}
+	{showIcon}
+	on:showDescription
+	on:hideDescription
+>
 	<textarea
 		{id}
 		class="textarea variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/src/lib/components/form/TextInput.svelte

@@ -11,12 +11,23 @@
 	export let placeholder: string = '';
 	export let help: boolean = false;
 	export let disabled: boolean = false;
-	export let description	: string = '';
+	export let description: string = '';
 	export let showDescription: boolean = false;
 	export let showIcon: boolean = false;
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
+<InputContainer
+	{id}
+	{label}
+	{feedback}
+	{required}
+	{help}
+	{description}
+	{showDescription}
+	{showIcon}
+	on:showDescription
+	on:hideDescription
+>
 	<input
 		{id}
 		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/src/lib/components/page/Alert.svelte

@@ -32,7 +32,11 @@
 			<slot name="actions" />
 
 			{#if deleteBtn}
-				<button class="btn hover:text-primary-100" title="Close alert" 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,7 @@
 <svelte:window on:scroll={handleOnScroll} />
 
 <div class="w-full items-center">
-	<button class="btn ring back-to-top" title="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,9 +39,16 @@
 	{/if}
 
 	{#each links as link}
-		<span role="button" tabindex="0" title={link.label} class="chip variant-soft hover:variant-filled" on:click={() => goTo(link.url, false)} on:keypress={() => goTo(link.url, false)}>
+		<span
+			role="button"
+			tabindex="0"
+			title={link.label}
+			class="chip variant-soft hover:variant-filled"
+			on:click={() => goTo(link.url, false)}
+			on:keypress={() => goTo(link.url, false)}
+		>
 			<span>
-				{#if link.label.toLowerCase()=='manual'}
+				{#if link.label.toLowerCase() == 'manual'}
 					<Fa icon={faBook} />
 				{:else}
 					{link.label}

package/src/lib/components/page/GoToTop.svelte

@@ -1,26 +1,25 @@
 <script>
+	import Fa from 'svelte-fa';
+	import { faAngleUp } from '@fortawesome/free-solid-svg-icons';
 
- import Fa from 'svelte-fa';
- import { faAngleUp } from '@fortawesome/free-solid-svg-icons';
+	export let showAtPixel = 1000;
 
- export let showAtPixel = 1000;
+	let scrollHeight = 0;
 
- let scrollHeight = 0;
+	const gotoTop = () => {
+		window.scrollTo({ top: 0, behavior: 'smooth' });
+	};
 
- const gotoTop = () => {
-  window.scrollTo({ top: 0, behavior: 'smooth' })
- };
-
- $: showGotoTop = scrollHeight > showAtPixel;
+	$: showGotoTop = scrollHeight > showAtPixel;
 </script>
 
 {#if showGotoTop}
- <button
- id="gotToTop"
- title="Go to top"
- class="btn variant-filled-warning fixed bottom-5 right-20 shadow-md"
- on:click={gotoTop}
- ><Fa icon={faAngleUp}/></button >
+	<button
+		id="gotToTop"
+		title="Go to top"
+		class="btn variant-filled-warning fixed bottom-5 right-20 shadow-md"
+		on:click={gotoTop}><Fa icon={faAngleUp} /></button
+	>
 {/if}
 
 <svelte:window bind:scrollY={scrollHeight} />

package/src/lib/components/page/Notification.svelte

@@ -13,7 +13,7 @@
 			? notificationStore.getBtnStyle()
 			: $notificationStore.btnStyle;
 
-	$: $notificationStore, triggerToast();
+	$: ($notificationStore, triggerToast());
 
 	onMount(() => {
 		toastStore.clear();

package/src/lib/components/page/Page.svelte

@@ -16,20 +16,18 @@
 	//popup
 	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
 	import { storePopup } from '@skeletonlabs/skeleton';
-	import { breadcrumbStore,notificationStore } from '$store/pageStores';
-	import { errorStore,csrfTokenStore } from '$store/apiStores';
+	import { breadcrumbStore, notificationStore } from '$store/pageStores';
+	import { errorStore, csrfTokenStore } from '$store/apiStores';
 
 	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
-// icons
-import type { helpItemType, helpStoreType } from '$models/Models';
-
+	// icons
+	import type { helpItemType, helpStoreType } from '$models/Models';
 
 	import Docs from './Docs.svelte';
 	import GoToTop from './GoToTop.svelte';
 	import { getAntiForgeryToken } from './PageCaller';
 
-
 	export let title = '';
 	export let note = '';
 	export let links: linkType[] = [];
@@ -43,102 +41,93 @@ import type { helpItemType, helpStoreType } from '$models/Models';
 
 	let aftIsReady = false;
 
-	errorStore.subscribe((error:errorType) => {
-			console.log("🚀 ~ errorStore.subscribe ~ value:", error.error)
-			notificationStore.showNotification({
-				notificationType: notificationType.error,
-				message: error.error
-			})
-		})
+	errorStore.subscribe((error: errorType) => {
+		console.log('🚀 ~ errorStore.subscribe ~ value:', error.error);
+		notificationStore.showNotification({
+			notificationType: notificationType.error,
+			message: error.error
+		});
+	});
 
 	onMount(async () => {
 		console.log('page');
 		breadcrumbStore.clean();
 		breadcrumbStore.addItem({ label: title, link: window.location.pathname });
 		const data = await getAntiForgeryToken();
-		csrfTokenStore.set(data.csrfToken); 		
+		csrfTokenStore.set(data.csrfToken);
 	});
 
-
-	csrfTokenStore.subscribe(value => {
-		if(value.length>0){
+	csrfTokenStore.subscribe((value) => {
+		if (value.length > 0) {
 			aftIsReady = true;
 		}
 	});
 
-
- let app;
+	let app;
 	function scrollToTop() {
 		app.scrollIntoView();
 	}
-
 </script>
 
 <div class="app" bind:this={app}>
-<AppShell>
-	<!--header-->
-	<svelte:fragment slot="header">
-		<AppBar padding="0" spacing="space-y-0" background="white">
-			<svelte:fragment slot="headline">
-				<Header />
-				{#if true}
-					<Menu />
+	<AppShell>
+		<!--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>
+
+		<slot name="description" />
+
+		{#if aftIsReady}
+			<div class="flex flex-initial space-x-5">
+				{#if $$slots.left}
+					<div class="p-5 flex-shrink-0 w-96 w-min-96 border-y border-solid border-surface-500">
+						<slot name="left" />
+					</div>
 				{/if}
 
-				<div class="grid grid-cols-2">
-					<Breadcrumb bind:title />
-					<Docs {links} {note} />
-				</div>
-			</svelte:fragment>
-		</AppBar>
-	</svelte:fragment>
-
-	<slot name="description" />
-
-	{#if aftIsReady}
-
-	<div class="flex flex-initial space-x-5">
-		{#if $$slots.left}
-			<div class="p-5 flex-shrink-0 w-96 w-min-96 border-y border-solid border-surface-500">
-				<slot name="left" />
-			</div>
-		{/if}
-
-		{#if contentLayoutType === pageContentLayoutType.center}
-			<div class="flex justify-center w-screen">
-				<div class="w-full max-w-7xl p-5 space-y-5 border-y border-solid border-surface-500">
-					<slot />
-				</div>
-			</div>
-		{/if}
+				{#if contentLayoutType === pageContentLayoutType.center}
+					<div class="flex justify-center w-screen">
+						<div class="w-full max-w-7xl p-5 space-y-5 border-y border-solid border-surface-500">
+							<slot />
+						</div>
+					</div>
+				{/if}
 
-		{#if contentLayoutType === pageContentLayoutType.full}
-			<div class="p-5 space-y-5 border-y border-solid border-surface-500 w-screen">
-				<slot />
-			</div>
-		{/if}
+				{#if contentLayoutType === pageContentLayoutType.full}
+					<div class="p-5 space-y-5 border-y border-solid border-surface-500 w-screen">
+						<slot />
+					</div>
+				{/if}
 
-		{#if $$slots.right}
-			<div class=" p-5 fixed flex-shrink-0 w-96 border-y border-solid border-surface-500">
-				<slot name="right" />
+				{#if $$slots.right}
+					<div class=" p-5 fixed flex-shrink-0 w-96 border-y border-solid border-surface-500">
+						<slot name="right" />
+					</div>
+				{/if}
 			</div>
 		{/if}
-	</div>
-
-	{/if}
-
-	<GoToTop/>
-	<HelpPopUp active={help} />
-	<Notification />
-
-	
-	<svelte:fragment slot="footer">
-		{#if footer}
-			<Footer />
-		{/if}
 
-	</svelte:fragment>
+		<GoToTop />
+		<HelpPopUp active={help} />
+		<Notification />
 
-</AppShell>
+		<svelte:fragment slot="footer">
+			{#if footer}
+				<Footer />
+			{/if}
+		</svelte:fragment>
+	</AppShell>
 </div>
-

package/src/lib/components/page/breadcrumb/Breadcrumb.svelte

@@ -3,7 +3,7 @@
 	import type { breadcrumbItemType } from '$models/Page';
 	import { browser } from '$app/environment';
 	import { onMount } from 'svelte';
-	import {getApplicationName} from './BreadcrumbDataCaller';
+	import { getApplicationName } from './BreadcrumbDataCaller';
 
 	export let title;
 
@@ -22,12 +22,11 @@
 		list = value?.items;
 	});
 
-	let applicationName = "BEXIS2";
+	let applicationName = 'BEXIS2';
 
 	onMount(async () => {
 		applicationName = await getApplicationName();
 	});
-
 </script>
 
 <div class="px-5 py-2">

package/src/lib/components/page/breadcrumb/BreadcrumbDataCaller.js

@@ -1,19 +1,15 @@
 import { Api } from '$lib/services/Api';
 
 export const getApplicationName = async () => {
-    try
-    {
-        const response = await Api.get(`/Home/GetApplicationName`);
+	try {
+		const response = await Api.get(`/Home/GetApplicationName`);
 
-        if(response.status == 200)
-        {
-            return response.data;
-        }
-        else
-        {
-            return "BEXIS2";
-        }
-    } catch (error) {
-        return "BEXIS2"
-    }
-}
+		if (response.status == 200) {
+			return response.data;
+		} else {
+			return 'BEXIS2';
+		}
+	} catch (error) {
+		return 'BEXIS2';
+	}
+};

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

@@ -9,17 +9,12 @@
 	export let menuBar: menuItemType[];
 
 	let comboboxValue: string;
-	
 </script>
 
 {#if menuBar}
 	<div class="h-full place-self-center sm:flex gap-2 w-full sm:w-auto">
-
 		{#each menuBar as menubarItem}
-
-				<Item {menubarItem} {comboboxValue} />
-
+			<Item {menubarItem} {comboboxValue} />
 		{/each}
-
 	</div>
 {/if}

package/src/lib/components/page/menu/MenuDataCaller.js

@@ -3,7 +3,7 @@ import { Api } from '$lib/services/Api';
 export const getMenuItems = async () => {
 	try {
 		const response = await Api.get('/menu');
-		
+
 		return response.data;
 	} catch (error) {
 		console.error(error);

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

@@ -14,7 +14,7 @@
 	export let comboboxValue;
 
 	let id = Math.floor(Math.random() * 100).toString();
-	let	idLabel = "menu-"+menubarItem.Title.replaceAll(' ', '-');
+	let idLabel = 'menu-' + menubarItem.Title.replaceAll(' ', '-');
 
 	let popupCombobox: PopupSettings = {
 		event: 'click',
@@ -27,10 +27,11 @@
 
 {#if menubarItem.Items.length < 1}
 	<div class="p-2">
-
-		<button id={id+"bt"} class="grid" use:popup={popupCombobox} >
-			<a class="grid" href={menubarItem.Url} target="{menubarItem.Target}">
-				<span class="capitalize whitespace-nowrap text-lg hover:text-secondary-500">{comboboxValue ?? menubarItem.Title}</span>
+		<button id={id + 'bt'} class="grid" use:popup={popupCombobox}>
+			<a class="grid" href={menubarItem.Url} target={menubarItem.Target}>
+				<span class="capitalize whitespace-nowrap text-lg hover:text-secondary-500"
+					>{comboboxValue ?? menubarItem.Title}</span
+				>
 			</a>
 		</button>
 	</div>
@@ -45,12 +46,13 @@
 			<svelte:fragment slot="content"
 				><MenuSublist {id} items={menubarItem.Items} /></svelte:fragment
 			>
-			</AccordionItem
-		>
+		</AccordionItem>
 	</div>
 	<div class="hidden sm:block place-self-center" use:popup={popupCombobox}>
 		<button id={idLabel} class="flex items-center gap-x-1 px-2">
-			<span class="capitalize text-lg whitespace-nowrap hover:text-secondary-500">{menubarItem.Title}▾</span>
+			<span class="capitalize text-lg whitespace-nowrap hover:text-secondary-500"
+				>{menubarItem.Title}▾</span
+			>
 		</button>
 
 		<div class="z-50 w-max" data-popup={id}>

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

@@ -23,48 +23,40 @@
 		}
 	}
 
-	function clickFn(item)
-	{
-		if(item.Title =="Log Off")
-		{
-					logOffFn();
+	function clickFn(item) {
+		if (item.Title == 'Log Off') {
+			logOffFn();
 			return;
-		}
-		else{
-				goTo(item.Url, item.Internal, item.Target);	
+		} else {
+			goTo(item.Url, item.Internal, item.Target);
 		}
 	}
 
-	
 	async function logOffFn() {
-
-		 console.log('logoff');
-				// Prepare the body content for the POST request
-			
-
-			let bodyContent = '__RequestVerificationToken='+ window.antiForgeryToken;
-
-				try {
-									const response = await fetch('/Account/logoff', {
-													method: 'POST',
-													credentials: 'include', // Include cookies for authentication
-													headers: {
-																	'Content-Type': 'application/x-www-form-urlencoded'
-													},
-													body:bodyContent
-									});
-									if (response.ok) {
-													// Redirect to login page after logout
-													window.location.href = '/Account/Login'; 
-									} else {
-													console.error('Logout failed');
-									}
-					} catch (error) {
-									console.error('Error during logout:', error);
-					}
+		console.log('logoff');
+		// Prepare the body content for the POST request
+
+		let bodyContent = '__RequestVerificationToken=' + window.antiForgeryToken;
+
+		try {
+			const response = await fetch('/Account/logoff', {
+				method: 'POST',
+				credentials: 'include', // Include cookies for authentication
+				headers: {
+					'Content-Type': 'application/x-www-form-urlencoded'
+				},
+				body: bodyContent
+			});
+			if (response.ok) {
+				// Redirect to login page after logout
+				window.location.href = '/Account/Login';
+			} else {
+				console.error('Logout failed');
 			}
-
-
+		} catch (error) {
+			console.error('Error during logout:', error);
+		}
+	}
 </script>
 
 <ListBox class="sm:bg-white sm:border overflow-y-auto max-h-[500px]">
@@ -74,14 +66,16 @@
 		<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/src/lib/components/page/menu/SettingsBar.svelte

@@ -7,7 +7,7 @@
 	import { faCog } from '@fortawesome/free-solid-svg-icons';
 
 	export let menuBar: menuItemType[];
-	console.log("🚀 ~ menuBar:", menuBar)
+	console.log('🚀 ~ menuBar:', menuBar);
 	//uicomponents
 	import MenuSublist from './MenuSublist.svelte';
 
@@ -24,7 +24,10 @@
 	<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
 			>