@bexis2/bexis2-core-ui 0.1.12 → 0.2.0

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

@@ -15,8 +15,12 @@
 	export let complexSource = false;
 	export let complexTarget = false;
 	export let required = false;
-	export let feedback = [];
+	export let feedback = [''];
 	export let placeholder = "-- Please select --"
+	export let invalid = false;
+	export let loading = false;
+	export let help = false;
+
 
 	let isLoaded = false;
 
@@ -79,7 +83,7 @@
 	}
 
 	onMount(async () => {
-		////console.log("on mount multiselect");
+		console.log("on mount multiselect");
 		////console.log(source);
 
 		//a) source is complex model is simple
@@ -119,7 +123,7 @@
 
 		if(!isMulti)
 		{
-			console.log("onmount",complexSource,complexTarget,value,target)
+			//console.log("onmount",complexSource,complexTarget,value,target)
 			if(!complexSource && !complexTarget) 
 			{
 					value = {
@@ -147,7 +151,7 @@
 </script>
 
 
-<InputContainer label={title} {feedback} {required}>
+<InputContainer {id} label={title} {feedback} {required} {help}>
 	<Select
 	 {id}
 		items={source}
@@ -157,6 +161,8 @@
 		multiple={isMulti}
 		bind:value
 		{placeholder}
+		hasError={invalid}
+		{loading}
 		on:change
 		on:input
 		on:focus

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import InputContainer from './InputContainer.svelte';
+	import { helpStore } from '$store/pageStores'
 
 	export let id: string = '';
 	export let label: string = '';
@@ -10,9 +11,12 @@
 	export let required: boolean = false;
 	export let feedback: string[] = [''];
 	export let placeholder: string = "";
+	export let help:boolean=false;
+
+
 </script>
 
-<InputContainer {label} {feedback} {required}>
+<InputContainer {id} {label} {feedback} {required} {help}>
 	<input
 		{id}
 		class="input variant-form-material"

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

@@ -1,25 +1,27 @@
-<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 = "";
-</script>
-
-<InputContainer {label} {feedback} {required}>
-	<textarea
-		{id}
-		class="textarea variant-form-material"
-		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;
+	
+</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}
+	/>
+</InputContainer>

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

@@ -4,16 +4,18 @@
 	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 {label} {feedback} {required}>
+
+
+<InputContainer {id} {label} {feedback} {required} {help}>
 	<input
 		{id}
 		class="input variant-form-material"

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

@@ -0,0 +1,43 @@
+<script lang=ts>
+    import { helpStore } from '$store/pageStores'
+    import type { helpItemType, helpStoreType } from "$models/Models";
+
+    let Value:helpStoreType;
+    $:helpStore.subscribe(value => {
+            Value = value;
+        });
+    let helpItem:helpItemType;
+    $:helpItem = getHelpItem(Value);
+
+    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)!;
+        }
+        return {id:undefined,name:'',description:''};
+    }
+    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}

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

@@ -1,29 +1,65 @@
 <script lang="ts">
+  import {onMount} from 'svelte'
 
-  import type { Link } from "$lib/models/Models";
+  import type { linkType } from "$lib/models/Models";
 
+  // ui components
   import Menu from './menu/Menu.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';
  
   export let title = "";
   export let note = "";
-  export let links:Link[]=[];
+  export let links:linkType[]=[];
 
   // active or hide menu
   export let menu:boolean = true;
   export let footer:boolean = true;
+  export let help:boolean = false;
+
+  onMount(async () => {
+    console.log("on mount page ")
+    breadcrumbStore.clean();
+    breadcrumbStore.addItem({label:title,link:window.location.pathname})
  
- </script>
+    // clean help when is not active
+    //if(!help){ helpStore.clear() }
+  });
+
+  //popup
+  const popupClick: PopupSettings = {
+    event: 'click',
+    target: 'popupClick',
+    placement: 'top' 
+  };
  
