@bexis2/bexis2-core-ui 0.2.31 → 0.3.0

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

@@ -1,24 +1,24 @@
-<script lang="ts">
-	import InputContainer from './InputContainer.svelte';
-
-	export let id: string = '';
-	export let label: string = '';
-	export let checked: boolean = false;
-
-	export let valid: boolean;
-	export let invalid: boolean;
-	export let required: boolean;
-	export let feedback: [];
-</script>
-
-<InputContainer {label} {feedback} {required}>
-	<input
-		{id}
-		class="input variant-form-material"
-		type="checkbox"
-		class:input-success={valid}
-		class:input-error={invalid}
-		bind:checked
-		on:input
-	/>
-</InputContainer>
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+
+	export let id: string = '';
+	export let label: string = '';
+	export let checked: boolean = false;
+
+	export let valid: boolean;
+	export let invalid: boolean;
+	export let required: boolean;
+	export let feedback: [];
+</script>
+
+<InputContainer {label} {feedback} {required}>
+	<input
+		{id}
+		class="input variant-form-material"
+		type="checkbox"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:checked
+		on:input
+	/>
+</InputContainer>

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

@@ -1,29 +1,29 @@
-<script lang="ts">
-	import InputContainer from './InputContainer.svelte';
-
-	export let id;
-	export let source;
-	export let target;
-	export let title;
-	export let description = '';
-	export let key;
-	export let help = false;
-
-	let required = false;
-	let feedback: [];
-</script>
-
-<InputContainer {id} label={title} {feedback} {required} {help}>
-	{#each source as item}
-		<label class="flex items-center space-x-2" for={key}>
-			<input
-				class="checkbox"
-				type="checkbox"
-				bind:group={target}
-				checked={item.key}
-				value={item.key}
-			/>
-			<p>{item.value}</p>
-		</label>
-	{/each}
-</InputContainer>
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+
+	export let id;
+	export let source;
+	export let target;
+	export let title;
+	export let description = '';
+	export let key;
+	export let help = false;
+
+	let required = false;
+	let feedback: [];
+</script>
+
+<InputContainer {id} label={title} {feedback} {required} {help}>
+	{#each source as item}
+		<label class="flex items-center space-x-2" for={key}>
+			<input
+				class="checkbox"
+				type="checkbox"
+				bind:group={target}
+				checked={item.key}
+				value={item.key}
+			/>
+			<p>{item.value}</p>
+		</label>
+	{/each}
+</InputContainer>

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

@@ -1,21 +1,21 @@
-<script lang="ts">
-	import InputContainer from './InputContainer.svelte';
-
-	export let source;
-	export let target;
-	export let title;
-	export let description = '';
-	export let key;
-
-	let required = false;
-	let feedback: [];
-</script>
-
-<InputContainer label={title} {feedback} {required}>
-	{#each source as item}
-		<label class="flex items-center space-x-2" for={key}>
-			<input class="checkbox" type="checkbox" bind:group={target} value={item} />
-			<p>{item}</p>
-		</label>
-	{/each}
-</InputContainer>
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+
+	export let source;
+	export let target;
+	export let title;
+	export let description = '';
+	export let key;
+
+	let required = false;
+	let feedback: [];
+</script>
+
+<InputContainer label={title} {feedback} {required}>
+	{#each source as item}
+		<label class="flex items-center space-x-2" for={key}>
+			<input class="checkbox" type="checkbox" bind:group={target} value={item} />
+			<p>{item}</p>
+		</label>
+	{/each}
+</InputContainer>

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

@@ -1,27 +1,27 @@
-<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 help = false;
-	export let disabled: boolean = false;
-</script>
-
-<InputContainer {id} {label} {feedback} {required} {help}>
-	<input
-		{id}
-		class="input variant-form-material"
-		type="date"
-		class:input-success={valid}
-		class:input-error={invalid}
-		bind:value
-		on:input
-		{disabled}
-	/>
-</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 help = false;
+	export let disabled: boolean = false;
+</script>
+
+<InputContainer {id} {label} {feedback} {required} {help}>
+	<input
+		{id}
+		class="input variant-form-material"
+		type="date"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:value
+		on:input
+		{disabled}
+	/>
+</InputContainer>

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

@@ -1,54 +1,54 @@
-<script>
-	import InputContainer from './InputContainer.svelte';
-
-	export let id;
-	export let source;
-	export let target;
-	export let title;
-	export let valid = false;
-	export let invalid = false;
-	export let feedback = [''];
-	export let required = false;
-	export let complexTarget = false;
-	export let help = false;
-
-	$: selected = null;
-
-	$: updatedSelectedValue(target);
-	$: updatedTarget(selected);
-
-	function updatedSelectedValue(selection) {
-		if (selection != null) {
-			if (complexTarget) {
-				selected = selection.id;
-			} else {
-				selected = selection;
-			}
-		}
-	}
-
-	function updatedTarget(id) {
-		if (complexTarget) {
-			target = source.find((opt) => opt.id === id);
-		} else {
-			target = id;
-		}
-	}
-</script>
-
-<InputContainer {id} label={title} {feedback} {required} {help}>
-	<select
-		{id}
-		class="select variant-form-material"
-		class:input-success={valid}
-		class:input-error={invalid}
-		bind:value={selected}
-		on:change
-		on:select
-	>
-		<option value={null}>-- Please select --</option>
-		{#each source as e}
-			<option value={e.id}>{e.text}</option>
-		{/each}
-	</select>
-</InputContainer>
+<script>
+	import InputContainer from './InputContainer.svelte';
+
+	export let id;
+	export let source;
+	export let target;
+	export let title;
+	export let valid = false;
+	export let invalid = false;
+	export let feedback = [''];
+	export let required = false;
+	export let complexTarget = false;
+	export let help = false;
+
+	$: selected = null;
+
+	$: updatedSelectedValue(target);
+	$: updatedTarget(selected);
+
+	function updatedSelectedValue(selection) {
+		if (selection != null) {
+			if (complexTarget) {
+				selected = selection.id;
+			} else {
+				selected = selection;
+			}
+		}
+	}
+
+	function updatedTarget(id) {
+		if (complexTarget) {
+			target = source.find((opt) => opt.id === id);
+		} else {
+			target = id;
+		}
+	}
+</script>
+
+<InputContainer {id} label={title} {feedback} {required} {help}>
+	<select
+		{id}
+		class="select variant-form-material"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:value={selected}
+		on:change
+		on:select
+	>
+		<option value={null}>-- Please select --</option>
+		{#each source as e}
+			<option value={e.id}>{e.text}</option>
+		{/each}
+	</select>
+</InputContainer>

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

@@ -23,7 +23,6 @@
 	export let clearable = true;
 	export let disabled = false;
 
-
 	let isLoaded = false;
 
 	$: value = null;
@@ -78,11 +77,11 @@
 	}
 
 	onMount(async () => {
-		 //console.log("OnMount", target)
-			if(complexSource && complexTarget) // after on mount a setValue is needed when data is complex
-			{
-					setValue(target);
-			}
+		//console.log("OnMount", target)
+		if (complexSource && complexTarget) {
+			// after on mount a setValue is needed when data is complex
+			setValue(target);
+		}
 	});
 
 	function setValue(t) {

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

@@ -1,30 +1,30 @@
-<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;
-	export let disabled: 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}
-		{disabled}
-	/>
-</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;
+	export let disabled: 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}
+		{disabled}
+	/>
+</InputContainer>

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

@@ -1,28 +1,28 @@
-<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;
-	export let disabled: 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}
-		{disabled}
-	/>
-</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;
+	export let disabled: 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}
+		{disabled}
+	/>
+</InputContainer>

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

@@ -1,28 +1,28 @@
-<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;
-	export let disabled: 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}
-		{disabled}
-	/>
-</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;
+	export let disabled: 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}
+		{disabled}
+	/>
+</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>