@bexis2/bexis2-core-ui 0.2.10 → 0.2.12

package/dist/components/form/MultiSelect.svelte

@@ -1,178 +1,163 @@
-<script>
-	import InputContainer from './InputContainer.svelte';
-
-	import Select from 'svelte-select';
-	import { onMount } from 'svelte';
-
-	export let source;
-	export let target;
-	export let id;
-	export let title;
-	export let itemId = 'value';
-	export let itemLabel = 'label';
-	export let itemGroup = 'group';
-	export let isMulti = true;
-	export let complexSource = false;
-	export let complexTarget = false;
-	export let required = false;
-	export let feedback = [''];
-	export let placeholder = "-- Please select --"
-	export let invalid = false;
-	export let loading = false;
-	export let help = false;
-
-
-	let isLoaded = false;
-
-	$: value = null;
-	$: updateTarget(value);
-
-	let groupBy
-	$:groupBy;
-
-
-
-	function updateTarget(selection) {
-		//different cases
-		//a) source is complex model is simple return array
-		if (complexSource && !complexTarget && isLoaded && isMulti) {
-			//console.log('a) source is complex model is simple');
-
-			target = [];
-			for (let i in selection) {
-				let item = selection[i];
-				target.push(item[itemId]);
-			}
-		}
-
-
-		if (!complexSource && !complexTarget && isLoaded && isMulti) {
-			target = [];
-			for (let i in selection) {
-				target.push(selection[i].value);
-			}
-		}
-
-		if (complexSource && complexTarget && isLoaded && isMulti)
-		{
-			 //console.log("both complex",selection);
-			 target = selection;
-			
-		}
-
-		if(complexSource && complexTarget && isLoaded &&!isMulti)
-		{
-			target = selection
-		}
-
-		if(!complexSource && !complexTarget && isLoaded &&!isMulti)
-		{
-	
-			target = selection.value
-		}
-
-		if(complexSource && !complexTarget && isLoaded &&!isMulti)
-		{
-			 target = selection[itemLabel]
-				console.log("selection",selection)
-		}
-
-		
-		// //console.log('selection ' + title, selection);
-		// //console.log('target ' + title, target);
-	}
-
-	onMount(async () => {
-		console.log("on mount multiselect");
-		////console.log(source);
-
-		//a) source is complex model is simple
-		if (complexSource && !complexTarget && isMulti) {
-			let items = [];
-			// event.detail will be null unless isMulti is true and user has removed a single item
-			for (let i in target) {
-				let t = target[i];
-				items.push(source.find((item) => item[itemId] === t));
-			}
-
-			isLoaded = true;
-			if (items.length > 0) {
-				value = items;
-			}
-			////console.log(value);
-			groupBy = (item) => item[itemGroup]
-		}
-
-		if (complexSource && complexTarget && isMulti)
-		{
-				value = target
-				isLoaded = true;
-				groupBy = (item) => item[itemGroup]
-		}
-
-		//b) simple liust and simple model
-		if (!complexSource && !complexTarget && isMulti) {
-			////console.log("source", source);
-			////console.log("target",target);
-			isLoaded = true;
-			//set target only if its nit empty
-			if (target != null && target !== undefined && target != '') {
-				value = target;
-			}
-		}
-
-		if(!isMulti)
-		{
-			//console.log("onmount",complexSource,complexTarget,value,target)
-			if(!complexSource && !complexTarget) 
-			{
-					value = {
-							value:target,
-							label:target
-					}
-			}
-
-			if(complexSource && complexTarget) 
-			{
-					value = target;
-					groupBy = (item) => item[itemGroup]
-			}
-
-			if(complexSource && !complexTarget) 
-			{
-					//value = target
-					console.log("this case is currently not supported (complexSource,complexTarget,isMulti)", complexSource, complexTarget,isMulti)
-			}
-			
-			isLoaded = true;
-		}
-
-	});
-</script>
-
-
-<InputContainer {id} label={title} {feedback} {required} {help}>
-	<Select
-	 {id}
-		items={source}
-		{groupBy}
-		{itemId}
-		label = {itemLabel}
-		multiple={isMulti}
-		bind:value
-		{placeholder}
-		hasError={invalid}
-		{loading}
-		on:change
-		on:input
-		on:focus
-		on:blur
-		on:clear
-		on:loaded
-		on:error
-		on:filter
-		on:hoverItem
-	/>
-
-</InputContainer>
-
+<script>
+	import InputContainer from './InputContainer.svelte';
+
+	import Select from 'svelte-select';
+	import { onMount } from 'svelte';
+
+	export let source;
+	export let target;
+	export let id;
+	export let title;
+	export let itemId = 'value';
+	export let itemLabel = 'label';
+	export let itemGroup = 'group';
+	export let isMulti = true;
+	export let complexSource = false;
+	export let complexTarget = false;
+	export let required = false;
+	export let feedback = [''];
+	export let placeholder = '-- Please select --';
+	export let invalid = false;
+	export let loading = false;
+	export let help = false;
+
+	let isLoaded = false;
+
+	$: value = null;
+	$: updateTarget(value);
+
+	let groupBy;
+	$: groupBy;
+
+	function updateTarget(selection) {
+		//different cases
+		//a) source is complex model is simple return array
+		if (complexSource && !complexTarget && isLoaded && isMulti) {
+			//console.log('a) source is complex model is simple');
+
+			target = [];
+			for (let i in selection) {
+				let item = selection[i];
+				target.push(item[itemId]);
+			}
+		}
+
+		if (!complexSource && !complexTarget && isLoaded && isMulti) {
+			target = [];
+			for (let i in selection) {
+				target.push(selection[i].value);
+			}
+		}
+
+		if (complexSource && complexTarget && isLoaded && isMulti) {
+			//console.log("both complex",selection);
+			target = selection;
+		}
+
+		if (complexSource && complexTarget && isLoaded && !isMulti) {
+			target = selection;
+		}
+
+		if (!complexSource && !complexTarget && isLoaded && !isMulti) {
+			target = selection.value;
+		}
+
+		if (complexSource && !complexTarget && isLoaded && !isMulti) {
+			target = selection[itemLabel];
+			console.log('selection', selection);
+		}
+
+		// //console.log('selection ' + title, selection);
+		// //console.log('target ' + title, target);
+	}
+
+	onMount(async () => {
+		console.log('on mount multiselect');
+		////console.log(source);
+
+		//a) source is complex model is simple
+		if (complexSource && !complexTarget && isMulti) {
+			let items = [];
+			// event.detail will be null unless isMulti is true and user has removed a single item
+			for (let i in target) {
+				let t = target[i];
+				items.push(source.find((item) => item[itemId] === t));
+			}
+
+			isLoaded = true;
+			if (items.length > 0) {
+				value = items;
+			}
+			////console.log(value);
+			groupBy = (item) => item[itemGroup];
+		}
+
+		if (complexSource && complexTarget && isMulti) {
+			value = target;
+			isLoaded = true;
+			groupBy = (item) => item[itemGroup];
+		}
+
+		//b) simple liust and simple model
+		if (!complexSource && !complexTarget && isMulti) {
+			////console.log("source", source);
+			////console.log("target",target);
+			isLoaded = true;
+			//set target only if its nit empty
+			if (target != null && target !== undefined && target != '') {
+				value = target;
+			}
+		}
+
+		if (!isMulti) {
+			//console.log("onmount",complexSource,complexTarget,value,target)
+			if (!complexSource && !complexTarget) {
+				value = {
+					value: target,
+					label: target
+				};
+			}
+
+			if (complexSource && complexTarget) {
+				value = target;
+				groupBy = (item) => item[itemGroup];
+			}
+
+			if (complexSource && !complexTarget) {
+				//value = target
+				console.log(
+					'this case is currently not supported (complexSource,complexTarget,isMulti)',
+					complexSource,
+					complexTarget,
+					isMulti
+				);
+			}
+
+			isLoaded = true;
+		}
+	});
+</script>
+
+<InputContainer {id} label={title} {feedback} {required} {help}>
+	<Select
+		{id}
+		items={source}
+		{groupBy}
+		{itemId}
+		label={itemLabel}
+		multiple={isMulti}
+		bind:value
+		{placeholder}
+		hasError={invalid}
+		{loading}
+		on:change
+		on:input
+		on:focus
+		on:blur
+		on:clear
+		on:loaded
+		on:error
+		on:filter
+		on:hoverItem
+	/>
+</InputContainer>

