@lavalogic/scoria 0.32.1 → 0.34.0
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.
- package/dist/Components/AccordionGroup.svelte +85 -0
- package/dist/Components/AccordionGroup.svelte.d.ts +25 -0
- package/dist/Components/AccordionGroupButton.svelte +122 -0
- package/dist/Components/AccordionGroupButton.svelte.d.ts +25 -0
- package/dist/Components/AccordionGroupButtonProps.d.ts +21 -0
- package/dist/Components/AccordionGroupButtonProps.js +1 -0
- package/dist/Components/AccordionGroupProps.d.ts +8 -0
- package/dist/Components/AccordionGroupProps.js +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<svelte:options runes />
|
|
2
|
+
|
|
3
|
+
<script
|
|
4
|
+
lang="ts"
|
|
5
|
+
generics="CommonDenominator"
|
|
6
|
+
>
|
|
7
|
+
import AccordionGroupButton from './AccordionGroupButton.svelte';
|
|
8
|
+
|
|
9
|
+
import { cubicOut } from 'svelte/easing';
|
|
10
|
+
import { slide } from 'svelte/transition';
|
|
11
|
+
import type { AccordionGroupProps } from './AccordionGroupProps.js';
|
|
12
|
+
|
|
13
|
+
let {
|
|
14
|
+
// name: _name, //FIXME why is this not implemented?
|
|
15
|
+
tabs,
|
|
16
|
+
selected,
|
|
17
|
+
noRadius = false,
|
|
18
|
+
grow = false,
|
|
19
|
+
}: AccordionGroupProps<CommonDenominator> = $props();
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<div
|
|
23
|
+
class="wrapper"
|
|
24
|
+
class:no-radius={noRadius}
|
|
25
|
+
class:grow
|
|
26
|
+
>
|
|
27
|
+
{#each tabs as option (option)}
|
|
28
|
+
{@const isSelected = selected === option}
|
|
29
|
+
<AccordionGroupButton
|
|
30
|
+
{option}
|
|
31
|
+
{noRadius}
|
|
32
|
+
selected={isSelected}
|
|
33
|
+
/>
|
|
34
|
+
{#if isSelected}
|
|
35
|
+
<div transition:slide={{ duration: 200, easing: cubicOut }}>
|
|
36
|
+
{@render selected.content(selected.args)}
|
|
37
|
+
</div>
|
|
38
|
+
{/if}
|
|
39
|
+
{/each}
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<style>.wrapper {
|
|
43
|
+
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
|
|
44
|
+
border-radius: 4px;
|
|
45
|
+
display: flex;
|
|
46
|
+
flex-flow: column nowrap;
|
|
47
|
+
overflow: auto;
|
|
48
|
+
}
|
|
49
|
+
.wrapper.no-radius {
|
|
50
|
+
border-radius: 0;
|
|
51
|
+
}
|
|
52
|
+
.wrapper.no-radius .tabs {
|
|
53
|
+
border-radius: 0;
|
|
54
|
+
}
|
|
55
|
+
.wrapper.no-radius .content {
|
|
56
|
+
border-radius: 0;
|
|
57
|
+
}
|
|
58
|
+
.wrapper.grow {
|
|
59
|
+
flex-grow: 1;
|
|
60
|
+
}
|
|
61
|
+
.wrapper:not(.grow) .tabs {
|
|
62
|
+
padding-top: 1px;
|
|
63
|
+
}
|
|
64
|
+
.wrapper .sticky {
|
|
65
|
+
position: sticky;
|
|
66
|
+
top: 0;
|
|
67
|
+
z-index: 2;
|
|
68
|
+
}
|
|
69
|
+
.wrapper .tabs {
|
|
70
|
+
border-radius: 4px 0 0 4px;
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-flow: column nowrap;
|
|
73
|
+
padding: 1px;
|
|
74
|
+
gap: 1px;
|
|
75
|
+
background-color: #cbd4da;
|
|
76
|
+
min-width: 10rem;
|
|
77
|
+
border-right: solid 1px #cbd4da;
|
|
78
|
+
overflow: auto;
|
|
79
|
+
flex-shrink: 0;
|
|
80
|
+
}
|
|
81
|
+
.wrapper .content {
|
|
82
|
+
flex-grow: 1;
|
|
83
|
+
overflow: visible;
|
|
84
|
+
border-radius: 0 4px 0 4px;
|
|
85
|
+
}</style>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { AccordionGroupProps } from './AccordionGroupProps.js';
|
|
2
|
+
declare function $$render<CommonDenominator>(): {
|
|
3
|
+
props: AccordionGroupProps<CommonDenominator>;
|
|
4
|
+
exports: {};
|
|
5
|
+
bindings: "";
|
|
6
|
+
slots: {};
|
|
7
|
+
events: {};
|
|
8
|
+
};
|
|
9
|
+
declare class __sveltets_Render<CommonDenominator> {
|
|
10
|
+
props(): ReturnType<typeof $$render<CommonDenominator>>['props'];
|
|
11
|
+
events(): ReturnType<typeof $$render<CommonDenominator>>['events'];
|
|
12
|
+
slots(): ReturnType<typeof $$render<CommonDenominator>>['slots'];
|
|
13
|
+
bindings(): "";
|
|
14
|
+
exports(): {};
|
|
15
|
+
}
|
|
16
|
+
interface $$IsomorphicComponent {
|
|
17
|
+
new <CommonDenominator>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<CommonDenominator>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<CommonDenominator>['props']>, ReturnType<__sveltets_Render<CommonDenominator>['events']>, ReturnType<__sveltets_Render<CommonDenominator>['slots']>> & {
|
|
18
|
+
$$bindings?: ReturnType<__sveltets_Render<CommonDenominator>['bindings']>;
|
|
19
|
+
} & ReturnType<__sveltets_Render<CommonDenominator>['exports']>;
|
|
20
|
+
<CommonDenominator>(internal: unknown, props: ReturnType<__sveltets_Render<CommonDenominator>['props']> & {}): ReturnType<__sveltets_Render<CommonDenominator>['exports']>;
|
|
21
|
+
z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
|
|
22
|
+
}
|
|
23
|
+
declare const AccordionGroup: $$IsomorphicComponent;
|
|
24
|
+
type AccordionGroup<CommonDenominator> = InstanceType<typeof AccordionGroup<CommonDenominator>>;
|
|
25
|
+
export default AccordionGroup;
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
<svelte:options runes />
|
|
2
|
+
|
|
3
|
+
<script
|
|
4
|
+
lang="ts"
|
|
5
|
+
generics="Args"
|
|
6
|
+
>
|
|
7
|
+
import { devCatch } from '../Helpers/Helpers.svelte.js';
|
|
8
|
+
import { Colour, ColourSet } from '../scss/colours.js';
|
|
9
|
+
import { Size } from '../Types/Internal/Size.js';
|
|
10
|
+
import type { AccordionGroupButtonProps } from './AccordionGroupButtonProps.js';
|
|
11
|
+
import Action from './Action.svelte';
|
|
12
|
+
import Icon from './Icon.svelte';
|
|
13
|
+
|
|
14
|
+
let {
|
|
15
|
+
option,
|
|
16
|
+
selected: isSelected,
|
|
17
|
+
noRadius = false,
|
|
18
|
+
}: AccordionGroupButtonProps<Args> = $props();
|
|
19
|
+
|
|
20
|
+
let disabled = $state(true);
|
|
21
|
+
let isVisible = $state(true);
|
|
22
|
+
let isValid = $state(true);
|
|
23
|
+
|
|
24
|
+
$effect(() => {
|
|
25
|
+
if (typeof option.isValid === 'boolean') {
|
|
26
|
+
isValid = option.isValid;
|
|
27
|
+
} else {
|
|
28
|
+
option.isValid
|
|
29
|
+
?.then((v) => {
|
|
30
|
+
isValid = v;
|
|
31
|
+
})
|
|
32
|
+
.catch(devCatch);
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
$effect(() => {
|
|
36
|
+
if (typeof option.disabled === 'boolean') {
|
|
37
|
+
disabled = option.disabled;
|
|
38
|
+
} else if (option.disabled == undefined) {
|
|
39
|
+
disabled = false;
|
|
40
|
+
} else {
|
|
41
|
+
option.disabled
|
|
42
|
+
.then((v) => {
|
|
43
|
+
disabled = v;
|
|
44
|
+
})
|
|
45
|
+
.catch(devCatch);
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
$effect(() => {
|
|
50
|
+
if (typeof option.visible === 'boolean') {
|
|
51
|
+
isVisible = option.visible;
|
|
52
|
+
} else if (option.visible == undefined) {
|
|
53
|
+
isVisible = true;
|
|
54
|
+
} else {
|
|
55
|
+
option.visible
|
|
56
|
+
.then((v) => {
|
|
57
|
+
isVisible = v;
|
|
58
|
+
})
|
|
59
|
+
.catch(devCatch);
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
</script>
|
|
63
|
+
|
|
64
|
+
<div
|
|
65
|
+
class:isSelected
|
|
66
|
+
class="tab"
|
|
67
|
+
class:invalid={!isValid}
|
|
68
|
+
class:hidden={!isVisible}
|
|
69
|
+
class:no-radius={noRadius}
|
|
70
|
+
>
|
|
71
|
+
{#if typeof option.label == 'string'}
|
|
72
|
+
{option.label}
|
|
73
|
+
{:else}
|
|
74
|
+
{@render option.label()}
|
|
75
|
+
{/if}
|
|
76
|
+
<div class="spacer"></div>
|
|
77
|
+
|
|
78
|
+
{#if option.extras}
|
|
79
|
+
{@render option.extras()}
|
|
80
|
+
{/if}
|
|
81
|
+
{#if !isValid}
|
|
82
|
+
<Icon
|
|
83
|
+
name="error"
|
|
84
|
+
colour={Colour['$error-border']}
|
|
85
|
+
size={Size.Small}
|
|
86
|
+
/>
|
|
87
|
+
{/if}
|
|
88
|
+
<Action
|
|
89
|
+
icon={{ name: isSelected ? 'circle-minus' : 'circle-plus' }}
|
|
90
|
+
backgroundColour="transparent"
|
|
91
|
+
colourSet={ColourSet.Info}
|
|
92
|
+
{disabled}
|
|
93
|
+
onclick={() => {
|
|
94
|
+
option.onclick();
|
|
95
|
+
}}
|
|
96
|
+
/>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<style>.tab {
|
|
100
|
+
color: #3a4952;
|
|
101
|
+
font-size: 1rem;
|
|
102
|
+
font-weight: 500;
|
|
103
|
+
padding: 1rem;
|
|
104
|
+
border: none;
|
|
105
|
+
text-align: start;
|
|
106
|
+
display: flex;
|
|
107
|
+
flex-flow: row nowrap;
|
|
108
|
+
flex-shrink: 1;
|
|
109
|
+
align-items: center;
|
|
110
|
+
width: 100%;
|
|
111
|
+
gap: 1.5rem;
|
|
112
|
+
position: relative;
|
|
113
|
+
transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
|
|
114
|
+
background-color: #f4f7f9;
|
|
115
|
+
border-bottom: solid 1px #cbd4da;
|
|
116
|
+
}
|
|
117
|
+
.tab.hidden {
|
|
118
|
+
display: none !important;
|
|
119
|
+
}
|
|
120
|
+
.tab .spacer {
|
|
121
|
+
margin: auto;
|
|
122
|
+
}</style>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { AccordionGroupButtonProps } from './AccordionGroupButtonProps.js';
|
|
2
|
+
declare function $$render<Args>(): {
|
|
3
|
+
props: AccordionGroupButtonProps<Args>;
|
|
4
|
+
exports: {};
|
|
5
|
+
bindings: "";
|
|
6
|
+
slots: {};
|
|
7
|
+
events: {};
|
|
8
|
+
};
|
|
9
|
+
declare class __sveltets_Render<Args> {
|
|
10
|
+
props(): ReturnType<typeof $$render<Args>>['props'];
|
|
11
|
+
events(): ReturnType<typeof $$render<Args>>['events'];
|
|
12
|
+
slots(): ReturnType<typeof $$render<Args>>['slots'];
|
|
13
|
+
bindings(): "";
|
|
14
|
+
exports(): {};
|
|
15
|
+
}
|
|
16
|
+
interface $$IsomorphicComponent {
|
|
17
|
+
new <Args>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Args>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Args>['props']>, ReturnType<__sveltets_Render<Args>['events']>, ReturnType<__sveltets_Render<Args>['slots']>> & {
|
|
18
|
+
$$bindings?: ReturnType<__sveltets_Render<Args>['bindings']>;
|
|
19
|
+
} & ReturnType<__sveltets_Render<Args>['exports']>;
|
|
20
|
+
<Args>(internal: unknown, props: ReturnType<__sveltets_Render<Args>['props']> & {}): ReturnType<__sveltets_Render<Args>['exports']>;
|
|
21
|
+
z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
|
|
22
|
+
}
|
|
23
|
+
declare const AccordionGroupButton: $$IsomorphicComponent;
|
|
24
|
+
type AccordionGroupButton<Args> = InstanceType<typeof AccordionGroupButton<Args>>;
|
|
25
|
+
export default AccordionGroupButton;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import type { IconProps } from './IconProps.js';
|
|
3
|
+
export interface AccordionGroupButtonProps<Args> {
|
|
4
|
+
option: AccordionGroupOption<Args>;
|
|
5
|
+
selected: boolean;
|
|
6
|
+
noRadius?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export interface AccordionGroupOption<Args> {
|
|
9
|
+
label: string | Snippet;
|
|
10
|
+
content: Snippet<[Args]>;
|
|
11
|
+
extras?: Snippet;
|
|
12
|
+
onclick: () => void;
|
|
13
|
+
args: Args;
|
|
14
|
+
iconLeft?: IconProps;
|
|
15
|
+
iconRight?: IconProps;
|
|
16
|
+
isValid?: boolean | Promise<boolean>;
|
|
17
|
+
/** default false */
|
|
18
|
+
disabled?: boolean | Promise<boolean>;
|
|
19
|
+
/** default true */
|
|
20
|
+
visible?: boolean | Promise<boolean>;
|
|
21
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { TabOption } from '../Types/Internal/TabOption.js';
|
|
2
|
+
export interface AccordionGroupProps<CommonDenominator> {
|
|
3
|
+
name?: string;
|
|
4
|
+
noRadius?: boolean;
|
|
5
|
+
grow?: boolean;
|
|
6
|
+
tabs: Array<TabOption<CommonDenominator>>;
|
|
7
|
+
selected: TabOption<CommonDenominator> | undefined;
|
|
8
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
export { default as AccordionGroup } from './Components/AccordionGroup.svelte';
|
|
2
|
+
export type { AccordionGroupButtonProps, AccordionGroupOption, } from './Components/AccordionGroupButtonProps.js';
|
|
3
|
+
export type { AccordionGroupProps } from './Components/AccordionGroupProps.js';
|
|
1
4
|
export { default as Action } from './Components/Action.svelte';
|
|
2
5
|
export { default as AlertModal } from './Components/AlertModal.svelte';
|
|
3
6
|
export { default as ContextWrapper } from './Components/Base/ContextWrapper.svelte';
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
export { default as AccordionGroup } from './Components/AccordionGroup.svelte';
|
|
1
2
|
export { default as Action } from './Components/Action.svelte';
|
|
2
3
|
export { default as AlertModal } from './Components/AlertModal.svelte';
|
|
3
4
|
export { default as ContextWrapper } from './Components/Base/ContextWrapper.svelte';
|