@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
223 lines (222 loc) • 6.39 kB
TypeScript
import { NeonSize } from '@/common/enums/NeonSize';
import type { NeonSelectGroup } from '@/common/models/NeonSelectGroup';
import type { NeonSelectOption } from '@/common/models/NeonSelectOption';
import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
import { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';
/**
* <p>The <strong>NeonSelect</strong> is the equivalent of an HTML <select> form control. On touch devices
* NeonSelect will use the native select for input. <strong>NeonSelect</strong> supports grouping and multiselect.</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<{
/**
* Id for the dropdown button
*/
id: {
type: StringConstructor;
};
/**
* Placeholder to display as button label when there is no option selected.
*/
placeholder: {
type: StringConstructor;
required: true;
};
/**
* Display the placeholder as the first option in the select, this is useful as an alternative to a label.
*/
placeholderAsOption: {
type: BooleanConstructor;
default: boolean;
};
/**
* Optional placeholder icon.
*/
placeholderIcon: {
type: StringConstructor;
required: false;
};
/**
* A list of options to render in the select.
*/
options: {
type: () => Array<NeonSelectOption>;
required: false;
};
/**
* A list of grouped options to render in the select.
*/
groupedOptions: {
type: () => Array<NeonSelectGroup>;
required: false;
};
/**
* Either a single string, indicating the key of the selected option or an array of selected keys in the case
* multiple = true.
*/
modelValue: {
type: (StringConstructor | (() => Array<string>))[];
required: true;
};
/**
* Allow multi-select.
*/
multiple: {
type: BooleanConstructor;
default: boolean;
};
/**
* Placeholder when multiple values are selected.
*/
multiselectPlaceholder: {
type: StringConstructor;
required: false;
};
/**
* Disable the select
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* The size of the dropdown - Small, Medium or Large.
*/
size: {
type: () => NeonSize;
default: NeonSize;
};
/**
* The color of the select.
*/
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
/**
* Placement of the dropdown contents.
*/
placement: {
type: () => NeonDropdownPlacement;
default: NeonDropdownPlacement;
};
}, {
dropdown: import("vue").Ref<HTMLElement | null>;
open: import("vue").Ref<boolean>;
highlightedKey: import("vue").Ref<string | null>;
highlightedIndex: import("vue").Ref<number>;
flattenedOptions: import("vue").ComputedRef<NeonSelectOption[]>;
computedLabel: import("vue").ComputedRef<string>;
sanitizedAttributes: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
computedOptions: import("vue").ComputedRef<NeonSelectGroup[]>;
computedIcon: import("vue").ComputedRef<string | undefined>;
clickOption: (option: NeonSelectOption) => void;
nativeSelectChange: (event: Event) => void;
changeHighlighted: (key: string) => void;
onPlacement: (placement: NeonDropdownPlacement) => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
/**
* Id for the dropdown button
*/
id: {
type: StringConstructor;
};
/**
* Placeholder to display as button label when there is no option selected.
*/
placeholder: {
type: StringConstructor;
required: true;
};
/**
* Display the placeholder as the first option in the select, this is useful as an alternative to a label.
*/
placeholderAsOption: {
type: BooleanConstructor;
default: boolean;
};
/**
* Optional placeholder icon.
*/
placeholderIcon: {
type: StringConstructor;
required: false;
};
/**
* A list of options to render in the select.
*/
options: {
type: () => Array<NeonSelectOption>;
required: false;
};
/**
* A list of grouped options to render in the select.
*/
groupedOptions: {
type: () => Array<NeonSelectGroup>;
required: false;
};
/**
* Either a single string, indicating the key of the selected option or an array of selected keys in the case
* multiple = true.
*/
modelValue: {
type: (StringConstructor | (() => Array<string>))[];
required: true;
};
/**
* Allow multi-select.
*/
multiple: {
type: BooleanConstructor;
default: boolean;
};
/**
* Placeholder when multiple values are selected.
*/
multiselectPlaceholder: {
type: StringConstructor;
required: false;
};
/**
* Disable the select
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* The size of the dropdown - Small, Medium or Large.
*/
size: {
type: () => NeonSize;
default: NeonSize;
};
/**
* The color of the select.
*/
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
/**
* Placement of the dropdown contents.
*/
placement: {
type: () => NeonDropdownPlacement;
default: NeonDropdownPlacement;
};
}>> & {
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
}, {
disabled: boolean;
placement: NeonDropdownPlacement;
size: NeonSize;
color: NeonFunctionalColor;
multiple: boolean;
placeholderAsOption: boolean;
}, {}>;
export default _default;