@bexis2/bexis2-core-ui 0.0.23 → 0.0.26

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

@@ -1,217 +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 '../spinner/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 '../spinner/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/Checkbox.svelte

@@ -1,32 +1,24 @@
-<script lang="ts">
-
- import InputContainer from "./InputContainer.svelte";
- 
- export let id:string = "";
- export let label:string = "";
- export let checked:bool = false;
-
- 
- export let valid:boolean;
- export let invalid:boolean;
- export let required:boolean;
- export let feedback:[];
- 
- 
- </script>
- 
- <InputContainer {label} {feedback} {required}>
-   <input
-   {id}
-   class="input variant-form-material" 
-   type=checkbox
-   class:input-success="{valid}" 
-   class:input-error="{invalid}" 
-   bind:checked={checked} 
-   on:input
-   />
- </InputContainer>
- 
- 
- 
- 
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+
+	export let id: string = '';
+	export let label: string = '';
+	export let checked: bool = false;
+
+	export let valid: boolean;
+	export let invalid: boolean;
+	export let required: boolean;
+	export let feedback: [];
+</script>
+
+<InputContainer {label} {feedback} {required}>
+	<input
+		{id}
+		class="input variant-form-material"
+		type="checkbox"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:checked
+		on:input
+	/>
+</InputContainer>

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

@@ -1,24 +1,27 @@
-<script lang="ts">
-  
-  import InputContainer from "./InputContainer.svelte";
-
-  export let source;
-  export let target;
-  export let title;
-  export let description="";
-  export let key;
-
-  let required = false;
-  let feedback:[];
-</script>
-
-<InputContainer label={title} {feedback} {required}>
-  {#each source as item}
-    <label class="flex items-center space-x-2" for="{key}">
-      <input class="checkbox" type="checkbox" bind:group={target} checked={item.key} />
-      <p>{item.value}</p>
-    </label>
-  {/each}
-</InputContainer>
-
- 
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+
+	export let source;
+	export let target;
+	export let title;
+	export let description = '';
+	export let key;
+
+	let required = false;
+	let feedback: [];
+</script>
+
+<InputContainer label={title} {feedback} {required}>
+	{#each source as item}
+		<label class="flex items-center space-x-2" for={key}>
+			<input
+				class="checkbox"
+				type="checkbox"
+				bind:group={target}
+				checked={item.key}
+				value={item.key}
+			/>
+			<p>{item.value}</p>
+		</label>
+	{/each}
+</InputContainer>

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

@@ -1,22 +1,21 @@
-<script lang="ts">
-  
-  import InputContainer from "./InputContainer.svelte";
-
-  export let source;
-  export let target;
-  export let title;
-  export let description="";
-  export let key;
-
-  let required = false;
-  let feedback:[];
-</script>
-
-<InputContainer label={title} {feedback} {required}>
-  {#each source as item}
-    <label class="flex items-center space-x-2" for="{key}">
-      <input class="checkbox"type=checkbox bind:group={target} value={item}/>
-      <p>{item}</p>
-    </label>
-  {/each}
-</InputContainer>
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+
+	export let source;
+	export let target;
+	export let title;
+	export let description = '';
+	export let key;
+
+	let required = false;
+	let feedback: [];
+</script>
+
+<InputContainer label={title} {feedback} {required}>
+	{#each source as item}
+		<label class="flex items-center space-x-2" for={key}>
+			<input class="checkbox" type="checkbox" bind:group={target} value={item} />
+			<p>{item}</p>
+		</label>
+	{/each}
+</InputContainer>

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

@@ -1,30 +1,24 @@
-<script lang="ts">
-
- import InputContainer from "./InputContainer.svelte";
- 
- 
- export let id:string = "";
- export let label:string = "";
- export let value:string = "";
- 
- export let valid:boolean;
- export let invalid:boolean;
- export let required:boolean;
- export let feedback:[];
- 
- 
- 
- </script>
- 
- <InputContainer {label} {feedback} {required}>
-   <input
-   {id}
-   class="input variant-form-material" 
-   type="date"
-   class:input-success="{valid}" 
-   class:input-error="{invalid}" 
-   bind:value={value} 
-   on:input
-   />
- </InputContainer>
- 
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+
+	export let id: string = '';
+	export let label: string = '';
+	export let value: string = '';
+
+	export let valid: boolean = false;
+	export let invalid: boolean = false;
+	export let required: boolean = false;
+	export let feedback: string[] = [''];
+</script>
+
+<InputContainer {label} {feedback} {required}>
+	<input
+		{id}
+		class="input variant-form-material"
+		type="date"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:value
+		on:input
+	/>
+</InputContainer>