@bexis2/bexis2-core-ui 0.2.32 → 0.3.0

package/dist/themes/theme-bexis2.js

@@ -0,0 +1,99 @@
+export const bexis2Theme = {
+    name: 'bexis2Theme',
+    properties: {
+        // =~= Theme Properties =~=
+        "--theme-font-family-base": `system-ui`,
+        "--theme-font-family-heading": `system-ui`,
+        "--theme-font-color-base": "var(--color-surface-900)",
+        "--theme-font-color-dark": "255 255 255",
+        "--theme-rounded-base": "4px",
+        "--theme-rounded-container": "4px",
+        "--theme-border-base": "1px",
+        // =~= Theme On-X Colors =~=
+        "--on-primary": "255 255 255",
+        "--on-secondary": "255 255 255",
+        "--on-tertiary": "0 0 0",
+        "--on-success": "255 255 255",
+        "--on-warning": "255 255 255",
+        "--on-error": "255 255 255",
+        "--on-surface": "255 255 255",
+        // =~= Theme Colors  =~=
+        // primary | #45b2a1 
+        "--color-primary-50": "227 243 241",
+        "--color-primary-100": "218 240 236",
+        "--color-primary-200": "209 236 232",
+        "--color-primary-300": "181 224 217",
+        "--color-primary-400": "125 201 189",
+        "--color-primary-500": "69 178 161",
+        "--color-primary-600": "62 160 145",
+        "--color-primary-700": "52 134 121",
+        "--color-primary-800": "41 107 97",
+        "--color-primary-900": "34 87 79",
+        // secondary | #ff9700 
+        "--color-secondary-50": "255 239 217",
+        "--color-secondary-100": "255 234 204",
+        "--color-secondary-200": "255 229 191",
+        "--color-secondary-300": "255 213 153",
+        "--color-secondary-400": "255 182 77",
+        "--color-secondary-500": "255 151 0",
+        "--color-secondary-600": "230 136 0",
+        "--color-secondary-700": "191 113 0",
+        "--color-secondary-800": "153 91 0",
+        "--color-secondary-900": "125 74 0",
+        // tertiary | #bee1da 
+        "--color-tertiary-50": "245 251 249",
+        "--color-tertiary-100": "242 249 248",
+        "--color-tertiary-200": "239 248 246",
+        "--color-tertiary-300": "229 243 240",
+        "--color-tertiary-400": "210 234 229",
+        "--color-tertiary-500": "190 225 218",
+        "--color-tertiary-600": "171 203 196",
+        "--color-tertiary-700": "143 169 164",
+        "--color-tertiary-800": "114 135 131",
+        "--color-tertiary-900": "93 110 107",
+        // success | #4BB543 
+        "--color-success-50": "228 244 227",
+        "--color-success-100": "219 240 217",
+        "--color-success-200": "210 237 208",
+        "--color-success-300": "183 225 180",
+        "--color-success-400": "129 203 123",
+        "--color-success-500": "75 181 67",
+        "--color-success-600": "68 163 60",
+        "--color-success-700": "56 136 50",
+        "--color-success-800": "45 109 40",
+        "--color-success-900": "37 89 33",
+        // warning | #EAB308 
+        "--color-warning-50": "252 244 218",
+        "--color-warning-100": "251 240 206",
+        "--color-warning-200": "250 236 193",
+        "--color-warning-300": "247 225 156",
+        "--color-warning-400": "240 202 82",
+        "--color-warning-500": "234 179 8",
+        "--color-warning-600": "211 161 7",
+        "--color-warning-700": "176 134 6",
+        "--color-warning-800": "140 107 5",
+        "--color-warning-900": "115 88 4",
+        // error | #FF0000 
+        "--color-error-50": "255 217 217",
+        "--color-error-100": "255 204 204",
+        "--color-error-200": "255 191 191",
+        "--color-error-300": "255 153 153",
+        "--color-error-400": "255 77 77",
+        "--color-error-500": "255 0 0",
+        "--color-error-600": "230 0 0",
+        "--color-error-700": "191 0 0",
+        "--color-error-800": "153 0 0",
+        "--color-error-900": "125 0 0",
+        // surface | #c7c7c7 
+        "--color-surface-50": "247 247 247",
+        "--color-surface-100": "244 244 244",
+        "--color-surface-200": "241 241 241",
+        "--color-surface-300": "233 233 233",
+        "--color-surface-400": "216 216 216",
+        "--color-surface-500": "199 199 199",
+        "--color-surface-600": "179 179 179",
+        "--color-surface-700": "149 149 149",
+        "--color-surface-800": "119 119 119",
+        "--color-surface-900": "98 98 98", // #626262
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.2.32",
+  "version": "0.3.0",
   "private": false,
   "scripts": {
     "dev": "vite dev",
@@ -19,13 +19,15 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.36.2",
-    "@skeletonlabs/skeleton": "^1.9.0",
+    "@skeletonlabs/skeleton": "^2.5.0",
+    "@skeletonlabs/tw-plugin": "^0.2.4",
     "@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",
+    "@types/node": "^20.9.0",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "autoprefixer": "^10.4.14",

package/src/lib/components/CodeEditor/CodeEditor.svelte

@@ -9,7 +9,8 @@
 	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';
 	import type { ThemeSpec } from 'svelte-codemirror-editor';

package/src/lib/components/file/FileUploader.svelte

@@ -148,11 +148,10 @@
 
 				let message = files.accepted.length + ' is/are uploaded';
 
-				let fileList:string[] = []; 
-				files.accepted.forEach(f => fileList.push(f.name))
+				let fileList: string[] = [];
+				files.accepted.forEach((f) => fileList.push(f.name));
 
-
-				dispatch('success', { text: message , files: fileList});
+				dispatch('success', { text: message, files: fileList });
 
 				files.accepted = [];
 			}

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

@@ -1,12 +1,67 @@
 <script lang="ts">
-	import { Toast } from '@skeletonlabs/skeleton';
+	import { onMount } from 'svelte';
+	import { Toast, getToastStore, type ToastSettings } from '@skeletonlabs/skeleton';
 	import { notificationStore } from '$store/pageStores';
+	import type { notificationStoreType } from '$models/Models';
+	import {notificationType} from '$models/Enums'
+
+	const toastStore = getToastStore()
 
 	let btnStyle: string;
 	$: btnStyle =
 		$notificationStore === undefined || $notificationStore.btnStyle === undefined
 			? notificationStore.getBtnStyle()
 			: $notificationStore.btnStyle;
+
+
+$:$notificationStore, triggerToast(); 
+
+onMount(()=>{
+	toastStore.clear()
+})
+
+function triggerToast(){
+			toastStore.clear()
+
+			const timeout = 30000;
+			let classes = '';
+			
+			if($notificationStore.message != undefined && $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: ToastSettings = {
+					classes: classes,
+					message: $notificationStore.message,
+					timeout: timeout,
+					callback: () => {toastStore.clear()}
+				};
+
+				toastStore.trigger(notificationToast);
+			
+			}
+	
+	}
+
+
+
 </script>
 
 <Toast position="t" buttonDismiss={btnStyle} />

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

@@ -20,8 +20,7 @@
 
 	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
-	// stores
-	import { helpStore } from '$store/pageStores';
+
 	import Docs from './Docs.svelte';
 
 	export let title = '';
@@ -33,7 +32,7 @@
 	export let footer: boolean = true;
 	export let help: boolean = false;
 	export let contentLayoutType: pageContentLayoutType = pageContentLayoutType.center;
-	export let fixLeft:boolean = true;
+	export let fixLeft: boolean = true;
 
 	onMount(async () => {
 		console.log('page');
@@ -53,7 +52,7 @@
 				{/if}
 
 				<div class="grid grid-cols-2">
-					<Breadcrumb bind:title={title} />
+					<Breadcrumb bind:title />
 					<Docs {links} {note} />
 				</div>
 			</svelte:fragment>