@bexis2/bexis2-core-ui 0.2.31 → 0.3.0

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/Notification.svelte

@@ -1,12 +1,67 @@
 <script lang="ts">
-	import { Toast } from '@skeletonlabs/skeleton';
+	import { onMount } from 'svelte';
+	import { Toast, getToastStore, type ToastSettings } from '@skeletonlabs/skeleton';
 	import { notificationStore } from '$store/pageStores';
+	import type { notificationStoreType } from '$models/Models';
+	import {notificationType} from '$models/Enums'
+
+	const toastStore = getToastStore()
 
 	let btnStyle: string;
 	$: btnStyle =
 		$notificationStore === undefined || $notificationStore.btnStyle === undefined
 			? notificationStore.getBtnStyle()
 			: $notificationStore.btnStyle;
+
+
+$:$notificationStore, triggerToast(); 
+
+onMount(()=>{
+	toastStore.clear()
+})
+
+function triggerToast(){
+			toastStore.clear()
+
+			const timeout = 30000;
+			let classes = '';
+			
+			if($notificationStore.message != undefined && $notificationStore.message != '')
+			{
+				switch ($notificationStore.notificationType) {
+					case notificationType.success:
+						classes =
+							'bg-success-300 border-solid border-2 border-success-500 shadow-md text-surface-900';
+						break;
+					case notificationType.warning:
+						classes =
+							'bg-warning-300 border-solid border-2 border-warning-500 shadow-md text-surface-900';
+						break;
+					case notificationType.error:
+						classes =
+							'bg-error-300 border-solid border-2 border-error-500 shadow-md text-surface-900';
+						break;
+					case notificationType.surface:
+						classes =
+							'bg-surface-300 border-solid border-2 border-surface-500 shadow-md text-surface-900';
+						break;
+				}
+
+				const notificationToast: ToastSettings = {
+					classes: classes,
+					message: $notificationStore.message,
+					timeout: timeout,
+					callback: () => {toastStore.clear()}
+				};
+
+				toastStore.trigger(notificationToast);
+			
+			}
+	
+	}
+
+
+
 </script>
 
 <Toast position="t" buttonDismiss={btnStyle} />

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

@@ -20,8 +20,7 @@
 
 	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
-	// stores
-	import { helpStore } from '$store/pageStores';
+
 	import Docs from './Docs.svelte';
 
 	export let title = '';
@@ -33,7 +32,7 @@
 	export let footer: boolean = true;
 	export let help: boolean = false;
 	export let contentLayoutType: pageContentLayoutType = pageContentLayoutType.center;
-	export let fixLeft:boolean = true;
+	export let fixLeft: boolean = true;
 
 	onMount(async () => {
 		console.log('page');
@@ -53,7 +52,7 @@
 				{/if}
 
 				<div class="grid grid-cols-2">
-					<Breadcrumb bind:title={title} />
+					<Breadcrumb bind:title />
 					<Docs {links} {note} />
 				</div>
 			</svelte:fragment>

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>

package/src/lib/components/page/breadcrumb/Breadcrumb.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
 	import { breadcrumbStore } from '$store/pageStores';
 	import type { breadcrumbItemType } from '$models/Page';
+	import { browser } from '$app/environment';
+	import { base } from '$app/paths';
 
 	export let title;
 
-	$:update(title)
+	$: update(title);
 
-
-	function update(t)
-	{
-  breadcrumbStore.updateItem({ label: t, link: window.location.pathname });
+	function update(t) {
+		if (browser) {
+			breadcrumbStore.updateItem({ label: t, link: window.location.pathname });
+		}
 	}
 
 	let list: breadcrumbItemType[] = [];
@@ -23,7 +25,7 @@
 <div class="px-5 py-2">
 	<ol class="breadcrumb -p50">
 		<!--default home-->
-		<li class="crumb"><a class="anchor" href={'/'}>Home</a></li>
+		<li class="crumb"><a class="anchor" href={base + '/'}>Home</a></li>
 		<li class="crumb-separator" aria-hidden>&rsaquo;</li>
 
 		{#each list as crumb, i}

package/src/lib/components/page/menu/MenuDataCaller.js

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

package/src/lib/css/core.ui.postcss

@@ -1,17 +1,17 @@
-/*place global styles here */
-html,
-body {
-	@apply h-full;
-}
-
-h1 {
-	@apply text-primary-500;
-}
-
-:root {
-	--background: rgb(var(--color-surface-200));
-}
-
-[type='text']:focus {
-	--tw-ring-color: #00000;
-}
+/*place global styles here */
+html,
+body {
+	@apply h-full;
+}
+
+h1 {
+	@apply text-primary-500;
+}
+
+:root {
+	--background: rgb(var(--color-surface-200));
+}
+
+[type='text']:focus {
+	--tw-ring-color: #00000;
+}