naive-ui 2.30.4 → 2.30.5

package/es/image/src/utils.js

@@ -0,0 +1,81 @@
+export const resolveOptionsAndHash = (options = {}) => {
+    var _a;
+    const { root = null } = options;
+    return {
+        hash: `${options.rootMargin || '0px 0px 0px 0px'}-${Array.isArray(options.threshold)
+            ? options.threshold.join(',')
+            : (_a = options.threshold) !== null && _a !== void 0 ? _a : '0'}`,
+        options: Object.assign(Object.assign({}, options), { root: (typeof root === 'string' ? document.querySelector(root) : root) ||
+                document.documentElement })
+    };
+};
+// root -> options -> [observer, elements]
+const observers = new WeakMap();
+const unobserveHandleMap = new WeakMap();
+const shouldStartLoadingRefMap = new WeakMap();
+export const observeIntersection = (el, options, shouldStartLoadingRef) => {
+    if (!el)
+        return () => { };
+    const resolvedOptionsAndHash = resolveOptionsAndHash(options);
+    const { root } = resolvedOptionsAndHash.options;
+    let rootObservers;
+    const _rootObservers = observers.get(root);
+    if (_rootObservers) {
+        rootObservers = _rootObservers;
+    }
+    else {
+        rootObservers = new Map();
+        observers.set(root, rootObservers);
+    }
+    let observer;
+    let observerAndObservedElements;
+    if (rootObservers.has(resolvedOptionsAndHash.hash)) {
+        observerAndObservedElements =
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            rootObservers.get(resolvedOptionsAndHash.hash);
+        if (!observerAndObservedElements[1].has(el)) {
+            observer = observerAndObservedElements[0];
+            observerAndObservedElements[1].add(el);
+            observer.observe(el);
+        }
+    }
+    else {
+        observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    const _unobserve = unobserveHandleMap.get(entry.target);
+                    const _shouldStartLoadingRef = shouldStartLoadingRefMap.get(entry.target);
+                    if (_unobserve)
+                        _unobserve();
+                    if (_shouldStartLoadingRef) {
+                        _shouldStartLoadingRef.value = true;
+                    }
+                }
+            });
+        }, resolvedOptionsAndHash.options);
+        observer.observe(el);
+        observerAndObservedElements = [observer, new Set([el])];
+        rootObservers.set(resolvedOptionsAndHash.hash, observerAndObservedElements);
+    }
+    let unobservered = false;
+    const unobserve = () => {
+        if (unobservered)
+            return;
+        unobserveHandleMap.delete(el);
+        shouldStartLoadingRefMap.delete(el);
+        unobservered = true;
+        if (observerAndObservedElements[1].has(el)) {
+            observerAndObservedElements[0].unobserve(el);
+            observerAndObservedElements[1].delete(el);
+        }
+        if (observerAndObservedElements[1].size <= 0) {
+            rootObservers.delete(resolvedOptionsAndHash.hash);
+        }
+        if (!rootObservers.size) {
+            observers.delete(root);
+        }
+    };
+    unobserveHandleMap.set(el, unobserve);
+    shouldStartLoadingRefMap.set(el, shouldStartLoadingRef);
+    return unobserve;
+};

package/es/input/src/styles/input-group-label.cssr.js

