naive-ui 2.30.3 → 2.30.6

package/lib/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/lib/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/lib/popover/src/Popover.js

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

package/lib/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/lib/popover/src/PopoverBody.js

@@ -17,7 +17,7 @@ const interface_3 = require("./interface");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.popoverBodyProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: _utils_1.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 });
 const renderArrow = ({ arrowStyle, clsPrefix }) => {
@@ -39,7 +39,7 @@ exports.default = (0, vue_1.defineComponent)({
         const displayedRef = (0, vue_1.ref)(false);
         (0, vue_1.watchEffect)(() => {
             const { show } = props;
-            if (show && !(0, _utils_1.isJsdom)()) {
+            if (show && !(0, _utils_1.isJsdom)() && !props.internalDeactivateImmediately) {
                 displayedRef.value = true;
             }
         });
@@ -75,14 +75,22 @@ exports.default = (0, vue_1.defineComponent)({
             return directives;
         });
         const styleRef = (0, vue_1.computed)(() => {
-            return [
-                {
-                    width: props.width === 'trigger' ? '' : (0, _utils_1.formatLength)(props.width)
-                },
-                props.maxWidth ? { maxWidth: (0, _utils_1.formatLength)(props.maxWidth) } : {},
-                props.minWidth ? { minWidth: (0, _utils_1.formatLength)(props.minWidth) } : {},
-                inlineThemeDisabled ? undefined : cssVarsRef.value
-            ];
+            const width = props.width === 'trigger' ? undefined : (0, _utils_1.formatLength)(props.width);
+            const style = [];
+            if (width) {
+                style.push({ width });
+            }
+            const { maxWidth, minWidth } = props;
+            if (maxWidth) {
+                style.push({ maxWidth: (0, _utils_1.formatLength)(maxWidth) });
+            }
+            if (minWidth) {
+                style.push({ maxWidth: (0, _utils_1.formatLength)(minWidth) });
+            }
+            if (!inlineThemeDisabled) {
+                style.push(cssVarsRef.value);
+            }
+            return style;
         });
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { common: { cubicBezierEaseInOut, cubicBezierEaseIn, cubicBezierEaseOut }, self: { space, spaceArrow, padding, fontSize, textColor, dividerColor, color, boxShadow, borderRadius, arrowHeight, arrowOffset, arrowOffsetVertical } } = themeRef.value;

package/lib/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/lib/popselect/src/Popselect.js

@@ -38,6 +38,7 @@ const popselectProps = Object.assign(Object.assign(Object.assign(Object.assign({
 exports.default = (0, vue_1.defineComponent)({
     name: 'Popselect',
     props: popselectProps,
+    inheritAttrs: false,
     __popover__: true,
     setup(props) {
         const themeRef = (0, _mixins_1.useTheme)('Popselect', '-popselect', undefined, styles_1.popselectLight, props);
@@ -72,16 +73,20 @@ exports.default = (0, vue_1.defineComponent)({
             },
             ref: 'popoverInstRef',
             internalRenderBody: (className, ref, style, onMouseenter, onMouseleave) => {
-                return ((0, vue_1.h)(PopselectPanel_1.default, Object.assign({}, (0, vue_1.mergeProps)(this.$attrs, {
-                    class: className,
-                    style
-                }), (0, _utils_1.keep)(this.$props, PopselectPanel_1.panelPropKeys), { ref: (0, _utils_1.createRefSetter)(ref), onMouseenter: onMouseenter, onMouseleave: onMouseleave }), {
+                const { $attrs } = this;
+                return ((0, vue_1.h)(PopselectPanel_1.default, Object.assign({}, $attrs, { class: [$attrs.class, className], style: [$attrs.style, style] }, (0, _utils_1.keep)(this.$props, PopselectPanel_1.panelPropKeys), { ref: (0, _utils_1.createRefSetter)(ref), onMouseenter: (0, _utils_1.mergeEventHandlers)([
+                        onMouseenter,
+                        $attrs.onMouseenter
+                    ]), onMouseleave: (0, _utils_1.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 ((0, vue_1.h)(popover_1.NPopover, Object.assign({}, (0, _utils_1.omit)(this.$props, PopselectPanel_1.panelPropKeys), popoverProps), {
+        return ((0, vue_1.h)(popover_1.NPopover, Object.assign({}, (0, _utils_1.omit)(this.$props, PopselectPanel_1.panelPropKeys), popoverProps, { internalDeactivateImmediately: true }), {
             trigger: () => { var _a, _b; return (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a); }
         }));
     }

package/lib/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/lib/popselect/src/PopselectPanel.js

@@ -36,6 +36,12 @@ exports.panelProps = {
     onMouseenter: Function,
     onMouseleave: Function,
     renderLabel: Function,
+    internalShowCheckmark: {
+        type: Boolean,
+        default: undefined
+    },
+    nodeProps: Function,
+    virtualScroll: Boolean,
     // deprecated
     onChange: [Function, Array]
 };
@@ -115,6 +121,11 @@ exports.default = (0, vue_1.defineComponent)({
                     if (tmNode) {
                         doUpdateValue(value, tmNode.rawNode);
                     }
+                    const { 'onUpdate:show': _onUpdateShow, onUpdateShow } = NPopselect.props;
+                    if (_onUpdateShow)
+                        (0, _utils_1.call)(_onUpdateShow, false);
+                    if (onUpdateShow)
+                        (0, _utils_1.call)(onUpdateShow, false);
                     NPopselect.setShow(false);
                 }
             }
@@ -150,7 +161,7 @@ exports.default = (0, vue_1.defineComponent)({
     render() {
         var _a;
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-        return ((0, vue_1.h)(_internal_1.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 ((0, vue_1.h)(_internal_1.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/lib/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/lib/select/src/Select.js

@@ -567,7 +567,10 @@ exports.default = (0, vue_1.defineComponent)({
                     }
                     break;
                 case 'Escape':
-                    closeMenu();
+                    if (mergedShowRef.value) {
+                        (0, _utils_1.markEventEffectPerformed)(e);
+                        closeMenu();
+                    }
                     (_e = triggerRef.value) === null || _e === void 0 ? void 0 : _e.focus();
                     break;
             }

package/lib/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/lib/slider/src/Slider.js

@@ -151,7 +151,9 @@ exports.default = (0, vue_1.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) {
@@ -482,7 +484,7 @@ exports.default = (0, vue_1.defineComponent)({
             dotTransitionDisabled: dotTransitionDisabledRef,
             markInfos: markInfosRef,
             isShowTooltip,
-            isSkipCSSDetection,
+            shouldKeepTooltipTransition,
             handleRailRef,
             setHandleRefs,
             setFollowerRefs,
@@ -537,11 +539,17 @@ exports.default = (0, vue_1.defineComponent)({
                     return ((0, vue_1.h)(vueuc_1.VBinder, null, {
                         default: () => [
                             (0, vue_1.h)(vueuc_1.VTarget, null, {
-                                default: () => ((0, vue_1.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: () => ((0, vue_1.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) }, (0, _utils_1.resolveSlot)(this.$slots.thumb, () => [
+                                    (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 }, {
-                                default: () => ((0, vue_1.h)(vue_1.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: () => ((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: () => {
+                                        this.followerEnabledIndexSet.delete(index);
+                                    } }, {
                                     default: () => {
                                         var _a;
                                         if (showTooltip) {

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

@@ -44,11 +44,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('slider', `
  width: 100%;
  cursor: pointer;
  user-select: none;
- `, [(0, cssr_1.cM)('reverse', [(0, cssr_1.cB)('slider-handles', [(0, cssr_1.cB)('slider-handle', `
+ `, [(0, cssr_1.cM)('reverse', [(0, cssr_1.cB)('slider-handles', [(0, cssr_1.cB)('slider-handle-wrapper', `
  transform: translate(50%, -50%);
  `)]), (0, cssr_1.cB)('slider-dots', [(0, cssr_1.cB)('slider-dot', `
  transform: translateX(50%, -50%);
- `)]), (0, cssr_1.cM)('vertical', [(0, cssr_1.cB)('slider-handles', [(0, cssr_1.cB)('slider-handle', `
+ `)]), (0, cssr_1.cM)('vertical', [(0, cssr_1.cB)('slider-handles', [(0, cssr_1.cB)('slider-handle-wrapper', `
  transform: translate(-50%, -50%);
  `)]), (0, cssr_1.cB)('slider-marks', [(0, cssr_1.cB)('slider-mark', `
  transform: translateY(calc(-50% + var(--n-dot-height) / 2));
@@ -63,7 +63,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('slider', `
  right: 0;
  bottom: calc(var(--n-handle-size) / 2);
  left: 0;
- `, [(0, cssr_1.cB)('slider-handle', `
+ `, [(0, cssr_1.cB)('slider-handle-wrapper', `
  top: unset;
  left: 50%;
  transform: translate(-50%, 50%);
@@ -117,10 +117,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('slider', `
  top: 18px;
  left: calc(var(--n-handle-size) / 2);
  right: calc(var(--n-handle-size) / 2);
- `, [(0, cssr_1.cB)('slider-mark', {
-  position: 'absolute',
-  transform: 'translateX(-50%)'
-})]), (0, cssr_1.cB)('slider-rail', `
+ `, [(0, cssr_1.cB)('slider-mark', `
+ position: absolute;
+ transform: translateX(-50%);
+ white-space: nowrap;
+ `)]), (0, cssr_1.cB)('slider-rail', `
  width: 100%;
  position: relative;
  height: var(--n-rail-height);
@@ -140,33 +141,33 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('slider', `
  right: calc(var(--n-handle-size) / 2);
  bottom: 0;
  left: calc(var(--n-handle-size) / 2);
- `, [(0, cssr_1.cB)('slider-handle', `
+ `, [(0, cssr_1.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;
+ `, [(0, cssr_1.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);
- `, [(0, cssr_1.c)('&:hover', {
-  boxShadow: 'var(--n-handle-box-shadow-hover)'
-}), (0, cssr_1.c)('&:hover:focus', {
-  boxShadow: 'var(--n-handle-box-shadow-active)'
-}), (0, cssr_1.c)('&:focus', {
-  boxShadow: 'var(--n-handle-box-shadow-focus)'
-})])]), (0, cssr_1.cB)('slider-dots', `
+ `, [(0, cssr_1.c)('&:hover', `
+ box-shadow: var(--n-handle-box-shadow-hover);
+ `)]), (0, cssr_1.c)('&:focus', [(0, cssr_1.cB)('slider-handle', `
+ box-shadow: var(--n-handle-box-shadow-focus);
+ `, [(0, cssr_1.c)('&:hover', `
+ box-shadow: var(--n-handle-box-shadow-active);
+ `)])])])]), (0, cssr_1.cB)('slider-dots', `
  position: absolute;
  top: 50%;
  left: calc(var(--n-handle-size) / 2);
  right: calc(var(--n-handle-size) / 2);
- `, [(0, cssr_1.cM)('transition-disabled', [(0, cssr_1.cB)('slider-dot', {
-  transition: 'none'
-})]), (0, cssr_1.cB)('slider-dot', `
+ `, [(0, cssr_1.cM)('transition-disabled', [(0, cssr_1.cB)('slider-dot', 'transition: none;')]), (0, cssr_1.cB)('slider-dot', `
  transition:
  border-color .3s var(--n-bezier),
  box-shadow .3s var(--n-bezier),
@@ -180,9 +181,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('slider', `
  box-sizing: border-box;
  border: var(--n-dot-border);
  background-color: var(--n-dot-color);
- `, [(0, cssr_1.cM)('active', {
-  border: 'var(--n-dot-border-active)'
-})])])]), (0, cssr_1.cB)('slider-handle-indicator', `
+ `, [(0, cssr_1.cM)('active', 'border: var(--n-dot-border-active);')])])]), (0, cssr_1.cB)('slider-handle-indicator', `
  font-size: var(--n-font-size);
  padding: 6px 10px;
  border-radius: var(--n-indicator-border-radius);
@@ -204,8 +203,4 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('slider', `
  margin-top: 12px;
  `), (0, cssr_1.cM)('left', `
  margin-right: 12px;
- `), (0, fade_in_scale_up_cssr_1.fadeInScaleUpTransition)()]), (0, cssr_1.insideModal)((0, cssr_1.cB)('slider', [(0, cssr_1.cB)('slider-dot', {
-  backgroundColor: 'var(--n-dot-color-modal)'
-})])), (0, cssr_1.insidePopover)((0, cssr_1.cB)('slider', [(0, cssr_1.cB)('slider-dot', {
-  backgroundColor: 'var(--n-dot-color-popover)'
-})]))]);
+ `), (0, fade_in_scale_up_cssr_1.fadeInScaleUpTransition)()]), (0, cssr_1.insideModal)((0, cssr_1.cB)('slider', [(0, cssr_1.cB)('slider-dot', 'background-color: var(--n-dot-color-modal);')])), (0, cssr_1.insidePopover)((0, cssr_1.cB)('slider', [(0, cssr_1.cB)('slider-dot', 'background-color: var(--n-dot-color-popover);')]))]);

package/lib/space/src/Space.d.ts

@@ -14,11 +14,19 @@ declare const spaceProps: {
         readonly type: PropType<number | [number, number] | "small" | "medium" | "large">;
         readonly default: "medium";
     };
+    readonly wrapItem: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly itemStyle: PropType<string | CSSProperties>;
     readonly wrap: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly internalUseGap: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
     readonly theme: PropType<import("../../_mixins").Theme<"Space", {
         gapSmall: string;
         gapMedium: string;
@@ -48,11 +56,19 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<number | [number, number] | "small" | "medium" | "large">;
         readonly default: "medium";
     };
+    readonly wrapItem: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly itemStyle: PropType<string | CSSProperties>;
     readonly wrap: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly internalUseGap: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
     readonly theme: PropType<import("../../_mixins").Theme<"Space", {
         gapSmall: string;
         gapMedium: string;
@@ -88,11 +104,19 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<number | [number, number] | "small" | "medium" | "large">;
         readonly default: "medium";
     };
+    readonly wrapItem: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly itemStyle: PropType<string | CSSProperties>;
     readonly wrap: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly internalUseGap: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
     readonly theme: PropType<import("../../_mixins").Theme<"Space", {
         gapSmall: string;
         gapMedium: string;
@@ -114,5 +138,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly wrap: boolean;
     readonly vertical: boolean;
     readonly justify: Justify;
+    readonly wrapItem: boolean;
+    readonly internalUseGap: boolean;
 }>;
 export default _default;