@bexis2/bexis2-core-ui 0.4.82 → 0.4.84

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 (10) hide show
  1. package/README.md +8 -0
  2. package/dist/components/form/InputContainer.svelte +11 -9
  3. package/dist/components/form/MultiSelect.svelte +7 -7
  4. package/dist/components/page/menu/MenuSublist.svelte +1 -1
  5. package/dist/css/core.ui.postcss +24 -5
  6. package/package.json +1 -1
  7. package/src/lib/components/form/InputContainer.svelte +11 -9
  8. package/src/lib/components/form/MultiSelect.svelte +7 -7
  9. package/src/lib/components/page/menu/MenuSublist.svelte +1 -1
  10. package/src/lib/css/core.ui.postcss +24 -5
package/README.md CHANGED
@@ -1,4 +1,12 @@
1
1
  # bexis-core-ui
2
+ ## 0.4.84
3
+ - MultiSelect
4
+ - fix itemGroup was not working
5
+
6
+ ## 0.4.83
7
+ - InputContainer
8
+ - error message position and basic styling of input fields
9
+
2
10
  ## 0.4.82
3
11
  - Table
4
12
  - ServerSide communication, reduce calls
package/dist/components/form/InputContainer.svelte CHANGED
@@ -28,25 +28,27 @@ function onMouseOut() {
28
28
  <label class="label w-full flex" for="{id}">
29
29
  <span class="grow"
30
30
  >{label}
31
- {#if required} <span class="text-sm text-red-600">*</span> {/if}
31
+ {#if required} <span class="text-xs text-red-600">*</span> {/if}
32
32
  </span>
33
33
  {#if description}
34
- <button class="badge p-2" on:click={()=>showDescription = !showDescription}><Fa icon={faQuestion} /></button>
34
+ <button class="badge " on:click={()=>showDescription = !showDescription}><Fa icon={faQuestion} /></button>
35
35
  {/if}
36
36
  </label>
37
37
 
38
+
39
+ {#if description && showDescription}
40
+ <div class="card text-sm text-gray-500 p-2 mb-2">{@html description}</div>
41
+ {/if}
42
+ <slot />
43
+ <div class="">
44
+ <span class="text-xs text-error-600 ">
38
45
  {#if feedback}
39
- <span class="text-sm text-error-600">
40
46
  <ul>
41
47
  {#each feedback as message}
42
48
  <li>{message}</li>
43
49
  {/each}
44
50
  </ul>
51
+ {/if}
45
52
  </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
-
53
+ </div>
52
54
  </div>
package/dist/components/form/MultiSelect.svelte CHANGED
@@ -33,7 +33,7 @@
33
33
  $: target, setValue(target);
34
34
 
35
35
  let groupBy;
36
- $: groupBy;
36
+ $: groupBy = itemGroup ? (item) => item[itemGroup] : undefined;
37
37
 
38
38
  const dispatch = createEventDispatcher();
39
39
 
@@ -120,17 +120,17 @@
120
120
  value = items;
121
121
  }
122
122
  //console.log(value);
123
- if (itemGroup) {
124
- groupBy = (item) => item[itemGroup];
125
- }
123
+ // if (itemGroup) {
124
+ // groupBy = (item) => item[itemGroup];
125
+ // }
126
126
  }
127
127
 
128
128
  if (complexSource && complexTarget && isMulti) {
129
129
  value = t;
130
130
  isLoaded = true;
131
- if (itemGroup) {
132
- groupBy = (item) => item[itemGroup];
133
- }
131
+ // if (itemGroup) {
132
+ // groupBy = (item) => item[itemGroup];
133
+ // }
134
134
  }
135
135
 
136
136
  //b) simple liust and simple model
package/dist/components/page/menu/MenuSublist.svelte CHANGED
@@ -59,7 +59,7 @@ async function logOffFn() {
59
59
  value={item.Title}
60
60
 
61
61
  >
62
- <a id={"menu-"+item.Title.replaceAll(' ', '-')} href={item.Url} target="{item.Target}" on:click|preventDefault={()=>clickFn(item)}>{item.Title}</a>
62
+ <a id={"menu-"+item.Title.replaceAll(' ', '-')} href={item.Url} target="{item.Target}" class="w-full block" on:click|preventDefault={()=>clickFn(item)}>{item.Title}</a>
63
63
 
64
64
  </ListBoxItem>
65
65
 
package/dist/css/core.ui.postcss CHANGED
@@ -1,17 +1,36 @@
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+ @tailwind variants;
5
+
1
6
  /*place global styles here */
2
7
  html,
3
8
  body {
4
- @apply h-full;
9
+ @apply h-full bg-white;
10
+ }
11
+
12
+ [type='text']:focus {
13
+ --tw-ring-color: #00000;
5
14
  }
6
15
 
7
16
  h1 {
8
17
  @apply text-primary-500;
9
18
  }
10
19
 
11
- :root {
12
- --background: rgb(var(--color-surface-200));
20
+ h2 {
21
+ @apply text-primary-500;
13
22
  }
14
23
 
15
- [type='text']:focus {
16
- --tw-ring-color: #00000;
24
+ .svelte-select,
25
+ .svelte-select-list {
26
+ @apply dark:!bg-zinc-700 border dark:!border-zinc-500;
27
+ }
28
+
29
+ .multi-item {
30
+ @apply dark:!bg-zinc-500 dark:!outline-zinc-400;
17
31
  }
32
+
33
+ .list-item .item.hover:not(.active):not(.list-group-title) {
34
+ @apply dark:!text-black;
35
+ }
36
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bexis2/bexis2-core-ui",
3
- "version": "0.4.82",
3
+ "version": "0.4.84",
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/InputContainer.svelte CHANGED
@@ -32,25 +32,27 @@ let showDescription: boolean = false;
32
32
  <label class="label w-full flex" for="{id}">
33
33
  <span class="grow"
34
34
  >{label}
35
- {#if required} <span class="text-sm text-red-600">*</span> {/if}
35
+ {#if required} <span class="text-xs text-red-600">*</span> {/if}
36
36
  </span>
37
37
  {#if description}
38
- <button class="badge p-2" on:click={()=>showDescription = !showDescription}><Fa icon={faQuestion} /></button>
38
+ <button class="badge " on:click={()=>showDescription = !showDescription}><Fa icon={faQuestion} /></button>
39
39
  {/if}
40
40
  </label>
41
41
 
42
+
43
+ {#if description && showDescription}
44
+ <div class="card text-sm text-gray-500 p-2 mb-2">{@html description}</div>
45
+ {/if}
46
+ <slot />
47
+ <div class="">
48
+ <span class="text-xs text-error-600 ">
42
49
  {#if feedback}
43
- <span class="text-sm text-error-600">
44
50
  <ul>
45
51
  {#each feedback as message}
46
52
  <li>{message}</li>
47
53
  {/each}
48
54
  </ul>
55
+ {/if}
49
56
  </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
-
57
+ </div>
56
58
  </div>
package/src/lib/components/form/MultiSelect.svelte CHANGED
@@ -33,7 +33,7 @@
33
33
  $: target, setValue(target);
34
34
 
35
35
  let groupBy;
36
- $: groupBy;
36
+ $: groupBy = itemGroup ? (item) => item[itemGroup] : undefined;
37
37
 
38
38
  const dispatch = createEventDispatcher();
39
39
 
@@ -120,17 +120,17 @@
120
120
  value = items;
121
121
  }
122
122
  //console.log(value);
123
- if (itemGroup) {
124
- groupBy = (item) => item[itemGroup];
125
- }
123
+ // if (itemGroup) {
124
+ // groupBy = (item) => item[itemGroup];
125
+ // }
126
126
  }
127
127
 
128
128
  if (complexSource && complexTarget && isMulti) {
129
129
  value = t;
130
130
  isLoaded = true;
131
- if (itemGroup) {
132
- groupBy = (item) => item[itemGroup];
133
- }
131
+ // if (itemGroup) {
132
+ // groupBy = (item) => item[itemGroup];
133
+ // }
134
134
  }
135
135
 
136
136
  //b) simple liust and simple model
package/src/lib/components/page/menu/MenuSublist.svelte CHANGED
@@ -79,7 +79,7 @@
79
79
  value={item.Title}
80
80
 
81
81
  >
82
- <a id={"menu-"+item.Title.replaceAll(' ', '-')} href={item.Url} target="{item.Target}" on:click|preventDefault={()=>clickFn(item)}>{item.Title}</a>
82
+ <a id={"menu-"+item.Title.replaceAll(' ', '-')} href={item.Url} target="{item.Target}" class="w-full block" on:click|preventDefault={()=>clickFn(item)}>{item.Title}</a>
83
83
 
84
84
  </ListBoxItem>
85
85
 
package/src/lib/css/core.ui.postcss CHANGED
@@ -1,17 +1,36 @@
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+ @tailwind variants;
5
+
1
6
  /*place global styles here */
2
7
  html,
3
8
  body {
4
- @apply h-full;
9
+ @apply h-full bg-white;
10
+ }
11
+
12
+ [type='text']:focus {
13
+ --tw-ring-color: #00000;
5
14
  }
6
15
 
7
16
  h1 {
8
17
  @apply text-primary-500;
9
18
  }
10
19
 
11
- :root {
12
- --background: rgb(var(--color-surface-200));
20
+ h2 {
21
+ @apply text-primary-500;
13
22
  }
14
23
 
15
- [type='text']:focus {
16
- --tw-ring-color: #00000;
24
+ .svelte-select,
25
+ .svelte-select-list {
26
+ @apply dark:!bg-zinc-700 border dark:!border-zinc-500;
27
+ }
28
+
29
+ .multi-item {
30
+ @apply dark:!bg-zinc-500 dark:!outline-zinc-400;
17
31
  }
32
+
33
+ .list-item .item.hover:not(.active):not(.list-group-title) {
34
+ @apply dark:!text-black;
35
+ }
36
+