naive-ui 2.30.3 → 2.30.6

package/es/popconfirm/src/Popconfirm.d.ts

@@ -77,6 +77,7 @@ declare const popconfirmProps: {
     onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
+    internalDeactivateImmediately: BooleanConstructor;
     internalSyncTargetWithParent: BooleanConstructor;
     internalInheritedEventHandlers: {
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
@@ -845,6 +846,7 @@ declare const _default: import("vue").DefineComponent<{
     onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
+    internalDeactivateImmediately: BooleanConstructor;
     internalSyncTargetWithParent: BooleanConstructor;
     internalInheritedEventHandlers: {
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
@@ -1963,6 +1965,7 @@ declare const _default: import("vue").DefineComponent<{
     onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
+    internalDeactivateImmediately: BooleanConstructor;
     internalSyncTargetWithParent: BooleanConstructor;
     internalInheritedEventHandlers: {
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
@@ -2671,6 +2674,7 @@ declare const _default: import("vue").DefineComponent<{
     arrowPointToCenter: boolean;
     displayDirective: "show" | "if";
     keepAliveOnHover: boolean;
+    internalDeactivateImmediately: boolean;
     animated: boolean;
     internalTrapFocus: boolean;
     defaultShow: boolean;

package/es/popover/src/Popover.d.ts

@@ -92,6 +92,7 @@ export declare const popoverBaseProps: {
     onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    internalDeactivateImmediately: BooleanConstructor;
     internalSyncTargetWithParent: BooleanConstructor;
     internalInheritedEventHandlers: {
         type: PropType<TriggerEventHandlers[]>;
@@ -177,6 +178,7 @@ declare const popoverProps: {
     onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    internalDeactivateImmediately: BooleanConstructor;
     internalSyncTargetWithParent: BooleanConstructor;
     internalInheritedEventHandlers: {
         type: PropType<TriggerEventHandlers[]>;
@@ -306,6 +308,7 @@ declare const _default: import("vue").DefineComponent<{
     onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    internalDeactivateImmediately: BooleanConstructor;
     internalSyncTargetWithParent: BooleanConstructor;
     internalInheritedEventHandlers: {
         type: PropType<TriggerEventHandlers[]>;
@@ -448,6 +451,7 @@ declare const _default: import("vue").DefineComponent<{
     onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    internalDeactivateImmediately: BooleanConstructor;
     internalSyncTargetWithParent: BooleanConstructor;
     internalInheritedEventHandlers: {
         type: PropType<TriggerEventHandlers[]>;
@@ -525,6 +529,7 @@ declare const _default: import("vue").DefineComponent<{
     arrowPointToCenter: boolean;
     displayDirective: "show" | "if";
     keepAliveOnHover: boolean;
+    internalDeactivateImmediately: boolean;
     animated: boolean;
     internalTrapFocus: boolean;
     defaultShow: boolean;

package/es/popover/src/Popover.js

@@ -97,6 +97,7 @@ export const popoverBaseProps = {
     'onUpdate:show': [Function, Array],
     onUpdateShow: [Function, Array],
     // internal
+    internalDeactivateImmediately: Boolean,
     internalSyncTargetWithParent: Boolean,
     internalInheritedEventHandlers: {
         type: Array,

package/es/popover/src/PopoverBody.d.ts

@@ -25,6 +25,7 @@ export declare const popoverBodyProps: {
     scrollable: BooleanConstructor;
     contentStyle: PropType<string | CSSProperties>;
     headerStyle: PropType<string | CSSProperties>;
+    internalDeactivateImmediately: BooleanConstructor;
     animated: BooleanConstructor;
     onClickoutside: PropType<(e: MouseEvent) => void>;
     internalTrapFocus: BooleanConstructor;
@@ -102,6 +103,7 @@ declare const _default: import("vue").DefineComponent<{
     scrollable: BooleanConstructor;
     contentStyle: PropType<string | CSSProperties>;
     headerStyle: PropType<string | CSSProperties>;
+    internalDeactivateImmediately: BooleanConstructor;
     animated: BooleanConstructor;
     onClickoutside: PropType<(e: MouseEvent) => void>;
     internalTrapFocus: BooleanConstructor;
@@ -184,6 +186,7 @@ declare const _default: import("vue").DefineComponent<{
     scrollable: BooleanConstructor;
     contentStyle: PropType<string | CSSProperties>;
     headerStyle: PropType<string | CSSProperties>;
+    internalDeactivateImmediately: BooleanConstructor;
     animated: BooleanConstructor;
     onClickoutside: PropType<(e: MouseEvent) => void>;
     internalTrapFocus: BooleanConstructor;
@@ -241,6 +244,7 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     arrowPointToCenter: boolean;
     keepAliveOnHover: boolean;
+    internalDeactivateImmediately: boolean;
     animated: boolean;
     internalTrapFocus: boolean;
 }>;

package/es/popover/src/PopoverBody.js

@@ -11,7 +11,7 @@ import { popoverBodyInjectionKey } from './interface';
 import style from './styles/index.cssr';
 export const popoverBodyProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, show: Boolean, trigger: String, showArrow: Boolean, delay: Number, duration: Number, raw: Boolean, arrowPointToCenter: Boolean, arrowStyle: [String, Object], displayDirective: String, x: Number, y: Number, flip: Boolean, overlap: Boolean, placement: String, width: [Number, String], keepAliveOnHover: Boolean, scrollable: Boolean, contentStyle: [Object, String], headerStyle: [Object, String], 
     // private
-    animated: Boolean, onClickoutside: Function, internalTrapFocus: Boolean, 
+    internalDeactivateImmediately: Boolean, animated: Boolean, onClickoutside: Function, internalTrapFocus: Boolean, 
     // deprecated
     minWidth: Number, maxWidth: Number });
 export const renderArrow = ({ arrowStyle, clsPrefix }) => {
@@ -32,7 +32,7 @@ export default defineComponent({
         const displayedRef = ref(false);
         watchEffect(() => {
             const { show } = props;
-            if (show && !isJsdom()) {
+            if (show && !isJsdom() && !props.internalDeactivateImmediately) {
                 displayedRef.value = true;
             }
         });
@@ -68,14 +68,22 @@ export default defineComponent({
             return directives;
         });
         const styleRef = computed(() => {
-            return [
-                {
-                    width: props.width === 'trigger' ? '' : formatLength(props.width)
-                },
-                props.maxWidth ? { maxWidth: formatLength(props.maxWidth) } : {},
-                props.minWidth ? { minWidth: formatLength(props.minWidth) } : {},
-                inlineThemeDisabled ? undefined : cssVarsRef.value
-            ];
+            const width = props.width === 'trigger' ? undefined : formatLength(props.width);
+            const style = [];
+            if (width) {
+                style.push({ width });
+            }
+            const { maxWidth, minWidth } = props;
+            if (maxWidth) {
+                style.push({ maxWidth: formatLength(maxWidth) });
+            }
+            if (minWidth) {
+                style.push({ maxWidth: formatLength(minWidth) });
+            }
+            if (!inlineThemeDisabled) {
+                style.push(cssVarsRef.value);
+            }
+            return style;
         });
         const cssVarsRef = computed(() => {
             const { common: { cubicBezierEaseInOut, cubicBezierEaseIn, cubicBezierEaseOut }, self: { space, spaceArrow, padding, fontSize, textColor, dividerColor, color, boxShadow, borderRadius, arrowHeight, arrowOffset, arrowOffsetVertical } } = themeRef.value;

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

@@ -22,6 +22,12 @@ declare const popselectProps: {
     onMouseenter: PropType<(e: MouseEvent) => void>;
     onMouseleave: PropType<(e: MouseEvent) => void>;
     renderLabel: PropType<import("../../_internal/select-menu/src/interface").RenderLabel>;
+    internalShowCheckmark: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    nodeProps: PropType<import("../../_internal/select-menu/src/interface").NodeProps>;
+    virtualScroll: BooleanConstructor;
     onChange: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
     placement: {
         default: string;
@@ -75,6 +81,7 @@ declare const popselectProps: {
         default: boolean;
     };
     headerStyle: PropType<string | import("vue").CSSProperties>;
+    internalDeactivateImmediately: BooleanConstructor;
     animated: {
         type: BooleanConstructor;
         default: boolean;
@@ -333,6 +340,12 @@ declare const _default: import("vue").DefineComponent<{
     onMouseenter: PropType<(e: MouseEvent) => void>;
     onMouseleave: PropType<(e: MouseEvent) => void>;
     renderLabel: PropType<import("../../_internal/select-menu/src/interface").RenderLabel>;
+    internalShowCheckmark: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    nodeProps: PropType<import("../../_internal/select-menu/src/interface").NodeProps>;
+    virtualScroll: BooleanConstructor;
     onChange: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
     placement: {
         default: string;
@@ -386,6 +399,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     headerStyle: PropType<string | import("vue").CSSProperties>;
+    internalDeactivateImmediately: BooleanConstructor;
     animated: {
         type: BooleanConstructor;
         default: boolean;
@@ -855,6 +869,12 @@ declare const _default: import("vue").DefineComponent<{
     onMouseenter: PropType<(e: MouseEvent) => void>;
     onMouseleave: PropType<(e: MouseEvent) => void>;
     renderLabel: PropType<import("../../_internal/select-menu/src/interface").RenderLabel>;
+    internalShowCheckmark: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    nodeProps: PropType<import("../../_internal/select-menu/src/interface").NodeProps>;
+    virtualScroll: BooleanConstructor;
     onChange: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
     placement: {
         default: string;
@@ -908,6 +928,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     headerStyle: PropType<string | import("vue").CSSProperties>;
+    internalDeactivateImmediately: BooleanConstructor;
     animated: {
         type: BooleanConstructor;
         default: boolean;
@@ -1158,10 +1179,12 @@ declare const _default: import("vue").DefineComponent<{
     overlap: boolean;
     scrollable: boolean;
     trigger: PopoverTrigger;
+    virtualScroll: boolean;
     delay: number;
     arrowPointToCenter: boolean;
     displayDirective: "show" | "if";
     keepAliveOnHover: boolean;
+    internalDeactivateImmediately: boolean;
     animated: boolean;
     internalTrapFocus: boolean;
     defaultShow: boolean;
@@ -1169,5 +1192,6 @@ declare const _default: import("vue").DefineComponent<{
     internalInheritedEventHandlers: import("../../popover/src/Popover").TriggerEventHandlers[];
     internalExtraClass: string[];
     cancelable: boolean;
+    internalShowCheckmark: boolean;
 }>;
 export default _default;

package/es/popselect/src/Popselect.js

@@ -1,8 +1,8 @@
-import { h, ref, provide, defineComponent, mergeProps } from 'vue';
+import { h, ref, provide, defineComponent } from 'vue';
 import { popoverBaseProps } from '../../popover/src/Popover';
 import { NPopover } from '../../popover';
 import NPopselectPanel, { panelPropKeys, panelProps } from './PopselectPanel';
-import { omit, keep, createRefSetter } from '../../_utils';
+import { omit, keep, createRefSetter, mergeEventHandlers } from '../../_utils';
 import { useTheme } from '../../_mixins';
 import { popselectLight } from '../styles';
 import { popselectInjectionKey } from './interface';
@@ -13,6 +13,7 @@ const popselectProps = Object.assign(Object.assign(Object.assign(Object.assign({
 export default defineComponent({
     name: 'Popselect',
     props: popselectProps,
+    inheritAttrs: false,
     __popover__: true,
     setup(props) {
         const themeRef = useTheme('Popselect', '-popselect', undefined, popselectLight, props);
@@ -47,16 +48,20 @@ export default defineComponent({
             },
             ref: 'popoverInstRef',
             internalRenderBody: (className, ref, style, onMouseenter, onMouseleave) => {
-                return (h(NPopselectPanel, Object.assign({}, mergeProps(this.$attrs, {
-                    class: className,
-                    style
-                }), keep(this.$props, panelPropKeys), { ref: createRefSetter(ref), onMouseenter: onMouseenter, onMouseleave: onMouseleave }), {
+                const { $attrs } = this;
+                return (h(NPopselectPanel, Object.assign({}, $attrs, { class: [$attrs.class, className], style: [$attrs.style, style] }, keep(this.$props, panelPropKeys), { ref: createRefSetter(ref), onMouseenter: mergeEventHandlers([
+                        onMouseenter,
+                        $attrs.onMouseenter
+                    ]), onMouseleave: mergeEventHandlers([
+                        onMouseleave,
+                        $attrs.onMouseleave
+                    ]) }), {
                     action: () => { var _a, _b; return (_b = (_a = this.$slots).action) === null || _b === void 0 ? void 0 : _b.call(_a); },
                     empty: () => { var _a, _b; return (_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a); }
                 }));
             }
         };
-        return (h(NPopover, Object.assign({}, omit(this.$props, panelPropKeys), popoverProps), {
+        return (h(NPopover, Object.assign({}, omit(this.$props, panelPropKeys), popoverProps, { internalDeactivateImmediately: true }), {
             trigger: () => { var _a, _b; return (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a); }
         }));
     }

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

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import { TreeNode } from 'treemate';
-import { RenderLabel } from '../../_internal/select-menu/src/interface';
+import { NodeProps, RenderLabel } from '../../_internal/select-menu/src/interface';
 import { OnUpdateValue, Value, SelectMixedOption, SelectBaseOption, SelectGroupOption, SelectIgnoredOption } from '../../select/src/interface';
 import type { MaybeArray } from '../../_utils';
 import type { PopselectSize } from './interface';
@@ -25,9 +25,15 @@ export declare const panelProps: {
     readonly onMouseenter: PropType<(e: MouseEvent) => void>;
     readonly onMouseleave: PropType<(e: MouseEvent) => void>;
     readonly renderLabel: PropType<RenderLabel>;
+    readonly internalShowCheckmark: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly nodeProps: PropType<NodeProps>;
+    readonly virtualScroll: BooleanConstructor;
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
 };
-export declare const panelPropKeys: ("value" | "size" | "multiple" | "onChange" | "onMouseenter" | "onMouseleave" | "options" | "scrollable" | "renderLabel" | "onUpdate:value" | "onUpdateValue" | "cancelable")[];
+export declare const panelPropKeys: ("value" | "size" | "multiple" | "onChange" | "onMouseenter" | "onMouseleave" | "options" | "scrollable" | "nodeProps" | "renderLabel" | "virtualScroll" | "cancelable" | "onUpdate:value" | "onUpdateValue" | "internalShowCheckmark")[];
 declare const _default: import("vue").DefineComponent<{
     readonly multiple: BooleanConstructor;
     readonly value: {
@@ -49,6 +55,12 @@ declare const _default: import("vue").DefineComponent<{
     readonly onMouseenter: PropType<(e: MouseEvent) => void>;
     readonly onMouseleave: PropType<(e: MouseEvent) => void>;
     readonly renderLabel: PropType<RenderLabel>;
+    readonly internalShowCheckmark: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly nodeProps: PropType<NodeProps>;
+    readonly virtualScroll: BooleanConstructor;
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
 }, {
     mergedTheme: import("vue").Ref<{
@@ -288,6 +300,12 @@ declare const _default: import("vue").DefineComponent<{
     readonly onMouseenter: PropType<(e: MouseEvent) => void>;
     readonly onMouseleave: PropType<(e: MouseEvent) => void>;
     readonly renderLabel: PropType<RenderLabel>;
+    readonly internalShowCheckmark: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly nodeProps: PropType<NodeProps>;
+    readonly virtualScroll: BooleanConstructor;
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
 }>>, {
     readonly value: Value | null;
@@ -295,6 +313,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly multiple: boolean;
     readonly options: SelectMixedOption[];
     readonly scrollable: boolean;
+    readonly virtualScroll: boolean;
     readonly cancelable: boolean;
+    readonly internalShowCheckmark: boolean;
 }>;
 export default _default;

package/es/popselect/src/PopselectPanel.js

@@ -30,6 +30,12 @@ export const panelProps = {
     onMouseenter: Function,
     onMouseleave: Function,
     renderLabel: Function,
+    internalShowCheckmark: {
+        type: Boolean,
+        default: undefined
+    },
+    nodeProps: Function,
+    virtualScroll: Boolean,
     // deprecated
     onChange: [Function, Array]
 };
@@ -109,6 +115,11 @@ export default defineComponent({
                     if (tmNode) {
                         doUpdateValue(value, tmNode.rawNode);
                     }
+                    const { 'onUpdate:show': _onUpdateShow, onUpdateShow } = NPopselect.props;
+                    if (_onUpdateShow)
+                        call(_onUpdateShow, false);
+                    if (onUpdateShow)
+                        call(onUpdateShow, false);
                     NPopselect.setShow(false);
                 }
             }
@@ -144,7 +155,7 @@ export default defineComponent({
     render() {
         var _a;
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-        return (h(NInternalSelectMenu, { clsPrefix: this.mergedClsPrefix, focusable: true, class: [`${this.mergedClsPrefix}-popselect-menu`, this.themeClass], style: this.cssVars, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides.InternalSelectMenu, multiple: this.multiple, treeMate: this.treeMate, size: this.size, value: this.value, virtualScroll: false, scrollable: this.scrollable, renderLabel: this.renderLabel, onToggle: this.handleToggle, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseenter, onMousedown: this.handleMenuMousedown }, {
+        return (h(NInternalSelectMenu, { clsPrefix: this.mergedClsPrefix, focusable: true, nodeProps: this.nodeProps, class: [`${this.mergedClsPrefix}-popselect-menu`, this.themeClass], style: this.cssVars, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides.InternalSelectMenu, multiple: this.multiple, treeMate: this.treeMate, size: this.size, value: this.value, virtualScroll: this.virtualScroll, scrollable: this.scrollable, renderLabel: this.renderLabel, onToggle: this.handleToggle, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseenter, onMousedown: this.handleMenuMousedown, showCheckmark: this.internalShowCheckmark }, {
             action: () => { var _a, _b; return ((_b = (_a = this.$slots).action) === null || _b === void 0 ? void 0 : _b.call(_a)) || []; },
             empty: () => { var _a, _b; return ((_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a)) || []; }
         }));

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

@@ -1819,6 +1819,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly displayDirective: "show" | "if";
     readonly filterable: boolean;
     readonly clearable: boolean;
+    readonly internalShowCheckmark: boolean;
     readonly clearFilterAfterSelect: boolean;
     readonly defaultValue: Value | null;
     readonly remote: boolean;
@@ -1826,6 +1827,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly fallbackOption: false | SelectFallbackOption | undefined;
     readonly consistentMenuWidth: boolean;
     readonly childrenField: string;
-    readonly internalShowCheckmark: boolean;
 }>;
 export default _default;

package/es/select/src/Select.js

@@ -5,7 +5,7 @@ import { VBinder, VFollower, VTarget } from 'vueuc';
 import { useIsMounted, useMergedState, useCompitable } from 'vooks';
 import { clickoutside } from 'vdirs';
 import { useTheme, useConfig, useLocale, useFormItem, useThemeClass } from '../../_mixins';
-import { call, useAdjustedTo, warnOnce } from '../../_utils';
+import { call, markEventEffectPerformed, useAdjustedTo, warnOnce } from '../../_utils';
 import { NInternalSelectMenu, NInternalSelection } from '../../_internal';
 import { selectLight } from '../styles';
 import { createValOptMap, filterOptions, createTmOptions, patternMatched } from './utils';
@@ -562,7 +562,10 @@ export default defineComponent({
                     }
                     break;
                 case 'Escape':
-                    closeMenu();
+                    if (mergedShowRef.value) {
+                        markEventEffectPerformed(e);
+                        closeMenu();
+                    }
                     (_e = triggerRef.value) === null || _e === void 0 ? void 0 : _e.focus();
                     break;
             }

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

@@ -282,7 +282,7 @@ declare const _default: import("vue").DefineComponent<{
         style: CSSProperties;
     }[]>;
     isShowTooltip: (index: number) => boolean;
-    isSkipCSSDetection: (index: number) => boolean;
+    shouldKeepTooltipTransition: (index: number) => boolean;
     handleRailRef: import("vue").Ref<HTMLElement | null>;
     setHandleRefs: (key: number) => (el: any) => void;
     setFollowerRefs: (key: number) => (el: any) => void;

package/es/slider/src/Slider.js

@@ -3,7 +3,7 @@ import { VBinder, VTarget, VFollower } from 'vueuc';
 import { useIsMounted, useMergedState } from 'vooks';
 import { on, off } from 'evtd';
 import { useTheme, useFormItem, useConfig, useThemeClass } from '../../_mixins';
-import { call, useAdjustedTo } from '../../_utils';
+import { call, useAdjustedTo, resolveSlot } from '../../_utils';
 import { sliderLight } from '../styles';
 import { isTouchEvent, useRefs } from './utils';
 import style from './styles/index.cssr';
@@ -146,7 +146,9 @@ export default defineComponent({
                 hoverIndexRef.value === index ||
                 (activeIndexRef.value === index && draggingRef.value));
         }
-        function isSkipCSSDetection(index) {
+        function shouldKeepTooltipTransition(index) {
+            if (!draggingRef.value)
+                return true;
             return !(activeIndexRef.value === index && previousIndexRef.value === index);
         }
         function focusActiveHandle(index) {
@@ -477,7 +479,7 @@ export default defineComponent({
             dotTransitionDisabled: dotTransitionDisabledRef,
             markInfos: markInfosRef,
             isShowTooltip,
-            isSkipCSSDetection,
+            shouldKeepTooltipTransition,
             handleRailRef,
             setHandleRefs,
             setFollowerRefs,
@@ -532,11 +534,17 @@ export default defineComponent({
                     return (h(VBinder, null, {
                         default: () => [
                             h(VTarget, null, {
-                                default: () => (h("div", { ref: this.setHandleRefs(index), class: `${mergedClsPrefix}-slider-handle`, tabindex: this.mergedDisabled ? -1 : 0, style: this.getHandleStyle(value, index), onFocus: () => this.handleHandleFocus(index), onBlur: () => this.handleHandleBlur(index), onMouseenter: () => this.handleHandleMouseEnter(index), onMouseleave: () => this.handleHandleMouseLeave(index) }))
+                                default: () => (h("div", { ref: this.setHandleRefs(index), class: `${mergedClsPrefix}-slider-handle-wrapper`, tabindex: this.mergedDisabled ? -1 : 0, style: this.getHandleStyle(value, index), onFocus: () => this.handleHandleFocus(index), onBlur: () => this.handleHandleBlur(index), onMouseenter: () => this.handleHandleMouseEnter(index), onMouseleave: () => this.handleHandleMouseLeave(index) }, resolveSlot(this.$slots.thumb, () => [
+                                    h("div", { class: `${mergedClsPrefix}-slider-handle` })
+                                ])))
                             }),
                             this.tooltip && (h(VFollower, { ref: this.setFollowerRefs(index), show: showTooltip, to: this.adjustedTo, enabled: (this.showTooltip && !this.range) ||
                                     this.followerEnabledIndexSet.has(index), teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, placement: this.mergedPlacement, containerClass: this.namespace }, {
-                                default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, css: this.isSkipCSSDetection(index), onEnter: () => this.followerEnabledIndexSet.add(index), onAfterLeave: () => this.followerEnabledIndexSet.delete(index) }, {
+                                default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, css: this.shouldKeepTooltipTransition(index), onEnter: () => {
+                                        this.followerEnabledIndexSet.add(index);
+                                    }, onAfterLeave: () => {
+                                        this.followerEnabledIndexSet.delete(index);
+                                    } }, {
                                     default: () => {
                                         var _a;
                                         if (showTooltip) {

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

@@ -36,11 +36,11 @@ export default c([cB('slider', `
  width: 100%;
  cursor: pointer;
  user-select: none;
- `, [cM('reverse', [cB('slider-handles', [cB('slider-handle', `
+ `, [cM('reverse', [cB('slider-handles', [cB('slider-handle-wrapper', `
  transform: translate(50%, -50%);
  `)]), cB('slider-dots', [cB('slider-dot', `
  transform: translateX(50%, -50%);
- `)]), cM('vertical', [cB('slider-handles', [cB('slider-handle', `
+ `)]), cM('vertical', [cB('slider-handles', [cB('slider-handle-wrapper', `
  transform: translate(-50%, -50%);
  `)]), cB('slider-marks', [cB('slider-mark', `
  transform: translateY(calc(-50% + var(--n-dot-height) / 2));
@@ -55,7 +55,7 @@ export default c([cB('slider', `
  right: 0;
  bottom: calc(var(--n-handle-size) / 2);
  left: 0;
- `, [cB('slider-handle', `
+ `, [cB('slider-handle-wrapper', `
  top: unset;
  left: 50%;
  transform: translate(-50%, 50%);
@@ -109,10 +109,11 @@ export default c([cB('slider', `
  top: 18px;
  left: calc(var(--n-handle-size) / 2);
  right: calc(var(--n-handle-size) / 2);
- `, [cB('slider-mark', {
-  position: 'absolute',
-  transform: 'translateX(-50%)'
-})]), cB('slider-rail', `
+ `, [cB('slider-mark', `
+ position: absolute;
+ transform: translateX(-50%);
+ white-space: nowrap;
+ `)]), cB('slider-rail', `
  width: 100%;
  position: relative;
  height: var(--n-rail-height);
@@ -132,33 +133,33 @@ export default c([cB('slider', `
  right: calc(var(--n-handle-size) / 2);
  bottom: 0;
  left: calc(var(--n-handle-size) / 2);
- `, [cB('slider-handle', `
+ `, [cB('slider-handle-wrapper', `
  outline: none;
- height: var(--n-handle-size);
- width: var(--n-handle-size);
- border-radius: 50%;
- transition: box-shadow .2s var(--n-bezier), background-color .3s var(--n-bezier);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
- overflow: hidden;
  cursor: pointer;
+ display: flex;
+ `, [cB('slider-handle', `
+ height: var(--n-handle-size);
+ width: var(--n-handle-size);
+ border-radius: 50%;
+ overflow: hidden;
+ transition: box-shadow .2s var(--n-bezier), background-color .3s var(--n-bezier);
  background-color: var(--n-handle-color);
  box-shadow: var(--n-handle-box-shadow);
- `, [c('&:hover', {
-  boxShadow: 'var(--n-handle-box-shadow-hover)'
-}), c('&:hover:focus', {
-  boxShadow: 'var(--n-handle-box-shadow-active)'
-}), c('&:focus', {
-  boxShadow: 'var(--n-handle-box-shadow-focus)'
-})])]), cB('slider-dots', `
+ `, [c('&:hover', `
+ box-shadow: var(--n-handle-box-shadow-hover);
+ `)]), c('&:focus', [cB('slider-handle', `
+ box-shadow: var(--n-handle-box-shadow-focus);
+ `, [c('&:hover', `
+ box-shadow: var(--n-handle-box-shadow-active);
+ `)])])])]), cB('slider-dots', `
  position: absolute;
  top: 50%;
  left: calc(var(--n-handle-size) / 2);
  right: calc(var(--n-handle-size) / 2);
- `, [cM('transition-disabled', [cB('slider-dot', {
-  transition: 'none'
-})]), cB('slider-dot', `
+ `, [cM('transition-disabled', [cB('slider-dot', 'transition: none;')]), cB('slider-dot', `
  transition:
  border-color .3s var(--n-bezier),
  box-shadow .3s var(--n-bezier),
@@ -172,9 +173,7 @@ export default c([cB('slider', `
  box-sizing: border-box;
  border: var(--n-dot-border);
  background-color: var(--n-dot-color);
- `, [cM('active', {
-  border: 'var(--n-dot-border-active)'
-})])])]), cB('slider-handle-indicator', `
+ `, [cM('active', 'border: var(--n-dot-border-active);')])])]), cB('slider-handle-indicator', `
  font-size: var(--n-font-size);
  padding: 6px 10px;
  border-radius: var(--n-indicator-border-radius);
@@ -196,8 +195,4 @@ export default c([cB('slider', `
  margin-top: 12px;
  `), cM('left', `
  margin-right: 12px;
- `), fadeInScaleUpTransition()]), insideModal(cB('slider', [cB('slider-dot', {
-  backgroundColor: 'var(--n-dot-color-modal)'
-})])), insidePopover(cB('slider', [cB('slider-dot', {
-  backgroundColor: 'var(--n-dot-color-popover)'
-})]))]);
+ `), fadeInScaleUpTransition()]), insideModal(cB('slider', [cB('slider-dot', 'background-color: var(--n-dot-color-modal);')])), insidePopover(cB('slider', [cB('slider-dot', 'background-color: var(--n-dot-color-popover);')]))]);