@bexis2/bexis2-core-ui 0.2.16 → 0.2.18

package/src/lib/index.ts

@@ -1,78 +1,99 @@
-// Reexport your entry components here
-// import ListView from './components/ListView.svelte';
-// 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';
-
-//page
-import Spinner from './components/page/Spinner.svelte';
-import Page from './components/page/Page.svelte';
-import Alert from './components/page/Alert.svelte';
-import Menu from './components/page/menu/Menu.svelte';
-import ErrorMessage from './components/page/ErrorMessage.svelte';
-
-// input
-import Checkbox from './components/form/Checkbox.svelte';
-import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
-import CheckboxList from './components/form/CheckboxList.svelte';
-import DateInput from './components/form/DateInput.svelte';
-import DropdownKVP from './components/form/DropdownKvP.svelte';
-import MultiSelect from './components/form/MultiSelect.svelte';
-import NumberInput from './components/form/NumberInput.svelte';
-import TextInput from './components/form/TextInput.svelte';
-import TextArea from './components/form/TextArea.svelte';
-
-//table
-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';
-
-//Form
-export {
-	Checkbox,
-	CheckboxKVPList,
-	CheckboxList,
-	DateInput,
-	DropdownKVP,
-	MultiSelect,
-	NumberInput,
-	TextArea,
-	TextInput
-};
-
-//File
-export { FileInfo, FileIcon, FileUploader };
-
-//others
-export { Spinner, Page, Alert, Menu, ErrorMessage };
-
-//Api
-export { Api } from './services/Api.js';
-export { host, username, password, setApiConfig } from './stores/apiStores.js';
-
-//Type
-export type {
-	userType,
-	inputType,
-	fileUploaderType,
-	linkType,
-	listItemType,
-	keyValuePairType,
-	fileInfoType,
-	fileReaderInfoType,
-	asciiFileReaderInfoType
-} from './models/Models.js';
-
-//help
-export { helpStore } from '$store/pageStores';
-export type { helpStoreType, helpItemType } from './models/Models';
-
-//enum
-export { positionType, pageContentLayoutType,decimalCharacterType,orientationType,textMarkerType,textSeperatorType } from './models/Enums';
-
-// Table
-export { Table, TableFilter, columnFilter, searchFilter };
-export type { TableConfig, Columns, Column };
+// Reexport your entry components here
+// import ListView from './components/ListView.svelte';
+// 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';
+
+//page
+import Spinner from './components/page/Spinner.svelte';
+import Page from './components/page/Page.svelte';
+import Alert from './components/page/Alert.svelte';
+import Menu from './components/page/menu/Menu.svelte';
+import ErrorMessage from './components/page/ErrorMessage.svelte';
+
+// input
+import Checkbox from './components/form/Checkbox.svelte';
+import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
+import CheckboxList from './components/form/CheckboxList.svelte';
+import DateInput from './components/form/DateInput.svelte';
+import DropdownKVP from './components/form/DropdownKvP.svelte';
+import MultiSelect from './components/form/MultiSelect.svelte';
+import NumberInput from './components/form/NumberInput.svelte';
+import TextInput from './components/form/TextInput.svelte';
+import TextArea from './components/form/TextArea.svelte';
+
+//table
+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';
+
+//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
+export { FileInfo, FileIcon, FileUploader };
+
+//others
+export { Spinner, Page, Alert, Menu, ErrorMessage };
+
+//Api
+export { Api } from './services/Api.js';
+export { host, username, password, setApiConfig } from './stores/apiStores.js';
+
+//Type
+export type {
+	userType,
+	inputType,
+	fileUploaderType,
+	linkType,
+	listItemType,
+	keyValuePairType,
+	fileInfoType,
+	fileReaderInfoType,
+	asciiFileReaderInfoType
+} from './models/Models.js';
+
+//help
+export { helpStore } from '$store/pageStores';
+export type { helpStoreType, helpItemType } from './models/Models';
+
+//notification
+export { notificationStore } from '$store/pageStores';
+export type { notificationItemType, notificationStoreType } from './models/Models';
+export { notificationType } from './models/Enums';
+export { Notification };
+
+//table placholder
+export { TablePlaceholder };
+//enum
+export {
+	positionType,
+	pageContentLayoutType,
+	decimalCharacterType,
+	orientationType,
+	textMarkerType,
+	textSeperatorType
+} from './models/Enums';
+
+// Table
+export { Table, TableFilter, columnFilter, searchFilter };
+export type { TableConfig, Columns, Column };

package/src/lib/models/Enums.ts

@@ -1,32 +1,40 @@
-export enum positionType {
-	start = 'start',
-	end = 'end',
-	center = 'center'
-}
-
-export enum pageContentLayoutType {
-	full = 'full',
-	center = 'center'
-}
-
-export enum decimalCharacterType {
-	point,
-	comma
-}
-
-export enum orientationType {
-	columnwise,
-	rowwise
-}
-
-export enum textSeperatorType {
-	tab = 9,
-	comma = 44,
-	semicolon = 59,
-	space = 32
-}
-
-export enum textMarkerType {
-	quotes,
-	doubleQuotes
-}
+export enum positionType {
+	start = 'start',
+	end = 'end',
+	center = 'center'
+}
+
+export enum pageContentLayoutType {
+	full = 'full',
+	center = 'center'
+}
+
+export enum decimalCharacterType {
+	point,
+	comma
+}
+
+export enum orientationType {
+	columnwise,
+	rowwise
+}
+
+export enum textSeperatorType {
+	tab = 9,
+	comma = 44,
+	semicolon = 59,
+	space = 32
+}
+
+export enum textMarkerType {
+	quotes,
+	doubleQuotes
+}
+
+//types for the notification styling
+export enum notificationType {
+	success,
+	warning,
+	error,
+	surface
+}

