@bexis2/bexis2-core-ui 0.4.96 → 0.4.97

package/dist/components/form/DatePickerInput.svelte

@@ -33,33 +33,55 @@ if (mode === "datetime") {
 }
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
-<!-- 1. Wrap everything in a relative container so the icon positions against this boundary -->
-<div class="relative w-full">
-    
-    <SveltyPicker
-        {mode}
-        name={label}
-        {format}
-        {displayFormat}
-        {initialDate}
-        bind:value
-        on:input
-        on:change
-        {disabled}
-        {placeholder}
-        manualInput={true}
-        
-        inputClasses="input variant-form-material bg-zinc-50 dark:bg-zinc-700 placeholder:text-gray-400 pr-10 {valid ? 'input-success' : ''} {invalid ? 'input-error' : ''}"
-    />
-	{#if mode === 'time'}
-		<Fa icon={faClock} class="absolute inset-y-2 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300" />
-	{:else if mode === 'date' }
-		<Fa icon={faCalendar} class="absolute inset-y-2 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300" />
-	{:else if mode === 'datetime'}
-		<Fa icon={faCalendar} class="absolute inset-y-2 right-5 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300" />
-		<Fa icon={faClock} class="absolute inset-y-2 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300" />
-	{/if}
-</div>
-	
+<InputContainer
+	{id}
+	{label}
+	{feedback}
+	{required}
+	{help}
+	{description}
+	{showDescription}
+	{showIcon}
+	on:showDescription
+	on:hideDescription
+>
+	<!-- 1. Wrap everything in a relative container so the icon positions against this boundary -->
+	<div class="relative w-full">
+		<SveltyPicker
+			{mode}
+			name={label}
+			{format}
+			{displayFormat}
+			{initialDate}
+			bind:value
+			on:input
+			on:change
+			{disabled}
+			{placeholder}
+			manualInput={true}
+			inputClasses="input variant-form-material bg-zinc-50 dark:bg-zinc-700 placeholder:text-gray-400 pr-10 {valid
+				? 'input-success'
+				: ''} {invalid ? 'input-error' : ''}"
+		/>
+		{#if mode === 'time'}
+			<Fa
+				icon={faClock}
+				class="absolute inset-y-2 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300"
+			/>
+		{:else if mode === 'date'}
+			<Fa
+				icon={faCalendar}
+				class="absolute inset-y-2 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300"
+			/>
+		{:else if mode === 'datetime'}
+			<Fa
+				icon={faCalendar}
+				class="absolute inset-y-2 right-5 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300"
+			/>
+			<Fa
+				icon={faClock}
+				class="absolute inset-y-2 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300"
+			/>
+		{/if}
+	</div>
 </InputContainer>

package/dist/components/form/Dropdown.svelte

@@ -20,16 +20,27 @@
 
 	function updatedSelectedValue(selection) {
 		if (selection != null) {
-				selected = selection;
+			selected = selection;
 		}
 	}
 
 	function updatedTarget(value) {
-			target = value;		
+		target = value;
 	}
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
+<InputContainer
+	{id}
+	label={title}
+	{feedback}
+	{required}
+	{help}
+	{description}
+	{showDescription}
+	{showIcon}
+	on:showDescription
+	on:hideDescription
+>
 	<select
 		{id}
 		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/dist/components/form/DropdownKvP.svelte

@@ -11,7 +11,7 @@
 	export let required = false;
 	export let complexTarget = false;
 	export let help = false;
-	export	let description = '';
+	export let description = '';
 	export let showDescription = false;
 	export let showIcon = false;
 	$: selected = null;
@@ -38,7 +38,18 @@
 	}
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
+<InputContainer
+	{id}
+	label={title}
+	{feedback}
+	{required}
+	{help}
+	{description}
+	{showDescription}
+	{showIcon}
+	on:showDescription
+	on:hideDescription
+>
 	<select
 		{id}
 		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/dist/components/form/InputContainer.svelte

