@marianmeres/stuic 3.62.0 → 3.63.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.
|
@@ -8,6 +8,8 @@
|
|
|
8
8
|
"variant" | "intent" | "size" | "roundedFull" | "class"
|
|
9
9
|
>;
|
|
10
10
|
|
|
11
|
+
export type IconFn = (props?: Partial<{ size: number }>) => string;
|
|
12
|
+
|
|
11
13
|
export interface Props {
|
|
12
14
|
step: TourStepDef;
|
|
13
15
|
/** 0-based index of this step */
|
|
@@ -29,6 +31,12 @@
|
|
|
29
31
|
prevButtonProps?: ButtonOverrides;
|
|
30
32
|
/** Override props for the next/finish button */
|
|
31
33
|
nextButtonProps?: ButtonOverrides;
|
|
34
|
+
/** Custom icon for the prev button. Default: iconChevronLeft */
|
|
35
|
+
iconPrev?: IconFn;
|
|
36
|
+
/** Custom icon for the next button. Default: iconChevronRight */
|
|
37
|
+
iconNext?: IconFn;
|
|
38
|
+
/** Custom icon for the finish (last step) button. Default: iconCheck */
|
|
39
|
+
iconFinish?: IconFn;
|
|
32
40
|
}
|
|
33
41
|
</script>
|
|
34
42
|
|
|
@@ -54,6 +62,9 @@
|
|
|
54
62
|
showSteps = true,
|
|
55
63
|
prevButtonProps,
|
|
56
64
|
nextButtonProps,
|
|
65
|
+
iconPrev = iconChevronLeft,
|
|
66
|
+
iconNext = iconChevronRight,
|
|
67
|
+
iconFinish = iconCheck,
|
|
57
68
|
}: Props = $props();
|
|
58
69
|
|
|
59
70
|
const context: TourShellContext = $derived({
|
|
@@ -113,7 +124,7 @@
|
|
|
113
124
|
{...BUTTON_PROPS}
|
|
114
125
|
{...omit(prevButtonProps ?? {}, "class")}
|
|
115
126
|
>
|
|
116
|
-
{@html
|
|
127
|
+
{@html iconPrev({ size: ICON_SIZE })}
|
|
117
128
|
</Button>
|
|
118
129
|
{/if}
|
|
119
130
|
<Button
|
|
@@ -131,8 +142,8 @@
|
|
|
131
142
|
{...omit(nextButtonProps ?? {}, "class")}
|
|
132
143
|
>
|
|
133
144
|
{@html isLast
|
|
134
|
-
?
|
|
135
|
-
:
|
|
145
|
+
? iconFinish({ size: ICON_SIZE })
|
|
146
|
+
: iconNext({ size: ICON_SIZE })}
|
|
136
147
|
{#if _finishLabel}{_finishLabel}{/if}
|
|
137
148
|
</Button>
|
|
138
149
|
</div>
|
|
@@ -2,6 +2,9 @@ import type { Snippet } from "svelte";
|
|
|
2
2
|
import type { TourStepDef, TourLabels, TourShellContext } from "./onboarding.svelte.js";
|
|
3
3
|
import type { Props as ButtonProps } from "../../components/Button/Button.svelte";
|
|
4
4
|
type ButtonOverrides = Pick<ButtonProps, "variant" | "intent" | "size" | "roundedFull" | "class">;
|
|
5
|
+
export type IconFn = (props?: Partial<{
|
|
6
|
+
size: number;
|
|
7
|
+
}>) => string;
|
|
5
8
|
export interface Props {
|
|
6
9
|
step: TourStepDef;
|
|
7
10
|
/** 0-based index of this step */
|
|
@@ -22,6 +25,12 @@ export interface Props {
|
|
|
22
25
|
prevButtonProps?: ButtonOverrides;
|
|
23
26
|
/** Override props for the next/finish button */
|
|
24
27
|
nextButtonProps?: ButtonOverrides;
|
|
28
|
+
/** Custom icon for the prev button. Default: iconChevronLeft */
|
|
29
|
+
iconPrev?: IconFn;
|
|
30
|
+
/** Custom icon for the next button. Default: iconChevronRight */
|
|
31
|
+
iconNext?: IconFn;
|
|
32
|
+
/** Custom icon for the finish (last step) button. Default: iconCheck */
|
|
33
|
+
iconFinish?: IconFn;
|
|
25
34
|
}
|
|
26
35
|
declare const OnboardingShell: import("svelte").Component<Props, {}, "">;
|
|
27
36
|
type OnboardingShell = ReturnType<typeof OnboardingShell>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Snippet } from "svelte";
|
|
2
2
|
import type { SpotlightPosition } from "../spotlight/spotlight.svelte.js";
|
|
3
3
|
import type { THC } from "../../components/Thc/Thc.svelte";
|
|
4
|
-
import { type Props as ShellProps } from "./OnboardingShell.svelte";
|
|
4
|
+
import { type Props as ShellProps, type IconFn } from "./OnboardingShell.svelte";
|
|
5
5
|
/**
|
|
6
6
|
* Definition of a single step in an onboarding tour.
|
|
7
7
|
*/
|
|
@@ -103,6 +103,12 @@ export interface TourOptions {
|
|
|
103
103
|
prevButtonProps?: ShellProps["prevButtonProps"];
|
|
104
104
|
/** Override props (variant, intent, size, roundedFull) for the next/finish button */
|
|
105
105
|
nextButtonProps?: ShellProps["nextButtonProps"];
|
|
106
|
+
/** Custom icon for the prev button */
|
|
107
|
+
iconPrev?: IconFn;
|
|
108
|
+
/** Custom icon for the next button */
|
|
109
|
+
iconNext?: IconFn;
|
|
110
|
+
/** Custom icon for the finish (last step) button */
|
|
111
|
+
iconFinish?: IconFn;
|
|
106
112
|
}
|
|
107
113
|
/**
|
|
108
114
|
* Creates a multi-step onboarding tour on top of the spotlight primitive.
|
|
@@ -102,6 +102,9 @@ export function createTour(options) {
|
|
|
102
102
|
showSteps: options.showSteps ?? true,
|
|
103
103
|
prevButtonProps: options.prevButtonProps,
|
|
104
104
|
nextButtonProps: options.nextButtonProps,
|
|
105
|
+
iconPrev: options.iconPrev,
|
|
106
|
+
iconNext: options.iconNext,
|
|
107
|
+
iconFinish: options.iconFinish,
|
|
105
108
|
next,
|
|
106
109
|
prev,
|
|
107
110
|
skip,
|