package/src/lib/models/Models.ts

@@ -2,7 +2,13 @@ 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';
 
 // page
 export interface linkType {
@@ -43,7 +49,6 @@ export interface asciiFileReaderInfoType extends fileReaderInfoType {
 	textMarker: textMarkerType;
 }
 
-
 export interface fileReaderInfoType {
 	decimal: decimalCharacterType;
 	orientation: orientationType;
@@ -55,7 +60,6 @@ export interface fileReaderInfoType {
 	dateformat: string;
 }
 
-
 export interface filesType {
 	accepted: Blob[];
 	rejected: Blob[];
@@ -132,3 +136,15 @@ export interface helpStoreType {
 	itemId?: string;
 	helpItems: helpItemType[];
 }
+
+// notifications (toasts)
+export interface notificationItemType {
+	notificationType?: notificationType;
+	message: string;
+}
+
+export interface notificationStoreType {
+	notificationType: notificationType;
+	message: string;
+	btnStyle: string;
+}

package/src/lib/stores/pageStores.ts

@@ -1,121 +1,240 @@
-import type { helpItemType, helpStoreType } from '$models/Models';
-import type { MenuModel, breadcrumbItemType } from '$models/Page';
-import { BreadcrumbModel } from '$models/Page';
-
-import { writable } from 'svelte/store';
-
-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,
-		set,
-		update,
-		//set the list of help items to show
-		setHelpItemList: (helpItems: helpItemType[]) => {
-			helpStore.set({ itemId: undefined, helpItems: helpItems });
-		},
-		//set the ID of the help item and display it
-		setItemId: (itemId: string) => {
-			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: () => {
-			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: string) => {
-			helpStore.setItemId(itemId);
-		},
-		//set a help item and display it
-		showHelpItem: (helpItem: helpItemType) => {
-			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: string) => {
-			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: () => {
-			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<MenuModel>();
-
-function createBreadcrumbStore() {
-	// set Store Type
-	const { subscribe, set, update } = writable<BreadcrumbModel>();
-
-	set(new BreadcrumbModel());
-
-	return {
-		//pass Store default functions
-		subscribe,
-		set,
-		update,
-
-		//set the ID of the help item and display it
-		addItem: (item: breadcrumbItemType) => {
-			let b: BreadcrumbModel;
-			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: BreadcrumbModel;
-			breadcrumbStore.subscribe((value) => {
-				value = new BreadcrumbModel();
-				b = value;
-			});
-
-			update((s) => (s = b));
-		}
-	};
-}
-
-// store for breadcrumb navigation
-export const breadcrumbStore = createBreadcrumbStore();
+import { notificationType } from '$models/Enums';
+import type {
+	helpItemType,
+	helpStoreType,
+	notificationItemType,
+	notificationStoreType
+} from '$models/Models';
+import type { MenuModel, breadcrumbItemType } from '$models/Page';
+import { BreadcrumbModel } from '$models/Page';
+import { toastStore, type ToastSettings } from '@skeletonlabs/skeleton';
+import { writable, type Writable } from 'svelte/store';
+
+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,
+		set,
+		update,
+		//set the list of help items to show
+		setHelpItemList: (helpItems: helpItemType[]) => {
+			helpStore.set({ itemId: undefined, helpItems: helpItems });
+		},
+		//set the ID of the help item and display it
+		setItemId: (itemId: string) => {
+			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: () => {
+			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: string) => {
+			helpStore.setItemId(itemId);
+		},
+		//set a help item and display it
+		showHelpItem: (helpItem: helpItemType) => {
+			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: string) => {
+			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: () => {
+			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<MenuModel>();
+
+function createBreadcrumbStore() {
+	// set Store Type
+	const { subscribe, set, update } = writable<BreadcrumbModel>();
+
+	set(new BreadcrumbModel());
+
+	return {
+		//pass Store default functions
+		subscribe,
+		set,
+		update,
+
+		//set the ID of the help item and display it
+		addItem: (item: breadcrumbItemType) => {
+			let b: BreadcrumbModel;
+			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: BreadcrumbModel;
+			breadcrumbStore.subscribe((value) => {
+				value = new BreadcrumbModel();
+				b = value;
+			});
+
+			update((s) => (s = b));
+		}
+	};
+}
+
+// store for breadcrumb navigation
+export const breadcrumbStore = createBreadcrumbStore();
+
+// store for notification (toasts)
+function createNotificationStore() {
+	// set Store Type
+	const { subscribe, set, update } = writable<notificationStoreType>();
+
+	return {
+		//pass Store default functions
+		subscribe,
+		set,
+		update,
+		// set notificationStroe, notificationType, message and button style
+		setNotification: (notificationItem: notificationItemType) => {
+			notificationItem.notificationType =
+				notificationItem.notificationType === undefined
+					? notificationType.surface
+					: notificationItem.notificationType;
+			let btnStyle: string;
+
+			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: number = 30000;
+			let classes: string = '';
+			let message: string = '';
+			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: ToastSettings = {
+					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: notificationItemType) => {
+			notificationStore.clear();
+			notificationStore.setNotification({
+				notificationType: notificationItem.notificationType,
+				message: notificationItem.message
+			});
+			notificationStore.triggerNotification();
+		},
+
+		// gets the dissmiss Button style
+		getBtnStyle: () => {
+			let btnStyle: string = '';
+			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();