@wikimedia/wvui
Version:
Wikimedia Vue UI (WVUI) – Wikimedia Foundation's Vue.js shared user-interface components for Wikipedia, MediaWiki, and beyond.
119 lines (118 loc) • 3.86 kB
TypeScript
import Vue from 'vue';
import { PropType } from '@vue/composition-api';
import { OptionsMenuItem } from '../options-menu/OptionsMenuItem';
declare const _default: import("vue").ComponentOptions<Vue, import("@vue/composition-api").ShallowUnwrapRef<{
prefixId: (suffix: string) => string;
}> & {
wvuiIconExpand: string;
showMenu: boolean;
}, {
onKeyNavigation(event: KeyboardEvent): void;
onClick(): void;
}, {
wrappedModel: {
get(): string | null;
set(newValue: string | null): void;
};
rootClasses(): Record<string, boolean>;
menuId(): string;
itemsById(): Record<string, OptionsMenuItem>;
selectedItem(): OptionsMenuItem | null;
}, {
/**
* Available items in the menu. The items' IDs must be unique within each dropdown.
*/
items: {
type: PropType<OptionsMenuItem[]>;
required: true;
};
/**
* 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;
};
/**
* Label to display when no item is selected.
*/
defaultLabel: {
type: StringConstructor;
default: string;
};
/**
* Whether the dropdown is disabled. Disabled dropdowns can't be interacted with.
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
}, {
disabled: boolean;
selectedItemId: string | null;
items: OptionsMenuItem[];
defaultLabel: string;
} & {}> & import("vue").VueConstructor<Vue> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
disabled: boolean;
selectedItemId: string | null;
items: OptionsMenuItem[];
defaultLabel: string;
} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
prefixId: (suffix: string) => string;
}>, {
wvuiIconExpand: string;
showMenu: boolean;
}, {
wrappedModel: {
get(): string | null;
set(newValue: string | null): void;
};
rootClasses(): Record<string, boolean>;
menuId(): string;
itemsById(): Record<string, OptionsMenuItem>;
selectedItem(): OptionsMenuItem | null;
}, {
onKeyNavigation(event: KeyboardEvent): void;
onClick(): void;
}, {
disabled: boolean;
selectedItemId: string | null;
items: OptionsMenuItem[];
defaultLabel: string;
} & {}, {
disabled: boolean;
selectedItemId: string | null;
defaultLabel: string;
}, true>);
/**
* Dropdown menu, like HTML `<select>`. Displays the selected item (or a default label, if no item
* is selected), and expands on click to show all available items.
*
* 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 can be customized through named slots. The menuItem slot is used for the
* display of items in the menu, and the selectedItem slot is used for the display of the currently
* selected item. Note that the item passed to the selectedItem slot will be null if no item is
* selected.
*
* @example
* <wvui-dropdown v-model="number" :items="[{id: 1, label: 'One'}, {id: 2, label: 'Two'}]" />
*
* @example
* <wvui-dropdown v-model="..." :items="...">
* <template #menuItem="{ item }">
* {{ item.label }} (id: {{item.id}})
* </template>
* <template #selectedItem="{ item, defaultLabel }">
* <template v-if="item !== null">
* {{ item.label }} (id: {{item.id }})
* </template>
* <template v-else>
* {{ defaultLabel }}
* </template>
* </template>
* </wvui-dropdown>
*/
export default _default;