@bexis2/bexis2-core-ui 0.2.30 → 0.2.32

package/src/lib/css/themes/theme-vintage.css

@@ -1,125 +1,125 @@
-/* https://fonts.google.com/specimen/Abril+Fatface?query=Abril+Fatface&noto.query=Abril */
-@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
-/* https://fonts.google.com/noto/specimen/Noto+Sans?query=sans */
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300&display=swap');
-
-:root {
-	/* =~= Theme Styles =~= */
-	--theme-font-family-base: 'Noto Sans', sans-serif;
-	--theme-font-family-heading: 'Abril Fatface', cursive;
-	--theme-font-color-base: var(--color-primary-900);
-	--theme-font-color-dark: var(--color-primary-100);
-	--theme-rounded-base: 2px;
-	--theme-rounded-container: 4px;
-	--theme-border-base: 1px;
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: 0 0 0;
-	--on-secondary: 0 0 0;
-	--on-tertiary: 0 0 0;
-	--on-success: 0 0 0;
-	--on-warning: 0 0 0;
-	--on-error: 0 0 0;
-	--on-surface: 255 255 255;
-	/* =~= Theme Colors  =~= */
-	/* primary | #ea861a */
-	--color-primary-50: 252 237 221; /* ⬅ #fceddd */
-	--color-primary-100: 251 231 209; /* ⬅ #fbe7d1 */
-	--color-primary-200: 250 225 198; /* ⬅ #fae1c6 */
-	--color-primary-300: 247 207 163; /* ⬅ #f7cfa3 */
-	--color-primary-400: 240 170 95; /* ⬅ #f0aa5f */
-	--color-primary-500: 234 134 26; /* ⬅ #ea861a */
-	--color-primary-600: 211 121 23; /* ⬅ #d37917 */
-	--color-primary-700: 176 101 20; /* ⬅ #b06514 */
-	--color-primary-800: 140 80 16; /* ⬅ #8c5010 */
-	--color-primary-900: 115 66 13; /* ⬅ #73420d */
-	/* secondary | #97cea5 */
-	--color-secondary-50: 239 248 242; /* ⬅ #eff8f2 */
-	--color-secondary-100: 234 245 237; /* ⬅ #eaf5ed */
-	--color-secondary-200: 229 243 233; /* ⬅ #e5f3e9 */
-	--color-secondary-300: 213 235 219; /* ⬅ #d5ebdb */
-	--color-secondary-400: 182 221 192; /* ⬅ #b6ddc0 */
-	--color-secondary-500: 151 206 165; /* ⬅ #97cea5 */
-	--color-secondary-600: 136 185 149; /* ⬅ #88b995 */
-	--color-secondary-700: 113 155 124; /* ⬅ #719b7c */
-	--color-secondary-800: 91 124 99; /* ⬅ #5b7c63 */
-	--color-secondary-900: 74 101 81; /* ⬅ #4a6551 */
-	/* tertiary | #06b6d4 */
-	--color-tertiary-50: 218 244 249; /* ⬅ #daf4f9 */
-	--color-tertiary-100: 205 240 246; /* ⬅ #cdf0f6 */
-	--color-tertiary-200: 193 237 244; /* ⬅ #c1edf4 */
-	--color-tertiary-300: 155 226 238; /* ⬅ #9be2ee */
-	--color-tertiary-400: 81 204 225; /* ⬅ #51cce1 */
-	--color-tertiary-500: 6 182 212; /* ⬅ #06b6d4 */
-	--color-tertiary-600: 5 164 191; /* ⬅ #05a4bf */
-	--color-tertiary-700: 5 137 159; /* ⬅ #05899f */
-	--color-tertiary-800: 4 109 127; /* ⬅ #046d7f */
-	--color-tertiary-900: 3 89 104; /* ⬅ #035968 */
-	/* success | #84cb5d */
-	--color-success-50: 237 247 231; /* ⬅ #edf7e7 */
-	--color-success-100: 230 245 223; /* ⬅ #e6f5df */
-	--color-success-200: 224 242 215; /* ⬅ #e0f2d7 */
-	--color-success-300: 206 234 190; /* ⬅ #ceeabe */
-	--color-success-400: 169 219 142; /* ⬅ #a9db8e */
-	--color-success-500: 132 203 93; /* ⬅ #84cb5d */
-	--color-success-600: 119 183 84; /* ⬅ #77b754 */
-	--color-success-700: 99 152 70; /* ⬅ #639846 */
-	--color-success-800: 79 122 56; /* ⬅ #4f7a38 */
-	--color-success-900: 65 99 46; /* ⬅ #41632e */
-	/* warning | #f2ac23 */
-	--color-warning-50: 253 243 222; /* ⬅ #fdf3de */
-	--color-warning-100: 252 238 211; /* ⬅ #fceed3 */
-	--color-warning-200: 252 234 200; /* ⬅ #fceac8 */
-	--color-warning-300: 250 222 167; /* ⬅ #fadea7 */
-	--color-warning-400: 246 197 101; /* ⬅ #f6c565 */
-	--color-warning-500: 242 172 35; /* ⬅ #f2ac23 */
-	--color-warning-600: 218 155 32; /* ⬅ #da9b20 */
-	--color-warning-700: 182 129 26; /* ⬅ #b6811a */
-	--color-warning-800: 145 103 21; /* ⬅ #916715 */
-	--color-warning-900: 119 84 17; /* ⬅ #775411 */
-	/* error | #d57e78 */
-	--color-error-50: 249 236 235; /* ⬅ #f9eceb */
-	--color-error-100: 247 229 228; /* ⬅ #f7e5e4 */
-	--color-error-200: 245 223 221; /* ⬅ #f5dfdd */
-	--color-error-300: 238 203 201; /* ⬅ #eecbc9 */
-	--color-error-400: 226 165 161; /* ⬅ #e2a5a1 */
-	--color-error-500: 213 126 120; /* ⬅ #d57e78 */
-	--color-error-600: 192 113 108; /* ⬅ #c0716c */
-	--color-error-700: 160 95 90; /* ⬅ #a05f5a */
-	--color-error-800: 128 76 72; /* ⬅ #804c48 */
-	--color-error-900: 104 62 59; /* ⬅ #683e3b */
-	/* surface | #3f3731 */
-	--color-surface-50: 226 225 224; /* ⬅ #e2e1e0 */
-	--color-surface-100: 217 215 214; /* ⬅ #d9d7d6 */
-	--color-surface-200: 207 205 204; /* ⬅ #cfcdcc */
-	--color-surface-300: 178 175 173; /* ⬅ #b2afad */
-	--color-surface-400: 121 115 111; /* ⬅ #79736f */
-	--color-surface-500: 63 55 49; /* ⬅ #3f3731 */
-	--color-surface-600: 57 50 44; /* ⬅ #39322c */
-	--color-surface-700: 47 41 37; /* ⬅ #2f2925 */
-	--color-surface-800: 38 33 29; /* ⬅ #26211d */
-	--color-surface-900: 31 27 24; /* ⬅ #1f1b18 */
-}
-
-[data-theme='vintage'] h1,
-[data-theme='vintage'] h2,
-[data-theme='vintage'] h3,
-[data-theme='vintage'] h4,
-[data-theme='vintage'] h5,
-[data-theme='vintage'] h6 {
-	letter-spacing: 1px;
-}
-
-/* Applied to body with `<body data-theme="vintage">` */
-/* Created with: https://csshero.org/mesher/ */
-[data-theme='vintage'] {
-	/* prettier-ignore */
-	background-image:
-		radial-gradient(at 100% 0%, hsla(135,34%,70%,0.20) 0px, transparent 50%),
-		radial-gradient(at 85% 100%, hsla(31,83%,50%,0.20) 0px, transparent 50%);
-}
-.dark [data-theme='vintage'] {
-	/* prettier-ignore */
-	background-image:
-		radial-gradient(at 100% 0%, hsla(135,34%,70%,0.14) 0px, transparent 50%),
-		radial-gradient(at 85% 100%, hsla(31,83%,50%,0.14) 0px, transparent 50%);
-}
+/* https://fonts.google.com/specimen/Abril+Fatface?query=Abril+Fatface&noto.query=Abril */
+@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
+/* https://fonts.google.com/noto/specimen/Noto+Sans?query=sans */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300&display=swap');
+
+:root {
+	/* =~= Theme Styles =~= */
+	--theme-font-family-base: 'Noto Sans', sans-serif;
+	--theme-font-family-heading: 'Abril Fatface', cursive;
+	--theme-font-color-base: var(--color-primary-900);
+	--theme-font-color-dark: var(--color-primary-100);
+	--theme-rounded-base: 2px;
+	--theme-rounded-container: 4px;
+	--theme-border-base: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 0 0 0;
+	--on-secondary: 0 0 0;
+	--on-tertiary: 0 0 0;
+	--on-success: 0 0 0;
+	--on-warning: 0 0 0;
+	--on-error: 0 0 0;
+	--on-surface: 255 255 255;
+	/* =~= Theme Colors  =~= */
+	/* primary | #ea861a */
+	--color-primary-50: 252 237 221; /* ⬅ #fceddd */
+	--color-primary-100: 251 231 209; /* ⬅ #fbe7d1 */
+	--color-primary-200: 250 225 198; /* ⬅ #fae1c6 */
+	--color-primary-300: 247 207 163; /* ⬅ #f7cfa3 */
+	--color-primary-400: 240 170 95; /* ⬅ #f0aa5f */
+	--color-primary-500: 234 134 26; /* ⬅ #ea861a */
+	--color-primary-600: 211 121 23; /* ⬅ #d37917 */
+	--color-primary-700: 176 101 20; /* ⬅ #b06514 */
+	--color-primary-800: 140 80 16; /* ⬅ #8c5010 */
+	--color-primary-900: 115 66 13; /* ⬅ #73420d */
+	/* secondary | #97cea5 */
+	--color-secondary-50: 239 248 242; /* ⬅ #eff8f2 */
+	--color-secondary-100: 234 245 237; /* ⬅ #eaf5ed */
+	--color-secondary-200: 229 243 233; /* ⬅ #e5f3e9 */
+	--color-secondary-300: 213 235 219; /* ⬅ #d5ebdb */
+	--color-secondary-400: 182 221 192; /* ⬅ #b6ddc0 */
+	--color-secondary-500: 151 206 165; /* ⬅ #97cea5 */
+	--color-secondary-600: 136 185 149; /* ⬅ #88b995 */
+	--color-secondary-700: 113 155 124; /* ⬅ #719b7c */
+	--color-secondary-800: 91 124 99; /* ⬅ #5b7c63 */
+	--color-secondary-900: 74 101 81; /* ⬅ #4a6551 */
+	/* tertiary | #06b6d4 */
+	--color-tertiary-50: 218 244 249; /* ⬅ #daf4f9 */
+	--color-tertiary-100: 205 240 246; /* ⬅ #cdf0f6 */
+	--color-tertiary-200: 193 237 244; /* ⬅ #c1edf4 */
+	--color-tertiary-300: 155 226 238; /* ⬅ #9be2ee */
+	--color-tertiary-400: 81 204 225; /* ⬅ #51cce1 */
+	--color-tertiary-500: 6 182 212; /* ⬅ #06b6d4 */
+	--color-tertiary-600: 5 164 191; /* ⬅ #05a4bf */
+	--color-tertiary-700: 5 137 159; /* ⬅ #05899f */
+	--color-tertiary-800: 4 109 127; /* ⬅ #046d7f */
+	--color-tertiary-900: 3 89 104; /* ⬅ #035968 */
+	/* success | #84cb5d */
+	--color-success-50: 237 247 231; /* ⬅ #edf7e7 */
+	--color-success-100: 230 245 223; /* ⬅ #e6f5df */
+	--color-success-200: 224 242 215; /* ⬅ #e0f2d7 */
+	--color-success-300: 206 234 190; /* ⬅ #ceeabe */
+	--color-success-400: 169 219 142; /* ⬅ #a9db8e */
+	--color-success-500: 132 203 93; /* ⬅ #84cb5d */
+	--color-success-600: 119 183 84; /* ⬅ #77b754 */
+	--color-success-700: 99 152 70; /* ⬅ #639846 */
+	--color-success-800: 79 122 56; /* ⬅ #4f7a38 */
+	--color-success-900: 65 99 46; /* ⬅ #41632e */
+	/* warning | #f2ac23 */
+	--color-warning-50: 253 243 222; /* ⬅ #fdf3de */
+	--color-warning-100: 252 238 211; /* ⬅ #fceed3 */
+	--color-warning-200: 252 234 200; /* ⬅ #fceac8 */
+	--color-warning-300: 250 222 167; /* ⬅ #fadea7 */
+	--color-warning-400: 246 197 101; /* ⬅ #f6c565 */
+	--color-warning-500: 242 172 35; /* ⬅ #f2ac23 */
+	--color-warning-600: 218 155 32; /* ⬅ #da9b20 */
+	--color-warning-700: 182 129 26; /* ⬅ #b6811a */
+	--color-warning-800: 145 103 21; /* ⬅ #916715 */
+	--color-warning-900: 119 84 17; /* ⬅ #775411 */
+	/* error | #d57e78 */
+	--color-error-50: 249 236 235; /* ⬅ #f9eceb */
+	--color-error-100: 247 229 228; /* ⬅ #f7e5e4 */
+	--color-error-200: 245 223 221; /* ⬅ #f5dfdd */
+	--color-error-300: 238 203 201; /* ⬅ #eecbc9 */
+	--color-error-400: 226 165 161; /* ⬅ #e2a5a1 */
+	--color-error-500: 213 126 120; /* ⬅ #d57e78 */
+	--color-error-600: 192 113 108; /* ⬅ #c0716c */
+	--color-error-700: 160 95 90; /* ⬅ #a05f5a */
+	--color-error-800: 128 76 72; /* ⬅ #804c48 */
+	--color-error-900: 104 62 59; /* ⬅ #683e3b */
+	/* surface | #3f3731 */
+	--color-surface-50: 226 225 224; /* ⬅ #e2e1e0 */
+	--color-surface-100: 217 215 214; /* ⬅ #d9d7d6 */
+	--color-surface-200: 207 205 204; /* ⬅ #cfcdcc */
+	--color-surface-300: 178 175 173; /* ⬅ #b2afad */
+	--color-surface-400: 121 115 111; /* ⬅ #79736f */
+	--color-surface-500: 63 55 49; /* ⬅ #3f3731 */
+	--color-surface-600: 57 50 44; /* ⬅ #39322c */
+	--color-surface-700: 47 41 37; /* ⬅ #2f2925 */
+	--color-surface-800: 38 33 29; /* ⬅ #26211d */
+	--color-surface-900: 31 27 24; /* ⬅ #1f1b18 */
+}
+
+[data-theme='vintage'] h1,
+[data-theme='vintage'] h2,
+[data-theme='vintage'] h3,
+[data-theme='vintage'] h4,
+[data-theme='vintage'] h5,
+[data-theme='vintage'] h6 {
+	letter-spacing: 1px;
+}
+
+/* Applied to body with `<body data-theme="vintage">` */
+/* Created with: https://csshero.org/mesher/ */
+[data-theme='vintage'] {
+	/* prettier-ignore */
+	background-image:
+		radial-gradient(at 100% 0%, hsla(135,34%,70%,0.20) 0px, transparent 50%),
+		radial-gradient(at 85% 100%, hsla(31,83%,50%,0.20) 0px, transparent 50%);
+}
+.dark [data-theme='vintage'] {
+	/* prettier-ignore */
+	background-image:
+		radial-gradient(at 100% 0%, hsla(135,34%,70%,0.14) 0px, transparent 50%),
+		radial-gradient(at 85% 100%, hsla(31,83%,50%,0.14) 0px, transparent 50%);
+}

