@bexis2/bexis2-core-ui 0.2.32 → 0.3.1

package/README.md

@@ -1,5 +1,11 @@
 # bexis-core-ui
 
+## 0.3.1
+- add bexis2theme
+  
+## 0.3.0
+- update skeleton ui -> 2.5.0
+
 ## 0.2.32
 
 - resizability for Table rows and columns
@@ -25,7 +31,7 @@
 ## 0.2.28
 
 - add disabled to multiselect
-  
+
 ## 0.2.27
 
 - fix brand stretching

package/dist/components/CodeEditor/CodeEditor.svelte

@@ -7,7 +7,8 @@ import { javascript, esLint } from "@codemirror/lang-javascript";
 import { lintGutter, linter } from "@codemirror/lint";
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { oneDark } from "@codemirror/theme-one-dark";
-import { Modal, modalStore } from "@skeletonlabs/skeleton";
+import { Modal, getModalStore } from "@skeletonlabs/skeleton";
+const modalStore = getModalStore();
 import { faMoon, faSave, faSun } from "@fortawesome/free-regular-svg-icons";
 import { faArrowRotateLeft, faXmark } from "@fortawesome/free-solid-svg-icons";
 export let id;

package/dist/components/form/DropdownKvP.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class DropdownKvP extends SvelteComponentTyped<{
     target: any;
     id: any;
-    title: any;
     source: any;
+    title: any;
     required?: boolean | undefined;
     invalid?: boolean | undefined;
     valid?: boolean | undefined;
@@ -27,8 +27,8 @@ declare const __propDef: {
     props: {
         target: any;
         id: any;
-        title: any;
         source: any;
+        title: any;
         required?: boolean | undefined;
         invalid?: boolean | undefined;
         valid?: boolean | undefined;

package/dist/components/form/MultiSelect.svelte

@@ -1,181 +1,180 @@
-<script>
-	import InputContainer from './InputContainer.svelte';
-
-	import Select from 'svelte-select';
-	import { onMount } from 'svelte';
-
-	export let source;
-	export let target;
-	export let id;
-	export let title;
-	export let itemId = 'value';
-	export let itemLabel = 'label';
-	export let itemGroup = 'group';
-	export let isMulti = true;
-	export let complexSource = false;
-	export let complexTarget = false;
-	export let required = false;
-	export let feedback = [''];
-	export let placeholder = '-- Please select --';
-	export let invalid = false;
-	export let loading = false;
-	export let help = false;
-	export let clearable = true;
-	export let disabled = false;
-
-
-	let isLoaded = false;
-
-	$: 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) {
-			//console.log('a) source is complex model is simple');
-
-			target = [];
-			for (let i in selection) {
-				let item = selection[i];
-				target.push(item[itemId]);
-			}
-		}
-
-		if (!complexSource && !complexTarget && isLoaded && isMulti) {
-			target = [];
-
-			for (let i in selection) {
-				target.push(selection[i].value);
-			}
-		}
-
-		if (complexSource && complexTarget && isLoaded && isMulti) {
-			//console.log("both complex",selection);
-			target = selection;
-		}
-
-		if (complexSource && complexTarget && isLoaded && !isMulti) {
-			target = selection;
-		}
-
-		if (!complexSource && !complexTarget && isLoaded && !isMulti) {
-			target = selection.value;
-		}
-
-		if (complexSource && !complexTarget && isLoaded && !isMulti) {
-			target = selection[itemLabel];
-			//console.log('selection', selection);
-		}
-
-		//console.log('selection ' + title, selection);
-		//console.log('target ' + title, target);
-	}
-
-	onMount(async () => {
-		 //console.log("OnMount", target)
-			if(complexSource && complexTarget) // after on mount a setValue is needed when data is complex
-			{
-					setValue(target);
-			}
-	});
-
-	function setValue(t) {
-		//console.log("Set Value",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];
-		}
-
-		//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;
-			}
-		}
-
-		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;
-		}
-
-		//console.log(t,value)
-	}
-</script>
-
-<InputContainer {id} label={title} {feedback} {required} {help}>
-	<Select
-		{id}
-		items={source}
-		{groupBy}
-		{itemId}
-		label={itemLabel}
-		multiple={isMulti}
-		bind:value
-		{placeholder}
-		hasError={invalid}
-		{loading}
-		{clearable}
-		{disabled}
-		on:change
-		on:input
-		on:focus
-		on:blur
-		on:clear
-		on:loaded
-		on:error
-		on:filter
-		on:hoverItem
-	/>
-</InputContainer>
+<script>
+	import InputContainer from './InputContainer.svelte';
+
+	import Select from 'svelte-select';
+	import { onMount } from 'svelte';
+
+	export let source;
+	export let target;
+	export let id;
+	export let title;
+	export let itemId = 'value';
+	export let itemLabel = 'label';
+	export let itemGroup = 'group';
+	export let isMulti = true;
+	export let complexSource = false;
+	export let complexTarget = false;
+	export let required = false;
+	export let feedback = [''];
+	export let placeholder = '-- Please select --';
+	export let invalid = false;
+	export let loading = false;
+	export let help = false;
+	export let clearable = true;
+	export let disabled = false;
+
+	let isLoaded = false;
+
+	$: 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) {
+			//console.log('a) source is complex model is simple');
+
+			target = [];
+			for (let i in selection) {
+				let item = selection[i];
+				target.push(item[itemId]);
+			}
+		}
+
+		if (!complexSource && !complexTarget && isLoaded && isMulti) {
+			target = [];
+
+			for (let i in selection) {
+				target.push(selection[i].value);
+			}
+		}
+
+		if (complexSource && complexTarget && isLoaded && isMulti) {
+			//console.log("both complex",selection);
+			target = selection;
+		}
+
+		if (complexSource && complexTarget && isLoaded && !isMulti) {
+			target = selection;
+		}
+
+		if (!complexSource && !complexTarget && isLoaded && !isMulti) {
+			target = selection.value;
+		}
+
+		if (complexSource && !complexTarget && isLoaded && !isMulti) {
+			target = selection[itemLabel];
+			//console.log('selection', selection);
+		}
+
+		//console.log('selection ' + title, selection);
+		//console.log('target ' + title, target);
+	}
+
+	onMount(async () => {
+		//console.log("OnMount", target)
+		if (complexSource && complexTarget) {
+			// after on mount a setValue is needed when data is complex
+			setValue(target);
+		}
+	});
+
+	function setValue(t) {
+		//console.log("Set Value",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];
+		}
+
+		//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;
+			}
+		}
+
+		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;
+		}
+
+		//console.log(t,value)
+	}
+</script>
+
+<InputContainer {id} label={title} {feedback} {required} {help}>
+	<Select
+		{id}
+		items={source}
+		{groupBy}
+		{itemId}
+		label={itemLabel}
+		multiple={isMulti}
+		bind:value
+		{placeholder}
+		hasError={invalid}
+		{loading}
+		{clearable}
+		{disabled}
+		on:change
+		on:input
+		on:focus
+		on:blur
+		on:clear
+		on:loaded
+		on:error
+		on:filter
+		on:hoverItem
+	/>
+</InputContainer>

