"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const vueuc_1 = require("vueuc");
const vooks_1 = require("vooks");
const evtd_1 = require("evtd");
const _mixins_1 = require("../../_mixins");
const _utils_1 = require("../../_utils");
const styles_1 = require("../styles");
const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
const utils_1 = require("./utils");
const sliderProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: _utils_1.useAdjustedTo.propTo, defaultValue: {
        type: [Number, Array],
        default: 0
    }, marks: Object, disabled: {
        type: Boolean,
        default: undefined
    }, formatTooltip: Function, min: {
        type: Number,
        default: 0
    }, max: {
        type: Number,
        default: 100
    }, step: {
        type: Number,
        default: 1
    }, range: Boolean, value: [Number, Array], placement: {
        type: String,
        default: 'top'
    }, showTooltip: {
        type: Boolean,
        default: undefined
    }, tooltip: {
        type: Boolean,
        default: true
    }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
    // deprecated
    onChange: {
        type: [Function, Array],
        validator: () => {
            if (process.env.NODE_ENV !== 'production') {
                (0, _utils_1.warn)('slider', '`on-change` is deprecated, please use `on-update:value` instead.');
            }
            return true;
        },
        default: undefined
    } });
exports.default = (0, vue_1.defineComponent)({
    name: 'Slider',
    props: sliderProps,
    setup(props) {
        const { mergedClsPrefixRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
        const themeRef = (0, _mixins_1.useTheme)('Slider', 'Slider', index_cssr_1.default, styles_1.sliderLight, props, mergedClsPrefixRef);
        const formItem = (0, _mixins_1.useFormItem)(props);
        const { mergedDisabledRef } = formItem;
        const handleRef1 = (0, vue_1.ref)(null);
        const handleRef2 = (0, vue_1.ref)(null);
        const railRef = (0, vue_1.ref)(null);
        const followerRef1 = (0, vue_1.ref)(null);
        const followerRef2 = (0, vue_1.ref)(null);
        const precisionRef = (0, vue_1.computed)(() => {
            const precisions = [props.min, props.max, props.step].map((item) => {
                const fraction = String(item).split('.')[1];
                return fraction ? fraction.length : 0;
            });
            return Math.max(...precisions);
        });
        const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
        const controlledValueRef = (0, vue_1.toRef)(props, 'value');
        const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
        const memoziedOtherValueRef = (0, vue_1.ref)(0);
        const changeSourceRef = (0, vue_1.ref)(null);
        const handleActive1Ref = (0, vue_1.ref)(false);
        const handleActive2Ref = (0, vue_1.ref)(false);
        const handleClicked1Ref = (0, vue_1.ref)(false);
        const handleClicked2Ref = (0, vue_1.ref)(false);
        const controlledShowTooltipRef = (0, vue_1.toRef)(props, 'showTooltip');
        const mergedShowTooltip1Ref = (0, vooks_1.useMergedState)(controlledShowTooltipRef, handleActive1Ref);
        const mergedShowTooltip2Ref = (0, vooks_1.useMergedState)(controlledShowTooltipRef, handleActive2Ref);
        const dotTransitionDisabledRef = (0, vue_1.ref)(false);
        const activeRef = (0, vue_1.computed)(() => {
            return handleActive1Ref.value || handleActive2Ref.value;
        });
        const prevActiveRef = (0, vue_1.ref)(activeRef.value);
        const clickedRef = (0, vue_1.computed)(() => {
            return handleClicked1Ref.value || handleClicked2Ref.value;
        });
        const markInfosRef = (0, vue_1.computed)(() => {
            const mergedMarks = [];
            const { marks, max, min } = props;
            if (marks) {
                const { value: mergedValue } = mergedValueRef;
                for (const key of Object.keys(marks)) {
                    const num = Number(key);
                    mergedMarks.push({
                        active: Array.isArray(mergedValue)
                            ? mergedValue[0] <= num && mergedValue[1] >= num
                            : mergedValue !== null
                                ? mergedValue >= num
                                : false,
                        label: marks[key],
                        style: {
                            left: `${((num - min) / (max - min)) * 100}%`
                        }
                    });
                }
            }
            return mergedMarks;
        });
        const fillStyleRef = (0, vue_1.computed)(() => {
            const { max, min, range } = props;
            if (range) {
                return {
                    left: `${((handleValue1Ref.value - min) / (max - min)) * 100}%`,
                    width: `${((handleValue2Ref.value - handleValue1Ref.value) / (max - min)) *
                        100}%`
                };
            }
            else {
                return {
                    left: 0,
                    width: `${((handleValue1Ref.value - min) / (max - min)) * 100}%`
                };
            }
        });
        const handleValue1Ref = (0, vue_1.computed)(() => {
            const { value: mergedValue } = mergedValueRef;
            if (Array.isArray(mergedValue)) {
                return sanitizeValue(mergedValue[0]);
            }
            else {
                return sanitizeValue(mergedValue);
            }
        });
        const handleValue2Ref = (0, vue_1.computed)(() => {
            const { value: mergedValue } = mergedValueRef;
            if (Array.isArray(mergedValue)) {
                return sanitizeValue(mergedValue[1]);
            }
            return 0;
        });
        const firstHandleStyleRef = (0, vue_1.computed)(() => {
            const { value: handleValue1 } = handleValue1Ref;
            const { value: handleClicked1 } = handleClicked1Ref;
            const { max, min } = props;
            const percentage = ((handleValue1 - min) / (max - min)) * 100;
            return {
                left: `${percentage}%`,
                transform: `translateX(${-percentage}%)`,
                zIndex: handleClicked1 ? 1 : 0
            };
        });
        const secondHandleStyleRef = (0, vue_1.computed)(() => {
            const { value: handleValue2 } = handleValue2Ref;
            const { value: handleClicked2 } = handleClicked2Ref;
            const { max, min } = props;
            const percentage = ((handleValue2 - min) / (max - min)) * 100;
            return {
                left: `${percentage}%`,
                transform: `translateX(${-percentage}%)`,
                zIndex: handleClicked2 ? 1 : 0
            };
        });
        function doUpdateValue(value) {
            const { onChange, 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;
            const { nTriggerFormInput, nTriggerFormChange } = formItem;
            if (onChange)
                (0, _utils_1.call)(onChange, value);
            if (onUpdateValue)
                (0, _utils_1.call)(onUpdateValue, value);
            if (_onUpdateValue)
                (0, _utils_1.call)(_onUpdateValue, value);
            uncontrolledValueRef.value = value;
            nTriggerFormInput();
            nTriggerFormChange();
        }
        function doUpdateShow(show1, show2) {
            if (show1 !== undefined) {
                handleActive1Ref.value = show1;
            }
            if (show2 !== undefined) {
                handleActive2Ref.value = show2;
            }
        }
        function syncPosition() {
            var _a, _b;
            (_a = followerRef1.value) === null || _a === void 0 ? void 0 : _a.syncPosition();
            (_b = followerRef2.value) === null || _b === void 0 ? void 0 : _b.syncPosition();
        }
        function handleHandleFocus1() {
            if (clickedRef.value)
                return;
            doUpdateShow(true, false);
        }
        function handleHandleFocus2() {
            if (clickedRef.value)
                return;
            doUpdateShow(false, true);
        }
        function handleHandleBlur1() {
            if (clickedRef.value)
                return;
            doUpdateShow(false, false);
        }
        function handleHandleBlur2() {
            if (clickedRef.value)
                return;
            doUpdateShow(false, false);
        }
        function handleRailClick(e) {
            var _a, _b, _c, _d;
            if (mergedDisabledRef.value)
                return;
            const { value: railEl } = railRef;
            if (!railEl)
                return;
            const railRect = railEl.getBoundingClientRect();
            const offsetRatio = (e.clientX - railRect.left) / railRect.width;
            const newValue = props.min + (props.max - props.min) * offsetRatio;
            if (!props.range) {
                dispatchValueUpdate(newValue, { source: 'click' });
                (_a = handleRef1.value) === null || _a === void 0 ? void 0 : _a.focus();
            }
            else {
                if (Array.isArray(mergedValueRef.value)) {
                    if (Math.abs(handleValue1Ref.value - newValue) <
                        Math.abs(handleValue2Ref.value - newValue)) {
                        dispatchValueUpdate([newValue, handleValue2Ref.value], {
                            source: 'click'
                        });
                        (_b = handleRef1.value) === null || _b === void 0 ? void 0 : _b.focus();
                    }
                    else {
                        dispatchValueUpdate([handleValue1Ref.value, newValue], {
                            source: 'click'
                        });
                        (_c = handleRef2.value) === null || _c === void 0 ? void 0 : _c.focus();
                    }
                }
                else {
                    dispatchValueUpdate([newValue, newValue], { source: 'click' });
                    (_d = handleRef1.value) === null || _d === void 0 ? void 0 : _d.focus();
                }
            }
        }
        function handleHandleMouseMove(e, handleIndex) {
            if (!handleRef1.value || !railRef.value)
                return;
            const x = 'touches' in e ? e.touches[0].clientX : e.clientX;
            const { width: handleWidth } = handleRef1.value.getBoundingClientRect();
            const { width: railWidth, left: railLeft } = railRef.value.getBoundingClientRect();
            const { min, max, range } = props;
            const offsetRatio = (x - railLeft - handleWidth / 2) / (railWidth - handleWidth);
            const newValue = min + (max - min) * offsetRatio;
            if (range) {
                if (handleIndex === 0) {
                    dispatchValueUpdate([memoziedOtherValueRef.value, newValue]);
                }
                else {
                    dispatchValueUpdate([newValue, memoziedOtherValueRef.value]);
                }
            }
            else {
                dispatchValueUpdate(newValue);
            }
        }
        function handleKeyDown(e) {
            if (mergedDisabledRef.value)
                return;
            switch (e.code) {
                case 'ArrowRight':
                    handleKeyDownRight();
                    break;
                case 'ArrowLeft':
                    handleKeyDownLeft();
                    break;
            }
        }
        function handleKeyDownRight() {
            if (clickedRef.value)
                return;
            let firstHandleFocused = false;
            let handleValue = null;
            if (document.activeElement === handleRef1.value) {
                firstHandleFocused = true;
                handleValue = handleValue1Ref.value;
            }
            else {
                handleValue = handleValue2Ref.value;
            }
            const { step, marks } = props;
            let nextValue = Math.floor(handleValue / step) * step + step;
            if (marks) {
                for (const key of Object.keys(marks)) {
                    const numberKey = Number(key);
                    if (numberKey > handleValue && numberKey < nextValue) {
                        nextValue = numberKey;
                    }
                }
            }
            if (props.range) {
                if (firstHandleFocused) {
                    dispatchValueUpdate([nextValue, handleValue2Ref.value], {
                        source: 'keyboard'
                    });
                }
                else {
                    dispatchValueUpdate([handleValue1Ref.value, nextValue], {
                        source: 'keyboard'
                    });
                }
            }
            else {
                dispatchValueUpdate(nextValue, { source: 'keyboard' });
            }
        }
        function handleKeyDownLeft() {
            if (clickedRef.value)
                return;
            let firstHandleFocused = false;
            let handleValue = null;
            if (document.activeElement === handleRef1.value) {
                firstHandleFocused = true;
                handleValue = handleValue1Ref.value;
            }
            else if (document.activeElement === handleRef2.value) {
                handleValue = handleValue2Ref.value;
            }
            else {
                return;
            }
            const { step, marks } = props;
            let nextValue = Math.ceil(handleValue / step) * step - step;
            if (marks) {
                for (const key of Object.keys(marks)) {
                    const numberKey = Number(key);
                    if (numberKey < handleValue && numberKey > nextValue) {
                        nextValue = numberKey;
                    }
                }
            }
            if (props.range) {
                if (firstHandleFocused) {
                    dispatchValueUpdate([nextValue, handleValue2Ref.value], {
                        source: 'keyboard'
                    });
                }
                else {
                    dispatchValueUpdate([handleValue1Ref.value, nextValue], {
                        source: 'keyboard'
                    });
                }
            }
            else {
                dispatchValueUpdate(nextValue, { source: 'keyboard' });
            }
        }
        function switchFocus() {
            if (props.range) {
                const firstHandle = handleRef1.value;
                const secondHandle = handleRef2.value;
                if (firstHandle && secondHandle) {
                    if (handleActive1Ref.value &&
                        document.activeElement === secondHandle) {
                        disableTransitionOneTick();
                        firstHandle.focus();
                        if (handleClicked2Ref.value) {
                            handleClicked2Ref.value = false;
                            handleClicked1Ref.value = true;
                        }
                    }
                    else if (handleActive2Ref.value &&
                        document.activeElement === firstHandle) {
                        disableTransitionOneTick();
                        secondHandle.focus();
                        if (handleClicked1Ref.value) {
                            handleClicked1Ref.value = false;
                            handleClicked2Ref.value = true;
                        }
                    }
                }
            }
        }
        function getClosestMarkValue(currentValue) {
            const { marks } = props;
            if (marks) {
                const markValues = Object.keys(marks).map((key) => Number(key));
                let diff = null;
                let closestValue = null;
                for (const value of markValues) {
                    if (closestValue === null) {
                        closestValue = value;
                        diff = Math.abs(value - currentValue);
                    }
                    else {
                        const newDiff = Math.abs(value - currentValue);
                        if (newDiff < diff) {
                            closestValue = value;
                            diff = newDiff;
                        }
                    }
                }
                return closestValue;
            }
            return null;
        }
        function sanitizeValue(value) {
            let justifiedValue = value;
            const { min, max, marks, step } = props;
            justifiedValue = Math.max(min, justifiedValue);
            justifiedValue = Math.min(max, justifiedValue);
            justifiedValue = Math.round((justifiedValue - min) / step) * step + min;
            justifiedValue = parseFloat(justifiedValue.toFixed(precisionRef.value));
            if (marks) {
                const closestMarkValue = getClosestMarkValue(value);
                if (closestMarkValue !== null &&
                    Math.abs(justifiedValue - value) > Math.abs(closestMarkValue - value)) {
                    justifiedValue = closestMarkValue;
                }
            }
            return justifiedValue;
        }
        function handleFirstHandleMouseDown(e) {
            if (mergedDisabledRef.value)
                return;
            if ((0, utils_1.isTouchEvent)(e))
                e.preventDefault();
            if (props.range) {
                memoziedOtherValueRef.value = handleValue2Ref.value;
            }
            doUpdateShow(true, false);
            handleClicked1Ref.value = true;
            (0, evtd_1.on)('touchend', document, handleHandleMouseUp);
            (0, evtd_1.on)('mouseup', document, handleHandleMouseUp);
            (0, evtd_1.on)('touchmove', document, handleFirstHandleMouseMove);
            (0, evtd_1.on)('mousemove', document, handleFirstHandleMouseMove);
        }
        function handleSecondHandleMouseDown(e) {
            if (mergedDisabledRef.value)
                return;
            if ((0, utils_1.isTouchEvent)(e))
                e.preventDefault();
            if (props.range) {
                memoziedOtherValueRef.value = handleValue1Ref.value;
            }
            doUpdateShow(false, true);
            handleClicked2Ref.value = true;
            (0, evtd_1.on)('touchend', document, handleHandleMouseUp);
            (0, evtd_1.on)('mouseup', document, handleHandleMouseUp);
            (0, evtd_1.on)('touchmove', document, handleSecondHandleMouseMove);
            (0, evtd_1.on)('mousemove', document, handleSecondHandleMouseMove);
        }
        function handleHandleMouseUp(e) {
            var _a, _b;
            if ((0, utils_1.isTouchEvent)(e) ||
                (!((_a = handleRef1.value) === null || _a === void 0 ? void 0 : _a.contains(e.target)) &&
                    (props.range ? !((_b = handleRef2.value) === null || _b === void 0 ? void 0 : _b.contains(e.target)) : true))) {
                doUpdateShow(false, false);
            }
            handleClicked2Ref.value = false;
            handleClicked1Ref.value = false;
            (0, evtd_1.off)('touchend', document, handleHandleMouseUp);
            (0, evtd_1.off)('mouseup', document, handleHandleMouseUp);
            (0, evtd_1.off)('touchmove', document, handleFirstHandleMouseMove);
            (0, evtd_1.off)('touchmove', document, handleSecondHandleMouseMove);
            (0, evtd_1.off)('mousemove', document, handleFirstHandleMouseMove);
            (0, evtd_1.off)('mousemove', document, handleSecondHandleMouseMove);
        }
        function dispatchValueUpdate(value, options = { source: null }) {
            const { source } = options;
            const { range } = props;
            if (range) {
                if (Array.isArray(value)) {
                    if (value[0] > value[1]) {
                        value = [sanitizeValue(value[1]), sanitizeValue(value[0])];
                    }
                    else {
                        value = [sanitizeValue(value[0]), sanitizeValue(value[1])];
                    }
                    const { value: oldValue } = mergedValueRef;
                    if (!Array.isArray(oldValue) ||
                        oldValue[0] !== value[0] ||
                        oldValue[1] !== value[1]) {
                        changeSourceRef.value = source;
                        doUpdateValue(value);
                    }
                }
            }
            else {
                if (!Array.isArray(value)) {
                    const { max, min } = props;
                    const { value: oldValue } = mergedValueRef;
                    if (value > max) {
                        if (oldValue !== max) {
                            changeSourceRef.value = source;
                            doUpdateValue(max);
                        }
                    }
                    else if (value < min) {
                        if (oldValue !== min) {
                            changeSourceRef.value = source;
                            doUpdateValue(min);
                        }
                    }
                    else {
                        const newValue = sanitizeValue(value);
                        if (oldValue !== newValue) {
                            changeSourceRef.value = source;
                            doUpdateValue(newValue);
                        }
                    }
                }
            }
        }
        function handleFirstHandleMouseMove(e) {
            handleHandleMouseMove(e, 0);
        }
        function handleSecondHandleMouseMove(e) {
            handleHandleMouseMove(e, 1);
        }
        function handleFirstHandleMouseEnter() {
            if (!activeRef.value) {
                doUpdateShow(true, undefined);
                void (0, vue_1.nextTick)(() => {
                    syncPosition();
                });
            }
        }
        function handleFirstHandleMouseLeave() {
            if (changeSourceRef.value === 'keyboard')
                return;
            if (!activeRef.value) {
                doUpdateShow(false, false);
            }
            else if (!clickedRef.value) {
                doUpdateShow(false, false);
            }
        }
        function handleSecondHandleMouseEnter() {
            if (!activeRef.value) {
                doUpdateShow(undefined, true);
                void (0, vue_1.nextTick)(() => {
                    syncPosition();
                });
            }
        }
        function handleSecondHandleMouseLeave() {
            if (changeSourceRef.value === 'keyboard')
                return;
            if (!activeRef.value) {
                doUpdateShow(false, false);
            }
            else if (!clickedRef.value) {
                doUpdateShow(false, false);
            }
        }
        function disableTransitionOneTick() {
            if (handleRef1.value) {
                handleRef1.value.style.transition = 'none';
                void (0, vue_1.nextTick)(() => {
                    if (handleRef1.value) {
                        handleRef1.value.style.transition = '';
                    }
                });
            }
            if (handleRef2.value) {
                handleRef2.value.style.transition = 'none';
                void (0, vue_1.nextTick)(() => {
                    if (handleRef2.value) {
                        handleRef2.value.style.transition = '';
                    }
                });
            }
        }
        (0, vue_1.watch)(activeRef, (value) => {
            void (0, vue_1.nextTick)(() => {
                prevActiveRef.value = value;
            });
        });
        (0, vue_1.watch)(mergedValueRef, (newValue, oldValue) => {
            const { value: changeSource } = changeSourceRef;
            if (props.marks) {
                if (dotTransitionDisabledRef.value)
                    return;
                dotTransitionDisabledRef.value = true;
                void (0, vue_1.nextTick)(() => {
                    dotTransitionDisabledRef.value = false;
                });
            }
            if (props.range && Array.isArray(newValue) && Array.isArray(oldValue)) {
                if (oldValue && oldValue[1] !== newValue[1]) {
                    void (0, vue_1.nextTick)(() => {
                        if (!(changeSource === 'click')) {
                            doUpdateShow(false, true);
                        }
                        switchFocus();
                    });
                }
                else if (oldValue && oldValue[0] !== newValue[0]) {
                    void (0, vue_1.nextTick)(() => {
                        if (!(changeSource === 'click')) {
                            doUpdateShow(true, false);
                        }
                        switchFocus();
                    });
                }
                else if (newValue[0] === newValue[1]) {
                    void (0, vue_1.nextTick)(() => {
                        if (!(changeSource === 'click')) {
                            doUpdateShow(false, true);
                        }
                        switchFocus();
                    });
                }
            }
            void (0, vue_1.nextTick)(() => {
                // dom has changed but event is not fired, use marco task to make sure
                // relevant event handler is called
                setTimeout(() => {
                    changeSourceRef.value = null;
                }, 0);
                if (props.range) {
                    if (Array.isArray(newValue) && Array.isArray(oldValue)) {
                        if (newValue[0] !== oldValue[0] || newValue[1] !== oldValue[1]) {
                            syncPosition();
                        }
                    }
                }
                else {
                    syncPosition();
                }
            });
        });
        (0, vue_1.onBeforeUnmount)(() => {
            (0, evtd_1.off)('touchmove', document, handleFirstHandleMouseMove);
            (0, evtd_1.off)('touchmove', document, handleSecondHandleMouseMove);
            (0, evtd_1.off)('mousemove', document, handleFirstHandleMouseMove);
            (0, evtd_1.off)('mousemove', document, handleSecondHandleMouseMove);
            (0, evtd_1.off)('touchend', document, handleHandleMouseUp);
            (0, evtd_1.off)('mouseup', document, handleHandleMouseUp);
        });
        return {
            mergedClsPrefix: mergedClsPrefixRef,
            namespace: namespaceRef,
            uncontrolledValue: uncontrolledValueRef,
            mergedValue: mergedValueRef,
            mergedDisabled: mergedDisabledRef,
            isMounted: (0, vooks_1.useIsMounted)(),
            adjustedTo: (0, _utils_1.useAdjustedTo)(props),
            handleValue1: handleValue1Ref,
            handleValue2: handleValue2Ref,
            mergedShowTooltip1: mergedShowTooltip1Ref,
            mergedShowTooltip2: mergedShowTooltip2Ref,
            handleActive1: handleActive1Ref,
            handleActive2: handleActive2Ref,
            handleClicked1: handleClicked1Ref,
            handleClicked2: handleClicked2Ref,
            memoziedOtherValue: memoziedOtherValueRef,
            active: activeRef,
            prevActive: prevActiveRef,
            clicked: clickedRef,
            dotTransitionDisabled: dotTransitionDisabledRef,
            markInfos: markInfosRef,
            // https://github.com/vuejs/vue-next/issues/2283
            handleRef1,
            handleRef2,
            railRef,
            followerRef1,
            followerRef2,
            firstHandleStyle: firstHandleStyleRef,
            secondHandleStyle: secondHandleStyleRef,
            fillStyle: fillStyleRef,
            handleKeyDown,
            handleRailClick,
            handleHandleFocus1,
            handleHandleBlur1,
            handleFirstHandleMouseDown,
            handleFirstHandleMouseEnter,
            handleFirstHandleMouseLeave,
            handleHandleFocus2,
            handleHandleBlur2,
            handleSecondHandleMouseDown,
            handleSecondHandleMouseEnter,
            handleSecondHandleMouseLeave,
            indicatorCssVars: (0, vue_1.computed)(() => {
                const { self: { fontSize, indicatorColor, indicatorBoxShadow, indicatorTextColor, indicatorBorderRadius } } = themeRef.value;
                return {
                    '--font-size': fontSize,
                    '--indicator-border-radius': indicatorBorderRadius,
                    '--indicator-box-shadow': indicatorBoxShadow,
                    '--indicator-color': indicatorColor,
                    '--indicator-text-color': indicatorTextColor
                };
            }),
            cssVars: (0, vue_1.computed)(() => {
                const { self: { railColor, railColorHover, fillColor, fillColorHover, handleColor, opacityDisabled, dotColor, dotColorModal, handleBoxShadow, handleBoxShadowHover, handleBoxShadowActive, handleBoxShadowFocus, dotBorder, dotBoxShadow, railHeight, handleSize, dotHeight, dotWidth, dotBorderRadius, fontSize, dotBorderActive, dotColorPopover }, common: { cubicBezierEaseInOut } } = themeRef.value;
                return {
                    '--bezier': cubicBezierEaseInOut,
                    '--dot-border': dotBorder,
                    '--dot-border-active': dotBorderActive,
                    '--dot-border-radius': dotBorderRadius,
                    '--dot-box-shadow': dotBoxShadow,
                    '--dot-color': dotColor,
                    '--dot-color-modal': dotColorModal,
                    '--dot-color-popover': dotColorPopover,
                    '--dot-height': dotHeight,
                    '--dot-width': dotWidth,
                    '--fill-color': fillColor,
                    '--fill-color-hover': fillColorHover,
                    '--font-size': fontSize,
                    '--handle-box-shadow': handleBoxShadow,
                    '--handle-box-shadow-active': handleBoxShadowActive,
                    '--handle-box-shadow-focus': handleBoxShadowFocus,
                    '--handle-box-shadow-hover': handleBoxShadowHover,
                    '--handle-color': handleColor,
                    '--handle-size': handleSize,
                    '--opacity-disabled': opacityDisabled,
                    '--rail-color': railColor,
                    '--rail-color-hover': railColorHover,
                    '--rail-height': railHeight
                };
            })
        };
    },
    render() {
        const { mergedClsPrefix, formatTooltip } = this;
        return ((0, vue_1.h)("div", { class: [
                `${mergedClsPrefix}-slider`,
                {
                    [`${mergedClsPrefix}-slider--disabled`]: this.mergedDisabled,
                    [`${mergedClsPrefix}-slider--active`]: this.active,
                    [`${mergedClsPrefix}-slider--with-mark`]: this.marks
                }
            ], style: this.cssVars, onKeydown: this.handleKeyDown, onClick: this.handleRailClick },
            (0, vue_1.h)("div", { ref: "railRef", class: `${mergedClsPrefix}-slider-rail` },
                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-slider-rail__fill`, style: this.fillStyle }),
                this.marks ? ((0, vue_1.h)("div", { class: [
                        `${mergedClsPrefix}-slider-dots`,
                        {
                            [`${mergedClsPrefix}-slider-dots--transition-disabled`]: this.dotTransitionDisabled
                        }
                    ] }, this.markInfos.map((mark) => ((0, vue_1.h)("div", { key: mark.label, class: [
                        `${mergedClsPrefix}-slider-dot`,
                        {
                            [`${mergedClsPrefix}-slider-dot--active`]: mark.active
                        }
                    ], style: mark.style }))))) : null),
            (0, vue_1.h)(vueuc_1.VBinder, null, {
                default: () => [
                    (0, vue_1.h)(vueuc_1.VTarget, null, {
                        default: () => ((0, vue_1.h)("div", { ref: "handleRef1", class: `${mergedClsPrefix}-slider-handle`, tabindex: this.mergedDisabled ? -1 : 0, style: this.firstHandleStyle, onFocus: this.handleHandleFocus1, onBlur: this.handleHandleBlur1, onTouchstart: this.handleFirstHandleMouseDown, onMousedown: this.handleFirstHandleMouseDown, onMouseenter: this.handleFirstHandleMouseEnter, onMouseleave: this.handleFirstHandleMouseLeave }))
                    }),
                    this.tooltip && ((0, vue_1.h)(vueuc_1.VFollower, { ref: "followerRef1", show: this.mergedShowTooltip1, to: this.adjustedTo, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, placement: this.placement, containerClass: this.namespace }, {
                        default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, css: !(this.active && this.prevActive) }, {
                            default: () => this.mergedShowTooltip1 ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-slider-handle-indicator`, style: this.indicatorCssVars }, typeof formatTooltip === 'function'
                                ? formatTooltip(this.handleValue1)
                                : this.handleValue1)) : null
                        }))
                    }))
                ]
            }),
            this.tooltip && this.range ? ((0, vue_1.h)(vueuc_1.VBinder, null, {
                default: () => [
                    (0, vue_1.h)(vueuc_1.VTarget, null, {
                        default: () => ((0, vue_1.h)("div", { ref: "handleRef2", class: `${mergedClsPrefix}-slider-handle`, tabindex: this.mergedDisabled ? -1 : 0, style: this.secondHandleStyle, onFocus: this.handleHandleFocus2, onBlur: this.handleHandleBlur2, onTouchstart: this.handleSecondHandleMouseDown, onMousedown: this.handleSecondHandleMouseDown, onMouseenter: this.handleSecondHandleMouseEnter, onMouseleave: this.handleSecondHandleMouseLeave }))
                    }),
                    (0, vue_1.h)(vueuc_1.VFollower, { ref: "followerRef2", show: this.mergedShowTooltip2, to: this.adjustedTo, placement: this.placement, containerClass: this.namespace, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey }, {
                        default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, css: !(this.active && this.prevActive) }, {
                            default: () => this.mergedShowTooltip2 ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-slider-handle-indicator`, style: this.indicatorCssVars }, typeof formatTooltip === 'function'
                                ? formatTooltip(this.handleValue2)
                                : this.handleValue2)) : null
                        }))
                    })
                ]
            })) : null,
            this.marks ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-slider-marks` }, this.markInfos.map((mark) => ((0, vue_1.h)("div", { key: mark.label, class: `${mergedClsPrefix}-slider-mark`, style: mark.style }, mark.label))))) : null));
    }
});