package/src/lib/models/Models.ts

@@ -88,13 +88,15 @@ export interface ColumnInstructions {
 
 // Table column type
 export interface Column {
-	header?: string;
+	header?: string; // key by default
 	exclude?: boolean; // false by default
 	instructions?: ColumnInstructions;
 	disableFiltering?: boolean; // false by default
 	disableSorting?: boolean; // false by default
 	colFilterFn?: ColumnFilterFn;
 	colFilterComponent?: typeof SvelteComponent;
+	minWidth?: number; // auto by default
+	fixedWidth?: number; // auto by default
 }
 
 export interface Columns {
@@ -105,12 +107,13 @@ export interface Columns {
 export interface TableConfig<T> {
 	id: string;
 	data: Writable<T[]>;
-	toggle?: boolean;
-	fitToScreen?: boolean;
-	height?: null | number;
-	columns?: Columns;
-	pageSizes?: number[];
-	defaultPageSize?: number;
+	resizable?: 'rows' | 'columns' | 'both'; // none by default
+	toggle?: boolean; // false by default
+	fitToScreen?: boolean; // true by default
+	height?: null | number; // null by default
+	columns?: Columns; 
+	pageSizes?: number[]; // [5, 10, 15, 20] by default
+	defaultPageSize?: number; // 10 by default
 	optionsComponent?: typeof SvelteComponent;
 }
 

package/src/lib/models/Page.ts

@@ -1,40 +1,40 @@
-// BREADCRUMB
-/********************************** */
-export interface breadcrumbItemType {
-	label: string;
-	link: string;
-}
-
-export class BreadcrumbModel {
-	items: breadcrumbItemType[];
-
-	constructor() {
-		this.items = [];
-	}
-}
-
-// MENU
-/********************************** */
-export class MenuModel {
-	Logo: logoType;
-	LaunchBar: menuItemType[];
-	MenuBar: menuItemType[];
-	AccountBar: menuItemType[];
-	Settings: menuItemType[];
-	Extended: menuItemType[];
-}
-
-export interface menuItemType {
-	Title: string;
-	Url: string;
-	Target: string;
-	Module: string;
-	Items: menuItemType[];
-}
-
-export interface logoType {
-	Mime: string;
-	Name: string;
-	Data: string;
-	Height: number;
-}
+// BREADCRUMB
+/********************************** */
+export interface breadcrumbItemType {
+	label: string;
+	link: string;
+}
+
+export class BreadcrumbModel {
+	items: breadcrumbItemType[];
+
+	constructor() {
+		this.items = [];
+	}
+}
+
+// MENU
+/********************************** */
+export class MenuModel {
+	Logo: logoType;
+	LaunchBar: menuItemType[];
+	MenuBar: menuItemType[];
+	AccountBar: menuItemType[];
+	Settings: menuItemType[];
+	Extended: menuItemType[];
+}
+
+export interface menuItemType {
+	Title: string;
+	Url: string;
+	Target: string;
+	Module: string;
+	Items: menuItemType[];
+}
+
+export interface logoType {
+	Mime: string;
+	Name: string;
+	Data: string;
+	Height: number;
+}

package/src/lib/services/Api.ts

@@ -1,55 +1,55 @@
-// Api.js
-import axios from 'axios';
-import { host, username, password } from '../stores/apiStores';
-
-console.log('setup axios');
-
-// implement a method to execute all the request from here.
-const apiRequest = (method, url, request) => {
-	// Create a instance of axios to use the same base url.
-	const axiosAPI = axios.create({
-		baseURL: host
-	});
-
-	const headers = {
-		authorization: 'Basic ' + btoa(username + ':' + password)
-	};
-
-	//using the axios instance to perform the request that received from each http method
-	return axiosAPI({
-		method,
-		url,
-		data: request,
-		headers
-	})
-		.then((res) => {
-			return Promise.resolve(res);
-		})
-		.catch((err) => {
-			return Promise.reject(err);
-		});
-};
-
-// function to execute the http get request
-const get = (url, request = '') => apiRequest('get', url, request);
-
-// function to execute the http delete request
-const deleteRequest = (url, request) => apiRequest('delete', url, request);
-
-// function to execute the http post request
-const post = (url, request) => apiRequest('post', url, request);
-
-// function to execute the http put request
-const put = (url, request) => apiRequest('put', url, request);
-
-// function to execute the http path request
-const patch = (url, request) => apiRequest('patch', url, request);
-
-// expose your method to other services or actions
-export const Api = {
-	get,
-	delete: deleteRequest,
-	post,
-	put,
-	patch
-};
+// Api.js
+import axios from 'axios';
+import { host, username, password } from '../stores/apiStores';
+
+console.log('setup axios');
+
+// implement a method to execute all the request from here.
+const apiRequest = (method, url, request) => {
+	// Create a instance of axios to use the same base url.
+	const axiosAPI = axios.create({
+		baseURL: host
+	});
+
+	const headers = {
+		authorization: 'Basic ' + btoa(username + ':' + password)
+	};
+
+	//using the axios instance to perform the request that received from each http method
+	return axiosAPI({
+		method,
+		url,
+		data: request,
+		headers
+	})
+		.then((res) => {
+			return Promise.resolve(res);
+		})
+		.catch((err) => {
+			return Promise.reject(err);
+		});
+};
+
+// function to execute the http get request
+const get = (url, request = '') => apiRequest('get', url, request);
+
+// function to execute the http delete request
+const deleteRequest = (url, request) => apiRequest('delete', url, request);
+
+// function to execute the http post request
+const post = (url, request) => apiRequest('post', url, request);
+
+// function to execute the http put request
+const put = (url, request) => apiRequest('put', url, request);
+
+// function to execute the http path request
+const patch = (url, request) => apiRequest('patch', url, request);
+
+// expose your method to other services or actions
+export const Api = {
+	get,
+	delete: deleteRequest,
+	post,
+	put,
+	patch
+};

package/src/lib/services/BaseCaller.js

@@ -1,16 +1,16 @@
-// Implementations for all the calls for the pokemon endpoints.
-//import Api from "./Api";
-import { host } from '$store/apiStores';
-
-// go to a internal action
-export const goTo = async (url, intern = true) => {
-	if (intern == true) {
-		// go to inside bexis2
-		if (window != null && host != null && url != null) {
-			window.open(host + url, '_self')?.focus();
-		}
-	} // go to a external page
-	else {
-		window.open(url, '_blank')?.focus();
-	}
-};
+// Implementations for all the calls for the pokemon endpoints.
+//import Api from "./Api";
+import { host } from '$store/apiStores';
+
+// go to a internal action
+export const goTo = async (url, intern = true) => {
+	if (intern == true) {
+		// go to inside bexis2
+		if (window != null && host != null && url != null) {
+			window.open(host + url, '_self')?.focus();
+		}
+	} // go to a external page
+	else {
+		window.open(url, '_blank')?.focus();
+	}
+};

package/src/lib/stores/apiStores.ts

@@ -1,31 +1,31 @@
-import { writable } from 'svelte/store';
-
-export let host = 'window.location.origin';
-export let username = '';
-export let password = '';
-
-const hostStore = writable(''); //writable(window.location.origin);
-const usernameStore = writable('');
-const passwordStore = writable('');
-
-hostStore.subscribe((value) => {
-	host = value;
-});
-
-usernameStore.subscribe((value) => {
-	username = value;
-});
-
-passwordStore.subscribe((value) => {
-	password = value;
-});
-
-export function setApiConfig(_host: string, _user: string, _pw: string) {
-	console.log('overwrite api settings');
-
-	hostStore.update((h) => (h = _host));
-	usernameStore.update((u) => (u = _user));
-	passwordStore.update((p) => (p = _pw));
-
-	//console.log('overwrite host',_host);
-}
+import { writable } from 'svelte/store';
+
+export let host = 'window.location.origin';
+export let username = '';
+export let password = '';
+
+const hostStore = writable(''); //writable(window.location.origin);
+const usernameStore = writable('');
+const passwordStore = writable('');
+
+hostStore.subscribe((value) => {
+	host = value;
+});
+
+usernameStore.subscribe((value) => {
+	username = value;
+});
+
+passwordStore.subscribe((value) => {
+	password = value;
+});
+
+export function setApiConfig(_host: string, _user: string, _pw: string) {
+	console.log('overwrite api settings');
+
+	hostStore.update((h) => (h = _host));
+	usernameStore.update((u) => (u = _user));
+	passwordStore.update((p) => (p = _pw));
+
+	//console.log('overwrite host',_host);
+}