@coreui/vue-pro 5.7.0 → 5.8.0

package/dist/cjs/components/range-slider/CRangeSlider.d.ts

@@ -0,0 +1,241 @@
+import { PropType, VNode } from 'vue';
+import type { Label } from './types';
+declare const CRangeSlider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /**
+     * Enable or disable clickable labels in the Vue Range Slider.
+     * When set to `true`, users can click on labels to adjust the slider's value directly, enhancing interactivity and user experience.
+     */
+    clickableLabels: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Control the interactive state of the Vue Range Slider with the `disabled` prop.
+     * Setting it to `true` will disable all slider functionalities, preventing user interaction and visually indicating a non-interactive state.
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Define the minimum distance between slider handles using the `distance` prop in the Vue Range Slider.
+     * This ensures that the handles maintain a specified separation, preventing overlap and maintaining clear value distinctions.
+     */
+    distance: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Add descriptive labels to your Vue Range Slider by providing an array of `labels`.
+     * These labels enhance the slider's usability by clearly indicating key values and providing contextual information to users.
+     */
+    labels: {
+        type: PropType<Label[]>;
+        default: () => never[];
+    };
+    /**
+     * Specify the maximum value for the Vue Range Slider with the `max` prop.
+     * This determines the upper limit of the slider's range, enabling precise control over the highest selectable value.
+     */
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Set the minimum value for the Vue Range Slider using the `min` prop.
+     * This defines the lower bound of the slider's range, allowing you to control the starting point of user selection.
+     */
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The default name for a value passed using v-model.
+     */
+    modelValue: PropType<number | number[]>;
+    /**
+     * Assign a `name` to the Vue Range Slider for form integration.
+     * Whether using a single string or an array of strings, this prop ensures that the slider's values are correctly identified when submitting forms.
+     */
+    name: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    /**
+     * Control the granularity of the Vue Range Slider by setting the `step` prop.
+     * This defines the increment intervals between selectable values, allowing for precise adjustments based on your application's requirements.
+     */
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Toggle the visibility of tooltips in the Vue Range Slider with the `tooltips` prop.
+     * When enabled, tooltips display the current value of the slider handles, providing real-time feedback to users.
+     */
+    tooltips: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Customize the display format of tooltips in the Vue Range Slider using the `tooltipsFormat` function.
+     * This allows you to format the tooltip values according to your specific requirements, enhancing the clarity and presentation of information.
+     */
+    tooltipsFormat: {
+        type: PropType<(value: number) => string | VNode>;
+        default: null;
+    };
+    /**
+     * Controls the visual representation of the slider's track. When set to `'fill'`, the track is dynamically filled based on the slider's value(s). Setting it to `false` disables the filled track.
+     */
+    track: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: string;
+        validator: (value: boolean | string) => value is boolean | "fill";
+    };
+    /**
+     * Set the current value(s) of the Vue Range Slider using the `value` prop.
+     * Whether you're using a single value or an array for multi-handle sliders, this prop controls the slider's position and ensures it reflects the desired state.
+     */
+    value: {
+        type: PropType<number | number[]>;
+        default: () => number[];
+    };
+    /**
+     * Orient the Vue Range Slider vertically by setting the `vertical` prop to `true`.
+     * This changes the slider's layout from horizontal to vertical, providing a different aesthetic and fitting various UI designs.
+     */
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Enable or disable clickable labels in the Vue Range Slider.
+     * When set to `true`, users can click on labels to adjust the slider's value directly, enhancing interactivity and user experience.
+     */
+    clickableLabels: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Control the interactive state of the Vue Range Slider with the `disabled` prop.
+     * Setting it to `true` will disable all slider functionalities, preventing user interaction and visually indicating a non-interactive state.
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Define the minimum distance between slider handles using the `distance` prop in the Vue Range Slider.
+     * This ensures that the handles maintain a specified separation, preventing overlap and maintaining clear value distinctions.
+     */
+    distance: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Add descriptive labels to your Vue Range Slider by providing an array of `labels`.
+     * These labels enhance the slider's usability by clearly indicating key values and providing contextual information to users.
+     */
+    labels: {
+        type: PropType<Label[]>;
+        default: () => never[];
+    };
+    /**
+     * Specify the maximum value for the Vue Range Slider with the `max` prop.
+     * This determines the upper limit of the slider's range, enabling precise control over the highest selectable value.
+     */
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Set the minimum value for the Vue Range Slider using the `min` prop.
+     * This defines the lower bound of the slider's range, allowing you to control the starting point of user selection.
+     */
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The default name for a value passed using v-model.
+     */
+    modelValue: PropType<number | number[]>;
+    /**
+     * Assign a `name` to the Vue Range Slider for form integration.
+     * Whether using a single string or an array of strings, this prop ensures that the slider's values are correctly identified when submitting forms.
+     */
+    name: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    /**
+     * Control the granularity of the Vue Range Slider by setting the `step` prop.
+     * This defines the increment intervals between selectable values, allowing for precise adjustments based on your application's requirements.
+     */
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Toggle the visibility of tooltips in the Vue Range Slider with the `tooltips` prop.
+     * When enabled, tooltips display the current value of the slider handles, providing real-time feedback to users.
+     */
+    tooltips: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Customize the display format of tooltips in the Vue Range Slider using the `tooltipsFormat` function.
+     * This allows you to format the tooltip values according to your specific requirements, enhancing the clarity and presentation of information.
+     */
+    tooltipsFormat: {
+        type: PropType<(value: number) => string | VNode>;
+        default: null;
+    };
+    /**
+     * Controls the visual representation of the slider's track. When set to `'fill'`, the track is dynamically filled based on the slider's value(s). Setting it to `false` disables the filled track.
+     */
+    track: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: string;
+        validator: (value: boolean | string) => value is boolean | "fill";
+    };
+    /**
+     * Set the current value(s) of the Vue Range Slider using the `value` prop.
+     * Whether you're using a single value or an array for multi-handle sliders, this prop controls the slider's position and ensures it reflects the desired state.
+     */
+    value: {
+        type: PropType<number | number[]>;
+        default: () => number[];
+    };
+    /**
+     * Orient the Vue Range Slider vertically by setting the `vertical` prop to `true`.
+     * This changes the slider's layout from horizontal to vertical, providing a different aesthetic and fitting various UI designs.
+     */
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    name: string | string[];
+    track: string | boolean;
+    value: number | number[];
+    disabled: boolean;
+    vertical: boolean;
+    max: number;
+    min: number;
+    clickableLabels: boolean;
+    distance: number;
+    labels: Label[];
+    step: number;
+    tooltips: boolean;
+    tooltipsFormat: (value: number) => string | VNode;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export { CRangeSlider };

