naive-ui 2.30.4 → 2.30.5

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

@@ -3,9 +3,8 @@ import { on, off } from 'evtd';
 import { VResizeObserver } from 'vueuc';
 import { useIsIos } from 'vooks';
 import { useConfig, useTheme, useThemeClass } from '../../../_mixins';
-import { useReactivated } from '../../../_utils';
+import { useReactivated, Wrapper } from '../../../_utils';
 import { scrollbarLight } from '../styles';
-import { Wrapper } from './Wrapper';
 import style from './styles/index.cssr';
 const scrollbarProps = Object.assign(Object.assign({}, useTheme.props), { size: {
         type: Number,

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

@@ -4,7 +4,7 @@ import { VOverflow } from 'vueuc';
 import { NPopover } from '../../../popover';
 import { NTag } from '../../../tag';
 import { useThemeClass, useTheme } from '../../../_mixins';
-import { createKey, getTitleAttribute, render, useOnResize } from '../../../_utils';
+import { createKey, getTitleAttribute, render, useOnResize, Wrapper } from '../../../_utils';
 import Suffix from '../../suffix';
 import { internalSelectionLight } from '../styles';
 import style from './styles/index.cssr';
@@ -426,8 +426,10 @@ export default defineComponent({
         const maxTagCountResponsive = maxTagCount === 'responsive';
         const maxTagCountNumeric = typeof maxTagCount === 'number';
         const useMaxTagCount = maxTagCountResponsive || maxTagCountNumeric;
-        const suffix = (h(Suffix, { 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 = (h(Wrapper, null, {
+            default: () => (h(Suffix, { 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/es/_utils/dom/index.d.ts

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

package/es/_utils/dom/index.js

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

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

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

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

@@ -0,0 +1,3 @@
+export function isDocument(node) {
+    return node.nodeName === '#document';
+}

package/es/_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/es/_utils/index.js

@@ -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 { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute } from './naive';
 export { formatLength, color2Class } from './css';
 export { createKey } from './cssr';
@@ -6,3 +6,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/es/_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/es/_utils/vue/index.js

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

package/es/_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/es/_utils/vue/is-node-v-show-false.js

@@ -0,0 +1,6 @@
+import { vShow } from 'vue';
+export function isNodeVShowFalse(vNode) {
+    var _a;
+    const showDir = (_a = vNode.dirs) === null || _a === void 0 ? void 0 : _a.find(({ dir }) => dir === vShow);
+    return !!(showDir && showDir.value === false);
+}

package/es/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/es/back-top/src/BackTop.js

@@ -4,7 +4,7 @@ import { useIsMounted, useMergedState } from 'vooks';
 import { getScrollParent, unwrapElement } from 'seemly';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { NBaseIcon } from '../../_internal';
-import { lockHtmlScrollRightCompensationRef, formatLength, resolveSlot, warn, warnOnce } from '../../_utils';
+import { lockHtmlScrollRightCompensationRef, formatLength, resolveSlot, isDocument, warn, warnOnce } from '../../_utils';
 import { backTopLight } from '../styles';
 import BackTopIcon from './BackTopIcon';
 import style from './styles/index.cssr';
@@ -50,15 +50,20 @@ export default defineComponent({
         }
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const scrollTopRef = ref(null);
-        const uncontrolledShowRef = computed(() => {
-            if (scrollTopRef.value === null)
-                return false;
-            return scrollTopRef.value >= props.visibilityHeight;
+        const uncontrolledShowRef = ref(false);
+        watchEffect(() => {
+            const { value: scrollTop } = scrollTopRef;
+            if (scrollTop === null) {
+                uncontrolledShowRef.value = false;
+                return;
+            }
+            uncontrolledShowRef.value = scrollTop >= props.visibilityHeight;
         });
         const DomInfoReadyRef = ref(false);
         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 = toRef(props, 'show');
@@ -98,39 +103,27 @@ export default 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) {
                 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() {
+            ;
+            (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 = (isDocument(scrollElement) ? document.documentElement : scrollElement).scrollTop;
             if (!DomInfoReadyRef.value) {
                 void nextTick(() => {
                     DomInfoReadyRef.value = true;

package/es/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/es/data-table/src/DataTable.js

@@ -60,7 +60,7 @@ export const dataTableProps = Object.assign(Object.assign({}, useTheme.props), {
     }, 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] });
 export default defineComponent({
@@ -204,7 +204,8 @@ export default defineComponent({
             doUpdateExpandedRowKeys,
             handleTableHeaderScroll,
             handleTableBodyScroll,
-            setHeaderScrollLeft
+            setHeaderScrollLeft,
+            renderCell: toRef(props, 'renderCell')
         });
         const exposedMethods = {
             filter,

package/es/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/es/data-table/src/TableParts/Body.js

@@ -77,7 +77,7 @@ export default 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
          } = inject(dataTableInjectionKey);
         const scrollbarInstRef = ref(null);
@@ -308,7 +308,8 @@ export default defineComponent({
             virtualListContent,
             handleTableBodyScroll,
             handleCheckboxUpdateChecked,
-            handleUpdateExpanded }, exposedMethods);
+            handleUpdateExpanded,
+            renderCell }, exposedMethods);
     },
     render() {
         const { mergedTheme, scrollX, mergedClsPrefix, virtualScroll, maxHeight, mergedTableLayout, flexHeight, loadingKeySet, onResize, setHeaderScrollLeft } = this;
@@ -511,7 +512,7 @@ export default defineComponent({
                                 ]
                                 : null,
                             column.type === 'selection' ? (!isSummary ? (h(RenderSafeCheckbox, { 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)) ? (h(ExpandTrigger, { clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => handleUpdateExpanded(rowKey, null) })) : null) : null) : (h(Cell, { index: rowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme }))));
+                                ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? (h(ExpandTrigger, { clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => handleUpdateExpanded(rowKey, null) })) : null) : null) : (h(Cell, { index: rowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme, renderCell: this.renderCell }))));
                     })));
                     return row;
                 };

package/es/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/es/data-table/src/TableParts/Cell.js

@@ -20,11 +20,13 @@ export default 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);
         }
@@ -33,7 +35,9 @@ export default defineComponent({
                 cell = row[key].value;
             }
             else {
-                cell = get(row, key);
+                cell = renderCell
+                    ? renderCell(get(row, key), row, column)
+                    : get(row, key);
             }
         }
         if (ellipsis && typeof ellipsis === 'object') {

package/es/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/es/data-table/src/use-check.js

@@ -50,12 +50,20 @@ export 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)
-            call(_onUpdateCheckedRowKeys, keys);
+            call(_onUpdateCheckedRowKeys, keys, rows);
         if (onUpdateCheckedRowKeys)
-            call(onUpdateCheckedRowKeys, keys);
+            call(onUpdateCheckedRowKeys, keys, rows);
         if (onCheckedRowKeysChange)
-            call(onCheckedRowKeysChange, keys);
+            call(onCheckedRowKeysChange, keys, rows);
         uncontrolledCheckedRowKeysRef.value = keys;
     }
     function doCheck(rowKey) {

package/es/grid/src/Grid.js

@@ -1,10 +1,10 @@
-import { h, defineComponent, computed, provide, toRef, mergeProps, ref, cloneVNode } from 'vue';
+import { h, defineComponent, computed, provide, toRef, mergeProps, ref, cloneVNode, vShow } from 'vue';
 import { useBreakpoints, useMemo } from 'vooks';
 import { VResizeObserver } from 'vueuc';
 import { pxfy, parseResponsivePropValue, beforeNextFrameOnce } from 'seemly';
 import { defaultBreakpoints } from '../../config-provider/src/config';
 import { useConfig } from '../../_mixins';
-import { getSlot, flatten } from '../../_utils';
+import { getSlot, flatten, isNodeVShowFalse } from '../../_utils';
 import { defaultSpan, gridInjectionKey } from './config';
 const defaultCols = 24;
 const gridProps = {
@@ -102,7 +102,7 @@ export default 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
@@ -110,11 +110,28 @@ export default 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 (isNodeVShowFalse(child)) {
+                    const clonedNode = 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 !== vShow)) || null;
                 const clonedChild = cloneVNode(child);
-                const rawChildSpan = Number((_c = parseResponsivePropValue((_b = clonedChild.props) === null || _b === void 0 ? void 0 : _b.span, responsiveQuery)) !== null && _c !== void 0 ? _c : defaultSpan);
+                const rawChildSpan = Number((_d = parseResponsivePropValue((_c = clonedChild.props) === null || _c === void 0 ? void 0 : _c.span, responsiveQuery)) !== null && _d !== void 0 ? _d : defaultSpan);
                 if (rawChildSpan === 0)
                     return;
                 childrenAndRawSpan.push({
@@ -131,7 +148,8 @@ export default 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;
@@ -141,8 +159,9 @@ export default defineComponent({
                     this.overflow = true;
                 }
                 if (!done) {
-                    const childOffset = Number((_f = 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 = 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,
@@ -169,6 +188,7 @@ export default defineComponent({
                 }
                 if (done) {
                     if (child.props) {
+                        // suffix node's privateShow may be true
                         if (child.props.privateShow !== true) {
                             child.props.privateShow = false;
                         }

package/es/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/es/image/src/Image.js

@@ -1,9 +1,10 @@
-import { defineComponent, h, inject, ref, toRef, watchEffect, onMounted } from 'vue';
+import { defineComponent, h, inject, ref, toRef, watchEffect, onMounted, onBeforeUnmount } from 'vue';
 import NImagePreview from './ImagePreview';
 import { imageGroupInjectionKey } from './ImageGroup';
 import { useConfig } from '../../_mixins';
 import { imagePreviewSharedProps } from './interface';
-const imageProps = Object.assign({ alt: String, height: [String, Number], imgProps: Object, objectFit: {
+import { observeIntersection } from './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 }, imagePreviewSharedProps);
@@ -37,18 +38,34 @@ export default defineComponent({
                 previewInst.toggleShow();
             }
         };
+        const shouldStartLoadingRef = ref(!props.lazy);
         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) || '');
         });
+        onMounted(() => {
+            let unobserve;
+            const stopWatchHandle = watchEffect(() => {
+                unobserve === null || unobserve === void 0 ? void 0 : unobserve();
+                unobserve = undefined;
+                if (props.lazy) {
+                    unobserve = observeIntersection(imageRef.value, props.intersectionObserverOptions, shouldStartLoadingRef);
+                }
+            });
+            onBeforeUnmount(() => {
+                stopWatchHandle();
+                unobserve === null || unobserve === void 0 ? void 0 : unobserve();
+            });
+        });
         watchEffect(() => {
             var _a;
             void props.src;
             void ((_a = props.imgProps) === null || _a === void 0 ? void 0 : _a.src);
             showErrorRef.value = false;
         });
+        const loadedRef = 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);
@@ -57,18 +74,33 @@ export default 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 = (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 = (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 (h("div", Object.assign({}, $attrs, { role: "none", class: [
                 $attrs.class,
                 `${mergedClsPrefix}-image`,
                 (this.previewDisabled || this.showError) &&
                     `${mergedClsPrefix}-image--preview-disabled`
-            ] }), this.groupId ? (imgNode) : (h(NImagePreview, { theme: this.theme, themeOverrides: this.themeOverrides, clsPrefix: mergedClsPrefix, ref: "previewInstRef", showToolbar: this.showToolbar, showToolbarTooltip: this.showToolbarTooltip }, {
-            default: () => imgNode
-        }))));
+            ] }),
+            this.groupId ? (imgNode) : (h(NImagePreview, { theme: this.theme, themeOverrides: this.themeOverrides, clsPrefix: mergedClsPrefix, ref: "previewInstRef", showToolbar: this.showToolbar, showToolbarTooltip: this.showToolbarTooltip }, {
+                default: () => imgNode
+            })),
+            !loaded && placeholderNode));
     }
 });

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