@@ -19,6 +19,8 @@ export default cB('input-group-label', `
  font-size: var(--n-font-size);
  line-height: var(--n-height);
  height: var(--n-height);
+ flex-shrink: 0;
+ white-space: nowrap;
  transition: 
  color .3s var(--n-bezier),
  background-color .3s var(--n-bezier),

package/es/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;

package/es/space/src/Space.js

@@ -11,9 +11,17 @@ const spaceProps = Object.assign(Object.assign({}, useTheme.props), { align: Str
     }, inline: Boolean, vertical: Boolean, size: {
         type: [String, Number, Array],
         default: 'medium'
+    }, wrapItem: {
+        type: Boolean,
+        default: true
     }, itemStyle: [String, Object], wrap: {
         type: Boolean,
         default: true
+    }, 
+    // internal
+    internalUseGap: {
+        type: Boolean,
+        default: undefined
     } });
 export default defineComponent({
     name: 'Space',
@@ -50,7 +58,7 @@ export default defineComponent({
         };
     },
     render() {
-        const { vertical, align, inline, justify, itemStyle, margin, wrap, mergedClsPrefix, rtlEnabled, useGap } = this;
+        const { vertical, align, inline, justify, itemStyle, margin, wrap, mergedClsPrefix, rtlEnabled, useGap, wrapItem, internalUseGap } = this;
         const children = flatten(getSlot(this));
         if (!children.length)
             return null;
@@ -74,50 +82,52 @@ export default defineComponent({
                 marginBottom: useGap || vertical ? '' : `-${semiVerticalMargin}`,
                 alignItems: align,
                 gap: useGap ? `${margin.vertical}px ${margin.horizontal}px` : ''
-            } }, children.map((child, index) => (h("div", { role: "none", style: [
-                itemStyle,
-                {
-                    maxWidth: '100%'
-                },
-                useGap
-                    ? ''
-                    : vertical
-                        ? {
-                            marginBottom: index !== lastIndex ? verticalMargin : ''
-                        }
-                        : rtlEnabled
+            } }, !wrapItem && (useGap || internalUseGap)
+            ? children
+            : children.map((child, index) => (h("div", { role: "none", style: [
+                    itemStyle,
+                    {
+                        maxWidth: '100%'
+                    },
+                    useGap
+                        ? ''
+                        : vertical
                             ? {
-                                marginLeft: isJustifySpace
-                                    ? justify === 'space-between' && index === lastIndex
-                                        ? ''
-                                        : semiHorizontalMargin
-                                    : index !== lastIndex
-                                        ? horizontalMargin
-                                        : '',
-                                marginRight: isJustifySpace
-                                    ? justify === 'space-between' && index === 0
-                                        ? ''
-                                        : semiHorizontalMargin
-                                    : '',
-                                paddingTop: semiVerticalMargin,
-                                paddingBottom: semiVerticalMargin
+                                marginBottom: index !== lastIndex ? verticalMargin : ''
                             }
-                            : {
-                                marginRight: isJustifySpace
-                                    ? justify === 'space-between' && index === lastIndex
-                                        ? ''
-                                        : semiHorizontalMargin
-                                    : index !== lastIndex
-                                        ? horizontalMargin
+                            : rtlEnabled
+                                ? {
+                                    marginLeft: isJustifySpace
+                                        ? justify === 'space-between' && index === lastIndex
+                                            ? ''
+                                            : semiHorizontalMargin
+                                        : index !== lastIndex
+                                            ? horizontalMargin
+                                            : '',
+                                    marginRight: isJustifySpace
+                                        ? justify === 'space-between' && index === 0
+                                            ? ''
+                                            : semiHorizontalMargin
                                         : '',
-                                marginLeft: isJustifySpace
-                                    ? justify === 'space-between' && index === 0
-                                        ? ''
-                                        : semiHorizontalMargin
-                                    : '',
-                                paddingTop: semiVerticalMargin,
-                                paddingBottom: semiVerticalMargin
-                            }
-            ] }, child)))));
+                                    paddingTop: semiVerticalMargin,
+                                    paddingBottom: semiVerticalMargin
+                                }
+                                : {
+                                    marginRight: isJustifySpace
+                                        ? justify === 'space-between' && index === lastIndex
+                                            ? ''
+                                            : semiHorizontalMargin
+                                        : index !== lastIndex
+                                            ? horizontalMargin
+                                            : '',
+                                    marginLeft: isJustifySpace
+                                        ? justify === 'space-between' && index === 0
+                                            ? ''
+                                            : semiHorizontalMargin
+                                        : '',
+                                    paddingTop: semiVerticalMargin,
+                                    paddingBottom: semiVerticalMargin
+                                }
+                ] }, child)))));
     }
 });

package/es/tooltip/index.d.ts

@@ -1,2 +1,2 @@
 export { default as NTooltip } from './src/Tooltip';
-export type { TooltipProps } from './src/Tooltip';
+export type { TooltipProps, TooltipInst } from './src/Tooltip';

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.30.4";
+declare const _default: "2.30.5";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '2.30.4';
+export default '2.30.5';

package/lib/_internal/scrollbar/src/Scrollbar.js

@@ -11,7 +11,6 @@ const vooks_1 = require("vooks");
 const _mixins_1 = require("../../../_mixins");
 const _utils_1 = require("../../../_utils");
 const styles_1 = require("../styles");
-const Wrapper_1 = require("./Wrapper");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const scrollbarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { size: {
         type: Number,
@@ -576,13 +575,13 @@ const Scrollbar = (0, vue_1.defineComponent)({
                                 this.contentClass
                             ] }, $slots))
                     }))),
-                (0, vue_1.h)("div", { ref: "yRailRef", class: `${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--vertical`, style: this.verticalRailStyle, "aria-hidden": true }, (0, vue_1.h)((triggerIsNone ? Wrapper_1.Wrapper : vue_1.Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
+                (0, vue_1.h)("div", { ref: "yRailRef", class: `${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--vertical`, style: this.verticalRailStyle, "aria-hidden": true }, (0, vue_1.h)((triggerIsNone ? _utils_1.Wrapper : vue_1.Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
                     default: () => this.needYBar && this.isShowYBar && !this.isIos ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`, style: {
                             height: this.yBarSizePx,
                             top: this.yBarTopPx
                         }, onMousedown: this.handleYScrollMouseDown })) : null
                 })),
