@bexis2/bexis2-core-ui 0.2.16 → 0.2.18

package/dist/components/form/MultiSelect.svelte

@@ -26,11 +26,13 @@
 
 	$: value = null;
 	$: updateTarget(value);
+	$: 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) {
@@ -45,8 +47,9 @@
 
 		if (!complexSource && !complexTarget && isLoaded && isMulti) {
 			target = [];
+
 			for (let i in selection) {
-				target.push(selection[i].value);
+				target.push(selection[i]);
 			}
 		}
 
@@ -73,14 +76,15 @@
 	}
 
 	onMount(async () => {
-		console.log('on mount multiselect');
-		////console.log(source);
+		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 target) {
+			for (let i in t) {
 				let t = target[i];
 				items.push(source.find((item) => item[itemId] === t));
 			}
@@ -94,19 +98,21 @@
 		}
 
 		if (complexSource && complexTarget && isMulti) {
-			value = target;
+			value = t;
 			isLoaded = true;
 			groupBy = (item) => item[itemGroup];
 		}
 
 		//b) simple liust and simple model
 		if (!complexSource && !complexTarget && isMulti) {
-			////console.log("source", source);
-			////console.log("target",target);
+			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 (target != null && target !== undefined && target != '') {
-				value = target;
+			if (t != null && t !== undefined && t != '') {
+				console.log('target', t);
+				value = t;
 			}
 		}
 
@@ -114,13 +120,13 @@
 			//console.log("onmount",complexSource,complexTarget,value,target)
 			if (!complexSource && !complexTarget) {
 				value = {
-					value: target,
-					label: target
+					value: t,
+					label: t
 				};
 			}
 
 			if (complexSource && complexTarget) {
-				value = target;
+				value = t;
 				groupBy = (item) => item[itemGroup];
 			}
 
@@ -136,7 +142,7 @@
 
 			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();

package/package.json

@@ -1,101 +1,101 @@
-{
-  "name": "@bexis2/bexis2-core-ui",
-  "version": "0.2.16",
-  "private": false,
-  "scripts": {
-    "dev": "vite dev",
-    "package": "svelte-package",
-    "build": "vite build",
-    "build package": "svelte-kit sync && svelte-package --watch",
-    "preview": "vite preview",
-    "test": "playwright test",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test:unit": "vitest",
-    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write .",
-    "init": "npm init --scope bexis2",
-    "link": "npm link",
-    "publish": "npm publish --access public"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.28.1",
-    "@skeletonlabs/skeleton": "^1.9.0",
-    "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.5.0",
-    "@sveltejs/package": "^2.0.2",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/typography": "^0.5.9",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "postcss": "^8.4.23",
-    "prettier": "^2.8.0",
-    "prettier-plugin-svelte": "^2.8.1",
-    "raw-loader": "^4.0.2",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.0.1",
-    "tailwindcss": "^3.3.2",
-    "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "vite": "^4.3.0",
-    "vitest": "^0.25.3"
-  },
-  "type": "module",
-  "module": "./src/lib/index.ts",
-  "types": "./src/lib/index.d.ts",
-  "description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
-  "main": "./src/lib/index.d.ts",
-  "directories": {
-    "test": "tests"
-  },
-  "files": [
-    "dist",
-    "src/lib"
-  ],
-  "dependencies": {
-    "@floating-ui/dom": "^1.2.7",
-    "@fortawesome/fontawesome-free": "^6.2.1",
-    "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-regular-svg-icons": "^6.2.1",
-    "@fortawesome/free-solid-svg-icons": "^6.2.1",
-    "axios": "^1.2.1",
-    "delay": "^6.0.0",
-    "highlight.js": "^11.8.0",
-    "highlightjs-svelte": "^1.0.6",
-    "svelte": "^3.54.0",
-    "svelte-fa": "^3.0.4",
-    "svelte-file-dropzone": "^2.0.1",
-    "svelte-headless-table": "^0.17.3",
-    "svelte-select": "^5.6.1",
-    "vest": "^4.6.11"
-  },
-  "author": "David Schöne",
-  "license": "ISC",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/BEXIS2/bexis2-core-ui.git"
-  },
-  "bugs": {
-    "url": "https://github.com/BEXIS2/bexis2-core-ui/issues"
-  },
-  "homepage": "https://github.com/BEXIS2/bexis2-core-ui#readme",
-  "keywords": [
-    "bexis2",
-    "libary"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    },
-    "./dist/index.css": {
-      "import": "./dist/index.css",
-      "require": "./dist/index.css"
-    }
-  }
-}
+{
+  "name": "@bexis2/bexis2-core-ui",
+  "version": "0.2.18",
+  "private": false,
+  "scripts": {
+    "dev": "vite dev",
+    "package": "svelte-package",
+    "build": "vite build",
+    "build package": "svelte-kit sync && svelte-package --watch",
+    "preview": "vite preview",
+    "test": "playwright test",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test:unit": "vitest",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write .",
+    "init": "npm init --scope bexis2",
+    "link": "npm link",
+    "publish": "npm publish --access public"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.28.1",
+    "@skeletonlabs/skeleton": "^1.9.0",
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/adapter-static": "^2.0.2",
+    "@sveltejs/kit": "^1.5.0",
+    "@sveltejs/package": "^2.0.2",
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/typography": "^0.5.9",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "postcss": "^8.4.23",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.8.1",
+    "raw-loader": "^4.0.2",
+    "svelte": "^3.54.0",
+    "svelte-check": "^3.0.1",
+    "tailwindcss": "^3.3.2",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.3.0",
+    "vitest": "^0.25.3"
+  },
+  "type": "module",
+  "module": "./src/lib/index.ts",
+  "types": "./src/lib/index.d.ts",
+  "description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
+  "main": "./src/lib/index.d.ts",
+  "directories": {
+    "test": "tests"
+  },
+  "files": [
+    "dist",
+    "src/lib"
+  ],
+  "dependencies": {
+    "@floating-ui/dom": "^1.2.7",
+    "@fortawesome/fontawesome-free": "^6.2.1",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-regular-svg-icons": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "axios": "^1.2.1",
+    "delay": "^6.0.0",
+    "highlight.js": "^11.8.0",
+    "highlightjs-svelte": "^1.0.6",
+    "svelte": "^3.54.0",
+    "svelte-fa": "^3.0.4",
+    "svelte-file-dropzone": "^2.0.1",
+    "svelte-headless-table": "^0.17.3",
+    "svelte-select": "^5.6.1",
+    "vest": "^4.6.11"
+  },
+  "author": "David Schöne",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BEXIS2/bexis2-core-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/BEXIS2/bexis2-core-ui/issues"
+  },
+  "homepage": "https://github.com/BEXIS2/bexis2-core-ui#readme",
+  "keywords": [
+    "bexis2",
+    "libary"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./dist/index.css": {
+      "import": "./dist/index.css",
+      "require": "./dist/index.css"
+    }
+  }
+}