sveltacular 0.0.40 → 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/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 +24 -5
- package/dist/navigation/wizard/wizard.svelte.d.ts +4 -1
- package/dist/types/generic.d.ts +0 -1
- package/package.json +1 -1
|
@@ -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),
|
|
@@ -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