@bexis2/bexis2-core-ui 0.0.22 → 0.0.23

package/dist/css/themes/theme-bexis2.css

@@ -82,15 +82,17 @@
 	--color-error-700: 191 0 0; /* ⬅ #bf0000 */
 	--color-error-800: 153 0 0; /* ⬅ #990000 */
 	--color-error-900: 125 0 0; /* ⬅ #7d0000 */
-	/* surface | #FFFFFF */
-	--color-surface-50: 255 255 255; /* ⬅ #ffffff */
-	--color-surface-100: 255 255 255; /* ⬅ #ffffff */
-	--color-surface-200: 255 255 255; /* ⬅ #ffffff */
-	--color-surface-300: 255 255 255; /* ⬅ #ffffff */
-	--color-surface-400: 255 255 255; /* ⬅ #ffffff */
-	--color-surface-500: 255 255 255; /* ⬅ #FFFFFF */
-	--color-surface-600: 230 230 230; /* ⬅ #e6e6e6 */
-	--color-surface-700: 191 191 191; /* ⬅ #bfbfbf */
+	/* 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 */

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,10 +1,25 @@
 // 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 Spinner from './components/Spinner/Spinner.svelte';
-export { ListView, TableView, FileInfo, FileIcon, FileUploader, Spinner };
+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';
+//Form
+export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiSelect, NumberInput, TextArea, TextInput };
+//File
+export { FileInfo, FileIcon, FileUploader };
+//others
+export { ListView, TableView, Spinner };
+//Api
 export { Api } from './services/Api.js';
 export { host, username, password, setApiConfig } from './stores/apistore.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "private": false,
   "scripts": {
     "dev": "vite dev",
@@ -25,7 +25,6 @@
     "@sveltejs/adapter-static": "^2.0.2",
     "@sveltejs/kit": "^1.5.0",
     "@sveltejs/package": "^2.0.2",
-    "svelte-fa": "^3.0.3",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "autoprefixer": "^10.4.14",
@@ -37,6 +36,7 @@
     "prettier-plugin-svelte": "^2.8.1",
     "svelte": "^3.54.0",
     "svelte-check": "^3.0.1",
+    "svelte-fa": "^3.0.3",
     "tailwindcss": "^3.3.2",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
@@ -62,7 +62,8 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "axios": "^1.2.1",
     "svelte": "^3.54.0",
-    "svelte-file-dropzone": "^2.0.1"
+    "svelte-file-dropzone": "^2.0.1",
+    "svelte-select": "^5.6.0"
   },
   "author": "David Schöne",
   "license": "ISC",

package/src/lib/components/{File → file}/FileUploader.svelte

@@ -6,7 +6,7 @@ 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 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'

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

@@ -0,0 +1,32 @@
+<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>
+ 
+ 
+ 
+ 

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

@@ -0,0 +1,24 @@
+<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>
+
+ 

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

@@ -0,0 +1,22 @@
+<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

@@ -0,0 +1,30 @@
+<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>
+ 

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

