@bexis2/bexis2-core-ui 0.0.22 → 0.0.23

package/README.md

@@ -1,38 +1,18 @@
-# create-svelte
+# bexis-core-ui
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+## new in version 0.0.23
 
-## Creating a project
+## Updates
+- update bexis 2 theme
 
-If you're seeing this, you've probably already done this step. Congrats!
+## Adds 
+- Checkbox
+- CheckboxKVPList 
+- CheckboxList 
+- DateInput 
+- DropdownKVP 
+- MultiSelect 
+- NumberInput
+- TextArea
+- TextInput
 
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

package/dist/components/{File → file}/FileUploader.svelte

@@ -1,6 +1,6 @@
 <script>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/dist/components/form/Checkbox.svelte

@@ -0,0 +1,25 @@
+<script>import InputContainer from "./InputContainer.svelte";
+export let id = "";
+export let label = "";
+export let checked = false;
+export let valid;
+export let invalid;
+export let required;
+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/dist/components/form/Checkbox.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        label?: string | undefined;
+        checked?: any;
+        valid: boolean;
+        invalid: boolean;
+        required: boolean;
+        feedback: [];
+    };
+    events: {
+        input: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CheckboxProps = typeof __propDef.props;
+export type CheckboxEvents = typeof __propDef.events;
+export type CheckboxSlots = typeof __propDef.slots;
+export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
+}
+export {};

package/dist/components/form/CheckboxKvPList.svelte

@@ -0,0 +1,20 @@
+<script>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/dist/components/form/CheckboxKvPList.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        source: any;
+        target: any;
+        title: any;
+        description?: string | undefined;
+        key: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CheckboxKvPListProps = typeof __propDef.props;
+export type CheckboxKvPListEvents = typeof __propDef.events;
+export type CheckboxKvPListSlots = typeof __propDef.slots;
+export default class CheckboxKvPList extends SvelteComponentTyped<CheckboxKvPListProps, CheckboxKvPListEvents, CheckboxKvPListSlots> {
+}
+export {};

package/dist/components/form/CheckboxList.svelte

@@ -0,0 +1,18 @@
+<script>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/dist/components/form/CheckboxList.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        source: any;
+        target: any;
+        title: any;
+        description?: string | undefined;
+        key: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CheckboxListProps = typeof __propDef.props;
+export type CheckboxListEvents = typeof __propDef.events;
+export type CheckboxListSlots = typeof __propDef.slots;
+export default class CheckboxList extends SvelteComponentTyped<CheckboxListProps, CheckboxListEvents, CheckboxListSlots> {
+}
+export {};

package/dist/components/form/DateInput.svelte

