@bexis2/bexis2-core-ui 0.2.28 → 0.2.30

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

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

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

@@ -1,46 +1,46 @@
-<script lang="ts">
-	import Fa from 'svelte-fa/src/fa.svelte';
-	import { faQuestion } from '@fortawesome/free-solid-svg-icons';
-	import { goTo } from '$services/BaseCaller';
-
-	// links
-	import type { linkType } from '$lib/models/Models';
-	export let links: linkType[] = [];
-
-	// popup for note
-	import { popup } from '@skeletonlabs/skeleton';
-	import type { PopupSettings } from '@skeletonlabs/skeleton';
-	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
-	import { storePopup } from '@skeletonlabs/skeleton';
-	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
-
-	export let note: string;
-
-	//popup
-	const noteSettings: PopupSettings = {
-		event: 'click',
-		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 lang="ts">
+	import Fa from 'svelte-fa/src/fa.svelte';
+	import { faQuestion } from '@fortawesome/free-solid-svg-icons';
+	import { goTo } from '$services/BaseCaller';
+
+	// links
+	import type { linkType } from '$lib/models/Models';
+	export let links: linkType[] = [];
+
+	// popup for note
+	import { popup } from '@skeletonlabs/skeleton';
+	import type { PopupSettings } from '@skeletonlabs/skeleton';
+	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
+	import { storePopup } from '@skeletonlabs/skeleton';
+	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+
+	export let note: string;
+
+	//popup
+	const noteSettings: PopupSettings = {
+		event: 'click',
+		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>

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

@@ -1,10 +1,10 @@
-<script lang="ts">
-	export let error: 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>
+<script lang="ts">
+	export let error: 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/src/lib/components/page/Footer.svelte

@@ -1,18 +1,18 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { getFooter } from './PageCaller';
-
-	let content: string = '';
-	$: content;
-
-	onMount(async () => {
-		console.log('footer');
-
-		content = await getFooter();
-		console.log(content);
-	});
-</script>
-
-{#if content != undefined}
-	{@html content}
-{/if}
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { getFooter } from './PageCaller';
+
+	let content: string = '';
+	$: content;
+
+	onMount(async () => {
+		console.log('footer');
+
+		content = await getFooter();
+		console.log(content);
+	});
+</script>
+
+{#if content != undefined}
+	{@html content}
+{/if}

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

@@ -1,18 +1,18 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { getHeader } from './PageCaller';
-
-	let content: string = '';
-	$: content;
-
-	onMount(async () => {
-		console.log('header');
-
-		content = await getHeader();
-		console.log(content);
-	});
-</script>
-
-{#if content != undefined}
-	{@html content}
-{/if}
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { getHeader } from './PageCaller';
+
+	let content: string = '';
+	$: content;
+
+	onMount(async () => {
+		console.log('header');
+
+		content = await getHeader();
+		console.log(content);
+	});
+</script>
+
+{#if content != undefined}
+	{@html content}
+{/if}

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

@@ -1,72 +1,72 @@
-<script lang="ts">
-	import { helpStore } from '$store/pageStores';
-	import type { helpItemType, helpStoreType } from '$models/Models';
-	import Fa from 'svelte-fa/src/fa.svelte';
-	import { faQuestion } from '@fortawesome/free-solid-svg-icons';
-
-	//popup
-	import { popup } from '@skeletonlabs/skeleton';
-	import type { PopupSettings } from '@skeletonlabs/skeleton';
-	//import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
-	//import { storePopup } from '@skeletonlabs/skeleton';
-	import delay from 'delay';
-
-	export let active: boolean = false;
-
-	let hs: helpStoreType;
-	$: helpStore.subscribe((value) => {
-		hs = value;
-	});
-	let helpItem: helpItemType = { id: undefined, name: '', description: '' };
-	$: helpItem =
-		active === true
-			? hs.itemId == ''
-				? { id: undefined, name: '', description: '' }
-				: hs.helpItems.find((h) => h.id === hs.itemId)!
-			: { id: undefined, name: '', description: '' };
-
-	const helpClick: PopupSettings = {
-		event: 'click',
-		target: 'helpTarget',
-		placement: 'top',
-		state: (s) => {
-			if (s != true) {
-				resetItemId();
-			}
-		}
-	};
-
-	async function resetItemId() {
-		await delay(100);
-		helpStore.resetItemId();
-	}
-</script>
-
-{#if active}
-	<button
-		id="helpButton"
-		class="chip variant-filled-warning fixed bottom-5 right-10 shadow-md"
-		use:popup={helpClick}><Fa icon={faQuestion} /></button
-	>
-
-	<div
-		class="card bg-primary-300 border-solid border-2 border-primary-500 shadow-md"
-		data-popup="helpTarget"
-	>
-		{#if helpItem && helpItem.id}
-			<div class="p-5 w-96 space-y-4" id={'helpPopup.' + helpItem.id}>
-				<h3 class="h3">{helpItem.name}</h3>
-				<p>{@html helpItem.description}</p>
-				{#if helpItem.link}
-					<p><a class="anchor" href={helpItem.link}>... read more</a></p>
-				{/if}
-			</div>
-		{:else}
-			<div class="p-5 w-96 space-y-4" id="helpPopup">
-				<h3 class="h3">Help</h3>
-				<p>Hover over the Element, you like to know more about.</p>
-			</div>
-		{/if}
-		<div class="arrow variant-filled-primary" />
-	</div>
-{/if}
+<script lang="ts">
+	import { helpStore } from '$store/pageStores';
+	import type { helpItemType, helpStoreType } from '$models/Models';
+	import Fa from 'svelte-fa/src/fa.svelte';
+	import { faQuestion } from '@fortawesome/free-solid-svg-icons';
+
+	//popup
+	import { popup } from '@skeletonlabs/skeleton';
+	import type { PopupSettings } from '@skeletonlabs/skeleton';
+	//import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
+	//import { storePopup } from '@skeletonlabs/skeleton';
+	import delay from 'delay';
+
+	export let active: boolean = false;
+
+	let hs: helpStoreType;
+	$: helpStore.subscribe((value) => {
+		hs = value;
+	});
+	let helpItem: helpItemType = { id: undefined, name: '', description: '' };
+	$: helpItem =
+		active === true
+			? hs.itemId == ''
+				? { id: undefined, name: '', description: '' }
+				: hs.helpItems.find((h) => h.id === hs.itemId)!
+			: { id: undefined, name: '', description: '' };
+
+	const helpClick: PopupSettings = {
+		event: 'click',
+		target: 'helpTarget',
+		placement: 'top',
+		state: (s) => {
+			if (s != true) {
+				resetItemId();
+			}
+		}
+	};
+
+	async function resetItemId() {
+		await delay(100);
+		helpStore.resetItemId();
+	}
+</script>
+
+{#if active}
+	<button
+		id="helpButton"
+		class="chip variant-filled-warning fixed bottom-5 right-10 shadow-md"
+		use:popup={helpClick}><Fa icon={faQuestion} /></button
+	>
+
+	<div
+		class="card bg-primary-300 border-solid border-2 border-primary-500 shadow-md"
+		data-popup="helpTarget"
+	>
+		{#if helpItem && helpItem.id}
+			<div class="p-5 w-96 space-y-4" id={'helpPopup.' + helpItem.id}>
+				<h3 class="h3">{helpItem.name}</h3>
+				<p>{@html helpItem.description}</p>
+				{#if helpItem.link}
+					<p><a class="anchor" href={helpItem.link}>... read more</a></p>
+				{/if}
+			</div>
+		{:else}
+			<div class="p-5 w-96 space-y-4" id="helpPopup">
+				<h3 class="h3">Help</h3>
+				<p>Hover over the Element, you like to know more about.</p>
+			</div>
+		{/if}
+		<div class="arrow variant-filled-primary" />
+	</div>
+{/if}

package/src/lib/components/page/PageCaller.js

@@ -1,19 +1,19 @@
-import { Api } from '$lib/services/Api';
-
-export const getFooter = async () => {
-	try {
-		const response = await Api.get('/footer');
-		return response.data;
-	} catch (error) {
-		console.error(error);
-	}
-};
-
-export const getHeader = async () => {
-	try {
-		const response = await Api.get('/header');
-		return response.data;
-	} catch (error) {
-		console.error(error);
-	}
-};
+import { Api } from '$lib/services/Api';
+
+export const getFooter = async () => {
+	try {
+		const response = await Api.get('/footer');
+		return response.data;
+	} catch (error) {
+		console.error(error);
+	}
+};
+
+export const getHeader = async () => {
+	try {
+		const response = await Api.get('/header');
+		return response.data;
+	} catch (error) {
+		console.error(error);
+	}
+};

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

@@ -1,20 +1,20 @@
-<script lang="ts">
-	import { positionType } from '$lib/models/Enums';
-
-	export let textCss = 'text-surface-600';
-	export let label = '';
-	export let position: positionType = positionType.center;
-</script>
-
-<div class="flex justify-{position} items-{position} h-full w-full gap-5 pt-2 {textCss}">
-	<div
-		class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
-		role="status"
-	>
-		<span
-			class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
-			>Loading...</span
-		>
-	</div>
-	<span>{label}</span>
-</div>
+<script lang="ts">
+	import { positionType } from '$lib/models/Enums';
+
+	export let textCss = 'text-surface-600';
+	export let label = '';
+	export let position: positionType = positionType.center;
+</script>
+
+<div class="flex justify-{position} items-{position} h-full w-full gap-5 pt-2 {textCss}">
+	<div
+		class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
+		role="status"
+	>
+		<span
+			class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+			>Loading...</span
+		>
+	</div>
+	<span>{label}</span>
+</div>