@bexis2/bexis2-core-ui 0.2.31 → 0.3.0

package/dist/components/form/NumberInput.svelte

@@ -10,18 +10,18 @@ export let feedback = [""];
 export let placeholder = "";
 export let help = false;
 export let disabled = 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>
+
+<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/dist/components/form/TextArea.svelte

@@ -9,17 +9,17 @@ export let feedback = [""];
 export let placeholder = "";
 export let help = false;
 export let disabled = 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>
+
+<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/dist/components/form/TextInput.svelte

@@ -9,18 +9,18 @@ export let feedback = [""];
 export let placeholder = "";
 export let help = false;
 export let disabled = 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>
+
+<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/dist/components/page/Alert.svelte

@@ -7,31 +7,31 @@ export let cssClass = "";
 export let deleteBtn = 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>
+
+{#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/dist/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/dist/components/page/Docs.svelte

@@ -12,25 +12,25 @@ const noteSettings = {
   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>
+
+<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/dist/components/page/ErrorMessage.svelte

@@ -1,9 +1,9 @@
 <script>export let 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>
+
+<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/dist/components/page/Footer.svelte

@@ -8,8 +8,8 @@ onMount(async () => {
   content = await getFooter();
   console.log(content);
 });
-</script>
-
-{#if content != undefined}
-	{@html content}
-{/if}
+</script>
+
+{#if content != undefined}
+	{@html content}
+{/if}

package/dist/components/page/Header.svelte

@@ -8,8 +8,8 @@ onMount(async () => {
   content = await getHeader();
   console.log(content);
 });
-</script>
-
-{#if content != undefined}
-	{@html content}
-{/if}
+</script>
+
+{#if content != undefined}
+	{@html content}
+{/if}

package/dist/components/page/HelpPopUp.svelte

@@ -26,33 +26,33 @@ 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>
+
+{#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/dist/components/page/Notification.svelte

@@ -1,8 +1,46 @@
-<script>import { Toast } from "@skeletonlabs/skeleton";
+<script>import { onMount } from "svelte";
+import { Toast, getToastStore } from "@skeletonlabs/skeleton";
 import { notificationStore } from "../../stores/pageStores";
+import { notificationType } from "../../models/Enums";
+const toastStore = getToastStore();
 let btnStyle;
 $:
   btnStyle = $notificationStore === void 0 || $notificationStore.btnStyle === void 0 ? notificationStore.getBtnStyle() : $notificationStore.btnStyle;
+$:
+  $notificationStore, triggerToast();
+onMount(() => {
+  toastStore.clear();
+});
+function triggerToast() {
+  toastStore.clear();
+  const timeout = 3e4;
+  let classes = "";
+  if ($notificationStore.message != void 0 && $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 = {
+      classes,
+      message: $notificationStore.message,
+      timeout,
+      callback: () => {
+        toastStore.clear();
+      }
+    };
+    toastStore.trigger(notificationToast);
+  }
+}
 </script>
 
 <Toast position="t" buttonDismiss={btnStyle} />

package/dist/components/page/Page.svelte

@@ -11,7 +11,6 @@ import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floati
 import { storePopup } from "@skeletonlabs/skeleton";
 import { breadcrumbStore } from "../../stores/pageStores";
 storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
-import { helpStore } from "../../stores/pageStores";
 import Docs from "./Docs.svelte";
 export let title = "";
 export let note = "";
@@ -39,7 +38,7 @@ onMount(async () => {
 				{/if}
 
 				<div class="grid grid-cols-2">
-					<Breadcrumb bind:title={title} />
+					<Breadcrumb bind:title />
 					<Docs {links} {note} />
 				</div>
 			</svelte:fragment>

package/dist/components/page/PageCaller.js

@@ -1,19 +1,19 @@
-import { Api } from '../../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 '../../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/dist/components/page/Spinner.svelte

@@ -2,17 +2,17 @@
 export let textCss = "text-surface-600";
 export let label = "";
 export let position = 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>
+
+<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/dist/components/page/breadcrumb/Breadcrumb.svelte

@@ -1,9 +1,13 @@
 <script>import { breadcrumbStore } from "../../../stores/pageStores";
+import { browser } from "$app/environment";
+import { base } from "$app/paths";
 export let title;
 $:
   update(title);
 function update(t) {
-  breadcrumbStore.updateItem({ label: t, link: window.location.pathname });
+  if (browser) {
+    breadcrumbStore.updateItem({ label: t, link: window.location.pathname });
+  }
 }
 let list = [];
 $:
@@ -17,7 +21,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/dist/components/page/menu/MenuDataCaller.js

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

package/dist/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;
+}