@bexis2/bexis2-core-ui 0.1.5 → 0.1.7

package/README.md

@@ -1,139 +1,153 @@
-# bexis-core-ui
-
-## v0.1.5 
-### update
-- MultiSelect 
-  - isTargetComplex -> complexTarget
-  - isComplex -> complexSource
-- DropdownKVP
-  - targetIsComplex -> complexTarget
-
-## v0.1.4 
-> test for deploy
-
-
-## v0.1.3 
-> test table
-
-## v0.1.2
-### update
-- MultiSelect 
-  - return complex type is available now
-
-## v0.1.1
-### update
-- Page 
-  - add menu (beta)
-
-
-## v.0.1.0
-### add
-#### types
-- ListItem
-- KvP
-
-#### enum
-- Position
-
-### update
-#### components
-- DropdownKVP
-  - return of the target to complex or id only 
-- TextInput, TextArea, Number
-  - add placeholder
-
-## v0.0.31
-### add
-#### components
-- Alert
-
-### updates
-#### components
-- Spinner
-  - label
-  - color
-  - position
-  
-- Table 
-  - Date filters
-  - Configuration for complex types
-  - Custom event dispatcher
-  - Updated docs.
-  - Disabling of filters
-  - Disabling of sorting
-
-### fixes:
-#### table
-- Arrow in pageSize dropdown.
-- Bug with number filter not working on zero values.
-- Table of Contents on the right sidebar.
-  
-## v0.0.29
-
-### add
-#### types
-- Link
-
-## v0.0.28
-
-### add
-#### components
-- Page
-  
-
-
-## v0.0.27
-
-### add
-#### components
-- Table 
-- TableFilter
-- cloumnFilter
-- searchFilter
-
-#### types
-- TableConfig
-- Columns 
-- Column
-- Input
-
-<hr/>
-
-## v0.0.26
-
-### updates
-
-- fix bugs in checkbox list
-- fix bugs in multi select
-
-<hr/>
-
-## v0.0.25
-
-### adds 
-#### components
-- Spinner
-- FileUploader 
-- FileInfo 
-- FileIcon 
-- 
-#### types
-- FileUploaderModel
- 
-<hr/>
-
-## v0.0.23
-
-### updates
-- update bexis 2 theme
-
-### adds 
-- Checkbox
-- CheckboxKVPList 
-- CheckboxList 
-- DateInput 
-- DropdownKVP 
-- MultiSelect 
-- NumberInput
-- TextArea
-- TextInput
+# bexis-core-ui
+## v0.1.7
+### update
+- MultiSelect
+  - remove skeleton css classes from svelte select input
+
+## v0.1.6
+
+- remove massive console.logs
+  
+### update
+- Table
+  - change submit to apply filter
+  - show emtpy table if not data is in the store
+  - add option of including custom rendering component
+
+## v0.1.5 
+### update
+- MultiSelect 
+  - isTargetComplex -> complexTarget
+  - isComplex -> complexSource
+- DropdownKVP
+  - targetIsComplex -> complexTarget
+
+## v0.1.4 
+> test for deploy
+
+
+## v0.1.3 
+> test table
+
+## v0.1.2
+### update
+- MultiSelect 
+  - return complex type is available now
+
+## v0.1.1
+### update
+- Page 
+  - add menu (beta)
+
+
+## v.0.1.0
+### add
+#### types
+- ListItem
+- KvP
+
+#### enum
+- Position
+
+### update
+#### components
+- DropdownKVP
+  - return of the target to complex or id only 
+- TextInput, TextArea, Number
+  - add placeholder
+
+## v0.0.31
+### add
+#### components
+- Alert
+
+### updates
+#### components
+- Spinner
+  - label
+  - color
+  - position
+  
+- Table 
+  - Date filters
+  - Configuration for complex types
+  - Custom event dispatcher
+  - Updated docs.
+  - Disabling of filters
+  - Disabling of sorting
+
+### fixes:
+#### table
+- Arrow in pageSize dropdown.
+- Bug with number filter not working on zero values.
+- Table of Contents on the right sidebar.
+  
+## v0.0.29
+
+### add
+#### types
+- Link
+
+## v0.0.28
+
+### add
+#### components
+- Page
+  
+
+
+## v0.0.27
+
+### add
+#### components
+- Table 
+- TableFilter
+- cloumnFilter
+- searchFilter
+
+#### types
+- TableConfig
+- Columns 
+- Column
+- Input
+
+<hr/>
+
+## v0.0.26
+
+### updates
+
+- fix bugs in checkbox list
+- fix bugs in multi select
+
+<hr/>
+
+## v0.0.25
+
+### adds 
+#### components
+- Spinner
+- FileUploader 
+- FileInfo 
+- FileIcon 
+- 
+#### types
+- FileUploaderModel
+ 
+<hr/>
+
+## v0.0.23
+
+### updates
+- update bexis 2 theme
+
+### adds 
+- Checkbox
+- CheckboxKVPList 
+- CheckboxList 
+- DateInput 
+- DropdownKVP 
+- MultiSelect 
+- NumberInput
+- TextArea
+- TextInput

