120 lines
5.7 KiB
TypeScript
120 lines
5.7 KiB
TypeScript
import type { CSSProperties, Component, ExtractPublicPropTypes } from 'vue';
|
|
import type { TourBtnProps, TourMask } from './types';
|
|
import type { TourContentProps } from './content';
|
|
export interface TourStepProps {
|
|
/**
|
|
* @description get the element the guide card points to. empty makes it show in center of screen
|
|
*/
|
|
target?: string | HTMLElement | (() => HTMLElement | null) | null;
|
|
/**
|
|
* @description the title of the tour content
|
|
*/
|
|
title?: string;
|
|
/**
|
|
* @description description
|
|
*/
|
|
description?: string;
|
|
/**
|
|
* @description whether to show a close button
|
|
*/
|
|
showClose?: boolean;
|
|
/**
|
|
* @description custom close icon, default is Close
|
|
*/
|
|
closeIcon?: string | Component;
|
|
/**
|
|
* @description whether to show the arrow
|
|
*/
|
|
showArrow?: boolean;
|
|
/**
|
|
* @description position of the guide card relative to the target element
|
|
*/
|
|
placement?: TourContentProps['placement'];
|
|
/**
|
|
* @description whether to enable masking, change mask style and fill color by pass custom props
|
|
*/
|
|
mask?: TourMask;
|
|
/**
|
|
* @description custom style for content
|
|
*/
|
|
contentStyle?: CSSProperties;
|
|
/**
|
|
* @description properties of the previous button
|
|
*/
|
|
prevButtonProps?: TourBtnProps;
|
|
/**
|
|
* @description properties of the Next button
|
|
*/
|
|
nextButtonProps?: TourBtnProps;
|
|
/**
|
|
* @description support pass custom scrollIntoView options
|
|
*/
|
|
scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
|
|
/**
|
|
* @description type, affects the background color and text color
|
|
*/
|
|
type?: 'default' | 'primary';
|
|
}
|
|
/**
|
|
* @deprecated Removed after 3.0.0, Use `TourStepProps` instead.
|
|
*/
|
|
export declare const tourStepProps: {
|
|
target: {
|
|
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement | (() => HTMLElement | null)) | (() => string | HTMLElement | (() => HTMLElement | null) | null) | ((new (...args: any[]) => string | HTMLElement | (() => HTMLElement | null)) | (() => string | HTMLElement | (() => HTMLElement | null) | null))[], unknown, unknown>>;
|
|
readonly required: false;
|
|
readonly validator: ((val: unknown) => boolean) | undefined;
|
|
__epPropKey: true;
|
|
};
|
|
title: StringConstructor;
|
|
description: StringConstructor;
|
|
showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, 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;
|
|
};
|
|
showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
|
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>;
|
|
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, undefined, boolean>;
|
|
contentStyle: {
|
|
readonly type: import("vue").PropType<CSSProperties>;
|
|
readonly required: false;
|
|
readonly validator: ((val: unknown) => boolean) | undefined;
|
|
__epPropKey: true;
|
|
};
|
|
prevButtonProps: {
|
|
readonly type: import("vue").PropType<TourBtnProps>;
|
|
readonly required: false;
|
|
readonly validator: ((val: unknown) => boolean) | undefined;
|
|
__epPropKey: true;
|
|
};
|
|
nextButtonProps: {
|
|
readonly type: import("vue").PropType<TourBtnProps>;
|
|
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, undefined, 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;
|
|
};
|
|
};
|
|
/**
|
|
* @deprecated Removed after 3.0.0, Use `TourStepProps` instead.
|
|
*/
|
|
export type TourStepPropsPublic = ExtractPublicPropTypes<typeof tourStepProps>;
|
|
export declare const tourStepEmits: {
|
|
close: () => boolean;
|
|
};
|
|
export type TourStepEmits = typeof tourStepEmits;
|