-
Notifications
You must be signed in to change notification settings - Fork 138
/
types.ts
141 lines (126 loc) · 3.95 KB
/
types.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
/**
* @license
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
*/
import type { PopperPlacement } from '@idux/cdk/popper'
import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray, MaybeElement } from '@idux/cdk/utils'
import type { ButtonProps } from '@idux/components/button'
import type { DefineComponent, HTMLAttributes, PropType } from 'vue'
import { ɵOverlayPlacementDef } from '@idux/components/_private/overlay'
export type TargetPositionOrigin = 'resize' | 'scroll' | 'index' | 'visible' | 'step-update'
export interface TargetPositionInfo {
containerX: number
containerY: number
containerHeight: number
containerWidth: number
x: number
y: number
width: number
height: number
radius: number
outline: number
origin: TargetPositionOrigin
}
export interface TargetGap {
offset?: number
radius?: number
outline?: number
}
export interface TourMaskOptions {
color?: string
class?: string
container?: 'viewport' | { x: number; y: number; width: number; height: number }
outlineColor?: string
}
export type TargetGetter = () => MaybeElement | null | Promise<MaybeElement | null>
export interface TourStep {
title?: string
description?: string
gap?: number | TargetGap
mask?: boolean | TourMaskOptions
target?: MaybeElement | null | string | TargetGetter
targetDisabled?: boolean
placement?: PopperPlacement
showArrow?: boolean
nextButton?: ButtonProps | boolean
nextButtonText?: string
prevButton?: ButtonProps | boolean
prevButtonText?: string
scrollIntoViewOptions?: boolean | ScrollIntoViewOptions
beforeEnter?: () => void | Promise<void>
afterLeave?: () => void | Promise<void>
}
export type ResolvedTourStep = Pick<TourStep, 'title' | 'description' | 'beforeEnter' | 'afterLeave'> & {
target: () => HTMLElement | null | Promise<HTMLElement | null>
nextButton: ButtonProps | null
prevButton: ButtonProps | null
gap: TargetGap
index: number
} & Required<
Omit<
TourStep,
'title' | 'description' | 'target' | 'gap' | 'beforeEnter' | 'afterLeave' | 'nextButton' | 'prevButton'
>
>
export const tourProps = {
activeIndex: {
type: Number,
default: undefined,
},
visible: {
type: Boolean,
default: undefined,
},
closable: {
type: Boolean,
default: undefined,
},
closeOnClick: {
type: Boolean,
default: undefined,
},
closeOnEsc: {
type: Boolean,
default: undefined,
},
animatable: {
type: Boolean,
default: undefined,
},
gap: [Number, Object] as PropType<number | TargetGap>,
mask: {
type: [Boolean, Object] as PropType<boolean | TourMaskOptions>,
default: true,
},
offset: Array as unknown as PropType<[number, number]>,
overlayContainer: {
type: [String, HTMLElement] as PropType<string | HTMLElement>,
default: undefined,
},
placement: ɵOverlayPlacementDef,
steps: Array as PropType<TourStep[]>,
showArrow: {
type: Boolean,
default: undefined,
},
scrollIntoViewOptions: {
type: [Boolean, Object] as PropType<boolean | ScrollIntoViewOptions>,
},
targetDisabled: {
type: Boolean,
default: false,
},
zIndex: Number,
// events
onChange: [Function, Array] as PropType<MaybeArray<(current: number, pre: number) => void>>,
onClose: [Function, Array] as PropType<MaybeArray<() => void>>,
onFinish: [Function, Array] as PropType<MaybeArray<() => void>>,
'onUpdate:activeIndex': [Function, Array] as PropType<MaybeArray<(activeIndex: number) => void>>,
'onUpdate:visible': [Function, Array] as PropType<MaybeArray<(visible: boolean) => void>>,
} as const
export type TourProps = ExtractInnerPropTypes<typeof tourProps>
export type TourPublicProps = ExtractPublicPropTypes<typeof tourProps>
export type TourComponent = DefineComponent<Omit<HTMLAttributes, keyof TourPublicProps> & TourPublicProps>
export type TourInstance = InstanceType<DefineComponent<TourProps>>