package/dist/components/Table/Table.svelte

@@ -52,12 +52,12 @@ const tableColumns = [
         disableFiltering = false,
         disableSorting = false
       } = columns[key];
-      const { toSortableValueFn, toFilterableValueFn, toStringFn } = instructions ?? {};
+      const { toSortableValueFn, toFilterableValueFn, toStringFn, renderComponent } = instructions ?? {};
       return table.column({
         header: header ?? key,
         accessor,
-        cell: ({ value }) => {
-          return toStringFn ? toStringFn(value) : value;
+        cell: ({ value, row }) => {
+          return renderComponent ? createRender(renderComponent, { value, row }) : toStringFn ? toStringFn(value) : value;
         },
         plugins: {
           sort: {
@@ -132,12 +132,14 @@ const { filterValue } = pluginStates.tableFilter;
 
 <div class="grid gap-2">
 	<div class="table-container">
-		<input
-			class="input p-2 mb-2 border border-primary-500"
-			type="text"
-			bind:value={$filterValue}
-			placeholder="Search rows..."
-		/>
+		{#if $data.length > 0}
+			<input
+				class="input p-2 mb-2 border border-primary-500"
+				type="text"
+				bind:value={$filterValue}
+				placeholder="Search rows..."
+			/>
+		{/if}
 		<table {...$tableAttrs} class="table table-compact bg-tertiary-200">
 			<thead>
 				{#each $headerRows as headerRow (headerRow.id)}
@@ -183,6 +185,8 @@ const { filterValue } = pluginStates.tableFilter;
 							{/each}
 						</tr>
 					</Subscribe>
+				{:else}
+					<p class="items-center justify-center flex w-full p-10 italic">Nothing to show here.</p>
 				{/each}
 			</thead>
 
@@ -205,6 +209,7 @@ const { filterValue } = pluginStates.tableFilter;
 			</tbody>
 		</table>
 	</div>
-
-	<TablePagination pageConfig={pluginStates.page} {pageSizes} />
+	{#if $data.length > 0}
+		<TablePagination pageConfig={pluginStates.page} {pageSizes} />
+	{/if}
 </div>

package/dist/components/file/FileUploader.svelte

@@ -24,7 +24,6 @@ let files = { accepted: [], rejected: [] };
 $:
   files;
 onMount(async () => {
-  console.log("fileupload - OnMount", data);
   if (!data) {
     load();
   } else {
@@ -42,22 +41,18 @@ async function load() {
   console.log("fileupload", model);
 }
 function handleFilesSelect(e) {
-  console.log("handleFilesSelect", e);
   console.log("files", files);
   const { acceptedFiles, fileRejections } = e.detail;
   files.accepted = [...files.accepted, ...acceptedFiles];
   files.rejected = [...files.rejected, ...fileRejections];
-  console.log("acceptedFiles", acceptedFiles);
   console.log("files.accepted", files.accepted);
   if (fileRejections.length > 0) {
-    console.log("the dropped file is not supported.");
     console.log(files.rejected);
     let messages = [""];
     for (let index = 0; index < fileRejections.length; index++) {
       const element = fileRejections[index];
       messages.push(getErrorMessage(element));
     }
-    console.log(messages);
     dispatch("error", { messages });
     files.rejected = [];
   }
@@ -76,12 +71,9 @@ function getErrorMessage(rejected) {
   return message;
 }
 async function handleSubmit() {
-  console.log("SUBMIT");
   dispatch("submit");
   let url = submit + "?id=" + id;
-  console.log("SUBMIT");
   if (files.accepted.length > 0) {
-    console.log(files);
     const formData = new FormData();
     formData.append("files", "123");
     for (var i = 0; i < files.accepted.length; i++) {
@@ -96,37 +88,37 @@ async function handleSubmit() {
     }
   }
 }
-</script>
-
-<form on:submit|preventDefault={handleSubmit}>
-	{#if model}
-		<!--if model exist  -->
-		<div>
-			<DropZone
-				on:drop={handleFilesSelect}
-				accept={model.accept}
-				multiple={model.multiple}
-				{maxSize}
-			>
-				<b style="font-size:xx-large"><Fa icon={faFileUpload} /></b>
-				<span
-					><b>Drag 'n' drop some files here, or click to select files</b>
-					<b>max file : {model.maxSize} mb</b></span
-				>
-				<p>
-					{#if model.accept}
-						{#each model.accept as ext}
-							{ext} ,
-						{/each}
-					{/if}
-				</p>
-			</DropZone>
-		</div>
-
-		<button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
-	{:else}
-		<!-- while data is not loaded show a loading information -->
-
-		<Spinner />
-	{/if}
-</form>
+</script>
+
+<form on:submit|preventDefault={handleSubmit}>
+	{#if model}
+		<!--if model exist  -->
+		<div>
+			<DropZone
+				on:drop={handleFilesSelect}
+				accept={model.accept}
+				multiple={model.multiple}
+				{maxSize}
+			>
+				<b style="font-size:xx-large"><Fa icon={faFileUpload} /></b>
+				<span
+					><b>Drag 'n' drop some files here, or click to select files</b>
+					<b>max file : {model.maxSize} mb</b></span
+				>
+				<p>
+					{#if model.accept}
+						{#each model.accept as ext}
+							{ext} ,
+						{/each}
+					{/if}
+				</p>
+			</DropZone>
+		</div>
+
+		<button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
+	{:else}
+		<!-- while data is not loaded show a loading information -->
+
+		<Spinner />
+	{/if}
+</form>

package/dist/components/form/MultiSelect.svelte

@@ -20,16 +20,18 @@
 	$: value = null;
 	$: updateTarget(value);
 
+	let container;
+
 	function updateTarget(selection) {
 		//diffrent cases
-		console.log('------');
-		console.log('isComplex',complexSource);
-		console.log('complexTarget',complexTarget);
-		console.log('selection',selection);
+		//console.log('------');
+		//console.log('isComplex',complexSource);
+		//console.log('complexTarget',complexTarget);
+		//console.log('selection',selection);
 
 		//a) source is complex model is simple
 		if (complexSource && !complexTarget && isLoaded) {
-			console.log('a) source is complex model is simple');
+			//console.log('a) source is complex model is simple');
 
 			target = [];
 			for (let i in selection) {
@@ -47,18 +49,18 @@
 
 		if (complexSource && complexTarget && isLoaded)
 		{
-			 console.log("both complex",selection);
+			 //console.log("both complex",selection);
 			 target = selection;
 			
 		}
 
-		// console.log('selection ' + title, selection);
-		// console.log('target ' + title, target);
+		// //console.log('selection ' + title, selection);
+		// //console.log('target ' + title, target);
 	}
 
 	onMount(async () => {
-		//console.log("on mount multiselect");
-		//console.log(source);
+		////console.log("on mount multiselect");
+		////console.log(source);
 
 		//a) source is complex model is simple
 		if (complexSource && !complexTarget) {
@@ -73,7 +75,7 @@
 			if (items.length > 0) {
 				value = items;
 			}
-			//console.log(value);
+			////console.log(value);
 		}
 
 		if (complexSource && complexTarget)
@@ -84,8 +86,8 @@
 
 		//b) simple liust and simple model
 		if (!complexSource && !complexTarget) {
-			//console.log("source", source);
-			//console.log("target",target);
+			////console.log("source", source);
+			////console.log("target",target);
 			isLoaded = true;
 			//set target only if its nit empty
 			if (target != null && target !== undefined && target != '') {
@@ -95,9 +97,10 @@
 	});
 </script>
 
+
 <InputContainer label={title} {feedback} {required}>
 	<Select
-		class="select variant-form-material"
+	 id={title}
 		items={source}
 		{itemId}
 		label = {itemLabel}
@@ -106,3 +109,9 @@
 		placeholder="-- Please select --"
 	/>
 </InputContainer>
+
+<span class="svelte-select-list"/>
+
+<style>
+ .svelte-select-list{color:green}
+</style>

package/dist/css/core.ui.postcss

@@ -7,4 +7,8 @@ h1{
 
 :root {
 	--background:rgb(var(--color-surface-200))
- }
+ }
+
+	[type='text']:focus{
+	--tw-ring-color:#00000;
+}

package/dist/models/Models.d.ts

@@ -49,6 +49,7 @@ export interface ColumnInstructions {
     toStringFn?: (value: any) => string;
     toSortableValueFn?: (value: any) => string | number;
     toFilterableValueFn?: (value: any) => string | number | Date;
+    renderComponent?: typeof SvelteComponent;
 }
 export interface Column {
     header?: string;

package/dist/stores/apistore.js

@@ -15,9 +15,9 @@ passwordStore.subscribe((value) => {
     password = value;
 });
 export function setApiConfig(_host, _user, _pw) {
-    console.log('overwrite settings');
+    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);
+    //console.log('overwrite host',_host);
 }

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "private": false,
   "scripts": {
     "dev": "vite dev",
-    "package": "svelte-package --watch",
+    "package": "svelte-package",
     "build": "vite build",
     "build package": "svelte-kit sync && svelte-package --watch",
     "preview": "vite preview",

package/src/lib/components/Table/Table.svelte

@@ -28,7 +28,7 @@
 		pageSizes = [5, 10, 15, 20]
 	} = config;
 
-	type AccessorType = keyof (typeof $data)[0];
+	type AccessorType = keyof (typeof $data)[number];
 
 	const dispatch = createEventDispatcher();
 	const actionDispatcher = (obj) => dispatch('action', obj);
@@ -67,13 +67,18 @@
 						disableSorting = false
 					} = columns[key];
 
-					const { toSortableValueFn, toFilterableValueFn, toStringFn } = instructions ?? {};
+					const { toSortableValueFn, toFilterableValueFn, toStringFn, renderComponent } =
+						instructions ?? {};
 
 					return table.column({
 						header: header ?? key,
 						accessor: accessor,
-						cell: ({ value }) => {
-							return toStringFn ? toStringFn(value) : value;
+						cell: ({ value, row }) => {
+							return renderComponent
+								? createRender(renderComponent, { value, row })
+								: toStringFn
+								? toStringFn(value)
+								: value;
 						},
 						plugins: {
 							sort: {
@@ -158,12 +163,14 @@
 
 <div class="grid gap-2">
 	<div class="table-container">
-		<input
-			class="input p-2 mb-2 border border-primary-500"
-			type="text"
-			bind:value={$filterValue}
-			placeholder="Search rows..."
-		/>
+		{#if $data.length > 0}
+			<input
+				class="input p-2 mb-2 border border-primary-500"
+				type="text"
+				bind:value={$filterValue}
+				placeholder="Search rows..."
+			/>
+		{/if}
 		<table {...$tableAttrs} class="table table-compact bg-tertiary-200">
 			<thead>
 				{#each $headerRows as headerRow (headerRow.id)}
@@ -209,6 +216,8 @@
 							{/each}
 						</tr>
 					</Subscribe>
+				{:else}
+					<p class="items-center justify-center flex w-full p-10 italic">Nothing to show here.</p>
 				{/each}
 			</thead>
 
@@ -231,6 +240,7 @@
 			</tbody>
 		</table>
 	</div>
-
-	<TablePagination pageConfig={pluginStates.page} {pageSizes} />
+	{#if $data.length > 0}
+		<TablePagination pageConfig={pluginStates.page} {pageSizes} />
+	{/if}
 </div>

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

@@ -1,184 +1,184 @@
-<script lang="ts">
-	import type { FileUploaderModel, FileInfo, Files } from '../../models/Models.js';
-
-	import DropZone from 'svelte-file-dropzone/Dropzone.svelte';
-	import Fa from 'svelte-fa/src/fa.svelte';
-
-	import Spinner from '../page/Spinner.svelte';
-	import { createEventDispatcher } from 'svelte';
-	import { faTrash } from '@fortawesome/free-solid-svg-icons';
-	import { faSave } from '@fortawesome/free-regular-svg-icons';
-	import { faFileUpload } from '@fortawesome/free-solid-svg-icons';
-
-	import { Api } from '../../services/Api.js';
-
-	export let id = 0;
-	export let version = 1;
-
-	import { onMount } from 'svelte';
-
-	// export let description="";
-	// export let status=0;
-
-	//action to load fileupload model
-	export let start = '';
-	//action to save selected file
-	export let submit = '';
-
-	export let context = '';
-
-	export let data: FileUploaderModel | undefined;
-
-	$: model = data;
-	$: submitBt = 'submit';
-
-	let maxSize = 0;
-
-	const dispatch = createEventDispatcher();
-
-	let fx: FileInfo[];
-
-	let files: Files = { accepted: [], rejected: [] };
-	$: files;
-
-	onMount(async () => {
-		console.log('fileupload - OnMount', data);
-
-		if (!data) {
-			load();
-		} else {
-			model = data;
-		}
-
-		if (model) {
-			submitBt += context;
-			maxSize = model.maxSize * 1024 * 1024;
-		}
-	});
-
-	// load modal from server
-	async function load() {
-		let url = start + '?id=' + id + '&version=' + version;
-
-		// load menu froms server
-		const res = await Api.get(url);
-		model = await res.data();
-
-		console.log('fileupload', model);
-	}
-
-	function handleFilesSelect(e: any) {
-		console.log('handleFilesSelect', e);
-		console.log('files', files);
-
-		const { acceptedFiles, fileRejections } = e.detail;
-
-		files.accepted = [...files.accepted, ...acceptedFiles];
-		files.rejected = [...files.rejected, ...fileRejections];
-
-		console.log('acceptedFiles', acceptedFiles);
-		console.log('files.accepted', files.accepted);
-
-		if (fileRejections.length > 0) {
-			//alert("the dropped file is not supported");
-			console.log('the dropped file is not supported.');
-			console.log(files.rejected);
-
-			let messages = [''];
-
-			for (let index = 0; index < fileRejections.length; index++) {
-				const element = fileRejections[index];
-				messages.push(getErrorMessage(element));
-			}
-
-			console.log(messages);
-
-			dispatch('error', { messages });
-			//list up the errors somewhere
-			files.rejected = [];
-		}
-
-		if (acceptedFiles.length > 0) {
-			document.getElementById(submitBt)?.click();
-		}
-	}
-
-	function getErrorMessage(rejected) {
-		let message = '';
-		message = rejected.file.path + ' : ';
-		let errors = rejected.errors;
-		for (let index = 0; index < errors.length; index++) {
-			const error = errors[index];
-			message += error.message;
-		}
-
-		return message;
-	}
-
-	async function handleSubmit() {
-		console.log('SUBMIT');
-
-		dispatch('submit');
-
-		let url = submit + '?id=' + id;
-
-		// console.log(model);
-		// console.log(url);
-		console.log('SUBMIT');
-
-		if (files.accepted.length > 0) {
-			console.log(files);
-
-			const formData = new FormData();
-			formData.append('files', '123');
-			// Looping over all files and add it to FormData object
-			for (var i = 0; i < files.accepted.length; i++) {
-				formData.append(files.accepted[i].name, files.accepted[i]);
-			}
-
-			const response = await Api.post(url, formData);
-
-			if (response.status == 200) {
-				dispatch('submited');
-
-				let message = files.accepted.length + ' is/are uploaded';
-				dispatch('success', { text: message });
-
-				files.accepted = [];
-			}
-		}
-	}
-</script>
-
-<form on:submit|preventDefault={handleSubmit}>
-	{#if model}
-		<!--if model exist  -->
-		<div>
-			<DropZone
-				on:drop={handleFilesSelect}
-				accept={model.accept}
-				multiple={model.multiple}
-				{maxSize}
-			>
-				<b style="font-size:xx-large"><Fa icon={faFileUpload} /></b>
-				<span
-					><b>Drag 'n' drop some files here, or click to select files</b>
-					<b>max file : {model.maxSize} mb</b></span
-				>
-				<p>
-					{#if model.accept}
-						{#each model.accept as ext}
-							{ext} ,
-						{/each}
-					{/if}
-				</p>
-			</DropZone>
-		</div>
-
-		<button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
-	{:else}
-		<!-- while data is not loaded show a loading information -->
-
-		<Spinner />
-	{/if}
-</form>
+<script lang="ts">
+	import type { FileUploaderModel, FileInfo, Files } from '../../models/Models.js';
+
+	import DropZone from 'svelte-file-dropzone/Dropzone.svelte';
+	import Fa from 'svelte-fa/src/fa.svelte';
+
+	import Spinner from '../page/Spinner.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import { faTrash } from '@fortawesome/free-solid-svg-icons';
+	import { faSave } from '@fortawesome/free-regular-svg-icons';
+	import { faFileUpload } from '@fortawesome/free-solid-svg-icons';
+
+	import { Api } from '../../services/Api.js';
+
+	export let id = 0;
+	export let version = 1;
+
+	import { onMount } from 'svelte';
+
+	// export let description="";
+	// export let status=0;
+
+	//action to load fileupload model
+	export let start = '';
+	//action to save selected file
+	export let submit = '';
+
+	export let context = '';
+
+	export let data: FileUploaderModel | undefined;
+
+	$: model = data;
+	$: submitBt = 'submit';
+
+	let maxSize = 0;
+
+	const dispatch = createEventDispatcher();
+
+	let fx: FileInfo[];
+
+	let files: Files = { accepted: [], rejected: [] };
+	$: files;
+
+	onMount(async () => {
+		//console.log('fileupload - OnMount', data);
+
+		if (!data) {
+			load();
+		} else {
+			model = data;
+		}
+
+		if (model) {
+			submitBt += context;
+			maxSize = model.maxSize * 1024 * 1024;
+		}
+	});
+
+	// load modal from server
+	async function load() {
+		let url = start + '?id=' + id + '&version=' + version;
+
+		// load menu froms server
+		const res = await Api.get(url);
+		model = await res.data();
+
+		 console.log('fileupload', model);
+	}
+
+	function handleFilesSelect(e: any) {
+		//console.log('handleFilesSelect', e);
+		console.log('files', files);
+
+		const { acceptedFiles, fileRejections } = e.detail;
+
+		files.accepted = [...files.accepted, ...acceptedFiles];
+		files.rejected = [...files.rejected, ...fileRejections];
+
+		//console.log('acceptedFiles', acceptedFiles);
+		console.log('files.accepted', files.accepted);
+
+		if (fileRejections.length > 0) {
+			//alert("the dropped file is not supported");
+			//console.log('the dropped file is not supported.');
+			console.log(files.rejected);
+
+			let messages = [''];
+
+			for (let index = 0; index < fileRejections.length; index++) {
+				const element = fileRejections[index];
+				messages.push(getErrorMessage(element));
+			}
+
+			//console.log(messages);
+
+			dispatch('error', { messages });
+			//list up the errors somewhere
+			files.rejected = [];
+		}
+
+		if (acceptedFiles.length > 0) {
+			document.getElementById(submitBt)?.click();
+		}
+	}
+
+	function getErrorMessage(rejected) {
+		let message = '';
+		message = rejected.file.path + ' : ';
+		let errors = rejected.errors;
+		for (let index = 0; index < errors.length; index++) {
+			const error = errors[index];
+			message += error.message;
+		}
+
+		return message;
+	}
+
+	async function handleSubmit() {
+		//console.log('SUBMIT');
+
+		dispatch('submit');
+
+		let url = submit + '?id=' + id;
+
+		// //console.log(model);
+		// //console.log(url);
+		//console.log('SUBMIT');
+
+		if (files.accepted.length > 0) {
+			//console.log(files);
+
+			const formData = new FormData();
+			formData.append('files', '123');
+			// Looping over all files and add it to FormData object
+			for (var i = 0; i < files.accepted.length; i++) {
+				formData.append(files.accepted[i].name, files.accepted[i]);
+			}
+
+			const response = await Api.post(url, formData);
+
+			if (response.status == 200) {
+				dispatch('submited');
+
+				let message = files.accepted.length + ' is/are uploaded';
+				dispatch('success', { text: message });
+
+				files.accepted = [];
+			}
+		}
+	}
+</script>
+
+<form on:submit|preventDefault={handleSubmit}>
+	{#if model}
+		<!--if model exist  -->
+		<div>
+			<DropZone
+				on:drop={handleFilesSelect}
+				accept={model.accept}
+				multiple={model.multiple}
+				{maxSize}
+			>
+				<b style="font-size:xx-large"><Fa icon={faFileUpload} /></b>
+				<span
+					><b>Drag 'n' drop some files here, or click to select files</b>
+					<b>max file : {model.maxSize} mb</b></span
+				>
+				<p>
+					{#if model.accept}
+						{#each model.accept as ext}
+							{ext} ,
+						{/each}
+					{/if}
+				</p>
+			</DropZone>
+		</div>
+
+		<button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
+	{:else}
+		<!-- while data is not loaded show a loading information -->
+
+		<Spinner />
+	{/if}
+</form>

package/src/lib/components/form/MultiSelect.svelte

@@ -20,16 +20,18 @@
 	$: value = null;
 	$: updateTarget(value);
 
+	let container;
+
 	function updateTarget(selection) {
 		//diffrent cases
-		console.log('------');
-		console.log('isComplex',complexSource);
-		console.log('complexTarget',complexTarget);
-		console.log('selection',selection);
+		//console.log('------');
+		//console.log('isComplex',complexSource);
+		//console.log('complexTarget',complexTarget);
+		//console.log('selection',selection);
 
 		//a) source is complex model is simple
 		if (complexSource && !complexTarget && isLoaded) {
-			console.log('a) source is complex model is simple');
+			//console.log('a) source is complex model is simple');
 
 			target = [];
 			for (let i in selection) {
@@ -47,18 +49,18 @@
 
 		if (complexSource && complexTarget && isLoaded)
 		{
-			 console.log("both complex",selection);
+			 //console.log("both complex",selection);
 			 target = selection;
 			
 		}
 
-		// console.log('selection ' + title, selection);
-		// console.log('target ' + title, target);
+		// //console.log('selection ' + title, selection);
+		// //console.log('target ' + title, target);
 	}
 
 	onMount(async () => {
-		//console.log("on mount multiselect");
-		//console.log(source);
+		////console.log("on mount multiselect");
+		////console.log(source);
 
 		//a) source is complex model is simple
 		if (complexSource && !complexTarget) {
@@ -73,7 +75,7 @@
 			if (items.length > 0) {
 				value = items;
 			}
-			//console.log(value);
+			////console.log(value);
 		}
 
 		if (complexSource && complexTarget)
@@ -84,8 +86,8 @@
 
 		//b) simple liust and simple model
 		if (!complexSource && !complexTarget) {
-			//console.log("source", source);
-			//console.log("target",target);
+			////console.log("source", source);
+			////console.log("target",target);
 			isLoaded = true;
 			//set target only if its nit empty
 			if (target != null && target !== undefined && target != '') {
@@ -95,9 +97,10 @@
 	});
 </script>
 
+
 <InputContainer label={title} {feedback} {required}>
 	<Select
-		class="select variant-form-material"
+	 id={title}
 		items={source}
 		{itemId}
 		label = {itemLabel}
@@ -106,3 +109,9 @@
 		placeholder="-- Please select --"
 	/>
 </InputContainer>
+
+<span class="svelte-select-list"/>
+
+<style>
+ .svelte-select-list{color:green}
+</style>

package/src/lib/css/core.ui.postcss

@@ -7,4 +7,8 @@ h1{
 
 :root {
 	--background:rgb(var(--color-surface-200))
- }
+ }
+
+	[type='text']:focus{
+	--tw-ring-color:#00000;
+}

package/src/lib/models/Models.ts

@@ -3,13 +3,11 @@ import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
 import type { Writable } from 'svelte/store';
 
 // page
-export interface Link
-{
-	label:string,
-	url:string
+export interface Link {
+	label: string;
+	url: string;
 }
 
-
 // Form
 export interface Input {
 	id: string;
@@ -18,7 +16,7 @@ export interface Input {
 	invalid: boolean;
 	valid: boolean;
 	required: boolean;
-	placeholder:string;
+	placeholder: string;
 }
 
 export interface FileInfo {
@@ -61,6 +59,7 @@ export interface ColumnInstructions {
 	toStringFn?: (value: any) => string;
 	toSortableValueFn?: (value: any) => string | number;
 	toFilterableValueFn?: (value: any) => string | number | Date;
+	renderComponent?: typeof SvelteComponent;
 }
 
 // Table column type
@@ -88,15 +87,14 @@ export interface TableConfig<T> {
 	optionsComponent?: typeof SvelteComponent;
 }
 
-
 // lists
 export interface KvP {
- id: number;
- text: string;
+	id: number;
+	text: string;
 }
 
 export interface ListItem {
- id: number;
- text: string;
- group: string;
-}
+	id: number;
+	text: string;
+	group: string;
+}

package/src/lib/stores/apistore.ts

@@ -1,31 +1,32 @@
-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));
-
-	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);
+}