@bexis2/bexis2-core-ui 0.1.0 → 0.1.1

package/README.md

@@ -1,5 +1,11 @@
 # bexis-core-ui
-## v.0.0.32
+## v0.1.1
+### update
+- Page 
+  - add menu (beta)
+
+
+## v.0.1.0
 ### add
 #### types
 - ListItem

package/dist/components/file/FileUploader.svelte

@@ -1,6 +1,6 @@
 <script>import DropZone from "svelte-file-dropzone/Dropzone.svelte";
 import Fa from "svelte-fa/src/fa.svelte";
-import Spinner from "../spinner/Spinner.svelte";
+import Spinner from "../page/Spinner.svelte";
 import { createEventDispatcher } from "svelte";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { faSave } from "@fortawesome/free-regular-svg-icons";

package/dist/components/form/MultiSelect.svelte

@@ -1,91 +1,91 @@
-<script>
-	import InputContainer from './InputContainer.svelte';
-
-	import Select from 'svelte-select';
-	import { onMount } from 'svelte';
-
-	export let source;
-	export let target;
-	export let title;
-	export let itemId = 'value';
-	export let label = 'label';
-	export let isMulti = true;
-	export let isComplex = false;
-	export let isTargetComplex = false;
-	export let required = false;
-	export let feedback = [];
-
-	let isLoaded = false;
-
-	$: value = null;
-	$: updateTarget(value);
-
-	function updateTarget(selection) {
-		//diffrent cases
-		console.log('------');
-
-		//a) source is complex model is simple
-		if (isComplex && !isTargetComplex && isLoaded) {
-			console.log('a) source is complex model is simple');
-
-			target = [];
-			for (let i in selection) {
-				let item = selection[i];
-				target.push(item[itemId]);
-			}
-		}
-
-		if (!isComplex && !isTargetComplex && isLoaded) {
-			target = [];
-			for (let i in selection) {
-				target.push(selection[i].value);
-			}
-		}
-		console.log('selection ' + title, selection);
-		console.log('target ' + title, target);
-	}
-
-	onMount(async () => {
-		//console.log("on mount multiselect");
-		//console.log(source);
-
-		//a) source is complex model is simple
-		if (isComplex && !isTargetComplex) {
-			let items = [];
-			// event.detail will be null unless isMulti is true and user has removed a single item
-			for (let i in target) {
-				let t = target[i];
-				items.push(source.find((item) => item.key === t));
-			}
-
-			isLoaded = true;
-			if (items.length > 0) {
-				value = items;
-			}
-			//console.log(value);
-		}
-
-		//b) simple liust and simple model
-		if (!isComplex && !isTargetComplex) {
-			//console.log("source", source);
-			//console.log("target",target);
-			isLoaded = true;
-			//set target only if its nit empty
-			if (target != null && target !== undefined && target != '') {
-				value = target;
-			}
-		}
-	});
-</script>
-
-<InputContainer label={title} {feedback} {required}>
-	<Select
-		class="select variant-form-material"
-		items={source}
-		{itemId}
-		{label}
-		multiple={isMulti}
-		bind:value
-		placeholder="-- Please select --"
-	/>
-</InputContainer>
+<script>
+	import InputContainer from './InputContainer.svelte';
+
+	import Select from 'svelte-select';
+	import { onMount } from 'svelte';
+
+	export let source;
+	export let target;
+	export let title;
+	export let itemId = 'value';
+	export let label = 'label';
+	export let isMulti = true;
+	export let isComplex = false;
+	export let isTargetComplex = false;
+	export let required = false;
+	export let feedback = [];
+
+	let isLoaded = false;
+
+	$: value = null;
+	$: updateTarget(value);
+
+	function updateTarget(selection) {
+		//diffrent cases
+		console.log('------');
+
+		//a) source is complex model is simple
+		if (isComplex && !isTargetComplex && isLoaded) {
+			console.log('a) source is complex model is simple');
+
+			target = [];
+			for (let i in selection) {
+				let item = selection[i];
+				target.push(item[itemId]);
+			}
+		}
+
+		if (!isComplex && !isTargetComplex && isLoaded) {
+			target = [];
+			for (let i in selection) {
+				target.push(selection[i].value);
+			}
+		}
+		console.log('selection ' + title, selection);
+		console.log('target ' + title, target);
+	}
+
+	onMount(async () => {
+		//console.log("on mount multiselect");
+		//console.log(source);
+
+		//a) source is complex model is simple
+		if (isComplex && !isTargetComplex) {
+			let items = [];
+			// event.detail will be null unless isMulti is true and user has removed a single item
+			for (let i in target) {
+				let t = target[i];
+				items.push(source.find((item) => item.key === t));
+			}
+
+			isLoaded = true;
+			if (items.length > 0) {
+				value = items;
+			}
+			//console.log(value);
+		}
+
+		//b) simple liust and simple model
+		if (!isComplex && !isTargetComplex) {
+			//console.log("source", source);
+			//console.log("target",target);
+			isLoaded = true;
+			//set target only if its nit empty
+			if (target != null && target !== undefined && target != '') {
+				value = target;
+			}
+		}
+	});
+</script>
+
+<InputContainer label={title} {feedback} {required}>
+	<Select
+		class="select variant-form-material"
+		items={source}
+		{itemId}
+		{label}
+		multiple={isMulti}
+		bind:value
+		placeholder="-- Please select --"
+	/>
+</InputContainer>