@@ -0,0 +1,22 @@
+<script>import InputContainer from "./InputContainer.svelte";
+export let id = "";
+export let label = "";
+export let value = "";
+export let valid;
+export let invalid;
+export let required;
+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/dist/components/form/DateInput.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        label?: string | undefined;
+        value?: string | undefined;
+        valid: boolean;
+        invalid: boolean;
+        required: boolean;
+        feedback: [];
+    };
+    events: {
+        input: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DateInputProps = typeof __propDef.props;
+export type DateInputEvents = typeof __propDef.events;
+export type DateInputSlots = typeof __propDef.slots;
+export default class DateInput extends SvelteComponentTyped<DateInputProps, DateInputEvents, DateInputSlots> {
+}
+export {};

package/dist/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/dist/components/form/DropdownKvP.svelte.d.ts

@@ -0,0 +1,43 @@
+/** @typedef {typeof __propDef.props}  DropdownKvPProps */
+/** @typedef {typeof __propDef.events}  DropdownKvPEvents */
+/** @typedef {typeof __propDef.slots}  DropdownKvPSlots */
+export default class DropdownKvP extends SvelteComponentTyped<{
+    id: any;
+    source: any;
+    target: any;
+    title: any;
+    valid: any;
+    invalid: any;
+    feedback: any;
+    required: any;
+}, {
+    change: Event;
+    select: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DropdownKvPProps = typeof __propDef.props;
+export type DropdownKvPEvents = typeof __propDef.events;
+export type DropdownKvPSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: any;
+        source: any;
+        target: any;
+        title: any;
+        valid: any;
+        invalid: any;
+        feedback: any;
+        required: any;
+    };
+    events: {
+        change: Event;
+        select: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/form/InputContainer.svelte

@@ -0,0 +1,23 @@
+<script>export let label = "";
+export let required;
+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/dist/components/form/InputContainer.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        required: boolean;
+        feedback: [];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type InputContainerProps = typeof __propDef.props;
+export type InputContainerEvents = typeof __propDef.events;
+export type InputContainerSlots = typeof __propDef.slots;
+export default class InputContainer extends SvelteComponentTyped<InputContainerProps, InputContainerEvents, InputContainerSlots> {
+}
+export {};

package/dist/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/dist/components/form/MultiSelect.svelte.d.ts

@@ -0,0 +1,41 @@
+/** @typedef {typeof __propDef.props}  MultiSelectProps */
+/** @typedef {typeof __propDef.events}  MultiSelectEvents */
+/** @typedef {typeof __propDef.slots}  MultiSelectSlots */
+export default class MultiSelect extends SvelteComponentTyped<{
+    target: any;
+    source: any;
+    title: any;
+    required?: boolean | undefined;
+    label?: string | undefined;
+    feedback?: any[] | undefined;
+    itemId?: string | undefined;
+    isMulti?: boolean | undefined;
+    isComplex?: boolean | undefined;
+    isTargetComplex?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MultiSelectProps = typeof __propDef.props;
+export type MultiSelectEvents = typeof __propDef.events;
+export type MultiSelectSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        target: any;
+        source: any;
+        title: any;
+        required?: boolean | undefined;
+        label?: string | undefined;
+        feedback?: any[] | undefined;
+        itemId?: string | undefined;
+        isMulti?: boolean | undefined;
+        isComplex?: boolean | undefined;
+        isTargetComplex?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/form/NumberInput.svelte

@@ -0,0 +1,22 @@
+<script>import InputContainer from "./InputContainer.svelte";
+export let id = "";
+export let label = "";
+export let value = "";
+export let valid;
+export let invalid;
+export let required;
+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/dist/components/form/NumberInput.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        label?: string | undefined;
+        value?: string | undefined;
+        valid: boolean;
+        invalid: boolean;
+        required: boolean;
+        feedback: [];
+    };
+    events: {
+        input: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NumberInputProps = typeof __propDef.props;
+export type NumberInputEvents = typeof __propDef.events;
+export type NumberInputSlots = typeof __propDef.slots;
+export default class NumberInput extends SvelteComponentTyped<NumberInputProps, NumberInputEvents, NumberInputSlots> {
+}
+export {};

package/dist/components/form/TextArea.svelte

@@ -0,0 +1,22 @@
+<script>import InputContainer from "./InputContainer.svelte";
+export let id = "";
+export let label = "";
+export let value = "";
+export let type = "";
+export let valid;
+export let invalid;
+export let required;
+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/dist/components/form/TextArea.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        label?: string | undefined;
+        value?: string | undefined;
+        type?: string | undefined;
+        valid: boolean;
+        invalid: boolean;
+        required: boolean;
+        feedback: [];
+    };
+    events: {
+        input: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TextAreaProps = typeof __propDef.props;
+export type TextAreaEvents = typeof __propDef.events;
+export type TextAreaSlots = typeof __propDef.slots;
+export default class TextArea extends SvelteComponentTyped<TextAreaProps, TextAreaEvents, TextAreaSlots> {
+}
+export {};

package/dist/components/form/TextInput.svelte

@@ -0,0 +1,25 @@
+<script>import InputContainer from "./InputContainer.svelte";
+export let id = "";
+export let label = "";
+export let value = "";
+export let valid;
+export let invalid;
+export let required;
+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/dist/components/form/TextInput.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        label?: string | undefined;
+        value?: string | undefined;
+        valid: boolean;
+        invalid: boolean;
+        required: boolean;
+        feedback: [];
+    };
+    events: {
+        input: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TextInputProps = typeof __propDef.props;
+export type TextInputEvents = typeof __propDef.events;
+export type TextInputSlots = typeof __propDef.slots;
+export default class TextInput extends SvelteComponentTyped<TextInputProps, TextInputEvents, TextInputSlots> {
+}
+export {};

package/dist/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)]"