@bexis2/bexis2-core-ui 0.2.17 → 0.2.18

package/src/lib/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/src/lib/components/page/Notification.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Toast } from '@skeletonlabs/skeleton';
+	import { notificationStore } from '$store/pageStores';
+
+	let btnStyle: string;
+	$: btnStyle =
+		$notificationStore === undefined || $notificationStore.btnStyle === undefined
+			? notificationStore.getBtnStyle()
+			: $notificationStore.btnStyle;
+</script>
+
+<Toast position="t" buttonDismiss={btnStyle} />

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

@@ -11,6 +11,7 @@
 	import Header from './Header.svelte';
 	import HelpPopUp from './HelpPopUp.svelte';
 	import Breadcrumb from './breadcrumb/Breadcrumb.svelte';
+	import Notification from './Notification.svelte';
 
 	//popup
 	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
@@ -93,4 +94,5 @@
 	</div>
 
 	<HelpPopUp active={help} />
+	<Notification />
 </AppShell>

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	export let cols: number = 1;
+	export let rows: number = 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/src/lib/components/page/menu/Menu.svelte

@@ -17,7 +17,6 @@
 	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/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;
+}