@lavalogic/scoria 0.22.6 → 0.23.1

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 (6) hide show
  1. package/dist/Components/HorizontalTabGroup.svelte +3 -3
  2. package/dist/Components/HorizontalTabGroupButton.svelte +51 -4
  3. package/dist/Components/HorizontalTabGroupProps.d.ts +1 -1
  4. package/dist/Components/VerticalTabGroupButton.svelte +43 -6
  5. package/dist/Types/Internal/TabOption.d.ts +3 -0
  6. package/package.json +1 -1
package/dist/Components/HorizontalTabGroup.svelte CHANGED
@@ -9,7 +9,7 @@
9
9
  let {
10
10
  // name: _name, //FIXME why is this not implemented?
11
11
  tabComponent,
12
- options,
12
+ tabs,
13
13
  selected,
14
14
  noRadius = false,
15
15
  grow = false,
@@ -23,11 +23,11 @@
23
23
  >
24
24
  <div class="tabs">
25
25
  {#if tabComponent}
26
- {#each options as option (option)}
26
+ {#each tabs as option (option)}
27
27
  {@render tabComponent(option, selected === option)}
28
28
  {/each}
29
29
  {:else}
30
- {#each options as option (option)}
30
+ {#each tabs as option (option)}
31
31
  <HorizontalTabGroupButton
32
32
  {option}
33
33
  selected={selected === option}
package/dist/Components/HorizontalTabGroupButton.svelte CHANGED
@@ -1,6 +1,9 @@
1
1
  <svelte:options runes />
2
2
 
3
- <script lang="ts" generics="Args">
3
+ <script
4
+ lang="ts"
5
+ generics="Args"
6
+ >
4
7
  import { devCatch } from '../Helpers/Helpers.svelte.js';
5
8
  import { Colour } from '../scss/colours.js';
6
9
 
@@ -11,6 +14,8 @@
11
14
 
12
15
  let { option, selected }: TabGroupButtonProps<Args> = $props();
13
16
 
17
+ let disabled = $state(true);
18
+ let visible = $state(true);
14
19
  let isValid = $state(true);
15
20
 
16
21
  $effect(() => {
@@ -24,6 +29,33 @@
24
29
  .catch(devCatch);
25
30
  }
26
31
  });
32
+ $effect(() => {
33
+ if (typeof option.disabled === 'boolean') {
34
+ disabled = option.disabled;
35
+ } else if (option.disabled == undefined) {
36
+ disabled = false;
37
+ } else {
38
+ option.disabled
39
+ .then((v) => {
40
+ disabled = v;
41
+ })
42
+ .catch(devCatch);
43
+ }
44
+ });
45
+
46
+ $effect(() => {
47
+ if (typeof option.visible === 'boolean') {
48
+ visible = option.visible;
49
+ } else if (option.visible == undefined) {
50
+ visible = true;
51
+ } else {
52
+ option.visible
53
+ .then((v) => {
54
+ visible = v;
55
+ })
56
+ .catch(devCatch);
57
+ }
58
+ });
27
59
  </script>
28
60
 
29
61
  <button
@@ -34,12 +66,23 @@
34
66
  type="button"
35
67
  class="tab"
36
68
  class:invalid={!isValid}
69
+ {disabled}
70
+ class:hidden={!visible}
37
71
  >
38
- <Icon name="nothing" colour={Colour['$brand-primary']} size={Size.Small} {...option.iconLeft} />
72
+ <Icon
73
+ name="nothing"
74
+ colour={Colour['$brand-primary']}
75
+ size={Size.Small}
76
+ {...option.iconLeft}
77
+ />
39
78
 
40
79
  {option.label}
41
80
  {#if !isValid}
42
- <Icon name="error" colour={Colour['$error-border']} size={Size.Small} />
81
+ <Icon
82
+ name="error"
83
+ colour={Colour['$error-border']}
84
+ size={Size.Small}
85
+ />
43
86
  {:else}
44
87
  <Icon
45
88
  name="nothing"
@@ -50,7 +93,11 @@
50
93
  {/if}
51
94
  </button>
52
95
 
53
- <style>.tab {
96
+ <style>button.tab.hidden {
97
+ display: none !important;
98
+ }
99
+
100
+ .tab {
54
101
  color: #3a4952;
55
102
  cursor: pointer;
56
103
  font-size: 1rem;
package/dist/Components/HorizontalTabGroupProps.d.ts CHANGED
@@ -5,6 +5,6 @@ export interface HorizontalTabGroupProps<CommonDenominator> {
5
5
  tabComponent?: Snippet<[TabOption<CommonDenominator>, boolean]>;
6
6
  noRadius?: boolean;
7
7
  grow?: boolean;
8
- options: Array<TabOption<CommonDenominator>>;
8
+ tabs: Array<TabOption<CommonDenominator>>;
9
9
  selected: TabOption<CommonDenominator> | undefined;
10
10
  }
package/dist/Components/VerticalTabGroupButton.svelte CHANGED
@@ -1,6 +1,9 @@
1
1
  <svelte:options runes />
2
2
 
3
- <script lang="ts" generics="Args">
3
+ <script
4
+ lang="ts"
5
+ generics="Args"
6
+ >
4
7
  import { devCatch } from '../Helpers/Helpers.svelte.js';
5
8
  import { Colour } from '../scss/colours.js';
6
9
  import { Size } from '../Types/Internal/Size.js';
@@ -10,6 +13,7 @@
10
13
  let { option, selected }: TabGroupButtonProps<Args> = $props();
11
14
 
12
15
  let disabled = $state(true);
16
+ let visible = $state(true);
13
17
  let isValid = $state(true);
14
18
 
15
19
  $effect(() => {
@@ -36,6 +40,20 @@
36
40
  .catch(devCatch);
37
41
  }
38
42
  });
43
+
44
+ $effect(() => {
45
+ if (typeof option.visible === 'boolean') {
46
+ visible = option.visible;
47
+ } else if (option.visible == undefined) {
48
+ visible = true;
49
+ } else {
50
+ option.visible
51
+ .then((v) => {
52
+ visible = v;
53
+ })
54
+ .catch(devCatch);
55
+ }
56
+ });
39
57
  </script>
40
58
 
41
59
  <button
@@ -47,21 +65,40 @@
47
65
  type="button"
48
66
  class="tab"
49
67
  class:invalid={!isValid}
68
+ class:hidden={!visible}
50
69
  >
51
- <div class="bordered" class:invalid={!isValid}>
70
+ <div
71
+ class="bordered"
72
+ class:invalid={!isValid}
73
+ >
52
74
  {#if option.iconLeft}
53
- <Icon {...option.iconLeft} colour={Colour['$brand-primary']} />
75
+ <Icon
76
+ {...option.iconLeft}
77
+ colour={Colour['$brand-primary']}
78
+ />
54
79
  {/if}
55
80
  {option.label}
56
81
  {#if !isValid}
57
- <Icon name="error" colour={Colour['$error-border']} size={Size.Small} />
82
+ <Icon
83
+ name="error"
84
+ colour={Colour['$error-border']}
85
+ size={Size.Small}
86
+ />
58
87
  {:else if option.iconRight}
59
- <Icon colour={Colour['$brand-primary']} size={Size.Small} {...option.iconRight} />
88
+ <Icon
89
+ colour={Colour['$brand-primary']}
90
+ size={Size.Small}
91
+ {...option.iconRight}
92
+ />
60
93
  {/if}
61
94
  </div>
62
95
  </button>
63
96
 
64
- <style>.tab {
97
+ <style>button.tab.hidden {
98
+ display: none !important;
99
+ }
100
+
101
+ .tab {
65
102
  cursor: pointer;
66
103
  font-size: 0.875rem;
67
104
  font-weight: 600;
package/dist/Types/Internal/TabOption.d.ts CHANGED
@@ -8,5 +8,8 @@ export interface TabOption<Args> {
8
8
  iconLeft?: IconProps;
9
9
  iconRight?: IconProps;
10
10
  isValid?: boolean | Promise<boolean>;
11
+ /** default false */
11
12
  disabled?: boolean | Promise<boolean>;
13
+ /** default true */
14
+ visible?: boolean | Promise<boolean>;
12
15
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@lavalogic/scoria",
3
3
  "description": "Svelte components used for the FloWMS Web Frontend",
4
- "version": "0.22.6",
4
+ "version": "0.23.1",
5
5
  "publishConfig": {
6
6
  "access": "restricted"
7
7
  },