package/dist/components/form/MultiSelect.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class MultiSelect extends SvelteComponentTyped<{
     target: any;
     id: any;
-    title: any;
     source: any;
+    title: any;
     disabled?: boolean | undefined;
     required?: boolean | undefined;
     invalid?: boolean | undefined;
@@ -42,8 +42,8 @@ declare const __propDef: {
     props: {
         target: any;
         id: any;
-        title: any;
         source: any;
+        title: any;
         disabled?: boolean | undefined;
         required?: boolean | undefined;
         invalid?: boolean | undefined;

package/dist/components/page/Notification.svelte

@@ -1,8 +1,46 @@
-<script>import { Toast } from "@skeletonlabs/skeleton";
+<script>import { onMount } from "svelte";
+import { Toast, getToastStore } from "@skeletonlabs/skeleton";
 import { notificationStore } from "../../stores/pageStores";
+import { notificationType } from "../../models/Enums";
+const toastStore = getToastStore();
 let btnStyle;
 $:
   btnStyle = $notificationStore === void 0 || $notificationStore.btnStyle === void 0 ? notificationStore.getBtnStyle() : $notificationStore.btnStyle;
+$:
+  $notificationStore, triggerToast();
+onMount(() => {
+  toastStore.clear();
+});
+function triggerToast() {
+  toastStore.clear();
+  const timeout = 3e4;
+  let classes = "";
+  if ($notificationStore.message != void 0 && $notificationStore.message != "") {
+    switch ($notificationStore.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;
+    }
+    const notificationToast = {
+      classes,
+      message: $notificationStore.message,
+      timeout,
+      callback: () => {
+        toastStore.clear();
+      }
+    };
+    toastStore.trigger(notificationToast);
+  }
+}
 </script>
 
 <Toast position="t" buttonDismiss={btnStyle} />

package/dist/components/page/Page.svelte

@@ -11,7 +11,6 @@ import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floati
 import { storePopup } from "@skeletonlabs/skeleton";
 import { breadcrumbStore } from "../../stores/pageStores";
 storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
-import { helpStore } from "../../stores/pageStores";
 import Docs from "./Docs.svelte";
 export let title = "";
 export let note = "";
@@ -39,7 +38,7 @@ onMount(async () => {
 				{/if}
 
 				<div class="grid grid-cols-2">
-					<Breadcrumb bind:title={title} />
+					<Breadcrumb bind:title />
 					<Docs {links} {note} />
 				</div>
 			</svelte:fragment>

package/dist/components/page/breadcrumb/Breadcrumb.svelte

@@ -1,9 +1,13 @@
 <script>import { breadcrumbStore } from "../../../stores/pageStores";
+import { browser } from "$app/environment";
+import { base } from "$app/paths";
 export let title;
 $:
   update(title);
 function update(t) {
-  breadcrumbStore.updateItem({ label: t, link: window.location.pathname });
+  if (browser) {
+    breadcrumbStore.updateItem({ label: t, link: window.location.pathname });
+  }
 }
 let list = [];
 $:
@@ -12,22 +16,22 @@ $:
   breadcrumbStore.subscribe((value) => {
     list = value?.items;
   });
-</script>
-
-<div class="px-5 py-2">
-	<ol class="breadcrumb -p50">
-		<!--default home-->
-		<li class="crumb"><a class="anchor" href={'/'}>Home</a></li>
-		<li class="crumb-separator" aria-hidden>&rsaquo;</li>
-
-		{#each list as crumb, i}
-			<!-- If crumb index is less than the breadcrumb length minus 1 -->
-			{#if i < list.length - 1}
-				<li class="crumb"><a class="anchor" href={crumb.link}>{crumb.label}</a></li>
-				<li class="crumb-separator" aria-hidden>&rsaquo;</li>
-			{:else}
-				<li class="crumb">{crumb.label}</li>
-			{/if}
-		{/each}
-	</ol>
-</div>
+</script>
+
+<div class="px-5 py-2">
+	<ol class="breadcrumb -p50">
+		<!--default home-->
+		<li class="crumb"><a class="anchor" href={base + '/'}>Home</a></li>
+		<li class="crumb-separator" aria-hidden>&rsaquo;</li>
+
+		{#each list as crumb, i}
+			<!-- If crumb index is less than the breadcrumb length minus 1 -->
+			{#if i < list.length - 1}
+				<li class="crumb"><a class="anchor" href={crumb.link}>{crumb.label}</a></li>
+				<li class="crumb-separator" aria-hidden>&rsaquo;</li>
+			{:else}
+				<li class="crumb">{crumb.label}</li>
+			{/if}
+		{/each}
+	</ol>
+</div>

package/dist/index.d.ts

@@ -22,6 +22,7 @@ import type { TableConfig, Columns, Column } from './models/Models';
 import CodeEditor from './components/CodeEditor/CodeEditor.svelte';
 import Notification from './components/page/Notification.svelte';
 import TablePlaceholder from './components/page/TablePlaceholder.svelte';
+import { bexis2theme } from './themes/theme-bexis2';
 export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiSelect, NumberInput, TextArea, TextInput };
 export { FileInfo, FileIcon, FileUploader };
 export { Spinner, Page, Alert, Menu, ErrorMessage };
@@ -39,3 +40,4 @@ export { positionType, pageContentLayoutType, decimalCharacterType, orientationT
 export { Table, TableFilter, columnFilter, searchFilter };
 export { CodeEditor };
 export type { TableConfig, Columns, Column };
+export { bexis2theme };

package/dist/index.js

@@ -30,6 +30,8 @@ import CodeEditor from './components/CodeEditor/CodeEditor.svelte';
 import Notification from './components/page/Notification.svelte';
 //table placeholder
 import TablePlaceholder from './components/page/TablePlaceholder.svelte';
+// theme
+import { bexis2theme } from './themes/theme-bexis2';
 //Form
 export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiSelect, NumberInput, TextArea, TextInput };
 //File
@@ -53,3 +55,5 @@ export { positionType, pageContentLayoutType, decimalCharacterType, orientationT
 export { Table, TableFilter, columnFilter, searchFilter };
 // CodeEditor
 export { CodeEditor };
+// theme
+export { bexis2theme };

package/dist/stores/apiStores.js

@@ -21,3 +21,5 @@ export function setApiConfig(_host, _user, _pw) {
     passwordStore.update((p) => (p = _pw));
     //console.log('overwrite host',_host);
 }
+// import { getToastStore  } from '@skeletonlabs/skeleton';
+// const x = getToastStore();

package/dist/stores/pageStores.d.ts

@@ -1,7 +1,6 @@
 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;
@@ -16,7 +15,7 @@ export declare const helpStore: {
     reset: () => void;
     clear: () => void;
 };
-export declare const menuStore: Writable<MenuModel>;
+export declare const menuStore: import("svelte/store").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;
@@ -30,8 +29,6 @@ export declare const notificationStore: {
     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;
 };