@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
1,133 lines • 348 kB
TypeScript
import type { NeonMenuModel } from '@/model/navigation/menu/NeonMenuModel';
import { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';
import { NeonSize } from '@/model/common/size/NeonSize';
import type { NeonPriorityMenuItem } from '@/model/navigation/menu/NeonPriorityMenuItem';
/**
* <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. Use NeonMenu inside NeonTopNav for primary navigation.
* </p>
*/
declare const _default: import("vue").DefineComponent<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;
};
}>, {
menuWrapper: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
menuItem: import("vue").Ref<HTMLElement[] | null, HTMLElement[] | null>;
menuItems: import("vue").Ref<{
element: HTMLElement;
width: number;
key: string;
}[], NeonPriorityMenuItem[] | {
element: HTMLElement;
width: number;
key: string;
}[]>;
responsiveMenuItems: import("vue").Ref<{
children?: {
key: string;
label?: string | undefined;
href?: string | undefined;
icon?: string | undefined;
disabled?: boolean | undefined;
}[] | undefined;
key: string;
label?: string | undefined;
href?: string | undefined;
icon?: string | undefined;
disabled?: boolean | undefined;
}[], NeonMenuModel[] | {
children?: {
key: string;
label?: string | undefined;
href?: string | undefined;
icon?: string | undefined;
disabled?: boolean | undefined;
}[] | undefined;
key: string;
label?: string | undefined;
href?: string | undefined;
icon?: string | undefined;
disabled?: boolean | undefined;
}[]>;
visible: import("vue").Ref<string[], string[]>;
onClick: (key: string) => void;
routeMatches: (path?: string) => boolean | "" | undefined;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, 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;
};
}>> & Readonly<{
onClick?: ((...args: any[]) => any) | undefined;
}>, {
color: NeonFunctionalColor;
size: NeonSize;
priorityMenuEnabled: boolean;
}, {}, {
NeonDropdownMenu: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
model: {
type: () => import("../../../neon").NeonDropdownMenuItem[];
required: true;
};
size: {
type: () => NeonSize;
default: NeonSize;
};
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
placement: {
type: () => import("../../../neon").NeonDropdownPlacement;
default: import("../../../neon").NeonDropdownPlacement;
};
openOnHover: {
type: BooleanConstructor;
default: boolean;
};
}>, {
dropdown: import("vue").Ref<import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
id: {
type: StringConstructor;
};
modelValue: {
type: BooleanConstructor;
required: true;
};
label: {
type: StringConstructor;
default: null;
};
image: {
type: StringConstructor;
default: null;
};
imageAlt: {
type: StringConstructor;
default: null;
};
icon: {
type: StringConstructor;
default: null;
};
iconAriaLabel: {
type: StringConstructor;
};
indicator: {
type: BooleanConstructor;
default: boolean;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
size: {
type: () => NeonSize;
default: NeonSize;
};
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
alternateColor: {
type: () => NeonFunctionalColor;
default: null;
};
dropdownStyle: {
type: () => import("../../../neon").NeonDropdownStyle;
default: import("../../../neon").NeonDropdownStyle;
};
placement: {
type: () => import("../../../neon").NeonDropdownPlacement;
default: import("../../../neon").NeonDropdownPlacement;
};
placementContainer: {
type: () => HTMLElement;
default: null;
};
openOnHover: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
onFocus?: ((...args: any[]) => any) | undefined;
onBlur?: ((...args: any[]) => any) | undefined;
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
"onDropdown-placement"?: ((...args: any[]) => any) | undefined;
}>, {
dropdownButton: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
dropdownContent: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
dropdownPlacement: import("vue").Ref<import("../../../neon").NeonDropdownPlacement, import("../../../neon").NeonDropdownPlacement>;
closableUtils: import("vue").Ref<{
open: () => void;
destroy: () => void;
escapeKeyListener: (event: KeyboardEvent) => void;
close: () => void;
} | null, import("../../../neon").NeonClosableUtils | {
open: () => void;
destroy: () => void;
escapeKeyListener: (event: KeyboardEvent) => void;
close: () => void;
} | null>;
isButtonStyle: import("vue").ComputedRef<boolean>;
onClose: () => void;
close: () => void;
toggleOpen: () => void;
onBlur: () => void;
onFocus: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "blur" | "focus" | "dropdown-placement")[], import("vue").PublicProps, {
color: NeonFunctionalColor;
icon: string;
label: string;
disabled: boolean;
image: string;
size: NeonSize;
placement: import("../../../neon").NeonDropdownPlacement;
alternateColor: NeonFunctionalColor;
indicator: boolean;
imageAlt: string;
dropdownStyle: import("../../../neon").NeonDropdownStyle;
placementContainer: HTMLElement;
openOnHover: boolean;
}, true, {}, {}, {
NeonBadge: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
label: {
type: StringConstructor;
default: null;
};
image: {
type: StringConstructor;
default: null;
};
icon: {
type: StringConstructor;
default: null;
};
circular: {
type: BooleanConstructor;
default: boolean;
};
size: {
type: () => import("../../../neon").NeonBadgeSize;
default: import("../../../neon").NeonBadgeSize; /**
* The menu size.
*/
}; /**
* The menu size.
*/
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
alternateColor: {
type: () => NeonFunctionalColor;
default: null;
};
editable: {
type: BooleanConstructor;
default: boolean;
};
accept: {
type: StringConstructor;
default: string;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
jazziconId: {
type: StringConstructor;
default: null;
};
imageAlt: {
type: StringConstructor;
default: string;
};
editButtonTitle: {
type: StringConstructor;
default: string;
};
}>, {
emit: (event: "change-image", ...args: any[]) => void;
svg: import("vue").ComputedRef<string | null>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change-image"[], "change-image", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
label: {
type: StringConstructor;
default: null;
};
image: {
type: StringConstructor;
default: null;
};
icon: {
type: StringConstructor;
default: null;
};
circular: {
type: BooleanConstructor;
default: boolean;
};
size: {
type: () => import("../../../neon").NeonBadgeSize;
default: import("../../../neon").NeonBadgeSize; /**
* The menu size.
*/
}; /**
* The menu size.
*/
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
alternateColor: {
type: () => NeonFunctionalColor;
default: null;
};
editable: {
type: BooleanConstructor;
default: boolean;
};
accept: {
type: StringConstructor;
default: string;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
jazziconId: {
type: StringConstructor;
default: null;
};
imageAlt: {
type: StringConstructor;
default: string;
};
editButtonTitle: {
type: StringConstructor;
default: string;
};
}>> & Readonly<{
"onChange-image"?: ((...args: any[]) => any) | undefined;
}>, {
color: NeonFunctionalColor;
icon: string;
label: string;
disabled: boolean;
image: string;
size: import("../../../neon").NeonBadgeSize;
alternateColor: NeonFunctionalColor;
circular: boolean;
accept: string;
editable: boolean;
jazziconId: string;
imageAlt: string;
editButtonTitle: string;
}, {}, {
NeonFile: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
disabled: {
type: BooleanConstructor;
default: boolean;
};
directUpload: {
type: BooleanConstructor;
default: boolean;
};
multiple: {
type: BooleanConstructor;
default: boolean;
};
accept: {
type: StringConstructor;
default: null;
};
id: {
type: StringConstructor;
default: null;
};
size: {
type: () => NeonSize;
default: NeonSize; /**
* The menu size.
*/
}; /**
* The menu size.
*/
state: {
type: () => import("../../../neon").NeonState;
default: import("../../../neon").NeonState;
};
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
buttonStyle: {
type: () => import("../../../neon").NeonButtonStyle;
default: import("../../../neon").NeonButtonStyle;
};
circular: {
type: BooleanConstructor;
default: null;
};
label: {
type: StringConstructor;
default: null;
};
icon: {
type: StringConstructor;
default: null;
};
title: {
type: StringConstructor;
default: string;
};
}>, {
fileInput: import("vue").Ref<import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
id: {
type: StringConstructor;
default: null;
};
modelValue: {
type: StringConstructor;
default: null;
};
type: {
type: () => import("../../../neon").NeonInputType;
default: import("../../../neon").NeonInputType;
};
placeholder: {
type: StringConstructor;
default: null;
};
size: {
type: () => NeonSize;
default: NeonSize;
};
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
inputmode: {
type: () => import("../../../neon").NeonInputMode;
default: import("../../../neon").NeonInputMode;
};
autocomplete: {
type: StringConstructor;
default: string;
};
state: {
type: () => import("../../../neon").NeonState;
default: import("../../../neon").NeonState;
};
rows: {
type: NumberConstructor;
default: null;
};
icon: {
type: StringConstructor;
default: null;
};
iconReadonly: {
type: BooleanConstructor;
default: boolean;
};
hideIcon: {
type: BooleanConstructor;
default: boolean;
};
tabindex: {
type: NumberConstructor;
default: number;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
stateHighlight: {
type: BooleanConstructor;
default: boolean;
};
stateIcon: {
type: BooleanConstructor;
default: boolean;
};
maxlength: {
type: NumberConstructor;
default: null;
};
maxlengthLabel: {
type: StringConstructor;
default: string;
};
debounce: {
type: NumberConstructor;
default: undefined;
};
}>> & Readonly<{
onFocus?: ((...args: any[]) => any) | undefined;
onBlur?: ((...args: any[]) => any) | undefined;
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
"onIcon-click"?: ((...args: any[]) => any) | undefined;
}>, {
neonInput: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
focused: import("vue").Ref<boolean, boolean>;
sanitizedAttributes: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
iconVisible: import("vue").ComputedRef<string | boolean | undefined>;
iconName: import("vue").ComputedRef<string | undefined>;
iconColor: import("vue").ComputedRef<NeonFunctionalColor>;
computedPlaceholder: import("vue").ComputedRef<string>;
counterLabel: import("vue").ComputedRef<string | null>;
focus: () => void;
click: () => void;
onFocus: () => void;
onBlur: () => void;
iconClicked: ($event: Event) => void;
changeValue: (event: InputEvent) => void;
onKeyDown: (event: KeyboardEvent) => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "blur" | "focus" | "icon-click")[], import("vue").PublicProps, {
color: NeonFunctionalColor;
icon: string;
type: import("../../../neon").NeonInputType;
id: string;
disabled: boolean;
size: NeonSize;
placeholder: string;
tabindex: number;
inputmode: import("../../../neon").NeonInputMode;
modelValue: string;
state: import("../../../neon").NeonState;
autocomplete: string;
rows: number;
iconReadonly: boolean;
hideIcon: boolean;
stateHighlight: boolean;
stateIcon: boolean;
maxlength: number;
maxlengthLabel: string;
debounce: number;
}, true, {}, {}, {
NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
name: {
type: StringConstructor;
required: true;
};
id: {
type: StringConstructor;
default: null;
};
color: {
type: () => NeonFunctionalColor;
default: null;
};
inverse: {
type: BooleanConstructor;
default: boolean;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
}>, {
sanitizedAttributes: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
icon: import("vue").ComputedRef<string | undefined>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
name: {
type: StringConstructor;
required: true;
};
id: {
type: StringConstructor;
default: null;
};
color: {
type: () => NeonFunctionalColor;
default: null;
};
inverse: {
type: BooleanConstructor;
default: boolean;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
color: NeonFunctionalColor;
id: string;
inverse: boolean;
disabled: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
} & import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<import("vue").ExtractPropTypes<{
id: {
type: StringConstructor;
default: null;
};
modelValue: {
type: StringConstructor;
default: null;
};
type: {
type: () => import("../../../neon").NeonInputType;
default: import("../../../neon").NeonInputType;
};
placeholder: {
type: StringConstructor;
default: null;
};
size: {
type: () => NeonSize;
default: NeonSize;
};
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
inputmode: {
type: () => import("../../../neon").NeonInputMode;
default: import("../../../neon").NeonInputMode;
};
autocomplete: {
type: StringConstructor;
default: string;
};
state: {
type: () => import("../../../neon").NeonState;
default: import("../../../neon").NeonState;
};
rows: {
type: NumberConstructor;
default: null;
};
icon: {
type: StringConstructor;
default: null;
};
iconReadonly: {
type: BooleanConstructor;
default: boolean;
};
hideIcon: {
type: BooleanConstructor;
default: boolean;
};
tabindex: {
type: NumberConstructor;
default: number;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
stateHighlight: {
type: BooleanConstructor;
default: boolean;
};
stateIcon: {
type: BooleanConstructor;
default: boolean;
};
maxlength: {
type: NumberConstructor;
default: null;
};
maxlengthLabel: {
type: StringConstructor;
default: string;
};
debounce: {
type: NumberConstructor;
default: undefined;
};
}>> & Readonly<{
onFocus?: ((...args: any[]) => any) | undefined;
onBlur?: ((...args: any[]) => any) | undefined;
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
"onIcon-click"?: ((...args: any[]) => any) | undefined;
}>, {
neonInput: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
focused: import("vue").Ref<boolean, boolean>;
sanitizedAttributes: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
iconVisible: import("vue").ComputedRef<string | boolean | undefined>;
iconName: import("vue").ComputedRef<string | undefined>;
iconColor: import("vue").ComputedRef<NeonFunctionalColor>;
computedPlaceholder: import("vue").ComputedRef<string>;
counterLabel: import("vue").ComputedRef<string | null>;
focus: () => void;
click: () => void;
onFocus: () => void;
onBlur: () => void;
iconClicked: ($event: Event) => void;
changeValue: (event: InputEvent) => void;
onKeyDown: (event: KeyboardEvent) => void;
}, {}, {}, {}, {
color: NeonFunctionalColor;
icon: string;
type: import("../../../neon").NeonInputType;
id: string;
disabled: boolean;
size: NeonSize;
placeholder: string;
tabindex: number;
inputmode: import("../../../neon").NeonInputMode;
modelValue: string;
state: import("../../../neon").NeonState;
autocomplete: string;
rows: number;
iconReadonly: boolean;
hideIcon: boolean;
stateHighlight: boolean;
stateIcon: boolean;
maxlength: number;
maxlengthLabel: string;
debounce: number;
}> | null, import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
id: {
type: StringConstructor;
default: null;
};
modelValue: {
type: StringConstructor;
default: null;
};
type: {
type: () => import("../../../neon").NeonInputType;
default: import("../../../neon").NeonInputType;
};
placeholder: {
type: StringConstructor;
default: null;
};
size: {
type: () => NeonSize;
default: NeonSize;
};
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
inputmode: {
type: () => import("../../../neon").NeonInputMode;
default: import("../../../neon").NeonInputMode;
};
autocomplete: {
type: StringConstructor;
default: string;
};
state: {
type: () => import("../../../neon").NeonState;
default: import("../../../neon").NeonState;
};
rows: {
type: NumberConstructor;
default: null;
};
icon: {
type: StringConstructor;
default: null;
};
iconReadonly: {
type: BooleanConstructor;
default: boolean;
};
hideIcon: {
type: BooleanConstructor;
default: boolean;
};
tabindex: {
type: NumberConstructor;
default: number;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
stateHighlight: {
type: BooleanConstructor;
default: boolean;
};
stateIcon: {
type: BooleanConstructor;
default: boolean;
};
maxlength: {
type: NumberConstructor;
default: null;
};
maxlengthLabel: {
type: StringConstructor;
default: string;
};
debounce: {
type: NumberConstructor;
default: undefined;
};
}>> & Readonly<{
onFocus?: ((...args: any[]) => any) | undefined;
onBlur?: ((...args: any[]) => any) | undefined;
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
"onIcon-click"?: ((...args: any[]) => any) | undefined;
}>, {
neonInput: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
focused: import("vue").Ref<boolean, boolean>;
sanitizedAttributes: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
iconVisible: import("vue").ComputedRef<string | boolean | undefined>;
iconName: import("vue").ComputedRef<string | undefined>;
iconColor: import("vue").ComputedRef<NeonFunctionalColor>;
computedPlaceholder: import("vue").ComputedRef<string>;
counterLabel: import("vue").ComputedRef<string | null>;
focus: () => void;
click: () => void;
onFocus: () => void;
onBlur: () => void;
iconClicked: ($event: Event) => void;
changeValue: (event: InputEvent) => void;
onKeyDown: (event: KeyboardEvent) => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "blur" | "focus" | "icon-click")[], import("vue").PublicProps, {
color: NeonFunctionalColor;
icon: string;
type: import("../../../neon").NeonInputType;
id: string;
disabled: boolean;
size: NeonSize;
placeholder: string;
tabindex: number;
inputmode: import("../../../neon").NeonInputMode;
modelValue: string;
state: import("../../../neon").NeonState;
autocomplete: string;
rows: number;
iconReadonly: boolean;
hideIcon: boolean;
stateHighlight: boolean;
stateIcon: boolean;
maxlength: number;
maxlengthLabel: string;
debounce: number;
}, true, {}, {}, {
NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
name: {
type: StringConstructor;
required: true;
};
id: {
type: StringConstructor;
default: null;
};
color: {
type: () => NeonFunctionalColor;
default: null;
};
inverse: {
type: BooleanConstructor;
default: boolean;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
}>, {
sanitizedAttributes: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
icon: import("vue").ComputedRef<string | undefined>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
name: {
type: StringConstructor;
required: true;
};
id: {
type: StringConstructor;
default: null;
};
color: {
type: () => NeonFunctionalColor;
default: null;
};
inverse: {
type: BooleanConstructor;
default: boolean;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
color: NeonFunctionalColor;
id: string;
inverse: boolean;
disabled: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
} & import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<import("vue").ExtractPropTypes<{
id: {
type: StringConstructor;
default: null;
};
modelValue: {
type: StringConstructor;
default: null;
};
type: {
type: () => import("../../../neon").NeonInputType;
default: import("../../../neon").NeonInputType;
};
placeholder: {
type: StringConstructor;
default: null;
};
size: {
type: () => NeonSize;
default: NeonSize;
};
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
inputmode: {
type: () => import("../../../neon").NeonInputMode;
default: import("../../../neon").NeonInputMode;
};
autocomplete: {
type: StringConstructor;
default: string;
};
state: {
type: () => import("../../../neon").NeonState;
default: import("../../../neon").NeonState;
};
rows: {
type: NumberConstructor;
default: null;
};
icon: {
type: StringConstructor;
default: null;
};
iconReadonly: {
type: BooleanConstructor;
default: boolean;
};
hideIcon: {
type: BooleanConstructor;
default: boolean;
};
tabindex: {
type: NumberConstructor;
default: number;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
stateHighlight: {
type: BooleanConstructor;
default: boolean;
};
stateIcon: {
type: BooleanConstructor;
default: boolean;
};
maxlength: {
type: NumberConstructor;
default: null;
};
maxlengthLabel: {
type: StringConstructor;
default: string;
};
debounce: {
type: NumberConstructor;
default: undefined;
};
}>> & Readonly<{
onFocus?: ((...args: any[]) => any) | undefined;
onBlur?: ((...args: any[]) => any) | undefined;
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
"onIcon-click"?: ((...args: any[]) => any) | undefined;
}>, {
neonInput: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
focused: import("vue").Ref<boolean, boolean>;
sanitizedAttributes: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
iconVisible: import("vue").ComputedRef<string | boolean | undefined>;
iconName: import("vue").ComputedRef<string | undefined>;
iconColor: import("vue").ComputedRef<NeonFunctionalColor>;
computedPlaceholder: import("vue").ComputedRef<string>;
counterLabel: import("vue").ComputedRef<string | null>;
focus: () => void;
click: () => void;
onFocus: () => void;
onBlur: () => void;
iconClicked: ($event: Event) => void;
changeValue: (event: InputEvent) => void;
onKeyDown: (event: KeyboardEvent) => void;
}, {}, {}, {}, {
color: NeonFunctionalColor;
icon: string;
type: import("../../../neon").NeonInputType;
id: string;
disabled: boolean;
size: NeonSize;
placeholder: string;
tabindex: number;
inputmode: import("../../../neon").NeonInputMode;
modelValue: string;
state: import("../../../neon").NeonState;
autocomplete: string;
rows: number;
iconReadonly: boolean;
hideIcon: boolean;
stateHighlight: boolean;
stateIcon: boolean;
maxlength: number;
maxlengthLabel: string;
debounce: number;
}> | null>;
files: import("vue").Ref<{
readonly lastModified: number;
readonly name: string;
readonly webkitRelativePath: string;
readonly size: number;
readonly type: string;
arrayBuffer: () => Promise<ArrayBuffer>;
slice: (start?: number | undefined, end?: number | undefined, contentType?: string | undefined) => Blob;
stream: () => ReadableStream<Uint8Array>;
text: () => Promise<string>;
}[], File[] | {
readonly lastModified: number;
readonly name: string;
readonly webkitRelativePath: string;
readonly size: number;
readonly type: string;
arrayBuffer: () => Promise<ArrayBuffer>;
slice: (start?: number | undefined, end?: number | undefined, contentType?: string | undefined) => Blob;
stream: () => ReadableStream<Uint8Array>;
text: () => Promise<string>;
}[]>;
fileList: import("vue").ComputedRef<{
key: string;
label: string;
}[]>;
fileInputModel: import("vue").Ref<string, string>;
remove: (filename: string) => void;
clearAll: () => void;
openFileDialog: () => void;
onInput: (event: Event) => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
disabled: {
type: BooleanConstructor;
default: boolean;
};
directUpload: {
type: BooleanConstructor;
default: boolean;
};
multiple: {
type: BooleanConstructor;
default: boolean;
};
accept: {
type: StringConstructor;
default: null;
};
id: {
type: StringConstructor;
default: null;
};
size: {
type: () => NeonSize;
default: NeonSize; /**
* The menu size.
*/
}; /**
* The menu size.
*/
state: {
type: () => import("../../../neon").NeonState;
default: import("../../../neon").NeonState;
};
color: {
type: () => Neon