@bexis2/bexis2-core-ui 0.0.23 → 0.0.26

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

@@ -1,100 +1,96 @@
-:root {
-	/* =~= Theme Properties =~= */
-	--theme-font-family-base: system-ui;
-	--theme-font-family-heading: system-ui;
-	--theme-font-color-base: 0 0 0;
-	--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: 0 0 0;
-	--on-secondary: 0 0 0;
-	--on-tertiary: 0 0 0;
-	--on-success: 0 0 0;
-	--on-warning: 255 255 255;
-	--on-error: 255 255 255;
-	--on-surface: 0 0 0;
-	/* =~= 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 | #ef4444 */
-	--color-warning-50: 253 227 227; /* ⬅ #fde3e3 */
-	--color-warning-100: 252 218 218; /* ⬅ #fcdada */
-	--color-warning-200: 251 208 208; /* ⬅ #fbd0d0 */
-	--color-warning-300: 249 180 180; /* ⬅ #f9b4b4 */
-	--color-warning-400: 244 124 124; /* ⬅ #f47c7c */
-	--color-warning-500: 239 68 68; /* ⬅ #ef4444 */
-	--color-warning-600: 215 61 61; /* ⬅ #d73d3d */
-	--color-warning-700: 179 51 51; /* ⬅ #b33333 */
-	--color-warning-800: 143 41 41; /* ⬅ #8f2929 */
-	--color-warning-900: 117 33 33; /* ⬅ #752121 */
-	/* 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 | #dddddd */
---color-surface-50: 250 250 250; /* ⬅ #fafafa */
---color-surface-100: 248 248 248; /* ⬅ #f8f8f8 */
---color-surface-200: 247 247 247; /* ⬅ #f7f7f7 */
---color-surface-300: 241 241 241; /* ⬅ #f1f1f1 */
---color-surface-400: 231 231 231; /* ⬅ #e7e7e7 */
---color-surface-500: 221 221 221; /* ⬅ #dddddd */
---color-surface-600: 199 199 199; /* ⬅ #c7c7c7 */
---color-surface-700: 166 166 166; /* ⬅ #a6a6a6 */
---color-surface-800: 133 133 133; /* ⬅ #858585 */
---color-surface-900: 108 108 108; /* ⬅ #6c6c6c */
-    /* dark mode surface | #1f2937 */
-	--color-surface-800: 19 25 33; /* ⬅ #131921 */
-	--color-surface-900: 15 20 27; /* ⬅ #0f141b */
-	
-}
+:root {
+	/* =~= 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: 0 0 0;
+	--on-secondary: 0 0 0;
+	--on-tertiary: 0 0 0;
+	--on-success: 0 0 0;
+	--on-warning: 255 255 255;
+	--on-error: 255 255 255;
+	--on-surface: 0 0 0;
+	/* =~= 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 | #ef4444 */
+	--color-warning-50: 253 227 227; /* ⬅ #fde3e3 */
+	--color-warning-100: 252 218 218; /* ⬅ #fcdada */
+	--color-warning-200: 251 208 208; /* ⬅ #fbd0d0 */
+	--color-warning-300: 249 180 180; /* ⬅ #f9b4b4 */
+	--color-warning-400: 244 124 124; /* ⬅ #f47c7c */
+	--color-warning-500: 239 68 68; /* ⬅ #ef4444 */
+	--color-warning-600: 215 61 61; /* ⬅ #d73d3d */
+	--color-warning-700: 179 51 51; /* ⬅ #b33333 */
+	--color-warning-800: 143 41 41; /* ⬅ #8f2929 */
+	--color-warning-900: 117 33 33; /* ⬅ #752121 */
+	/* 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 | #dddddd */
+	--color-surface-50: 250 250 250; /* ⬅ #fafafa */
+	--color-surface-100: 248 248 248; /* ⬅ #f8f8f8 */
+	--color-surface-200: 247 247 247; /* ⬅ #f7f7f7 */
+	--color-surface-300: 241 241 241; /* ⬅ #f1f1f1 */
+	--color-surface-400: 231 231 231; /* ⬅ #e7e7e7 */
+	--color-surface-500: 221 221 221; /* ⬅ #dddddd */
+	--color-surface-600: 199 199 199; /* ⬅ #c7c7c7 */
+	--color-surface-700: 166 166 166; /* ⬅ #a6a6a6 */
+	--color-surface-800: 133 133 133; /* ⬅ #858585 */
+	--color-surface-900: 108 108 108; /* ⬅ #6c6c6c */
+}

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

