naive-ui 2.30.3 → 2.30.6

package/lib/data-table/src/styles/index.cssr.js

@@ -211,7 +211,9 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  background-color .3s var(--n-bezier),
  border-color .3s var(--n-bezier),
  color .3s var(--n-bezier);
- `, [(0, cssr_1.cM)('last-row', {
+ `, [(0, cssr_1.cM)('expand', [(0, cssr_1.cB)('data-table-expand-trigger', `
+ margin-right: 0;
+ `)]), (0, cssr_1.cM)('last-row', {
   borderBottom: '0 solid var(--n-merged-border-color)'
 }, [// make sure there is no overlap between bottom border and
 // fixed column box shadow
@@ -223,10 +225,13 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  background-color: var(--n-merged-th-color);
  `), (0, cssr_1.cM)('hover', {
   backgroundColor: 'var(--n-merged-td-color-hover)'
-}), (0, cssr_1.cM)('ellipsis', `
+}), (0, cssr_1.cE)('ellipsis', `
+ display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
+ max-width: 100%;
+ vertical-align: bottom;
  `), (0, cssr_1.cM)('selection, expand', `
  text-align: center;
  padding: 0;

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/data-table/src/use-expand.d.ts

@@ -1,7 +1,9 @@
+import { Ref } from 'vue';
+import { TreeMate } from 'treemate';
 import type { DataTableSetupProps } from './DataTable';
-import { RowKey } from './interface';
-export declare function useExpand(props: DataTableSetupProps): {
-    mergedExpandedRowKeysRef: import("vue").ComputedRef<RowKey[]>;
+import type { InternalRowData, RowKey } from './interface';
+export declare function useExpand(props: DataTableSetupProps, treeMateRef: Ref<TreeMate<InternalRowData, InternalRowData, InternalRowData>>): {
+    mergedExpandedRowKeysRef: import("vue").ComputedRef<import("treemate").Key[]>;
     renderExpandRef: import("vue").ComputedRef<import("./interface").RenderExpand<any> | undefined>;
     doUpdateExpandedRowKeys: (expandedKeys: RowKey[]) => void;
 };

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

@@ -5,7 +5,7 @@ const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const _utils_1 = require("../../_utils");
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function useExpand(props) {
+function useExpand(props, treeMateRef) {
     const renderExpandRef = (0, vooks_1.useMemo)(() => {
         for (const col of props.columns) {
             if (col.type === 'expand') {
@@ -16,7 +16,27 @@ function useExpand(props) {
             }
         }
     });
-    const uncontrolledExpandedRowKeysRef = (0, vue_1.ref)(props.defaultExpandedRowKeys);
+    // It's not reactive
+    let expandable;
+    for (const col of props.columns) {
+        if (col.type === 'expand') {
+            expandable = col.expandable;
+            break;
+        }
+    }
+    const uncontrolledExpandedRowKeysRef = (0, vue_1.ref)(props.defaultExpandAll
+        ? (renderExpandRef === null || renderExpandRef === void 0 ? void 0 : renderExpandRef.value)
+            ? (() => {
+                const expandedKeys = [];
+                treeMateRef.value.treeNodes.forEach((tmNode) => {
+                    if (expandable === null || expandable === void 0 ? void 0 : expandable(tmNode.rawNode)) {
+                        expandedKeys.push(tmNode.key);
+                    }
+                });
+                return expandedKeys;
+            })()
+            : treeMateRef.value.getNonLeafKeys()
+        : props.defaultExpandedRowKeys);
     const controlledExpandedRowKeysRef = (0, vue_1.toRef)(props, 'expandedRowKeys');
     const mergedExpandedRowKeysRef = (0, vooks_1.useMergedState)(controlledExpandedRowKeysRef, uncontrolledExpandedRowKeysRef);
     function doUpdateExpandedRowKeys(expandedKeys) {

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

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'vue';
 import type { SortOrder, TableBaseColumn, InternalRowData, SortOrderFlag, SortState, CreateRowClassName, TableSelectionColumn, TableColumn, TableExpandColumn } from './interface';
-export declare const selectionColWidth = 40;
-export declare const expandColWidth = 40;
+export declare const SELECTION_COL_WIDTH = 40;
+export declare const EXPAND_COL_WIDTH = 40;
 export declare function getNumberColWidth(col: TableColumn): number | undefined;
 export declare function getStringColWidth(col: TableColumn): string | undefined;
 export declare function getColKey(col: TableColumn): string | number;

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

@@ -1,15 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isColumnSorting = exports.createNextSorter = exports.isColumnFilterable = exports.isColumnSortable = exports.shouldUseArrayInSingleMode = exports.createRowClassName = exports.createCustomWidthStyle = exports.getFlagOfOrder = exports.createShallowClonedObject = exports.getColKey = exports.getStringColWidth = exports.getNumberColWidth = exports.expandColWidth = exports.selectionColWidth = void 0;
+exports.isColumnSorting = exports.createNextSorter = exports.isColumnFilterable = exports.isColumnSortable = exports.shouldUseArrayInSingleMode = exports.createRowClassName = exports.createCustomWidthStyle = exports.getFlagOfOrder = exports.createShallowClonedObject = exports.getColKey = exports.getStringColWidth = exports.getNumberColWidth = exports.EXPAND_COL_WIDTH = exports.SELECTION_COL_WIDTH = void 0;
 const seemly_1 = require("seemly");
 const _utils_1 = require("../../_utils");
-exports.selectionColWidth = 40;
-exports.expandColWidth = 40;
+exports.SELECTION_COL_WIDTH = 40;
+exports.EXPAND_COL_WIDTH = 40;
 function getNumberColWidth(col) {
-    if (col.type === 'selection')
-        return exports.selectionColWidth;
-    if (col.type === 'expand')
-        return exports.expandColWidth;
+    if (col.type === 'selection') {
+        return col.width === undefined ? exports.SELECTION_COL_WIDTH : (0, seemly_1.depx)(col.width);
+    }
+    if (col.type === 'expand') {
+        return col.width === undefined ? exports.EXPAND_COL_WIDTH : (0, seemly_1.depx)(col.width);
+    }
     if ('children' in col)
         return undefined;
     if (typeof col.width === 'string') {
@@ -21,10 +23,10 @@ exports.getNumberColWidth = getNumberColWidth;
 function getStringColWidth(col) {
     var _a, _b;
     if (col.type === 'selection') {
-        return (0, _utils_1.formatLength)((_a = col.width) !== null && _a !== void 0 ? _a : exports.selectionColWidth);
+        return (0, _utils_1.formatLength)((_a = col.width) !== null && _a !== void 0 ? _a : exports.SELECTION_COL_WIDTH);
     }
     if (col.type === 'expand') {
-        return (0, _utils_1.formatLength)((_b = col.width) !== null && _b !== void 0 ? _b : exports.expandColWidth);
+        return (0, _utils_1.formatLength)((_b = col.width) !== null && _b !== void 0 ? _b : exports.EXPAND_COL_WIDTH);
     }
     if ('children' in col) {
         return undefined;

package/lib/data-table/styles/light.d.ts

@@ -626,6 +626,77 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
             paddingLarge: string;
             clearSize: string;
         }, any>;
+        Popselect: import("../../_mixins").Theme<"Popselect", {
+            menuBoxShadow: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+            }, any>;
+            InternalSelectMenu: import("../../_mixins").Theme<"InternalSelectMenu", {
+                optionFontSizeSmall: string;
+                optionFontSizeMedium: string;
+                optionFontSizeLarge: string;
+                optionFontSizeHuge: string;
+                optionHeightSmall: string;
+                optionHeightMedium: string;
+                optionHeightLarge: string;
+                optionHeightHuge: string;
+                borderRadius: string;
+                color: string;
+                groupHeaderTextColor: string;
+                actionDividerColor: string;
+                optionTextColor: string;
+                optionTextColorPressed: string;
+                optionTextColorDisabled: string;
+                optionTextColorActive: string;
+                optionOpacityDisabled: string;
+                optionCheckColor: string;
+                optionColorPending: string;
+                optionColorActive: string;
+                optionColorActivePending: string;
+                actionTextColor: string;
+                loadingColor: string;
+                height: string;
+                paddingSmall: string;
+                paddingMedium: string;
+                paddingLarge: string;
+                paddingHuge: string;
+                optionPaddingSmall: string;
+                optionPaddingMedium: string;
+                optionPaddingLarge: string;
+                optionPaddingHuge: string;
+                loadingSize: string;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    color: string;
+                    colorHover: string;
+                }, any>;
+                Empty: import("../../_mixins").Theme<"Empty", {
+                    fontSizeSmall: string;
+                    fontSizeMedium: string;
+                    fontSizeLarge: string;
+                    fontSizeHuge: string;
+                    textColor: string;
+                    iconColor: string;
+                    extraTextColor: string;
+                    iconSizeSmall: string;
+                    iconSizeMedium: string;
+                    iconSizeLarge: string;
+                    iconSizeHuge: string;
+                }, any>;
+            }>;
+        }>;
     }>;
     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
         color: string;

package/lib/date-picker/src/DatePicker.d.ts

@@ -3948,8 +3948,9 @@ declare const _default: import("vue").DefineComponent<{
     isValueInvalid: import("vue").ComputedRef<boolean>;
     isStartValueInvalid: import("vue").ComputedRef<boolean>;
     isEndValueInvalid: import("vue").ComputedRef<boolean>;
+    handleInputKeydown: (e: KeyboardEvent) => void;
     handleClickOutside: (e: MouseEvent) => void;
-    handleKeyDown: (e: KeyboardEvent) => void;
+    handleKeydown: (e: KeyboardEvent) => void;
     handleClear: () => void;
     handlePanelClear: () => void;
     handleTriggerClick: (e: MouseEvent) => void;

package/lib/date-picker/src/DatePicker.js

@@ -307,11 +307,14 @@ exports.default = (0, vue_1.defineComponent)({
                 (0, _utils_1.call)(onUpdateShow, show);
             uncontrolledShowRef.value = show;
         }
-        function handleKeyDown(e) {
+        function handleKeydown(e) {
             if (e.key === 'Escape') {
-                closeCalendar({
-                    returnFocus: true
-                });
+                if (mergedShowRef.value) {
+                    (0, _utils_1.markEventEffectPerformed)(e);
+                    closeCalendar({
+                        returnFocus: true
+                    });
+                }
             }
             // We need to handle the conflict with normal date value input
             // const { value: mergedValue } = mergedValueRef
@@ -320,6 +323,12 @@ exports.default = (0, vue_1.defineComponent)({
             //   doUpdateValue(nextValue)
             // }
         }
+        function handleInputKeydown(e) {
+            if (e.key === 'Escape' && mergedShowRef.value) {
+                (0, _utils_1.markEventEffectPerformed)(e);
+                // closeCalendar will be called in handleDeactivated
+            }
+        }
         function handleClear() {
             var _a;
             doUpdateShow(false);
@@ -600,8 +609,9 @@ exports.default = (0, vue_1.defineComponent)({
             : undefined;
         return Object.assign(Object.assign({}, exposedMethods), { mergedStatus: mergedStatusRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, namespace: namespaceRef, uncontrolledValue: uncontrolledValueRef, pendingValue: pendingValueRef, panelInstRef,
             triggerElRef,
-            inputInstRef, isMounted: (0, vooks_1.useIsMounted)(), displayTime: singleInputValueRef, displayStartTime: rangeStartInputValueRef, displayEndTime: rangeEndInputValueRef, mergedShow: mergedShowRef, adjustedTo: (0, _utils_1.useAdjustedTo)(props), isRange: isRangeRef, localizedStartPlaceholder: localizedStartPlaceholderRef, localizedEndPlaceholder: localizedEndPlaceholderRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, localizedPlacehoder: localizedPlacehoderRef, isValueInvalid: uniVaidation.isValueInvalidRef, isStartValueInvalid: dualValidation.isStartValueInvalidRef, isEndValueInvalid: dualValidation.isEndValueInvalidRef, handleClickOutside,
-            handleKeyDown,
+            inputInstRef, isMounted: (0, vooks_1.useIsMounted)(), displayTime: singleInputValueRef, displayStartTime: rangeStartInputValueRef, displayEndTime: rangeEndInputValueRef, mergedShow: mergedShowRef, adjustedTo: (0, _utils_1.useAdjustedTo)(props), isRange: isRangeRef, localizedStartPlaceholder: localizedStartPlaceholderRef, localizedEndPlaceholder: localizedEndPlaceholderRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, localizedPlacehoder: localizedPlacehoderRef, isValueInvalid: uniVaidation.isValueInvalidRef, isStartValueInvalid: dualValidation.isStartValueInvalidRef, isEndValueInvalid: dualValidation.isEndValueInvalidRef, handleInputKeydown,
+            handleClickOutside,
+            handleKeydown,
             handleClear,
             handlePanelClear,
             handleTriggerClick,
@@ -623,7 +633,7 @@ exports.default = (0, vue_1.defineComponent)({
             onTabOut: this.handlePanelTabOut,
             onClose: this.handlePanelClose,
             onClear: this.handlePanelClear,
-            onKeydown: this.handleKeyDown,
+            onKeydown: this.handleKeydown,
             onConfirm: this.handlePanelConfirm,
             ref: 'panelInstRef',
             value: this.pendingValue,
@@ -653,6 +663,7 @@ exports.default = (0, vue_1.defineComponent)({
             clearable,
             onClear: this.handleClear,
             onClick: this.handleTriggerClick,
+            onKeydown: this.handleInputKeydown,
             onActivate: this.handleInputActivate,
             onDeactivate: this.handleInputDeactivate,
             onFocus: this.handleInputFocus,
@@ -663,7 +674,7 @@ exports.default = (0, vue_1.defineComponent)({
                 this.mergedDisabled && `${mergedClsPrefix}-date-picker--disabled`,
                 this.isRange && `${mergedClsPrefix}-date-picker--range`,
                 this.triggerThemeClass
-            ], style: this.triggerCssVars, onKeydown: this.handleKeyDown },
+            ], style: this.triggerCssVars, onKeydown: this.handleKeydown },
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
                     (0, vue_1.h)(vueuc_1.VTarget, null, {

package/lib/date-picker/src/panel/month.js

@@ -32,6 +32,7 @@ exports.default = (0, vue_1.defineComponent)({
                     return `Q ${item.dateObject.quarter}`;
             }
         };
+        const { useAsQuickJump } = props;
         const renderItem = (item, i, mergedClsPrefix) => {
             const { mergedIsDateDisabled, handleDateClick, handleQuickMonthClick } = useCalendarRef;
             return ((0, vue_1.h)("div", { "data-n-date": true, key: i, class: [
@@ -39,10 +40,10 @@ exports.default = (0, vue_1.defineComponent)({
                     {
                         [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--current`]: item.isCurrent,
                         [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--selected`]: item.selected,
-                        [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--disabled`]: mergedIsDateDisabled(item.ts)
+                        [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--disabled`]: !useAsQuickJump && mergedIsDateDisabled(item.ts)
                     }
                 ], onClick: () => {
-                    props.useAsQuickJump
+                    useAsQuickJump
                         ? handleQuickMonthClick(item, (value) => props.onUpdateValue(value, false))
                         : handleDateClick(item);
                 } }, getRenderContent(item)));

package/lib/drawer/src/Drawer.d.ts

@@ -295,7 +295,7 @@ declare const _default: import("vue").DefineComponent<{
     namespace: import("vue").ComputedRef<string | undefined>;
     mergedBodyStyle: import("vue").ComputedRef<(string | CSSProperties)[]>;
     handleMaskClick: (e: MouseEvent) => void;
-    handleEsc: () => void;
+    handleEsc: (e: KeyboardEvent) => void;
     mergedTheme: import("vue").ComputedRef<{
         common: {
             baseColor: string;

package/lib/drawer/src/Drawer.js

@@ -108,10 +108,10 @@ exports.default = (0, vue_1.defineComponent)({
                 onMaskClick(e);
         }
         const isComposingRef = (0, _utils_1.useIsComposing)();
-        function handleEsc() {
+        function handleEsc(e) {
             var _a;
             (_a = props.onEsc) === null || _a === void 0 ? void 0 : _a.call(props);
-            if (props.closeOnEsc) {
+            if (props.show && props.closeOnEsc && (0, _utils_1.eventEffectNotPerformed)(e)) {
                 !isComposingRef.value && doUpdateShow(false);
             }
         }

package/lib/drawer/src/DrawerBodyWrapper.d.ts

@@ -36,7 +36,7 @@ declare const _default: import("vue").DefineComponent<{
     onClickoutside: PropType<(e: MouseEvent) => void>;
     onAfterLeave: PropType<() => void>;
     onAfterEnter: PropType<() => void>;
-    onEsc: PropType<() => void>;
+    onEsc: PropType<(e: KeyboardEvent) => void>;
 }, {
     bodyRef: import("vue").Ref<HTMLElement | null>;
     mergedClsPrefix: import("vue").Ref<string>;
@@ -222,7 +222,7 @@ declare const _default: import("vue").DefineComponent<{
     onClickoutside: PropType<(e: MouseEvent) => void>;
     onAfterLeave: PropType<() => void>;
     onAfterEnter: PropType<() => void>;
-    onEsc: PropType<() => void>;
+    onEsc: PropType<(e: KeyboardEvent) => void>;
 }>>, {
     show: boolean | undefined;
     autoFocus: boolean;

package/lib/dropdown/src/Dropdown.d.ts

@@ -323,6 +323,7 @@ declare const dropdownProps: {
     readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    readonly internalDeactivateImmediately: BooleanConstructor;
     readonly internalSyncTargetWithParent: BooleanConstructor;
     readonly internalInheritedEventHandlers: {
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
@@ -646,6 +647,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    readonly internalDeactivateImmediately: BooleanConstructor;
     readonly internalSyncTargetWithParent: BooleanConstructor;
     readonly internalInheritedEventHandlers: {
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
@@ -1160,6 +1162,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    readonly internalDeactivateImmediately: BooleanConstructor;
     readonly internalSyncTargetWithParent: BooleanConstructor;
     readonly internalInheritedEventHandlers: {
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
@@ -1199,6 +1202,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly arrowPointToCenter: boolean;
     readonly displayDirective: "show" | "if";
     readonly keepAliveOnHover: boolean;
+    readonly internalDeactivateImmediately: boolean;
     readonly animated: boolean;
     readonly internalTrapFocus: boolean;
     readonly defaultShow: boolean;

package/lib/dynamic-tags/src/DynamicTags.js

@@ -92,7 +92,7 @@ exports.default = (0, vue_1.defineComponent)({
             const nextValue = externalValue !== null && externalValue !== void 0 ? externalValue : inputValueRef.value;
             if (nextValue) {
                 const tags = mergedValueRef.value.slice(0);
-                tags.push(nextValue);
+                tags.push(props.onCreate(nextValue));
                 doChange(tags);
             }
             showInputRef.value = false;

package/lib/grid/src/Grid.d.ts

@@ -27,6 +27,7 @@ declare const gridProps: {
     };
 };
 export interface NGridInjection {
+    isSsrRef: Ref<boolean>;
     itemStyleRef: Ref<CSSProperties | string | undefined>;
     xGapRef: Ref<string | undefined>;
     overflowRef: Ref<boolean>;
@@ -57,6 +58,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: 0;
     };
 }, {
+    isSsr: boolean;
+    contentEl: Ref<HTMLElement | undefined>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     style: import("vue").ComputedRef<CSSProperties>;
     isResponsive: import("vue").ComputedRef<boolean>;

package/lib/grid/src/Grid.js

@@ -9,6 +9,7 @@ const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const config_2 = require("./config");
 const defaultCols = 24;
+const SSR_ATTR_NAME = '__ssr__';
 const gridProps = {
     responsive: {
         type: [String, Boolean],
@@ -79,12 +80,27 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return undefined;
         });
+        // for SSR, fix bug https://github.com/TuSimple/naive-ui/issues/2462
+        const isSsrRef = (0, vue_1.ref)(false);
+        const contentElRef = (0, vue_1.ref)();
+        (0, vue_1.onMounted)(() => {
+            const { value: contentEl } = contentElRef;
+            if (contentEl) {
+                if (contentEl.hasAttribute(SSR_ATTR_NAME)) {
+                    contentEl.removeAttribute(SSR_ATTR_NAME);
+                    isSsrRef.value = true;
+                }
+            }
+        });
         (0, vue_1.provide)(config_2.gridInjectionKey, {
+            isSsrRef,
             itemStyleRef: (0, vue_1.toRef)(props, 'itemStyle'),
             xGapRef: responsiveXGapRef,
             overflowRef
         });
         return {
+            isSsr: !_utils_1.isBrowser,
+            contentEl: contentElRef,
             mergedClsPrefix: mergedClsPrefixRef,
             style: (0, vue_1.computed)(() => {
                 return {
@@ -104,7 +120,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 +128,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 +166,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 +177,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 +206,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;
                         }
@@ -183,8 +219,10 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
             return (0, vue_1.h)('div', (0, vue_1.mergeProps)({
+                ref: 'contentEl',
                 class: `${this.mergedClsPrefix}-grid`,
-                style: this.style
+                style: this.style,
+                [SSR_ATTR_NAME]: this.isSsr || undefined
             }, this.$attrs), childrenAndRawSpan.map(({ child }) => child));
         };
         return this.isResponsive && this.responsive === 'self' ? ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleResize }, {

package/lib/grid/src/GridItem.js

@@ -32,7 +32,7 @@ exports.default = (0, vue_1.defineComponent)({
     alias: ['Gi'],
     props: exports.gridItemProps,
     setup() {
-        const { xGapRef, itemStyleRef, overflowRef
+        const { isSsrRef, xGapRef, itemStyleRef, overflowRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(config_1.gridInjectionKey);
         const self = (0, vue_1.getCurrentInstance)();
@@ -40,6 +40,7 @@ exports.default = (0, vue_1.defineComponent)({
             overflow: overflowRef,
             itemStyle: itemStyleRef,
             deriveStyle: () => {
+                void isSsrRef.value;
                 // Here is quite a hack, I hope there is a better way to solve it
                 const { privateSpan = exports.defaultSpan, privateShow = true, privateColStart = undefined, privateOffset = 0
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

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;