naive-ui 2.30.4 → 2.30.5

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

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, VNodeChild } from 'vue';
 import { TableBaseColumn, InternalRowData } from '../interface';
 declare const _default: import("vue").DefineComponent<{
     row: {
@@ -1149,6 +1149,7 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         required: true;
     };
+    renderCell: PropType<(value: any, rowData: object, column: any) => VNodeChild>;
 }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     row: {
         type: PropType<InternalRowData>;
@@ -2298,6 +2299,7 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         required: true;
     };
+    renderCell: PropType<(value: any, rowData: object, column: any) => VNodeChild>;
 }>>, {
     isSummary: boolean;
 }>;

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

@@ -22,11 +22,13 @@ exports.default = (0, vue_1.defineComponent)({
         mergedTheme: {
             type: Object,
             required: true
-        }
+        },
+        renderCell: Function
     },
     render() {
-        const { isSummary, column: { render, key, ellipsis }, row } = this;
+        const { isSummary, column, row, renderCell } = this;
         let cell;
+        const { render, key, ellipsis } = column;
         if (render && !isSummary) {
             cell = render(row, this.index);
         }
@@ -35,7 +37,9 @@ exports.default = (0, vue_1.defineComponent)({
                 cell = row[key].value;
             }
             else {
-                cell = (0, lodash_1.get)(row, key);
+                cell = renderCell
+                    ? renderCell((0, lodash_1.get)(row, key), row, column)
+                    : (0, lodash_1.get)(row, key);
             }
         }
         if (ellipsis && typeof ellipsis === 'object') {

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

@@ -173,6 +173,7 @@ export interface DataTableInjection {
     handleTableBodyScroll: (e: Event) => void;
     syncScrollState: (deltaX?: number, deltaY?: number) => void;
     setHeaderScrollLeft: (scrollLeft: number) => void;
+    renderCell: Ref<undefined | ((value: any, rowData: object, column: TableBaseColumn) => VNodeChild)>;
 }
 export declare const dataTableInjectionKey: import("vue").InjectionKey<DataTableInjection>;
 export interface MainTableInjection {
@@ -192,7 +193,7 @@ export declare type RenderFilterMenu = (actions: {
     hide: () => void;
 }) => VNodeChild;
 export declare type OnUpdateExpandedRowKeys = (keys: RowKey[]) => void;
-export declare type OnUpdateCheckedRowKeys = (keys: RowKey[]) => void;
+export declare type OnUpdateCheckedRowKeys = (keys: RowKey[], row: InternalRowData[]) => void;
 export declare type OnUpdateSorter = (sortState: SortState & SortState[] & null) => void;
 export declare type OnUpdateSorterImpl = (sortState: SortState | SortState[] | null) => void;
 export declare type OnUpdateFilters = (filterState: FilterState, sourceColumn: TableBaseColumn) => void;

package/lib/data-table/src/use-check.js

@@ -53,12 +53,20 @@ function useCheck(props, data) {
     });
     function doUpdateCheckedRowKeys(keys) {
         const { 'onUpdate:checkedRowKeys': _onUpdateCheckedRowKeys, onUpdateCheckedRowKeys, onCheckedRowKeysChange } = props;
+        const rows = [];
+        const { value: { getNode } } = treeMateRef;
+        keys.forEach((key) => {
+            var _a;
+            const row = (_a = getNode(key)) === null || _a === void 0 ? void 0 : _a.rawNode;
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            rows.push(row);
+        });
         if (_onUpdateCheckedRowKeys)
-            (0, _utils_1.call)(_onUpdateCheckedRowKeys, keys);
+            (0, _utils_1.call)(_onUpdateCheckedRowKeys, keys, rows);
         if (onUpdateCheckedRowKeys)
-            (0, _utils_1.call)(onUpdateCheckedRowKeys, keys);
+            (0, _utils_1.call)(onUpdateCheckedRowKeys, keys, rows);
         if (onCheckedRowKeysChange)
-            (0, _utils_1.call)(onCheckedRowKeysChange, keys);
+            (0, _utils_1.call)(onCheckedRowKeysChange, keys, rows);
         uncontrolledCheckedRowKeysRef.value = keys;
     }
     function doCheck(rowKey) {

package/lib/grid/src/Grid.js

@@ -104,7 +104,7 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         const renderContent = () => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g;
             this.overflow = false;
             // render will be called twice when mounted, I can't figure out why
             // 2 jobs will be pushed into job queues with same id, and then be flushed
@@ -112,11 +112,28 @@ exports.default = (0, vue_1.defineComponent)({
             const childrenAndRawSpan = [];
             const { collapsed, collapsedRows, responsiveCols, responsiveQuery } = this;
             rawChildren.forEach((child) => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d;
                 if (((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.__GRID_ITEM__) !== true)
                     return;
+                if ((0, _utils_1.isNodeVShowFalse)(child)) {
+                    const clonedNode = (0, vue_1.cloneVNode)(child);
+                    if (clonedNode.props) {
+                        clonedNode.props.privateShow = false;
+                    }
+                    else {
+                        clonedNode.props = { pirvateShow: false };
+                    }
+                    childrenAndRawSpan.push({
+                        child: clonedNode,
+                        rawChildSpan: 0
+                    });
+                    return;
+                }
+                // We don't want v-show to control display, so we need to stripe it
+                // here, nor it may mess child's style
+                child.dirs = ((_b = child.dirs) === null || _b === void 0 ? void 0 : _b.filter(({ dir }) => dir !== vue_1.vShow)) || null;
                 const clonedChild = (0, vue_1.cloneVNode)(child);
-                const rawChildSpan = Number((_c = (0, seemly_1.parseResponsivePropValue)((_b = clonedChild.props) === null || _b === void 0 ? void 0 : _b.span, responsiveQuery)) !== null && _c !== void 0 ? _c : config_2.defaultSpan);
+                const rawChildSpan = Number((_d = (0, seemly_1.parseResponsivePropValue)((_c = clonedChild.props) === null || _c === void 0 ? void 0 : _c.span, responsiveQuery)) !== null && _d !== void 0 ? _d : config_2.defaultSpan);
                 if (rawChildSpan === 0)
                     return;
                 childrenAndRawSpan.push({
@@ -133,7 +150,8 @@ exports.default = (0, vue_1.defineComponent)({
                     maybeSuffixNode.props.privateSpan = suffixSpan;
                     maybeSuffixNode.props.privateColStart =
                         responsiveCols + 1 - suffixSpan;
-                    maybeSuffixNode.props.privateShow = true;
+                    maybeSuffixNode.props.privateShow =
+                        (_e = maybeSuffixNode.props.privateShow) !== null && _e !== void 0 ? _e : true;
                 }
             }
             let spanCounter = 0;
@@ -143,8 +161,9 @@ exports.default = (0, vue_1.defineComponent)({
                     this.overflow = true;
                 }
                 if (!done) {
-                    const childOffset = Number((_f = (0, seemly_1.parseResponsivePropValue)((_e = child.props) === null || _e === void 0 ? void 0 : _e.offset, responsiveQuery)) !== null && _f !== void 0 ? _f : 0);
-                    const childSpan = Math.min(rawChildSpan + childOffset, responsiveCols) || 1;
+                    const childOffset = Number((_g = (0, seemly_1.parseResponsivePropValue)((_f = child.props) === null || _f === void 0 ? void 0 : _f.offset, responsiveQuery)) !== null && _g !== void 0 ? _g : 0);
+                    // it could be 0 sometimes (v-show = false)
+                    const childSpan = Math.min(rawChildSpan + childOffset, responsiveCols);
                     if (!child.props) {
                         child.props = {
                             privateSpan: childSpan,
@@ -171,6 +190,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
                 if (done) {
                     if (child.props) {
+                        // suffix node's privateShow may be true
                         if (child.props.privateShow !== true) {
                             child.props.privateShow = false;
                         }

package/lib/image/src/Image.d.ts

@@ -1,5 +1,6 @@
 import { PropType, ImgHTMLAttributes } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
+import type { IntersectionObserverOptions } from './utils';
 export interface ImageInst {
     click: () => void;
 }
@@ -99,6 +100,8 @@ declare const imageProps: {
     alt: StringConstructor;
     height: PropType<string | number>;
     imgProps: PropType<ImgHTMLAttributes>;
+    lazy: BooleanConstructor;
+    intersectionObserverOptions: PropType<IntersectionObserverOptions>;
     objectFit: {
         type: PropType<"fill" | "none" | "contain" | "cover" | "scale-down">;
         default: string;
@@ -209,6 +212,8 @@ declare const _default: import("vue").DefineComponent<{
     alt: StringConstructor;
     height: PropType<string | number>;
     imgProps: PropType<ImgHTMLAttributes>;
+    lazy: BooleanConstructor;
+    intersectionObserverOptions: PropType<IntersectionObserverOptions>;
     objectFit: {
         type: PropType<"fill" | "none" | "contain" | "cover" | "scale-down">;
         default: string;
@@ -233,6 +238,8 @@ declare const _default: import("vue").DefineComponent<{
     imageRef: import("vue").Ref<HTMLImageElement | null>;
     imgProps: import("vue").Ref<ImgHTMLAttributes | undefined>;
     showError: import("vue").Ref<boolean>;
+    shouldStartLoading: import("vue").Ref<boolean>;
+    loaded: import("vue").Ref<boolean>;
     mergedOnError: (e: Event) => void;
     mergedOnLoad: (e: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -331,6 +338,8 @@ declare const _default: import("vue").DefineComponent<{
     alt: StringConstructor;
     height: PropType<string | number>;
     imgProps: PropType<ImgHTMLAttributes>;
+    lazy: BooleanConstructor;
+    intersectionObserverOptions: PropType<IntersectionObserverOptions>;
     objectFit: {
         type: PropType<"fill" | "none" | "contain" | "cover" | "scale-down">;
         default: string;
@@ -344,6 +353,7 @@ declare const _default: import("vue").DefineComponent<{
     onError: PropType<(e: Event) => void>;
     onLoad: PropType<(e: Event) => void>;
 }>>, {
+    lazy: boolean;
     objectFit: "fill" | "none" | "contain" | "cover" | "scale-down";
     showToolbar: boolean;
     showToolbarTooltip: boolean;

package/lib/image/src/Image.js

@@ -8,7 +8,8 @@ const ImagePreview_1 = __importDefault(require("./ImagePreview"));
 const ImageGroup_1 = require("./ImageGroup");
 const _mixins_1 = require("../../_mixins");
 const interface_1 = require("./interface");
-const imageProps = Object.assign({ alt: String, height: [String, Number], imgProps: Object, objectFit: {
+const utils_1 = require("./utils");
+const imageProps = Object.assign({ alt: String, height: [String, Number], imgProps: Object, lazy: Boolean, intersectionObserverOptions: Object, objectFit: {
         type: String,
         default: 'fill'
     }, previewSrc: String, fallbackSrc: String, width: [String, Number], src: String, previewDisabled: Boolean, loadDescription: String, onError: Function, onLoad: Function }, interface_1.imagePreviewSharedProps);
@@ -42,18 +43,34 @@ exports.default = (0, vue_1.defineComponent)({
                 previewInst.toggleShow();
             }
         };
+        const shouldStartLoadingRef = (0, vue_1.ref)(!props.lazy);
         (0, vue_1.onMounted)(() => {
             var _a;
             (_a = imageRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('data-group-id', (imageGroupHandle === null || imageGroupHandle === void 0 ? void 0 : imageGroupHandle.groupId) || '');
         });
+        (0, vue_1.onMounted)(() => {
+            let unobserve;
+            const stopWatchHandle = (0, vue_1.watchEffect)(() => {
+                unobserve === null || unobserve === void 0 ? void 0 : unobserve();
+                unobserve = undefined;
+                if (props.lazy) {
+                    unobserve = (0, utils_1.observeIntersection)(imageRef.value, props.intersectionObserverOptions, shouldStartLoadingRef);
+                }
+            });
+            (0, vue_1.onBeforeUnmount)(() => {
+                stopWatchHandle();
+                unobserve === null || unobserve === void 0 ? void 0 : unobserve();
+            });
+        });
         (0, vue_1.watchEffect)(() => {
             var _a;
             void props.src;
             void ((_a = props.imgProps) === null || _a === void 0 ? void 0 : _a.src);
             showErrorRef.value = false;
         });
+        const loadedRef = (0, vue_1.ref)(false);
         return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, groupId: imageGroupHandle === null || imageGroupHandle === void 0 ? void 0 : imageGroupHandle.groupId, previewInstRef,
-            imageRef, imgProps: imgPropsRef, showError: showErrorRef, mergedOnError: (e) => {
+            imageRef, imgProps: imgPropsRef, showError: showErrorRef, shouldStartLoading: shouldStartLoadingRef, loaded: loadedRef, mergedOnError: (e) => {
                 showErrorRef.value = true;
                 const { onError, imgProps: { onError: imgPropsOnError } = {} } = props;
                 onError === null || onError === void 0 ? void 0 : onError(e);
@@ -62,18 +79,33 @@ exports.default = (0, vue_1.defineComponent)({
                 const { onLoad, imgProps: { onLoad: imgPropsOnLoad } = {} } = props;
                 onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
                 imgPropsOnLoad === null || imgPropsOnLoad === void 0 ? void 0 : imgPropsOnLoad(e);
+                loadedRef.value = true;
             } }, exposedMethods);
     },
     render() {
-        const { mergedClsPrefix, imgProps = {}, $attrs } = this;
-        const imgNode = ((0, vue_1.h)("img", Object.assign({}, imgProps, { class: imgProps.class, ref: "imageRef", width: this.width || imgProps.width, height: this.height || imgProps.height, src: this.showError ? this.fallbackSrc : this.src || imgProps.src, alt: this.alt || imgProps.alt, "aria-label": this.alt || imgProps.alt, onClick: this.click, onError: this.mergedOnError, onLoad: this.mergedOnLoad, style: [imgProps.style || '', { objectFit: this.objectFit }], "data-error": this.showError, "data-preview-src": this.previewSrc || this.src })));
+        var _a, _b;
+        const { mergedClsPrefix, imgProps = {}, loaded, $attrs } = this;
+        const placeholderNode = (_b = (_a = this.$slots).placeholder) === null || _b === void 0 ? void 0 : _b.call(_a);
+        const imgNode = ((0, vue_1.h)("img", Object.assign({}, imgProps, { class: imgProps.class, ref: "imageRef", width: this.width || imgProps.width, height: this.height || imgProps.height, src: this.showError
+                ? this.fallbackSrc
+                : this.shouldStartLoading
+                    ? this.src || imgProps.src
+                    : undefined, alt: this.alt || imgProps.alt, "aria-label": this.alt || imgProps.alt, onClick: this.click, onError: this.mergedOnError, onLoad: this.mergedOnLoad, style: [
+                imgProps.style || '',
+                placeholderNode && !loaded
+                    ? { height: '0', width: '0', visibility: 'hidden' }
+                    : '',
+                { objectFit: this.objectFit }
+            ], "data-error": this.showError, "data-preview-src": this.previewSrc || this.src })));
         return ((0, vue_1.h)("div", Object.assign({}, $attrs, { role: "none", class: [
                 $attrs.class,
                 `${mergedClsPrefix}-image`,
                 (this.previewDisabled || this.showError) &&
                     `${mergedClsPrefix}-image--preview-disabled`
-            ] }), this.groupId ? (imgNode) : ((0, vue_1.h)(ImagePreview_1.default, { theme: this.theme, themeOverrides: this.themeOverrides, clsPrefix: mergedClsPrefix, ref: "previewInstRef", showToolbar: this.showToolbar, showToolbarTooltip: this.showToolbarTooltip }, {
-            default: () => imgNode
-        }))));
+            ] }),
+            this.groupId ? (imgNode) : ((0, vue_1.h)(ImagePreview_1.default, { theme: this.theme, themeOverrides: this.themeOverrides, clsPrefix: mergedClsPrefix, ref: "previewInstRef", showToolbar: this.showToolbar, showToolbarTooltip: this.showToolbarTooltip }, {
+                default: () => imgNode
+            })),
+            !loaded && placeholderNode));
     }
 });

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

@@ -0,0 +1,11 @@
+import { Ref } from 'vue';
+export declare type IntersectionObserverOptions = Omit<IntersectionObserverInit, 'root'> & {
+    root?: Element | Document | null | string;
+};
+export declare const resolveOptionsAndHash: (options?: IntersectionObserverOptions | undefined) => {
+    hash: string;
+    options: Omit<IntersectionObserverInit, "root"> & {
+        root: Element | Document;
+    };
+};
+export declare const observeIntersection: (el: HTMLImageElement | null, options: IntersectionObserverOptions | undefined, shouldStartLoadingRef: Ref<boolean>) => () => void;

package/lib/image/src/utils.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.observeIntersection = exports.resolveOptionsAndHash = void 0;
+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 })
+    };
+};
+exports.resolveOptionsAndHash = resolveOptionsAndHash;
+// root -> options -> [observer, elements]
+const observers = new WeakMap();
+const unobserveHandleMap = new WeakMap();
+const shouldStartLoadingRefMap = new WeakMap();
+const observeIntersection = (el, options, shouldStartLoadingRef) => {
+    if (!el)
+        return () => { };
+    const resolvedOptionsAndHash = (0, exports.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;
+};
+exports.observeIntersection = observeIntersection;

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

@@ -26,6 +26,8 @@ exports.default = (0, cssr_1.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/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;

package/lib/space/src/Space.js

@@ -16,9 +16,17 @@ const spaceProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, 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
     } });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Space',
@@ -55,7 +63,7 @@ exports.default = (0, vue_1.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 = (0, _utils_1.flatten)((0, _utils_1.getSlot)(this));
         if (!children.length)
             return null;
@@ -79,50 +87,52 @@ exports.default = (0, vue_1.defineComponent)({
                 marginBottom: useGap || vertical ? '' : `-${semiVerticalMargin}`,
                 alignItems: align,
                 gap: useGap ? `${margin.vertical}px ${margin.horizontal}px` : ''
-            } }, children.map((child, index) => ((0, vue_1.h)("div", { role: "none", style: [
-                itemStyle,
-                {
-                    maxWidth: '100%'
-                },
-                useGap
-                    ? ''
-                    : vertical
-                        ? {
-                            marginBottom: index !== lastIndex ? verticalMargin : ''
-                        }
-                        : rtlEnabled
+            } }, !wrapItem && (useGap || internalUseGap)
+            ? children
+            : children.map((child, index) => ((0, vue_1.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/lib/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/lib/version.d.ts

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

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '2.30.4';
+exports.default = '2.30.5';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "2.30.4",
+  "version": "2.30.5",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "main": "lib/index.js",
   "module": "es/index.js",

package/volar.d.ts

@@ -139,7 +139,6 @@ declare module 'vue' {
     NUploadFileList: typeof import('naive-ui')['NUploadFileList']
     NUploadTrigger: typeof import('naive-ui')['NUploadTrigger']
     NWatermark: typeof import('naive-ui')['NWatermark']
-    [key: string]: any
   }
 }
 export {}