@@ -36,33 +36,35 @@ export function onMouseOut() {
 	on:focus={onMouseOver}
 	on:mouseout={onMouseOut}
 	on:blur={onMouseOut}
-	on:focusin={onMouseOver}  
-    on:focusout={onMouseOut}
-
+	on:focusin={onMouseOver}
+	on:focusout={onMouseOut}
 >
-	<label class="label w-full flex" for="{id}">
+	<label class="label w-full flex" for={id}>
 		<span class="grow"
 			>{label}
-			{#if required} <span class="text-xs text-red-600">*</span> {/if}
+			{#if required}
+				<span class="text-xs text-red-600">*</span>
+			{/if}
 		</span>
 		{#if description && showIcon}
-				<button class="badge " on:click={()=>showDescription = !showDescription}><Fa icon={faQuestion} /></button>
+			<button class="badge" on:click={() => (showDescription = !showDescription)}
+				><Fa icon={faQuestion} /></button
+			>
 		{/if}
 	</label>
 
-
 	{#if description && showDescription}
-		<div	class="card text-sm text-gray-500 p-2 mb-2">{@html description}</div>
+		<div class="card text-sm text-gray-500 p-2 mb-2">{@html description}</div>
 	{/if}
 	<slot />
 	<div class="min-h-5">
-	<span class="text-xs text-error-600 ">
-	{#if feedback}
-			<ul>
-				{#each feedback as message}
-					<li>{message}</li>
-				{/each}
-			</ul>
+		<span class="text-xs text-error-600">
+			{#if feedback}
+				<ul>
+					{#each feedback as message}
+						<li>{message}</li>
+					{/each}
+				</ul>
 			{/if}
 		</span>
 	</div>

package/dist/components/form/MultiSelect.svelte

@@ -32,10 +32,10 @@
 
 	$: value = '';
 	$: updateTarget(value);
-	$: target, setValue(target);
+	$: (target, setValue(target));
 
 	let groupBy;
-	$: groupBy = itemGroup ? (item) => item[itemGroup] : undefined; 
+	$: groupBy = itemGroup ? (item) => item[itemGroup] : undefined;
 
 	const dispatch = createEventDispatcher();
 
@@ -47,8 +47,6 @@
 			return;
 		}
 
-		
-
 		//console.log('update');
 		//different cases
 		//a) source is complex model is simple return array
@@ -151,28 +149,23 @@
 		if (!isMulti) {
 			//console.log("onmount",complexSource,complexTarget,value,target)
 			if (!complexSource && !complexTarget) {
-
-
-				if(groupBy) { // if groupby is set, the value needs to be set as object with label and value, otherwise the select component does not recognize the value
+				if (groupBy) {
+					// if groupby is set, the value needs to be set as object with label and value, otherwise the select component does not recognize the value
+					value = {
+						value: t,
+						label: t
+					};
+				} else //	if there is no groupby, the value can be set as simple value, otherwise the select component does not recognize the value
+				{
+					if (t === null || t === undefined || t === '') {
+						value = '';
+					} else {
 						value = {
-								value: t,
-								label: t
-							};
+							value: t,
+							label: t
+						};
 					}
-					else //	if there is no groupby, the value can be set as simple value, otherwise the select component does not recognize the value
-					{
-							if(t === null || t === undefined || t === '') {
-									value = ''
-								}
-								else
-								{
-									value = {
-										value: t,
-										label: t
-									};
-								}
-					}
-				
+				}
 			}
 
 			if (complexSource && complexTarget) {
@@ -304,13 +297,22 @@
 			target = '';
 		}
 
-		dispatch('clear', e)
-
+		dispatch('clear', e);
 	}
-	
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
+<InputContainer
+	{id}
+	label={title}
+	{feedback}
+	{required}
+	{help}
+	{description}
+	{showDescription}
+	{showIcon}
+	on:showDescription
+	on:hideDescription
+>
 	<Select
 		{id}
 		items={source}
@@ -320,7 +322,6 @@
 		multiple={isMulti}
 		bind:value
 		{placeholder}
-
 		hasError={invalid}
 		{loading}
 		{clearable}

package/dist/components/form/NumberInput.svelte

@@ -24,7 +24,18 @@ $: if (min != void 0 && parseInt(value) < min) {
 }
 </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/dist/components/form/TextArea.svelte

@@ -14,7 +14,18 @@ export let showDescription = false;
 export let showIcon = 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/dist/components/form/TextInput.svelte

@@ -14,7 +14,18 @@ export let showDescription = false;
 export let showIcon = 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/dist/components/page/Alert.svelte

@@ -27,7 +27,11 @@ $: show = true;
 			<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/dist/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/dist/components/page/Docs.svelte

@@ -29,9 +29,16 @@ const noteSettings = {
 	{/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/dist/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/dist/components/page/Page.svelte

@@ -50,70 +50,64 @@ function scrollToTop() {
 </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 />
-				{/if}
-
-				<div class="grid grid-cols-2">
-					<Breadcrumb bind:title />
-					<Docs {links} {note} />
-				</div>
-			</svelte:fragment>
-		</AppBar>
-	</svelte:fragment>
+	<AppShell>
+		<!--header-->
+		<svelte:fragment slot="header">
+			<AppBar padding="0" spacing="space-y-0" background="white">
+				<svelte:fragment slot="headline">
+					<Header />
+					{#if true}
+						<Menu />
+					{/if}
 
-	<slot name="description" />
+					<div class="grid grid-cols-2">
+						<Breadcrumb bind:title />
+						<Docs {links} {note} />
+					</div>
+				</svelte:fragment>
+			</AppBar>
+		</svelte:fragment>
 
-	{#if aftIsReady}
+		<slot name="description" />
 
-	<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 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/dist/components/page/breadcrumb/BreadcrumbDataCaller.js

@@ -1,19 +1,15 @@
 import { Api } from '../../../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/dist/components/page/menu/MenuAccountBar.svelte

@@ -8,12 +8,8 @@ let comboboxValue;
 
 {#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/dist/components/page/menu/MenuDataCaller.js

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

package/dist/components/page/menu/MenuItem.svelte

@@ -16,10 +16,11 @@ let popupCombobox = {
 
 {#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>
@@ -34,12 +35,13 @@ let popupCombobox = {
 			<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}>