@bexis2/bexis2-core-ui 0.0.23 → 0.0.26

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

@@ -1,52 +1,44 @@
-<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>
-
+<script>
+	import InputContainer from './InputContainer.svelte';
+
+	export let id;
+	export let source;
+	export let target;
+	export let title;
+	export let valid = false;
+	export let invalid = false;
+	export let feedback = [''];
+	export let required = false;
+
+	$: 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

@@ -1,27 +1,22 @@
-<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>
- 
- 
- 
+<script lang="ts">
+	export let label: string = '';
+	export let required: boolean;
+	export let feedback: string[];
+</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

@@ -1,101 +1,91 @@
-<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>
- 
-
+<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
+		console.log('------');
+
+		//a) source is complex model is simple
+		if (isComplex && !isTargetComplex && isLoaded) {
+			console.log('a) source is complex model is simple');
+
+			target = [];
+			for (let i in selection) {
+				let item = selection[i];
+				target.push(item[itemId]);
+			}
+		}
+
+		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 --"
+	/>
+</InputContainer>

package/src/lib/components/form/NumberInput.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="number"
-   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="number"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:value
+		on:input
+	/>
+</InputContainer>

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

@@ -1,28 +1,23 @@
-<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>
-
-
+<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}>
+	<textarea
+		{id}
+		class="textarea variant-form-material"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:value
+		on:input
+	/>
+</InputContainer>

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

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

package/src/lib/components/spinner/Spinner.svelte

@@ -1,8 +1,9 @@
-<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] 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)]"
-    >Loading...</span
-  >
-</div>
+<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] 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)]"
+		>Loading...</span
+	>
+</div>

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

@@ -1,2 +1,5 @@
-/*place global styles here */
-html, body { @apply h-full; }
+/*place global styles here */
+html,
+body {
+	@apply h-full;
+}