@bexis2/bexis2-core-ui 0.2.32 → 0.3.1

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>

package/src/lib/components/page/breadcrumb/Breadcrumb.svelte

@@ -1,39 +1,41 @@
-<script lang="ts">
-	import { breadcrumbStore } from '$store/pageStores';
-	import type { breadcrumbItemType } from '$models/Page';
-
-	export let title;
-
-	$:update(title)
-
-
-	function update(t)
-	{
-  breadcrumbStore.updateItem({ label: t, link: window.location.pathname });
-	}
-
-	let list: breadcrumbItemType[] = [];
-	$: list;
-
-	$: 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 lang="ts">
+	import { breadcrumbStore } from '$store/pageStores';
+	import type { breadcrumbItemType } from '$models/Page';
+	import { browser } from '$app/environment';
+	import { base } from '$app/paths';
+
+	export let title;
+
+	$: update(title);
+
+	function update(t) {
+		if (browser) {
+			breadcrumbStore.updateItem({ label: t, link: window.location.pathname });
+		}
+	}
+
+	let list: breadcrumbItemType[] = [];
+	$: list;
+
+	$: 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={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/src/lib/index.ts

@@ -39,6 +39,9 @@ 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,
@@ -104,3 +107,6 @@ export { Table, TableFilter, columnFilter, searchFilter };
 export { CodeEditor };
 
 export type { TableConfig, Columns, Column };
+
+// theme
+export { bexis2theme }

package/src/lib/models/Models.ts

@@ -111,7 +111,7 @@ export interface TableConfig<T> {
 	toggle?: boolean; // false by default
 	fitToScreen?: boolean; // true by default
 	height?: null | number; // null by default
-	columns?: Columns; 
+	columns?: Columns;
 	pageSizes?: number[]; // [5, 10, 15, 20] by default
 	defaultPageSize?: number; // 10 by default
 	optionsComponent?: typeof SvelteComponent;

package/src/lib/stores/apiStores.ts

@@ -29,3 +29,6 @@ export function setApiConfig(_host: string, _user: string, _pw: string) {
 
 	//console.log('overwrite host',_host);
 }
+
+// import { getToastStore  } from '@skeletonlabs/skeleton';
+// const x = getToastStore();

package/src/lib/stores/pageStores.ts

@@ -7,8 +7,9 @@ import type {
 } 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';
+
+
+import { writable } from 'svelte/store';
 
 function createHelpStore() {
 	// set Store Type
@@ -112,17 +113,16 @@ function createBreadcrumbStore() {
 		},
 
 		updateItem: (item: breadcrumbItemType) => {
-
 			let b: BreadcrumbModel;
 			breadcrumbStore.subscribe((value) => {
 				value = value === undefined ? new BreadcrumbModel() : value;
-				
-				let v = value.items.find((i) => i.link === item.link)
-				console.log(value.items,v);
-				
+
+				let v = value.items.find((i) => i.link === item.link);
+				console.log(value.items, v);
+
 				if (v) {
 					const i = value.items.indexOf(v);
-				 value.items[i]=item
+					value.items[i] = item;
 					v = item;
 				}
 
@@ -133,7 +133,6 @@ function createBreadcrumbStore() {
 		},
 
 		clean: () => {
-
 			breadcrumbStore.set(new BreadcrumbModel());
 
 			//update((s) => (s = b));
@@ -182,59 +181,18 @@ function createNotificationStore() {
 				message: notificationItem.message,
 				btnStyle: btnStyle
 			});
-			notificationStore.subscribe((value) => {});
+			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.clear();
 			notificationStore.setNotification({
 				notificationType: notificationItem.notificationType,
 				message: notificationItem.message
 			});
-			notificationStore.triggerNotification();
+			// if the store is changing, the notification componend will be updated
 		},
 
 		// gets the dissmiss Button style

package/src/lib/themes/theme-bexis2.ts

@@ -0,0 +1,103 @@
+
+import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
+
+export const bexis2theme: CustomThemeConfig = {
+    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", // #e3f3f1
+		"--color-primary-100": "218 240 236", // #daf0ec
+		"--color-primary-200": "209 236 232", // #d1ece8
+		"--color-primary-300": "181 224 217", // #b5e0d9
+		"--color-primary-400": "125 201 189", // #7dc9bd
+		"--color-primary-500": "69 178 161", // #45b2a1
+		"--color-primary-600": "62 160 145", // #3ea091
+		"--color-primary-700": "52 134 121", // #348679
+		"--color-primary-800": "41 107 97", // #296b61
+		"--color-primary-900": "34 87 79", // #22574f
+		// secondary | #ff9700 
+		"--color-secondary-50": "255 239 217", // #ffefd9
+		"--color-secondary-100": "255 234 204", // #ffeacc
+		"--color-secondary-200": "255 229 191", // #ffe5bf
+		"--color-secondary-300": "255 213 153", // #ffd599
+		"--color-secondary-400": "255 182 77", // #ffb64d
+		"--color-secondary-500": "255 151 0", // #ff9700
+		"--color-secondary-600": "230 136 0", // #e68800
+		"--color-secondary-700": "191 113 0", // #bf7100
+		"--color-secondary-800": "153 91 0", // #995b00
+		"--color-secondary-900": "125 74 0", // #7d4a00
+		// tertiary | #bee1da 
+		"--color-tertiary-50": "245 251 249", // #f5fbf9
+		"--color-tertiary-100": "242 249 248", // #f2f9f8
+		"--color-tertiary-200": "239 248 246", // #eff8f6
+		"--color-tertiary-300": "229 243 240", // #e5f3f0
+		"--color-tertiary-400": "210 234 229", // #d2eae5
+		"--color-tertiary-500": "190 225 218", // #bee1da
+		"--color-tertiary-600": "171 203 196", // #abcbc4
+		"--color-tertiary-700": "143 169 164", // #8fa9a4
+		"--color-tertiary-800": "114 135 131", // #728783
+		"--color-tertiary-900": "93 110 107", // #5d6e6b
+		// success | #4BB543 
+		"--color-success-50": "228 244 227", // #e4f4e3
+		"--color-success-100": "219 240 217", // #dbf0d9
+		"--color-success-200": "210 237 208", // #d2edd0
+		"--color-success-300": "183 225 180", // #b7e1b4
+		"--color-success-400": "129 203 123", // #81cb7b
+		"--color-success-500": "75 181 67", // #4BB543
+		"--color-success-600": "68 163 60", // #44a33c
+		"--color-success-700": "56 136 50", // #388832
+		"--color-success-800": "45 109 40", // #2d6d28
+		"--color-success-900": "37 89 33", // #255921
+		// warning | #EAB308 
+		"--color-warning-50": "252 244 218", // #fcf4da
+		"--color-warning-100": "251 240 206", // #fbf0ce
+		"--color-warning-200": "250 236 193", // #faecc1
+		"--color-warning-300": "247 225 156", // #f7e19c
+		"--color-warning-400": "240 202 82", // #f0ca52
+		"--color-warning-500": "234 179 8", // #EAB308
+		"--color-warning-600": "211 161 7", // #d3a107
+		"--color-warning-700": "176 134 6", // #b08606
+		"--color-warning-800": "140 107 5", // #8c6b05
+		"--color-warning-900": "115 88 4", // #735804
+		// error | #FF0000 
+		"--color-error-50": "255 217 217", // #ffd9d9
+		"--color-error-100": "255 204 204", // #ffcccc
+		"--color-error-200": "255 191 191", // #ffbfbf
+		"--color-error-300": "255 153 153", // #ff9999
+		"--color-error-400": "255 77 77", // #ff4d4d
+		"--color-error-500": "255 0 0", // #FF0000
+		"--color-error-600": "230 0 0", // #e60000
+		"--color-error-700": "191 0 0", // #bf0000
+		"--color-error-800": "153 0 0", // #990000
+		"--color-error-900": "125 0 0", // #7d0000
+		// surface | #c7c7c7 
+		"--color-surface-50": "247 247 247", // #f7f7f7
+		"--color-surface-100": "244 244 244", // #f4f4f4
+		"--color-surface-200": "241 241 241", // #f1f1f1
+		"--color-surface-300": "233 233 233", // #e9e9e9
+		"--color-surface-400": "216 216 216", // #d8d8d8
+		"--color-surface-500": "199 199 199", // #c7c7c7
+		"--color-surface-600": "179 179 179", // #b3b3b3
+		"--color-surface-700": "149 149 149", // #959595
+		"--color-surface-800": "119 119 119", // #777777
+		"--color-surface-900": "98 98 98", // #626262
+		
+	}
+}