-                (0, vue_1.h)("div", { ref: "xRailRef", class: `${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--horizontal`, style: this.horizontalRailStyle, "aria-hidden": true }, (0, vue_1.h)((triggerIsNone ? Wrapper_1.Wrapper : vue_1.Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
+                (0, vue_1.h)("div", { ref: "xRailRef", class: `${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--horizontal`, style: this.horizontalRailStyle, "aria-hidden": true }, (0, vue_1.h)((triggerIsNone ? _utils_1.Wrapper : vue_1.Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
                     default: () => this.needXBar && this.isShowXBar && !this.isIos ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`, style: {
                             width: this.xBarSizePx,
                             left: this.xBarLeftPx

package/lib/_internal/selection/src/Selection.js

@@ -431,8 +431,10 @@ exports.default = (0, vue_1.defineComponent)({
         const maxTagCountResponsive = maxTagCount === 'responsive';
         const maxTagCountNumeric = typeof maxTagCount === 'number';
         const useMaxTagCount = maxTagCountResponsive || maxTagCountNumeric;
-        const suffix = ((0, vue_1.h)(suffix_1.default, { clsPrefix: clsPrefix, loading: this.loading, showArrow: this.showArrow, showClear: this.mergedClearable && this.selected, onClear: this.handleClear }, {
-            default: () => { var _a, _b; return (_b = (_a = this.$slots).arrow) === null || _b === void 0 ? void 0 : _b.call(_a); }
+        const suffix = ((0, vue_1.h)(_utils_1.Wrapper, null, {
+            default: () => ((0, vue_1.h)(suffix_1.default, { clsPrefix: clsPrefix, loading: this.loading, showArrow: this.showArrow, showClear: this.mergedClearable && this.selected, onClear: this.handleClear }, {
+                default: () => { var _a, _b; return (_b = (_a = this.$slots).arrow) === null || _b === void 0 ? void 0 : _b.call(_a); }
+            }))
         }));
         let body;
         if (multiple) {

package/lib/_utils/dom/index.d.ts

@@ -0,0 +1 @@
+export { isDocument } from './is-document';

package/lib/_utils/dom/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isDocument = void 0;
+var is_document_1 = require("./is-document");
+Object.defineProperty(exports, "isDocument", { enumerable: true, get: function () { return is_document_1.isDocument; } });

package/lib/_utils/dom/is-document.d.ts

@@ -0,0 +1 @@
+export declare function isDocument(node: Node): node is Document;

package/lib/_utils/dom/is-document.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isDocument = void 0;
+function isDocument(node) {
+    return node.nodeName === '#document';
+}
+exports.isDocument = isDocument;

package/lib/_utils/index.d.ts

@@ -1,4 +1,4 @@
-export { call, keep, omit, flatten, getSlot, getVNodeChildren, keysOf, render, getFirstSlotVNode, createDataKey, createRefSetter, createInjectionKey, resolveSlot, resolveSlotWithProps, resolveWrappedSlot, isSlotEmpty, mergeEventHandlers } from './vue';
+export { call, keep, omit, flatten, getSlot, getVNodeChildren, keysOf, render, getFirstSlotVNode, createDataKey, createRefSetter, createInjectionKey, resolveSlot, resolveSlotWithProps, resolveWrappedSlot, isSlotEmpty, mergeEventHandlers, isNodeVShowFalse, Wrapper } from './vue';
 export type { MaybeArray } from './vue';
 export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute } from './naive';
 export type { ExtractPublicPropTypes, ExtractInternalPropTypes, Mutable } from './naive';
@@ -8,3 +8,4 @@ export { isJsdom } from './env/is-jsdom';
 export { isBrowser } from './env/is-browser';
 export { eventEffectNotPerformed, markEventEffectPerformed } from './event';
 export * from './composable';
+export * from './dom';

package/lib/_utils/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.markEventEffectPerformed = exports.eventEffectNotPerformed = exports.isBrowser = exports.isJsdom = exports.createKey = exports.color2Class = exports.formatLength = exports.getTitleAttribute = exports.largerSize = exports.smallerSize = exports.throwError = exports.warnOnce = exports.warn = exports.mergeEventHandlers = exports.isSlotEmpty = exports.resolveWrappedSlot = exports.resolveSlotWithProps = exports.resolveSlot = exports.createInjectionKey = exports.createRefSetter = exports.createDataKey = exports.getFirstSlotVNode = exports.render = exports.keysOf = exports.getVNodeChildren = exports.getSlot = exports.flatten = exports.omit = exports.keep = exports.call = void 0;
+exports.markEventEffectPerformed = exports.eventEffectNotPerformed = exports.isBrowser = exports.isJsdom = exports.createKey = exports.color2Class = exports.formatLength = exports.getTitleAttribute = exports.largerSize = exports.smallerSize = exports.throwError = exports.warnOnce = exports.warn = exports.Wrapper = exports.isNodeVShowFalse = exports.mergeEventHandlers = exports.isSlotEmpty = exports.resolveWrappedSlot = exports.resolveSlotWithProps = exports.resolveSlot = exports.createInjectionKey = exports.createRefSetter = exports.createDataKey = exports.getFirstSlotVNode = exports.render = exports.keysOf = exports.getVNodeChildren = exports.getSlot = exports.flatten = exports.omit = exports.keep = exports.call = void 0;
 var vue_1 = require("./vue");
 Object.defineProperty(exports, "call", { enumerable: true, get: function () { return vue_1.call; } });
 Object.defineProperty(exports, "keep", { enumerable: true, get: function () { return vue_1.keep; } });
@@ -33,6 +33,8 @@ Object.defineProperty(exports, "resolveSlotWithProps", { enumerable: true, get:
 Object.defineProperty(exports, "resolveWrappedSlot", { enumerable: true, get: function () { return vue_1.resolveWrappedSlot; } });
 Object.defineProperty(exports, "isSlotEmpty", { enumerable: true, get: function () { return vue_1.isSlotEmpty; } });
 Object.defineProperty(exports, "mergeEventHandlers", { enumerable: true, get: function () { return vue_1.mergeEventHandlers; } });
+Object.defineProperty(exports, "isNodeVShowFalse", { enumerable: true, get: function () { return vue_1.isNodeVShowFalse; } });
+Object.defineProperty(exports, "Wrapper", { enumerable: true, get: function () { return vue_1.Wrapper; } });
 var naive_1 = require("./naive");
 Object.defineProperty(exports, "warn", { enumerable: true, get: function () { return naive_1.warn; } });
 Object.defineProperty(exports, "warnOnce", { enumerable: true, get: function () { return naive_1.warnOnce; } });
@@ -53,3 +55,4 @@ var event_1 = require("./event");
 Object.defineProperty(exports, "eventEffectNotPerformed", { enumerable: true, get: function () { return event_1.eventEffectNotPerformed; } });
 Object.defineProperty(exports, "markEventEffectPerformed", { enumerable: true, get: function () { return event_1.markEventEffectPerformed; } });
 __exportStar(require("./composable"), exports);
+__exportStar(require("./dom"), exports);

package/lib/_utils/vue/index.d.ts

@@ -13,3 +13,5 @@ export { createInjectionKey } from './create-injection-key';
 export { resolveSlot, resolveWrappedSlot, resolveSlotWithProps, isSlotEmpty } from './resolve-slot';
 export type { MaybeArray } from './call';
 export { mergeEventHandlers } from './merge-handlers';
+export { isNodeVShowFalse } from './is-node-v-show-false';
+export { Wrapper } from './wrapper';

package/lib/_utils/vue/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeEventHandlers = exports.isSlotEmpty = exports.resolveSlotWithProps = exports.resolveWrappedSlot = exports.resolveSlot = exports.createInjectionKey = exports.createRefSetter = exports.createDataKey = exports.getFirstSlotVNode = exports.render = exports.keysOf = exports.call = exports.flatten = exports.omit = exports.keep = exports.getVNodeChildren = exports.getSlot = void 0;
+exports.Wrapper = exports.isNodeVShowFalse = exports.mergeEventHandlers = exports.isSlotEmpty = exports.resolveSlotWithProps = exports.resolveWrappedSlot = exports.resolveSlot = exports.createInjectionKey = exports.createRefSetter = exports.createDataKey = exports.getFirstSlotVNode = exports.render = exports.keysOf = exports.call = exports.flatten = exports.omit = exports.keep = exports.getVNodeChildren = exports.getSlot = void 0;
 var get_slot_1 = require("./get-slot");
 Object.defineProperty(exports, "getSlot", { enumerable: true, get: function () { return get_slot_1.getSlot; } });
 var get_v_node_children_1 = require("./get-v-node-children");
@@ -32,3 +32,7 @@ Object.defineProperty(exports, "resolveSlotWithProps", { enumerable: true, get:
 Object.defineProperty(exports, "isSlotEmpty", { enumerable: true, get: function () { return resolve_slot_1.isSlotEmpty; } });
 var merge_handlers_1 = require("./merge-handlers");
 Object.defineProperty(exports, "mergeEventHandlers", { enumerable: true, get: function () { return merge_handlers_1.mergeEventHandlers; } });
+var is_node_v_show_false_1 = require("./is-node-v-show-false");
+Object.defineProperty(exports, "isNodeVShowFalse", { enumerable: true, get: function () { return is_node_v_show_false_1.isNodeVShowFalse; } });
+var wrapper_1 = require("./wrapper");
+Object.defineProperty(exports, "Wrapper", { enumerable: true, get: function () { return wrapper_1.Wrapper; } });

package/lib/_utils/vue/is-node-v-show-false.d.ts

@@ -0,0 +1,2 @@
+import { VNode } from 'vue';
+export declare function isNodeVShowFalse(vNode: VNode): boolean;

package/lib/_utils/vue/is-node-v-show-false.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isNodeVShowFalse = void 0;
+const vue_1 = require("vue");
+function isNodeVShowFalse(vNode) {
+    var _a;
+    const showDir = (_a = vNode.dirs) === null || _a === void 0 ? void 0 : _a.find(({ dir }) => dir === vue_1.vShow);
+    return !!(showDir && showDir.value === false);
+}
+exports.isNodeVShowFalse = isNodeVShowFalse;

package/lib/back-top/src/BackTop.d.ts

@@ -159,7 +159,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     handleAfterEnter: () => void;
     handleScroll: () => void;
-    handleClick: (e: MouseEvent) => void;
+    handleClick: () => void;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-border-radius': string;

package/lib/back-top/src/BackTop.js

@@ -55,15 +55,20 @@ exports.default = (0, vue_1.defineComponent)({
         }
         const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const scrollTopRef = (0, vue_1.ref)(null);
-        const uncontrolledShowRef = (0, vue_1.computed)(() => {
-            if (scrollTopRef.value === null)
-                return false;
-            return scrollTopRef.value >= props.visibilityHeight;
+        const uncontrolledShowRef = (0, vue_1.ref)(false);
+        (0, vue_1.watchEffect)(() => {
+            const { value: scrollTop } = scrollTopRef;
+            if (scrollTop === null) {
+                uncontrolledShowRef.value = false;
+                return;
+            }
+            uncontrolledShowRef.value = scrollTop >= props.visibilityHeight;
         });
         const DomInfoReadyRef = (0, vue_1.ref)(false);
         (0, vue_1.watch)(uncontrolledShowRef, (value) => {
+            var _a;
             if (DomInfoReadyRef.value) {
-                props['onUpdate:show'](value);
+                (_a = props['onUpdate:show']) === null || _a === void 0 ? void 0 : _a.call(props, value);
             }
         });
         const controlledShowRef = (0, vue_1.toRef)(props, 'show');
@@ -103,39 +108,27 @@ exports.default = (0, vue_1.defineComponent)({
                 }
                 return;
             }
-            scrollElement = scrollEl;
+            scrollElement =
+                scrollEl === document.documentElement ? document : scrollEl;
             const { to } = props;
             const target = typeof to === 'string' ? document.querySelector(to) : to;
             if (process.env.NODE_ENV !== 'production' && !target) {
                 (0, _utils_1.warn)('back-top', 'Target is not found.');
             }
-            if (scrollEl) {
-                scrollEl.addEventListener('scroll', handleScroll);
-                handleScroll();
-            }
+            scrollElement.addEventListener('scroll', handleScroll);
+            handleScroll();
         }
-        function handleClick(e) {
-            if (scrollElement.nodeName === '#document') {
-                ;
-                scrollElement.documentElement.scrollTo({
-                    top: 0,
-                    behavior: 'smooth'
-                });
-            }
-            else {
-                scrollElement.scrollTo({
-                    top: 0,
-                    behavior: 'smooth'
-                });
-            }
+        function handleClick() {
+            ;
+            ((0, _utils_1.isDocument)(scrollElement)
+                ? document.documentElement
+                : scrollElement).scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
         }
         function handleScroll() {
-            if (scrollElement.nodeName === '#document') {
-                scrollTopRef.value = scrollElement.documentElement.scrollTop;
-            }
-            else {
-                scrollTopRef.value = scrollElement.scrollTop;
-            }
+            scrollTopRef.value = ((0, _utils_1.isDocument)(scrollElement) ? document.documentElement : scrollElement).scrollTop;
             if (!DomInfoReadyRef.value) {
                 void (0, vue_1.nextTick)(() => {
                     DomInfoReadyRef.value = true;

package/lib/data-table/src/DataTable.d.ts

@@ -1,7 +1,7 @@
-import { PropType, ExtractPropTypes } from 'vue';
+import { PropType, ExtractPropTypes, VNodeChild } from 'vue';
 import type { PaginationProps } from '../../pagination';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
-import type { CreateRowClassName, CreateRowKey, OnUpdateCheckedRowKeys, OnUpdateSorter, RowKey, TableColumns, RowData, OnUpdateFilters, OnUpdateExpandedRowKeys, CreateSummary, CreateRowProps, DataTableOnLoad } from './interface';
+import type { CreateRowClassName, CreateRowKey, OnUpdateCheckedRowKeys, OnUpdateSorter, RowKey, TableColumns, RowData, OnUpdateFilters, OnUpdateExpandedRowKeys, CreateSummary, CreateRowProps, DataTableOnLoad, TableBaseColumn } from './interface';
 export declare const dataTableProps: {
     readonly pagination: {
         readonly type: PropType<false | PaginationProps>;
@@ -80,6 +80,7 @@ export declare const dataTableProps: {
         readonly type: PropType<"first" | "current">;
         readonly default: "current";
     };
+    readonly renderCell: PropType<(value: any, rowData: object, column: TableBaseColumn) => VNodeChild>;
     readonly onLoad: PropType<DataTableOnLoad>;
     readonly 'onUpdate:page': PropType<MaybeArray<(page: number) => void> | undefined>;
     readonly onUpdatePage: PropType<MaybeArray<(page: number) => void> | undefined>;
@@ -2295,6 +2296,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<"first" | "current">;
         readonly default: "current";
     };
+    readonly renderCell: PropType<(value: any, rowData: object, column: TableBaseColumn<import("./interface").InternalRowData>) => VNodeChild>;
     readonly onLoad: PropType<DataTableOnLoad>;
     readonly 'onUpdate:page': PropType<MaybeArray<(page: number) => void> | undefined>;
     readonly onUpdatePage: PropType<MaybeArray<(page: number) => void> | undefined>;
@@ -5702,6 +5704,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<"first" | "current">;
         readonly default: "current";
     };
+    readonly renderCell: PropType<(value: any, rowData: object, column: TableBaseColumn<import("./interface").InternalRowData>) => VNodeChild>;
     readonly onLoad: PropType<DataTableOnLoad>;
     readonly 'onUpdate:page': PropType<MaybeArray<(page: number) => void> | undefined>;
     readonly onUpdatePage: PropType<MaybeArray<(page: number) => void> | undefined>;

package/lib/data-table/src/DataTable.js

@@ -66,7 +66,7 @@ exports.dataTableProps = Object.assign(Object.assign({}, _mixins_1.useTheme.prop
     }, flexHeight: Boolean, paginationBehaviorOnFilter: {
         type: String,
         default: 'current'
-    }, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
+    }, renderCell: Function, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
     // deprecated
     onPageChange: [Function, Array], onPageSizeChange: [Function, Array], onSorterChange: [Function, Array], onFiltersChange: [Function, Array], onCheckedRowKeysChange: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
@@ -210,7 +210,8 @@ exports.default = (0, vue_1.defineComponent)({
             doUpdateExpandedRowKeys,
             handleTableHeaderScroll,
             handleTableBodyScroll,
-            setHeaderScrollLeft
+            setHeaderScrollLeft,
+            renderCell: (0, vue_1.toRef)(props, 'renderCell')
         });
         const exposedMethods = {
             filter,

package/lib/data-table/src/TableParts/Body.d.ts

@@ -1213,6 +1213,7 @@ declare const _default: import("vue").DefineComponent<{
         key: RowKey;
     }, checked: boolean, shiftKey: boolean) => void;
     handleUpdateExpanded: (key: RowKey, tmNode: TmNode | null) => void;
+    renderCell: import("vue").Ref<((value: any, rowData: object, column: import("../interface").TableBaseColumn<import("../interface").InternalRowData>) => import("vue").VNodeChild) | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     onResize: PropType<(e: ResizeObserverEntry) => void>;
     showHeader: BooleanConstructor;

package/lib/data-table/src/TableParts/Body.js

@@ -82,7 +82,7 @@ exports.default = (0, vue_1.defineComponent)({
         bodyStyle: Object
     },
     setup(props) {
-        const { slots: dataTableSlots, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, scrollPartRef, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, onLoadRef, loadingKeySetRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck
+        const { slots: dataTableSlots, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, scrollPartRef, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, onLoadRef, loadingKeySetRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         const scrollbarInstRef = (0, vue_1.ref)(null);
@@ -313,7 +313,8 @@ exports.default = (0, vue_1.defineComponent)({
             virtualListContent,
             handleTableBodyScroll,
             handleCheckboxUpdateChecked,
-            handleUpdateExpanded }, exposedMethods);
+            handleUpdateExpanded,
+            renderCell }, exposedMethods);
     },
     render() {
         const { mergedTheme, scrollX, mergedClsPrefix, virtualScroll, maxHeight, mergedTableLayout, flexHeight, loadingKeySet, onResize, setHeaderScrollLeft } = this;
@@ -516,7 +517,7 @@ exports.default = (0, vue_1.defineComponent)({
                                 ]
                                 : null,
                             column.type === 'selection' ? (!isSummary ? ((0, vue_1.h)(BodyCheckbox_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: (checked, e) => handleCheckboxUpdateChecked(rowInfo.tmNode, checked, e.shiftKey) })) : null) : column.type === 'expand' ? (!isSummary ? (!column.expandable ||
-                                ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? ((0, vue_1.h)(ExpandTrigger_1.default, { clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => handleUpdateExpanded(rowKey, null) })) : null) : null) : ((0, vue_1.h)(Cell_1.default, { index: rowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme }))));
+                                ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? ((0, vue_1.h)(ExpandTrigger_1.default, { clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => handleUpdateExpanded(rowKey, null) })) : null) : null) : ((0, vue_1.h)(Cell_1.default, { index: rowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme, renderCell: this.renderCell }))));
                     })));
                     return row;
                 };