@wikimedia/wvui
Version:
Wikimedia Vue UI (WVUI) – Wikimedia Foundation's Vue.js shared user-interface components for Wikipedia, MediaWiki, and beyond.
92 lines (91 loc) • 3.37 kB
TypeScript
import Vue from 'vue';
import { PropType } from '@vue/composition-api';
import { OptionsMenuItem } from './OptionsMenuItem';
declare const _default: import("vue").ComponentOptions<Vue, import("@vue/composition-api").ShallowUnwrapRef<{
prefixId: (suffix: string) => string;
}> & {
activeItemIndex: number | null;
highlightedItemIndex: number | null;
}, {
itemClasses(item: OptionsMenuItem, index: number): Record<string, boolean>;
onItemMousedown(item: OptionsMenuItem, index: number): void;
onItemClick(item: OptionsMenuItem): void;
getSelectedItemIndex(): number | null;
moveHighlight(direction: 'backward' | 'forward'): void;
selectHighlightedItem(): void;
handleKeyboardEvent(event: KeyboardEvent): void;
}, {
activeDescendantId(): string | null;
}, {
/**
* Items to list in the menu. Item IDs must be unique within each menu.
*/
items: {
type: PropType<OptionsMenuItem[]>;
required: true;
validator: (items: unknown) => boolean;
};
/**
* The ID of the selected item, or null if no item is selected. This is the v-model value.
*/
selectedItemId: {
type: PropType<string | null>;
default: null;
};
}, {
selectedItemId: string | null;
items: OptionsMenuItem[];
} & {}> & import("vue").VueConstructor<Vue> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
selectedItemId: string | null;
items: OptionsMenuItem[];
} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
prefixId: (suffix: string) => string;
}>, {
activeItemIndex: number | null;
highlightedItemIndex: number | null;
}, {
activeDescendantId(): string | null;
}, {
itemClasses(item: OptionsMenuItem, index: number): Record<string, boolean>;
onItemMousedown(item: OptionsMenuItem, index: number): void;
onItemClick(item: OptionsMenuItem): void;
getSelectedItemIndex(): number | null;
moveHighlight(direction: 'backward' | 'forward'): void;
selectHighlightedItem(): void;
handleKeyboardEvent(event: KeyboardEvent): void;
}, {
selectedItemId: string | null;
items: OptionsMenuItem[];
} & {}, {
selectedItemId: string | null;
}, true>);
/**
* Menu that displays a set of options, and lets the user select one.
*
* This component is designed to be used inside other components. The logic for keyboard navigation
* between items is implemented here, but this component doesn't attach keyboard event listeners.
* The parent component is expected to listen for keyboard events and call handleKeyboardEvent().
*
* Set the available items through the items prop, and get/set the ID of the selected item through
* v-model. The v-model value will be the .id property of the selected item, or null if no item
* is selected.
*
* How items are displayed in the menu can be customized through the main slot. By default, the
* item's label is used.
*
* @example
* <wvui-options-menu
* v-model="number"
* :items="[{id: 1, label: 'One'}, {id: 2, label: 'Two'}]"
* />
*
* @example
* <wvui-options-menu
* #default="{ item }"
* v-model="number"
* :items="[{id: 1, label: 'One'}, {id: 2, label: 'Two'}]"
* >
* {{ item.label }} (id: {{ item.id }})
* </wvui-options-menu>
*/
export default _default;