@wikimedia/codex
Version:
Codex Design System for Wikimedia
358 lines (357 loc) • 12.8 kB
TypeScript
import { PropType } from 'vue';
import { ModalAction, PrimaryModalAction } from '../../types';
/**
* A modal element that overlays the current page, preventing interaction with
* other content until it is dismissed.
*/
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* Whether the dialog is visible. Should be provided via a v-model:open
* binding in the parent scope.
*/
open: {
type: BooleanConstructor;
default: boolean;
};
/**
* Title for the dialog header. Used for ARIA purposes even if no
* visible header element is displayed.
*/
title: {
type: StringConstructor;
required: true;
};
/**
* Optional subtitle for the dialog.
*/
subtitle: {
type: StringConstructor;
required: false;
default: null;
};
/**
* Whether the dialog header should hide the title & subtitle
*/
hideTitle: {
type: BooleanConstructor;
default: boolean;
};
/**
* Add an icon-only close button to the dialog header.
*
* On narrow screens, the close button is always displayed. On wide screens, it's only
* displayed if this prop is set.
*/
useCloseButton: {
type: BooleanConstructor;
default: boolean;
};
/**
* Visually-hidden label text for the icon-only close button in the header.
*
* Omit this prop to use the default value, "Close".
*/
closeButtonLabel: {
type: StringConstructor;
default: string;
validator: (value: string, props: {
[x: string]: unknown;
}) => boolean;
};
/**
* Primary user action. This will display a primary button with the specified action
* (progressive or destructive).
*/
primaryAction: {
type: PropType<PrimaryModalAction>;
default: null;
};
/**
* Default user action. This will display a normal button.
*/
defaultAction: {
type: PropType<ModalAction>;
default: null;
};
/**
* Whether action buttons should be vertically stacked and 100% width.
*/
stackedActions: {
type: BooleanConstructor;
default: boolean;
};
/**
* Selector or DOM element identifying the container the dialog should
* be rendered in. The dialog will be `<teleport>`ed to this element.
* An ID selector is recommended, e.g. `#foo-bar`, but providing an
* actual element is also supported.
*
* If this prop is not set, and the parent or one of its ancestors
* provides a teleport target using `provide( 'CdxTeleportTarget',
* '#foo-bar' )`, the provided target will be used. If there is no
* provided target, the dialog will be teleported to the end of the
* `<body>` element.
*/
target: {
type: PropType<string | HTMLElement | null>;
default: null;
};
/**
* Whether to disable the use of teleport and render the Dialog in its
* original location in the document. If this is true, the `target` prop
* is ignored.
*/
renderInPlace: {
type: BooleanConstructor;
default: boolean;
};
}>, {
close: () => void;
onBackdropClick: () => void;
onBackdropMouseDown: (e: MouseEvent) => void;
cdxIconClose: string;
labelId: string;
rootClasses: import("vue").ComputedRef<{
'cdx-dialog--vertical-actions': boolean;
'cdx-dialog--dividers': boolean;
}>;
backdrop: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
dialogElement: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
focusTrapStart: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
focusTrapEnd: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
innerTeleportTarget: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
focusFirst: () => void;
focusLast: () => void;
dialogBody: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
focusHolder: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
showFooterActions: import("vue").ComputedRef<boolean>;
useCloseButtonOrLabel: import("vue").ComputedRef<boolean>;
translatedCloseButtonLabel: import("vue").ComputedRef<string>;
computedTarget: import("vue").ComputedRef<string | HTMLElement>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("default" | "primary" | "update:open")[], "default" | "primary" | "update:open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* Whether the dialog is visible. Should be provided via a v-model:open
* binding in the parent scope.
*/
open: {
type: BooleanConstructor;
default: boolean;
};
/**
* Title for the dialog header. Used for ARIA purposes even if no
* visible header element is displayed.
*/
title: {
type: StringConstructor;
required: true;
};
/**
* Optional subtitle for the dialog.
*/
subtitle: {
type: StringConstructor;
required: false;
default: null;
};
/**
* Whether the dialog header should hide the title & subtitle
*/
hideTitle: {
type: BooleanConstructor;
default: boolean;
};
/**
* Add an icon-only close button to the dialog header.
*
* On narrow screens, the close button is always displayed. On wide screens, it's only
* displayed if this prop is set.
*/
useCloseButton: {
type: BooleanConstructor;
default: boolean;
};
/**
* Visually-hidden label text for the icon-only close button in the header.
*
* Omit this prop to use the default value, "Close".
*/
closeButtonLabel: {
type: StringConstructor;
default: string;
validator: (value: string, props: {
[x: string]: unknown;
}) => boolean;
};
/**
* Primary user action. This will display a primary button with the specified action
* (progressive or destructive).
*/
primaryAction: {
type: PropType<PrimaryModalAction>;
default: null;
};
/**
* Default user action. This will display a normal button.
*/
defaultAction: {
type: PropType<ModalAction>;
default: null;
};
/**
* Whether action buttons should be vertically stacked and 100% width.
*/
stackedActions: {
type: BooleanConstructor;
default: boolean;
};
/**
* Selector or DOM element identifying the container the dialog should
* be rendered in. The dialog will be `<teleport>`ed to this element.
* An ID selector is recommended, e.g. `#foo-bar`, but providing an
* actual element is also supported.
*
* If this prop is not set, and the parent or one of its ancestors
* provides a teleport target using `provide( 'CdxTeleportTarget',
* '#foo-bar' )`, the provided target will be used. If there is no
* provided target, the dialog will be teleported to the end of the
* `<body>` element.
*/
target: {
type: PropType<string | HTMLElement | null>;
default: null;
};
/**
* Whether to disable the use of teleport and render the Dialog in its
* original location in the document. If this is true, the `target` prop
* is ignored.
*/
renderInPlace: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
onDefault?: ((...args: any[]) => any) | undefined;
onPrimary?: ((...args: any[]) => any) | undefined;
"onUpdate:open"?: ((...args: any[]) => any) | undefined;
}>, {
open: boolean;
target: string | HTMLElement | null;
renderInPlace: boolean;
subtitle: string;
hideTitle: boolean;
useCloseButton: boolean;
closeButtonLabel: string;
primaryAction: PrimaryModalAction;
defaultAction: ModalAction;
stackedActions: boolean;
}, {}, {
CdxButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
action: {
type: PropType<import("../../types").ButtonAction>;
default: string;
validator: import("../../types").StringTypeValidator<"default" | "progressive" | "destructive">;
};
weight: {
type: PropType<import("../../types").ButtonWeight>;
default: string;
validator: import("../../types").StringTypeValidator<"normal" | "primary" | "quiet">;
};
size: {
type: PropType<import("../../types").ButtonSize>;
default: string;
validator: import("../../types").StringTypeValidator<"medium" | "large" | "small">;
};
}>, {
button: import("vue").Ref<HTMLButtonElement | undefined, HTMLButtonElement | undefined>;
rootClasses: import("vue").ComputedRef<{
[x: string]: boolean;
'cdx-button--framed': boolean;
'cdx-button--icon-only': boolean;
'cdx-button--is-active': boolean;
}>;
onClick: (event: Event) => void;
onKeyDown: () => void;
onKeyUp: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
action: {
type: PropType<import("../../types").ButtonAction>;
default: string;
validator: import("../../types").StringTypeValidator<"default" | "progressive" | "destructive">;
};
weight: {
type: PropType<import("../../types").ButtonWeight>;
default: string;
validator: import("../../types").StringTypeValidator<"normal" | "primary" | "quiet">;
};
size: {
type: PropType<import("../../types").ButtonSize>;
default: string;
validator: import("../../types").StringTypeValidator<"medium" | "large" | "small">;
};
}>> & Readonly<{
onClick?: ((...args: any[]) => any) | undefined;
}>, {
size: "medium" | "large" | "small";
action: "default" | "progressive" | "destructive";
weight: "normal" | "primary" | "quiet";
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
CdxIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
icon: {
type: PropType<import("@wikimedia/codex-icons").Icon>;
required: true;
};
iconLabel: {
type: StringConstructor;
default: string;
};
lang: {
type: PropType<string | null>;
default: null;
};
dir: {
type: PropType<import("../../types").HTMLDirection | null>;
default: null;
};
size: {
type: PropType<import("../../types").IconSize>;
default: string;
validator: import("../../types").StringTypeValidator<"medium" | "small" | "x-small">;
};
}>, {
rootElement: import("vue").Ref<HTMLSpanElement | undefined, HTMLSpanElement | undefined>;
rootClasses: import("vue").ComputedRef<{
[x: string]: boolean;
'cdx-icon--flipped': boolean;
}>;
iconSvg: import("vue").ComputedRef<string>;
iconPath: import("vue").ComputedRef<string>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
icon: {
type: PropType<import("@wikimedia/codex-icons").Icon>;
required: true;
};
iconLabel: {
type: StringConstructor;
default: string;
};
lang: {
type: PropType<string | null>;
default: null;
};
dir: {
type: PropType<import("../../types").HTMLDirection | null>;
default: null;
};
size: {
type: PropType<import("../../types").IconSize>;
default: string;
validator: import("../../types").StringTypeValidator<"medium" | "small" | "x-small">;
};
}>> & Readonly<{}>, {
lang: string | null;
iconLabel: string;
dir: import("../../types").HTMLDirection | null;
size: "medium" | "small" | "x-small";
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;