naive-ui 2.30.3 → 2.30.6

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

@@ -202,7 +202,9 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('base-loading', `
  background-color .3s var(--n-bezier),
  border-color .3s var(--n-bezier),
  color .3s var(--n-bezier);
- `, [cM('last-row', {
+ `, [cM('expand', [cB('data-table-expand-trigger', `
+ margin-right: 0;
+ `)]), 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
@@ -214,10 +216,13 @@ c('&::after', {
  background-color: var(--n-merged-th-color);
  `), cM('hover', {
   backgroundColor: 'var(--n-merged-td-color-hover)'
-}), cM('ellipsis', `
+}), cE('ellipsis', `
+ display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
+ max-width: 100%;
+ vertical-align: bottom;
  `), cM('selection, expand', `
  text-align: center;
  padding: 0;

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

@@ -2,7 +2,7 @@ import { toRef, ref } from 'vue';
 import { useMemo, useMergedState } from 'vooks';
 import { call, warn } from '../../_utils';
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function useExpand(props) {
+export function useExpand(props, treeMateRef) {
     const renderExpandRef = useMemo(() => {
         for (const col of props.columns) {
             if (col.type === 'expand') {
@@ -13,7 +13,27 @@ export function useExpand(props) {
             }
         }
     });
-    const uncontrolledExpandedRowKeysRef = 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 = 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 = toRef(props, 'expandedRowKeys');
     const mergedExpandedRowKeysRef = useMergedState(controlledExpandedRowKeysRef, uncontrolledExpandedRowKeysRef);
     function doUpdateExpandedRowKeys(expandedKeys) {

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

@@ -1,12 +1,14 @@
 import { depx } from 'seemly';
 import { formatLength } from '../../_utils';
-export const selectionColWidth = 40;
-export const expandColWidth = 40;
+export const SELECTION_COL_WIDTH = 40;
+export const EXPAND_COL_WIDTH = 40;
 export function getNumberColWidth(col) {
-    if (col.type === 'selection')
-        return selectionColWidth;
-    if (col.type === 'expand')
-        return expandColWidth;
+    if (col.type === 'selection') {
+        return col.width === undefined ? SELECTION_COL_WIDTH : depx(col.width);
+    }
+    if (col.type === 'expand') {
+        return col.width === undefined ? EXPAND_COL_WIDTH : depx(col.width);
+    }
     if ('children' in col)
         return undefined;
     if (typeof col.width === 'string') {
@@ -17,10 +19,10 @@ export function getNumberColWidth(col) {
 export function getStringColWidth(col) {
     var _a, _b;
     if (col.type === 'selection') {
-        return formatLength((_a = col.width) !== null && _a !== void 0 ? _a : selectionColWidth);
+        return formatLength((_a = col.width) !== null && _a !== void 0 ? _a : SELECTION_COL_WIDTH);
     }
     if (col.type === 'expand') {
-        return formatLength((_b = col.width) !== null && _b !== void 0 ? _b : expandColWidth);
+        return formatLength((_b = col.width) !== null && _b !== void 0 ? _b : EXPAND_COL_WIDTH);
     }
     if ('children' in col) {
         return undefined;

package/es/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/es/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/es/date-picker/src/DatePicker.js

@@ -8,7 +8,7 @@ import { DateIcon, ToIcon } from '../../_internal/icons';
 import { NInput } from '../../input';
 import { NBaseIcon } from '../../_internal';
 import { useFormItem, useTheme, useConfig, useLocale, useThemeClass } from '../../_mixins';
-import { warn, call, useAdjustedTo, createKey, warnOnce, resolveSlot } from '../../_utils';
+import { warn, call, useAdjustedTo, createKey, warnOnce, resolveSlot, markEventEffectPerformed } from '../../_utils';
 import { datePickerLight } from '../styles';
 import { strictParse } from './utils';
 import { uniCalendarValidation, dualCalendarValidation } from './validation-utils';
@@ -302,11 +302,14 @@ export default defineComponent({
                 call(onUpdateShow, show);
             uncontrolledShowRef.value = show;
         }
-        function handleKeyDown(e) {
+        function handleKeydown(e) {
             if (e.key === 'Escape') {
-                closeCalendar({
-                    returnFocus: true
-                });
+                if (mergedShowRef.value) {
+                    markEventEffectPerformed(e);
+                    closeCalendar({
+                        returnFocus: true
+                    });
+                }
             }
             // We need to handle the conflict with normal date value input
             // const { value: mergedValue } = mergedValueRef
@@ -315,6 +318,12 @@ export default defineComponent({
             //   doUpdateValue(nextValue)
             // }
         }
+        function handleInputKeydown(e) {
+            if (e.key === 'Escape' && mergedShowRef.value) {
+                markEventEffectPerformed(e);
+                // closeCalendar will be called in handleDeactivated
+            }
+        }
         function handleClear() {
             var _a;
             doUpdateShow(false);
@@ -595,8 +604,9 @@ export default defineComponent({
             : undefined;
         return Object.assign(Object.assign({}, exposedMethods), { mergedStatus: mergedStatusRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, namespace: namespaceRef, uncontrolledValue: uncontrolledValueRef, pendingValue: pendingValueRef, panelInstRef,
             triggerElRef,
-            inputInstRef, isMounted: useIsMounted(), displayTime: singleInputValueRef, displayStartTime: rangeStartInputValueRef, displayEndTime: rangeEndInputValueRef, mergedShow: mergedShowRef, adjustedTo: 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: useIsMounted(), displayTime: singleInputValueRef, displayStartTime: rangeStartInputValueRef, displayEndTime: rangeEndInputValueRef, mergedShow: mergedShowRef, adjustedTo: 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,
@@ -618,7 +628,7 @@ export default defineComponent({
             onTabOut: this.handlePanelTabOut,
             onClose: this.handlePanelClose,
             onClear: this.handlePanelClear,
-            onKeydown: this.handleKeyDown,
+            onKeydown: this.handleKeydown,
             onConfirm: this.handlePanelConfirm,
             ref: 'panelInstRef',
             value: this.pendingValue,
@@ -648,6 +658,7 @@ export default defineComponent({
             clearable,
             onClear: this.handleClear,
             onClick: this.handleTriggerClick,
+            onKeydown: this.handleInputKeydown,
             onActivate: this.handleInputActivate,
             onDeactivate: this.handleInputDeactivate,
             onFocus: this.handleInputFocus,
@@ -658,7 +669,7 @@ export default 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 },
             h(VBinder, null, {
                 default: () => [
                     h(VTarget, null, {

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

@@ -30,6 +30,7 @@ export default defineComponent({
                     return `Q ${item.dateObject.quarter}`;
             }
         };
+        const { useAsQuickJump } = props;
         const renderItem = (item, i, mergedClsPrefix) => {
             const { mergedIsDateDisabled, handleDateClick, handleQuickMonthClick } = useCalendarRef;
             return (h("div", { "data-n-date": true, key: i, class: [
@@ -37,10 +38,10 @@ export default 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/es/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/es/drawer/src/Drawer.js

@@ -3,7 +3,7 @@ import { VLazyTeleport } from 'vueuc';
 import { zindexable } from 'vdirs';
 import { useIsMounted } from 'vooks';
 import { useTheme, useConfig, useThemeClass } from '../../_mixins';
-import { formatLength, call, warnOnce, useIsComposing } from '../../_utils';
+import { formatLength, call, warnOnce, useIsComposing, eventEffectNotPerformed } from '../../_utils';
 import { drawerLight } from '../styles';
 import NDrawerBodyWrapper from './DrawerBodyWrapper';
 import { drawerInjectionKey } from './interface';
@@ -103,10 +103,10 @@ export default defineComponent({
                 onMaskClick(e);
         }
         const isComposingRef = 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 && eventEffectNotPerformed(e)) {
                 !isComposingRef.value && doUpdateShow(false);
             }
         }

package/es/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/es/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/es/dynamic-tags/src/DynamicTags.js

@@ -87,7 +87,7 @@ export default 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/es/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/es/grid/src/Grid.js

@@ -1,12 +1,13 @@
-import { h, defineComponent, computed, provide, toRef, mergeProps, ref, cloneVNode } from 'vue';
+import { h, defineComponent, computed, provide, toRef, mergeProps, ref, cloneVNode, vShow, onMounted } 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, isBrowser, isNodeVShowFalse } from '../../_utils';
 import { defaultSpan, gridInjectionKey } from './config';
 const defaultCols = 24;
+const SSR_ATTR_NAME = '__ssr__';
 const gridProps = {
     responsive: {
         type: [String, Boolean],
@@ -77,12 +78,27 @@ export default defineComponent({
             }
             return undefined;
         });
+        // for SSR, fix bug https://github.com/TuSimple/naive-ui/issues/2462
+        const isSsrRef = ref(false);
+        const contentElRef = ref();
+        onMounted(() => {
+            const { value: contentEl } = contentElRef;
+            if (contentEl) {
+                if (contentEl.hasAttribute(SSR_ATTR_NAME)) {
+                    contentEl.removeAttribute(SSR_ATTR_NAME);
+                    isSsrRef.value = true;
+                }
+            }
+        });
         provide(gridInjectionKey, {
+            isSsrRef,
             itemStyleRef: toRef(props, 'itemStyle'),
             xGapRef: responsiveXGapRef,
             overflowRef
         });
         return {
+            isSsr: !isBrowser,
+            contentEl: contentElRef,
             mergedClsPrefix: mergedClsPrefixRef,
             style: computed(() => {
                 return {
@@ -102,7 +118,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 +126,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 +164,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 +175,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 +204,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;
                         }
@@ -181,8 +217,10 @@ export default defineComponent({
                 }
             }
             return h('div', 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' ? (h(VResizeObserver, { onResize: this.handleResize }, {

package/es/grid/src/GridItem.js

@@ -29,7 +29,7 @@ export default defineComponent({
     alias: ['Gi'],
     props: gridItemProps,
     setup() {
-        const { xGapRef, itemStyleRef, overflowRef
+        const { isSsrRef, xGapRef, itemStyleRef, overflowRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(gridInjectionKey);
         const self = getCurrentInstance();
@@ -37,6 +37,7 @@ export default 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 = defaultSpan, privateShow = true, privateColStart = undefined, privateOffset = 0
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

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;