@wikimedia/codex
Version:
Codex Design System for Wikimedia
242 lines (241 loc) • 10.1 kB
TypeScript
import { ComponentPublicInstance } from 'vue';
import { TabData } from '../../types';
/**
* A layout for navigating between sections of content.
*/
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* The `name` of the currently active Tab in the layout.
*
* This prop is optional; if it is provided, it should be bound
* using a `v-model:active` directive in the parent component.
* Two-way binding the active tab is only necessary if some tab
* other than the first should be active as soon as the component
* renders (such as in cases where the active tab is bound to URL
* params). If this prop is not provided, then the first tab will
* be active by default. Regardless, the active tab can be changed
* normally by user interaction (clicking on tab headings) or by
* using the exposed methods "select", "next", and "prev".
*/
active: {
type: StringConstructor;
default: null;
};
/**
* Whether or not the component should be displayed in a framed
* visual style.
*/
framed: {
type: BooleanConstructor;
default: boolean;
};
}>, {
activeTab: import("vue").WritableComputedRef<string, string>;
activeTabIndex: import("vue").ComputedRef<number>;
activeTabId: import("vue").ComputedRef<string | undefined>;
currentDirection: import("vue").Ref<import("../../types").HTMLDirection | null, import("../../types").HTMLDirection | null>;
rootElement: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
tabListElement: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
prevScroller: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
nextScroller: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
rootClasses: import("vue").ComputedRef<{
'cdx-tabs--framed': boolean;
'cdx-tabs--quiet': boolean;
}>;
tabNames: import("vue").ComputedRef<string[]>;
tabsData: import("vue").ComputedRef<Map<string, TabData>>;
firstLabelVisible: import("vue").Ref<boolean, boolean>;
lastLabelVisible: import("vue").Ref<boolean, boolean>;
assignTemplateRefForTabButton: (templateRef: Element | ComponentPublicInstance | null, index: number) => void;
scrollTabs: (logicalDirection: "prev" | "next") => void;
focusActiveTab: () => void;
cdxIconPrevious: import("@wikimedia/codex-icons").IconFlipForRtl;
cdxIconNext: import("@wikimedia/codex-icons").IconFlipForRtl;
}, {}, {}, {
/**
* Programmatically select a tab based on its "name" prop
*
* @param {string} tabName The name of the tab to select
* @param {boolean} setFocus Whether or not to also set focus to the new tab
* @public
*/
select(tabName: string, setFocus?: boolean): void;
/**
* Used to select next or previous tab in the sequence, skipping
* over any tabs that are disabled. The provided increment should
* be either 1 (to move forward) or -1 (to move backwards)
*
* @param index
* @param increment
* @param setFocus
*/
selectNonDisabled(index: number, increment: -1 | 1, setFocus?: boolean): void;
/**
* Set the next tab to active, if one exists
*
* @param {boolean} setFocus
* @public
*/
next(setFocus?: boolean): void;
/**
* Set the previous tab to active, if one exists
*
* @param {boolean} setFocus
* @public
*/
prev(setFocus?: boolean): void;
/**
* Handle left arrow key navigation (based on LTR/RTL direction)
*/
onLeftArrowKeypress(): void;
/**
* Handle right arrow key navigation (based on LTR/RTL direction)
*/
onRightArrowKeypress(): void;
/**
* Handle down arrow key navigation by moving focus to the contents
* of the currently active tab
*/
onDownArrowKeypress(): void;
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:active"[], "update:active", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* The `name` of the currently active Tab in the layout.
*
* This prop is optional; if it is provided, it should be bound
* using a `v-model:active` directive in the parent component.
* Two-way binding the active tab is only necessary if some tab
* other than the first should be active as soon as the component
* renders (such as in cases where the active tab is bound to URL
* params). If this prop is not provided, then the first tab will
* be active by default. Regardless, the active tab can be changed
* normally by user interaction (clicking on tab headings) or by
* using the exposed methods "select", "next", and "prev".
*/
active: {
type: StringConstructor;
default: null;
};
/**
* Whether or not the component should be displayed in a framed
* visual style.
*/
framed: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
"onUpdate:active"?: ((...args: any[]) => any) | undefined;
}>, {
active: string;
framed: boolean;
}, {}, {
CdxButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
action: {
type: import("vue").PropType<import("../../types").ButtonAction>;
default: string;
validator: import("../../types").StringTypeValidator<"default" | "progressive" | "destructive">;
};
weight: {
type: import("vue").PropType<import("../../types").ButtonWeight>;
default: string;
validator: import("../../types").StringTypeValidator<"normal" | "primary" | "quiet">;
};
size: {
type: import("vue").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: import("vue").PropType<import("../../types").ButtonAction>;
default: string;
validator: import("../../types").StringTypeValidator<"default" | "progressive" | "destructive">;
};
weight: {
type: import("vue").PropType<import("../../types").ButtonWeight>;
default: string;
validator: import("../../types").StringTypeValidator<"normal" | "primary" | "quiet">;
};
size: {
type: import("vue").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: import("vue").PropType<import("@wikimedia/codex-icons").Icon>;
required: true;
};
iconLabel: {
type: StringConstructor;
default: string;
};
lang: {
type: import("vue").PropType<string | null>;
default: null;
};
dir: {
type: import("vue").PropType<import("../../types").HTMLDirection | null>;
default: null;
};
size: {
type: import("vue").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: import("vue").PropType<import("@wikimedia/codex-icons").Icon>;
required: true;
};
iconLabel: {
type: StringConstructor;
default: string;
};
lang: {
type: import("vue").PropType<string | null>;
default: null;
};
dir: {
type: import("vue").PropType<import("../../types").HTMLDirection | null>;
default: null;
};
size: {
type: import("vue").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;