@marianmeres/stuic 3.59.0 → 3.60.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/actions/onboarding/OnboardingShell.svelte +22 -9
- package/dist/actions/onboarding/OnboardingShell.svelte.d.ts +2 -0
- package/dist/actions/onboarding/index.css +8 -0
- package/dist/actions/onboarding/onboarding.svelte.d.ts +2 -0
- package/dist/actions/onboarding/onboarding.svelte.js +2 -1
- package/package.json +1 -1
|
@@ -17,6 +17,8 @@
|
|
|
17
17
|
skip: () => void;
|
|
18
18
|
//
|
|
19
19
|
classControls?: string;
|
|
20
|
+
/** Whether to show the step counter (e.g. "1 / 3"). Default: true */
|
|
21
|
+
showSteps?: boolean;
|
|
20
22
|
}
|
|
21
23
|
</script>
|
|
22
24
|
|
|
@@ -38,6 +40,7 @@
|
|
|
38
40
|
prev,
|
|
39
41
|
skip,
|
|
40
42
|
classControls,
|
|
43
|
+
showSteps = true,
|
|
41
44
|
}: Props = $props();
|
|
42
45
|
|
|
43
46
|
const context: TourShellContext = $derived({
|
|
@@ -60,14 +63,23 @@
|
|
|
60
63
|
};
|
|
61
64
|
|
|
62
65
|
const ICON_SIZE = 24;
|
|
66
|
+
|
|
67
|
+
const _finishLabel = $derived(isLast ? (step.finishLabel ?? labels.finish) : "");
|
|
63
68
|
</script>
|
|
64
69
|
|
|
65
70
|
{#if shell}
|
|
66
71
|
{@render shell(context)}
|
|
67
72
|
{:else}
|
|
68
73
|
<div class="stuic-onboarding-shell">
|
|
69
|
-
{#if step.title}
|
|
70
|
-
<div class="stuic-onboarding-
|
|
74
|
+
{#if step.title || showSteps}
|
|
75
|
+
<div class="stuic-onboarding-header">
|
|
76
|
+
{#if step.title}
|
|
77
|
+
<div class="stuic-onboarding-title">{step.title}</div>
|
|
78
|
+
{/if}
|
|
79
|
+
{#if showSteps}
|
|
80
|
+
<span class="stuic-onboarding-steps">{index + 1} / {total}</span>
|
|
81
|
+
{/if}
|
|
82
|
+
</div>
|
|
71
83
|
{/if}
|
|
72
84
|
{#if step.content}
|
|
73
85
|
<div class="stuic-onboarding-content">
|
|
@@ -75,13 +87,12 @@
|
|
|
75
87
|
</div>
|
|
76
88
|
{/if}
|
|
77
89
|
<div class="stuic-onboarding-footer">
|
|
78
|
-
|
|
90
|
+
{#if !isLast}
|
|
91
|
+
<button class="stuic-onboarding-btn-skip" onclick={skip}>
|
|
92
|
+
{step.skipLabel ?? labels.skip}
|
|
93
|
+
</button>
|
|
94
|
+
{/if}
|
|
79
95
|
<div class="stuic-onboarding-actions">
|
|
80
|
-
{#if !isLast}
|
|
81
|
-
<button class="stuic-onboarding-btn-skip" onclick={skip}>
|
|
82
|
-
{step.skipLabel ?? labels.skip}
|
|
83
|
-
</button>
|
|
84
|
-
{/if}
|
|
85
96
|
{#if !isFirst}
|
|
86
97
|
<Button
|
|
87
98
|
onclick={prev}
|
|
@@ -93,14 +104,16 @@
|
|
|
93
104
|
{/if}
|
|
94
105
|
<Button
|
|
95
106
|
onclick={next}
|
|
96
|
-
class={twMerge(BUTTON_CLS, classControls)}
|
|
107
|
+
class={twMerge(BUTTON_CLS, _finishLabel && "pl-2 pr-3", classControls)}
|
|
97
108
|
{...BUTTON_PROPS}
|
|
109
|
+
aspect1={!_finishLabel}
|
|
98
110
|
intent="primary"
|
|
99
111
|
variant="solid"
|
|
100
112
|
>
|
|
101
113
|
{@html isLast
|
|
102
114
|
? iconCheck({ size: ICON_SIZE })
|
|
103
115
|
: iconChevronRight({ size: ICON_SIZE })}
|
|
116
|
+
{#if _finishLabel}{_finishLabel}{/if}
|
|
104
117
|
</Button>
|
|
105
118
|
</div>
|
|
106
119
|
</div>
|
|
@@ -14,6 +14,8 @@ export interface Props {
|
|
|
14
14
|
prev: () => void;
|
|
15
15
|
skip: () => void;
|
|
16
16
|
classControls?: string;
|
|
17
|
+
/** Whether to show the step counter (e.g. "1 / 3"). Default: true */
|
|
18
|
+
showSteps?: boolean;
|
|
17
19
|
}
|
|
18
20
|
declare const OnboardingShell: import("svelte").Component<Props, {}, "">;
|
|
19
21
|
type OnboardingShell = ReturnType<typeof OnboardingShell>;
|
|
@@ -23,6 +23,13 @@
|
|
|
23
23
|
border-radius: var(--stuic-onboarding-shell-radius, var(--stuic-radius));
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
.stuic-onboarding-header {
|
|
27
|
+
display: flex;
|
|
28
|
+
align-items: baseline;
|
|
29
|
+
justify-content: space-between;
|
|
30
|
+
gap: calc(var(--spacing) * 2);
|
|
31
|
+
}
|
|
32
|
+
|
|
26
33
|
.stuic-onboarding-title {
|
|
27
34
|
font-weight: 600;
|
|
28
35
|
font-size: var(--stuic-onboarding-title-size);
|
|
@@ -50,6 +57,7 @@
|
|
|
50
57
|
display: flex;
|
|
51
58
|
align-items: center;
|
|
52
59
|
gap: var(--stuic-onboarding-footer-gap);
|
|
60
|
+
margin-left: auto;
|
|
53
61
|
}
|
|
54
62
|
|
|
55
63
|
.stuic-onboarding-btn-skip {
|
|
@@ -96,6 +96,8 @@ export interface TourOptions {
|
|
|
96
96
|
indexOffset?: number;
|
|
97
97
|
/** Overrides steps.length for display purposes (the `total` value passed to the shell) */
|
|
98
98
|
totalSteps?: number;
|
|
99
|
+
/** Whether to show the step counter (e.g. "1 / 3") in the default shell. Default: true */
|
|
100
|
+
showSteps?: boolean;
|
|
99
101
|
}
|
|
100
102
|
/**
|
|
101
103
|
* Creates a multi-step onboarding tour on top of the spotlight primitive.
|
|
@@ -45,7 +45,7 @@ export function createTour(options) {
|
|
|
45
45
|
next: "Next",
|
|
46
46
|
prev: "Back",
|
|
47
47
|
skip: "Skip",
|
|
48
|
-
finish: "
|
|
48
|
+
finish: "",
|
|
49
49
|
...options.labels,
|
|
50
50
|
};
|
|
51
51
|
// Escape key listener — active only while tour is running
|
|
@@ -99,6 +99,7 @@ export function createTour(options) {
|
|
|
99
99
|
isLast: displayIndex === displayTotal - 1,
|
|
100
100
|
labels: resolvedLabels,
|
|
101
101
|
shell: options.shell,
|
|
102
|
+
showSteps: options.showSteps ?? true,
|
|
102
103
|
next,
|
|
103
104
|
prev,
|
|
104
105
|
skip,
|