naive-ui 2.38.2 → 2.40.0

package/lib/select/src/Select.js

@@ -31,7 +31,9 @@ exports.selectProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, keyboard: {
         type: Boolean,
         default: true
-    }, value: [String, Number, Array], placeholder: String, menuProps: Object, multiple: Boolean, size: String, filterable: Boolean, disabled: {
+    }, value: [String, Number, Array], placeholder: String, menuProps: Object, multiple: Boolean, size: String, menuSize: {
+        type: String
+    }, filterable: Boolean, disabled: {
         type: Boolean,
         default: undefined
     }, remote: Boolean, loading: Boolean, filter: Function, placement: {
@@ -99,44 +101,9 @@ exports.default = (0, vue_1.defineComponent)({
         const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
         const focusedRef = (0, vue_1.ref)(false);
         const patternRef = (0, vue_1.ref)('');
-        const treeMateRef = (0, vue_1.computed)(() => {
-            const { valueField, childrenField } = props;
-            const options = (0, utils_1.createTmOptions)(valueField, childrenField);
-            return (0, treemate_1.createTreeMate)(filteredOptionsRef.value, options);
-        });
-        const valOptMapRef = (0, vue_1.computed)(() => (0, utils_1.createValOptMap)(localOptionsRef.value, props.valueField, props.childrenField));
-        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);
-        const followerRef = (0, vue_1.ref)(null);
-        const menuRef = (0, vue_1.ref)(null);
-        const { localeRef } = (0, _mixins_1.useLocale)('Select');
-        const localizedPlaceholderRef = (0, vue_1.computed)(() => {
-            var _a;
-            return (_a = props.placeholder) !== null && _a !== void 0 ? _a : localeRef.value.placeholder;
-        });
         const compitableOptionsRef = (0, vooks_1.useCompitable)(props, ['items', 'options']);
-        const emptyArray = [];
         const createdOptionsRef = (0, vue_1.ref)([]);
         const beingCreatedOptionsRef = (0, vue_1.ref)([]);
-        const memoValOptMapRef = (0, vue_1.ref)(new Map());
-        const wrappedFallbackOptionRef = (0, vue_1.computed)(() => {
-            const { fallbackOption } = props;
-            if (fallbackOption === undefined) {
-                const { labelField, valueField } = props;
-                return (value) => ({
-                    [labelField]: String(value),
-                    [valueField]: value
-                });
-            }
-            if (fallbackOption === false)
-                return false;
-            return (value) => {
-                return Object.assign(fallbackOption(value), {
-                    value
-                });
-            };
-        });
         const localOptionsRef = (0, vue_1.computed)(() => {
             return beingCreatedOptionsRef.value.concat(createdOptionsRef.value).concat(compitableOptionsRef.value);
         });
@@ -177,6 +144,41 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         });
+        const treeMateRef = (0, vue_1.computed)(() => {
+            const { valueField, childrenField } = props;
+            const options = (0, utils_1.createTmOptions)(valueField, childrenField);
+            return (0, treemate_1.createTreeMate)(filteredOptionsRef.value, options);
+        });
+        const valOptMapRef = (0, vue_1.computed)(() => (0, utils_1.createValOptMap)(localOptionsRef.value, props.valueField, props.childrenField));
+        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);
+        const followerRef = (0, vue_1.ref)(null);
+        const menuRef = (0, vue_1.ref)(null);
+        const { localeRef } = (0, _mixins_1.useLocale)('Select');
+        const localizedPlaceholderRef = (0, vue_1.computed)(() => {
+            var _a;
+            return (_a = props.placeholder) !== null && _a !== void 0 ? _a : localeRef.value.placeholder;
+        });
+        const emptyArray = [];
+        const memoValOptMapRef = (0, vue_1.ref)(new Map());
+        const wrappedFallbackOptionRef = (0, vue_1.computed)(() => {
+            const { fallbackOption } = props;
+            if (fallbackOption === undefined) {
+                const { labelField, valueField } = props;
+                return (value) => ({
+                    [labelField]: String(value),
+                    [valueField]: value
+                });
+            }
+            if (fallbackOption === false)
+                return false;
+            return (value) => {
+                return Object.assign(fallbackOption(value), {
+                    value
+                });
+            };
+        });
         function getMergedOptions(values) {
             const remote = props.remote;
             const { value: memoValOptMap } = memoValOptMapRef;
@@ -185,11 +187,9 @@ exports.default = (0, vue_1.defineComponent)({
             const options = [];
             values.forEach((value) => {
                 if (valOptMap.has(value)) {
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                     options.push(valOptMap.get(value));
                 }
                 else if (remote && memoValOptMap.has(value)) {
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                     options.push(memoValOptMap.get(value));
                 }
                 else if (wrappedFallbackOption) {
@@ -356,7 +356,7 @@ exports.default = (0, vue_1.defineComponent)({
             doFocus(e);
             focusedRef.value = true;
         }
-        function handleMenuFocus(e) {
+        function handleMenuFocus() {
             focusedRef.value = true;
         }
         function handleMenuBlur(e) {
@@ -395,10 +395,10 @@ exports.default = (0, vue_1.defineComponent)({
                 const { value: valOptMap } = valOptMapRef;
                 if (remote) {
                     const { value: memoValOptMap } = memoValOptMapRef;
-                    return value.filter((v) => valOptMap.has(v) || memoValOptMap.has(v));
+                    return value.filter(v => valOptMap.has(v) || memoValOptMap.has(v));
                 }
                 else {
-                    return value.filter((v) => valOptMap.has(v));
+                    return value.filter(v => valOptMap.has(v));
                 }
             }
         }
@@ -428,7 +428,7 @@ exports.default = (0, vue_1.defineComponent)({
             }
             if (props.multiple) {
                 const changedValue = createClearedMultipleSelectValue(mergedValueRef.value);
-                const index = changedValue.findIndex((value) => value === option[valueField]);
+                const index = changedValue.findIndex(value => value === option[valueField]);
                 if (~index) {
                     changedValue.splice(index, 1);
                     if (tag && !remote) {
@@ -466,7 +466,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function getCreatedOptionIndex(optionValue) {
             const createdOptions = createdOptionsRef.value;
-            return createdOptions.findIndex((createdOption) => createdOption[props.valueField] === optionValue);
+            return createdOptions.findIndex(createdOption => createdOption[props.valueField] === optionValue);
         }
         function handlePatternInput(e) {
             if (!mergedShowRef.value) {
@@ -487,12 +487,12 @@ exports.default = (0, vue_1.defineComponent)({
                     : { [props.labelField]: value, [props.valueField]: value };
                 const { valueField, labelField } = props;
                 if (compitableOptionsRef.value.some((option) => {
-                    return (option[valueField] === optionBeingCreated[valueField] ||
-                        option[labelField] === optionBeingCreated[labelField]);
-                }) ||
-                    createdOptionsRef.value.some((option) => {
-                        return (option[valueField] === optionBeingCreated[valueField] ||
-                            option[labelField] === optionBeingCreated[labelField]);
+                    return (option[valueField] === optionBeingCreated[valueField]
+                        || option[labelField] === optionBeingCreated[labelField]);
+                })
+                    || createdOptionsRef.value.some((option) => {
+                        return (option[valueField] === optionBeingCreated[valueField]
+                            || option[labelField] === optionBeingCreated[labelField]);
                     })) {
                     beingCreatedOptionsRef.value = emptyArray;
                 }
@@ -516,8 +516,11 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }
         function handleMenuMousedown(e) {
-            if (!(0, seemly_1.happensIn)(e, 'action') && !(0, seemly_1.happensIn)(e, 'empty'))
+            if (!(0, seemly_1.happensIn)(e, 'action')
+                && !(0, seemly_1.happensIn)(e, 'empty')
+                && !(0, seemly_1.happensIn)(e, 'header')) {
                 e.preventDefault();
+            }
         }
         // scroll events on menu
         function handleMenuScroll(e) {
@@ -533,8 +536,9 @@ exports.default = (0, vue_1.defineComponent)({
             }
             switch (e.key) {
                 case ' ':
-                    if (props.filterable)
+                    if (props.filterable) {
                         break;
+                    }
                     else {
                         e.preventDefault();
                     }
@@ -559,8 +563,8 @@ exports.default = (0, vue_1.defineComponent)({
                                     const optionValue = beingCreatedOption[props.valueField];
                                     const { value: mergedValue } = mergedValueRef;
                                     if (props.multiple) {
-                                        if (Array.isArray(mergedValue) &&
-                                            mergedValue.some((value) => value === optionValue)) {
+                                        if (Array.isArray(mergedValue)
+                                            && mergedValue.includes(optionValue)) {
                                             // do nothing
                                         }
                                         else {
@@ -677,8 +681,8 @@ exports.default = (0, vue_1.defineComponent)({
                         default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, onAfterLeave: this.handleMenuAfterLeave }, {
                             default: () => {
                                 var _a, _b, _c;
-                                if (!(this.mergedShow ||
-                                    this.displayDirective === 'show')) {
+                                if (!(this.mergedShow
+                                    || this.displayDirective === 'show')) {
                                     return null;
                                 }
                                 (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
@@ -687,7 +691,7 @@ exports.default = (0, vue_1.defineComponent)({
                                         this.themeClass,
                                         (_b = this.menuProps) === null || _b === void 0 ? void 0 : _b.class
                                     ], clsPrefix: this.mergedClsPrefix, focusable: true, labelField: this.labelField, valueField: this.valueField, autoPending: true, nodeProps: this.nodeProps, 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: [(_c = this.menuProps) === null || _c === void 0 ? void 0 : _c.style, this.cssVars], onToggle: this.handleToggle, onScroll: this.handleMenuScroll, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeydown: this.handleMenuKeydown, onTabOut: this.handleMenuTabOut, onMousedown: this.handleMenuMousedown, show: this.mergedShow, showCheckmark: this.showCheckmark, resetMenuOnOptionsChange: this.resetMenuOnOptionsChange }), {
+                                        .InternalSelectMenu, treeMate: this.treeMate, multiple: this.multiple, size: this.menuSize, renderOption: this.renderOption, renderLabel: this.renderLabel, value: this.mergedValue, style: [(_c = this.menuProps) === null || _c === void 0 ? void 0 : _c.style, this.cssVars], onToggle: this.handleToggle, onScroll: this.handleMenuScroll, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeydown: this.handleMenuKeydown, onTabOut: this.handleMenuTabOut, onMousedown: this.handleMenuMousedown, show: this.mergedShow, showCheckmark: this.showCheckmark, resetMenuOnOptionsChange: this.resetMenuOnOptionsChange }), {
                                     empty: () => { var _a, _b; return [(_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a)]; },
                                     header: () => { var _a, _b; return [(_b = (_a = this.$slots).header) === null || _b === void 0 ? void 0 : _b.call(_a)]; },
                                     action: () => { var _a, _b; return [(_b = (_a = this.$slots).action) === null || _b === void 0 ? void 0 : _b.call(_a)]; }

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

@@ -1,5 +1,5 @@
-import { type TreeMate } from 'treemate';
-import { type CSSProperties, type VNodeChild, type VNode } from 'vue';
+import type { TreeMate } from 'treemate';
+import type { CSSProperties, VNode, VNodeChild } from 'vue';
 export type SelectMixedOption = SelectBaseOption | SelectGroupOption | SelectIgnoredOption;
 export interface SelectBaseOption<V = string | number, L = string | ((option: SelectBaseOption<V>, selected: boolean) => VNodeChild)> {
     value?: V;

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

@@ -1,4 +1,4 @@
-import { type TreeMateOptions } from 'treemate';
+import type { TreeMateOptions } from 'treemate';
 import type { SelectBaseOption, SelectGroupOption, SelectIgnoredOption, SelectMixedOption } from './interface';
 export declare function getIsGroup(option: SelectMixedOption): boolean;
 export declare function getIgnored(option: SelectMixedOption): boolean;

package/lib/select/src/utils.js

@@ -1,35 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createValOptMap = exports.filterOptions = exports.createTmOptions = exports.patternMatched = exports.getIgnored = exports.getIsGroup = void 0;
+exports.getIsGroup = getIsGroup;
+exports.getIgnored = getIgnored;
+exports.patternMatched = patternMatched;
+exports.createTmOptions = createTmOptions;
+exports.filterOptions = filterOptions;
+exports.createValOptMap = createValOptMap;
 function getIsGroup(option) {
     return option.type === 'group';
 }
-exports.getIsGroup = getIsGroup;
 function getIgnored(option) {
     return option.type === 'ignored';
 }
-exports.getIgnored = getIgnored;
 function patternMatched(pattern, value) {
     try {
         return !!(1 + value.toString().toLowerCase().indexOf(pattern.trim().toLowerCase()));
     }
-    catch (err) {
+    catch (_a) {
         return false;
     }
 }
-exports.patternMatched = patternMatched;
 function createTmOptions(valueField, childrenField) {
     const options = {
         getIsGroup,
         getIgnored,
         getKey(option) {
             if (getIsGroup(option)) {
-                return (option.name ||
-                    option.key ||
-                    'key-required');
+                return (option.name
+                    || option.key
+                    || 'key-required');
             }
             // Required for non-custom label & value field
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             return option[valueField];
         },
         getChildren(option) {
@@ -38,7 +39,6 @@ function createTmOptions(valueField, childrenField) {
     };
     return options;
 }
-exports.createTmOptions = createTmOptions;
 function filterOptions(originalOpts, filter, pattern, childrenField) {
     if (!filter)
         return originalOpts;
@@ -66,7 +66,6 @@ function filterOptions(originalOpts, filter, pattern, childrenField) {
     }
     return traverse(originalOpts);
 }
-exports.filterOptions = filterOptions;
 function createValOptMap(options, valueField, childrenField) {
     const valOptMap = new Map();
     options.forEach((option) => {
@@ -82,4 +81,3 @@ function createValOptMap(options, valueField, childrenField) {
     });
     return valOptMap;
 }
-exports.createValOptMap = createValOptMap;

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

@@ -75,10 +75,12 @@ declare const selectLight: import("../../_mixins").Theme<"Select", {
         }, any>;
     }>;
     InternalSelectMenu: import("../../_mixins").Theme<"InternalSelectMenu", {
+        optionFontSizeTiny: string;
         optionFontSizeSmall: string;
         optionFontSizeMedium: string;
         optionFontSizeLarge: string;
         optionFontSizeHuge: string;
+        optionHeightTiny: string;
         optionHeightSmall: string;
         optionHeightMedium: string;
         optionHeightLarge: string;
@@ -99,10 +101,12 @@ declare const selectLight: import("../../_mixins").Theme<"Select", {
         actionTextColor: string;
         loadingColor: string;
         height: string;
+        paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
         paddingLarge: string;
         paddingHuge: string;
+        optionPaddingTiny: string;
         optionPaddingSmall: string;
         optionPaddingMedium: string;
         optionPaddingLarge: string;
@@ -115,11 +119,14 @@ declare const selectLight: import("../../_mixins").Theme<"Select", {
             borderRadius: string;
             color: string;
             colorHover: string;
-            railInsetHorizontal: string;
-            railInsetVertical: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
             railColor: string;
         }, any>;
         Empty: import("../../_mixins").Theme<"Empty", {
+            fontSizeTiny: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -127,6 +134,7 @@ declare const selectLight: import("../../_mixins").Theme<"Select", {
             textColor: string;
             iconColor: string;
             extraTextColor: string;
+            iconSizeTiny: string;
             iconSizeSmall: string;
             iconSizeMedium: string;
             iconSizeLarge: string;

package/lib/select/styles/light.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.self = void 0;
+exports.self = self;
 const styles_1 = require("../../_internal/selection/styles");
 const styles_2 = require("../../_internal/select-menu/styles");
 const common_1 = require("../../_styles/common");
@@ -11,7 +11,6 @@ function self(vars) {
         menuBoxShadow: boxShadow2
     };
 }
-exports.self = self;
 const selectLight = (0, _mixins_1.createTheme)({
     name: 'Select',
     common: common_1.commonLight,

package/lib/skeleton/src/Skeleton.js

@@ -41,8 +41,8 @@ exports.default = (0, vue_1.defineComponent)({
                 if (size !== undefined) {
                     sizeHeight = selfThemeVars[(0, _utils_1.createKey)('height', size)];
                 }
-                const mergedWidth = circle ? (_a = width !== null && width !== void 0 ? width : height) !== null && _a !== void 0 ? _a : sizeHeight : width;
-                const mergedHeight = (_b = (circle ? width !== null && width !== void 0 ? width : height : height)) !== null && _b !== void 0 ? _b : sizeHeight;
+                const mergedWidth = circle ? ((_a = width !== null && width !== void 0 ? width : height) !== null && _a !== void 0 ? _a : sizeHeight) : width;
+                const mergedHeight = (_b = (circle ? (width !== null && width !== void 0 ? width : height) : height)) !== null && _b !== void 0 ? _b : sizeHeight;
                 return {
                     display: text ? 'inline-block' : '',
                     verticalAlign: text ? '-0.125em' : '',
@@ -75,7 +75,7 @@ exports.default = (0, vue_1.defineComponent)({
             style
         }, $attrs));
         if (repeatProp > 1) {
-            return (0, vue_1.h)(vue_1.Fragment, null, (0, seemly_1.repeat)(repeatProp, null).map((_) => [child, '\n']));
+            return (0, vue_1.h)(vue_1.Fragment, null, (0, seemly_1.repeat)(repeatProp, null).map(_ => [child, '\n']));
         }
         return child;
     }

package/lib/skeleton/styles/dark.d.ts

@@ -1,2 +1,2 @@
-import { type SkeletonTheme } from './light';
+import type { SkeletonTheme } from './light';
 export declare const skeletonDark: SkeletonTheme;

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

@@ -1,6 +1,6 @@
 import type { ThemeCommonVars } from '../../_styles/common';
-import { type Theme } from '../../_mixins';
-declare const self: (vars: ThemeCommonVars) => {
+import type { Theme } from '../../_mixins';
+declare function self(vars: ThemeCommonVars): {
     color: string;
     colorEnd: string;
     borderRadius: string;

package/lib/skeleton/styles/light.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.skeletonLight = void 0;
 const common_1 = require("../../_styles/common");
-const self = (vars) => {
+function self(vars) {
     const { heightSmall, heightMedium, heightLarge, borderRadius } = vars;
     return {
         color: '#eee',
@@ -12,7 +12,7 @@ const self = (vars) => {
         heightMedium,
         heightLarge
     };
-};
+}
 exports.skeletonLight = {
     name: 'Skeleton',
     common: common_1.commonLight,

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

@@ -1,6 +1,6 @@
-import { type PropType, type CSSProperties } from 'vue';
+import { type CSSProperties, type PropType, type VNodeChild } from 'vue';
 import { type FollowerPlacement } from 'vueuc';
-import { type MaybeArray, type ExtractPublicPropTypes } from '../../_utils';
+import { type ExtractPublicPropTypes, type MaybeArray } from '../../_utils';
 export interface ClosestMark {
     value: number;
     distance: number;
@@ -8,14 +8,14 @@ export interface ClosestMark {
 }
 export declare const sliderProps: {
     readonly to: {
-        type: PropType<string | boolean | HTMLElement>;
+        type: PropType<HTMLElement | string | boolean>;
         default: undefined;
     };
     readonly defaultValue: {
         readonly type: PropType<number | number[]>;
         readonly default: 0;
     };
-    readonly marks: PropType<Record<string, string>>;
+    readonly marks: PropType<Record<string, string | (() => VNodeChild)>>;
     readonly disabled: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -148,14 +148,14 @@ export declare const sliderProps: {
 export type SliderProps = ExtractPublicPropTypes<typeof sliderProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly to: {
-        type: PropType<string | boolean | HTMLElement>;
+        type: PropType<HTMLElement | string | boolean>;
         default: undefined;
     };
     readonly defaultValue: {
         readonly type: PropType<number | number[]>;
         readonly default: 0;
     };
-    readonly marks: PropType<Record<string, string>>;
+    readonly marks: PropType<Record<string, string | (() => VNodeChild)>>;
     readonly disabled: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -296,7 +296,8 @@ declare const _default: import("vue").DefineComponent<{
     dotTransitionDisabled: import("vue").Ref<boolean>;
     markInfos: import("vue").ComputedRef<{
         active: boolean;
-        label: string;
+        label: string | (() => VNodeChild);
+        key: number;
         style: CSSProperties;
     }[]>;
     isShowTooltip: (index: number) => boolean;
@@ -363,14 +364,14 @@ declare const _default: import("vue").DefineComponent<{
     onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     readonly to: {
-        type: PropType<string | boolean | HTMLElement>;
+        type: PropType<HTMLElement | string | boolean>;
         default: undefined;
     };
     readonly defaultValue: {
         readonly type: PropType<number | number[]>;
         readonly default: 0;
     };
-    readonly marks: PropType<Record<string, string>>;
+    readonly marks: PropType<Record<string, string | (() => VNodeChild)>>;
     readonly disabled: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;

package/lib/slider/src/Slider.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sliderProps = void 0;
-/* eslint-disable @typescript-eslint/space-before-function-paren */
 const vue_1 = require("vue");
 const vueuc_1 = require("vueuc");
 const vooks_1 = require("vooks");
@@ -83,7 +82,7 @@ exports.default = (0, vue_1.defineComponent)({
         });
         const markValuesRef = (0, vue_1.computed)(() => {
             const { marks } = props;
-            return marks ? Object.keys(marks).map(parseFloat) : null;
+            return marks ? Object.keys(marks).map(Number.parseFloat) : null;
         });
         // status ref
         const activeIndexRef = (0, vue_1.ref)(-1);
@@ -127,13 +126,14 @@ exports.default = (0, vue_1.defineComponent)({
                 const isActive = handleCountExceeds2
                     ? () => false
                     : (num) => range
-                        ? num >= orderValues[0] &&
-                            num <= orderValues[orderValues.length - 1]
+                        ? num >= orderValues[0]
+                            && num <= orderValues[orderValues.length - 1]
                         : num <= orderValues[0];
                 for (const key of Object.keys(marks)) {
                     const num = Number(key);
                     mergedMarks.push({
                         active: isActive(num),
+                        key: num,
                         label: marks[key],
                         style: {
                             [styleDirection]: `${valueToPercentage(num)}%`
@@ -152,9 +152,9 @@ exports.default = (0, vue_1.defineComponent)({
             };
         }
         function isShowTooltip(index) {
-            return (props.showTooltip ||
-                hoverIndexRef.value === index ||
-                (activeIndexRef.value === index && draggingRef.value));
+            return (props.showTooltip
+                || hoverIndexRef.value === index
+                || (activeIndexRef.value === index && draggingRef.value));
         }
         function shouldKeepTooltipTransition(index) {
             if (!draggingRef.value)
@@ -275,8 +275,8 @@ exports.default = (0, vue_1.defineComponent)({
                 const distance = Math.abs(diff);
                 if (
                 // find marks in the same direction
-                (buffer === undefined || diff * buffer > 0) &&
-                    (closestMark === null || distance < closestMark.distance)) {
+                (buffer === undefined || diff * buffer > 0)
+                    && (closestMark === null || distance < closestMark.distance)) {
                     closestMark = {
                         index,
                         distance,
@@ -353,7 +353,7 @@ exports.default = (0, vue_1.defineComponent)({
                 return;
             const values = arrifiedValueRef.value.slice();
             const activeIndex = props.range
-                ? (_b = (_a = getClosestMark(pointValue, values)) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : -1
+                ? ((_b = (_a = getClosestMark(pointValue, values)) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : -1)
                 : 0;
             if (activeIndex !== -1) {
                 // avoid triggering scrolling on touch
@@ -538,9 +538,9 @@ exports.default = (0, vue_1.defineComponent)({
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-slider-rail__fill`, style: this.fillStyle }),
                 this.marks ? ((0, vue_1.h)("div", { class: [
                         `${mergedClsPrefix}-slider-dots`,
-                        this.dotTransitionDisabled &&
-                            `${mergedClsPrefix}-slider-dots--transition-disabled`
-                    ] }, this.markInfos.map((mark) => ((0, vue_1.h)("div", { key: mark.label, class: [
+                        this.dotTransitionDisabled
+                            && `${mergedClsPrefix}-slider-dots--transition-disabled`
+                    ] }, this.markInfos.map(mark => ((0, vue_1.h)("div", { key: mark.key, class: [
                         `${mergedClsPrefix}-slider-dot`,
                         {
                             [`${mergedClsPrefix}-slider-dot--active`]: mark.active
@@ -563,8 +563,8 @@ exports.default = (0, vue_1.defineComponent)({
                                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-slider-handle` })
                                 ])))
                             }),
-                            this.tooltip && ((0, vue_1.h)(vueuc_1.VFollower, { ref: this.setFollowerRefs(index), show: showTooltip, to: this.adjustedTo, enabled: (this.showTooltip && !this.range) ||
-                                    this.followerEnabledIndexSet.has(index), teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, placement: this.mergedPlacement, containerClass: this.namespace }, {
+                            this.tooltip && ((0, vue_1.h)(vueuc_1.VFollower, { ref: this.setFollowerRefs(index), show: showTooltip, to: this.adjustedTo, enabled: (this.showTooltip && !this.range)
+                                    || this.followerEnabledIndexSet.has(index), teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, placement: this.mergedPlacement, containerClass: this.namespace }, {
                                 default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, css: this.shouldKeepTooltipTransition(index), onEnter: () => {
                                         this.followerEnabledIndexSet.add(index);
                                     }, onAfterLeave: () => {
@@ -590,6 +590,6 @@ exports.default = (0, vue_1.defineComponent)({
                         ]
                     }));
                 })),
-                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)));
+                this.marks ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-slider-marks` }, this.markInfos.map(mark => ((0, vue_1.h)("div", { key: mark.key, class: `${mergedClsPrefix}-slider-mark`, style: mark.style }, typeof mark.label === 'function' ? mark.label() : mark.label))))) : null)));
     }
 });

package/lib/slider/src/styles/index.cssr.js

@@ -54,6 +54,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('slider', `
  `)]), (0, cssr_1.cB)('slider-dots', [(0, cssr_1.cB)('slider-dot', `
  transform: translateX(-50%) translateY(0);
  `)])])]), (0, cssr_1.cM)('vertical', `
+ box-sizing: content-box;
  padding: 0 calc((var(--n-handle-size) - var(--n-rail-height)) / 2);
  width: var(--n-rail-width-vertical);
  height: 100%;

package/lib/slider/src/utils.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRefs = exports.isTouchEvent = void 0;
+exports.isTouchEvent = isTouchEvent;
+exports.useRefs = useRefs;
 const vue_1 = require("vue");
 function isTouchEvent(e) {
     return window.TouchEvent && e instanceof window.TouchEvent;
 }
-exports.isTouchEvent = isTouchEvent;
 function useRefs() {
     const refs = new Map();
     const setRefs = (index) => (el) => {
@@ -16,4 +16,3 @@ function useRefs() {
     });
     return [refs, setRefs];
 }
-exports.useRefs = useRefs;

package/lib/slider/styles/dark.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const _common_1 = __importDefault(require("./_common"));
 const common_1 = require("../../_styles/common");
+const _common_1 = __importDefault(require("./_common"));
 const sliderDark = {
     name: 'Slider',
     common: common_1.commonDark,

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

@@ -1,6 +1,6 @@
 import type { ThemeCommonVars } from '../../_styles/common';
-import { type Theme } from '../../_mixins';
-declare const self: (vars: ThemeCommonVars) => {
+import type { Theme } from '../../_mixins';
+declare function self(vars: ThemeCommonVars): {
     fontSize: string;
     markFontSize: string;
     railColor: string;