@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
261 lines (260 loc) • 7.27 kB
TypeScript
import { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';
import { NeonSize } from '@/common/enums/NeonSize';
import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
import { NeonDropdownStyle } from '@/common/enums/NeonDropdownStyle';
/**
* <p>A general purpose dropdown component. This component consists of a button, to trigger the dropdown to open, and
* the dropdown content which is displayed above the page when the user clicks the button.</p>
* <p>This can be useful for secondary (perhaps more complex) actions for which there is not enough space on the page or
* the action is asynchronous allowing the user to perform the action and continue what they were doing. Examples are
* providing links to copy and letting the user send feedback.</p>
* <p><strong>NeonDropdown</strong> is the basis for the <strong>NeonDropdownMenu</strong> component and the
* <strong>NeonSelect</strong> form component.</p>
*/
declare const _default: import("vue").DefineComponent<{
/**
* Id for the dropdown button.
*/
id: {
type: StringConstructor;
};
/**
* Whether the dropdown is currently open.
*/
modelValue: {
type: BooleanConstructor;
required: true;
};
/**
* The label for the dropdown button.
*/
label: {
type: StringConstructor;
default: null;
};
/**
* URL of image to display if the button style is a square or circular badge.
*/
image: {
type: StringConstructor;
default: null;
};
/**
* Badge image ALT text.
*/
imageAlt: {
type: StringConstructor;
default: null;
};
/**
* An icon to display on the dropdown button. This will be to the left of any label, but can also be used on its own.
*/
icon: {
type: StringConstructor;
default: null;
};
/**
* Show the dropdown button's indicator (chevron).
*/
indicator: {
type: BooleanConstructor;
default: boolean;
};
/**
* Disable the dropdown button
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* The size of the dropdown button - Small, Medium or Large.
*/
size: {
type: () => NeonSize;
default: NeonSize;
};
/**
* The color of the dropdown button
*/
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
/**
* The alternate color of the dropdown button (for gradient buttons).
*/
alternateColor: {
type: () => NeonFunctionalColor;
default: null;
};
/**
* The style of the dropdown button
*/
dropdownStyle: {
type: () => NeonDropdownStyle;
default: NeonDropdownStyle;
};
/**
* Placement of the dropdown contents.
*/
placement: {
type: () => NeonDropdownPlacement;
default: NeonDropdownPlacement;
};
/**
* Restrict placement to within this container.
*/
placementContainer: {
type: () => HTMLElement;
default: null;
};
/**
* Instead of opening on click (default), open on hover.
*/
openOnHover: {
type: BooleanConstructor;
default: boolean;
};
}, {
dropdownButton: import("vue").Ref<HTMLElement | null>;
dropdownContent: import("vue").Ref<HTMLDivElement | null>;
dropdownPlacement: import("vue").Ref<NeonDropdownPlacement>;
closableUtils: import("vue").Ref<{
open: () => void;
destroy: () => void;
escapeKeyListener: (event: KeyboardEvent) => void;
close: () => void;
} | null>;
onClose: () => void;
close: () => void;
toggleOpen: () => void;
onBlur: () => void;
onFocus: () => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "dropdown-placement" | "button-ref")[], "update:modelValue" | "focus" | "blur" | "dropdown-placement" | "button-ref", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
/**
* Id for the dropdown button.
*/
id: {
type: StringConstructor;
};
/**
* Whether the dropdown is currently open.
*/
modelValue: {
type: BooleanConstructor;
required: true;
};
/**
* The label for the dropdown button.
*/
label: {
type: StringConstructor;
default: null;
};
/**
* URL of image to display if the button style is a square or circular badge.
*/
image: {
type: StringConstructor;
default: null;
};
/**
* Badge image ALT text.
*/
imageAlt: {
type: StringConstructor;
default: null;
};
/**
* An icon to display on the dropdown button. This will be to the left of any label, but can also be used on its own.
*/
icon: {
type: StringConstructor;
default: null;
};
/**
* Show the dropdown button's indicator (chevron).
*/
indicator: {
type: BooleanConstructor;
default: boolean;
};
/**
* Disable the dropdown button
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* The size of the dropdown button - Small, Medium or Large.
*/
size: {
type: () => NeonSize;
default: NeonSize;
};
/**
* The color of the dropdown button
*/
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
/**
* The alternate color of the dropdown button (for gradient buttons).
*/
alternateColor: {
type: () => NeonFunctionalColor;
default: null;
};
/**
* The style of the dropdown button
*/
dropdownStyle: {
type: () => NeonDropdownStyle;
default: NeonDropdownStyle;
};
/**
* Placement of the dropdown contents.
*/
placement: {
type: () => NeonDropdownPlacement;
default: NeonDropdownPlacement;
};
/**
* Restrict placement to within this container.
*/
placementContainer: {
type: () => HTMLElement;
default: null;
};
/**
* Instead of opening on click (default), open on hover.
*/
openOnHover: {
type: BooleanConstructor;
default: boolean;
};
}>> & {
onFocus?: ((...args: any[]) => any) | undefined;
onBlur?: ((...args: any[]) => any) | undefined;
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
"onDropdown-placement"?: ((...args: any[]) => any) | undefined;
"onButton-ref"?: ((...args: any[]) => any) | undefined;
}, {
disabled: boolean;
label: string;
placement: NeonDropdownPlacement;
icon: string;
placementContainer: HTMLElement;
size: NeonSize;
color: NeonFunctionalColor;
image: string;
alternateColor: NeonFunctionalColor;
imageAlt: string;
indicator: boolean;
dropdownStyle: NeonDropdownStyle;
openOnHover: boolean;
}, {}>;
export default _default;