@wikimedia/codex
Version:
Codex Design System for Wikimedia
1,191 lines (1,190 loc) • 150 kB
TypeScript
import { ComponentPublicInstance, Ref, PropType } from 'vue';
import { ChipInputItem, MenuItemData, MenuItemValue, MenuGroupData, MenuConfig, ValidationStatusType } from '../../types';
/**
* A predictive text input with a dropdown menu of items from which multiple selections can be made.
*/
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* Current chips present in the input.
*
* Must be bound with `v-model:input-chips`. Initialize to an empty array if there are no
* initial selections. If there are, initialize to an array of input chips matching those
* selections.
*/
inputChips: {
type: PropType<ChipInputItem[]>;
required: true;
};
/**
* Value(s) of the current selection(s).
*
* Must be bound with `v-model:selected`. Initialize to an empty array if there are no
* initial selections.
*/
selected: {
type: PropType<MenuItemValue[]>;
required: true;
};
/**
* Menu items and/or menu group definitions. Initialize to an empty array if there are no
* initial menu items.
*
* Menu groups and individual menu items will be output in the order they appear here.
*/
menuItems: {
type: PropType<(MenuItemData | MenuGroupData)[]>;
required: true;
};
/**
* Current value of the text input. This prop is optional and should only be used if you
* need to keep track of the text input value for some reason (e.g. for validation).
*
* Optionally provided by `v-model:input-value` binding in the parent component.
*/
inputValue: {
type: PropType<string | number>;
default: null;
};
/**
* Whether the text input should appear below the set of input chips.
*
* By default, the input chips are inline with the input.
*/
separateInput: {
type: BooleanConstructor;
default: boolean;
};
/**
* Whether the entire component is disabled.
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* Whether the MultiselectLookup is readonly.
*/
readonly: {
type: BooleanConstructor;
default: boolean;
};
/**
* `status` attribute of the input.
*/
status: {
type: PropType<ValidationStatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
};
/**
* Configuration for various menu features. All properties default to false.
*
* See the MenuConfig type.
*
* @default {}
*/
menuConfig: {
type: PropType<MenuConfig>;
default: () => MenuConfig;
};
/**
* Whether to keep the search term in the input after selection.
*/
keepInputOnSelection: {
type: BooleanConstructor;
default: boolean;
};
}>, {
chipInput: Ref<import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
inputChips: {
type: PropType<ChipInputItem[]>;
required: true;
};
inputValue: {
type: PropType<string | number>;
default: null;
};
separateInput: {
type: BooleanConstructor;
default: boolean;
};
status: {
type: PropType<ValidationStatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
};
chipValidator: {
type: PropType<import("../../types").ChipValidator>;
default: (value: string | number) => true;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
readonly: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
"onUpdate:input-chips"?: ((...args: any[]) => any) | undefined;
"onUpdate:input-value"?: ((...args: any[]) => any) | undefined;
"onChip-click"?: ((...args: any[]) => any) | undefined;
}>, {
rootElement: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
chipsContainer: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
separateInputWrapper: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
input: Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
computedInputValue: import("vue").WritableComputedRef<string | number, string | number>;
rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
rootStyle: import("vue").ComputedRef<import("vue").StyleValue>;
otherAttrs: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
assignChipTemplateRef: (chip: Element | ComponentPublicInstance | null, index: number) => void;
handleChipClick: (clickedChip: ChipInputItem) => Promise<void>;
handleChipRemove: (chipToRemove: ChipInputItem, index: number, method: "button" | "Backspace" | "Delete") => void;
moveChipFocus: (direction: "left" | "right", startIndex: number) => void;
onInputKeydown: (e: KeyboardEvent) => void;
focusInput: () => void;
onInputFocus: () => void;
onInputBlur: () => void;
onFocusOut: (e: FocusEvent) => void;
computedDisabled: import("vue").ComputedRef<boolean>;
statusMessageContent: Ref<string, string>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:input-chips" | "update:input-value" | "chip-click")[], import("vue").PublicProps, {
disabled: boolean;
inputValue: string | number;
status: "default" | "warning" | "error" | "success";
readonly: boolean;
separateInput: boolean;
chipValidator: import("../../types").ChipValidator;
}, true, {}, {}, {
CdxInputChip: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
icon: {
type: PropType<import("@wikimedia/codex-icons").Icon>;
default: null;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
readonly: {
type: BooleanConstructor;
default: boolean;
};
className: {
type: StringConstructor;
default: string;
};
}>, {
rootElement: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
rootClasses: import("vue").ComputedRef<{
[x: string]: boolean;
'cdx-input-chip--disabled': boolean;
'cdx-input-chip--readonly': boolean;
}>;
ariaDescription: import("vue").ComputedRef<string>;
onKeydown: (e: KeyboardEvent) => void;
cdxIconClose: string;
tabIndex: import("vue").ComputedRef<0 | -1>;
tooltipContent: import("vue").ComputedRef<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}> | null>;
textElement: Ref<HTMLSpanElement | undefined, HTMLSpanElement | undefined>;
}, {}, {}, {
focus(): void;
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("remove-chip" | "click-chip" | "arrow-left" | "arrow-right")[], "remove-chip" | "click-chip" | "arrow-left" | "arrow-right", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
icon: {
type: PropType<import("@wikimedia/codex-icons").Icon>;
default: null;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
readonly: {
type: BooleanConstructor;
default: boolean;
};
className: {
type: StringConstructor;
default: string;
};
}>> & Readonly<{
"onRemove-chip"?: ((...args: any[]) => any) | undefined;
"onClick-chip"?: ((...args: any[]) => any) | undefined;
"onArrow-left"?: ((...args: any[]) => any) | undefined;
"onArrow-right"?: ((...args: any[]) => any) | undefined;
}>, {
icon: import("@wikimedia/codex-icons").Icon;
disabled: boolean;
readonly: boolean;
className: string;
}, {}, {
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: 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: 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>;
}, {
tooltip: import("vue").Directive;
}, string, import("vue").ComponentProvideOptions, true, {}, any>;
} & import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<import("vue").ExtractPropTypes<{
inputChips: {
type: PropType<ChipInputItem[]>;
required: true;
};
inputValue: {
type: PropType<string | number>;
default: null;
};
separateInput: {
type: BooleanConstructor;
default: boolean;
};
status: {
type: PropType<ValidationStatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
};
chipValidator: {
type: PropType<import("../../types").ChipValidator>;
default: (value: string | number) => true;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
readonly: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
"onUpdate:input-chips"?: ((...args: any[]) => any) | undefined;
"onUpdate:input-value"?: ((...args: any[]) => any) | undefined;
"onChip-click"?: ((...args: any[]) => any) | undefined;
}>, {
rootElement: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
chipsContainer: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
separateInputWrapper: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
input: Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
computedInputValue: import("vue").WritableComputedRef<string | number, string | number>;
rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
rootStyle: import("vue").ComputedRef<import("vue").StyleValue>;
otherAttrs: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
assignChipTemplateRef: (chip: Element | ComponentPublicInstance | null, index: number) => void;
handleChipClick: (clickedChip: ChipInputItem) => Promise<void>;
handleChipRemove: (chipToRemove: ChipInputItem, index: number, method: "button" | "Backspace" | "Delete") => void;
moveChipFocus: (direction: "left" | "right", startIndex: number) => void;
onInputKeydown: (e: KeyboardEvent) => void;
focusInput: () => void;
onInputFocus: () => void;
onInputBlur: () => void;
onFocusOut: (e: FocusEvent) => void;
computedDisabled: import("vue").ComputedRef<boolean>;
statusMessageContent: Ref<string, string>;
}, {}, {}, {}, {
disabled: boolean;
inputValue: string | number;
status: "default" | "warning" | "error" | "success";
readonly: boolean;
separateInput: boolean;
chipValidator: import("../../types").ChipValidator;
}> | undefined, import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
inputChips: {
type: PropType<ChipInputItem[]>;
required: true;
};
inputValue: {
type: PropType<string | number>;
default: null;
};
separateInput: {
type: BooleanConstructor;
default: boolean;
};
status: {
type: PropType<ValidationStatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
};
chipValidator: {
type: PropType<import("../../types").ChipValidator>;
default: (value: string | number) => true;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
readonly: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
"onUpdate:input-chips"?: ((...args: any[]) => any) | undefined;
"onUpdate:input-value"?: ((...args: any[]) => any) | undefined;
"onChip-click"?: ((...args: any[]) => any) | undefined;
}>, {
rootElement: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
chipsContainer: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
separateInputWrapper: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
input: Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
computedInputValue: import("vue").WritableComputedRef<string | number, string | number>;
rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
rootStyle: import("vue").ComputedRef<import("vue").StyleValue>;
otherAttrs: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
assignChipTemplateRef: (chip: Element | ComponentPublicInstance | null, index: number) => void;
handleChipClick: (clickedChip: ChipInputItem) => Promise<void>;
handleChipRemove: (chipToRemove: ChipInputItem, index: number, method: "button" | "Backspace" | "Delete") => void;
moveChipFocus: (direction: "left" | "right", startIndex: number) => void;
onInputKeydown: (e: KeyboardEvent) => void;
focusInput: () => void;
onInputFocus: () => void;
onInputBlur: () => void;
onFocusOut: (e: FocusEvent) => void;
computedDisabled: import("vue").ComputedRef<boolean>;
statusMessageContent: Ref<string, string>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:input-chips" | "update:input-value" | "chip-click")[], import("vue").PublicProps, {
disabled: boolean;
inputValue: string | number;
status: "default" | "warning" | "error" | "success";
readonly: boolean;
separateInput: boolean;
chipValidator: import("../../types").ChipValidator;
}, true, {}, {}, {
CdxInputChip: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
icon: {
type: PropType<import("@wikimedia/codex-icons").Icon>;
default: null;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
readonly: {
type: BooleanConstructor;
default: boolean;
};
className: {
type: StringConstructor;
default: string;
};
}>, {
rootElement: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
rootClasses: import("vue").ComputedRef<{
[x: string]: boolean;
'cdx-input-chip--disabled': boolean;
'cdx-input-chip--readonly': boolean;
}>;
ariaDescription: import("vue").ComputedRef<string>;
onKeydown: (e: KeyboardEvent) => void;
cdxIconClose: string;
tabIndex: import("vue").ComputedRef<0 | -1>;
tooltipContent: import("vue").ComputedRef<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}> | null>;
textElement: Ref<HTMLSpanElement | undefined, HTMLSpanElement | undefined>;
}, {}, {}, {
focus(): void;
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("remove-chip" | "click-chip" | "arrow-left" | "arrow-right")[], "remove-chip" | "click-chip" | "arrow-left" | "arrow-right", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
icon: {
type: PropType<import("@wikimedia/codex-icons").Icon>;
default: null;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
readonly: {
type: BooleanConstructor;
default: boolean;
};
className: {
type: StringConstructor;
default: string;
};
}>> & Readonly<{
"onRemove-chip"?: ((...args: any[]) => any) | undefined;
"onClick-chip"?: ((...args: any[]) => any) | undefined;
"onArrow-left"?: ((...args: any[]) => any) | undefined;
"onArrow-right"?: ((...args: any[]) => any) | undefined;
}>, {
icon: import("@wikimedia/codex-icons").Icon;
disabled: boolean;
readonly: boolean;
className: string;
}, {}, {
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: 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: 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>;
}, {
tooltip: import("vue").Directive;
}, string, import("vue").ComponentProvideOptions, true, {}, any>;
} & import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<import("vue").ExtractPropTypes<{
inputChips: {
type: PropType<ChipInputItem[]>;
required: true;
};
inputValue: {
type: PropType<string | number>;
default: null;
};
separateInput: {
type: BooleanConstructor;
default: boolean;
};
status: {
type: PropType<ValidationStatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
};
chipValidator: {
type: PropType<import("../../types").ChipValidator>;
default: (value: string | number) => true;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
readonly: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
"onUpdate:input-chips"?: ((...args: any[]) => any) | undefined;
"onUpdate:input-value"?: ((...args: any[]) => any) | undefined;
"onChip-click"?: ((...args: any[]) => any) | undefined;
}>, {
rootElement: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
chipsContainer: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
separateInputWrapper: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
input: Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
computedInputValue: import("vue").WritableComputedRef<string | number, string | number>;
rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
rootStyle: import("vue").ComputedRef<import("vue").StyleValue>;
otherAttrs: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
assignChipTemplateRef: (chip: Element | ComponentPublicInstance | null, index: number) => void;
handleChipClick: (clickedChip: ChipInputItem) => Promise<void>;
handleChipRemove: (chipToRemove: ChipInputItem, index: number, method: "button" | "Backspace" | "Delete") => void;
moveChipFocus: (direction: "left" | "right", startIndex: number) => void;
onInputKeydown: (e: KeyboardEvent) => void;
focusInput: () => void;
onInputFocus: () => void;
onInputBlur: () => void;
onFocusOut: (e: FocusEvent) => void;
computedDisabled: import("vue").ComputedRef<boolean>;
statusMessageContent: Ref<string, string>;
}, {}, {}, {}, {
disabled: boolean;
inputValue: string | number;
status: "default" | "warning" | "error" | "success";
readonly: boolean;
separateInput: boolean;
chipValidator: import("../../types").ChipValidator;
}> | undefined>;
menu: Ref<import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
menuItems: {
type: PropType<(MenuItemData | MenuGroupData)[]>;
required: true;
};
footer: {
type: PropType<MenuItemData>;
default: null;
};
selected: {
type: PropType<MenuItemValue | 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;
};
}>> & 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: 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: Ref<{
id: string;
value: 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;
disabled?: boolean | undefined;
} | null, import("../../types").MenuItemDataWithId | {
id: string;
value: 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;
disabled?: boolean | undefined;
} | null>;
highlightedViaKeyboard: Ref<boolean, boolean>;
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>;
menuListbox: Ref<HTMLElement | undefined, HTMLElement | undefined>;
getGroupWrapperClasses: (group: MenuGroupData) => {
'cdx-menu__group-wrapper--hide-label': boolean;
};
getMenuItemIndex: (menuItem: import("../../types").MenuItemDataWithId) => number;
getMenuItemBindings: (menuItem: import("../../types").MenuItemDataWithId) => {
id: string;
value: MenuItemValue;
label?: string;
match?: string;
supportingText?: string;
description?: string | null;
language?: import("../../types").MenuItemLanguageData;
icon?: import("@wikimedia/codex-icons").Icon;
thumbnail?: import("../../types").Thumbnail | null;
url?: string;
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: MenuItemData | MenuGroupData) => menuEntry is MenuGroupData;
}, {}, {}, {
isExpanded(): boolean;
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: MenuItemData;
searchQuery: string;
showThumbnail: boolean;
boldLabel: boolean;
hideDescriptionOverflow: boolean;
showPending: boolean;
visibleItemLimit: number | null;
showNoResultsSlot: boolean | null;
}, true, {}, {}, {
CdxMenuItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
id: {
type: StringConstructor;
required: true;
};
value: {
type: PropType<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;
};
icon: {
type: PropType<import("@wikimedia/codex-icons").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">;
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<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;
};
icon: {
type: PropType<import("@wikimedia/codex-icons").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;
};
}>> & Readonly<{
onChange?: ((...args: any[]) => any) | undefined;
}>, {
url: string;
selected: boolean;
highlighted: boolean;
active: boolean;
icon: import("@wikimedia/codex-icons").Icon;
label: string;
match: string;
action: "default" | "progressive" | "destructive";
disabled: boolean;
thumbnail: import("../../types").Thumbnail | null;
description: string | null;
searchQuery: string;
supportingText: string;
showThumbnail: boolean;
boldLabel: boolean;
hideDescriptionOverflow: boolean;
language: import("../../types").MenuItemLanguageData;
multiselect: boolean;
}, {}, {
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: 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>;
CdxThumbnail: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
thumbnail: {
type: PropType<import("../../types").Thumbnail | null>;
default: null;
};
placeholderIcon: {
type: PropType<import("@wikimedia/codex-icons").Icon>;