@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
108 lines (107 loc) • 3.88 kB
TypeScript
import type { NeonMenuModel } from '@/common/models/NeonMenuModel';
import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
import { NeonSize } from '@/common/enums/NeonSize';
/**
* <p>
* <strong>NeonMenu</strong> is a responsive aware menu that progressively collapses options into the mobile menu as
* the screen size gets smaller. This is a more flexible option than moving directly to a hamburger menu at tablet and
* below. It is a best effort approach to keep displaying the most important menu items for as long as possible,
* giving the user a better experience.
* </p>
*/
declare const _default: import("vue").DefineComponent<{
/**
* The menu configuration. This can have two levels, i.e. a top level horizontal menu and, if required, a dropdown
* menu containing the second level. The highlighted 'active' menu is determined by the current Vue route.
*/
menu: {
type: () => Array<NeonMenuModel>;
required: true;
};
/**
* The menu highlight color (excludes low-contrast and neutral).
*/
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
/**
* The menu size.
*/
size: {
type: () => NeonSize;
default: NeonSize;
};
/**
* Whether to enable the priority menu which automatically calculates the available screen space and displays
* as many of the menu items as possible, moving the remaining items into the overflow menu.
*/
priorityMenuEnabled: {
type: BooleanConstructor;
default: boolean;
};
}, {
menuWrapper: import("vue").Ref<HTMLElement | null>;
menuItem: import("vue").Ref<HTMLElement[] | null>;
menuItems: import("vue").Ref<{
element: HTMLElement;
width: number;
key: string;
}[]>;
responsiveButton: import("vue").Ref<HTMLElement | null>;
responsiveMenuItems: import("vue").Ref<{
children?: {
key: string;
label: string;
href?: string | undefined;
icon?: string | undefined;
disabled?: boolean | undefined;
}[] | undefined;
key: string;
label: string;
href?: string | undefined;
icon?: string | undefined;
disabled?: boolean | undefined;
}[]>;
visible: import("vue").Ref<string[]>;
onClick: (key: string) => void;
routeMatches: (path?: string) => boolean | "" | undefined;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
/**
* The menu configuration. This can have two levels, i.e. a top level horizontal menu and, if required, a dropdown
* menu containing the second level. The highlighted 'active' menu is determined by the current Vue route.
*/
menu: {
type: () => Array<NeonMenuModel>;
required: true;
};
/**
* The menu highlight color (excludes low-contrast and neutral).
*/
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
/**
* The menu size.
*/
size: {
type: () => NeonSize;
default: NeonSize;
};
/**
* Whether to enable the priority menu which automatically calculates the available screen space and displays
* as many of the menu items as possible, moving the remaining items into the overflow menu.
*/
priorityMenuEnabled: {
type: BooleanConstructor;
default: boolean;
};
}>> & {
onClick?: ((...args: any[]) => any) | undefined;
}, {
size: NeonSize;
color: NeonFunctionalColor;
priorityMenuEnabled: boolean;
}, {}>;
export default _default;