package/dist/components/form/TextArea.svelte

@@ -8,16 +8,16 @@ export let required = false;
 export let feedback = [""];
 export let placeholder = "";
 export let help = false;
-</script>
-
-<InputContainer {id} {label} {feedback} {required} {help}>
-	<textarea
-		{id}
-		class="textarea variant-form-material"
-		class:input-success={valid}
-		class:input-error={invalid}
-		bind:value
-		on:input
-		{placeholder}
-	/>
-</InputContainer>
+</script>
+
+<InputContainer {id} {label} {feedback} {required} {help}>
+	<textarea
+		{id}
+		class="textarea variant-form-material"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:value
+		on:input
+		{placeholder}
+	/>
+</InputContainer>

package/dist/components/form/TextInput.svelte

@@ -10,8 +10,6 @@ export let placeholder = "";
 export let help = false;
 </script>
 
-
-
 <InputContainer {id} {label} {feedback} {required} {help}>
 	<input
 		{id}

package/dist/components/page/Alert.svelte

@@ -7,33 +7,31 @@ export let cssClass = "";
 export let deleteBtn = true;
 $:
   show = true;
-</script>
-{#if show}
-
-<aside class="alert {cssClass}" transition:fade|local={{ duration: 100 }}>
- <!-- Icon -->
- <!-- <div>(icon)</div> -->
- <!-- Message -->
- <div class="alert-message">
-  
-    {#if title}
-      <h3 class="h3">{title}</h3>
-     {/if}
-     <p>{message}
-      <slot></slot>
-     </p>
- </div>
- <!-- Actions -->
- <div class="alert-actions">
-  <slot name="actions"/>
-
-  {#if deleteBtn}
-   <button class="btn hover:text-primary-100" on:click={()=>show = false}>
-    <Fa icon={faXmark} />
-   </button> 
-  {/if}
-
- </div>
-</aside>
-
-{/if}
+</script>
+
+{#if show}
+	<aside class="alert {cssClass}" transition:fade|local={{ duration: 100 }}>
+		<!-- Icon -->
+		<!-- <div>(icon)</div> -->
+		<!-- Message -->
+		<div class="alert-message">
+			{#if title}
+				<h3 class="h3">{title}</h3>
+			{/if}
+			<p>
+				{message}
+				<slot />
+			</p>
+		</div>
+		<!-- Actions -->
+		<div class="alert-actions">
+			<slot name="actions" />
+
+			{#if deleteBtn}
+				<button class="btn hover:text-primary-100" on:click={() => (show = false)}>
+					<Fa icon={faXmark} />
+				</button>
+			{/if}
+		</div>
+	</aside>
+{/if}

package/dist/components/page/BackToTop.svelte

@@ -1,30 +1,30 @@
-<script>
- export let showOnPx = 150;
- let hidden = true;
-
- function goTop() {
-   document.body.scrollIntoView();
- }
-
- function scrollContainer() {
-   return document.documentElement || document.body;
- }
-
- function handleOnScroll() {
-   if (!scrollContainer()) {
-     return;
-   }
-
-   if (scrollContainer().scrollTop > showOnPx) {
-     hidden = false;
-   } else {
-     hidden = true;
-   }
- }
-</script>
-
-<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>
-</div>
+<script>
+	export let showOnPx = 150;
+	let hidden = true;
+
+	function goTop() {
+		document.body.scrollIntoView();
+	}
+
+	function scrollContainer() {
+		return document.documentElement || document.body;
+	}
+
+	function handleOnScroll() {
+		if (!scrollContainer()) {
+			return;
+		}
+
+		if (scrollContainer().scrollTop > showOnPx) {
+			hidden = false;
+		} else {
+			hidden = true;
+		}
+	}
+</script>
+
+<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>
+</div>

package/dist/components/page/Docs.svelte

@@ -12,22 +12,25 @@ const noteSettings = {
   target: "noteTarget",
   placement: "bottom"
 };
-</script>
-<div class="text-right p-2">
-{#if note}
-<span class="chip variant-soft hover:variant-filled" use:popup={noteSettings} >
- <span><Fa icon={faQuestion}/></span>
-</span>
-
-<div class="card p-4 variant-filled-primary w-60 z-50 text-left shadow-md" data-popup="noteTarget">
-	{note}
-</div>
-{/if}
-
-{#each links as link}
- <span class="chip variant-soft hover:variant-filled" on:click={()=>goTo(link.url,false)}>
-  <span>{link.label}</span>
- </span>
-{/each}
-</div>
-
+</script>
+
+<div class="text-right p-2">
+	{#if note}
+		<span class="chip variant-soft hover:variant-filled" use:popup={noteSettings}>
+			<span><Fa icon={faQuestion} /></span>
+		</span>
+
+		<div
+			class="card p-4 variant-filled-primary w-60 z-50 text-left shadow-md"
+			data-popup="noteTarget"
+		>
+			{note}
+		</div>
+	{/if}
+
+	{#each links as link}
+		<span class="chip variant-soft hover:variant-filled" on:click={() => goTo(link.url, false)}>
+			<span>{link.label}</span>
+		</span>
+	{/each}
+</div>

package/dist/components/page/Docs.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { linkType } from "../../models/Models";
+import type { linkType } from '../../models/Models';
 declare const __propDef: {
     props: {
         links?: linkType[] | undefined;

package/dist/components/page/ErrorMessage.svelte

@@ -0,0 +1,9 @@
+<script>export let error;
+</script>
+
+<div class="card bg-error-300 border-solid border-2 border-error-500 shadow-md max-w-md">
+	<div class="p-5 space-y-4">
+		<h3 class="h3">{error.name}</h3>
+		<p>{error.message}</p>
+	</div>
+</div>

package/dist/components/page/ErrorMessage.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        error: Error;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ErrorMessageProps = typeof __propDef.props;
+export type ErrorMessageEvents = typeof __propDef.events;
+export type ErrorMessageSlots = typeof __propDef.slots;
+export default class ErrorMessage extends SvelteComponentTyped<ErrorMessageProps, ErrorMessageEvents, ErrorMessageSlots> {
+}
+export {};

package/dist/components/page/Footer.svelte

@@ -8,8 +8,8 @@ onMount(async () => {
   content = await getFooter();
   console.log(content);
 });
-</script>
-
-{#if content!=undefined}
-{@html content}
-{/if}
+</script>
+
+{#if content != undefined}
+	{@html content}
+{/if}

package/dist/components/page/Header.svelte

@@ -8,7 +8,8 @@ onMount(async () => {
   content = await getHeader();
   console.log(content);
 });
-</script>
-{#if content!=undefined}
-{@html content}
-{/if}
+</script>
+
+{#if content != undefined}
+	{@html content}
+{/if}