@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
270 lines (269 loc) • 6.98 kB
TypeScript
import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
/**
*
*/
declare const _default: import("vue").DefineComponent<{
/**
* This is the <em>v-model</em> property which is an array containing the lower and upper bounds of the selected range.
*/
modelValue: {
type: () => Array<number>;
required: true;
};
/**
* The list of ids for the lower bound and upper bound inputs, e.g. ['lowerBoundId', 'upperBoundId']
*/
ids: {
type: () => Array<string>;
required: false;
};
/**
* Slider color.
*/
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
/**
* Disable output display if set to false
*/
output: {
type: BooleanConstructor;
default: boolean;
};
/**
* Disable legend if set to false
*/
legend: {
type: BooleanConstructor;
default: boolean;
};
/**
* Disable tooltip if set to false
*/
tooltip: {
type: BooleanConstructor;
default: boolean;
};
/**
* The size of steps between values the user can select. Defaults to 1 unless percentage = true in which case it will
* default to 0.01.
*/
step: {
type: NumberConstructor;
required: false;
};
/**
* The rounding precision for display purposes
*/
decimals: {
type: NumberConstructor;
required: false;
};
/**
* A format template string used for display purposes. Use the placeholder {value} to reference the value in the
* format string. e.g. value = 90, ${value} => $90
*/
valueTemplate: {
type: StringConstructor;
required: false;
};
/**
* Disable formatting, e.g. in the case of a year value -> display as 2020, not 2,020.
*/
disableFormatting: {
type: BooleanConstructor;
default: boolean;
};
/**
* Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%
*/
percentage: {
type: BooleanConstructor;
default: boolean;
};
/**
* The locale used for display purposes. This defaults to the browser's locale if none is provided.
*/
locale: {
type: StringConstructor;
default: null;
};
/**
* The minimum range value
*/
min: {
type: NumberConstructor;
default: number;
};
/**
* The maximum range value. The default value is 100 except when percentage = true the default is 1 (100%).
*/
max: {
type: NumberConstructor;
required: false;
};
/**
* Component disabled state.
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* ARIA label for the lower bound slider.
*/
lowerBoundLabel: {
type: StringConstructor;
default: string;
};
/**
* ARIA label for the upper bound slider.
*/
upperBoundLabel: {
type: StringConstructor;
default: string;
};
}, {
formattedValues: import("vue").ComputedRef<string[]>;
changeLowerBound: (value: number) => void;
changeUpperBound: (value: number) => void;
emitValues: (values: number[]) => 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<{
/**
* This is the <em>v-model</em> property which is an array containing the lower and upper bounds of the selected range.
*/
modelValue: {
type: () => Array<number>;
required: true;
};
/**
* The list of ids for the lower bound and upper bound inputs, e.g. ['lowerBoundId', 'upperBoundId']
*/
ids: {
type: () => Array<string>;
required: false;
};
/**
* Slider color.
*/
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
/**
* Disable output display if set to false
*/
output: {
type: BooleanConstructor;
default: boolean;
};
/**
* Disable legend if set to false
*/
legend: {
type: BooleanConstructor;
default: boolean;
};
/**
* Disable tooltip if set to false
*/
tooltip: {
type: BooleanConstructor;
default: boolean;
};
/**
* The size of steps between values the user can select. Defaults to 1 unless percentage = true in which case it will
* default to 0.01.
*/
step: {
type: NumberConstructor;
required: false;
};
/**
* The rounding precision for display purposes
*/
decimals: {
type: NumberConstructor;
required: false;
};
/**
* A format template string used for display purposes. Use the placeholder {value} to reference the value in the
* format string. e.g. value = 90, ${value} => $90
*/
valueTemplate: {
type: StringConstructor;
required: false;
};
/**
* Disable formatting, e.g. in the case of a year value -> display as 2020, not 2,020.
*/
disableFormatting: {
type: BooleanConstructor;
default: boolean;
};
/**
* Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%
*/
percentage: {
type: BooleanConstructor;
default: boolean;
};
/**
* The locale used for display purposes. This defaults to the browser's locale if none is provided.
*/
locale: {
type: StringConstructor;
default: null;
};
/**
* The minimum range value
*/
min: {
type: NumberConstructor;
default: number;
};
/**
* The maximum range value. The default value is 100 except when percentage = true the default is 1 (100%).
*/
max: {
type: NumberConstructor;
required: false;
};
/**
* Component disabled state.
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* ARIA label for the lower bound slider.
*/
lowerBoundLabel: {
type: StringConstructor;
default: string;
};
/**
* ARIA label for the upper bound slider.
*/
upperBoundLabel: {
type: StringConstructor;
default: string;
};
}>> & {
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
}, {
tooltip: boolean;
disabled: boolean;
percentage: boolean;
locale: string;
color: NeonFunctionalColor;
legend: boolean;
output: boolean;
min: number;
disableFormatting: boolean;
lowerBoundLabel: string;
upperBoundLabel: string;
}, {}>;
export default _default;