@bexis2/bexis2-core-ui 0.4.67 → 0.4.68

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/README.md +4 -0
  2. package/dist/__package_types_tmp__/components/form/Checkbox.svelte.d.ts +1 -0
  3. package/dist/__package_types_tmp__/components/form/CheckboxKvPList.svelte.d.ts +1 -0
  4. package/dist/__package_types_tmp__/components/form/CheckboxList.svelte.d.ts +2 -0
  5. package/dist/__package_types_tmp__/components/form/DateInput.svelte.d.ts +1 -0
  6. package/dist/__package_types_tmp__/components/form/Dropdown.svelte.d.ts +2 -0
  7. package/dist/__package_types_tmp__/components/form/DropdownKvP.svelte.d.ts +2 -0
  8. package/dist/__package_types_tmp__/components/form/InputContainer.svelte.d.ts +1 -0
  9. package/dist/__package_types_tmp__/components/form/MultiSelect.svelte.d.ts +2 -0
  10. package/dist/__package_types_tmp__/components/form/NumberInput.svelte.d.ts +1 -0
  11. package/dist/__package_types_tmp__/components/form/TextArea.svelte.d.ts +1 -0
  12. package/dist/__package_types_tmp__/components/form/TextInput.svelte.d.ts +1 -0
  13. package/dist/components/form/Checkbox.svelte +2 -1
  14. package/dist/components/form/Checkbox.svelte.d.ts +1 -0
  15. package/dist/components/form/CheckboxKvPList.svelte +2 -2
  16. package/dist/components/form/CheckboxKvPList.svelte.d.ts +1 -0
  17. package/dist/components/form/CheckboxList.svelte +3 -3
  18. package/dist/components/form/CheckboxList.svelte.d.ts +2 -0
  19. package/dist/components/form/DateInput.svelte +2 -1
  20. package/dist/components/form/DateInput.svelte.d.ts +1 -0
  21. package/dist/components/form/Dropdown.svelte +2 -1
  22. package/dist/components/form/Dropdown.svelte.d.ts +2 -0
  23. package/dist/components/form/DropdownKvP.svelte +2 -1
  24. package/dist/components/form/DropdownKvP.svelte.d.ts +2 -0
  25. package/dist/components/form/InputContainer.svelte +24 -11
  26. package/dist/components/form/InputContainer.svelte.d.ts +1 -0
  27. package/dist/components/form/MultiSelect.svelte +3 -1
  28. package/dist/components/form/MultiSelect.svelte.d.ts +2 -0
  29. package/dist/components/form/NumberInput.svelte +2 -1
  30. package/dist/components/form/NumberInput.svelte.d.ts +1 -0
  31. package/dist/components/form/TextArea.svelte +2 -1
  32. package/dist/components/form/TextArea.svelte.d.ts +1 -0
  33. package/dist/components/form/TextInput.svelte +2 -1
  34. package/dist/components/form/TextInput.svelte.d.ts +1 -0
  35. package/package.json +1 -1
  36. package/src/lib/components/form/Checkbox.svelte +2 -1
  37. package/src/lib/components/form/CheckboxKvPList.svelte +3 -2
  38. package/src/lib/components/form/CheckboxList.svelte +3 -3
  39. package/src/lib/components/form/DateInput.svelte +2 -1
  40. package/src/lib/components/form/Dropdown.svelte +2 -1
  41. package/src/lib/components/form/DropdownKvP.svelte +2 -1
  42. package/src/lib/components/form/InputContainer.svelte +25 -11
  43. package/src/lib/components/form/MultiSelect.svelte +3 -1
  44. package/src/lib/components/form/NumberInput.svelte +2 -1
  45. package/src/lib/components/form/TextArea.svelte +2 -1
  46. package/src/lib/components/form/TextInput.svelte +2 -1
package/README.md CHANGED
@@ -1,4 +1,8 @@
1
1
  # bexis-core-ui
2
+ ## 0.4.68
3
+ - form
4
+ - add description to input container, only visible if description added to the component
5
+
2
6
  ## 0.4.67
3
7
  - dropdown
4
8
  - export dropdown
package/dist/__package_types_tmp__/components/form/Checkbox.svelte.d.ts CHANGED
@@ -8,6 +8,7 @@ declare const __propDef: {
8
8
  invalid: boolean;
9
9
  required: boolean;
10
10
  feedback: [];
11
+ description?: string;
11
12
  };