@@ -0,0 +1,52 @@
+<script>
+
+import InputContainer from "./InputContainer.svelte";
+
+
+ export let id;
+ export let source;
+ export let target;
+ export let title;
+ export let valid;
+ export let invalid;
+ export let feedback;
+ export let required;
+
+$:selected = null;
+
+$:updatedSelectedValue(target);
+$:updatedTarget(selected);
+
+function updatedSelectedValue(selection)
+{
+  if(selection!=null)
+  {
+    selected = selection.id
+  }
+}
+
+function updatedTarget(id)
+{
+  target = source.find(opt => opt.id === id)
+}
+
+</script>
+
+
+<InputContainer label={title} {feedback} {required}>
+ <select 
+  {id} 
+  class="select variant-form-material"
+  class:input-success="{valid}" 
+  class:input-error="{invalid}" 
+  bind:value={selected}
+  on:change
+  on:select
+ >
+  <option value={null}>-- Please select --</option>
+  {#each source as e}
+      <option value={e.id} >{e.text}</option>
+   {/each}
+ </select>
+</InputContainer>
+

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+
+ export let label:string = "";
+ export let required:boolean;
+ export let feedback:[];
+ 
+ 
+ </script>
+ 
+ <label class="label">
+  <span>{label} 
+   {#if required} <span class="text-sm text-red-600">*</span> {/if}
+  </span>
+   <slot/>
+   {#if feedback}
+    <span class="text-sm text-error-600">
+      <ul>
+        {#each feedback as message}
+          <li>{message}</li>
+        {/each}
+      </ul>
+    </span>
+   {/if}
+ </label>
+ 
+ 
+ 

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

@@ -0,0 +1,101 @@
+<script >
+  import InputContainer from "./InputContainer.svelte";
+
+  import Select from 'svelte-select';
+  import { onMount } from 'svelte'; 
+ 
+  export let source;
+  export let target;
+  export let title;
+  export let itemId ="value";
+  export let label = "label";
+  export let isMulti = true;
+  export let isComplex = false;
+  export let isTargetComplex = false;
+  export let required = false;
+  export let feedback=[];
+
+  let isLoaded = false;
+ 
+
+  $:value = null;
+  $:updateTarget(value);
+ 
+  function updateTarget(selection){
+    //diffrent cases
+    //onsole.log("------");
+ 
+    //a) source is complex model is simple
+    if(isComplex && !isTargetComplex && isLoaded)
+    {
+      target = [];
+      for (let i in selection) {
+          let item = selection[i];
+          target.push(item.key)
+        }
+    }
+
+    if(!isComplex && !isTargetComplex && isLoaded)
+    {
+      target = [];
+      for (let i in selection) {
+          target.push(selection[i].value)
+        }
+    }
+    //console.log("selection "+title,selection);
+    //console.log("target "+title,target);
+  }
+ 
+  onMount(async () => {
+
+    //console.log("on mount multiselect");
+    //console.log(source);
+
+    //a) source is complex model is simple
+    if(isComplex && !isTargetComplex)
+    {
+      let items = [];
+      // event.detail will be null unless isMulti is true and user has removed a single item
+      for (let i in target) {
+          let t = target[i];
+          items.push(source.find(item=> item.key===t));
+      }
+ 
+      isLoaded = true;
+      if(items.length>0){value = items;}
+      //console.log(value);
+    }
+
+    //b) simple liust and simple model 
+    if(!isComplex && !isTargetComplex)
+    {
+      //console.log("source", source);
+      //console.log("target",target);
+      isLoaded = true;
+      //set target only if its nit empty
+      if(target!=null && target !== undefined && target != ""){
+        value = target;
+      }
+    }
+  })
+ 
+ 
+ </script>
+ 
+
+<InputContainer label={title} {feedback} {required}>
+
+<Select 
+    class="select variant-form-material"
+    items={source}
+    {itemId}
+    {label}
+    multiple={isMulti}
+    bind:value
+    placeholder="-- Please select --"
+
+    >
+  </Select>
+</InputContainer>
+ 
+

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

@@ -0,0 +1,30 @@
+<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="number"
+   class:input-success="{valid}" 
+   class:input-error="{invalid}" 
+   bind:value={value} 
+   on:input
+   />
+ </InputContainer>
+ 

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

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

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

@@ -0,0 +1,33 @@
+<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="text"
+  class:input-success="{valid}" 
+  class:input-error="{invalid}" 
+  bind:value={value} 
+  on:input
+  />
+</InputContainer>
+
+
+
+

package/src/lib/components/{Spinner → spinner}/Spinner.svelte

@@ -1,5 +1,5 @@
 <div
-  class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
+  class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] text-secundary-500"
   role="status">
   <span
     class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"

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

@@ -82,15 +82,17 @@
 	--color-error-700: 191 0 0; /* ⬅ #bf0000 */
 	--color-error-800: 153 0 0; /* ⬅ #990000 */
 	--color-error-900: 125 0 0; /* ⬅ #7d0000 */
-	/* surface | #FFFFFF */
-	--color-surface-50: 255 255 255; /* ⬅ #ffffff */
-	--color-surface-100: 255 255 255; /* ⬅ #ffffff */
-	--color-surface-200: 255 255 255; /* ⬅ #ffffff */
-	--color-surface-300: 255 255 255; /* ⬅ #ffffff */
-	--color-surface-400: 255 255 255; /* ⬅ #ffffff */
-	--color-surface-500: 255 255 255; /* ⬅ #FFFFFF */
-	--color-surface-600: 230 230 230; /* ⬅ #e6e6e6 */
-	--color-surface-700: 191 191 191; /* ⬅ #bfbfbf */
+	/* 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 */

package/src/lib/index.ts

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