v-tutorial 0.0.0-stage → 1.0.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/README.md +339 -2
- package/README.pt-BR.md +341 -0
- package/dist/TutorialProvider.vue.d.ts +224 -0
- package/dist/TutorialStep.vue.d.ts +66 -0
- package/dist/domResolver.d.ts +12 -0
- package/dist/index.d.ts +25 -0
- package/dist/keys.d.ts +3 -0
- package/dist/positioning.d.ts +23 -0
- package/dist/responsive.d.ts +5 -0
- package/dist/style.css +1 -0
- package/dist/types.d.ts +152 -0
- package/dist/useTutorial.d.ts +180 -0
- package/dist/v-tutorial.js +1214 -0
- package/dist/v-tutorial.umd.cjs +1 -0
- package/package.json +88 -3
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import { Directive, Ref } from 'vue';
|
|
2
|
+
import { TutorialStep, TutorialTargetConfig, TutorialContext, TutorialDirection, TutorialOptions, TutorialActionMap, TutorialBreakpointName, TutorialBreakpointsConfig } from './types';
|
|
3
|
+
import { resolveStepElement, resolveStepElements, getStepBoundingRect } from './domResolver';
|
|
4
|
+
declare function runRegisteredAction(name: string, ...args: any[]): Promise<any>;
|
|
5
|
+
declare function runActionMap(actions?: TutorialActionMap): Promise<void>;
|
|
6
|
+
declare function getContext(direction?: TutorialDirection): TutorialContext;
|
|
7
|
+
declare function goToStep(indexOrId: number | string, direction?: TutorialDirection): Promise<void>;
|
|
8
|
+
declare function nextStep(): Promise<void>;
|
|
9
|
+
declare function prevStep(): Promise<void>;
|
|
10
|
+
declare function registerSteps(customSteps: TutorialStep[]): void;
|
|
11
|
+
declare function registerDeclarativeStep(step: TutorialStep): void;
|
|
12
|
+
declare function updateDeclarativeStep(step: TutorialStep): void;
|
|
13
|
+
declare function unregisterDeclarativeStep(id: string): void;
|
|
14
|
+
declare function configureTutorial(options: Partial<TutorialOptions>): void;
|
|
15
|
+
declare function startTutorial(customSteps?: TutorialStep[], force?: boolean): Promise<void>;
|
|
16
|
+
declare function restartTutorial(): Promise<void>;
|
|
17
|
+
declare function completeTutorial(): void;
|
|
18
|
+
declare function endTutorial(markAsCompleted?: boolean): void;
|
|
19
|
+
export declare function useTutorial(options?: Partial<TutorialOptions>): {
|
|
20
|
+
isActive: Ref<boolean, boolean>;
|
|
21
|
+
steps: import('vue').ComputedRef<TutorialStep[]>;
|
|
22
|
+
currentStepIndex: Ref<number, number>;
|
|
23
|
+
currentStep: import('vue').ComputedRef<TutorialStep | null>;
|
|
24
|
+
totalSteps: import('vue').ComputedRef<number>;
|
|
25
|
+
progress: import('vue').ComputedRef<number>;
|
|
26
|
+
isFirstStep: import('vue').ComputedRef<boolean>;
|
|
27
|
+
isLastStep: import('vue').ComputedRef<boolean>;
|
|
28
|
+
isTransitioning: Ref<boolean, boolean>;
|
|
29
|
+
lastDirection: Ref<TutorialDirection, TutorialDirection>;
|
|
30
|
+
activeBreakpoint: import('vue').ComputedRef<TutorialBreakpointName>;
|
|
31
|
+
viewportWidth: Ref<number, number>;
|
|
32
|
+
isMobileViewport: import('vue').ComputedRef<boolean>;
|
|
33
|
+
mergedBreakpoints: import('vue').ComputedRef<TutorialBreakpointsConfig>;
|
|
34
|
+
storageKey: import('vue').ComputedRef<string>;
|
|
35
|
+
globalOptions: Ref<{
|
|
36
|
+
storageKey?: string | undefined;
|
|
37
|
+
autoScroll?: boolean | undefined;
|
|
38
|
+
scrollBehavior?: ScrollBehavior | undefined;
|
|
39
|
+
spotlightPadding?: number | undefined;
|
|
40
|
+
cardWidth?: number | undefined;
|
|
41
|
+
showArrow?: boolean | undefined;
|
|
42
|
+
unstyled?: boolean | undefined;
|
|
43
|
+
breakpoints?: {
|
|
44
|
+
xs?: number | undefined;
|
|
45
|
+
sm?: number | undefined;
|
|
46
|
+
md?: number | undefined;
|
|
47
|
+
lg?: number | undefined;
|
|
48
|
+
xl?: number | undefined;
|
|
49
|
+
xxl?: number | undefined;
|
|
50
|
+
} | undefined;
|
|
51
|
+
mobileSheetOnAuto?: boolean | undefined;
|
|
52
|
+
labels?: {
|
|
53
|
+
skipTutorial?: string | undefined;
|
|
54
|
+
previous?: string | undefined;
|
|
55
|
+
next?: string | undefined;
|
|
56
|
+
finish?: string | undefined;
|
|
57
|
+
waitingClick?: string | undefined;
|
|
58
|
+
interactiveBadge?: string | undefined;
|
|
59
|
+
defaultHint?: string | undefined;
|
|
60
|
+
stepCounter?: ((current: number, total: number) => string) | undefined;
|
|
61
|
+
} | undefined;
|
|
62
|
+
classes?: {
|
|
63
|
+
root?: string | undefined;
|
|
64
|
+
backdrop?: string | undefined;
|
|
65
|
+
shield?: string | undefined;
|
|
66
|
+
spotlight?: string | undefined;
|
|
67
|
+
card?: string | undefined;
|
|
68
|
+
arrow?: string | undefined;
|
|
69
|
+
header?: string | undefined;
|
|
70
|
+
badge?: string | undefined;
|
|
71
|
+
modeTag?: string | undefined;
|
|
72
|
+
body?: string | undefined;
|
|
73
|
+
title?: string | undefined;
|
|
74
|
+
content?: string | undefined;
|
|
75
|
+
hintBanner?: string | undefined;
|
|
76
|
+
progressContainer?: string | undefined;
|
|
77
|
+
progressBar?: string | undefined;
|
|
78
|
+
footer?: string | undefined;
|
|
79
|
+
skipButton?: string | undefined;
|
|
80
|
+
prevButton?: string | undefined;
|
|
81
|
+
nextButton?: string | undefined;
|
|
82
|
+
waitPill?: string | undefined;
|
|
83
|
+
} | undefined;
|
|
84
|
+
router?: {
|
|
85
|
+
currentRoute: {
|
|
86
|
+
value: {
|
|
87
|
+
path: string;
|
|
88
|
+
};
|
|
89
|
+
};
|
|
90
|
+
push: (to: string) => Promise<any> | any;
|
|
91
|
+
} | undefined;
|
|
92
|
+
}, TutorialOptions | {
|
|
93
|
+
storageKey?: string | undefined;
|
|
94
|
+
autoScroll?: boolean | undefined;
|
|
95
|
+
scrollBehavior?: ScrollBehavior | undefined;
|
|
96
|
+
spotlightPadding?: number | undefined;
|
|
97
|
+
cardWidth?: number | undefined;
|
|
98
|
+
showArrow?: boolean | undefined;
|
|
99
|
+
unstyled?: boolean | undefined;
|
|
100
|
+
breakpoints?: {
|
|
101
|
+
xs?: number | undefined;
|
|
102
|
+
sm?: number | undefined;
|
|
103
|
+
md?: number | undefined;
|
|
104
|
+
lg?: number | undefined;
|
|
105
|
+
xl?: number | undefined;
|
|
106
|
+
xxl?: number | undefined;
|
|
107
|
+
} | undefined;
|
|
108
|
+
mobileSheetOnAuto?: boolean | undefined;
|
|
109
|
+
labels?: {
|
|
110
|
+
skipTutorial?: string | undefined;
|
|
111
|
+
previous?: string | undefined;
|
|
112
|
+
next?: string | undefined;
|
|
113
|
+
finish?: string | undefined;
|
|
114
|
+
waitingClick?: string | undefined;
|
|
115
|
+
interactiveBadge?: string | undefined;
|
|
116
|
+
defaultHint?: string | undefined;
|
|
117
|
+
stepCounter?: ((current: number, total: number) => string) | undefined;
|
|
118
|
+
} | undefined;
|
|
119
|
+
classes?: {
|
|
120
|
+
root?: string | undefined;
|
|
121
|
+
backdrop?: string | undefined;
|
|
122
|
+
shield?: string | undefined;
|
|
123
|
+
spotlight?: string | undefined;
|
|
124
|
+
card?: string | undefined;
|
|
125
|
+
arrow?: string | undefined;
|
|
126
|
+
header?: string | undefined;
|
|
127
|
+
badge?: string | undefined;
|
|
128
|
+
modeTag?: string | undefined;
|
|
129
|
+
body?: string | undefined;
|
|
130
|
+
title?: string | undefined;
|
|
131
|
+
content?: string | undefined;
|
|
132
|
+
hintBanner?: string | undefined;
|
|
133
|
+
progressContainer?: string | undefined;
|
|
134
|
+
progressBar?: string | undefined;
|
|
135
|
+
footer?: string | undefined;
|
|
136
|
+
skipButton?: string | undefined;
|
|
137
|
+
prevButton?: string | undefined;
|
|
138
|
+
nextButton?: string | undefined;
|
|
139
|
+
waitPill?: string | undefined;
|
|
140
|
+
} | undefined;
|
|
141
|
+
router?: {
|
|
142
|
+
currentRoute: {
|
|
143
|
+
value: {
|
|
144
|
+
path: string;
|
|
145
|
+
};
|
|
146
|
+
};
|
|
147
|
+
push: (to: string) => Promise<any> | any;
|
|
148
|
+
} | undefined;
|
|
149
|
+
}>;
|
|
150
|
+
configureTutorial: typeof configureTutorial;
|
|
151
|
+
registerSteps: typeof registerSteps;
|
|
152
|
+
registerDeclarativeStep: typeof registerDeclarativeStep;
|
|
153
|
+
updateDeclarativeStep: typeof updateDeclarativeStep;
|
|
154
|
+
unregisterDeclarativeStep: typeof unregisterDeclarativeStep;
|
|
155
|
+
startTutorial: typeof startTutorial;
|
|
156
|
+
restartTutorial: typeof restartTutorial;
|
|
157
|
+
nextStep: typeof nextStep;
|
|
158
|
+
prevStep: typeof prevStep;
|
|
159
|
+
goToStep: typeof goToStep;
|
|
160
|
+
endTutorial: typeof endTutorial;
|
|
161
|
+
completeTutorial: typeof completeTutorial;
|
|
162
|
+
resolveStepElement: typeof resolveStepElement;
|
|
163
|
+
resolveStepElements: typeof resolveStepElements;
|
|
164
|
+
getStepBoundingRect: typeof getStepBoundingRect;
|
|
165
|
+
registerTarget: (elOrRef: HTMLElement | Ref<HTMLElement | null>, configOrId: string | TutorialTargetConfig) => void;
|
|
166
|
+
wrapTutorialAction: <T extends (...args: any[]) => any>(stepOrTargetId: string, nativeFn: T, wrapOptions?: {
|
|
167
|
+
tutorialFn?: (...args: Parameters<T>) => any;
|
|
168
|
+
preventNativeWhenActive?: boolean;
|
|
169
|
+
autoAdvance?: boolean;
|
|
170
|
+
}) => (...args: Parameters<T>) => Promise<any>;
|
|
171
|
+
registerAction: (name: string, fn: (...args: any[]) => any) => void;
|
|
172
|
+
runRegisteredAction: typeof runRegisteredAction;
|
|
173
|
+
runActionMap: typeof runActionMap;
|
|
174
|
+
onFinish: (cb: (ctx: TutorialContext) => void) => () => boolean;
|
|
175
|
+
onStop: (cb: (ctx: TutorialContext) => void) => () => boolean;
|
|
176
|
+
onStepChange: (cb: (ctx: TutorialContext) => void) => () => boolean;
|
|
177
|
+
getContext: typeof getContext;
|
|
178
|
+
};
|
|
179
|
+
export declare const vTutorial: Directive<HTMLElement, string | TutorialTargetConfig | undefined>;
|
|
180
|
+
export {};
|