@bexis2/bexis2-core-ui 0.2.17 → 0.2.18

package/dist/components/form/MultiSelect.svelte

@@ -26,12 +26,13 @@
 
 	$: value = null;
 	$: updateTarget(value);
-	$:target, setValue(target);
+	$: target, setValue(target);
 
 	let groupBy;
 	$: groupBy;
 
 	function updateTarget(selection) {
+		console.log("UPDATE target",selection);
 		//different cases
 		//a) source is complex model is simple return array
 		if (complexSource && !complexTarget && isLoaded && isMulti) {
@@ -46,8 +47,9 @@
 
 		if (!complexSource && !complexTarget && isLoaded && isMulti) {
 			target = [];
+
 			for (let i in selection) {
-				target.push(selection[i].value);
+				target.push(selection[i]);
 			}
 		}
 
@@ -74,72 +76,73 @@
 	}
 
 	onMount(async () => {
-			setValue(target);
+		setValue(target);
 	});
 
-function setValue(t)
-{
-	//a) source is complex model is simple
-	if (complexSource && !complexTarget && isMulti) {
-				let items = [];
-				// event.detail will be null unless isMulti is true and user has removed a single item
-				for (let i in t) {
-					let t = target[i];
-					items.push(source.find((item) => item[itemId] === t));
-				}
-
-				isLoaded = true;
-				if (items.length > 0) {
-					value = items;
-				}
-				////console.log(value);
-				groupBy = (item) => item[itemGroup];
+	function setValue(t) {
+		//a) source is complex model is simple
+		if (complexSource && !complexTarget && isMulti) {
+			let items = [];
+			// event.detail will be null unless isMulti is true and user has removed a single item
+			for (let i in t) {
+				let t = target[i];
+				items.push(source.find((item) => item[itemId] === t));
+			}
+
+			isLoaded = true;
+			if (items.length > 0) {
+				value = items;
 			}
+			////console.log(value);
+			groupBy = (item) => item[itemGroup];
+		}
+
+		if (complexSource && complexTarget && isMulti) {
+			value = t;
+			isLoaded = true;
+			groupBy = (item) => item[itemGroup];
+		}
 
-			if (complexSource && complexTarget && isMulti) {
+		//b) simple liust and simple model
+		if (!complexSource && !complexTarget && isMulti) {
+			console.log('b) simple liust and simple model');
+			console.log('source', source);
+			//console.log("target",t);
+			isLoaded = true;
+			//set target only if its nit empty
+			if (t != null && t !== undefined && t != '') {
+				console.log('target', t);
 				value = t;
-				isLoaded = true;
-				groupBy = (item) => item[itemGroup];
+			}
+		}
+
+		if (!isMulti) {
+			//console.log("onmount",complexSource,complexTarget,value,target)
+			if (!complexSource && !complexTarget) {
+				value = {
+					value: t,
+					label: t
+				};
 			}
 
-			//b) simple liust and simple model
-			if (!complexSource && !complexTarget && isMulti) {
-				////console.log("source", source);
-				////console.log("target",target);
-				isLoaded = true;
-				//set target only if its nit empty
-				if (t != null && t !== undefined && t != '') {
-					value = t;
-				}
+			if (complexSource && complexTarget) {
+				value = t;
+				groupBy = (item) => item[itemGroup];
 			}
 
-			if (!isMulti) {
-				//console.log("onmount",complexSource,complexTarget,value,target)
-				if (!complexSource && !complexTarget) {
-					value = {
-						value: t,
-						label: t
-					};
-				}
-
-				if (complexSource && complexTarget) {
-					value = t;
-					groupBy = (item) => item[itemGroup];
-				}
-
-				if (complexSource && !complexTarget) {
-					//value = target
-					console.log(
-						'this case is currently not supported (complexSource,complexTarget,isMulti)',
-						complexSource,
-						complexTarget,
-						isMulti
-					);
-				}
-
-				isLoaded = true;
+			if (complexSource && !complexTarget) {
+				//value = target
+				console.log(
+					'this case is currently not supported (complexSource,complexTarget,isMulti)',
+					complexSource,
+					complexTarget,
+					isMulti
+				);
 			}
-}
+
+			isLoaded = true;
+		}
+	}
 </script>
 
 <InputContainer {id} label={title} {feedback} {required} {help}>

package/dist/components/page/Notification.svelte

@@ -0,0 +1,8 @@
+<script>import { Toast } from "@skeletonlabs/skeleton";
+import { notificationStore } from "../../stores/pageStores";
+let btnStyle;
+$:
+  btnStyle = $notificationStore === void 0 || $notificationStore.btnStyle === void 0 ? notificationStore.getBtnStyle() : $notificationStore.btnStyle;
+</script>
+
+<Toast position="t" buttonDismiss={btnStyle} />

package/dist/components/page/Notification.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 NotificationProps = typeof __propDef.props;
+export type NotificationEvents = typeof __propDef.events;
+export type NotificationSlots = typeof __propDef.slots;
+export default class Notification extends SvelteComponentTyped<NotificationProps, NotificationEvents, NotificationSlots> {
+}
+export {};

package/dist/components/page/Page.svelte

@@ -6,6 +6,7 @@ import Footer from "./Footer.svelte";
 import Header from "./Header.svelte";
 import HelpPopUp from "./HelpPopUp.svelte";
 import Breadcrumb from "./breadcrumb/Breadcrumb.svelte";
+import Notification from "./Notification.svelte";
 import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
 import { storePopup } from "@skeletonlabs/skeleton";
 import { breadcrumbStore } from "../../stores/pageStores";
@@ -79,4 +80,5 @@ onMount(async () => {
 	</div>
 
 	<HelpPopUp active={help} />
+	<Notification />
 </AppShell>

package/dist/components/page/TablePlaceholder.svelte

@@ -0,0 +1,16 @@
+<script>export let cols = 1;
+export let rows = 10;
+</script>
+
+<div class="placeholder animate-pulse w-full h-10 sp" />
+<div class="table-container w-full">
+	<table class="table table-compact w-full">
+		{#each Array(rows) as _}
+			<tr class="w-full">
+				{#each Array(cols) as _}
+					<td class="p-3"><div class="placeholder animate-pulse h-9 w-full" /></td>
+				{/each}
+			</tr>
+		{/each}
+	</table>
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        cols?: number | undefined;
+        rows?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TablePlaceholderProps = typeof __propDef.props;
+export type TablePlaceholderEvents = typeof __propDef.events;
+export type TablePlaceholderSlots = typeof __propDef.slots;
+export default class TablePlaceholder extends SvelteComponentTyped<TablePlaceholderProps, TablePlaceholderEvents, TablePlaceholderSlots> {
+}
+export {};

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

@@ -13,7 +13,6 @@ onMount(async () => {
 let hamburger = true;
 </script>
 
-
 {#if $menuStore !== undefined}
 	<div
 		class="sm:flex h-min flex-row w-full justify-between items-center md:flex px-3 py-2 bg-tertiary-50 text-surface-800 z-50 shadow-md"

package/dist/index.d.ts

@@ -19,6 +19,8 @@ import Table from './components/Table/Table.svelte';
 import TableFilter from './components/Table/TableFilter.svelte';
 import { columnFilter, searchFilter } from './components/Table/filter';
 import type { TableConfig, Columns, Column } from './models/Models';
+import Notification from './components/page/Notification.svelte';
+import TablePlaceholder from './components/page/TablePlaceholder.svelte';
 export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiSelect, NumberInput, TextArea, TextInput };
 export { FileInfo, FileIcon, FileUploader };
 export { Spinner, Page, Alert, Menu, ErrorMessage };
@@ -27,6 +29,11 @@ export { host, username, password, setApiConfig } from './stores/apiStores.js';
 export type { userType, inputType, fileUploaderType, linkType, listItemType, keyValuePairType, fileInfoType, fileReaderInfoType, asciiFileReaderInfoType } from './models/Models.js';
 export { helpStore } from './stores/pageStores';
 export type { helpStoreType, helpItemType } from './models/Models';
+export { notificationStore } from './stores/pageStores';
+export type { notificationItemType, notificationStoreType } from './models/Models';
+export { notificationType } from './models/Enums';
+export { Notification };
+export { TablePlaceholder };
 export { positionType, pageContentLayoutType, decimalCharacterType, orientationType, textMarkerType, textSeperatorType } from './models/Enums';
 export { Table, TableFilter, columnFilter, searchFilter };
 export type { TableConfig, Columns, Column };

package/dist/index.js

@@ -24,6 +24,10 @@ import TextArea from './components/form/TextArea.svelte';
 import Table from './components/Table/Table.svelte';
 import TableFilter from './components/Table/TableFilter.svelte';
 import { columnFilter, searchFilter } from './components/Table/filter';
+//notification
+import Notification from './components/page/Notification.svelte';
+//table placeholder
+import TablePlaceholder from './components/page/TablePlaceholder.svelte';
 //Form
 export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiSelect, NumberInput, TextArea, TextInput };
 //File
@@ -35,6 +39,12 @@ export { Api } from './services/Api.js';
 export { host, username, password, setApiConfig } from './stores/apiStores.js';
 //help
 export { helpStore } from './stores/pageStores';
+//notification
+export { notificationStore } from './stores/pageStores';
+export { notificationType } from './models/Enums';
+export { Notification };
+//table placholder
+export { TablePlaceholder };
 //enum
 export { positionType, pageContentLayoutType, decimalCharacterType, orientationType, textMarkerType, textSeperatorType } from './models/Enums';
 // Table

package/dist/models/Enums.d.ts

@@ -25,3 +25,9 @@ export declare enum textMarkerType {
     quotes = 0,
     doubleQuotes = 1
 }
+export declare enum notificationType {
+    success = 0,
+    warning = 1,
+    error = 2,
+    surface = 3
+}

package/dist/models/Enums.js

@@ -31,3 +31,11 @@ export var textMarkerType;
     textMarkerType[textMarkerType["quotes"] = 0] = "quotes";
     textMarkerType[textMarkerType["doubleQuotes"] = 1] = "doubleQuotes";
 })(textMarkerType || (textMarkerType = {}));
+//types for the notification styling
+export var notificationType;
+(function (notificationType) {
+    notificationType[notificationType["success"] = 0] = "success";
+    notificationType[notificationType["warning"] = 1] = "warning";
+    notificationType[notificationType["error"] = 2] = "error";
+    notificationType[notificationType["surface"] = 3] = "surface";
+})(notificationType || (notificationType = {}));

package/dist/models/Models.d.ts

@@ -1,7 +1,7 @@
 import type { SvelteComponent } from 'svelte';
 import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
 import type { Writable } from 'svelte/store';
-import { decimalCharacterType, orientationType, textMarkerType, textSeperatorType } from './Enums';
+import type { decimalCharacterType, notificationType, orientationType, textMarkerType, textSeperatorType } from './Enums';
 export interface linkType {
     label: string;
     url: string;
@@ -106,3 +106,12 @@ export interface helpStoreType {
     itemId?: string;
     helpItems: helpItemType[];
 }
+export interface notificationItemType {
+    notificationType?: notificationType;
+    message: string;
+}
+export interface notificationStoreType {
+    notificationType: notificationType;
+    message: string;
+    btnStyle: string;
+}

package/dist/models/Models.js

@@ -1 +1 @@
-import { decimalCharacterType, orientationType, textMarkerType, textSeperatorType } from './Enums';
+export {};

package/dist/stores/pageStores.d.ts

@@ -1,6 +1,7 @@
-import type { helpItemType, helpStoreType } from '../models/Models';
+import type { helpItemType, helpStoreType, notificationItemType, notificationStoreType } from '../models/Models';
 import type { MenuModel, breadcrumbItemType } from '../models/Page';
 import { BreadcrumbModel } from '../models/Page';
+import { type Writable } from 'svelte/store';
 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;
@@ -15,7 +16,7 @@ export declare const helpStore: {
     reset: () => void;
     clear: () => void;
 };
-export declare const menuStore: import("svelte/store").Writable<MenuModel>;
+export declare const menuStore: Writable<MenuModel>;
 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;
@@ -23,3 +24,13 @@ export declare const breadcrumbStore: {
     addItem: (item: breadcrumbItemType) => void;
     clean: () => void;
 };
+export declare const notificationStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<notificationStoreType>, invalidate?: ((value?: notificationStoreType | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
+    set: (this: void, value: notificationStoreType) => void;
+    update: (this: void, updater: import("svelte/store").Updater<notificationStoreType>) => void;
+    setNotification: (notificationItem: notificationItemType) => void;
+    triggerNotification: () => void;
+    clear: () => void;
+    showNotification: (notificationItem: notificationItemType) => void;
+    getBtnStyle: () => string;
+};

package/dist/stores/pageStores.js

@@ -1,4 +1,6 @@
+import { notificationType } from '../models/Enums';
 import { BreadcrumbModel } from '../models/Page';
+import { toastStore } from '@skeletonlabs/skeleton';
 import { writable } from 'svelte/store';
 function createHelpStore() {
     // set Store Type
@@ -101,3 +103,107 @@ function createBreadcrumbStore() {
 }
 // store for breadcrumb navigation
 export const breadcrumbStore = createBreadcrumbStore();
+// store for notification (toasts)
+function createNotificationStore() {
+    // set Store Type
+    const { subscribe, set, update } = writable();
+    return {
+        //pass Store default functions
+        subscribe,
+        set,
+        update,
+        // set notificationStroe, notificationType, message and button style
+        setNotification: (notificationItem) => {
+            notificationItem.notificationType =
+                notificationItem.notificationType === undefined
+                    ? notificationType.surface
+                    : notificationItem.notificationType;
+            let btnStyle;
+            switch (notificationItem.notificationType) {
+                case notificationType.success:
+                    btnStyle = 'btn-icon btn-icon-sm variant-filled-success shadow-md';
+                    break;
+                case notificationType.warning:
+                    btnStyle = 'btn-icon btn-icon-sm variant-filled-warning shadow-md';
+                    break;
+                case notificationType.error:
+                    btnStyle = 'btn-icon btn-icon-sm variant-filled-error shadow-md';
+                    break;
+                case notificationType.surface:
+                    btnStyle = 'btn-icon btn-icon-sm variant-filled-surface shadow-md';
+                    break;
+            }
+            notificationStore.set({
+                notificationType: notificationItem.notificationType,
+                message: notificationItem.message,
+                btnStyle: btnStyle
+            });
+            notificationStore.subscribe((value) => { });
+        },
+        // triggers the notification to show
+        triggerNotification: () => {
+            let timeout = 30000;
+            let classes = '';
+            let message = '';
+            notificationStore.subscribe((value) => {
+                switch (value.notificationType) {
+                    case notificationType.success:
+                        classes =
+                            'bg-success-300 border-solid border-2 border-success-500 shadow-md text-surface-900';
+                        break;
+                    case notificationType.warning:
+                        classes =
+                            'bg-warning-300 border-solid border-2 border-warning-500 shadow-md text-surface-900';
+                        break;
+                    case notificationType.error:
+                        classes =
+                            'bg-error-300 border-solid border-2 border-error-500 shadow-md text-surface-900';
+                        break;
+                    case notificationType.surface:
+                        classes =
+                            'bg-surface-300 border-solid border-2 border-surface-500 shadow-md text-surface-900';
+                        break;
+                }
+                message = value.message;
+            });
+            if (classes != '' && message != '') {
+                const notificationToast = {
+                    classes: classes,
+                    message: message,
+                    timeout: timeout
+                };
+                toastStore.trigger(notificationToast);
+            }
+        },
+        // cleans the toastStore
+        clear: () => {
+            toastStore.clear();
+        },
+        // cleans, sets, and schows the notification (all you need ;))
+        showNotification: (notificationItem) => {
+            notificationStore.clear();
+            notificationStore.setNotification({
+                notificationType: notificationItem.notificationType,
+                message: notificationItem.message
+            });
+            notificationStore.triggerNotification();
+        },
+        // gets the dissmiss Button style
+        getBtnStyle: () => {
+            let btnStyle = '';
+            notificationStore.subscribe((value) => {
+                do {
+                    if (value === undefined || value.btnStyle === undefined) {
+                        notificationStore.setNotification({ message: '' });
+                    }
+                    else {
+                        btnStyle = value.btnStyle;
+                    }
+                } while (btnStyle === '');
+            });
+            return btnStyle;
+        }
+    };
+}
+//crate and export the instance of the store
+export const notificationStore = createNotificationStore();