sveltacular 0.0.39 → 0.0.41
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/forms/form-label.svelte +6 -1
- package/dist/forms/form-label.svelte.d.ts +1 -0
- package/dist/forms/list-box/list-box.svelte +17 -4
- package/dist/layout/grid.svelte +17 -0
- package/dist/layout/grid.svelte.d.ts +27 -0
- package/dist/navigation/tabs/tab-context.d.ts +8 -5
- package/dist/navigation/tabs/tab-group.svelte +143 -9
- package/dist/navigation/tabs/tab-group.svelte.d.ts +1 -2
- package/dist/navigation/tabs/tab.svelte +13 -115
- package/dist/navigation/wizard/wizard.svelte +25 -6
- package/dist/navigation/wizard/wizard.svelte.d.ts +4 -1
- package/dist/types/generic.d.ts +0 -1
- package/package.json +1 -1
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
<script>export let id = void 0;
|
|
2
2
|
export let required = false;
|
|
3
|
+
export let disabled = false;
|
|
3
4
|
</script>
|
|
4
5
|
|
|
5
|
-
<label for={id} class:required><slot /></label>
|
|
6
|
+
<label for={id} class:required class:disabled><slot /></label>
|
|
6
7
|
|
|
7
8
|
<style>label {
|
|
8
9
|
display: block;
|
|
@@ -11,4 +12,8 @@ export let required = false;
|
|
|
11
12
|
label.required::after {
|
|
12
13
|
content: "*";
|
|
13
14
|
margin-left: 0.25rem;
|
|
15
|
+
}
|
|
16
|
+
label.disabled {
|
|
17
|
+
opacity: 0.5;
|
|
18
|
+
cursor: not-allowed;
|
|
14
19
|
}</style>
|
|
@@ -35,11 +35,15 @@ const focusOnInput = () => {
|
|
|
35
35
|
};
|
|
36
36
|
const toggle = () => open = !open;
|
|
37
37
|
const clickArrow = () => {
|
|
38
|
+
if (disabled)
|
|
39
|
+
return;
|
|
38
40
|
toggle();
|
|
39
41
|
if (open)
|
|
40
42
|
focusOnInput();
|
|
41
43
|
};
|
|
42
44
|
const onInputKeyPress = (e) => {
|
|
45
|
+
if (disabled)
|
|
46
|
+
return;
|
|
43
47
|
if (e.key == "Escape") {
|
|
44
48
|
open = false;
|
|
45
49
|
return;
|
|
@@ -80,6 +84,8 @@ const applyFilter = () => {
|
|
|
80
84
|
filteredItems = searchText && isSeachable ? items.map((item, index) => ({ ...item, index })).filter((item) => item.name.toLowerCase().includes(searchText)) : items.map((item, index) => ({ ...item, index }));
|
|
81
85
|
};
|
|
82
86
|
const clear = () => {
|
|
87
|
+
if (disabled)
|
|
88
|
+
return;
|
|
83
89
|
text = "";
|
|
84
90
|
value = "";
|
|
85
91
|
triggerSearch();
|
|
@@ -97,9 +103,9 @@ triggerSearch();
|
|
|
97
103
|
|
|
98
104
|
<FormField {size}>
|
|
99
105
|
{#if $$slots.default}
|
|
100
|
-
<FormLabel {id} {required}><slot /></FormLabel>
|
|
106
|
+
<FormLabel {id} {required} {disabled}><slot /></FormLabel>
|
|
101
107
|
{/if}
|
|
102
|
-
<div class:
|
|
108
|
+
<div class="{open ? 'open' : 'closed'} {disabled ? 'disabled' : 'enabled'}">
|
|
103
109
|
<input
|
|
104
110
|
type="text"
|
|
105
111
|
{id}
|
|
@@ -112,11 +118,13 @@ triggerSearch();
|
|
|
112
118
|
data-value={value}
|
|
113
119
|
data-text={text}
|
|
114
120
|
/>
|
|
115
|
-
<button type="button" class="icon" on:click={clickArrow} on:keydown={clickArrow}>
|
|
121
|
+
<button type="button" class="icon" on:click={clickArrow} on:keydown={clickArrow} {disabled}>
|
|
116
122
|
<AngleUpIcon />
|
|
117
123
|
</button>
|
|
118
124
|
{#if text && isSeachable}
|
|
119
|
-
<button type="button" class="clear" on:click={clear} on:keydown={clear}
|
|
125
|
+
<button type="button" class="clear" on:click={clear} on:keydown={clear} {disabled}>
|
|
126
|
+
X
|
|
127
|
+
</button>
|
|
120
128
|
{/if}
|
|
121
129
|
<div class="dropdown">
|
|
122
130
|
<Menu
|
|
@@ -136,6 +144,11 @@ triggerSearch();
|
|
|
136
144
|
<style>div {
|
|
137
145
|
position: relative;
|
|
138
146
|
}
|
|
147
|
+
div.disabled {
|
|
148
|
+
opacity: 0.5;
|
|
149
|
+
cursor: not-allowed;
|
|
150
|
+
pointer-events: none;
|
|
151
|
+
}
|
|
139
152
|
div input {
|
|
140
153
|
width: 100%;
|
|
141
154
|
padding: 0.5rem 1rem;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<div>
|
|
2
|
+
<slot />
|
|
3
|
+
</div>
|
|
4
|
+
|
|
5
|
+
<style>
|
|
6
|
+
div {
|
|
7
|
+
display: grid;
|
|
8
|
+
width: 100%;
|
|
9
|
+
grid-template-columns: repeat(12, 1fr);
|
|
10
|
+
grid-template-rows: auto;
|
|
11
|
+
grid-gap: 1rem;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
align-items: center;
|
|
14
|
+
justify-items: center;
|
|
15
|
+
align-content: center;
|
|
16
|
+
}
|
|
17
|
+
</style>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} GridProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} GridEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} GridSlots */
|
|
4
|
+
export default class Grid extends SvelteComponent<{
|
|
5
|
+
[x: string]: never;
|
|
6
|
+
}, {
|
|
7
|
+
[evt: string]: CustomEvent<any>;
|
|
8
|
+
}, {
|
|
9
|
+
default: {};
|
|
10
|
+
}> {
|
|
11
|
+
}
|
|
12
|
+
export type GridProps = typeof __propDef.props;
|
|
13
|
+
export type GridEvents = typeof __propDef.events;
|
|
14
|
+
export type GridSlots = typeof __propDef.slots;
|
|
15
|
+
import { SvelteComponent } from "svelte";
|
|
16
|
+
declare const __propDef: {
|
|
17
|
+
props: {
|
|
18
|
+
[x: string]: never;
|
|
19
|
+
};
|
|
20
|
+
events: {
|
|
21
|
+
[evt: string]: CustomEvent<any>;
|
|
22
|
+
};
|
|
23
|
+
slots: {
|
|
24
|
+
default: {};
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
export {};
|
|
@@ -1,9 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import type { Subscribable } from '../../index.js';
|
|
2
|
+
export type TabStyle = 'traditional' | 'underline' | 'outline' | 'overline';
|
|
3
|
+
export type TabDefinition = {
|
|
4
|
+
id: string;
|
|
5
|
+
name: string;
|
|
6
|
+
};
|
|
4
7
|
export interface TabContext {
|
|
5
|
-
active:
|
|
8
|
+
active: Subscribable<string | null>;
|
|
6
9
|
style: TabStyle;
|
|
7
|
-
|
|
10
|
+
register: (id: string, name: string, isActive: boolean) => void;
|
|
8
11
|
}
|
|
9
12
|
export declare const tabContext = "tabContext";
|
|
@@ -1,23 +1,157 @@
|
|
|
1
1
|
<script>import { writable } from "svelte/store";
|
|
2
2
|
import { setContext } from "svelte";
|
|
3
3
|
import { tabContext } from "./tab-context.js";
|
|
4
|
+
import { subscribable } from "../../index.js";
|
|
4
5
|
export let style = "traditional";
|
|
5
|
-
|
|
6
|
+
const tabs = writable([]);
|
|
7
|
+
const register = (id, name, isActive) => {
|
|
8
|
+
tabs.update((value) => [...value, { id, name }]);
|
|
9
|
+
if (isActive)
|
|
10
|
+
active.set(id);
|
|
11
|
+
};
|
|
12
|
+
const active = writable(null);
|
|
13
|
+
const selectTab = (id) => {
|
|
14
|
+
active.set(id);
|
|
15
|
+
};
|
|
6
16
|
const ctx = {
|
|
7
|
-
active:
|
|
17
|
+
active: subscribable(active),
|
|
8
18
|
style,
|
|
9
|
-
|
|
19
|
+
register
|
|
10
20
|
};
|
|
11
21
|
setContext(tabContext, ctx);
|
|
12
22
|
</script>
|
|
13
23
|
|
|
14
|
-
<
|
|
15
|
-
<
|
|
16
|
-
|
|
24
|
+
<section class="tab-group {style}">
|
|
25
|
+
<div class="tab-head">
|
|
26
|
+
<nav>
|
|
27
|
+
{#each $tabs as tab}
|
|
28
|
+
<li class={$active == tab.id ? 'active' : 'inactive'}>
|
|
29
|
+
<button on:click={() => selectTab(tab.id)}>
|
|
30
|
+
{tab.name}
|
|
31
|
+
</button>
|
|
32
|
+
</li>
|
|
33
|
+
{/each}
|
|
34
|
+
</nav>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="tab-content">
|
|
37
|
+
<slot />
|
|
38
|
+
</div>
|
|
39
|
+
</section>
|
|
17
40
|
|
|
18
|
-
<style
|
|
41
|
+
<style>.tab-head {
|
|
42
|
+
height: 2rem;
|
|
19
43
|
position: relative;
|
|
20
|
-
|
|
44
|
+
}
|
|
45
|
+
.tab-head nav {
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: row;
|
|
48
|
+
flex-wrap: nowrap;
|
|
49
|
+
justify-content: flex-start;
|
|
50
|
+
align-items: center;
|
|
51
|
+
box-sizing: border-box;
|
|
52
|
+
height: 2rem;
|
|
53
|
+
overflow: hidden;
|
|
21
54
|
width: 100%;
|
|
22
|
-
|
|
55
|
+
}
|
|
56
|
+
.tab-head li {
|
|
57
|
+
list-style: none;
|
|
58
|
+
margin: 0;
|
|
59
|
+
padding: 0;
|
|
60
|
+
}
|
|
61
|
+
.tab-head li.active button {
|
|
62
|
+
font-weight: 700;
|
|
63
|
+
cursor: default;
|
|
64
|
+
}
|
|
65
|
+
.tab-head button {
|
|
66
|
+
appearance: none;
|
|
67
|
+
border: none 0;
|
|
68
|
+
background: transparent;
|
|
69
|
+
line-height: 1.8rem;
|
|
70
|
+
height: 2rem;
|
|
71
|
+
padding-left: 1rem;
|
|
72
|
+
padding-right: 1rem;
|
|
73
|
+
cursor: pointer;
|
|
74
|
+
position: relative;
|
|
75
|
+
z-index: 2;
|
|
76
|
+
}
|
|
77
|
+
.tab-head button:focus {
|
|
78
|
+
outline: none;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.tab-content {
|
|
82
|
+
padding-top: 1rem;
|
|
83
|
+
padding-bottom: 1rem;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.traditional button {
|
|
87
|
+
border-radius: 0.5rem 0.5rem 0 0;
|
|
88
|
+
}
|
|
89
|
+
.traditional .inactive button {
|
|
90
|
+
background: var(--tab-traditional-inactive-bg, transparent);
|
|
91
|
+
color: var(--tab-traditional-inactive-fg, rgb(120, 120, 120));
|
|
92
|
+
}
|
|
93
|
+
.traditional .inactive button:hover {
|
|
94
|
+
background: var(--tab-traditional-hover-bg, transparent);
|
|
95
|
+
color: var(--tab-traditional-hover-fg, rgb(180, 180, 180));
|
|
96
|
+
}
|
|
97
|
+
.traditional .active button {
|
|
98
|
+
background: var(--tab-traditional-active-bg, rgb(220, 220, 230));
|
|
99
|
+
color: var(--tab-traditional-active-fg, rgb(50, 50, 50));
|
|
100
|
+
}
|
|
101
|
+
.traditional .tab-head {
|
|
102
|
+
border-bottom: solid 0.2rem var(--tab-traditional-border, rgb(220, 220, 230));
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.underline button {
|
|
106
|
+
border-bottom: solid 0.2rem var(--tab-underline-inactive-fg, rgb(100, 100, 100));
|
|
107
|
+
}
|
|
108
|
+
.underline .tab-head {
|
|
109
|
+
border-bottom: solid 0.2rem var(--tab-underline-inactive-fg, rgb(100, 100, 100));
|
|
110
|
+
}
|
|
111
|
+
.underline .inactive button {
|
|
112
|
+
background: var(--tab-underline-inactive-bg, transparent);
|
|
113
|
+
color: var(--tab-underline-inactive-fg, rgb(100, 100, 100));
|
|
114
|
+
}
|
|
115
|
+
.underline .inactive button:hover {
|
|
116
|
+
background: var(--tab-underline-hover-bg, transparent);
|
|
117
|
+
color: var(--tab-underline-hover-fg, rgb(150, 150, 150));
|
|
118
|
+
}
|
|
119
|
+
.underline .active button {
|
|
120
|
+
color: var(--tab-underline-active-fg, rgb(255, 134, 78));
|
|
121
|
+
border-color: var(--tab-underline-active-fg, rgb(255, 134, 78));
|
|
122
|
+
background: var(--tab-underline-active-bg, rgb(80, 80, 80));
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.outline button {
|
|
126
|
+
border-radius: 0.5rem 0.5rem 0 0;
|
|
127
|
+
}
|
|
128
|
+
.outline .tab-head {
|
|
129
|
+
border-bottom: solid 0.1rem var(--tab-outline-border, rgb(220, 220, 220));
|
|
130
|
+
}
|
|
131
|
+
.outline .inactive button {
|
|
132
|
+
color: var(--tab-outline-inactive-fg, rgb(120, 120, 120));
|
|
133
|
+
}
|
|
134
|
+
.outline .active button {
|
|
135
|
+
border-style: solid;
|
|
136
|
+
border-width: 0.1rem 0.1rem 0.1rem 0.1rem;
|
|
137
|
+
border-color: var(--tab-outline-border, rgb(220, 220, 220));
|
|
138
|
+
color: var(--base-fg, rgb(220, 220, 220));
|
|
139
|
+
border-bottom-color: var(--base-bg, rgb(50, 50, 50));
|
|
140
|
+
line-height: 1.7rem;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.overline .tab-head {
|
|
144
|
+
background: var(--tab-overline-bg, rgb(100, 100, 100));
|
|
145
|
+
}
|
|
146
|
+
.overline button {
|
|
147
|
+
border-top: solid 0.2rem;
|
|
148
|
+
}
|
|
149
|
+
.overline .active button {
|
|
150
|
+
color: var(--tab-overline-active-fg, rgb(255, 134, 78));
|
|
151
|
+
border-color: var(--tab-overline-active-fg, rgb(255, 134, 78));
|
|
152
|
+
background: var(--tab-overline-active-bg, rgb(50, 50, 50));
|
|
153
|
+
}
|
|
154
|
+
.overline .inactive button {
|
|
155
|
+
border-style: none;
|
|
156
|
+
color: var(--tab-overline-fg, rgb(180, 180, 180));
|
|
23
157
|
}</style>
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
-
import type
|
|
2
|
+
import { type TabStyle } from './tab-context.js';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
5
|
style?: TabStyle | undefined;
|
|
6
|
-
squared?: boolean | undefined;
|
|
7
6
|
};
|
|
8
7
|
events: {
|
|
9
8
|
[evt: string]: CustomEvent<any>;
|
|
@@ -1,130 +1,28 @@
|
|
|
1
1
|
<script>import { createEventDispatcher, getContext, onDestroy } from "svelte";
|
|
2
2
|
import { tabContext } from "./tab-context.js";
|
|
3
|
+
import { uniqueId } from "../../index.js";
|
|
3
4
|
export let title;
|
|
4
5
|
export let active = false;
|
|
5
6
|
const dispatch = createEventDispatcher();
|
|
6
7
|
const ctx = getContext(tabContext);
|
|
7
8
|
const tabStyle = ctx.style || "traditional";
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
if (active)
|
|
13
|
-
selectThisTab();
|
|
14
|
-
const unsubscribe = ctx.active.subscribe((value) => {
|
|
15
|
-
active = value === title;
|
|
9
|
+
const id = uniqueId();
|
|
10
|
+
ctx.register(id, title, active);
|
|
11
|
+
const unsubscribe = ctx.active.subscribe((selectedId) => {
|
|
12
|
+
active = selectedId === id;
|
|
16
13
|
});
|
|
17
|
-
onDestroy(() =>
|
|
18
|
-
unsubscribe();
|
|
19
|
-
});
|
|
20
|
-
$:
|
|
21
|
-
classes = `${active ? "active" : "inactive"} ${tabStyle} ${ctx.squared ? "squared" : "rounded"}`;
|
|
14
|
+
onDestroy(() => unsubscribe());
|
|
22
15
|
</script>
|
|
23
16
|
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
</header>
|
|
30
|
-
<div class="tabContent">
|
|
31
|
-
{#if active}
|
|
32
|
-
<slot />
|
|
33
|
-
{/if}
|
|
34
|
-
</div>
|
|
35
|
-
</section>
|
|
36
|
-
|
|
37
|
-
<style>section {
|
|
38
|
-
display: inline;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.tabTitle {
|
|
42
|
-
display: inline-block;
|
|
43
|
-
cursor: pointer;
|
|
44
|
-
height: 2.2rem;
|
|
45
|
-
overflow: hidden;
|
|
46
|
-
position: relative;
|
|
47
|
-
z-index: 2;
|
|
48
|
-
}
|
|
49
|
-
.tabTitle button {
|
|
50
|
-
appearance: none;
|
|
51
|
-
background: transparent;
|
|
52
|
-
border-style: solid;
|
|
53
|
-
border-width: 0 0 0.2rem 0;
|
|
54
|
-
border-color: transparent;
|
|
55
|
-
border-radius: 0.5rem 0.5rem 0 0;
|
|
56
|
-
color: inherit;
|
|
57
|
-
cursor: pointer;
|
|
58
|
-
width: 100%;
|
|
59
|
-
height: 100%;
|
|
60
|
-
font-size: 1rem;
|
|
61
|
-
line-height: 1.8rem;
|
|
62
|
-
height: 2.2rem;
|
|
63
|
-
font-weight: 300;
|
|
64
|
-
padding: 0 1rem;
|
|
65
|
-
}
|
|
66
|
-
.tabTitle button:focus {
|
|
67
|
-
outline: none;
|
|
68
|
-
}
|
|
17
|
+
<article class:active>
|
|
18
|
+
{#if active}
|
|
19
|
+
<slot />
|
|
20
|
+
{/if}
|
|
21
|
+
</article>
|
|
69
22
|
|
|
70
|
-
|
|
23
|
+
<style>article {
|
|
71
24
|
display: none;
|
|
72
|
-
width: 100%;
|
|
73
|
-
position: absolute;
|
|
74
|
-
top: 2rem;
|
|
75
|
-
left: 0;
|
|
76
|
-
border-top: solid 0.2rem var(--tab-content-border, rgb(220, 220, 230));
|
|
77
|
-
padding-top: 1rem;
|
|
78
|
-
font-size: 1rem;
|
|
79
25
|
}
|
|
80
|
-
|
|
81
|
-
.active button {
|
|
82
|
-
font-weight: 700;
|
|
83
|
-
cursor: default;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.inactive button {
|
|
87
|
-
color: var(--tab-inactive-fg, #999);
|
|
88
|
-
}
|
|
89
|
-
.inactive button:hover {
|
|
90
|
-
color: var(--tab-hover-fg, #ccc);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.active .tabContent {
|
|
26
|
+
article.active {
|
|
94
27
|
display: block;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.squared button {
|
|
98
|
-
border-radius: 0.2rem 0.2rem 0 0;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.traditional.inactive button {
|
|
102
|
-
background: var(--tab-traditional-inactive-bg, transparent);
|
|
103
|
-
color: var(--tab-traditional-inactive-fg, rgb(100, 100, 100));
|
|
104
|
-
}
|
|
105
|
-
.traditional.inactive button:hover {
|
|
106
|
-
background: var(--tab-traditional-hover-bg, transparent);
|
|
107
|
-
color: var(--tab-traditional-hover-fg, rgb(160, 160, 160));
|
|
108
|
-
}
|
|
109
|
-
.traditional.active button {
|
|
110
|
-
background: var(--tab-traditional-active-bg, rgb(220, 220, 230));
|
|
111
|
-
color: var(--tab-traditional-active-fg, rgb(51, 51, 51));
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.underline.inactive button {
|
|
115
|
-
background: var(--tab-underline-inactive-bg, transparent);
|
|
116
|
-
color: var(--tab-underline-inactive-fg, rgb(100, 100, 100));
|
|
117
|
-
}
|
|
118
|
-
.underline.inactive button:hover {
|
|
119
|
-
background: var(--tab-underline-hover-bg, transparent);
|
|
120
|
-
color: var(--tab-underline-hover-fg, rgb(150, 150, 150));
|
|
121
|
-
}
|
|
122
|
-
.underline.active button {
|
|
123
|
-
color: var(--tab-underline-active-fg, rgb(255, 134, 78));
|
|
124
|
-
border-color: var(--tab-underline-active-fg, rgb(255, 134, 78));
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.outline.active button {
|
|
128
|
-
border-width: 0.1rem 0.1rem 0 0.1rem;
|
|
129
|
-
border-color: var(--tab-content-border, rgb(220, 220, 230));
|
|
130
28
|
}</style>
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
<script>import { createEventDispatcher, setContext } from "svelte";
|
|
2
2
|
import { writable } from "svelte/store";
|
|
3
3
|
import { subscribable } from "../../helpers/subscribable.js";
|
|
4
|
-
import Section from "../../generic/section/section.svelte";
|
|
5
4
|
import Header from "../../generic/header/header.svelte";
|
|
6
5
|
import Button from "../../forms/button/button.svelte";
|
|
7
6
|
export let title;
|
|
8
7
|
export let level = 3;
|
|
9
8
|
export let disabled = false;
|
|
9
|
+
export let onNext = async () => [];
|
|
10
|
+
export let onSubmit = async () => [];
|
|
10
11
|
let currentStep = 0;
|
|
11
12
|
const dispatch = createEventDispatcher();
|
|
12
13
|
const steps = {};
|
|
@@ -26,9 +27,19 @@ const register = (stepNumber, subtitle2) => {
|
|
|
26
27
|
steps[stepNumber] = subtitle2;
|
|
27
28
|
publish();
|
|
28
29
|
};
|
|
29
|
-
const
|
|
30
|
+
const validate = async (callback) => {
|
|
31
|
+
disabled = true;
|
|
32
|
+
const errors = await callback();
|
|
33
|
+
disabled = false;
|
|
34
|
+
dispatch("errors", errors);
|
|
35
|
+
return errors;
|
|
36
|
+
};
|
|
37
|
+
const next = async () => {
|
|
30
38
|
if (currentStep >= Object.values(steps).length || disabled)
|
|
31
39
|
return;
|
|
40
|
+
const errors = await validate(() => onNext(currentStep));
|
|
41
|
+
if (errors.length)
|
|
42
|
+
return;
|
|
32
43
|
currentStep++;
|
|
33
44
|
dispatch("next", currentStep);
|
|
34
45
|
publish();
|
|
@@ -40,9 +51,17 @@ const previous = () => {
|
|
|
40
51
|
dispatch("previous", currentStep);
|
|
41
52
|
publish();
|
|
42
53
|
};
|
|
43
|
-
const
|
|
44
|
-
disabled =
|
|
45
|
-
|
|
54
|
+
const reset = () => {
|
|
55
|
+
disabled = false;
|
|
56
|
+
currentStep = 1;
|
|
57
|
+
publish();
|
|
58
|
+
};
|
|
59
|
+
const done = async () => {
|
|
60
|
+
const errors = await validate(onSubmit);
|
|
61
|
+
if (errors.length)
|
|
62
|
+
return;
|
|
63
|
+
dispatch("done");
|
|
64
|
+
reset();
|
|
46
65
|
};
|
|
47
66
|
setContext("wizard", {
|
|
48
67
|
state: subscribable(wizardStore),
|
|
@@ -54,7 +73,7 @@ $:
|
|
|
54
73
|
$:
|
|
55
74
|
isLastStep = currentStep >= Object.values(steps).length;
|
|
56
75
|
$:
|
|
57
|
-
subtitle = steps[currentStep
|
|
76
|
+
subtitle = steps[currentStep];
|
|
58
77
|
$:
|
|
59
78
|
total = Object.values(steps).length;
|
|
60
79
|
</script>
|
|
@@ -5,11 +5,14 @@ declare const __propDef: {
|
|
|
5
5
|
title: string;
|
|
6
6
|
level?: SectionLevel | undefined;
|
|
7
7
|
disabled?: boolean | undefined;
|
|
8
|
+
onNext?: ((step: number) => Promise<string[]>) | undefined;
|
|
9
|
+
onSubmit?: (() => Promise<string[]>) | undefined;
|
|
8
10
|
};
|
|
9
11
|
events: {
|
|
10
|
-
|
|
12
|
+
done: CustomEvent<void>;
|
|
11
13
|
next: CustomEvent<number>;
|
|
12
14
|
previous: CustomEvent<number>;
|
|
15
|
+
errors: CustomEvent<string[]>;
|
|
13
16
|
} & {
|
|
14
17
|
[evt: string]: CustomEvent<any>;
|
|
15
18
|
};
|
package/dist/types/generic.d.ts
CHANGED