package/dist/components/page/Page.svelte

@@ -1,9 +1,16 @@
-<script>export let title = "";
+<script>import Menu from "./menu/Menu.svelte";
+export let title = "";
 export let note = "";
 export let links = [];
+export let menu = true;
+export let footer = true;
 </script>
  
- <div class="px-5 grid gap-5" >
+ {#if menu}
+  <Menu/>
+ {/if}
+
+ <div class="px-5 grid gap-5 content-center" >
   <h1 class="h1">{title}</h1>
   {#if note}
     <blockquote class="blockquote">{note}</blockquote>
@@ -20,4 +27,8 @@ export let links = [];
   {/if}
   <slot/>
  </div>
+
+ {#if menu}
+   <!-- footer -->
+ {/if}
  

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

@@ -5,6 +5,8 @@ declare const __propDef: {
         title?: string | undefined;
         note?: string | undefined;
         links?: Link[] | undefined;
+        menu?: boolean | undefined;
+        footer?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/page/menu/Menu.svelte

@@ -0,0 +1,36 @@
+<script>import Fa from "svelte-fa/src/fa.svelte";
+import { faCog } from "@fortawesome/free-solid-svg-icons";
+import { onMount } from "svelte";
+import { setApiConfig } from "../../../stores/apistore";
+import { getMenuItems } from "./MenuDataCaller";
+import MenuBar from "./MenuBar.svelte";
+import SettingsBar from "./SettingsBar.svelte";
+let menu;
+onMount(async () => {
+  setApiConfig("https://localhost:44345", "david", "123456");
+  menu = await getMenuItems();
+});
+</script>
+
+{#if menu}
+
+<div class="flex flex-row md:flex px-3 py-2">
+ <div class="basis-2/3">
+ {#if menu.Logo}
+   <img src='data:{menu.Logo.Mime};charset=utf-8;base64, {menu.Logo.Data}' alt='{menu.Logo.Name}' style='height:40px;' />
+ {/if}
+ </div>
+
+ <div class="flex-auto w-64 flex items-center md:space-x-3 justify-end">
+
+ <MenuBar menuBar={menu.AccountBar} />
+ <MenuBar menuBar={menu.LaunchBar} />
+ <SettingsBar menuBar={menu.Settings} />
+ </div>
+
+</div>
+<div class="flex items-center md:space-x-5 px-3 text-lg">
+ <MenuBar menuBar={menu.MenuBar} />
+ <MenuBar menuBar={menu.Extended} />
+</div>
+{/if}

package/dist/components/page/menu/Menu.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 MenuProps = typeof __propDef.props;
+export type MenuEvents = typeof __propDef.events;
+export type MenuSlots = typeof __propDef.slots;
+export default class Menu extends SvelteComponentTyped<MenuProps, MenuEvents, MenuSlots> {
+}
+export {};

package/dist/components/page/menu/MenuBar.svelte

@@ -0,0 +1,21 @@
+
+<script>import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
+import { storePopup } from "@skeletonlabs/skeleton";
+storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+import Item from "./MenuItem.svelte";
+export let menuBar;
+let comboboxValue;
+let radomNumber = Math.floor(Math.random() * 100);
+</script>
+ 
+ 
+ {#if menuBar}
+ {#each menuBar as menubarItem}
+ 
+ <Item {menubarItem}{comboboxValue}/>
+ 
+ {/each}
+ {/if}
+ 
+ 
+ 

package/dist/components/page/menu/MenuBar.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { MenuItem } from "../../models/menu";
+declare const __propDef: {
+    props: {
+        menuBar: MenuItem[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MenuBarProps = typeof __propDef.props;
+export type MenuBarEvents = typeof __propDef.events;
+export type MenuBarSlots = typeof __propDef.slots;
+export default class MenuBar extends SvelteComponentTyped<MenuBarProps, MenuBarEvents, MenuBarSlots> {
+}
+export {};

package/dist/components/page/menu/MenuDataCaller.d.ts

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

package/dist/components/page/menu/MenuDataCaller.js

@@ -0,0 +1,11 @@
+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/components/page/menu/MenuItem.svelte

@@ -0,0 +1,36 @@
+<script>import { popup } from "@skeletonlabs/skeleton";
+import { ListBox, ListBoxItem } from "@skeletonlabs/skeleton";
+export let menubarItem;
+export let comboboxValue;
+let radomNumber = Math.floor(Math.random() * 100).toString();
+let popupCombobox = {
+  event: "click",
+  target: radomNumber,
+  placement: "bottom",
+  // Close the popup when the item is clicked
+  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}>
+<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}>
+<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={menubarItem.Title} name="medium" value={item.Title}>{item.Title}</ListBoxItem>
+{/each}
+</ListBox>
+</div>
+
+{/if}

package/dist/components/page/menu/MenuItem.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        menubarItem: any;
+        comboboxValue: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MenuItemProps = typeof __propDef.props;
+export type MenuItemEvents = typeof __propDef.events;
+export type MenuItemSlots = typeof __propDef.slots;
+export default class MenuItem extends SvelteComponentTyped<MenuItemProps, MenuItemEvents, MenuItemSlots> {
+}
+export {};

package/dist/components/page/menu/SettingsBar.svelte

@@ -0,0 +1,46 @@
+<script>import { popup } from "@skeletonlabs/skeleton";
+import { ListBox, ListBoxItem } from "@skeletonlabs/skeleton";
+import Fa from "svelte-fa/src/fa.svelte";
+import { faCog } from "@fortawesome/free-solid-svg-icons";
+export let menuBar;
+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 = {
+  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" bind:group={menubarItem.Title} name="medium" value={menubarItem.Title}>{menubarItem.Title}</ListBoxItem>
+
+
+
+{/each}
+</ListBox>
+</div>
+{/if}
+

package/dist/components/page/menu/SettingsBar.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { MenuItem } from "../../models/menu";
+declare const __propDef: {
+    props: {
+        menuBar: MenuItem[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SettingsBarProps = typeof __propDef.props;
+export type SettingsBarEvents = typeof __propDef.events;
+export type SettingsBarSlots = typeof __propDef.slots;
+export default class SettingsBar extends SvelteComponentTyped<SettingsBarProps, SettingsBarEvents, SettingsBarSlots> {
+}
+export {};

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

@@ -0,0 +1,21 @@
+export interface Menu {
+    Logo: Logo;
+    LaunchBar: MenuItem[];
+    MenuBar: MenuItem[];
+    AccountBar: MenuItem[];
+    Settings: MenuItem[];
+    Extended: MenuItem[];
+}
+export interface MenuItem {
+    Title: string;
+    Url: string;
+    Target: string;
+    Module: string;
+    Items: MenuItem[];
+}
+export interface Logo {
+    Mime: string;
+    Name: string;
+    Data: string;
+    Height: number;
+}

package/dist/components/page/menu/menu.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import TableView from './TableView.svelte';
 import FileIcon from './components/file/FileIcon.svelte';
 import FileInfo from './components/file/FileInfo.svelte';
 import FileUploader from './components/file/FileUploader.svelte';
-import Spinner from './components/spinner/Spinner.svelte';
+import Spinner from './components/page/Spinner.svelte';
 import Page from './components/page/Page.svelte';
 import Alert from './components/page/Alert.svelte';
 import Checkbox from './components/form/Checkbox.svelte';

package/dist/index.js

@@ -5,7 +5,7 @@ import FileIcon from './components/file/FileIcon.svelte';
 import FileInfo from './components/file/FileInfo.svelte';
 import FileUploader from './components/file/FileUploader.svelte';
 //page
-import Spinner from './components/spinner/Spinner.svelte';
+import Spinner from './components/page/Spinner.svelte';
 import Page from './components/page/Page.svelte';
 import Alert from './components/page/Alert.svelte';
 // input 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": false,
   "scripts": {
     "dev": "vite dev",

package/src/lib/components/file/FileUploader.svelte

@@ -4,7 +4,7 @@
 	import DropZone from 'svelte-file-dropzone/Dropzone.svelte';
 	import Fa from 'svelte-fa/src/fa.svelte';
 
-	import Spinner from '../spinner/Spinner.svelte';
+	import Spinner from '../page/Spinner.svelte';
 	import { createEventDispatcher } from 'svelte';
 	import { faTrash } from '@fortawesome/free-solid-svg-icons';
 	import { faSave } from '@fortawesome/free-regular-svg-icons';

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

@@ -1,91 +1,91 @@
-<script>
-	import InputContainer from './InputContainer.svelte';
-
-	import Select from 'svelte-select';
-	import { onMount } from 'svelte';
-
-	export let source;
-	export let target;
-	export let title;
-	export let itemId = 'value';
-	export let label = 'label';
-	export let isMulti = true;
-	export let isComplex = false;
-	export let isTargetComplex = false;
-	export let required = false;
-	export let feedback = [];
-
-	let isLoaded = false;
-
-	$: value = null;
-	$: updateTarget(value);
-
-	function updateTarget(selection) {
-		//diffrent cases
-		console.log('------');
-
-		//a) source is complex model is simple
-		if (isComplex && !isTargetComplex && isLoaded) {
-			console.log('a) source is complex model is simple');
-
-			target = [];
-			for (let i in selection) {
-				let item = selection[i];
-				target.push(item[itemId]);
-			}
-		}
-
-		if (!isComplex && !isTargetComplex && isLoaded) {
-			target = [];
-			for (let i in selection) {
-				target.push(selection[i].value);
-			}
-		}
-		console.log('selection ' + title, selection);
-		console.log('target ' + title, target);
-	}
-
-	onMount(async () => {
-		//console.log("on mount multiselect");
-		//console.log(source);
-
-		//a) source is complex model is simple
-		if (isComplex && !isTargetComplex) {
-			let items = [];
-			// event.detail will be null unless isMulti is true and user has removed a single item
-			for (let i in target) {
-				let t = target[i];
-				items.push(source.find((item) => item.key === t));
-			}
-
-			isLoaded = true;
-			if (items.length > 0) {
-				value = items;
-			}
-			//console.log(value);
-		}
-
-		//b) simple liust and simple model
-		if (!isComplex && !isTargetComplex) {
-			//console.log("source", source);
-			//console.log("target",target);
-			isLoaded = true;
-			//set target only if its nit empty
-			if (target != null && target !== undefined && target != '') {
-				value = target;
-			}
-		}
-	});
-</script>
-
-<InputContainer label={title} {feedback} {required}>
-	<Select
-		class="select variant-form-material"
-		items={source}
-		{itemId}
-		{label}
-		multiple={isMulti}
-		bind:value
-		placeholder="-- Please select --"
-	/>
-</InputContainer>
+<script>
+	import InputContainer from './InputContainer.svelte';
+
+	import Select from 'svelte-select';
+	import { onMount } from 'svelte';
+
+	export let source;
+	export let target;
+	export let title;
+	export let itemId = 'value';
+	export let label = 'label';
+	export let isMulti = true;
+	export let isComplex = false;
+	export let isTargetComplex = false;
+	export let required = false;
+	export let feedback = [];
+
+	let isLoaded = false;
+
+	$: value = null;
+	$: updateTarget(value);
+
+	function updateTarget(selection) {
+		//diffrent cases
+		console.log('------');
+
+		//a) source is complex model is simple
+		if (isComplex && !isTargetComplex && isLoaded) {
+			console.log('a) source is complex model is simple');
+
+			target = [];
+			for (let i in selection) {
+				let item = selection[i];
+				target.push(item[itemId]);
+			}
+		}
+
+		if (!isComplex && !isTargetComplex && isLoaded) {
+			target = [];
+			for (let i in selection) {
+				target.push(selection[i].value);
+			}
+		}
+		console.log('selection ' + title, selection);
+		console.log('target ' + title, target);
+	}
+
+	onMount(async () => {
+		//console.log("on mount multiselect");
+		//console.log(source);
+
+		//a) source is complex model is simple
+		if (isComplex && !isTargetComplex) {
+			let items = [];
+			// event.detail will be null unless isMulti is true and user has removed a single item
+			for (let i in target) {
+				let t = target[i];
+				items.push(source.find((item) => item.key === t));
+			}
+
+			isLoaded = true;
+			if (items.length > 0) {
+				value = items;
+			}
+			//console.log(value);
+		}
+
+		//b) simple liust and simple model
+		if (!isComplex && !isTargetComplex) {
+			//console.log("source", source);
+			//console.log("target",target);
+			isLoaded = true;
+			//set target only if its nit empty
+			if (target != null && target !== undefined && target != '') {
+				value = target;
+			}
+		}
+	});
+</script>
+
+<InputContainer label={title} {feedback} {required}>
+	<Select
+		class="select variant-form-material"
+		items={source}
+		{itemId}
+		{label}
+		multiple={isMulti}
+		bind:value
+		placeholder="-- Please select --"
+	/>
+</InputContainer>

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

@@ -13,7 +13,6 @@
 
  $:show = true;
 
-
 </script>
 {#if show}
 

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

@@ -1,14 +1,24 @@
 <script lang="ts">
 
   import type { Link } from "$lib/models/Models";
+
+  import Menu from './menu/Menu.svelte'
  
   export let title = "";
   export let note = "";
   export let links:Link[]=[];
+
+  // active or hide menu
+  export let menu:boolean = true;
+  export let footer:boolean = true;
  
  </script>
  
- <div class="px-5 grid gap-5" >
+ {#if menu}
+  <Menu/>
+ {/if}
+
+ <div class="px-5 grid gap-5 content-center" >
   <h1 class="h1">{title}</h1>
   {#if note}
     <blockquote class="blockquote">{note}</blockquote>
@@ -25,4 +35,8 @@
   {/if}
   <slot/>
  </div>
+
+ {#if menu}
+   <!-- footer -->
+ {/if}
  

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+// 
+ import Fa from 'svelte-fa/src/fa.svelte'
+ import { faCog } from '@fortawesome/free-solid-svg-icons'
+
+ import { onMount } from 'svelte';
+
+
+ import { setApiConfig } from '../../../stores/apistore';
+ import { getMenuItems}  from './MenuDataCaller';
+
+ import type { Menu } from "./menu";
+
+ import MenuBar from './MenuBar.svelte';
+ import SettingsBar from './SettingsBar.svelte';
+
+ let menu:Menu;
+
+ onMount(async () => {
+
+  setApiConfig("https://localhost:44345","david","123456");
+
+  menu = await getMenuItems();
+
+})
+
+
+
+
+</script>
+
+{#if menu}
+
+<div class="flex flex-row md:flex px-3 py-2">
+ <div class="basis-2/3">
+ {#if menu.Logo}
+   <img src='data:{menu.Logo.Mime};charset=utf-8;base64, {menu.Logo.Data}' alt='{menu.Logo.Name}' style='height:40px;' />
+ {/if}
+ </div>
+
+ <div class="flex-auto w-64 flex items-center md:space-x-3 justify-end">
+
+ <MenuBar menuBar={menu.AccountBar} />
+ <MenuBar menuBar={menu.LaunchBar} />
+ <SettingsBar menuBar={menu.Settings} />
+ </div>
+
+</div>
+<div class="flex items-center md:space-x-5 px-3 text-lg">
+ <MenuBar menuBar={menu.MenuBar} />
+ <MenuBar menuBar={menu.Extended} />
+</div>
+{/if}

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

@@ -0,0 +1,30 @@
+
+<script lang="ts">
+
+ import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
+ import { storePopup } from '@skeletonlabs/skeleton';
+ storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+ 
+ import type { MenuItem } from "../../models/menu";
+ import Item from "./MenuItem.svelte";
+ 
+ export let menuBar:MenuItem [];
+ 
+ let comboboxValue: string;
+ 
+ let radomNumber = Math.floor(Math.random() * 100);
+ 
+ 
+ </script>
+ 
+ 
+ {#if menuBar}
+ {#each menuBar as menubarItem}
+ 
+ <Item {menubarItem}{comboboxValue}/>
+ 
+ {/each}
+ {/if}
+ 
+ 
+ 

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

@@ -0,0 +1,11 @@
+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/components/page/menu/MenuItem.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+ import { popup } from '@skeletonlabs/skeleton';
+ import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
+
+ import type { PopupSettings } from '@skeletonlabs/skeleton';
+
+ export let menubarItem;
+ export let comboboxValue;
+
+ let radomNumber = Math.floor(Math.random() * 100).toString();
+
+ let popupCombobox: PopupSettings = {
+event: 'click',
+target: radomNumber,
+placement: 'bottom',
+// Close the popup when the item is clicked
+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}>
+<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}>
+<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={menubarItem.Title} name="medium" value={item.Title}>{item.Title}</ListBoxItem>
+{/each}
+</ListBox>
+</div>
+
+{/if}

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+ import { popup } from '@skeletonlabs/skeleton';
+ import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
+
+ import type { PopupSettings } from '@skeletonlabs/skeleton';
+ import type { MenuItem } from "../../models/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" bind:group={menubarItem.Title} name="medium" value={menubarItem.Title}>{menubarItem.Title}</ListBoxItem>
+
+
+
+{/each}
+</ListBox>
+</div>
+{/if}
+

package/src/lib/components/page/menu/menu.ts

@@ -0,0 +1,23 @@
+export interface Menu {
+ Logo: Logo;
+ LaunchBar: MenuItem[];
+ MenuBar: MenuItem[];
+ AccountBar: MenuItem[];
+ Settings: MenuItem[];
+ Extended: MenuItem[];
+}
+
+export interface MenuItem {
+ Title: string;
+ Url: string;
+ Target: string;
+ Module: string;
+ Items: MenuItem[];
+}
+
+export interface Logo {
+ Mime: string;
+ Name: string;
+ Data: string;
+ Height: number;
+}

package/src/lib/index.ts

@@ -7,7 +7,7 @@ import FileInfo from './components/file/FileInfo.svelte';
 import FileUploader from './components/file/FileUploader.svelte';
 
 //page
-import Spinner from './components/spinner/Spinner.svelte';
+import Spinner from './components/page/Spinner.svelte';
 import Page from './components/page/Page.svelte';
 import Alert from './components/page/Alert.svelte';