12
13
  events: {
13
14
  input: Event;
package/dist/__package_types_tmp__/components/form/CheckboxKvPList.svelte.d.ts CHANGED
@@ -8,6 +8,7 @@ declare const __propDef: {
8
8
  description?: string;
9
9
  key: any;
10
10
  help?: boolean;
11
+ feedback: [];
11
12
  };
12
13
  events: {
13
14
  [evt: string]: CustomEvent<any>;
package/dist/__package_types_tmp__/components/form/CheckboxList.svelte.d.ts CHANGED
@@ -6,6 +6,8 @@ declare const __propDef: {
6
6
  title: any;
7
7
  description?: string;
8
8
  key: any;
9
+ required?: boolean;
10
+ feedback: [];
9
11
  };
10
12
  events: {
11
13
  [evt: string]: CustomEvent<any>;
package/dist/__package_types_tmp__/components/form/DateInput.svelte.d.ts CHANGED
@@ -10,6 +10,7 @@ declare const __propDef: {
10
10
  feedback?: string[];
11
11
  help?: boolean;
12
12
  disabled?: boolean;
13
+ description?: string;
13
14
  };
14
15
  events: {
15
16
  input: Event;
package/dist/__package_types_tmp__/components/form/Dropdown.svelte.d.ts CHANGED
@@ -6,6 +6,7 @@ export default class Dropdown extends SvelteComponent<{
6
6
  target: any;
7
7
  title: any;
8
8
  source: any;
9
+ description?: string | undefined;
9
10
  invalid?: boolean | undefined;
10
11
  feedback?: string[] | undefined;
11
12
  required?: boolean | undefined;
@@ -28,6 +29,7 @@ declare const __propDef: {
28
29
  target: any;
29
30
  title: any;
30
31
  source: any;
32
+ description?: string | undefined;
31
33
  invalid?: boolean | undefined;
32
34
  feedback?: string[] | undefined;
33
35
  required?: boolean | undefined;
package/dist/__package_types_tmp__/components/form/DropdownKvP.svelte.d.ts CHANGED
@@ -6,6 +6,7 @@ export default class DropdownKvP extends SvelteComponent<{
6
6
  target: any;
7
7
  title: any;
8
8
  source: any;
9
+ description?: string | undefined;
9
10
  invalid?: boolean | undefined;
10
11
  feedback?: string[] | undefined;
11
12
  required?: boolean | undefined;
@@ -29,6 +30,7 @@ declare const __propDef: {
29
30
  target: any;
30
31
  title: any;
31
32
  source: any;
33
+ description?: string | undefined;
32
34
  invalid?: boolean | undefined;
33
35
  feedback?: string[] | undefined;
34
36
  required?: boolean | undefined;
package/dist/__package_types_tmp__/components/form/InputContainer.svelte.d.ts CHANGED
@@ -6,6 +6,7 @@ declare const __propDef: {
6
6
  required: boolean;
7
7
  feedback: string[];
8
8
  help?: boolean;
9
+ description?: string;
9
10
  };
10
11
  events: {
11
12
  [evt: string]: CustomEvent<any>;
package/dist/__package_types_tmp__/components/form/MultiSelect.svelte.d.ts CHANGED
@@ -6,6 +6,7 @@ export default class MultiSelect extends SvelteComponent<{
6
6
  target: any;
7
7
  title: any;
8
8
  source: any;
9
+ description?: string | undefined;
9
10
  invalid?: boolean | undefined;
10
11
  feedback?: string[] | undefined;
11
12
  required?: boolean | undefined;
@@ -45,6 +46,7 @@ declare const __propDef: {
45
46
  target: any;
46
47
  title: any;
47
48
  source: any;
49
+ description?: string | undefined;
48
50
  invalid?: boolean | undefined;
49
51
  feedback?: string[] | undefined;
50
52
  required?: boolean | undefined;
package/dist/__package_types_tmp__/components/form/NumberInput.svelte.d.ts CHANGED
@@ -11,6 +11,7 @@ declare const __propDef: {
11
11
  placeholder?: string;
12
12
  help?: boolean;
13
13
  disabled?: boolean;
14
+ description?: string;
14
15
  };
15
16
  events: {
16
17
  input: Event;
package/dist/__package_types_tmp__/components/form/TextArea.svelte.d.ts CHANGED
@@ -11,6 +11,7 @@ declare const __propDef: {
11
11
  placeholder?: string;
12
12
  help?: boolean;
13
13
  disabled?: boolean;
14
+ description?: string;
14
15
  };
15
16
  events: {
16
17
  input: Event;
package/dist/__package_types_tmp__/components/form/TextInput.svelte.d.ts CHANGED
@@ -11,6 +11,7 @@ declare const __propDef: {
11
11
  placeholder?: string;
12
12
  help?: boolean;
13
13
  disabled?: boolean;
14
+ description?: string;
14
15
  };
15
16
  events: {
16
17
  input: Event;
package/dist/components/form/Checkbox.svelte CHANGED
@@ -6,9 +6,10 @@ export let valid;
6
6
  export let invalid;
7
7
  export let required;
8
8
  export let feedback;
9
+ export let description = "";
9
10
  </script>
10
11
 
11
- <InputContainer {label} {feedback} {required}>
12
+ <InputContainer {label} {feedback} {required} {description}>
12
13
  <input
13
14
  {id}
14
15
  class="input variant-form-material bg-zinc-50 dark:bg-zinc-50"
package/dist/components/form/Checkbox.svelte.d.ts CHANGED
@@ -8,6 +8,7 @@ declare const __propDef: {
8
8
  invalid: boolean;
9
9
  required: boolean;
10
10
  feedback: [];
11
+ description?: string;
11
12
  };
12
13
  events: {
13
14
  input: Event;
package/dist/components/form/CheckboxKvPList.svelte CHANGED
@@ -7,10 +7,10 @@ export let description = "";
7
7
  export let key;
8
8
  export let help = false;
9
9
  let required = false;
10
- let feedback;
10
+ export let feedback;
11
11
  </script>
12
12
 
13
- <InputContainer {id} label={title} {feedback} {required} {help}>
13
+ <InputContainer {id} label={title} {feedback} {required} {help} {description}>
14
14
  {#each source as item}
15
15
  <label class="flex items-center space-x-2" for={item.key}>
16
16
  <input
package/dist/components/form/CheckboxKvPList.svelte.d.ts CHANGED
@@ -8,6 +8,7 @@ declare const __propDef: {
8
8
  description?: string;
9
9
  key: any;
10
10
  help?: boolean;
11
+ feedback: [];
11
12
  };
12
13
  events: {
13
14
  [evt: string]: CustomEvent<any>;
package/dist/components/form/CheckboxList.svelte CHANGED
@@ -4,11 +4,11 @@ export let target;
4
4
  export let title;
5
5
  export let description = "";
6
6
  export let key;
7
- let required = false;
8
- let feedback;
7
+ export let required = false;
8
+ export let feedback;
9
9
  </script>
10
10
 
11
- <InputContainer label={title} {feedback} {required}>
11
+ <InputContainer label={title} {feedback} {required} {description}>
12
12
  {#each source as item}
13
13
  <label class="flex items-center space-x-2" for={item}>
14
14
  <input class="checkbox" type="checkbox" bind:group={target} value={item} id={item}/>
package/dist/components/form/CheckboxList.svelte.d.ts CHANGED
@@ -6,6 +6,8 @@ declare const __propDef: {
6
6
  title: any;
7
7
  description?: string;
8
8
  key: any;
9
+ required?: boolean;
10
+ feedback: [];
9
11
  };
10
12
  events: {
11
13
  [evt: string]: CustomEvent<any>;
package/dist/components/form/DateInput.svelte CHANGED
@@ -8,9 +8,10 @@ export let required = false;
8
8
  export let feedback = [""];
9
9
  export let help = false;
10
10
  export let disabled = false;
11
+ export let description = "";
11
12
  </script>
12
13
 
13
- <InputContainer {id} {label} {feedback} {required} {help}>
14
+ <InputContainer {id} {label} {feedback} {required} {help} {description}>
14
15
  <input
15
16
  {id}
16
17
  class="input variant-form-material bg-zinc-50 dark:bg-zinc-700 placeholder:text-gray-400"
package/dist/components/form/DateInput.svelte.d.ts CHANGED
@@ -10,6 +10,7 @@ declare const __propDef: {
10
10
  feedback?: string[];
11
11
  help?: boolean;
12
12
  disabled?: boolean;
13
+ description?: string;
13
14
  };
14
15
  events: {
15
16
  input: Event;
package/dist/components/form/Dropdown.svelte CHANGED
@@ -10,6 +10,7 @@
10
10
  export let feedback = [''];
11
11
  export let required = false;
12
12
  export let help = false;
13
+ export let description = '';
13
14
 
14
15
  $: selected = null;
15
16
 
@@ -27,7 +28,7 @@
27
28
  }
28
29
  </script>
29
30
 
30
- <InputContainer {id} label={title} {feedback} {required} {help}>
31
+ <InputContainer {id} label={title} {feedback} {required} {help} {description}>
31
32
  <select
32
33
  {id}
33
34
  class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
package/dist/components/form/Dropdown.svelte.d.ts CHANGED
@@ -6,6 +6,7 @@ export default class Dropdown extends SvelteComponent<{
6
6
  target: any;
7
7
  title: any;
8
8
  source: any;
9
+ description?: string | undefined;
9
10
  invalid?: boolean | undefined;
10
11
  feedback?: string[] | undefined;
11
12
  required?: boolean | undefined;
@@ -28,6 +29,7 @@ declare const __propDef: {
28
29
  target: any;
29
30
  title: any;
30
31
  source: any;
32
+ description?: string | undefined;
31
33
  invalid?: boolean | undefined;
32
34
  feedback?: string[] | undefined;
33
35
  required?: boolean | undefined;
package/dist/components/form/DropdownKvP.svelte CHANGED
@@ -11,6 +11,7 @@
11
11
  export let required = false;
12
12
  export let complexTarget = false;
13
13
  export let help = false;
14
+ export let description = '';
14
15
 
15
16
  $: selected = null;
16
17
 
@@ -36,7 +37,7 @@
36
37
  }
37
38
  </script>
38
39
 
39
- <InputContainer {id} label={title} {feedback} {required} {help}>
40
+ <InputContainer {id} label={title} {feedback} {required} {help} {description}>
40
41
  <select
41
42
  {id}
42
43
  class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
package/dist/components/form/DropdownKvP.svelte.d.ts CHANGED
@@ -6,6 +6,7 @@ export default class DropdownKvP extends SvelteComponent<{
6
6
  target: any;
7
7
  title: any;
8
8
  source: any;
9
+ description?: string | undefined;
9
10
  invalid?: boolean | undefined;
10
11
  feedback?: string[] | undefined;
11
12
  required?: boolean | undefined;
@@ -29,6 +30,7 @@ declare const __propDef: {
29
30
  target: any;
30
31
  title: any;
31
32
  source: any;
33
+ description?: string | undefined;
32
34
  invalid?: boolean | undefined;
33
35
  feedback?: string[] | undefined;
34
36
  required?: boolean | undefined;
package/dist/components/form/InputContainer.svelte CHANGED
@@ -1,9 +1,13 @@
1
1
  <script>import { helpStore } from "../../stores/pageStores";
2
+ import Fa from "svelte-fa";
3
+ import { faQuestion } from "@fortawesome/free-solid-svg-icons";
2
4
  export let id = "";
3
5
  export let label = "";
4
6
  export let required;
5
7
  export let feedback;
6
8
  export let help = false;
9
+ export let description = "";
10
+ let showDescription = false;
7
11
  function onMouseOver() {
8
12
  if (help) {
9
13
  helpStore.show(id);
@@ -15,25 +19,34 @@ function onMouseOut() {
15
19
 
16
20
  <div
17
21
  id="{id}-container"
22
+ role="region"
18
23
  on:mouseover={onMouseOver}
19
24
  on:focus={onMouseOver}
20
25
  on:mouseout={onMouseOut}
21
26
  on:blur={onMouseOut}
22
27
  >
23
- <label class="label">
24
- <span
28
+ <label class="label w-full flex" for="{id}">
29
+ <span class="grow"
25
30
  >{label}
26
31
  {#if required} <span class="text-sm text-red-600">*</span> {/if}
27
32
  </span>
28
- <slot />
29
- {#if feedback}
30
- <span class="text-sm text-error-600">
31
- <ul>
32
- {#each feedback as message}
33
- <li>{message}</li>
34
- {/each}
35
- </ul>
36
- </span>
33
+ {#if description}
34
+ <button class="badge p-2" on:click={()=>showDescription = !showDescription}><Fa icon={faQuestion} /></button>
37
35
  {/if}
38
36
  </label>
37
+
38
+ {#if feedback}
39
+ <span class="text-sm text-error-600">
40
+ <ul>
41
+ {#each feedback as message}
42
+ <li>{message}</li>
43
+ {/each}
44
+ </ul>
45
+ </span>
46
+ {/if}
47
+ {#if description && showDescription}
48
+ <div class="card text-sm text-gray-500 p-2 mb-2">{@html description}</div>
49
+ {/if}
50
+ <slot />
51
+
39
52
  </div>
package/dist/components/form/InputContainer.svelte.d.ts CHANGED
@@ -6,6 +6,7 @@ declare const __propDef: {
6
6
  required: boolean;
7
7
  feedback: string[];
8
8
  help?: boolean;
9
+ description?: string;
9
10
  };
10
11
  events: {
11
12
  [evt: string]: CustomEvent<any>;
package/dist/components/form/MultiSelect.svelte CHANGED
@@ -24,6 +24,7 @@
24
24
  export let clearable = true;
25
25
  export let disabled = false;
26
26
  export let searchable = true;
27
+ export let description = '';
27
28
 
28
29
  let isLoaded = false;
29
30
 
@@ -298,9 +299,10 @@
298
299
  dispatch('clear', e)
299
300
 
300
301
  }
302
+
301
303
  </script>
302
304
 
303
- <InputContainer {id} label={title} {feedback} {required} {help}>
305
+ <InputContainer {id} label={title} {feedback} {required} {help} {description}>
304
306
  <Select
305
307
  {id}
306
308
  items={source}
package/dist/components/form/MultiSelect.svelte.d.ts CHANGED
@@ -6,6 +6,7 @@ export default class MultiSelect extends SvelteComponent<{
6
6
  target: any;
7
7
  title: any;
8
8
  source: any;
9
+ description?: string | undefined;
9
10
  invalid?: boolean | undefined;
10
11
  feedback?: string[] | undefined;
11
12
  required?: boolean | undefined;
@@ -45,6 +46,7 @@ declare const __propDef: {
45
46
  target: any;
46
47
  title: any;
47
48
  source: any;
49
+ description?: string | undefined;
48
50
  invalid?: boolean | undefined;
49
51
  feedback?: string[] | undefined;
50
52
  required?: boolean | undefined;
package/dist/components/form/NumberInput.svelte CHANGED
@@ -10,9 +10,10 @@ export let feedback = [""];
10
10
  export let placeholder = "";
11
11
  export let help = false;
12
12
  export let disabled = false;
13
+ export let description = "";
13
14
  </script>
14
15
 
15
- <InputContainer {id} {label} {feedback} {required} {help}>
16
+ <InputContainer {id} {label} {feedback} {required} {help} {description}>
16
17
  <input
17
18
  {id}
18
19
  class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
package/dist/components/form/NumberInput.svelte.d.ts CHANGED
@@ -11,6 +11,7 @@ declare const __propDef: {
11
11
  placeholder?: string;
12
12
  help?: boolean;
13
13
  disabled?: boolean;
14
+ description?: string;
14
15
  };
15
16
  events: {
16
17
  input: Event;
package/dist/components/form/TextArea.svelte CHANGED
@@ -9,9 +9,10 @@ export let feedback = [""];
9
9
  export let placeholder = "";
10
10
  export let help = false;
11
11
  export let disabled = false;
12
+ export let description = "";
12
13
  </script>
13
14
 
14
- <InputContainer {id} {label} {feedback} {required} {help}>
15
+ <InputContainer {id} {label} {feedback} {required} {help} {description}>
15
16
  <textarea
16
17
  {id}
17
18
  class="textarea variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
package/dist/components/form/TextArea.svelte.d.ts CHANGED
@@ -11,6 +11,7 @@ declare const __propDef: {
11
11
  placeholder?: string;
12
12
  help?: boolean;
13
13
  disabled?: boolean;
14
+ description?: string;
14
15
  };
15
16
  events: {
16
17
  input: Event;
package/dist/components/form/TextInput.svelte CHANGED
@@ -9,9 +9,10 @@ export let feedback = [""];
9
9
  export let placeholder = "";
10
10
  export let help = false;
11
11
  export let disabled = false;
12
+ export let description = "";
12
13
  </script>
13
14
 
14
- <InputContainer {id} {label} {feedback} {required} {help}>
15
+ <InputContainer {id} {label} {feedback} {required} {help} {description}>
15
16
  <input
16
17
  {id}
17
18
  class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
package/dist/components/form/TextInput.svelte.d.ts CHANGED
@@ -11,6 +11,7 @@ declare const __propDef: {
11
11
  placeholder?: string;
12
12
  help?: boolean;
13
13
  disabled?: boolean;
14
+ description?: string;
14
15
  };
15
16
  events: {
16
17
  input: Event;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bexis2/bexis2-core-ui",
3
- "version": "0.4.67",
3
+ "version": "0.4.68",
4
4
  "private": false,
5
5
  "description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
6
6
  "keywords": [
package/src/lib/components/form/Checkbox.svelte CHANGED
@@ -9,9 +9,10 @@
9
9
  export let invalid: boolean;
10
10
  export let required: boolean;
11
11
  export let feedback: [];
12
+ export let description: string = '';
12
13
  </script>
13
14
 
14
- <InputContainer {label} {feedback} {required}>
15
+ <InputContainer {label} {feedback} {required} {description}>
15
16
  <input
16
17
  {id}
17
18
  class="input variant-form-material bg-zinc-50 dark:bg-zinc-50"
package/src/lib/components/form/CheckboxKvPList.svelte CHANGED
@@ -10,10 +10,11 @@
10
10
  export let help = false;
11
11
 
12
12
  let required = false;
13
- let feedback: [];
13
+ export let feedback: [];
14
+
14
15
  </script>
15
16
 
16
- <InputContainer {id} label={title} {feedback} {required} {help}>
17
+ <InputContainer {id} label={title} {feedback} {required} {help} {description}>
17
18
  {#each source as item}
18
19
  <label class="flex items-center space-x-2" for={item.key}>
19
20
  <input
package/src/lib/components/form/CheckboxList.svelte CHANGED
@@ -7,11 +7,11 @@
7
7
  export let description = '';
8
8
  export let key;
9
9
 
10
- let required = false;
11
- let feedback: [];
10
+ export let required = false;
11
+ export let feedback: [];
12
12
  </script>
13
13
 
14
- <InputContainer label={title} {feedback} {required}>
14
+ <InputContainer label={title} {feedback} {required} {description}>
15
15
  {#each source as item}
16
16
  <label class="flex items-center space-x-2" for={item}>
17
17
  <input class="checkbox" type="checkbox" bind:group={target} value={item} id={item}/>
package/src/lib/components/form/DateInput.svelte CHANGED
@@ -10,9 +10,10 @@
10
10
  export let feedback: string[] = [''];
11
11
  export let help = false;
12
12
  export let disabled: boolean = false;
13
+ export let description : string = '';
13
14
  </script>
14
15
 
15
- <InputContainer {id} {label} {feedback} {required} {help}>
16
+ <InputContainer {id} {label} {feedback} {required} {help} {description}>
16
17
  <input
17
18
  {id}
18
19
  class="input variant-form-material bg-zinc-50 dark:bg-zinc-700 placeholder:text-gray-400"
package/src/lib/components/form/Dropdown.svelte CHANGED
@@ -10,6 +10,7 @@
10
10
  export let feedback = [''];
11
11
  export let required = false;
12
12
  export let help = false;
13
+ export let description = '';
13
14
 
14
15
  $: selected = null;
15
16
 
@@ -27,7 +28,7 @@
27
28
  }
28
29
  </script>
29
30
 
30
- <InputContainer {id} label={title} {feedback} {required} {help}>
31
+ <InputContainer {id} label={title} {feedback} {required} {help} {description}>
31
32
  <select
32
33
  {id}
33
34
  class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
package/src/lib/components/form/DropdownKvP.svelte CHANGED
@@ -11,6 +11,7 @@
11
11
  export let required = false;
12
12
  export let complexTarget = false;
13
13
  export let help = false;
14
+ export let description = '';
14
15
 
15
16
  $: selected = null;
16
17
 
@@ -36,7 +37,7 @@
36
37
  }
37
38
  </script>
38
39
 
39
- <InputContainer {id} label={title} {feedback} {required} {help}>
40
+ <InputContainer {id} label={title} {feedback} {required} {help} {description}>
40
41
  <select
41
42
  {id}
42
43
  class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
package/src/lib/components/form/InputContainer.svelte CHANGED
@@ -1,11 +1,16 @@
1
1
  <script lang="ts">
2
2
  import { helpStore } from '$store/pageStores';
3
+ import Fa from 'svelte-fa';
4
+ import { faQuestion } from '@fortawesome/free-solid-svg-icons';
3
5
 
4
6
  export let id: string = '';
5
7
  export let label: string = '';
6
8
  export let required: boolean;
7
9
  export let feedback: string[];
8
10
  export let help: boolean = false;
11
+ export let description : string = '';
12
+
13
+ let showDescription: boolean = false;
9
14
 
10
15
  function onMouseOver() {
11
16
  if (help) {
@@ -18,25 +23,34 @@
18
23
 
19
24
  <div
20
25
  id="{id}-container"
26
+ role="region"
21
27
  on:mouseover={onMouseOver}
22
28
  on:focus={onMouseOver}
23
29
  on:mouseout={onMouseOut}
24
30
  on:blur={onMouseOut}
25
31
  >
26
- <label class="label">
27
- <span
32
+ <label class="label w-full flex" for="{id}">
33
+ <span class="grow"
28
34
  >{label}
29
35
  {#if required} <span class="text-sm text-red-600">*</span> {/if}
30
36
  </span>
31
- <slot />
32
- {#if feedback}
33
- <span class="text-sm text-error-600">
34
- <ul>
35
- {#each feedback as message}
36
- <li>{message}</li>
37
- {/each}
38
- </ul>
39
- </span>
37
+ {#if description}
38
+ <button class="badge p-2" on:click={()=>showDescription = !showDescription}><Fa icon={faQuestion} /></button>
40
39
  {/if}
41
40
  </label>
41
+
42
+ {#if feedback}
43
+ <span class="text-sm text-error-600">
44
+ <ul>
45
+ {#each feedback as message}
46
+ <li>{message}</li>
47
+ {/each}
48
+ </ul>
49
+ </span>
50
+ {/if}
51
+ {#if description && showDescription}
52
+ <div class="card text-sm text-gray-500 p-2 mb-2">{@html description}</div>
53
+ {/if}
54
+ <slot />
55
+
42
56
  </div>
package/src/lib/components/form/MultiSelect.svelte CHANGED
@@ -24,6 +24,7 @@
24
24
  export let clearable = true;
25
25
  export let disabled = false;
26
26
  export let searchable = true;
27
+ export let description = '';
27
28
 
28
29
  let isLoaded = false;
29
30
 
@@ -298,9 +299,10 @@
298
299
  dispatch('clear', e)
299
300
 
300
301
  }
302
+
301
303
  </script>
302
304
 
303
- <InputContainer {id} label={title} {feedback} {required} {help}>
305
+ <InputContainer {id} label={title} {feedback} {required} {help} {description}>
304
306
  <Select
305
307
  {id}
306
308
  items={source}
package/src/lib/components/form/NumberInput.svelte CHANGED
@@ -13,9 +13,10 @@
13
13
  export let placeholder: string = '';
14
14
  export let help: boolean = false;
15
15
  export let disabled: boolean = false;
16
+ export let description : string = '';
16
17
  </script>
17
18
 
18
- <InputContainer {id} {label} {feedback} {required} {help}>
19
+ <InputContainer {id} {label} {feedback} {required} {help} {description}>
19
20
  <input
20
21
  {id}
21
22
  class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
package/src/lib/components/form/TextArea.svelte CHANGED
@@ -12,9 +12,10 @@
12
12
  export let placeholder: string = '';
13
13
  export let help: boolean = false;
14
14
  export let disabled: boolean = false;
15
+ export let description : string = '';
15
16
  </script>
16
17
 
17
- <InputContainer {id} {label} {feedback} {required} {help}>
18
+ <InputContainer {id} {label} {feedback} {required} {help} {description}>
18
19
  <textarea
19
20
  {id}
20
21
  class="textarea variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
package/src/lib/components/form/TextInput.svelte CHANGED
@@ -11,9 +11,10 @@
11
11
  export let placeholder: string = '';
12
12
  export let help: boolean = false;
13
13
  export let disabled: boolean = false;
14
+ export let description : string = '';
14
15
  </script>
15
16
 
16
- <InputContainer {id} {label} {feedback} {required} {help}>
17
+ <InputContainer {id} {label} {feedback} {required} {help} {description}>
17
18
  <input
18
19
  {id}
19
20
  class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"