naive-ui 2.20.0 → 2.21.0

package/lib/popconfirm/src/PopconfirmPanel.d.ts

@@ -15,7 +15,7 @@ export declare const panelProps: {
         readonly required: true;
     };
 };
-export declare const panelPropKeys: ("showIcon" | "negativeText" | "positiveText" | "onPositiveClick" | "onNegativeClick")[];
+export declare const panelPropKeys: ("positiveText" | "negativeText" | "showIcon" | "onPositiveClick" | "onNegativeClick")[];
 declare const _default: import("vue").DefineComponent<{
     readonly positiveText: StringConstructor;
     readonly negativeText: StringConstructor;
@@ -59,8 +59,8 @@ declare const _default: import("vue").DefineComponent<{
     onPositiveClick: (e: MouseEvent) => void;
     onNegativeClick: (e: MouseEvent) => void;
 } & {
-    negativeText?: string | undefined;
     positiveText?: string | undefined;
+    negativeText?: string | undefined;
 }>, {
     showIcon: boolean;
 }>;

package/lib/popconfirm/styles/light.d.ts

@@ -24,20 +24,30 @@ declare const popconfirmLight: import("../../_mixins").Theme<"Popconfirm", {
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
+        colorOpacitySecondary: number;
+        colorOpacitySecondaryHover: number;
+        colorOpacitySecondaryPressed: number;
+        colorSecondary: string;
+        colorSecondaryHover: string;
+        colorSecondaryPressed: string;
+        colorTertiary: string;
+        colorTertiaryHover: string;
+        colorTertiaryPressed: string;
+        colorQuaternary: string;
+        colorQuaternaryHover: string;
+        colorQuaternaryPressed: string;
         color: string;
         colorHover: string;
         colorPressed: string;
         colorFocus: string;
         colorDisabled: string;
         textColor: string;
+        textColorTertiary: string;
         textColorHover: string;
         textColorPressed: string;
         textColorFocus: string;
         textColorDisabled: string;
         textColorText: string;
-        textColorTextDepth1: string;
-        textColorTextDepth2: string;
-        textColorTextDepth3: string;
         textColorTextHover: string;
         textColorTextPressed: string;
         textColorTextFocus: string;
@@ -184,9 +194,8 @@ declare const popconfirmLight: import("../../_mixins").Theme<"Popconfirm", {
         borderDisabledError: string;
         rippleColorError: string;
         waveOpacity: string;
-        fontWeightText: string;
         fontWeight: string;
-        fontWeighGhost: string;
+        fontWeightStrong: string;
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;

package/lib/popselect/src/Popselect.d.ts

@@ -675,6 +675,9 @@ declare const _default: import("vue").DefineComponent<{
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;

package/lib/popselect/src/PopselectPanel.d.ts

@@ -134,6 +134,9 @@ declare const _default: import("vue").DefineComponent<{
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;

package/lib/radio/src/Radio.d.ts

@@ -17,6 +17,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     size: import("vue").PropType<"small" | "medium" | "large">;
+    onUpdateChecked: import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     'onUpdate:checked': import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     checkedValue: {
         readonly type: import("vue").PropType<boolean | undefined>;
@@ -156,6 +157,7 @@ declare const _default: import("vue").DefineComponent<{
     defaultChecked?: unknown;
     disabled?: unknown;
     size?: unknown;
+    onUpdateChecked?: unknown;
     'onUpdate:checked'?: unknown;
     checkedValue?: unknown;
     theme?: unknown;
@@ -278,6 +280,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>> | undefined;
     "onUpdate:checked"?: import("../../_utils").MaybeArray<(value: boolean) => void> | undefined;
+    onUpdateChecked?: import("../../_utils").MaybeArray<(value: boolean) => void> | undefined;
     checkedValue?: boolean | undefined;
 }>, {
     value: string | number;

package/lib/radio/src/RadioButton.d.ts

@@ -17,6 +17,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly size: import("vue").PropType<"small" | "medium" | "large">;
+    readonly onUpdateChecked: import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     readonly 'onUpdate:checked': import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     readonly checkedValue: {
         readonly type: import("vue").PropType<boolean | undefined>;
@@ -30,6 +31,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly defaultChecked?: unknown;
     readonly disabled?: unknown;
     readonly size?: unknown;
+    readonly onUpdateChecked?: unknown;
     readonly 'onUpdate:checked'?: unknown;
     readonly checkedValue?: unknown;
 } & {
@@ -41,6 +43,7 @@ declare const _default: import("vue").DefineComponent<{
     disabled?: boolean | undefined;
     checked?: boolean | undefined;
     "onUpdate:checked"?: import("../../_utils").MaybeArray<(value: boolean) => void> | undefined;
+    onUpdateChecked?: import("../../_utils").MaybeArray<(value: boolean) => void> | undefined;
     checkedValue?: boolean | undefined;
 }>, {
     value: string | number;

package/lib/radio/src/use-radio.d.ts

@@ -17,6 +17,7 @@ declare const radioProps: {
         readonly default: undefined;
     };
     readonly size: PropType<"small" | "medium" | "large">;
+    readonly onUpdateChecked: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly 'onUpdate:checked': PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly checkedValue: {
         readonly type: PropType<boolean | undefined>;
@@ -68,6 +69,7 @@ declare namespace setup {
             readonly default: undefined;
         };
         readonly size: PropType<"small" | "medium" | "large">;
+        readonly onUpdateChecked: PropType<MaybeArray<(value: boolean) => void> | undefined>;
         readonly 'onUpdate:checked': PropType<MaybeArray<(value: boolean) => void> | undefined>;
         readonly checkedValue: {
             readonly type: PropType<boolean | undefined>;

package/lib/radio/src/use-radio.js

@@ -21,6 +21,7 @@ const radioProps = {
         default: undefined
     },
     size: String,
+    onUpdateChecked: [Function, Array],
     'onUpdate:checked': [Function, Array],
     // deprecated
     checkedValue: {
@@ -87,10 +88,12 @@ function setup(props) {
             (0, _utils_1.call)(doUpdateValue, value);
         }
         else {
-            const { 'onUpdate:checked': updateChecked } = props;
+            const { onUpdateChecked, 'onUpdate:checked': _onUpdateChecked } = props;
             const { nTriggerFormInput, nTriggerFormChange } = formItem;
-            if (updateChecked)
-                (0, _utils_1.call)(updateChecked, true);
+            if (onUpdateChecked)
+                (0, _utils_1.call)(onUpdateChecked, true);
+            if (_onUpdateChecked)
+                (0, _utils_1.call)(_onUpdateChecked, true);
             nTriggerFormInput();
             nTriggerFormChange();
             uncontrolledCheckedRef.value = true;

package/lib/select/src/Select.d.ts

@@ -1,4 +1,4 @@
-import { PropType, InputHTMLAttributes } from 'vue';
+import { PropType, InputHTMLAttributes, HTMLAttributes } from 'vue';
 import { TreeNode } from 'treemate';
 import { FollowerPlacement } from 'vueuc';
 import { RenderLabel, RenderOption } from '../../_internal/select-menu/src/interface';
@@ -27,6 +27,7 @@ declare const selectProps: {
     };
     readonly value: PropType<Value | null>;
     readonly placeholder: StringConstructor;
+    readonly menuProps: PropType<HTMLAttributes>;
     readonly multiple: BooleanConstructor;
     readonly size: PropType<Size>;
     readonly filterable: BooleanConstructor;
@@ -502,6 +503,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly value: PropType<Value | null>;
     readonly placeholder: StringConstructor;
+    readonly menuProps: PropType<HTMLAttributes>;
     readonly multiple: BooleanConstructor;
     readonly size: PropType<Size>;
     readonly filterable: BooleanConstructor;
@@ -1000,7 +1002,7 @@ declare const _default: import("vue").DefineComponent<{
     handleKeyDown: (e: KeyboardEvent) => void;
     handleKeyUp: (e: KeyboardEvent) => void;
     syncPosition: () => void;
-    handleMenuLeave: () => void;
+    handleMenuAfterLeave: () => void;
     handleMenuClickOutside: (e: MouseEvent) => void;
     handleMenuScroll: (e: Event) => void;
     handleMenuKeyup: (e: KeyboardEvent) => void;
@@ -1079,6 +1081,9 @@ declare const _default: import("vue").DefineComponent<{
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -1284,6 +1289,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly defaultValue?: unknown;
     readonly value?: unknown;
     readonly placeholder?: unknown;
+    readonly menuProps?: unknown;
     readonly multiple?: unknown;
     readonly size?: unknown;
     readonly filterable?: unknown;
@@ -1731,6 +1737,7 @@ declare const _default: import("vue").DefineComponent<{
     inputProps?: InputHTMLAttributes | undefined;
     renderTag?: RenderTag | undefined;
     maxTagCount?: number | "responsive" | undefined;
+    menuProps?: HTMLAttributes | undefined;
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
     onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;
     onSearch?: MaybeArray<(value: string) => void> | undefined;

package/lib/select/src/Select.js

@@ -24,7 +24,7 @@ const selectProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, defaultValue: {
         type: [String, Number, Array],
         default: null
-    }, value: [String, Number, Array], placeholder: String, multiple: Boolean, size: String, filterable: Boolean, disabled: {
+    }, value: [String, Number, Array], placeholder: String, menuProps: Object, multiple: Boolean, size: String, filterable: Boolean, disabled: {
         type: Boolean,
         default: undefined
     }, remote: Boolean, loading: Boolean, filter: {
@@ -98,7 +98,7 @@ exports.default = (0, vue_1.defineComponent)({
         const focusedRef = (0, vue_1.ref)(false);
         const patternRef = (0, vue_1.ref)('');
         const treeMateRef = (0, vue_1.computed)(() => (0, treemate_1.createTreeMate)(filteredOptionsRef.value, utils_1.tmOptions));
-        const valOptMapRef = (0, vue_1.computed)(() => (0, utils_1.createValOptMap)(props.options));
+        const valOptMapRef = (0, vue_1.computed)(() => (0, utils_1.createValOptMap)(localOptionsRef.value));
         const uncontrolledShowRef = (0, vue_1.ref)(false);
         const mergedShowRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'show'), uncontrolledShowRef);
         const triggerRef = (0, vue_1.ref)(null);
@@ -270,7 +270,7 @@ exports.default = (0, vue_1.defineComponent)({
         function closeMenu() {
             doUpdateShow(false);
         }
-        function handleMenuLeave() {
+        function handleMenuAfterLeave() {
             patternRef.value = '';
         }
         function handleTriggerClick() {
@@ -570,7 +570,7 @@ exports.default = (0, vue_1.defineComponent)({
             handleKeyDown,
             handleKeyUp,
             syncPosition,
-            handleMenuLeave,
+            handleMenuAfterLeave,
             handleMenuClickOutside,
             handleMenuScroll,
             handleMenuKeyup: handleKeyUp,
@@ -594,16 +594,22 @@ exports.default = (0, vue_1.defineComponent)({
                         default: () => ((0, vue_1.h)(_internal_1.NInternalSelection, { ref: "triggerRef", inputProps: this.inputProps, clsPrefix: mergedClsPrefix, showArrow: this.showArrow, maxTagCount: this.maxTagCount, bordered: this.mergedBordered, active: this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, renderTag: this.renderTag, renderLabel: this.renderLabel, filterable: this.filterable, clearable: this.clearable, disabled: this.mergedDisabled, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, loading: this.loading, focused: this.focused, onClick: this.handleTriggerClick, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onClear: this.handleClear, onBlur: this.handleTriggerBlur, onFocus: this.handleTriggerFocus, onKeydown: this.handleKeyDown, onKeyup: this.handleKeyUp }))
                     }),
                     (0, vue_1.h)(vueuc_1.VFollower, { ref: "followerRef", show: this.mergedShow, to: this.adjustedTo, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, containerClass: this.namespace, width: this.consistentMenuWidth ? 'target' : undefined, minWidth: "target", placement: this.placement }, {
-                        default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, onLeave: this.handleMenuLeave }, {
-                            default: () => (this.mergedShow ||
-                                this.displayDirective === 'show') &&
-                                (0, vue_1.withDirectives)((0, vue_1.h)(_internal_1.NInternalSelectMenu, { ref: "menuRef", virtualScroll: this.consistentMenuWidth && this.virtualScroll, class: `${mergedClsPrefix}-select-menu`, clsPrefix: mergedClsPrefix, focusable: true, autoPending: true, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides
-                                        .InternalSelectMenu, treeMate: this.treeMate, multiple: this.multiple, size: "medium", renderOption: this.renderOption, renderLabel: this.renderLabel, value: this.mergedValue, style: this.cssVars, onToggle: this.handleToggle, onScroll: this.handleMenuScroll, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeyup: this.handleMenuKeyup, onKeydown: this.handleMenuKeydown, onTabOut: this.handleMenuTabOut, onMousedown: this.handleMenuMousedown, show: this.mergedShow }, $slots), this.displayDirective === 'show'
-                                    ? [
-                                        [vue_1.vShow, this.mergedShow],
-                                        [vdirs_1.clickoutside, this.handleMenuClickOutside]
-                                    ]
-                                    : [[vdirs_1.clickoutside, this.handleMenuClickOutside]])
+                        default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, onAfterLeave: this.handleMenuAfterLeave }, {
+                            default: () => {
+                                var _a, _b;
+                                return (this.mergedShow ||
+                                    this.displayDirective === 'show') &&
+                                    (0, vue_1.withDirectives)((0, vue_1.h)(_internal_1.NInternalSelectMenu, Object.assign({}, this.menuProps, { ref: "menuRef", virtualScroll: this.consistentMenuWidth && this.virtualScroll, class: [
+                                            `${mergedClsPrefix}-select-menu`,
+                                            (_a = this.menuProps) === null || _a === void 0 ? void 0 : _a.class
+                                        ], clsPrefix: mergedClsPrefix, focusable: true, autoPending: true, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides
+                                            .InternalSelectMenu, treeMate: this.treeMate, multiple: this.multiple, size: 'medium', renderOption: this.renderOption, renderLabel: this.renderLabel, value: this.mergedValue, style: [(_b = this.menuProps) === null || _b === void 0 ? void 0 : _b.style, this.cssVars], onToggle: this.handleToggle, onScroll: this.handleMenuScroll, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeyup: this.handleMenuKeyup, onKeydown: this.handleMenuKeydown, onTabOut: this.handleMenuTabOut, onMousedown: this.handleMenuMousedown, show: this.mergedShow }), $slots), this.displayDirective === 'show'
+                                        ? [
+                                            [vue_1.vShow, this.mergedShow],
+                                            [vdirs_1.clickoutside, this.handleMenuClickOutside]
+                                        ]
+                                        : [[vdirs_1.clickoutside, this.handleMenuClickOutside]]);
+                            }
                         }))
                     })
                 ]

package/lib/slider/src/Slider.d.ts

@@ -1,13 +1,18 @@
 import { PropType } from 'vue';
 import { FollowerPlacement } from 'vueuc';
-import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
+import { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
+export interface ClosestMark {
+    value: number;
+    distance: number;
+    index: number;
+}
 declare const sliderProps: {
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
     };
     readonly defaultValue: {
-        readonly type: PropType<number | [number, number]>;
+        readonly type: PropType<number | number[]>;
         readonly default: 0;
     };
     readonly marks: PropType<Record<string, string>>;
@@ -25,15 +30,12 @@ declare const sliderProps: {
         readonly default: 100;
     };
     readonly step: {
-        readonly type: NumberConstructor;
+        readonly type: PropType<number | "mark">;
         readonly default: 1;
     };
     readonly range: BooleanConstructor;
-    readonly value: PropType<number | [number, number]>;
-    readonly placement: {
-        readonly type: PropType<FollowerPlacement>;
-        readonly default: "top";
-    };
+    readonly value: PropType<number | number[]>;
+    readonly placement: PropType<FollowerPlacement>;
     readonly showTooltip: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -42,13 +44,10 @@ declare const sliderProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-    readonly 'onUpdate:value': PropType<MaybeArray<(<T extends number & [number, number]>(value: T) => void)>>;
-    readonly onUpdateValue: PropType<MaybeArray<(<T_1 extends number & [number, number]>(value: T_1) => void)>>;
-    readonly onChange: {
-        readonly type: PropType<MaybeArray<(<T_2 extends number & [number, number]>(value: T_2) => void)>>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly vertical: BooleanConstructor;
+    readonly reverse: BooleanConstructor;
+    readonly 'onUpdate:value': PropType<MaybeArray<(value: number & number[]) => void>>;
+    readonly onUpdateValue: PropType<MaybeArray<(value: number & number[]) => void>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Slider", {
         fontSize: string;
         railColor: string;
@@ -72,6 +71,7 @@ declare const sliderProps: {
         dotBorderActive: string;
         dotBoxShadow: string;
         railHeight: string;
+        railWidthVertical: string;
         handleSize: string;
         dotHeight: string;
         dotWidth: string;
@@ -100,6 +100,7 @@ declare const sliderProps: {
         dotBorderActive: string;
         dotBoxShadow: string;
         railHeight: string;
+        railWidthVertical: string;
         handleSize: string;
         dotHeight: string;
         dotWidth: string;
@@ -128,6 +129,7 @@ declare const sliderProps: {
         dotBorderActive: string;
         dotBoxShadow: string;
         railHeight: string;
+        railWidthVertical: string;
         handleSize: string;
         dotHeight: string;
         dotWidth: string;
@@ -141,7 +143,7 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     readonly defaultValue: {
-        readonly type: PropType<number | [number, number]>;
+        readonly type: PropType<number | number[]>;
         readonly default: 0;
     };
     readonly marks: PropType<Record<string, string>>;
@@ -159,15 +161,12 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: 100;
     };
     readonly step: {
-        readonly type: NumberConstructor;
+        readonly type: PropType<number | "mark">;
         readonly default: 1;
     };
     readonly range: BooleanConstructor;
-    readonly value: PropType<number | [number, number]>;
-    readonly placement: {
-        readonly type: PropType<FollowerPlacement>;
-        readonly default: "top";
-    };
+    readonly value: PropType<number | number[]>;
+    readonly placement: PropType<FollowerPlacement>;
     readonly showTooltip: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -176,13 +175,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-    readonly 'onUpdate:value': PropType<MaybeArray<(<T extends number & [number, number]>(value: T) => void)>>;
-    readonly onUpdateValue: PropType<MaybeArray<(<T_1 extends number & [number, number]>(value: T_1) => void)>>;
-    readonly onChange: {
-        readonly type: PropType<MaybeArray<(<T_2 extends number & [number, number]>(value: T_2) => void)>>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly vertical: BooleanConstructor;
+    readonly reverse: BooleanConstructor;
+    readonly 'onUpdate:value': PropType<MaybeArray<(value: number & number[]) => void>>;
+    readonly onUpdateValue: PropType<MaybeArray<(value: number & number[]) => void>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Slider", {
         fontSize: string;
         railColor: string;
@@ -206,6 +202,7 @@ declare const _default: import("vue").DefineComponent<{
         dotBorderActive: string;
         dotBoxShadow: string;
         railHeight: string;
+        railWidthVertical: string;
         handleSize: string;
         dotHeight: string;
         dotWidth: string;
@@ -234,6 +231,7 @@ declare const _default: import("vue").DefineComponent<{
         dotBorderActive: string;
         dotBoxShadow: string;
         railHeight: string;
+        railWidthVertical: string;
         handleSize: string;
         dotHeight: string;
         dotWidth: string;
@@ -262,6 +260,7 @@ declare const _default: import("vue").DefineComponent<{
         dotBorderActive: string;
         dotBoxShadow: string;
         railHeight: string;
+        railWidthVertical: string;
         handleSize: string;
         dotHeight: string;
         dotWidth: string;
@@ -270,69 +269,43 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     namespace: import("vue").ComputedRef<string | undefined>;
-    uncontrolledValue: import("vue").Ref<number | [number, number]>;
-    mergedValue: import("vue").ComputedRef<number | [number, number]>;
+    uncontrolledValue: import("vue").Ref<number | number[]>;
+    mergedValue: import("vue").ComputedRef<number | number[]>;
     mergedDisabled: import("vue").ComputedRef<boolean>;
+    mergedPlacement: import("vue").ComputedRef<FollowerPlacement>;
     isMounted: Readonly<import("vue").Ref<boolean>>;
     adjustedTo: import("vue").ComputedRef<string | HTMLElement>;
-    handleValue1: import("vue").ComputedRef<number>;
-    handleValue2: import("vue").ComputedRef<number>;
-    mergedShowTooltip1: import("vue").ComputedRef<boolean>;
-    mergedShowTooltip2: import("vue").ComputedRef<boolean>;
-    handleActive1: import("vue").Ref<boolean>;
-    handleActive2: import("vue").Ref<boolean>;
-    handleClicked1: import("vue").Ref<boolean>;
-    handleClicked2: import("vue").Ref<boolean>;
-    memoziedOtherValue: import("vue").Ref<number>;
-    active: import("vue").ComputedRef<boolean>;
-    prevActive: import("vue").Ref<boolean>;
-    clicked: import("vue").ComputedRef<boolean>;
     dotTransitionDisabled: import("vue").Ref<boolean>;
     markInfos: import("vue").ComputedRef<{
         active: boolean;
         label: string;
         style: {
-            left: string;
+            [x: string]: string;
         };
     }[]>;
-    handleRef1: import("vue").Ref<HTMLElement | null>;
-    handleRef2: import("vue").Ref<HTMLElement | null>;
-    railRef: import("vue").Ref<HTMLElement | null>;
-    followerRef1: import("vue").Ref<{
-        syncPosition: () => void;
-    } | null>;
-    followerRef2: import("vue").Ref<{
-        syncPosition: () => void;
-    } | null>;
-    firstHandleStyle: import("vue").ComputedRef<{
-        left: string;
-        transform: string;
-        zIndex: number;
-    }>;
-    secondHandleStyle: import("vue").ComputedRef<{
-        left: string;
-        transform: string;
-        zIndex: number;
-    }>;
+    isShowTooltip: (index: number) => boolean;
+    isSkipCSSDetection: (index: number) => boolean;
+    handleRailRef: import("vue").Ref<HTMLElement | null>;
+    setHandleRefs: (key: number) => (el: any) => void;
+    setFollowerRefs: (key: number) => (el: any) => void;
     fillStyle: import("vue").ComputedRef<{
-        left: string;
-        width: string;
+        [x: string]: string;
+        height: string;
+        width?: undefined;
     } | {
-        left: number;
+        [x: string]: string;
         width: string;
-    }>;
-    handleKeyDown: (e: KeyboardEvent) => void;
-    handleRailClick: (e: MouseEvent) => void;
-    handleHandleFocus1: () => void;
-    handleHandleBlur1: () => void;
-    handleFirstHandleMouseDown: (e: MouseEvent | TouchEvent) => void;
-    handleFirstHandleMouseEnter: () => void;
-    handleFirstHandleMouseLeave: () => void;
-    handleHandleFocus2: () => void;
-    handleHandleBlur2: () => void;
-    handleSecondHandleMouseDown: (e: MouseEvent | TouchEvent) => void;
-    handleSecondHandleMouseEnter: () => void;
-    handleSecondHandleMouseLeave: () => void;
+        height?: undefined;
+    } | undefined>;
+    getHandleStyle: (value: number, index: number) => Record<string, any>;
+    activeIndex: import("vue").Ref<number>;
+    arrifiedValues: import("vue").ComputedRef<number[]>;
+    handleRailMouseDown: (event: MouseEvent | TouchEvent) => void;
+    handleHandleFocus: (index: number) => void;
+    handleHandleBlur: (index: number) => void;
+    handleHandleMouseEnter: (index: number) => void;
+    handleHandleMouseLeave: (index: number) => void;
+    handleRailKeyDown: (e: KeyboardEvent) => void;
     indicatorCssVars: import("vue").ComputedRef<{
         '--font-size': string;
         '--indicator-border-radius': string;
@@ -364,6 +337,7 @@ declare const _default: import("vue").DefineComponent<{
         '--rail-color': string;
         '--rail-color-hover': string;
         '--rail-height': string;
+        '--rail-width-vertical': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly to?: unknown;
@@ -379,24 +353,25 @@ declare const _default: import("vue").DefineComponent<{
     readonly placement?: unknown;
     readonly showTooltip?: unknown;
     readonly tooltip?: unknown;
+    readonly vertical?: unknown;
+    readonly reverse?: unknown;
     readonly 'onUpdate:value'?: unknown;
     readonly onUpdateValue?: unknown;
-    readonly onChange?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
 } & {
     range: boolean;
+    reverse: boolean;
+    vertical: boolean;
     tooltip: boolean;
-    step: number;
+    step: number | "mark";
     max: number;
     min: number;
-    placement: FollowerPlacement;
-    defaultValue: number | [number, number];
+    defaultValue: number | number[];
 } & {
-    value?: number | [number, number] | undefined;
+    value?: number | number[] | undefined;
     disabled?: boolean | undefined;
-    onChange?: MaybeArray<(<T_2 extends number & [number, number]>(value: T_2) => void)> | undefined;
     to?: string | boolean | HTMLElement | undefined;
     theme?: import("../../_mixins").Theme<"Slider", {
         fontSize: string;
@@ -421,6 +396,7 @@ declare const _default: import("vue").DefineComponent<{
         dotBorderActive: string;
         dotBoxShadow: string;
         railHeight: string;
+        railWidthVertical: string;
         handleSize: string;
         dotHeight: string;
         dotWidth: string;
@@ -449,6 +425,7 @@ declare const _default: import("vue").DefineComponent<{
         dotBorderActive: string;
         dotBoxShadow: string;
         railHeight: string;
+        railWidthVertical: string;
         handleSize: string;
         dotHeight: string;
         dotWidth: string;
@@ -477,27 +454,29 @@ declare const _default: import("vue").DefineComponent<{
         dotBorderActive: string;
         dotBoxShadow: string;
         railHeight: string;
+        railWidthVertical: string;
         handleSize: string;
         dotHeight: string;
         dotWidth: string;
         dotBorderRadius: string;
     }, any>> | undefined;
-    "onUpdate:value"?: MaybeArray<(<T extends number & [number, number]>(value: T) => void)> | undefined;
-    onUpdateValue?: MaybeArray<(<T_1 extends number & [number, number]>(value: T_1) => void)> | undefined;
+    placement?: FollowerPlacement | undefined;
+    "onUpdate:value"?: MaybeArray<(value: number & number[]) => void> | undefined;
+    onUpdateValue?: MaybeArray<(value: number & number[]) => void> | undefined;
     marks?: Record<string, string> | undefined;
     formatTooltip?: ((value: number) => string | number) | undefined;
     showTooltip?: boolean | undefined;
 }>, {
     range: boolean;
+    reverse: boolean;
+    vertical: boolean;
     tooltip: boolean;
     disabled: boolean | undefined;
-    step: number;
-    onChange: MaybeArray<(<T_2 extends number & [number, number]>(value: T_2) => void)>;
+    step: number | "mark";
     max: number;
     min: number;
     to: string | boolean | HTMLElement;
-    placement: FollowerPlacement;
-    defaultValue: number | [number, number];
+    defaultValue: number | number[];
     showTooltip: boolean | undefined;
 }>;
 export default _default;