@marianmeres/stuic 3.60.0 → 3.61.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.
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import type { Snippet } from "svelte";
|
|
3
3
|
import type { TourStepDef, TourLabels, TourShellContext } from "./onboarding.svelte.js";
|
|
4
|
+
import type { Props as ButtonProps } from "../../components/Button/Button.svelte";
|
|
5
|
+
|
|
6
|
+
type ButtonOverrides = Pick<ButtonProps, "variant" | "intent" | "size" | "roundedFull">;
|
|
4
7
|
|
|
5
8
|
export interface Props {
|
|
6
9
|
step: TourStepDef;
|
|
@@ -19,6 +22,10 @@
|
|
|
19
22
|
classControls?: string;
|
|
20
23
|
/** Whether to show the step counter (e.g. "1 / 3"). Default: true */
|
|
21
24
|
showSteps?: boolean;
|
|
25
|
+
/** Override props for the prev button */
|
|
26
|
+
prevButtonProps?: ButtonOverrides;
|
|
27
|
+
/** Override props for the next/finish button */
|
|
28
|
+
nextButtonProps?: ButtonOverrides;
|
|
22
29
|
}
|
|
23
30
|
</script>
|
|
24
31
|
|
|
@@ -41,6 +48,8 @@
|
|
|
41
48
|
skip,
|
|
42
49
|
classControls,
|
|
43
50
|
showSteps = true,
|
|
51
|
+
prevButtonProps,
|
|
52
|
+
nextButtonProps,
|
|
44
53
|
}: Props = $props();
|
|
45
54
|
|
|
46
55
|
const context: TourShellContext = $derived({
|
|
@@ -98,6 +107,7 @@
|
|
|
98
107
|
onclick={prev}
|
|
99
108
|
class={twMerge(BUTTON_CLS, classControls)}
|
|
100
109
|
{...BUTTON_PROPS}
|
|
110
|
+
{...prevButtonProps}
|
|
101
111
|
>
|
|
102
112
|
{@html iconChevronLeft({ size: ICON_SIZE })}
|
|
103
113
|
</Button>
|
|
@@ -109,6 +119,7 @@
|
|
|
109
119
|
aspect1={!_finishLabel}
|
|
110
120
|
intent="primary"
|
|
111
121
|
variant="solid"
|
|
122
|
+
{...nextButtonProps}
|
|
112
123
|
>
|
|
113
124
|
{@html isLast
|
|
114
125
|
? iconCheck({ size: ICON_SIZE })
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import type { Snippet } from "svelte";
|
|
2
2
|
import type { TourStepDef, TourLabels, TourShellContext } from "./onboarding.svelte.js";
|
|
3
|
+
import type { Props as ButtonProps } from "../../components/Button/Button.svelte";
|
|
4
|
+
type ButtonOverrides = Pick<ButtonProps, "variant" | "intent" | "size" | "roundedFull">;
|
|
3
5
|
export interface Props {
|
|
4
6
|
step: TourStepDef;
|
|
5
7
|
/** 0-based index of this step */
|
|
@@ -16,6 +18,10 @@ export interface Props {
|
|
|
16
18
|
classControls?: string;
|
|
17
19
|
/** Whether to show the step counter (e.g. "1 / 3"). Default: true */
|
|
18
20
|
showSteps?: boolean;
|
|
21
|
+
/** Override props for the prev button */
|
|
22
|
+
prevButtonProps?: ButtonOverrides;
|
|
23
|
+
/** Override props for the next/finish button */
|
|
24
|
+
nextButtonProps?: ButtonOverrides;
|
|
19
25
|
}
|
|
20
26
|
declare const OnboardingShell: import("svelte").Component<Props, {}, "">;
|
|
21
27
|
type OnboardingShell = ReturnType<typeof OnboardingShell>;
|
|
@@ -1,6 +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
5
|
/**
|
|
5
6
|
* Definition of a single step in an onboarding tour.
|
|
6
7
|
*/
|
|
@@ -98,6 +99,10 @@ export interface TourOptions {
|
|
|
98
99
|
totalSteps?: number;
|
|
99
100
|
/** Whether to show the step counter (e.g. "1 / 3") in the default shell. Default: true */
|
|
100
101
|
showSteps?: boolean;
|
|
102
|
+
/** Override props (variant, intent, size, roundedFull) for the prev button */
|
|
103
|
+
prevButtonProps?: ShellProps["prevButtonProps"];
|
|
104
|
+
/** Override props (variant, intent, size, roundedFull) for the next/finish button */
|
|
105
|
+
nextButtonProps?: ShellProps["nextButtonProps"];
|
|
101
106
|
}
|
|
102
107
|
/**
|
|
103
108
|
* Creates a multi-step onboarding tour on top of the spotlight primitive.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { spotlight } from "../spotlight/spotlight.svelte.js";
|
|
2
|
-
import OnboardingShell from "./OnboardingShell.svelte";
|
|
2
|
+
import OnboardingShell, {} from "./OnboardingShell.svelte";
|
|
3
3
|
import { StorageAbstraction } from "../../utils/storage-abstraction.js";
|
|
4
4
|
/**
|
|
5
5
|
* Creates a multi-step onboarding tour on top of the spotlight primitive.
|
|
@@ -100,6 +100,8 @@ export function createTour(options) {
|
|
|
100
100
|
labels: resolvedLabels,
|
|
101
101
|
shell: options.shell,
|
|
102
102
|
showSteps: options.showSteps ?? true,
|
|
103
|
+
prevButtonProps: options.prevButtonProps,
|
|
104
|
+
nextButtonProps: options.nextButtonProps,
|
|
103
105
|
next,
|
|
104
106
|
prev,
|
|
105
107
|
skip,
|