package/dist/cjs/components/range-slider/CRangeSlider.js

@@ -0,0 +1,311 @@
+'use strict';
+
+var vue = require('vue');
+var utils = require('./utils.js');
+var isRTL = require('../../utils/isRTL.js');
+
+const CRangeSlider = vue.defineComponent({
+    name: 'CRangeSlider',
+    props: {
+        /**
+         * Enable or disable clickable labels in the Vue Range Slider.
+         * When set to `true`, users can click on labels to adjust the slider's value directly, enhancing interactivity and user experience.
+         */
+        clickableLabels: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Control the interactive state of the Vue Range Slider with the `disabled` prop.
+         * Setting it to `true` will disable all slider functionalities, preventing user interaction and visually indicating a non-interactive state.
+         */
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Define the minimum distance between slider handles using the `distance` prop in the Vue Range Slider.
+         * This ensures that the handles maintain a specified separation, preventing overlap and maintaining clear value distinctions.
+         */
+        distance: {
+            type: Number,
+            default: 0,
+        },
+        /**
+         * Add descriptive labels to your Vue Range Slider by providing an array of `labels`.
+         * These labels enhance the slider's usability by clearly indicating key values and providing contextual information to users.
+         */
+        labels: {
+            type: Array,
+            default: () => [],
+        },
+        /**
+         * Specify the maximum value for the Vue Range Slider with the `max` prop.
+         * This determines the upper limit of the slider's range, enabling precise control over the highest selectable value.
+         */
+        max: {
+            type: Number,
+            default: 100,
+        },
+        /**
+         * Set the minimum value for the Vue Range Slider using the `min` prop.
+         * This defines the lower bound of the slider's range, allowing you to control the starting point of user selection.
+         */
+        min: {
+            type: Number,
+            default: 0,
+        },
+        /**
+         * The default name for a value passed using v-model.
+         */
+        modelValue: [Number, Array],
+        /**
+         * Assign a `name` to the Vue Range Slider for form integration.
+         * Whether using a single string or an array of strings, this prop ensures that the slider's values are correctly identified when submitting forms.
+         */
+        name: {
+            type: [String, Array],
+            default: '',
+        },
+        /**
+         * Control the granularity of the Vue Range Slider by setting the `step` prop.
+         * This defines the increment intervals between selectable values, allowing for precise adjustments based on your application's requirements.
+         */
+        step: {
+            type: Number,
+            default: 1,
+        },
+        /**
+         * Toggle the visibility of tooltips in the Vue Range Slider with the `tooltips` prop.
+         * When enabled, tooltips display the current value of the slider handles, providing real-time feedback to users.
+         */
+        tooltips: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Customize the display format of tooltips in the Vue Range Slider using the `tooltipsFormat` function.
+         * This allows you to format the tooltip values according to your specific requirements, enhancing the clarity and presentation of information.
+         */
+        tooltipsFormat: {
+            type: Function,
+            default: null,
+        },
+        /**
+         * Controls the visual representation of the slider's track. When set to `'fill'`, the track is dynamically filled based on the slider's value(s). Setting it to `false` disables the filled track.
+         */
+        track: {
+            type: [Boolean, String],
+            default: 'fill',
+            validator: (value) => {
+                return typeof value === 'boolean' || value === 'fill';
+            },
+        },
+        /**
+         * Set the current value(s) of the Vue Range Slider using the `value` prop.
+         * Whether you're using a single value or an array for multi-handle sliders, this prop controls the slider's position and ensures it reflects the desired state.
+         */
+        value: {
+            type: [Number, Array],
+            default: () => [0],
+        },
+        /**
+         * Orient the Vue Range Slider vertically by setting the `vertical` prop to `true`.
+         * This changes the slider's layout from horizontal to vertical, providing a different aesthetic and fitting various UI designs.
+         */
+        vertical: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    emits: [
+        'change',
+        /**
+         * Emit the new value whenever there’s a change event.
+         */
+        'update:modelValue',
+    ],
+    setup(props, { emit }) {
+        const rangeSliderRef = vue.ref(null);
+        const inputsRef = vue.ref([]);
+        const labelsContainerRef = vue.ref(null);
+        const labelsRef = vue.ref([]);
+        const trackRef = vue.ref(null);
+        const currentValue = vue.ref(props.modelValue
+            ? Array.isArray(props.modelValue)
+                ? props.modelValue
+                : [props.modelValue]
+            : Array.isArray(props.value)
+                ? props.value
+                : [props.value]);
+        const isDragging = vue.ref(false);
+        const dragIndex = vue.ref(0);
+        const thumbSize = vue.ref();
+        vue.watch(() => props.value, (newVal) => {
+            currentValue.value = Array.isArray(newVal) ? newVal : [newVal];
+        });
+        vue.watch(() => props.modelValue, (newVal) => {
+            if (newVal !== undefined) {
+                currentValue.value = Array.isArray(newVal) ? newVal : [newVal];
+            }
+        });
+        // Adjust labels container size based on labels
+        vue.onMounted(() => {
+            const maxSize = Math.max(...labelsRef.value.map((label) => props.vertical ? label.offsetWidth : label.offsetHeight));
+            if (labelsContainerRef.value) {
+                labelsContainerRef.value.style[props.vertical ? 'width' : 'height'] = `${maxSize}px`;
+            }
+            if (rangeSliderRef.value) {
+                thumbSize.value = utils.getThumbSize(rangeSliderRef.value, props.vertical);
+            }
+        });
+        vue.watch(isDragging, (newVal) => {
+            if (newVal) {
+                window.addEventListener('mousemove', handleMouseMove);
+                window.addEventListener('mouseup', handleMouseUp);
+            }
+            else {
+                window.removeEventListener('mousemove', handleMouseMove);
+                window.removeEventListener('mouseup', handleMouseUp);
+            }
+        });
+        const updateNearestValue = (value) => {
+            const nearestIndex = utils.getNearestValueIndex(value, currentValue.value);
+            const newCurrentValue = [...currentValue.value];
+            newCurrentValue[nearestIndex] = utils.validateValue(value, currentValue.value, props.distance, nearestIndex);
+            setTimeout(() => {
+                if (inputsRef.value[nearestIndex]) {
+                    inputsRef.value[nearestIndex].focus();
+                }
+            }, 0);
+            currentValue.value = newCurrentValue;
+            emit('change', newCurrentValue);
+            emit('update:modelValue', newCurrentValue);
+        };
+        const handleInputChange = (event, index) => {
+            if (props.disabled)
+                return;
+            const target = event.target;
+            const value = Number(target.value);
+            const newCurrentValue = utils.updateValue(value, currentValue.value, props.distance, index);
+            currentValue.value = newCurrentValue;
+            emit('change', newCurrentValue);
+            emit('update:modelValue', newCurrentValue);
+        };
+        const handleInputsContainerMouseDown = (event) => {
+            if (!trackRef.value)
+                return;
+            const clickValue = utils.calculateClickValue(event, trackRef.value, props.min, props.max, props.step, props.vertical, isRTL.default(rangeSliderRef.value));
+            const index = utils.getNearestValueIndex(clickValue, currentValue.value);
+            isDragging.value = true;
+            dragIndex.value = index;
+            updateNearestValue(clickValue);
+        };
+        const handleLabelClick = (value) => {
+            if (!props.clickableLabels || props.disabled)
+                return;
+            updateNearestValue(value);
+        };
+        const handleMouseMove = (event) => {
+            if (!isDragging.value || !trackRef.value)
+                return;
+            const moveValue = utils.calculateMoveValue(event, trackRef.value, props.min, props.max, props.step, props.vertical, isRTL.default(rangeSliderRef.value));
+            const newCurrentValue = utils.updateValue(moveValue, currentValue.value, props.distance, dragIndex.value);
+            currentValue.value = newCurrentValue;
+            emit('change', newCurrentValue);
+            emit('update:modelValue', newCurrentValue);
+        };
+        const handleMouseUp = () => {
+            isDragging.value = false;
+        };
+        return () => vue.h('div', {
+            class: [
+                'range-slider',
+                {
+                    'range-slider-vertical': props.vertical,
+                    disabled: props.disabled,
+                },
+            ],
+            ref: rangeSliderRef,
+        }, [
+            vue.h('div', {
+                class: 'range-slider-inputs-container',
+                onMousedown: handleInputsContainerMouseDown,
+            }, [
+                currentValue.value.map((value, index) => [
+                    vue.h('input', {
+                        class: 'range-slider-input',
+                        type: 'range',
+                        min: props.min,
+                        max: props.max,
+                        step: props.step,
+                        value: value,
+                        name: Array.isArray(props.name)
+                            ? props.name[index]
+                            : `${props.name || ''}-${index}`,
+                        role: 'slider',
+                        'aria-valuemin': props.min,
+                        'aria-valuemax': props.max,
+                        'aria-valuenow': value,
+                        'aria-orientation': props.vertical ? 'vertical' : 'horizontal',
+                        disabled: props.disabled,
+                        onInput: (e) => handleInputChange(e, index),
+                        ref: (el) => {
+                            inputsRef.value[index] = el;
+                        },
+                    }),
+                    props.tooltips &&
+                        vue.h('div', {
+                            class: 'range-slider-tooltip',
+                            ...(thumbSize.value && {
+                                style: utils.calculateTooltipPosition(props.min, props.max, value, thumbSize.value, props.vertical, isRTL.default(rangeSliderRef.value)),
+                            }),
+                        }, [
+                            vue.h('div', { class: 'range-slider-tooltip-inner' }, [
+                                props.tooltipsFormat ? props.tooltipsFormat(value) : value,
+                            ]),
+                            vue.h('div', { class: 'range-slider-tooltip-arrow' }),
+                        ]),
+                ]),
+                vue.h('div', {
+                    class: 'range-slider-track',
+                    ...(props.track && {
+                        style: utils.updateGradient(props.min, props.max, currentValue.value, props.vertical),
+                    }),
+                    ref: trackRef,
+                }),
+            ]),
+            Array.isArray(props.labels) &&
+                props.labels.length > 0 &&
+                vue.h('div', {
+                    class: 'range-slider-labels-container',
+                    ref: labelsContainerRef,
+                }, props.labels.map((label, index) => {
+                    const labelPosition = utils.calculateLabelPosition(props.min, props.max, props.labels, label, index);
+                    const labelValue = utils.getLabelValue(props.min, props.max, props.labels, label, index);
+                    const labelStyle = {
+                        ...(props.vertical ? { bottom: labelPosition } : { left: labelPosition }),
+                        ...(typeof label === 'object' && 'style' in label ? label.style : {}),
+                    };
+                    return vue.h('div', {
+                        class: [
+                            'range-slider-label',
+                            {
+                                clickable: props.clickableLabels,
+                            },
+                            typeof label === 'object' && 'className' in label ? label.className : '',
+                        ],
+                        style: labelStyle,
+                        onMousedown: () => handleLabelClick(labelValue),
+                        key: index,
+                        ref: (el) => {
+                            labelsRef.value[index] = el;
+                        },
+                    }, typeof label === 'object' && 'label' in label ? label.label : label);
+                })),
+        ]);
+    },
+});
+
+exports.CRangeSlider = CRangeSlider;
+//# sourceMappingURL=CRangeSlider.js.map

package/dist/cjs/components/range-slider/CRangeSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CRangeSlider.js","sources":["../../../../src/components/range-slider/CRangeSlider.ts"],"sourcesContent":[null],"names":["defineComponent","ref","watch","onMounted","getThumbSize","getNearestValueIndex","validateValue","updateValue","calculateClickValue","isRTL","calculateMoveValue","h","calculateTooltipPosition","updateGradient","calculateLabelPosition","getLabelValue"],"mappings":"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"}

package/dist/cjs/components/range-slider/index.d.ts

@@ -0,0 +1,6 @@
+import { App } from 'vue';
+import { CRangeSlider } from './CRangeSlider';
+declare const CRangeSliderPlugin: {
+    install: (app: App) => void;
+};
+export { CRangeSliderPlugin, CRangeSlider };

package/dist/cjs/components/range-slider/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var CRangeSlider = require('./CRangeSlider.js');
+
+const CRangeSliderPlugin = {
+    install: (app) => {
+        app.component(CRangeSlider.CRangeSlider.name, CRangeSlider.CRangeSlider);
+    },
+};
+
+exports.CRangeSlider = CRangeSlider.CRangeSlider;
+exports.CRangeSliderPlugin = CRangeSliderPlugin;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/range-slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/range-slider/index.ts"],"sourcesContent":[null],"names":["CRangeSlider"],"mappings":";;;;AAGA,MAAM,kBAAkB,GAAG;AACzB,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;QAC1B,GAAG,CAAC,SAAS,CAACA,yBAAY,CAAC,IAAc,EAAEA,yBAAY,CAAC;KACzD;;;;;;"}

package/dist/cjs/components/range-slider/types.d.ts

@@ -0,0 +1,11 @@
+import type { VNode } from 'vue';
+export type Label = {
+    label: number | string | VNode;
+    value: number;
+    className?: string | string[] | Record<string, boolean>;
+    style?: Record<string, any>;
+} | VNode | string;
+export type ThumbSize = {
+    value: number;
+    unit: string | null;
+};

package/dist/cjs/components/range-slider/utils.d.ts

@@ -0,0 +1,38 @@
+import type { Label, ThumbSize } from './types';
+export declare const calculateClickValue: (event: MouseEvent, container: HTMLDivElement, min: number, max: number, step: number, vertical: boolean, rtl: boolean) => number;
+export declare const calculateMoveValue: (event: MouseEvent, container: HTMLDivElement, min: number, max: number, step: number, vertical: boolean, rtl: boolean) => number;
+export declare const calculateVerticalPosition: (mouseY: number, rect: DOMRect) => number | "max" | "min";
+export declare const calculateHorizontalPosition: (mouseX: number, rect: DOMRect, rtl: boolean) => number | "max" | "min";
+export declare const calculateLabelPosition: (min: number, max: number, labels: Label[], label: Label, index: number) => string;
+export declare const calculateTooltipPosition: (min: number, max: number, value: number, thumbSize: ThumbSize, vertical: boolean, rtl: boolean) => {
+    bottom: string;
+    marginBottom: string;
+    right?: undefined;
+    marginRight?: undefined;
+    left?: undefined;
+    marginLeft?: undefined;
+} | {
+    right: string;
+    marginRight: string;
+    bottom?: undefined;
+    marginBottom?: undefined;
+    left?: undefined;
+    marginLeft?: undefined;
+} | {
+    left: string;
+    marginLeft: string;
+    bottom?: undefined;
+    marginBottom?: undefined;
+    right?: undefined;
+    marginRight?: undefined;
+};
+export declare const getClickPosition: (event: MouseEvent, container: HTMLDivElement, vertical: boolean, rtl: boolean) => number;
+export declare const getLabelValue: (min: number, max: number, labels: Label[], label: Label, index: number) => number;
+export declare const getNearestValueIndex: (value: number, values: number[]) => number;
+export declare const getThumbSize: (element: HTMLDivElement, vertical: boolean) => ThumbSize | null;
+export declare const roundToStep: (number: number, step: number) => number;
+export declare const updateGradient: (min: number, max: number, values: number[], vertical: boolean) => {
+    backgroundImage: string;
+};
+export declare const updateValue: (value: number, values: number[], distance: number, index: number) => number[];
+export declare const validateValue: (value: number, values: number[], distance: number, index: number) => number;