naive-ui 2.30.4 → 2.30.7

package/es/date-picker/src/panel/use-dual-calendar.js

@@ -1,6 +1,6 @@
 import { inject, computed, watch, ref } from 'vue';
-import { addMonths, format, getYear, getMonth, startOfMonth, isValid, startOfSecond, startOfDay, set, getDate, getTime } from 'date-fns/esm';
-import { dateArray, strictParse, yearArray, monthArray, getDefaultTime, pluckValueFromRange } from '../utils';
+import { addMonths, format, getYear, getMonth, startOfMonth, isValid, startOfSecond, startOfDay, set, getDate, getTime, startOfQuarter } from 'date-fns/esm';
+import { dateArray, strictParse, yearArray, monthArray, getDefaultTime, pluckValueFromRange, quarterArray } from '../utils';
 import { usePanelCommon, usePanelCommonProps } from './use-panel-common';
 import { datePickerInjectionKey } from '../interface';
 import { MONTH_ITEM_HEIGHT, START_YEAR } from '../config';
@@ -113,6 +113,14 @@ function useDualCalendar(props, type) {
     const endYearArrayRef = computed(() => {
         return yearArray(pluckValueFromRange(props.value, 'end'), nowRef.value);
     });
+    const startQuarterArrayRef = computed(() => {
+        const startValue = pluckValueFromRange(props.value, 'start');
+        return quarterArray(startValue !== null && startValue !== void 0 ? startValue : Date.now(), startValue, nowRef.value);
+    });
+    const endQuarterArrayRef = computed(() => {
+        const endValue = pluckValueFromRange(props.value, 'end');
+        return quarterArray(endValue !== null && endValue !== void 0 ? endValue : Date.now(), endValue, nowRef.value);
+    });
     const startMonthArrayRef = computed(() => {
         const startValue = pluckValueFromRange(props.value, 'start');
         return monthArray(startValue !== null && startValue !== void 0 ? startValue : Date.now(), startValue, nowRef.value);
@@ -541,11 +549,17 @@ function useDualCalendar(props, type) {
     function handleColItemClick(dateItem, clickType) {
         const { value } = props;
         const noCurrentValue = !Array.isArray(value);
-        const itemTs = dateItem.type === 'year'
+        const itemTs = dateItem.type === 'year' && type !== 'yearrange'
             ? noCurrentValue
-                ? set(dateItem.ts, { month: getMonth(new Date()) }).valueOf()
+                ? set(dateItem.ts, {
+                    month: getMonth(type === 'quarterrange'
+                        ? startOfQuarter(new Date())
+                        : new Date())
+                }).valueOf()
                 : set(dateItem.ts, {
-                    month: getMonth(value[clickType === 'start' ? 0 : 1])
+                    month: getMonth(type === 'quarterrange'
+                        ? startOfQuarter(value[clickType === 'start' ? 0 : 1])
+                        : value[clickType === 'start' ? 0 : 1])
                 }).valueOf()
             : dateItem.ts;
         if (noCurrentValue) {
@@ -554,6 +568,7 @@ function useDualCalendar(props, type) {
             panelCommon.doUpdateValue(nextValue, props.panel);
             justifyColumnsScrollState(nextValue, 'start');
             justifyColumnsScrollState(nextValue, 'end');
+            panelCommon.disableTransitionOneTick();
             return;
         }
         const nextValue = [value[0], value[1]];
@@ -575,6 +590,7 @@ function useDualCalendar(props, type) {
         panelCommon.doUpdateValue(nextValue, props.panel);
         switch (type) {
             case 'monthrange':
+            case 'quarterrange':
                 panelCommon.disableTransitionOneTick();
                 if (otherPartsChanged) {
                     justifyColumnsScrollState(nextValue, 'start');
@@ -584,6 +600,10 @@ function useDualCalendar(props, type) {
                     justifyColumnsScrollState(nextValue, clickType);
                 }
                 break;
+            case 'yearrange':
+                panelCommon.disableTransitionOneTick();
+                justifyColumnsScrollState(nextValue, 'start');
+                justifyColumnsScrollState(nextValue, 'end');
         }
     }
     function handleStartYearVlScroll() {
@@ -636,7 +656,7 @@ function useDualCalendar(props, type) {
         endCalendarNextMonth,
         endCalendarNextYear,
         mergedIsDateDisabled,
-        changeStartEndTime, ranges: rangesRef, startCalendarMonth: startCalendarMonthRef, startCalendarYear: startCalendarYearRef, endCalendarMonth: endCalendarMonthRef, endCalendarYear: endCalendarYearRef, weekdays: weekdaysRef, startDateArray: startDateArrayRef, endDateArray: endDateArrayRef, startYearArray: startYearArrayRef, startMonthArray: startMonthArrayRef, endYearArray: endYearArrayRef, endMonthArray: endMonthArrayRef, isSelecting: isSelectingRef, handleRangeShortcutMouseenter,
+        changeStartEndTime, ranges: rangesRef, startCalendarMonth: startCalendarMonthRef, startCalendarYear: startCalendarYearRef, endCalendarMonth: endCalendarMonthRef, endCalendarYear: endCalendarYearRef, weekdays: weekdaysRef, startDateArray: startDateArrayRef, endDateArray: endDateArrayRef, startYearArray: startYearArrayRef, startMonthArray: startMonthArrayRef, startQuarterArray: startQuarterArrayRef, endYearArray: endYearArrayRef, endMonthArray: endMonthArrayRef, endQuarterArray: endQuarterArrayRef, isSelecting: isSelectingRef, handleRangeShortcutMouseenter,
         handleRangeShortcutClick }, panelCommon), validation), childComponentRefs), { 
         // datetimerangeonly
         startDateDisplayString: startDateInput, endDateInput: endDateInputRef, timePickerSize: panelCommon.timePickerSize, startTimeValue: startTimeValueRef, endTimeValue: endTimeValueRef, datePickerSlots, shortcuts: shortcutsRef, startCalendarDateTime: startCalendarDateTimeRef, endCalendarDateTime: endCalendarDateTimeRef, justifyColumnsScrollState, handleFocusDetectorFocus: panelCommon.handleFocusDetectorFocus, handleStartTimePickerChange,

package/es/date-picker/src/panel/use-panel-common.d.ts

@@ -183,6 +183,8 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
             calendarLeftPaddingYear: string;
             calendarLeftPaddingQuarter: string;
             calendarLeftPaddingMonthrange: string;
+            calendarLeftPaddingQuarterrange: string;
+            calendarLeftPaddingYearrange: string;
             calendarRightPaddingDate: string;
             calendarRightPaddingDatetime: string;
             calendarRightPaddingDaterange: string;
@@ -191,6 +193,8 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
             calendarRightPaddingYear: string;
             calendarRightPaddingQuarter: string;
             calendarRightPaddingMonthrange: string;
+            calendarRightPaddingQuarterrange: string;
+            calendarRightPaddingYearrange: string;
         };
         peers: {
             Input: import("../../../_mixins").Theme<"Input", {

package/es/date-picker/src/utils.d.ts

@@ -51,7 +51,7 @@ export interface QuarterItem {
  */
 declare function dateArray(monthTs: number, valueTs: number | [number, number] | null, currentTs: number, startDay: 0 | 1 | 2 | 3 | 4 | 5 | 6, strip?: boolean): DateItem[];
 declare function monthArray(yearAnchorTs: number, valueTs: number | null, currentTs: number): MonthItem[];
-declare function quarterArray(quarterTs: number, valueTs: number | null, currentTs: number): QuarterItem[];
+declare function quarterArray(yearAnchorTs: number, valueTs: number | null, currentTs: number): QuarterItem[];
 declare function yearArray(valueTs: number | null, currentTs: number): YearItem[];
 declare function strictParse(string: string, pattern: string, backup: Date, option: {
     locale: NDateLocale['locale'];

package/es/date-picker/src/utils.js

@@ -145,9 +145,9 @@ function monthArray(yearAnchorTs, valueTs, currentTs) {
     }
     return calendarMonths;
 }
-function quarterArray(quarterTs, valueTs, currentTs) {
+function quarterArray(yearAnchorTs, valueTs, currentTs) {
     const calendarQuarters = [];
-    const yearStart = startOfYear(quarterTs);
+    const yearStart = startOfYear(yearAnchorTs);
     for (let i = 0; i < 4; i++) {
         calendarQuarters.push(quarterItem(getTime(addQuarters(yearStart, i)), valueTs, currentTs));
     }

package/es/date-picker/styles/_common.d.ts

@@ -20,6 +20,8 @@ declare const _default: {
     calendarLeftPaddingYear: string;
     calendarLeftPaddingQuarter: string;
     calendarLeftPaddingMonthrange: string;
+    calendarLeftPaddingQuarterrange: string;
+    calendarLeftPaddingYearrange: string;
     calendarRightPaddingDate: string;
     calendarRightPaddingDatetime: string;
     calendarRightPaddingDaterange: string;
@@ -28,5 +30,7 @@ declare const _default: {
     calendarRightPaddingYear: string;
     calendarRightPaddingQuarter: string;
     calendarRightPaddingMonthrange: string;
+    calendarRightPaddingQuarterrange: string;
+    calendarRightPaddingYearrange: string;
 };
 export default _default;

package/es/date-picker/styles/_common.js

@@ -21,6 +21,8 @@ export default {
     calendarLeftPaddingYear: '0',
     calendarLeftPaddingQuarter: '0',
     calendarLeftPaddingMonthrange: '0',
+    calendarLeftPaddingQuarterrange: '0',
+    calendarLeftPaddingYearrange: '0',
     calendarRightPaddingDate: '6px 12px 4px 12px',
     calendarRightPaddingDatetime: '4px 12px',
     calendarRightPaddingDaterange: '6px 12px 4px 12px',
@@ -28,5 +30,7 @@ export default {
     calendarRightPaddingMonth: '0',
     calendarRightPaddingYear: '0',
     calendarRightPaddingQuarter: '0',
-    calendarRightPaddingMonthrange: '0'
+    calendarRightPaddingMonthrange: '0',
+    calendarRightPaddingQuarterrange: '0',
+    calendarRightPaddingYearrange: '0'
 };

package/es/date-picker/styles/light.d.ts

@@ -49,6 +49,8 @@ export declare const self: (vars: ThemeCommonVars) => {
     calendarLeftPaddingYear: string;
     calendarLeftPaddingQuarter: string;
     calendarLeftPaddingMonthrange: string;
+    calendarLeftPaddingQuarterrange: string;
+    calendarLeftPaddingYearrange: string;
     calendarRightPaddingDate: string;
     calendarRightPaddingDatetime: string;
     calendarRightPaddingDaterange: string;
@@ -57,6 +59,8 @@ export declare const self: (vars: ThemeCommonVars) => {
     calendarRightPaddingYear: string;
     calendarRightPaddingQuarter: string;
     calendarRightPaddingMonthrange: string;
+    calendarRightPaddingQuarterrange: string;
+    calendarRightPaddingYearrange: string;
 };
 export declare type DatePickerThemeVars = ReturnType<typeof self>;
 declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
@@ -109,6 +113,8 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
     calendarLeftPaddingYear: string;
     calendarLeftPaddingQuarter: string;
     calendarLeftPaddingMonthrange: string;
+    calendarLeftPaddingQuarterrange: string;
+    calendarLeftPaddingYearrange: string;
     calendarRightPaddingDate: string;
     calendarRightPaddingDatetime: string;
     calendarRightPaddingDaterange: string;
@@ -117,6 +123,8 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
     calendarRightPaddingYear: string;
     calendarRightPaddingQuarter: string;
     calendarRightPaddingMonthrange: string;
+    calendarRightPaddingQuarterrange: string;
+    calendarRightPaddingYearrange: string;
 }, {
     Input: import("../../_mixins").Theme<"Input", {
         countTextColor: string;

package/es/drawer/src/DrawerBodyWrapper.js

@@ -38,7 +38,7 @@ export default defineComponent({
             default: true
         },
         showMask: {
-            type: Boolean,
+            type: [Boolean, String],
             required: true
         },
         onClickoutside: Function,

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 = { privateShow: 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;

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,36 @@ 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) => {
+                if (!shouldStartLoadingRef.value)
+                    return;
                 showErrorRef.value = true;
                 const { onError, imgProps: { onError: imgPropsOnError } = {} } = props;
                 onError === null || onError === void 0 ? void 0 : onError(e);
@@ -57,18 +76,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;

package/es/image/src/utils.js

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

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

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

package/es/locales/common/viVN.d.ts

@@ -0,0 +1,3 @@
+import type { NLocale } from './enUS';
+declare const viVN: NLocale;
+export default viVN;