@bexis2/bexis2-core-ui 0.1.13 → 0.2.0

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

@@ -1,11 +1,12 @@
 <script>import { popup } from "@skeletonlabs/skeleton";
-import { ListBox, ListBoxItem } from "@skeletonlabs/skeleton";
+import MenuSublist from "./MenuSublist.svelte";
+import { goTo } from "../../../services/BaseCaller";
 export let menubarItem;
 export let comboboxValue;
-let radomNumber = Math.floor(Math.random() * 100).toString();
+let id = Math.floor(Math.random() * 100).toString();
 let popupCombobox = {
   event: "click",
-  target: radomNumber,
+  target: id,
   placement: "bottom",
   // Close the popup when the item is clicked
   closeQuery: ".listbox-item"
@@ -13,24 +14,18 @@ let popupCombobox = {
 </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/dist/components/page/menu/MenuItem.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import type { MenuItem } from "./menu";
 declare const __propDef: {
     props: {
         menubarItem: MenuItem;

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

@@ -0,0 +1,35 @@
+<script>import { ListBox, ListBoxItem } from "@skeletonlabs/skeleton";
+import { goTo } from "../../../services/BaseCaller";
+export let id;
+export let items;
+let lastModule = "";
+let first = true;
+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/dist/components/page/menu/MenuSublist.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { MenuItem } from "./menu";
+declare const __propDef: {
+    props: {
+        id: any;
+        items: MenuItem[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MenuSublistProps = typeof __propDef.props;
+export type MenuSublistEvents = typeof __propDef.events;
+export type MenuSublistSlots = typeof __propDef.slots;
+export default class MenuSublist extends SvelteComponentTyped<MenuSublistProps, MenuSublistEvents, MenuSublistSlots> {
+}
+export {};

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

@@ -2,45 +2,27 @@
 import { ListBox, ListBoxItem } from "@skeletonlabs/skeleton";
 import Fa from "svelte-fa/src/fa.svelte";
 import { faCog } from "@fortawesome/free-solid-svg-icons";
+import { goTo } from "../../../services/BaseCaller";
 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;
-  }
-}
+import MenuSublist from "./MenuSublist.svelte";
 let popupCombobox = {
   event: "click",
-  target: "popupCombobox",
+  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>
 
-{#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}
+ <MenuSublist id="settings" items={menuBar} />
+ 
 
+ {/if}
+ 
+ 

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/apistore.js';
-export type { user, Input, FileUploaderModel, Link, ListItem, KvP } from './models/Models.js';
-export { Position } from './models/Enums';
+export { host, username, password, setApiConfig } from './stores/apiStores.ts';
+export type { user, inputType, fileUploaderModel, linkType, listItemType, keyValuePairType } from './models/Models.ts';
+export { positionType } from './models/Enums';
 export { Table, TableFilter, columnFilter, searchFilter };
 export type { TableConfig, Columns, Column };

package/dist/index.js

@@ -29,8 +29,8 @@ export { FileInfo, FileIcon, FileUploader };
 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';
 //enum
-export { Position } from './models/Enums';
+export { positionType } from './models/Enums';
 // Table
 export { Table, TableFilter, columnFilter, searchFilter };

package/dist/models/Enums.d.ts

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

package/dist/models/Enums.js

@@ -1,6 +1,6 @@
-export var Position;
-(function (Position) {
-    Position["start"] = "start";
-    Position["end"] = "end";
-    Position["center"] = "center";
-})(Position || (Position = {}));
+export var positionType;
+(function (positionType) {
+    positionType["start"] = "start";
+    positionType["end"] = "end";
+    positionType["center"] = "center";
+})(positionType || (positionType = {}));

package/dist/models/Models.d.ts

@@ -1,11 +1,11 @@
 import type { SvelteComponent } from 'svelte';
 import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
 import type { Writable } from 'svelte/store';
-export interface Link {
+export interface linkType {
     label: string;
     url: string;
 }
-export interface Input {
+export interface inputType {
     id: string;
     label: string;
     feedback: string[];
@@ -14,29 +14,29 @@ export interface Input {
     required: boolean;
     placeholder: string;
 }
-export interface FileInfo {
+export interface fileInfoType {
     name: string;
     type: string;
     length: number;
     description: string;
     validationHash: string;
 }
-export interface FileUploaderModel {
+export interface fileUploaderModel {
     accept: string[];
-    existingFiles: FileInfo[];
+    existingFiles: fileInfoType[];
     descriptionType: number;
     multiple: boolean;
     maxSize: number;
     lastModification: Date;
 }
-export interface Files {
+export interface filesType {
     accepted: Blob[];
     rejected: Blob[];
 }
-export type user = {
+export type userType = {
     name: string;
 };
-export interface FileObj {
+export interface fileObjType {
     path: string;
     lastModified: number;
     lastModifiedDate: Date;
@@ -71,12 +71,22 @@ export interface TableConfig<T> {
     defaultPageSize?: number;
     optionsComponent?: typeof SvelteComponent;
 }
-export interface KvP {
+export interface keyValuePairType {
     id: number;
     text: string;
 }
-export interface ListItem {
+export interface listItemType {
     id: number;
     text: string;
     group: string;
 }
+export interface helpItemType {
+    id?: string;
+    name: string;
+    description: string;
+    link?: string;
+}
+export interface helpStoreType {
+    itemId?: string;
+    helpItems: helpItemType[];
+}

package/dist/models/Models.js

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

package/dist/models/Page.js

@@ -0,0 +1,16 @@
+export class BreadcrumbModel {
+    items;
+    constructor() {
+        this.items = [];
+    }
+}
+// MENU
+/********************************** */
+export class MenuModel {
+    Logo;
+    LaunchBar;
+    MenuBar;
+    AccountBar;
+    Settings;
+    Extended;
+}

package/dist/services/Api.js

@@ -1,6 +1,6 @@
 // Api.js
 import axios from 'axios';
-import { host, username, password } from '../stores/apistore';
+import { host, username, password } from '../stores/apiStores';
 console.log('setup axios');
 // implement a method to execute all the request from here.
 const apiRequest = (method, url, request) => {

package/dist/services/BaseCaller.d.ts

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

package/dist/services/BaseCaller.js

@@ -0,0 +1,12 @@
+// Implementations for all the calls for the pokemon endpoints.
+//import Api from "./Api";
+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()
+  }
+};
+
+

package/dist/stores/pageStores.d.ts

@@ -0,0 +1,25 @@
+import type { helpItemType, helpStoreType } from "../models/Models";
+import type { breadcrumbItemType } from "../models/Page";
+import { BreadcrumbModel } from "../models/Page";
+export declare const helpStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<helpStoreType>, invalidate?: ((value?: helpStoreType | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
+    set: (this: void, value: helpStoreType) => void;
+    update: (this: void, updater: import("svelte/store").Updater<helpStoreType>) => void;
+    setHelpItemList: (helpItems: helpItemType[]) => void;
+    setItemId: (itemId: string) => void;
+    resetItemId: () => void;
+    show: (itemId: string) => void;
+    showHelpItem: (helpItem: helpItemType) => void;
+    hide: () => void;
+    toggle: (itemId: string) => void;
+    reset: () => void;
+    clear: () => void;
+};
+export declare const menuStore: import("svelte/store").Writable<Menu>;
+export declare const breadcrumbStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<BreadcrumbModel>, invalidate?: ((value?: BreadcrumbModel | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
+    set: (this: void, value: BreadcrumbModel) => void;
+    update: (this: void, updater: import("svelte/store").Updater<BreadcrumbModel>) => void;
+    addItem: (item: breadcrumbItemType) => void;
+    clean: () => void;
+};

package/dist/stores/pageStores.js

@@ -0,0 +1,112 @@
+import { BreadcrumbModel } from "../models/Page";
+import { writable } from 'svelte/store';
+function createHelpStore() {
+    // set Store Type
+    const { subscribe, set, update } = writable();
+    return {
+        //pass Store default functions
+        subscribe,
+        set,
+        update,
+        //set the list of help items to show
+        setHelpItemList: (helpItems) => {
+            helpStore.set({ itemId: undefined, helpItems: helpItems });
+        },
+        //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;
+                v = { itemId: itemId, helpItems: value.helpItems };
+            });
+            update(u => u = v);
+        },
+        //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;
+                v = { itemId: undefined, helpItems: value.helpItems };
+            });
+            update(u => u = v);
+        },
+        //set the ID of the help item and display it
+        show: (itemId) => {
+            helpStore.setItemId(itemId);
+        },
+        //set a help item and display it
+        showHelpItem: (helpItem) => {
+            helpItem.id = (helpItem.id === undefined) ? "default" : helpItem.id;
+            helpStore.set({ itemId: helpItem.id, helpItems: [helpItem] });
+        },
+        //reset the ID of the help item and hide it 
+        hide: () => {
+            helpStore.resetItemId();
+        },
+        //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 };
+                }
+            });
+            update(u => u = v);
+        },
+        reset: () => {
+            const h = [];
+            helpStore.set({ itemId: undefined, helpItems: h });
+        },
+        clear: () => {
+            helpStore.reset();
+        }
+    };
+}
+//crate and export the instance of the store 
+export const helpStore = createHelpStore();
+// store for menu
+export const menuStore = writable();
+function createBreadcrumbStore() {
+    // set Store Type
+    const { subscribe, set, update } = writable();
+    set(new BreadcrumbModel());
+    return {
+        //pass Store default functions
+        subscribe,
+        set,
+        update,
+        //set the ID of the help item and display it 
+        addItem: (item) => {
+            let b;
+            breadcrumbStore.subscribe(value => {
+                value = (value === undefined) ? new BreadcrumbModel() : value;
+                // value.items = (value.items === undefined) ? b:value.items
+                if (!value.items.find(i => i.label === item.label)) {
+                    value.items = [...value.items, item];
+                }
+                b = value;
+            });
+            update(s => s = b);
+        },
+        clean: () => {
+            let b;
+            breadcrumbStore.subscribe(value => {
+                value = new BreadcrumbModel();
+                b = value;
+            });
+            update(s => s = b);
+        },
+    };
+}
+// store for breadcrumb navigation
+export const breadcrumbStore = createBreadcrumbStore();

package/package.json

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { FileUploaderModel, FileInfo, Files } from '../../models/Models.js';
+	import type { fileUploaderModel, fileInfoType, filesType } from '../../models/Models.js';
 
 	import DropZone from 'svelte-file-dropzone/Dropzone.svelte';
 	import Fa from 'svelte-fa/src/fa.svelte';
@@ -27,7 +27,7 @@
 
 	export let context = '';
 
-	export let data: FileUploaderModel | undefined;
+	export let data: fileUploaderModel | undefined;
 
 	$: model = data;
 	$: submitBt = 'submit';
@@ -36,9 +36,9 @@
 
 	const dispatch = createEventDispatcher();
 
-	let fx: FileInfo[];
+	let fx: fileInfoType[];
 
-	let files: Files = { accepted: [], rejected: [] };
+	let files: filesType = { accepted: [], rejected: [] };
 	$: files;
 
 	onMount(async () => {

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

@@ -1,17 +1,19 @@
 <script lang="ts">
 	import InputContainer from './InputContainer.svelte';
 
+	export let id;
 	export let source;
 	export let target;
 	export let title;
 	export let description = '';
 	export let key;
+	export let help = false;
 
 	let required = false;
 	let feedback: [];
 </script>
 
-<InputContainer label={title} {feedback} {required}>
+<InputContainer {id} label={title} {feedback} {required} {help}>
 	{#each source as item}
 		<label class="flex items-center space-x-2" for={key}>
 			<input

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

@@ -9,9 +9,11 @@
 	export let invalid: boolean = false;
 	export let required: boolean = false;
 	export let feedback: string[] = [''];
+	export let help = false;
+	
 </script>
 
-<InputContainer {label} {feedback} {required}>
+<InputContainer {id} {label} {feedback} {required} {help}>
 	<input
 		{id}
 		class="input variant-form-material"

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

@@ -10,6 +10,7 @@
 	export let feedback = [''];
 	export let required = false;
 	export let complexTarget = false;
+	export let help = false;
 
 	$: selected = null;
 
@@ -41,7 +42,7 @@
 	}
 </script>
 
-<InputContainer label={title} {feedback} {required}>
+<InputContainer {id} label={title} {feedback} {required} {help}>
 	<select
 		{id}
 		class="select variant-form-material"

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

@@ -1,9 +1,33 @@
 <script lang="ts">
+	import { helpStore } from '$store/pageStores'
+
+	export let id: string = '';
 	export let label: string = '';
 	export let required: boolean;
 	export let feedback: string[];
-</script>
+	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}
@@ -20,3 +44,4 @@
 		</span>
 	{/if}
 </label>
+</div>

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

@@ -17,8 +17,10 @@
 	export let required = false;
 	export let feedback = [''];
 	export let placeholder = "-- Please select --"
-	export let invalid = false
-	export let loading = false
+	export let invalid = false;
+	export let loading = false;
+	export let help = false;
+
 
 	let isLoaded = false;
 
@@ -149,7 +151,7 @@
 </script>
 
 
-<InputContainer label={title} {feedback} {required}>
+<InputContainer {id} label={title} {feedback} {required} {help}>
 	<Select
 	 {id}
 		items={source}

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"