@bexis2/bexis2-core-ui 0.2.11 → 0.2.13

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import InputContainer from './InputContainer.svelte';
-	import { helpStore } from '$store/pageStores'
+	import { helpStore } from '$store/pageStores';
 
 	export let id: string = '';
 	export let label: string = '';
@@ -10,10 +10,8 @@
 	export let invalid: boolean = false;
 	export let required: boolean = false;
 	export let feedback: string[] = [''];
-	export let placeholder: string = "";
-	export let help:boolean=false;
-
-
+	export let placeholder: string = '';
+	export let help: boolean = false;
 </script>
 
 <InputContainer {id} {label} {feedback} {required} {help}>

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

@@ -1,27 +1,26 @@
-<script lang="ts">
-	import InputContainer from './InputContainer.svelte';
-
-	export let id: string = '';
-	export let label: string = '';
-	export let value: string = '';
-
-	export let valid: boolean = false;
-	export let invalid: boolean = false;
-	export let required: boolean = false;
-	export let feedback: string[] = [''];
-	export let placeholder: string = "";
-	export let help:boolean=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 lang="ts">
+	import InputContainer from './InputContainer.svelte';
+
+	export let id: string = '';
+	export let label: string = '';
+	export let value: string = '';
+
+	export let valid: boolean = false;
+	export let invalid: boolean = false;
+	export let required: boolean = false;
+	export let feedback: string[] = [''];
+	export let placeholder: string = '';
+	export let help: boolean = 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>

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

@@ -8,13 +8,10 @@
 	export let invalid: boolean = false;
 	export let required: boolean = false;
 	export let feedback: string[] = [''];
-	export let placeholder: string ="";
-	export let help:boolean=false;
-
+	export let placeholder: string = '';
+	export let help: boolean = false;
 </script>
 
-
-
 <InputContainer {id} {label} {feedback} {required} {help}>
 	<input
 		{id}

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

@@ -1,45 +1,41 @@
-<script lang="ts">
-
- import Fa from 'svelte-fa';
-
-	import { faXmark } from '@fortawesome/free-solid-svg-icons';
-
- import {fade} from 'svelte/transition' 
-
- export let title:string = "";
- export let message:string = "";
- export let cssClass:string= "";
- export let deleteBtn:boolean = 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 lang="ts">
+	import Fa from 'svelte-fa';
+
+	import { faXmark } from '@fortawesome/free-solid-svg-icons';
+
+	import { fade } from 'svelte/transition';
+
+	export let title: string = '';
+	export let message: string = '';
+	export let cssClass: string = '';
+	export let deleteBtn: boolean = 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 />
+			</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/src/lib/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>