@wikimedia/codex
Version:
Codex Design System for Wikimedia
1,250 lines • 167 kB
TypeScript
import { PropType } from 'vue';
import { Icon } from '@wikimedia/codex-icons';
import { TableColumn, TableRow, TableRowWithIdentifier, TableSort, TableSortOption, TablePaginationSizeOption, TablePaginationPosition } from '../../types';
type TableSortDirection = 'none' | 'ascending' | 'descending';
/**
* An HTML table for displaying data.
*/
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* Table caption.
*
* Required to support users of assistive technology, but can be visually hidden.
*/
caption: {
type: StringConstructor;
required: true;
};
/**
* Whether to visually hide the caption.
*/
hideCaption: {
type: BooleanConstructor;
default: boolean;
};
/**
* Column definitions.
*
* @default []
*/
columns: {
type: PropType<TableColumn[]>;
default: () => never[];
validator: (value: TableColumn[]) => boolean;
};
/**
* Table data.
*
* An array of objects, with each object representing the data for a table row. Item keys
* should align with column IDs, as defined in the `columns` prop.
*
* @default []
*/
data: {
type: PropType<TableRow[] | TableRowWithIdentifier[]>;
default: () => never[];
validator: (value: TableRow[] | TableRowWithIdentifier[], props: {
[x: string]: unknown;
}) => boolean;
};
/**
* Whether to use `<th>` for the first cell in each row.
*/
useRowHeaders: {
type: BooleanConstructor;
default: boolean;
};
/**
* Whether vertical borders separating columns should be rendered.
*/
showVerticalBorders: {
type: BooleanConstructor;
default: boolean;
};
/**
* Whether to enable row selection.
*/
useRowSelection: {
type: BooleanConstructor;
default: boolean;
};
/**
* An array of selected row indices. Must be bound with `v-model:selected-rows`.
*
* If sorting is also enabled, this will be an array of TableRowIdentifiers.
*
* @default []
*/
selectedRows: {
type: PropType<(number | string)[]>;
default: () => never[];
};
/**
* Definition of sort order. Column(s) can be sorted ascending, descending, or not sorted.
* To display data unsorted initially, set to an empty object initially.
* Must be bound with v-model:sort
*
* @default {}
*/
sort: {
type: PropType<TableSort>;
default: () => {};
};
/**
* Whether the table is waiting for data to be fetched.
*/
pending: {
type: BooleanConstructor;
default: boolean;
};
/**
* Whether to enable pagination.
*/
paginate: {
type: BooleanConstructor;
default: boolean;
};
/**
* Whether the table is paginating through remote data. Setting this to
* "true" will cause the table to emit events indicating that more data
* should be loaded when the user navigates between pages.
*/
serverPagination: {
type: BooleanConstructor;
default: boolean;
};
/**
* The total number of rows/results available on the server that the
* user can access via pagination. Providing this value will make for
* a better user experience when navigating through pages of remote
* data, but it is not required.
*/
totalRows: {
type: NumberConstructor;
default: number;
};
/**
* Where the pagination controls should appear relative to the table body.
*/
paginationPosition: {
type: PropType<TablePaginationPosition>;
default: string;
validator: import("../../types").StringTypeValidator<"top" | "bottom" | "both">;
};
/**
* Pre-defined options for how may rows should be displayed per page.
* The value of these menu items must be a number.
*
* @default [ { value: 10 }, { value: 20 }, { value: 50 } ]
*/
paginationSizeOptions: {
type: PropType<TablePaginationSizeOption[]>;
default: () => {
value: number;
}[];
validator: (value: TablePaginationSizeOption[]) => boolean;
};
/**
* The default number of rows to show per page. For basic pagination,
* this will default to the value of the first of the pagination options
* if not provided. For server-side pagination, this will default to
* the initial number of rows if no default is provided.
*
* @default paginationSizeOptions[ 0 ].value
*/
paginationSizeDefault: {
type: NumberConstructor;
default: (rawProps: {
paginationSizeOptions: TablePaginationSizeOption[];
paginate: boolean;
serverPagination: boolean;
data: TableRow[] | TableRowWithIdentifier[];
}) => number;
};
}>, {
dataForDisplay: import("vue").ComputedRef<TableRow[]>;
pageSize: import("vue").Ref<number, number>;
onNext: () => void;
onPrev: () => void;
onFirst: () => void;
onLast: () => void;
nextDisabled: import("vue").ComputedRef<boolean>;
prevDisabled: import("vue").ComputedRef<boolean>;
lastDisabled: import("vue").ComputedRef<boolean>;
paginationStatusMessageShort: import("vue").ComputedRef<string>;
paginationStatusMessageLong: import("vue").ComputedRef<string>;
wrappedSelectedRows: import("vue").WritableComputedRef<(string | number)[], (string | number)[]>;
selectAll: import("vue").Ref<boolean, boolean>;
selectAllIndeterminate: import("vue").Ref<boolean, boolean>;
activeSortColumn: import("vue").ComputedRef<string>;
hasSortableColumns: import("vue").ComputedRef<boolean>;
tableClasses: import("vue").ComputedRef<{
'cdx-table__table--layout-fixed': boolean;
'cdx-table__table--borders-vertical': boolean;
}>;
tableWrapperClasses: import("vue").ComputedRef<{
'cdx-table__table-wrapper--has-pending-indicator': boolean;
}>;
getRowKey: (row: TableRow | TableRowWithIdentifier, index: number) => string | number;
getRowClass: (row: TableRow | TableRowWithIdentifier, rowIndex: number) => Record<string, boolean>;
getRowHeaderScope: (columnId: string) => string | undefined;
getCellElement: (columnId: string) => "th" | "td";
getCellClass: (column: TableColumn, hasSort?: boolean) => Record<string, boolean> | undefined;
getCellStyle: (column: TableColumn) => Record<string, string>;
handleRowSelection: (newSelectedRows: number[]) => void;
handleSelectAll: (newValue: boolean) => void;
handleSort: (columnId: string) => void;
getSortIcon: (columnId: string) => Icon;
getSortOrder: (columnId: string, hasSort?: boolean) => TableSortDirection | undefined;
translatedSortCaption: import("vue").ComputedRef<string>;
translatedSelectRowLabel: (rowIndex: number, totalRows: number) => string;
translatedSelectAllLabel: import("vue").ComputedRef<string>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("load-more" | "update:selectedRows" | "update:sort")[], "load-more" | "update:selectedRows" | "update:sort", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* Table caption.
*
* Required to support users of assistive technology, but can be visually hidden.
*/
caption: {
type: StringConstructor;
required: true;
};
/**
* Whether to visually hide the caption.
*/
hideCaption: {
type: BooleanConstructor;
default: boolean;
};
/**
* Column definitions.
*
* @default []
*/
columns: {
type: PropType<TableColumn[]>;
default: () => never[];
validator: (value: TableColumn[]) => boolean;
};
/**
* Table data.
*
* An array of objects, with each object representing the data for a table row. Item keys
* should align with column IDs, as defined in the `columns` prop.
*
* @default []
*/
data: {
type: PropType<TableRow[] | TableRowWithIdentifier[]>;
default: () => never[];
validator: (value: TableRow[] | TableRowWithIdentifier[], props: {
[x: string]: unknown;
}) => boolean;
};
/**
* Whether to use `<th>` for the first cell in each row.
*/
useRowHeaders: {
type: BooleanConstructor;
default: boolean;
};
/**
* Whether vertical borders separating columns should be rendered.
*/
showVerticalBorders: {
type: BooleanConstructor;
default: boolean;
};
/**
* Whether to enable row selection.
*/
useRowSelection: {
type: BooleanConstructor;
default: boolean;
};
/**
* An array of selected row indices. Must be bound with `v-model:selected-rows`.
*
* If sorting is also enabled, this will be an array of TableRowIdentifiers.
*
* @default []
*/
selectedRows: {
type: PropType<(number | string)[]>;
default: () => never[];
};
/**
* Definition of sort order. Column(s) can be sorted ascending, descending, or not sorted.
* To display data unsorted initially, set to an empty object initially.
* Must be bound with v-model:sort
*
* @default {}
*/
sort: {
type: PropType<TableSort>;
default: () => {};
};
/**
* Whether the table is waiting for data to be fetched.
*/
pending: {
type: BooleanConstructor;
default: boolean;
};
/**
* Whether to enable pagination.
*/
paginate: {
type: BooleanConstructor;
default: boolean;
};
/**
* Whether the table is paginating through remote data. Setting this to
* "true" will cause the table to emit events indicating that more data
* should be loaded when the user navigates between pages.
*/
serverPagination: {
type: BooleanConstructor;
default: boolean;
};
/**
* The total number of rows/results available on the server that the
* user can access via pagination. Providing this value will make for
* a better user experience when navigating through pages of remote
* data, but it is not required.
*/
totalRows: {
type: NumberConstructor;
default: number;
};
/**
* Where the pagination controls should appear relative to the table body.
*/
paginationPosition: {
type: PropType<TablePaginationPosition>;
default: string;
validator: import("../../types").StringTypeValidator<"top" | "bottom" | "both">;
};
/**
* Pre-defined options for how may rows should be displayed per page.
* The value of these menu items must be a number.
*
* @default [ { value: 10 }, { value: 20 }, { value: 50 } ]
*/
paginationSizeOptions: {
type: PropType<TablePaginationSizeOption[]>;
default: () => {
value: number;
}[];
validator: (value: TablePaginationSizeOption[]) => boolean;
};
/**
* The default number of rows to show per page. For basic pagination,
* this will default to the value of the first of the pagination options
* if not provided. For server-side pagination, this will default to
* the initial number of rows if no default is provided.
*
* @default paginationSizeOptions[ 0 ].value
*/
paginationSizeDefault: {
type: NumberConstructor;
default: (rawProps: {
paginationSizeOptions: TablePaginationSizeOption[];
paginate: boolean;
serverPagination: boolean;
data: TableRow[] | TableRowWithIdentifier[];
}) => number;
};
}>> & Readonly<{
"onLoad-more"?: ((...args: any[]) => any) | undefined;
"onUpdate:selectedRows"?: ((...args: any[]) => any) | undefined;
"onUpdate:sort"?: ((...args: any[]) => any) | undefined;
}>, {
sort: Partial<Record<string, TableSortOption>>;
data: TableRow[] | TableRowWithIdentifier[];
pending: boolean;
columns: TableColumn[];
paginationSizeOptions: TablePaginationSizeOption[];
hideCaption: boolean;
useRowHeaders: boolean;
showVerticalBorders: boolean;
useRowSelection: boolean;
selectedRows: (string | number)[];
paginate: boolean;
serverPagination: boolean;
totalRows: number;
paginationPosition: "top" | "bottom" | "both";
paginationSizeDefault: number;
}, {}, {
CdxCheckbox: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
modelValue: {
type: PropType<boolean | (string | number)[]>;
default: boolean;
};
inputValue: {
type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
default: boolean;
};
name: {
type: StringConstructor;
default: null;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
indeterminate: {
type: BooleanConstructor;
default: boolean;
};
inline: {
type: BooleanConstructor;
default: boolean;
};
hideLabel: {
type: BooleanConstructor;
default: boolean;
};
status: {
type: PropType<import("../../types").ValidationStatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
};
}>, {
rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
computedDisabled: import("vue").ComputedRef<boolean>;
input: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
checkboxId: string;
descriptionId: string;
wrappedModel: import("vue").WritableComputedRef<boolean | (string | number)[], boolean | (string | number)[]>;
customInputClasses: import("vue").ComputedRef<Record<string, boolean>>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
modelValue: {
type: PropType<boolean | (string | number)[]>;
default: boolean;
};
inputValue: {
type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
default: boolean;
};
name: {
type: StringConstructor;
default: null;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
indeterminate: {
type: BooleanConstructor;
default: boolean;
};
inline: {
type: BooleanConstructor;
default: boolean;
};
hideLabel: {
type: BooleanConstructor;
default: boolean;
};
status: {
type: PropType<import("../../types").ValidationStatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
};
}>> & Readonly<{
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
}>, {
name: string;
modelValue: boolean | (string | number)[];
disabled: boolean;
inline: boolean;
inputValue: string | number | boolean;
indeterminate: boolean;
hideLabel: boolean;
status: "default" | "warning" | "error" | "success";
}, {}, {
CdxLabel: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
icon: {
type: PropType<Icon | null>;
default: null;
};
optional: {
type: BooleanConstructor;
default: boolean;
};
optionalFlag: {
type: StringConstructor;
default: string;
validator: (value: string, props: {
[x: string]: unknown;
}) => boolean;
};
visuallyHidden: {
type: BooleanConstructor;
default: boolean;
};
isLegend: {
type: BooleanConstructor;
default: boolean;
};
inputId: {
type: StringConstructor;
default: string;
};
descriptionId: {
type: StringConstructor;
default: string;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
}>, {
rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
rootStyle: import("vue").ComputedRef<import("vue").StyleValue>;
otherAttrs: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
translatedOptionalFlag: import("vue").ComputedRef<string>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
icon: {
type: PropType<Icon | null>;
default: null;
};
optional: {
type: BooleanConstructor;
default: boolean;
};
optionalFlag: {
type: StringConstructor;
default: string;
validator: (value: string, props: {
[x: string]: unknown;
}) => boolean;
};
visuallyHidden: {
type: BooleanConstructor;
default: boolean;
};
isLegend: {
type: BooleanConstructor;
default: boolean;
};
inputId: {
type: StringConstructor;
default: string;
};
descriptionId: {
type: StringConstructor;
default: string;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
icon: Icon | null;
disabled: boolean;
optional: boolean;
optionalFlag: string;
visuallyHidden: boolean;
isLegend: boolean;
inputId: string;
descriptionId: string;
}, {}, {
CdxIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
icon: {
type: PropType<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<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>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
CdxIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
icon: {
type: PropType<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<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>;
CdxTablePager: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
paginationSizeOptions: {
type: PropType<TablePaginationSizeOption[]>;
required: true;
};
itemsPerPage: {
type: NumberConstructor;
required: true;
};
nextDisabled: {
type: BooleanConstructor;
default: boolean;
};
prevDisabled: {
type: BooleanConstructor;
default: boolean;
};
lastDisabled: {
type: BooleanConstructor;
default: boolean;
};
}>, {
defaultItemsPerPageLabel: import("vue").ComputedRef<string>;
currentItemsPerPageLabel: import("vue").ComputedRef<string>;
btnLabelFirst: import("vue").ComputedRef<string>;
btnLabelNext: import("vue").ComputedRef<string>;
btnLabelPrev: import("vue").ComputedRef<string>;
btnLabelLast: import("vue").ComputedRef<string>;
wrappedItemsPerPage: import("vue").WritableComputedRef<number, number>;
cdxIconPrevious: import("@wikimedia/codex-icons").IconFlipForRtl;
cdxIconNext: import("@wikimedia/codex-icons").IconFlipForRtl;
cdxIconMoveFirst: import("@wikimedia/codex-icons").IconFlipForRtl;
cdxIconMoveLast: import("@wikimedia/codex-icons").IconFlipForRtl;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("first" | "last" | "next" | "update:itemsPerPage" | "prev")[], "first" | "last" | "next" | "update:itemsPerPage" | "prev", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
paginationSizeOptions: {
type: PropType<TablePaginationSizeOption[]>;
required: true;
};
itemsPerPage: {
type: NumberConstructor;
required: true;
};
nextDisabled: {
type: BooleanConstructor;
default: boolean;
};
prevDisabled: {
type: BooleanConstructor;
default: boolean;
};
lastDisabled: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
onFirst?: ((...args: any[]) => any) | undefined;
onLast?: ((...args: any[]) => any) | undefined;
onNext?: ((...args: any[]) => any) | undefined;
"onUpdate:itemsPerPage"?: ((...args: any[]) => any) | undefined;
onPrev?: ((...args: any[]) => any) | undefined;
}>, {
nextDisabled: boolean;
prevDisabled: boolean;
lastDisabled: 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<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<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>;
CdxSelect: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
menuItems: {
type: PropType<(import("../../types").MenuItemData | import("../../types").MenuGroupData)[]>;
required: true;
};
selected: {
type: PropType<string | number | null>;
required: true;
};
defaultLabel: {
type: StringConstructor;
default: string;
};
name: {
type: StringConstructor;
default: undefined;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
menuConfig: {
type: PropType<import("../../types").MenuConfig>;
default: () => import("../../types").MenuConfig;
};
defaultIcon: {
type: PropType<Icon | undefined>;
default: undefined;
};
status: {
type: PropType<import("../../types").ValidationStatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
};
}>, {
handle: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
menu: import("vue").Ref<import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
menuItems: {
type: PropType<(import("../../types").MenuItemData | import("../../types").MenuGroupData)[]>;
required: true;
};
footer: {
type: PropType<import("../../types").MenuItemData>;
default: null;
};
selected: {
type: PropType<import("../../types").MenuItemValue | import("../../types").MenuItemValue[] | null>;
required: true;
};
expanded: {
type: BooleanConstructor;
required: true;
};
showPending: {
type: BooleanConstructor;
default: boolean;
};
visibleItemLimit: {
type: PropType<number | null>;
default: null;
};
showThumbnail: {
type: BooleanConstructor;
default: boolean;
};
boldLabel: {
type: BooleanConstructor;
default: boolean;
};
hideDescriptionOverflow: {
type: BooleanConstructor;
default: boolean;
};
searchQuery: {
type: StringConstructor;
default: string;
};
showNoResultsSlot: {
type: PropType<boolean | null>;
default: null;
};
renderInPlace: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
"onUpdate:selected"?: ((...args: any[]) => any) | undefined;
"onUpdate:expanded"?: ((...args: any[]) => any) | undefined;
"onMenu-item-click"?: ((...args: any[]) => any) | undefined;
"onMenu-item-keyboard-navigation"?: ((...args: any[]) => any) | undefined;
"onLoad-more"?: ((...args: any[]) => any) | undefined;
}>, {
listBoxStyle: import("vue").ComputedRef<{
'max-height': string | undefined;
'margin-bottom': string | undefined;
}>;
rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
rootStyle: import("vue").ComputedRef<import("vue").StyleValue>;
otherAttrs: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
assignTemplateRef: (templateRef: import("vue").ComponentPublicInstance | Element | null, index: number) => void;
computedMenuEntries: import("vue").ComputedRef<(import("../../types").MenuItemDataWithId | import("../../types").MenuGroupDataWithIds)[]>;
computedMenuItems: import("vue").ComputedRef<import("../../types").MenuItemDataWithId[]>;
computedShowNoResultsSlot: import("vue").ComputedRef<boolean>;
highlightedMenuItem: import("vue").Ref<{
id: string;
value: import("../../types").MenuItemValue;
label?: string | undefined;
match?: string | undefined;
supportingText?: string | undefined;
description?: string | null | undefined;
language?: {
label?: string | undefined;
match?: string | undefined;
supportingText?: string | undefined;
description?: string | undefined;
} | undefined;
icon?: string | {
path: string;
} | {
ltr: string | {
path: string;
};
shouldFlip: true;
shouldFlipExceptions?: string[] | undefined;
} | {
rtl: string | {
path: string;
};
ltr: string | {
path: string;
};
} | {
langCodeMap: Record<string, import("@wikimedia/codex-icons").SimpleIcon | import("@wikimedia/codex-icons").IconFlipForRtl>;
default: string | {
path: string;
} | {
ltr: string | {
path: string;
};
shouldFlip: true;
shouldFlipExceptions?: string[] | undefined;
};
} | undefined;
thumbnail?: {
url: string;
} | null | undefined;
url?: string | undefined;
urlNewTab?: boolean | undefined;
disabled?: boolean | undefined;
} | null, import("../../types").MenuItemDataWithId | {
id: string;
value: import("../../types").MenuItemValue;
label?: string | undefined;
match?: string | undefined;
supportingText?: string | undefined;
description?: string | null | undefined;
language?: {
label?: string | undefined;
match?: string | undefined;
supportingText?: string | undefined;
description?: string | undefined;
} | undefined;
icon?: string | {
path: string;
} | {
ltr: string | {
path: string;
};
shouldFlip: true;
shouldFlipExceptions?: string[] | undefined;
} | {
rtl: string | {
path: string;
};
ltr: string | {
path: string;
};
} | {
langCodeMap: Record<string, import("@wikimedia/codex-icons").SimpleIcon | import("@wikimedia/codex-icons").IconFlipForRtl>;
default: string | {
path: string;
} | {
ltr: string | {
path: string;
};
shouldFlip: true;
shouldFlipExceptions?: string[] | undefined;
};
} | undefined;
thumbnail?: {
url: string;
} | null | undefined;
url?: string | undefined;
urlNewTab?: boolean | undefined;
disabled?: boolean | undefined;
} | null>;
highlightedViaKeyboard: import("vue").Ref<boolean, boolean>;
teleportDisabled: import("vue").ComputedRef<boolean>;
computedTarget: import("vue").ComputedRef<string | HTMLElement>;
handleMenuItemChange: (menuState: import("../../types").MenuState, menuItem: import("../../types").MenuItemDataWithId | null) => void;
handleKeyNavigation: (e: KeyboardEvent, { prevent, characterNavigation }?: {
prevent?: boolean | undefined;
characterNavigation?: boolean | undefined;
}) => boolean;
ariaRelevant: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
isMultiselect: import("vue").ComputedRef<boolean>;
rootElement: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
menuListbox: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
getGroupWrapperClasses: (group: import("../../types").MenuGroupData) => {
'cdx-menu__group-wrapper--hide-label': boolean;
};
getMenuItemIndex: (menuItem: import("../../types").MenuItemDataWithId) => number;
getMenuItemBindings: (menuItem: import("../../types").MenuItemDataWithId) => {
id: string;
value: import("../../types").MenuItemValue;
label?: string;
match?: string;
supportingText?: string;
description?: string | null;
language?: import("../../types").MenuItemLanguageData;
icon?: Icon;
thumbnail?: import("../../types").Thumbnail | null;
url?: string;
urlNewTab?: boolean;
disabled?: boolean;
selected: boolean;
active: boolean;
highlighted: boolean;
showThumbnail: boolean;
boldLabel: boolean;
hideDescriptionOverflow: boolean;
searchQuery: string;
multiselect: boolean;
};
getMenuItemHandlers: (menuItem: import("../../types").MenuItemDataWithId) => {
change: (menuState: import("../../types").MenuState, setState: boolean) => void;
click: () => void;
};
getSlotBindings: (menuItem: import("../../types").MenuItemDataWithId) => {
menuItem: import("../../types").MenuItemDataWithId;
active: boolean;
};
isMenuGroupData: (menuEntry: import("../../types").MenuItemData | import("../../types").MenuGroupData) => menuEntry is import("../../types").MenuGroupData;
}, {}, {}, {
isExpanded(): boolean;
getRootElement(): HTMLElement | undefined;
getHighlightedMenuItem(): import("../../types").MenuItemDataWithId | null;
getHighlightedViaKeyboard(): boolean;
getComputedMenuItems(): import("../../types").MenuItemDataWithId[];
clearActive(): void;
delegateKeyNavigation(event: KeyboardEvent, { prevent, characterNavigation }?: {
prevent?: boolean | undefined;
characterNavigation?: boolean | undefined;
}): boolean;
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:selected" | "update:expanded" | "menu-item-click" | "menu-item-keyboard-navigation" | "load-more")[], import("vue").PublicProps, {
footer: import("../../types").MenuItemData;
searchQuery: string;
showThumbnail: boolean;
boldLabel: boolean;
hideDescriptionOverflow: boolean;
showPending: boolean;
visibleItemLimit: number | null;
showNoResultsSlot: boolean | null;
renderInPlace: boolean;
}, true, {}, {}, {
CdxMenuItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
id: {
type: StringConstructor;
required: true;
};
value: {
type: PropType<import("../../types").MenuItemValue>;
required: true;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
selected: {
type: BooleanConstructor;
default: boolean;
};
active: {
type: BooleanConstructor;
default: boolean;
};
highlighted: {
type: BooleanConstructor;
default: boolean;
};
label: {
type: StringConstructor;
default: string;
};
match: {
type: StringConstructor;
default: string;
};
supportingText: {
type: StringConstructor;
default: string;
};
url: {
type: StringConstructor;
default: string;
};
urlNewTab: {
type: BooleanConstructor;
default: boolean;
};
icon: {
type: PropType<Icon>;
default: string;
};
showThumbnail: {
type: BooleanConstructor;
default: boolean;
};
thumbnail: {
type: PropType<import("../../types").Thumbnail | null>;
default: null;
};
description: {
type: PropType<string | null>;
default: string;
};
searchQuery: {
type: StringConstructor;
default: string;
};
boldLabel: {
type: BooleanConstructor;
default: boolean;
};
hideDescriptionOverflow: {
type: BooleanConstructor;
default: boolean;
};
language: {
type: PropType<import("../../types").MenuItemLanguageData>;
default: () => {};
};
action: {
type: PropType<import("../../types").ButtonAction>;
default: string;
};
multiselect: {
type: BooleanConstructor;
default: boolean;
};
}>, {
onMouseMove: () => void;
onMouseLeave: () => void;
onMouseDown: (e: MouseEvent) => void;
onClick: () => void;
highlightQuery: import("vue").ComputedRef<boolean>;
rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
contentTag: import("vue").ComputedRef<"span" | "a">;
linkAttrs: import("vue").ComputedRef<{
target: string;
rel: string;
} | {
target?: undefined;
rel?: undefined;
}>;
title: import("vue").ComputedRef<string>;
cdxIconCheck: string;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
id: {
type: StringConstructor;
required: true;
};
value: {
type: PropType<import("../../types").MenuItemValue>;
required: true;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
selected: {
type: BooleanConstructor;
default: boolean;
};
active: {
type: BooleanConstructor;
default: boolean;
};
highlighted: {
type: BooleanConstructor;
default: boolean;
};
label: {
type: StringConstructor;
default: string;
};
match: {
type: StringConstructor;
default: string;
};
supportingText: {
t