@bexis2/bexis2-core-ui 0.2.11 → 0.2.13

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

@@ -1,44 +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,12 +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,22 +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,21 +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,66 +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/Page.svelte

@@ -1,109 +1,96 @@
-<script lang="ts">
-  import {onMount} from 'svelte'
-
-  import type { linkType } from "$lib/models/Models";
-  import { pageContentLayoutType } from "$lib/models/Enums";
-
-  // ui components
-  import { AppShell, AppBar, Modal } from '@skeletonlabs/skeleton';
-  import Menu from './menu/Menu.svelte'
-  import Footer from './Footer.svelte'
-  import Header from './Header.svelte'
-  import HelpPopUp from "./HelpPopUp.svelte";
-  import Breadcrumb from './breadcrumb/Breadcrumb.svelte';
-
-  //popup
-  import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
-  import { storePopup } from '@skeletonlabs/skeleton';
-  import { breadcrumbStore } from '$store/pageStores';
-
-
-  storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
-
-
-  // stores
-  import { helpStore } from '$store/pageStores';
-	import Docs from './Docs.svelte';
- 
-  export let title = "";
-  export let note = "";
-  export let links:linkType[]=[];
-
-  // active or hide menu
-  export let menu:boolean = true;
-  export let footer:boolean = true;
-  export let help:boolean = false;
-  export let contentLayoutType:pageContentLayoutType = pageContentLayoutType.center;
-
-  onMount(async () => {
-    console.log("page")
-    breadcrumbStore.clean();
-    breadcrumbStore.addItem({label:title,link:window.location.pathname})
-  });
-
- </script>
-
-<AppShell>
-
-  <!--header-->
-  <svelte:fragment slot="header">
-
-    <AppBar padding="0" spacing="space-y-0" background="white">
-      <svelte:fragment slot="headline">
-        <Header/>
-        {#if true}
-        <Menu/>
-        {/if}
-
-        <div class="grid grid-cols-2">
-          <Breadcrumb {title}/>
-          <Docs {links} {note}/>
-        </div>
-      </svelte:fragment>
-    </AppBar>
- 
-  </svelte:fragment>
-
-
-  <svelte:fragment slot="footer">
-   <Footer/>
-  </svelte:fragment>
-
-  <slot name="description" />
-
- <div class="flex flex-initial space-x-5">
-  
-  {#if $$slots.left}
-  <div class="p-5 flex-shrink-0 w-96 w-min-96  border-y border-solid border-surface-500">
-    <slot name="left" />
-  </div>
-  {/if}
-
-  {#if contentLayoutType === pageContentLayoutType.center}
-
-  <div class="flex justify-center w-screen ">
-    <div class="max-w-7xl  p-5 space-y-5 border-y border-solid border-surface-500">
-      <slot/>
-    </div>
-  </div>
-  {/if}
-
-  {#if contentLayoutType === pageContentLayoutType.full}
-  <div class="p-5 space-y-5 border-y border-solid border-surface-500 w-screen">
-     <slot/>
-  </div>
-  
-  {/if}
-
-
-  {#if $$slots.right}
-  <div class=" p-5 flex-shrink-0 w-96  border-y border-solid border-surface-500">
-    <slot name="right"/> 
-  </div> 
-  {/if}
-    						
-  </div>
-
-  <HelpPopUp active={help}/>
-
-</AppShell>
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	import type { linkType } from '$lib/models/Models';
+	import { pageContentLayoutType } from '$lib/models/Enums';
+
+	// ui components
+	import { AppShell, AppBar } from '@skeletonlabs/skeleton';
+	import Menu from './menu/Menu.svelte';
+	import Footer from './Footer.svelte';
+	import Header from './Header.svelte';
+	import HelpPopUp from './HelpPopUp.svelte';
+	import Breadcrumb from './breadcrumb/Breadcrumb.svelte';
+
+	//popup
+	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
+	import { storePopup } from '@skeletonlabs/skeleton';
+	import { breadcrumbStore } from '$store/pageStores';
+
+	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+
+	// stores
+	import { helpStore } from '$store/pageStores';
+	import Docs from './Docs.svelte';
+
+	export let title = '';
+	export let note = '';
+	export let links: linkType[] = [];
+
+	// active or hide menu
+	export let menu: boolean = true;
+	export let footer: boolean = true;
+	export let help: boolean = false;
+	export let contentLayoutType: pageContentLayoutType = pageContentLayoutType.center;
+
+	onMount(async () => {
+		console.log('page');
+		breadcrumbStore.clean();
+		breadcrumbStore.addItem({ label: title, link: window.location.pathname });
+	});
+</script>
+
+<AppShell>
+	<!--header-->
+	<svelte:fragment slot="header">
+		<AppBar padding="0" spacing="space-y-0" background="white">
+			<svelte:fragment slot="headline">
+				<Header />
+				{#if true}
+					<Menu />
+				{/if}
+
+				<div class="grid grid-cols-2">
+					<Breadcrumb {title} />
+					<Docs {links} {note} />
+				</div>
+			</svelte:fragment>
+		</AppBar>
+	</svelte:fragment>
+
+	<svelte:fragment slot="footer">
+		<Footer />
+	</svelte:fragment>
+
+	<slot name="description" />
+
+	<div class="flex flex-initial space-x-5">
+		{#if $$slots.left}
+			<div class="p-5 flex-shrink-0 w-96 w-min-96 border-y border-solid border-surface-500">
+				<slot name="left" />
+			</div>
+		{/if}
+
+		{#if contentLayoutType === pageContentLayoutType.center}
+			<div class="flex justify-center w-screen">
+				<div class="max-w-7xl p-5 space-y-5 border-y border-solid border-surface-500">
+					<slot />
+				</div>
+			</div>
+		{/if}
+
+		{#if contentLayoutType === pageContentLayoutType.full}
+			<div class="p-5 space-y-5 border-y border-solid border-surface-500 w-screen">
+				<slot />
+			</div>
+		{/if}
+
+		{#if $$slots.right}
+			<div class=" p-5 flex-shrink-0 w-96 border-y border-solid border-surface-500">
+				<slot name="right" />
+			</div>
+		{/if}
+	</div>
+
+	<HelpPopUp active={help} />
+</AppShell>

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

@@ -1,21 +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,22 +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;
+	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
+		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>
-<span>{label}</span>
-</div>
-