@bexis2/bexis2-core-ui 0.2.0 → 0.2.2

package/README.md

@@ -1,4 +1,9 @@
 # bexis-core-ui
+## v0.2.1
+> refactoring based on naming conventions (https://bexis2.github.io/bexis2-core-ui/code/naming/)
+
+- fix issue in index.ts file for export components
+
 ## v0.2.0
 > refactoring based on naming conventions (https://bexis2.github.io/bexis2-core-ui/code/naming/)
 

package/dist/components/form/InputContainer.svelte

@@ -10,26 +10,23 @@ function onMouseOver() {
   }
 }
 function onMouseOut() {
-  if (help) {
-    helpStore.hide();
-  }
 }
-</script>
-<div {id} on:mouseover={onMouseOver} on:mouseout={onMouseOut}>
-<label class="label">
-	<span
-		>{label}
-		{#if required} <span class="text-sm text-red-600">*</span> {/if}
-	</span>
-	<slot />
-	{#if feedback}
-		<span class="text-sm text-error-600">
-			<ul>
-				{#each feedback as message}
-					<li>{message}</li>
-				{/each}
-			</ul>
-		</span>
-	{/if}
-</label>
-</div>
+</script>
+<div {id} on:mouseover={onMouseOver} on:mouseout={onMouseOut}>
+<label class="label">
+	<span
+		>{label}
+		{#if required} <span class="text-sm text-red-600">*</span> {/if}
+	</span>
+	<slot />
+	{#if feedback}
+		<span class="text-sm text-error-600">
+			<ul>
+				{#each feedback as message}
+					<li>{message}</li>
+				{/each}
+			</ul>
+		</span>
+	{/if}
+</label>
+</div>

package/dist/components/page/Docs.svelte

@@ -0,0 +1,33 @@
+<script>import Fa from "svelte-fa/src/fa.svelte";
+import { faQuestion } from "@fortawesome/free-solid-svg-icons";
+import { goTo } from "../../services/BaseCaller";
+export let links = [];
+import { popup } 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;
+const noteSettings = {
+  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" 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/Docs.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { linkType } from "../../models/Models";
+declare const __propDef: {
+    props: {
+        links?: linkType[] | undefined;
+        note: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DocsProps = typeof __propDef.props;
+export type DocsEvents = typeof __propDef.events;
+export type DocsSlots = typeof __propDef.slots;
+export default class Docs extends SvelteComponentTyped<DocsProps, DocsEvents, DocsSlots> {
+}
+export {};

package/dist/components/page/Footer.svelte

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

package/dist/components/page/Footer.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FooterProps = typeof __propDef.props;
+export type FooterEvents = typeof __propDef.events;
+export type FooterSlots = typeof __propDef.slots;
+export default class Footer extends SvelteComponentTyped<FooterProps, FooterEvents, FooterSlots> {
+}
+export {};

package/dist/components/page/Header.svelte

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

package/dist/components/page/Header.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HeaderProps = typeof __propDef.props;
+export type HeaderEvents = typeof __propDef.events;
+export type HeaderSlots = typeof __propDef.slots;
+export default class Header extends SvelteComponentTyped<HeaderProps, HeaderEvents, HeaderSlots> {
+}
+export {};

package/dist/components/page/Help.svelte

@@ -1,38 +1,52 @@
 <script lang=ts>import { helpStore } from "../../stores/pageStores";
-let Value;
+import Fa from "svelte-fa/src/fa.svelte";
+import { faQuestion } from "@fortawesome/free-solid-svg-icons";
+import { popup } from "@skeletonlabs/skeleton";
+import delay from "delay";
+export let active = false;
+let hs;
 $:
   helpStore.subscribe((value) => {
-    Value = value;
+    hs = value;
   });
-let helpItem;
+let helpItem = { id: void 0, name: "", description: "" };
 $:
-  helpItem = getHelpItem(Value);
-function getHelpItem(value) {
-  if (value != void 0 && value.helpItems != void 0 && value.itemId != void 0) {
-    return value.itemId == "" ? { id: void 0, name: "", description: "" } : value.helpItems.find((h) => h.id === value.itemId);
+  helpItem = active === true ? hs.itemId == "" ? { id: void 0, name: "", description: "" } : hs.helpItems.find((h) => h.id === hs.itemId) : { id: void 0, name: "", description: "" };
+const helpClick = {
+  event: "click",
+  target: "helpTarget",
+  placement: "top",
+  state: (s) => {
+    if (s != true) {
+      resetItemId();
+    }
   }
-  return { id: void 0, name: "", description: "" };
+};
+async function resetItemId() {
+  await delay(100);
+  helpStore.resetItemId();
 }
-window.origin;
 </script>
-{#if helpItem && helpItem.id}
-<div class="p-5 w-96 space-y-4" id={helpItem.id}>
-    <h3 class="h3">{ helpItem.name }</h3> 
-    <p>{@html helpItem.description }</p>
-     {#if helpItem.link}  
-     <p><a href="{helpItem.link}">... read more</a></p>
-     {/if}
-</div>
-{:else}
-<div class="p-5 w-96 space-y-4">
-    <h3 class="h3">Help</h3>
-    <div class="space-y-4">
-    <div class="grid grid-cols-3 gap-8">
-        <div class="placeholder animate-pulse" />
-        <div class="placeholder animate-pulse" />
-        <div class="placeholder animate-pulse" />
-    </div>
-    <div class="placeholder w-28 animate-pulse" />
-    </div>
-</div>
-{/if}
+
+{#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/Help.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  HelpEvents */
 /** @typedef {typeof __propDef.slots}  HelpSlots */
 export default class Help extends SvelteComponentTyped<{
-    [x: string]: never;
+    active?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +13,7 @@ export type HelpSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        active?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/page/Page.svelte

@@ -1,14 +1,16 @@
 <script>import { onMount } from "svelte";
+import { AppShell, AppBar } from "@skeletonlabs/skeleton";
 import Menu from "./menu/Menu.svelte";
+import Footer from "./Footer.svelte";
+import Header from "./Header.svelte";
 import Help from "./Help.svelte";
 import Breadcrumb from "./breadcrumb/Breadcrumb.svelte";
-import { popup } from "@skeletonlabs/skeleton";
 import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
 import { storePopup } from "@skeletonlabs/skeleton";
 import { breadcrumbStore } from "../../stores/pageStores";
 storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
-import { AppShell } from "@skeletonlabs/skeleton";
 import { helpStore } from "../../stores/pageStores";
+import Docs from "./Docs.svelte";
 export let title = "";
 export let note = "";
 export let links = [];
@@ -16,28 +18,40 @@ export let menu = true;
 export let footer = true;
 export let help = false;
 onMount(async () => {
-  console.log("on mount page ");
+  console.log("page");
   breadcrumbStore.clean();
   breadcrumbStore.addItem({ label: title, link: window.location.pathname });
 });
-const popupClick = {
-  event: "click",
-  target: "popupClick",
-  placement: "top"
-};
 </script>
 
- {#if true}
-  <Menu/>
- {/if}
- <Breadcrumb {title}/>
+<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>
+
+
 
  <div class="px-5 grid gap-5 content-center" >
 
-  <!-- <h3 class="h3">{title}</h3>
-  {#if note}
-    <blockquote class="blockquote">{note}</blockquote>
-  {/if} -->
 
   <slot name="description" />
 
@@ -49,42 +63,35 @@ const popupClick = {
   </div>
   {/if}
     
-    <div class="w-full flex-initial items-center justify-center pt-1 px-3">
-      <slot name="middle" />
-      {#if links.length>0}
-      <div class="py-5">
-        {#each	links as link}
-         <a class="chip variant-ringed" href={link.url}>{link.label}</a>
-        {/each}
-      </div>
-      {/if}
-      <slot/>
-    </div>
-    {#if $$slots.right || help}
-    <div class="w-fixed w-full max-w-min flex-shrink flex-grow-0 px-2" class:w-96:={help}>
-      <!--if help is active show Help-->
-      <!--if help is active and slot is set -->
-      <!-- help is deactiveated -->
-      <slot name="right"/>
-      
+  <div class="w-full flex-initial items-center justify-center pt-1 px-3 max-w-screen-lg">
+    <slot name="middle" />
+    {#if links.length>0}
+    <div class="py-5">
+      {#each	links as link}
+        <a class="chip variant-ringed" href={link.url}>{link.label}</a>
+      {/each}
     </div>
     {/if}
-    
-					
+    <slot/>
   </div>
+
+
+  {#if $$slots.right}
+  <div class="w-fixed w-full max-w-min flex-shrink flex-grow-0 px-2">
+    <slot name="right"/> 
   </div>
- 
-  {#if help}
-  <button class="btn btn-sm variant-filled-warning fixed bottom-5 right-10" use:popup={popupClick}>?</button>
+  {/if}
     
-  <div class="card p-4 variant-filled-primary" data-popup="popupClick">
-    <Help />
-    <div class="arrow variant-filled-primary" />
+										
   </div>
-  {/if}
+</div>
+
+
+
+  <Help active={help}/>
+
+
+
 
 
- {#if menu}
-   <!-- footer -->
- {/if}
- 
+</AppShell>

package/dist/components/page/PageCaller.d.ts

@@ -0,0 +1,2 @@
+export function getFooter(): Promise<any>;
+export function getHeader(): Promise<any>;

package/dist/components/page/PageCaller.js

@@ -0,0 +1,21 @@
+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/menu/Menu.svelte

@@ -6,11 +6,9 @@ import MenuBar from "./MenuBar.svelte";
 import SettingsBar from "./SettingsBar.svelte";
 let menu;
 onMount(async () => {
-  menu = get(menuStore);
-  if (menu === void 0) {
-    menu = await getMenuItems();
-    menuStore.set(menu);
-  }
+  console.log("menu");
+  menu = await getMenuItems();
+  menuStore.set(menu);
 });
 </script>
 

package/dist/index.d.ts

@@ -23,8 +23,8 @@ export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiS
 export { FileInfo, FileIcon, FileUploader };
 export { ListView, TableView, Spinner, Page, Alert };
 export { Api } from './services/Api.js';
-export { host, username, password, setApiConfig } from './stores/apiStores.ts';
-export type { user, inputType, fileUploaderModel, linkType, listItemType, keyValuePairType } from './models/Models.ts';
+export { host, username, password, setApiConfig } from './stores/apiStores.js';
+export type { userType, inputType, fileUploaderModel, linkType, listItemType, keyValuePairType } from './models/Models.js';
 export { positionType } from './models/Enums';
 export { Table, TableFilter, columnFilter, searchFilter };
 export type { TableConfig, Columns, Column };

package/dist/index.js

@@ -29,7 +29,7 @@ export { FileInfo, FileIcon, FileUploader };
 export { ListView, TableView, Spinner, Page, Alert };
 //Api
 export { Api } from './services/Api.js';
-export { host, username, password, setApiConfig } from './stores/apiStores.ts';
+export { host, username, password, setApiConfig } from './stores/apiStores.js';
 //enum
 export { positionType } from './models/Enums';
 // Table

package/dist/services/BaseCaller.d.ts

@@ -1 +1 @@
-export function goTo(url: any): Promise<void>;
+export function goTo(url: any, intern?: boolean): Promise<void>;

package/dist/services/BaseCaller.js

@@ -3,10 +3,19 @@
 import { host } from "../stores/apiStores";
 
 // go to a internal action
-export const goTo = async (url) => {
-  if(window!=null && host != null && url!=null){
-    window.open(host+url,"_self")?.focus()
+export const goTo = async (url,intern=true) => {
+  if(intern == true) // go to inside bexis2
+  {
+    if(window!=null && host != null && url!=null){
+      window.open(host+url,"_self")?.focus()
+    }
+  }
+  else // go to a external page
+  {
+    window.open(url,"_blank")?.focus()
   }
 };
 
 
+
+

package/dist/stores/pageStores.js

@@ -3,6 +3,9 @@ import { writable } from 'svelte/store';
 function createHelpStore() {
     // set Store Type
     const { subscribe, set, update } = writable();
+    const h = [];
+    let v;
+    set({ itemId: undefined, helpItems: h });
     return {
         //pass Store default functions
         subscribe,
@@ -14,8 +17,6 @@ function createHelpStore() {
         },
         //set the ID of the help item and display it 
         setItemId: (itemId) => {
-            let v;
-            const h = [];
             helpStore.subscribe(value => {
                 value = (value === undefined) ? { itemId: undefined, helpItems: h } : value;
                 value.helpItems = (value.helpItems === undefined) ? h : value.helpItems;
@@ -25,8 +26,6 @@ function createHelpStore() {
         },
         //reset the ID of the help item and hide it 
         resetItemId: () => {
-            let v;
-            const h = [];
             helpStore.subscribe(value => {
                 value = (value === undefined) ? { itemId: undefined, helpItems: h } : value;
                 value.helpItems = (value.helpItems === undefined) ? h : value.helpItems;
@@ -49,22 +48,14 @@ function createHelpStore() {
         },
         //reset the ID of the help item and hide it 
         toggle: (itemId) => {
-            let v;
-            const h = [];
             helpStore.subscribe(value => {
                 value = (value === undefined) ? { itemId: undefined, helpItems: h } : value;
                 value.helpItems = (value.helpItems === undefined) ? h : value.helpItems;
-                if (itemId != value.itemId) {
-                    v = { itemId: itemId, helpItems: value.helpItems };
-                }
-                else {
-                    v = { itemId: undefined, helpItems: value.helpItems };
-                }
+                v = { itemId: itemId, helpItems: value.helpItems };
             });
             update(u => u = v);
         },
         reset: () => {
-            const h = [];
             helpStore.set({ itemId: undefined, helpItems: h });
         },
         clear: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "private": false,
   "scripts": {
     "dev": "vite dev",
@@ -64,6 +64,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "axios": "^1.2.1",
+    "delay": "^6.0.0",
     "highlight.js": "^11.8.0",
     "highlightjs-svelte": "^1.0.6",
     "svelte": "^3.54.0",

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

@@ -1,47 +1,44 @@
-<script lang="ts">
-	import { helpStore } from '$store/pageStores'
-
-	export let id: string = '';
-	export let label: string = '';
-	export let required: boolean;
-	export let feedback: string[];
-	export let help:boolean=false;
-
-function onMouseOver()
-{
-	
-	if(help)
-	{
-			helpStore.show(id);
-	}
-
-}
-
-
-function onMouseOut()
-{	
-		if(help)
-		{
-				helpStore.hide();
-		}
-}
-
-</script>
-<div {id} on:mouseover={onMouseOver} on:mouseout={onMouseOut}>
-<label class="label">
-	<span
-		>{label}
-		{#if required} <span class="text-sm text-red-600">*</span> {/if}
-	</span>
-	<slot />
-	{#if feedback}
-		<span class="text-sm text-error-600">
-			<ul>
-				{#each feedback as message}
-					<li>{message}</li>
-				{/each}
-			</ul>
-		</span>
-	{/if}
-</label>
-</div>
+<script lang="ts">
+	import { helpStore } from '$store/pageStores'
+
+	export let id: string = '';
+	export let label: string = '';
+	export let required: boolean;
+	export let feedback: string[];
+	export let help:boolean=false;
+
+function onMouseOver()
+{
+	
+	if(help)
+	{
+			helpStore.show(id);
+	}
+
+}
+
+
+function onMouseOut()
+{	
+
+}
+
+</script>
+<div {id} on:mouseover={onMouseOver} on:mouseout={onMouseOut}>
+<label class="label">
+	<span
+		>{label}
+		{#if required} <span class="text-sm text-red-600">*</span> {/if}
+	</span>
+	<slot />
+	{#if feedback}
+		<span class="text-sm text-error-600">
+			<ul>
+				{#each feedback as message}
+					<li>{message}</li>
+				{/each}
+			</ul>
+		</span>
+	{/if}
+</label>
+</div>

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

@@ -0,0 +1,44 @@
+<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" 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/Footer.svelte

@@ -0,0 +1,22 @@
+<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

@@ -0,0 +1,21 @@
+<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/Help.svelte

@@ -1,43 +1,66 @@
 <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'
 
-    let Value:helpStoreType;
+    //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 => {
-            Value = value;
+            hs = value;
         });
-    let helpItem:helpItemType;
-    $:helpItem = getHelpItem(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:''};
 
-    function getHelpItem(value:helpStoreType):helpItemType
-    {
-        if(value != undefined && value.helpItems != undefined && value.itemId != undefined)
-        {
-            return (value.itemId == "") ? {id:undefined,name:'',description:''}:value.helpItems.find(h => h.id === value.itemId)!;
+    const helpClick: PopupSettings = {
+        event: 'click',
+        target: 'helpTarget',
+        placement: 'top',
+        state: (s) => {
+            if(s != true)
+            {
+                resetItemId();
+            }
         }
-        return {id:undefined,name:'',description:''};
+    };
+
+    async function resetItemId()
+    {
+        await delay(100);
+        helpStore.resetItemId();
     }
-    window.origin
 
 </script>
-{#if helpItem && helpItem.id}
-<div class="p-5 w-96 space-y-4" id={helpItem.id}>
-    <h3 class="h3">{ helpItem.name }</h3> 
-    <p>{@html helpItem.description }</p>
-     {#if helpItem.link}  
-     <p><a href="{helpItem.link}">... read more</a></p>
-     {/if}
-</div>
-{:else}
-<div class="p-5 w-96 space-y-4">
-    <h3 class="h3">Help</h3>
-    <div class="space-y-4">
-    <div class="grid grid-cols-3 gap-8">
-        <div class="placeholder animate-pulse" />
-        <div class="placeholder animate-pulse" />
-        <div class="placeholder animate-pulse" />
-    </div>
-    <div class="placeholder w-28 animate-pulse" />
-    </div>
-</div>
-{/if}
+
+{#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

@@ -4,23 +4,24 @@
   import type { linkType } from "$lib/models/Models";
 
   // 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 Help from "./Help.svelte";
   import Breadcrumb from './breadcrumb/Breadcrumb.svelte';
 
   //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 { breadcrumbStore } from '$store/pageStores';
 
   storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
-  import { AppShell } from '@skeletonlabs/skeleton';
 
   // stores
   import { helpStore } from '$store/pageStores';
+	import Docs from './Docs.svelte';
  
   export let title = "";
   export let note = "";
@@ -32,34 +33,41 @@
   export let help:boolean = false;
 
   onMount(async () => {
-    console.log("on mount page ")
+    console.log("page")
     breadcrumbStore.clean();
     breadcrumbStore.addItem({label:title,link:window.location.pathname})
- 
-    // clean help when is not active
-    //if(!help){ helpStore.clear() }
   });
 
-  //popup
-  const popupClick: PopupSettings = {
-    event: 'click',
-    target: 'popupClick',
-    placement: 'top' 
-  };
- 
  </script>
 
- {#if true}
-  <Menu/>
- {/if}
- <Breadcrumb {title}/>
+<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>
+
+
 
  <div class="px-5 grid gap-5 content-center" >
 
-  <!-- <h3 class="h3">{title}</h3>
-  {#if note}
-    <blockquote class="blockquote">{note}</blockquote>
-  {/if} -->
 
   <slot name="description" />
 
@@ -71,42 +79,35 @@
   </div>
   {/if}
     
-    <div class="w-full flex-initial items-center justify-center pt-1 px-3">
-      <slot name="middle" />
-      {#if links.length>0}
-      <div class="py-5">
-        {#each	links as link}
-         <a class="chip variant-ringed" href={link.url}>{link.label}</a>
-        {/each}
-      </div>
-      {/if}
-      <slot/>
-    </div>
-    {#if $$slots.right || help}
-    <div class="w-fixed w-full max-w-min flex-shrink flex-grow-0 px-2" class:w-96:={help}>
-      <!--if help is active show Help-->
-      <!--if help is active and slot is set -->
-      <!-- help is deactiveated -->
-      <slot name="right"/>
-      
+  <div class="w-full flex-initial items-center justify-center pt-1 px-3 max-w-screen-lg">
+    <slot name="middle" />
+    {#if links.length>0}
+    <div class="py-5">
+      {#each	links as link}
+        <a class="chip variant-ringed" href={link.url}>{link.label}</a>
+      {/each}
     </div>
     {/if}
-    
-					
+    <slot/>
   </div>
+
+
+  {#if $$slots.right}
+  <div class="w-fixed w-full max-w-min flex-shrink flex-grow-0 px-2">
+    <slot name="right"/> 
   </div>
- 
-  {#if help}
-  <button class="btn btn-sm variant-filled-warning fixed bottom-5 right-10" use:popup={popupClick}>?</button>
+  {/if}
     
-  <div class="card p-4 variant-filled-primary" data-popup="popupClick">
-    <Help />
-    <div class="arrow variant-filled-primary" />
+										
   </div>
-  {/if}
+</div>
+
+
+
+  <Help active={help}/>
+
+
+
 
 
- {#if menu}
-   <!-- footer -->
- {/if}
- 
+</AppShell>

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

@@ -0,0 +1,21 @@
+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/menu/Menu.svelte

@@ -14,14 +14,13 @@
 
  
  onMount(async () => {
-  
-  menu = get(menuStore);
-  if(menu === undefined)
-  {
-    menu = await getMenuItems();
-    menuStore.set(menu);
-    //console.log("menu loaded",menu);
-  }
+  console.log("menu");
+
+  //menu = get(menuStore);
+
+  menu = await getMenuItems();
+  menuStore.set(menu);
+
 })
 
 

package/src/lib/index.ts

@@ -48,17 +48,17 @@ export { ListView, TableView, Spinner, Page, Alert };
 
 //Api
 export { Api } from './services/Api.js';
-export { host, username, password, setApiConfig } from './stores/apiStores.ts';
+export { host, username, password, setApiConfig } from './stores/apiStores.js';
 
 //Type
 export type { 
-	user, 
+	userType, 
 	inputType,
 	fileUploaderModel,
 	linkType,
 	listItemType,
 	keyValuePairType
-	} from './models/Models.ts';
+	} from './models/Models.js';
 
 //enum
 export { positionType	} from './models/Enums';

package/src/lib/services/BaseCaller.js

@@ -3,10 +3,19 @@
 import { host } from "$store/apiStores";
 
 // go to a internal action
-export const goTo = async (url) => {
-  if(window!=null && host != null && url!=null){
-    window.open(host+url,"_self")?.focus()
+export const goTo = async (url,intern=true) => {
+  if(intern == true) // go to inside bexis2
+  {
+    if(window!=null && host != null && url!=null){
+      window.open(host+url,"_self")?.focus()
+    }
+  }
+  else // go to a external page
+  {
+    window.open(url,"_blank")?.focus()
   }
 };
 
 
+
+

package/src/lib/stores/pageStores.ts

@@ -9,6 +9,11 @@ function createHelpStore()
     // set Store Type
     const { subscribe, set, update } = writable<helpStoreType>();
 
+    const h:helpItemType[] = [];
+    let v:helpStoreType;
+
+    set({itemId:undefined, helpItems:h});
+
     return {
         //pass Store default functions
 		subscribe,
@@ -20,8 +25,6 @@ function createHelpStore()
         },
         //set the ID of the help item and display it 
         setItemId: (itemId:string) => {
-            let v:helpStoreType;
-            const h:helpItemType[] = [];
             helpStore.subscribe(value => {
                 value = (value === undefined) ? {itemId:undefined,helpItems:h}:value;
                 value.helpItems = (value.helpItems === undefined) ? h:value.helpItems;
@@ -31,8 +34,6 @@ function createHelpStore()
         },
         //reset the ID of the help item and hide it 
         resetItemId: () =>{
-            let v:helpStoreType;
-            const h:helpItemType[] = [];
             helpStore.subscribe(value => {
                 value = (value === undefined) ? {itemId:undefined,helpItems:h}:value;
                 value.helpItems = (value.helpItems === undefined) ? h:value.helpItems;
@@ -54,25 +55,15 @@ function createHelpStore()
             helpStore.resetItemId();
         },           
         //reset the ID of the help item and hide it 
-        toggle: (itemId:string) =>{
-            let v:helpStoreType;
-            const h:helpItemType[] = [];
+        toggle: (itemId:string) =>{        
             helpStore.subscribe(value => {
                 value = (value === undefined) ? {itemId:undefined,helpItems:h}:value;
                 value.helpItems = (value.helpItems === undefined) ? h:value.helpItems;
-                if(itemId != value.itemId)
-                {
-                    v = {itemId:itemId, helpItems:value.helpItems};
-                }
-                else
-                {
-                    v = {itemId:undefined, helpItems:value.helpItems};
-                }              
+                v = {itemId:itemId, helpItems:value.helpItems};             
             });
             update(u => u = v)
         },
         reset:() =>{
-            const h:helpItemType[] = [];
             helpStore.set({itemId:undefined, helpItems:h})
         },
         clear:() =>{
@@ -103,7 +94,7 @@ function createBreadcrumbStore()
 
         //set the ID of the help item and display it 
         addItem: (item:breadcrumbItemType) => {
-            let b:breadcrumbModel;
+            let b:BreadcrumbModel;
             breadcrumbStore.subscribe(value => {
 
                 value = (value === undefined) ? new BreadcrumbModel():value;
@@ -120,7 +111,7 @@ function createBreadcrumbStore()
         },
 
         clean: () => {
-            let b:Breadcrumb;
+            let b:BreadcrumbModel;
             breadcrumbStore.subscribe(value => {
                 value = new BreadcrumbModel();
                 b = value;