@bexis2/bexis2-core-ui 0.2.22 → 0.2.23

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

@@ -1,178 +1,178 @@
-<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;
-	export let clearable = true;
-
-	let isLoaded = false;
-
-	$: value = null;
-	$: updateTarget(value);
-	$: target, setValue(target);
-
-	let groupBy;
-	$: groupBy;
-
-	function updateTarget(selection) {
-		console.log("UPDATE target",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("OnMount", target)
-			if(complexSource && complexTarget) // after on mount a setValue is needed when data is complex
-			{
-					setValue(target);
-			}
-	});
-
-	function setValue(t) {
-		console.log("Set Value",t);
-		//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 t) {
-				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 = t;
-			isLoaded = true;
-			groupBy = (item) => item[itemGroup];
-		}
-
-		//b) simple liust and simple model
-		if (!complexSource && !complexTarget && isMulti) {
-			console.log('b) simple liust and simple model');
-			//console.log('source', source);
-			//console.log("target",t);
-			isLoaded = true;
-			//set target only if its nit empty
-			if (t != null && t !== undefined && t != '') {
-				//console.log('target', t);
-				value = t;
-			}
-		}
-
-		if (!isMulti) {
-			//console.log("onmount",complexSource,complexTarget,value,target)
-			if (!complexSource && !complexTarget) {
-				value = {
-					value: t,
-					label: t
-				};
-			}
-
-			if (complexSource && complexTarget) {
-				value = t;
-				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;
-		}
-
-		console.log(t,value)
-	}
-</script>
-
-<InputContainer {id} label={title} {feedback} {required} {help}>
-	<Select
-		{id}
-		items={source}
-		{groupBy}
-		{itemId}
-		label={itemLabel}
-		multiple={isMulti}
-		bind:value
-		{placeholder}
-		hasError={invalid}
-		{loading}
-		{clearable}
-		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;
+	export let clearable = true;
+
+	let isLoaded = false;
+
+	$: value = null;
+	$: updateTarget(value);
+	$: target, setValue(target);
+
+	let groupBy;
+	$: groupBy;
+
+	function updateTarget(selection) {
+		console.log("UPDATE target",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("OnMount", target)
+			if(complexSource && complexTarget) // after on mount a setValue is needed when data is complex
+			{
+					setValue(target);
+			}
+	});
+
+	function setValue(t) {
+		console.log("Set Value",t);
+		//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 t) {
+				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 = t;
+			isLoaded = true;
+			groupBy = (item) => item[itemGroup];
+		}
+
+		//b) simple liust and simple model
+		if (!complexSource && !complexTarget && isMulti) {
+			console.log('b) simple liust and simple model');
+			//console.log('source', source);
+			//console.log("target",t);
+			isLoaded = true;
+			//set target only if its nit empty
+			if (t != null && t !== undefined && t != '') {
+				//console.log('target', t);
+				value = t;
+			}
+		}
+
+		if (!isMulti) {
+			//console.log("onmount",complexSource,complexTarget,value,target)
+			if (!complexSource && !complexTarget) {
+				value = {
+					value: t,
+					label: t
+				};
+			}
+
+			if (complexSource && complexTarget) {
+				value = t;
+				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;
+		}
+
+		console.log(t,value)
+	}
+</script>
+
+<InputContainer {id} label={title} {feedback} {required} {help}>
+	<Select
+		{id}
+		items={source}
+		{groupBy}
+		{itemId}
+		label={itemLabel}
+		multiple={isMulti}
+		bind:value
+		{placeholder}
+		hasError={invalid}
+		{loading}
+		{clearable}
+		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,28 +1,28 @@
-<script lang="ts">
-	import InputContainer from './InputContainer.svelte';
-	import { helpStore } from '$store/pageStores';
-
-	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}>
-	<input
-		{id}
-		class="input variant-form-material"
-		type="number"
-		class:input-success={valid}
-		class:input-error={invalid}
-		bind:value
-		on:input
-		{placeholder}
-	/>
-</InputContainer>
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+	import { helpStore } from '$store/pageStores';
+
+	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}>
+	<input
+		{id}
+		class="input variant-form-material"
+		type="number"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:value
+		on:input
+		{placeholder}
+	/>
+</InputContainer>

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

@@ -1,26 +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

@@ -1,26 +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}>
-	<input
-		{id}
-		class="input variant-form-material"
-		type="text"
-		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}>
+	<input
+		{id}
+		class="input variant-form-material"
+		type="text"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:value
+		on:input
+		{placeholder}
+	/>
+</InputContainer>

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

@@ -1,41 +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 />
-			</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>