element-plus
Version:
A Component Library for Vue 3
131 lines (130 loc) • 6.71 kB
TypeScript
import type { TourContentProps } from './content';
import type { CSSProperties, Component, ExtractPublicPropTypes } from 'vue';
import type Tour from './tour.vue';
import type { TourGap, TourMask } from './types';
export interface TourProps {
/**
* @description open tour
*/
modelValue?: boolean;
/**
* @description what is the current step
*/
current?: number;
/**
* @description whether to show the arrow
*/
showArrow?: boolean;
/**
* @description whether to show a close button
*/
showClose?: boolean;
/**
* @description custom close icon
*/
closeIcon?: string | Component;
/**
* @description position of the guide card relative to the target element
*/
placement?: TourContentProps['placement'];
/**
* @description custom style for content
*/
contentStyle?: CSSProperties;
/**
* @description whether to enable masking, change mask style and fill color by pass custom props
*/
mask?: TourMask;
/**
* @description transparent gap between mask and target
*/
gap?: TourGap;
/**
* @description tour's zIndex
*/
zIndex?: number;
/**
* @description support pass custom scrollIntoView options
*/
scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
/**
* @description type, affects the background color and text color
*/
type?: 'default' | 'primary';
/**
* @description which element the TourContent appends to
*/
appendTo?: string | HTMLElement;
/**
* @description whether the Tour can be closed by pressing ESC
*/
closeOnPressEscape?: boolean;
/**
* @description whether the target element can be clickable, when using mask
*/
targetAreaClickable?: boolean;
}
/**
* @deprecated Removed after 3.0.0, Use `TourProps` instead.
*/
export declare const tourProps: {
modelValue: BooleanConstructor;
current: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
closeIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | Component) & {}) | (() => string | Component) | ((new (...args: any[]) => (string | Component) & {}) | (() => string | Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
placement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/utils").Placement) | ((new (...args: any[]) => "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("@floating-ui/utils").Placement))[], "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
contentStyle: {
readonly type: import("vue").PropType<CSSProperties>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
mask: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => boolean | {
style?: CSSProperties;
color?: string;
}) | (() => TourMask) | ((new (...args: any[]) => boolean | {
style?: CSSProperties;
color?: string;
}) | (() => TourMask))[], unknown, unknown, boolean, boolean>;
gap: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => TourGap) | (() => TourGap) | ((new (...args: any[]) => TourGap) | (() => TourGap))[], unknown, unknown, () => {
offset: number;
radius: number;
}, boolean>;
zIndex: {
readonly type: import("vue").PropType<number>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
scrollIntoViewOptions: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions) | ((new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions))[], unknown, unknown, () => {
block: string;
}, boolean>;
type: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "default" | "primary") | (() => "default" | "primary") | ((new (...args: any[]) => "default" | "primary") | (() => "default" | "primary"))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
appendTo: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>) | ((new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>))[], unknown, unknown, string, boolean>;
closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
targetAreaClickable: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
};
/**
* @deprecated Removed after 3.0.0, Use `TourProps` instead.
*/
export type TourPropsPublic = ExtractPublicPropTypes<typeof tourProps>;
export type TourInstance = InstanceType<typeof Tour> & unknown;
export declare const tourEmits: {
"update:modelValue": (value: boolean) => boolean;
"update:current": (current: number) => boolean;
close: (current: number) => boolean;
finish: () => boolean;
change: (current: number) => boolean;
};
export type TourEmits = typeof tourEmits;