@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
110 lines (109 loc) • 3.57 kB
TypeScript
import type { NeonDropdownMenuItem } from '@/common/models/NeonDropdownMenuItem';
import { NeonSize } from '@/common/enums/NeonSize';
import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
import { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';
/**
* <p>A dropdown menu consisting of a button to open the menu and a list of menu items. Clicking on a menu item will
* result in navigating to the provided URL or notifying the parent component via the @click event.</p>
* <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by
* <a href="/presentation/dropdown">NeonDropdown</a> to change the style of the dropdown button.</p>
*/
declare const _default: import("vue").DefineComponent<{
/**
* A list of menu items to render in the dropdown menu.
*/
model: {
type: () => Array<NeonDropdownMenuItem>;
required: true;
};
/**
* The size of the dropdown - Small, Medium or Large.
*/
size: {
type: () => NeonSize;
default: NeonSize;
};
/**
* The dropdown color.
*/
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
/**
* Whether the dropdown button is disabled or not.
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* Instead of opening on click (default), open on hover.
*/
openOnHover: {
type: BooleanConstructor;
default: boolean;
};
}, {
dropdown: import("vue").Ref<HTMLElement | null>;
items: import("vue").Ref<HTMLLIElement[]>;
open: import("vue").Ref<boolean>;
highlightedKey: import("vue").Ref<string | null>;
highlightedIndex: import("vue").Ref<number>;
attrs: {
[x: string]: unknown;
};
emit: (event: "click" | "button-ref", ...args: any[]) => void;
changeHighlighted: (key: string) => void;
keyboardHandler: ($event: KeyboardEvent) => void;
onBlur: () => void;
onFocus: () => void;
clickItem: (item: NeonDropdownMenuItem) => void;
navigateBy: (offset: number, $event: KeyboardEvent) => void;
onPlacement: (placement: NeonDropdownPlacement) => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "button-ref")[], "click" | "button-ref", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
/**
* A list of menu items to render in the dropdown menu.
*/
model: {
type: () => Array<NeonDropdownMenuItem>;
required: true;
};
/**
* The size of the dropdown - Small, Medium or Large.
*/
size: {
type: () => NeonSize;
default: NeonSize;
};
/**
* The dropdown color.
*/
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
/**
* Whether the dropdown button is disabled or not.
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* Instead of opening on click (default), open on hover.
*/
openOnHover: {
type: BooleanConstructor;
default: boolean;
};
}>> & {
onClick?: ((...args: any[]) => any) | undefined;
"onButton-ref"?: ((...args: any[]) => any) | undefined;
}, {
disabled: boolean;
size: NeonSize;
color: NeonFunctionalColor;
openOnHover: boolean;
}, {}>;
export default _default;