@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
282 lines (281 loc) • 7.28 kB
TypeScript
import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
/**
* <p>
* The <strong>NeonSlider</strong> component is the equivalent of an <strong><input type="range" /></strong>. In
* addition to this, there is support for automatic formatting the min, max and selected value plus options for
* percentage formatting and providing custom templates, e.g. currency formatting.
* </p>
* <p><strong>NeonNumber</strong> also supports all relevant properties found on an HTML <input>.</p>
*/
declare const _default: import("vue").DefineComponent<{
/**
* The current input <em>value</em>.
*/
modelValue: {
type: NumberConstructor;
required: true;
};
/**
* id of the range input.
*/
id: {
type: StringConstructor;
required: false;
};
/**
* Slider color.
*/
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
/**
* The locale used for display purposes. This defaults to the browser's locale if none is provided.
*/
locale: {
type: StringConstructor;
default: null;
};
/**
* Show/hide the output.
*/
output: {
type: BooleanConstructor;
default: boolean;
};
/**
* Show/hide the legend.
*/
legend: {
type: BooleanConstructor;
default: boolean;
};
/**
* Show/hide the tooltip.
*/
tooltip: {
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 size of steps between values the user can select. The default value is 1 except when percentage = true the
* default is 0.01 (1%).
*/
step: {
type: NumberConstructor;
required: false;
};
/**
* The rounding precision for display purposes.
*/
decimals: {
type: NumberConstructor;
required: false;
};
/**
* A template string used for formatting the display value. Use the placeholder {value} to reference the value in the
* template 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;
};
/**
* 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;
};
/**
* The lower bound within the range of values.
* @ignore
*/
lowerBound: {
type: NumberConstructor;
required: false;
};
/**
* The upper bound within the range of values.
* @ignore
*/
upperBound: {
type: NumberConstructor;
required: false;
};
/**
* Component disabled state.
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
}, {
sanitizedAttributes: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
formattedMin: import("vue").ComputedRef<string | number>;
formattedMax: import("vue").ComputedRef<string | number>;
formattedValue: import("vue").ComputedRef<string | number>;
computedMax: import("vue").ComputedRef<number>;
computedStep: import("vue").ComputedRef<number>;
changeValue: (event: Event) => 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<{
/**
* The current input <em>value</em>.
*/
modelValue: {
type: NumberConstructor;
required: true;
};
/**
* id of the range input.
*/
id: {
type: StringConstructor;
required: false;
};
/**
* Slider color.
*/
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
/**
* The locale used for display purposes. This defaults to the browser's locale if none is provided.
*/
locale: {
type: StringConstructor;
default: null;
};
/**
* Show/hide the output.
*/
output: {
type: BooleanConstructor;
default: boolean;
};
/**
* Show/hide the legend.
*/
legend: {
type: BooleanConstructor;
default: boolean;
};
/**
* Show/hide the tooltip.
*/
tooltip: {
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 size of steps between values the user can select. The default value is 1 except when percentage = true the
* default is 0.01 (1%).
*/
step: {
type: NumberConstructor;
required: false;
};
/**
* The rounding precision for display purposes.
*/
decimals: {
type: NumberConstructor;
required: false;
};
/**
* A template string used for formatting the display value. Use the placeholder {value} to reference the value in the
* template 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;
};
/**
* 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;
};
/**
* The lower bound within the range of values.
* @ignore
*/
lowerBound: {
type: NumberConstructor;
required: false;
};
/**
* The upper bound within the range of values.
* @ignore
*/
upperBound: {
type: NumberConstructor;
required: false;
};
/**
* Component disabled state.
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
}>> & {
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
}, {
tooltip: boolean;
disabled: boolean;
percentage: boolean;
locale: string;
color: NeonFunctionalColor;
legend: boolean;
output: boolean;
min: number;
disableFormatting: boolean;
}, {}>;
export default _default;