- {#if menu}
+ </script>
+
+ {#if true}
   <Menu/>
  {/if}
+ <Breadcrumb {title}/>
 
  <div class="px-5 grid gap-5 content-center" >
 
-  <h3 class="h3">{title}</h3>
+  <!-- <h3 class="h3">{title}</h3>
   {#if note}
     <blockquote class="blockquote">{note}</blockquote>
-  {/if}
+  {/if} -->
 
   <slot name="description" />
 
@@ -46,16 +82,28 @@
       {/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" />
+    {#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>
     {/if}
     
+					
   </div>
   </div>
  
-
+  {#if help}
+  <button class="btn btn-sm variant-filled-warning fixed bottom-5 right-10" use:popup={popupClick}>?</button>
+    
+  <div class="card p-4 variant-filled-primary" data-popup="popupClick">
+    <Help />
+    <div class="arrow variant-filled-primary" />
+  </div>
+  {/if}
 
 
  {#if menu}

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

@@ -1,9 +1,9 @@
 <script lang="ts">
- import { Position } from "$lib/models/Enums";
+ import { positionType } from "$lib/models/Enums";
 
 	export let textCss = "text-secundary-500"
 	export let label = "";
-	export let position:Position = Position.start
+	export let position:positionType = positionType.start;
 
 </script>
 

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+
+ import { breadcrumbStore } from '$store/pageStores';
+ import type{ breadcrumbItemType } from '$models/Page';
+
+
+ export let title;
+
+
+ let list:breadcrumbItemType[] = [];
+ $:list;
+
+	$:breadcrumbStore.subscribe(value => {
+		
+			list = value?.items;
+	
+	});
+
+
+
+</script>
+
+
+<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-separator" aria-hidden>&rsaquo;</li>
+
+	{#each list as crumb, i}
+		<!-- If crumb index is less than the breadcrumb length minus 1 -->
+		{#if i < list.length - 1}
+			<li class="crumb"><a class="anchor" href={crumb.link}>{crumb.label}</a></li>
+			<li class="crumb-separator" aria-hidden>&rsaquo;</li>
+		{:else}
+			<li class="crumb">{crumb.label}</li>
+		{/if}
+	{/each}
+</ol>
+</div>
+
+

package/src/lib/components/page/menu/Menu.svelte

@@ -1,24 +1,27 @@
 <script lang="ts">
-// 
- import Fa from 'svelte-fa/src/fa.svelte'
- import { faCog } from '@fortawesome/free-solid-svg-icons'
 
  import { onMount } from 'svelte';
- 
+ import { get } from 'svelte/store';
  import { getMenuItems}  from './MenuDataCaller';
+ import { menuStore } from '$store/pageStores';
 
- import type { Menu } from "./menu";
+ import type { MenuModel } from "$models/Page";
 
  import MenuBar from './MenuBar.svelte';
  import SettingsBar from './SettingsBar.svelte';
 
- let menu:Menu;
+ let menu:MenuModel;
 
+ 
  onMount(async () => {
   
-  menu = await getMenuItems();
-  console.log(menu);
-
+  menu = get(menuStore);
+  if(menu === undefined)
+  {
+    menu = await getMenuItems();
+    menuStore.set(menu);
+    //console.log("menu loaded",menu);
+  }
 })
 
 
@@ -28,7 +31,8 @@
 
 {#if menu}
 
-<div class="flex flex-row md:flex px-3 py-2">
+<div class="flex flex-row md:flex px-3 py-2 bg-tertiary-50 text-surface-800 z-50 shadow-md">
+
  <div class="basis-8">
  {#if menu.Logo}
    <img src='data:{menu.Logo.Mime};charset=utf-8;base64, {menu.Logo.Data}' alt='{menu.Logo.Name}' style='height:40px;' />
@@ -37,16 +41,14 @@
 
 
   <div class="flex items-center md:space-x-5 px-3 text-lg justify-start">
- 
     <MenuBar menuBar={menu.MenuBar} />
     <MenuBar menuBar={menu.Extended} />
   </div>
   <div class="flex-auto w-64 flex items-left md:space-x-3 justify-end">
- <MenuBar menuBar={menu.AccountBar} />
- <MenuBar menuBar={menu.LaunchBar} />
- <SettingsBar menuBar={menu.Settings} />
-
- </div>
+    <MenuBar menuBar={menu.AccountBar} />
+    <MenuBar menuBar={menu.LaunchBar} />
+    <SettingsBar menuBar={menu.Settings} />
+  </div>
 
 </div>
 

package/src/lib/components/page/menu/MenuBar.svelte

@@ -15,7 +15,7 @@
  let radomNumber = Math.floor(Math.random() * 100);
  
  
- console.log(menuBar);
+ 
  </script>
  
  

package/src/lib/components/page/menu/MenuItem.svelte

@@ -1,18 +1,24 @@
 <script lang="ts">
  import { popup } from '@skeletonlabs/skeleton';
- import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
 
+//uicomponents
+import MenuSublist from './MenuSublist.svelte';
+
+ //types
  import type { PopupSettings } from '@skeletonlabs/skeleton';
- import type { MenuItem } from "./menu";
+ import type { MenuItem } from "$models/Page";
+
+ import { goTo } from '$services/BaseCaller';
+
 
  export let menubarItem:MenuItem;
  export let comboboxValue;
 
- let radomNumber = Math.floor(Math.random() * 100).toString();
+ let id = Math.floor(Math.random() * 100).toString();
 
  let popupCombobox: PopupSettings = {
 event: 'click',
-target: radomNumber,
+target: id,
 placement: 'bottom',
 // Close the popup when the item is clicked
 closeQuery: '.listbox-item'
@@ -21,24 +27,18 @@ closeQuery: '.listbox-item'
  </script>
 {#if menubarItem.Items.length<1} 
 
-<button class="flex items-center gap-x-1 text-xl font-semibold leading-6 text-gray-500" use:popup={popupCombobox}>
+<button use:popup={popupCombobox} on:click={()=> goTo(menubarItem.Url)}>
 <span class="capitalize">{comboboxValue ?? menubarItem.Title}</span>
-
 </button>
 
 {:else}
-<button class="flex items-center gap-x-1 text-xl font-semibold leading-6 text-gray-00" use:popup={popupCombobox}>
+
+
+<button class="flex items-center gap-x-1 " use:popup={popupCombobox}>
 <span class="capitalize">{menubarItem.Title}</span>
 <div class="before:content-['▾']"></div>
 </button>
-<div class="card w-48 shadow-xl py-2" data-popup={radomNumber}>
-
-<ListBox rounded="rounded-none">
-{#each menubarItem.Items as item}
 
-<ListBoxItem class="bg-white text-gray-900 py-1 text-sm"  bind:group={item.Title} name="medium" value={item.Title}><a class="bg-white text-gray-900 py-1 text-sm"  href={item.Url}>{item.Title}</a></ListBoxItem>
-{/each}
-</ListBox>
-</div>
+<MenuSublist {id} items={menubarItem.Items} />
 
 {/if}

package/src/lib/components/page/menu/MenuSublist.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
+import type { MenuItem } from "./menu";
+import { goTo } from '$services/BaseCaller';
+
+export let id;
+export let items:MenuItem[];
+
+
+let lastModule = "";
+  let first = true;
+ 
+  // store last module
+ function isNewModule(module)
+ {
+  if(module === lastModule ){
+    return false;
+  }
+  else
+  {
+    lastModule = module;
+    if(first)
+    {
+      first = false;
+      return false;
+    }
+    
+    return true;
+  }
+ }
+
+</script>
+
+<div class="z-50 w-max" data-popup={id}>
+ <ListBox class="bg-white border-solid border border-surface-500">
+  {#each items as item}
+   {#if isNewModule(item.Module) }<hr class="text-surface-800">{/if}
+   <ListBoxItem class="bg-white text-sm text-surface-800 py-1 hover:bg-surface-100 hover:text-secondary-500" 
+      bind:group={item.Title} 
+      name="medium" 
+      value={item.Title}
+      on:click={()=> goTo(item.Url)}
+      >
+    {item.Title}
+   </ListBoxItem>
+   {/each}
+ </ListBox>
+</div> 

package/src/lib/components/page/menu/SettingsBar.svelte

@@ -1,61 +1,40 @@
 <script lang="ts">
- import { popup } from '@skeletonlabs/skeleton';
- import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
-
- import type { PopupSettings } from '@skeletonlabs/skeleton';
- import type { MenuItem } from "./menu";
- import Fa from 'svelte-fa/src/fa.svelte'
- import { faCog } from '@fortawesome/free-solid-svg-icons'
-
- export let menuBar:MenuItem [];
-
-
- let lastModule = "";
- let first = true;
-
-function isNewModule(module)
-{
- if(module === lastModule ){
-   return false;
- }
- else
- {
-   lastModule = module;
-   if(first)
-   {
-     first = false;
-     return false;
-   }
-   
-   return true;
- }
-}
-
- let popupCombobox: PopupSettings = {
-event: 'click',
-target: 'popupCombobox',
-placement: 'bottom',
-// Close the popup when the item is clicked
-closeQuery: '.listbox-item'
-};
-
- </script>
-
-{#if menuBar}
-<button class="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900" use:popup={popupCombobox}>
-<span class="capitalize"><Fa icon={faCog} /></span>
-
-</button>
-<div class="card w-48 shadow-xl py-2" data-popup="popupCombobox">
-<ListBox rounded="rounded-none bg-white">
-{#each menuBar as menubarItem}
-{#if isNewModule(menubarItem.Module) }<hr class="bg-gray-900">{/if}
-<ListBoxItem class="bg-white text-gray-900 py-1" href="{menubarItem.Url}" bind:group={menubarItem.Title} name="medium" value={menubarItem.Title}><a href={menubarItem.Url}>{menubarItem.Title}</a></ListBoxItem>
-
-
-
-{/each}
-</ListBox>
-</div>
-{/if}
-
+  import { popup } from '@skeletonlabs/skeleton';
+  import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
+ 
+  import type { PopupSettings } from '@skeletonlabs/skeleton';
+  import type { MenuItem } from "./menu";
+  import Fa from 'svelte-fa/src/fa.svelte'
+  import { faCog } from '@fortawesome/free-solid-svg-icons'
+ 
+  import { goTo } from '$services/BaseCaller';
+ 
+  export let menuBar:MenuItem [];
+  //uicomponents
+  import MenuSublist from './MenuSublist.svelte';
+ 
+ 
+ 
+ 
+  let popupCombobox: PopupSettings = {
+    event: 'click',
+    target: 'settings',
+    placement: 'bottom',
+    // Close the popup when the item is clicked
+    closeQuery: '.listbox-item'
+    };
+ 
+  </script>
+ 
+ {#if menuBar}
+ <button class="flex items-center gap-x-1 text-sm text-surface-800" use:popup={popupCombobox}>
+ <span class="capitalize"><Fa icon={faCog} /></span>
+ 
+ </button>
+
+ <MenuSublist id="settings" items={menuBar} />
+ 
+
+ {/if}
+ 
+ 

package/src/lib/index.ts

@@ -48,20 +48,20 @@ export { ListView, TableView, Spinner, Page, Alert };
 
 //Api
 export { Api } from './services/Api.js';
-export { host, username, password, setApiConfig } from './stores/apistore.js';
+export { host, username, password, setApiConfig } from './stores/apiStores.ts';
 
 //Type
 export type { 
 	user, 
-	Input,
-	FileUploaderModel,
-	Link,
-	ListItem,
-	KvP
-	} from './models/Models.js';
+	inputType,
+	fileUploaderModel,
+	linkType,
+	listItemType,
+	keyValuePairType
+	} from './models/Models.ts';
 
 //enum
-export { Position	} from './models/Enums';
+export { positionType	} from './models/Enums';
 
 // Table
 export { Table, TableFilter, columnFilter, searchFilter };

package/src/lib/models/Enums.ts

@@ -1,5 +1,5 @@
 
-export enum Position {
+export enum positionType {
 	start = "start",
 	end = "end",
  center = "center"