@@ -3,8 +3,9 @@
 
 :root {
 	/* =~= Theme Styles =~= */
-	--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-		'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+	--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+		'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+		'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 	--theme-font-family-heading: system-ui;
 	--theme-font-color-base: var(--color-surface-900);
 	--theme-font-color-dark: var(--color-surface-50);

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

@@ -5,8 +5,9 @@
 
 :root {
 	/* =~= Hamlindigo Theme | Custom =~= */
-	--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-		'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+	--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+		'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+		'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 	--theme-font-family-heading: 'Playfair Display', serif;
 	--theme-font-color-base: 0 0 0;
 	--theme-font-color-dark: 255 255 255;

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

@@ -3,8 +3,9 @@
 
 :root {
 	/* =~= Theme Styles =~= */
-	--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-		'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+	--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+		'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+		'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 	--theme-font-family-heading: 'Playfair Display', serif;
 	--theme-font-color-base: var(--color-surface-900);
 	--theme-font-color-dark: var(--color-secondary-100);

package/src/lib/index.ts

@@ -1,37 +1,45 @@
-
 // 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'
+import ListView from './components/ListView.svelte';
+import TableView from './TableView.svelte';
 
-import Spinner from './components/spinner/Spinner.svelte'
+import FileIcon from './components/file/FileIcon.svelte';
+import FileInfo from './components/file/FileInfo.svelte';
+import FileUploader from './components/file/FileUploader.svelte';
 
+import Spinner from './components/spinner/Spinner.svelte';
 
-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'
+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';
 
 //Form
-export {Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiSelect, NumberInput,TextArea, TextInput }
+export {
+	Checkbox,
+	CheckboxKVPList,
+	CheckboxList,
+	DateInput,
+	DropdownKVP,
+	MultiSelect,
+	NumberInput,
+	TextArea,
+	TextInput
+};
 
 //File
-export {FileInfo, FileIcon, FileUploader }
+export { FileInfo, FileIcon, FileUploader };
 
 //others
-export { ListView,TableView, Spinner }
+export { ListView, TableView, Spinner };
 
 //Api
-export {Api} from './services/Api.js'
-export {host,username,password,setApiConfig} from './stores/apistore.js'
+export { Api } from './services/Api.js';
+export { host, username, password, setApiConfig } from './stores/apistore.js';
 
 //Type
-export type {user, FileUploaderModel} from './models/Models.js'
+export type { user, FileUploaderModel } from './models/Models.js';

package/src/lib/models/Models.ts

@@ -1,39 +1,70 @@
-
-export interface FileInfo {
- name:string,
- type:string,
- length:number,
- description:string,
- validationHash:string,
-
-}
-
-
-export interface FileUploaderModel{
- accept:string[],
- existingFiles:FileInfo[],
- descriptionType:number,
- multiple:boolean,
- maxSize:number,
- lastModification:Date
-}
-
-export interface Files {
- accepted:Blob[],
- rejected:Blob[]
-}
-
-
-export type user = {
- name:string
-}
-
-export interface FileObj{
- path:string,
- lastModified:number,
- lastModifiedDate:Date,
- name:string,
- size:number,
- type:string,
- webkitRelativePath:string
-}
+import type { SvelteComponent } from 'svelte';
+import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
+import type { Writable } from 'svelte/store';
+
+export interface Input {
+	id: string;
+	label: string;
+	feedback: string[];
+	invalid: boolean;
+	valid: boolean;
+	required: boolean;
+}
+
+export interface FileInfo {
+	name: string;
+	type: string;
+	length: number;
+	description: string;
+	validationHash: string;
+}
+
+export interface FileUploaderModel {
+	accept: string[];
+	existingFiles: FileInfo[];
+	descriptionType: number;
+	multiple: boolean;
+	maxSize: number;
+	lastModification: Date;
+}
+
+export interface Files {
+	accepted: Blob[];
+	rejected: Blob[];
+}
+
+export type user = {
+	name: string;
+};
+
+export interface FileObj {
+	path: string;
+	lastModified: number;
+	lastModifiedDate: Date;
+	name: string;
+	size: number;
+	type: string;
+	webkitRelativePath: string;
+}
+
+// Table column type
+export interface Column {
+	header?: string;
+	exclude?: boolean;
+	colFilterFn?: ColumnFilterFn;
+	colFilterComponent?: typeof SvelteComponent;
+}
+
+export interface Columns {
+	[key: string]: Column;
+}
+
+// Table config type
+export interface TableConfig<T> {
+	id: string;
+	data: Writable<T[]>;
+	columns?: Columns;
+	pageSizes?: number[];
+	defaultPageSize?: number;
+	optionsComponent?: typeof SvelteComponent;
+}

package/src/lib/services/Api.ts

@@ -1,58 +1,55 @@
-// Api.js
-import axios from "axios";
-import { host, username, password } from "../stores/apistore";
-
-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/apistore';
+
+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/stores/apistore.ts

@@ -1,32 +1,28 @@
-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 settings");
- hostStore.update(h=>h = _host);
- usernameStore.update(u=>u = _user);
- passwordStore.update(p=>p = _pw);
-}
+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 settings');
+	hostStore.update((h) => (h = _host));
+	usernameStore.update((u) => (u = _user));
+	passwordStore.update((p) => (p = _pw));
+}