naive-ui 2.35.0 → 2.36.0

package/lib/card/src/Card.js

@@ -14,9 +14,13 @@ const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.cardBaseProps = {
     title: String,
+    contentClass: String,
     contentStyle: [Object, String],
+    headerClass: String,
     headerStyle: [Object, String],
+    headerExtraClass: String,
     headerExtraStyle: [Object, String],
+    footerClass: String,
     footerStyle: [Object, String],
     embedded: Boolean,
     segmented: {
@@ -107,7 +111,7 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { segmented, bordered, hoverable, mergedClsPrefix, rtlEnabled, onRender, embedded, tag: Component, $slots } = this;
+        const { footerStyle, headerExtraClass, headerClass, contentClass, segmented, bordered, hoverable, mergedClsPrefix, rtlEnabled, onRender, embedded, tag: Component, $slots } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)(Component, { class: [
                 `${mergedClsPrefix}-card`,
@@ -128,14 +132,17 @@ exports.default = (0, vue_1.defineComponent)({
             ], style: this.cssVars, role: this.role },
             (0, _utils_1.resolveWrappedSlot)($slots.cover, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-cover`, role: "none" }, children))),
             (0, _utils_1.resolveWrappedSlot)($slots.header, (children) => {
-                return children || this.title || this.closable ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header`, style: this.headerStyle },
+                return children || this.title || this.closable ? ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-card-header`, headerClass], style: this.headerStyle },
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header__main`, role: "heading" }, children || this.title),
-                    (0, _utils_1.resolveWrappedSlot)($slots['header-extra'], (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header__extra`, style: this.headerExtraStyle }, children))),
+                    (0, _utils_1.resolveWrappedSlot)($slots['header-extra'], (children) => children && ((0, vue_1.h)("div", { class: [
+                            `${mergedClsPrefix}-card-header__extra`,
+                            headerExtraClass
+                        ], style: this.headerExtraStyle }, children))),
                     this.closable ? ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-card-header__close`, onClick: this.handleCloseClick, absolute: true })) : null)) : null;
             }),
-            (0, _utils_1.resolveWrappedSlot)($slots.default, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card__content`, style: this.contentStyle, role: "none" }, children))),
+            (0, _utils_1.resolveWrappedSlot)($slots.default, (children) => children && ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-card__content`, contentClass], style: this.contentStyle, role: "none" }, children))),
             (0, _utils_1.resolveWrappedSlot)($slots.footer, (children) => children && [
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card__footer`, style: this.footerStyle, role: "none" }, children)
+                (0, vue_1.h)("div", { class: [`${mergedClsPrefix}-card__footer`, footerStyle], style: this.footerStyle, role: "none" }, children)
             ]),
             (0, _utils_1.resolveWrappedSlot)($slots.action, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card__action`, role: "none" }, children)))));
     }

package/lib/carousel/src/Carousel.d.ts

@@ -2,7 +2,7 @@ import type { CSSProperties, PropType, Ref, TransitionProps, VNode } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 import type { ArrowScopedSlotProps, DotScopedSlotProps, Size } from './interface';
 declare const transitionProperties: readonly ["transitionDuration", "transitionTimingFunction"];
-type TransitionStyle = Partial<Pick<CSSProperties, typeof transitionProperties[number]>>;
+type TransitionStyle = Partial<Pick<CSSProperties, (typeof transitionProperties)[number]>>;
 export declare const carouselProps: {
     defaultIndex: {
         type: NumberConstructor;
@@ -15,7 +15,7 @@ export declare const carouselProps: {
         default: string;
     };
     dotPlacement: {
-        type: PropType<"left" | "right" | "bottom" | "top">;
+        type: PropType<"left" | "right" | "top" | "bottom">;
         default: string;
     };
     slidesPerView: {
@@ -109,7 +109,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     dotPlacement: {
-        type: PropType<"left" | "right" | "bottom" | "top">;
+        type: PropType<"left" | "right" | "top" | "bottom">;
         default: string;
     };
     slidesPerView: {
@@ -246,7 +246,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     dotPlacement: {
-        type: PropType<"left" | "right" | "bottom" | "top">;
+        type: PropType<"left" | "right" | "top" | "bottom">;
         default: string;
     };
     slidesPerView: {
@@ -336,7 +336,7 @@ declare const _default: import("vue").DefineComponent<{
     keyboard: boolean;
     dotType: "dot" | "line";
     defaultIndex: number;
-    dotPlacement: "left" | "right" | "bottom" | "top";
+    dotPlacement: "left" | "right" | "top" | "bottom";
     slidesPerView: number | "auto";
     spaceBetween: number;
     centeredSlides: boolean;

package/lib/carousel/src/Carousel.js

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.carouselProps = void 0;
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
 const vue_1 = require("vue");
 const vueuc_1 = require("vueuc");
 const vooks_1 = require("vooks");
@@ -471,7 +472,7 @@ exports.default = (0, vue_1.defineComponent)({
                 dragStartX = touchEvent.clientX;
             }
             if (props.touchable) {
-                (0, evtd_1.on)('touchmove', document, handleTouchmove, { passive: true });
+                (0, evtd_1.on)('touchmove', document, handleTouchmove);
                 (0, evtd_1.on)('touchend', document, handleTouchend);
                 (0, evtd_1.on)('touchcancel', document, handleTouchend);
             }

package/lib/checkbox/src/Checkbox.d.ts

@@ -23,11 +23,11 @@ export declare const checkboxProps: {
         default: boolean;
     };
     checkedValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: boolean;
     };
     'onUpdate:checked': PropType<MaybeArray<OnUpdateChecked>>;
@@ -148,11 +148,11 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     checkedValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: boolean;
     };
     'onUpdate:checked': PropType<MaybeArray<OnUpdateChecked>>;
@@ -451,11 +451,11 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     checkedValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: boolean;
     };
     'onUpdate:checked': PropType<MaybeArray<OnUpdateChecked>>;

package/lib/color-picker/src/ColorPickerSwatches.js

@@ -16,9 +16,10 @@ function normalizeColor(color, mode) {
     return color;
 }
 function getHexFromName(color) {
-    const ctx = document
-        .createElement('canvas')
-        .getContext('2d');
+    const ctx = document.createElement('canvas').getContext('2d');
+    if (!ctx) {
+        return '#000000';
+    }
     ctx.fillStyle = color;
     return ctx.fillStyle;
 }

package/lib/components.d.ts

@@ -59,6 +59,7 @@ export * from './popconfirm';
 export * from './popover';
 export * from './popselect';
 export * from './progress';
+export * from './qr-code';
 export * from './radio';
 export * from './rate';
 export * from './result';
@@ -68,6 +69,7 @@ export * from './skeleton';
 export * from './slider';
 export * from './space';
 export * from './spin';
+export * from './split';
 export * from './statistic';
 export * from './steps';
 export * from './switch';
@@ -84,6 +86,7 @@ export * from './tree';
 export * from './tree-select';
 export * from './typography';
 export * from './upload';
+export * from './virtual-list';
 export * from './watermark';
 export * from './discrete';
 export * from './equation';

package/lib/components.js

@@ -75,6 +75,7 @@ __exportStar(require("./popconfirm"), exports);
 __exportStar(require("./popover"), exports);
 __exportStar(require("./popselect"), exports);
 __exportStar(require("./progress"), exports);
+__exportStar(require("./qr-code"), exports);
 __exportStar(require("./radio"), exports);
 __exportStar(require("./rate"), exports);
 __exportStar(require("./result"), exports);
@@ -84,6 +85,7 @@ __exportStar(require("./skeleton"), exports);
 __exportStar(require("./slider"), exports);
 __exportStar(require("./space"), exports);
 __exportStar(require("./spin"), exports);
+__exportStar(require("./split"), exports);
 __exportStar(require("./statistic"), exports);
 __exportStar(require("./steps"), exports);
 __exportStar(require("./switch"), exports);
@@ -100,6 +102,7 @@ __exportStar(require("./tree"), exports);
 __exportStar(require("./tree-select"), exports);
 __exportStar(require("./typography"), exports);
 __exportStar(require("./upload"), exports);
+__exportStar(require("./virtual-list"), exports);
 __exportStar(require("./watermark"), exports);
 __exportStar(require("./discrete"), exports);
 __exportStar(require("./equation"), exports);

package/lib/config-provider/src/config.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultBreakpoints = void 0;
 exports.defaultBreakpoints = {
-    xs: 0,
-    s: 640,
-    m: 1024,
-    l: 1280,
-    xl: 1536,
+    xs: 0, // mobile
+    s: 640, // tablet
+    m: 1024, // laptop s
+    l: 1280, // laptop
+    xl: 1536, // laptop l
     xxl: 1920 // normal desktop display
 };

package/lib/config-provider/src/internal-interface.d.ts

@@ -53,6 +53,7 @@ import type { PopconfirmTheme } from '../../popconfirm/styles';
 import type { PopoverTheme } from '../../popover/styles';
 import type { PopselectTheme } from '../../popselect/styles';
 import type { ProgressTheme } from '../../progress/styles';
+import type { QrCodeTheme } from '../../qr-code/styles';
 import type { RadioTheme } from '../../radio/styles';
 import type { RateTheme } from '../../rate/styles';
 import type { ResultTheme } from '../../result/styles';
@@ -94,6 +95,7 @@ import type { CollapseTransitionTheme } from '../../collapse-transition/styles';
 import type { ButtonGroupTheme } from '../../button-group/styles/light';
 import type { RowTheme } from '../../legacy-grid/styles';
 import type { Katex } from './katex';
+import type { SplitTheme } from '../../split/styles';
 export interface GlobalThemeWithoutCommon {
     Alert?: AlertTheme;
     Anchor?: AnchorTheme;
@@ -150,6 +152,7 @@ export interface GlobalThemeWithoutCommon {
     Popover?: PopoverTheme;
     Popselect?: PopselectTheme;
     Progress?: ProgressTheme;
+    QrCode?: QrCodeTheme;
     Radio?: RadioTheme;
     Rate?: RateTheme;
     Result?: ResultTheme;
@@ -175,6 +178,7 @@ export interface GlobalThemeWithoutCommon {
     Typography?: TypographyTheme;
     Upload?: UploadTheme;
     Watermark?: WatermarkTheme;
+    Split?: SplitTheme;
     Row?: RowTheme;
     InternalSelectMenu?: InternalSelectMenuTheme;
     InternalSelection?: InternalSelectionTheme;

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

@@ -76,7 +76,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly flexHeight: BooleanConstructor;
     readonly summaryPlacement: {
-        readonly type: import("vue").PropType<"bottom" | "top">;
+        readonly type: import("vue").PropType<"top" | "bottom">;
         readonly default: "bottom";
     };
     readonly paginationBehaviorOnFilter: {
@@ -3821,7 +3821,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly flexHeight: BooleanConstructor;
     readonly summaryPlacement: {
-        readonly type: import("vue").PropType<"bottom" | "top">;
+        readonly type: import("vue").PropType<"top" | "bottom">;
         readonly default: "bottom";
     };
     readonly paginationBehaviorOnFilter: {
@@ -6221,7 +6221,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly childrenKey: string;
     readonly indent: number;
     readonly flexHeight: boolean;
-    readonly summaryPlacement: "bottom" | "top";
+    readonly summaryPlacement: "top" | "bottom";
     readonly paginationBehaviorOnFilter: "first" | "current";
     readonly spinProps: import("../../_internal").BaseLoadingExposedProps;
 }, {}>;

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

@@ -179,6 +179,7 @@ exports.default = (0, vue_1.defineComponent)({
             clearFilter,
             scrollTo: (arg0, arg1) => {
                 var _a;
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                 (_a = mainTableInstRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(arg0, arg1);
             }
         };

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

@@ -50,6 +50,7 @@ exports.default = (0, vue_1.defineComponent)({
             getHeaderElement,
             scrollTo(arg0, arg1) {
                 var _a;
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                 (_a = bodyInstRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(arg0, arg1);
             }
         };

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

@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<{
     getScrollContainer: () => HTMLElement | null;
     scrollTo: import("../../../scrollbar/src/Scrollbar").ScrollTo;
     bodyWidth: import("vue").Ref<number | null>;
-    summaryPlacement: import("vue").Ref<"bottom" | "top">;
+    summaryPlacement: import("vue").Ref<"top" | "bottom">;
     dataTableSlots: Readonly<{
         [name: string]: import("vue").Slot<any> | undefined;
     }>;
@@ -1307,8 +1307,8 @@ declare const _default: import("vue").DefineComponent<{
     handleVirtualListScroll: (e: Event) => void;
     handleVirtualListResize: (e: ResizeObserverEntry) => void;
     handleMouseleaveTable: () => void;
-    virtualListContainer: () => HTMLElement;
-    virtualListContent: () => HTMLElement;
+    virtualListContainer: () => HTMLElement | null;
+    virtualListContent: () => HTMLElement | null;
     handleTableBodyScroll: (e: Event) => void;
     handleCheckboxUpdateChecked: (tmNode: {
         key: RowKey;

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

@@ -209,11 +209,11 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function virtualListContainer() {
             const { value } = virtualListRef;
-            return value === null || value === void 0 ? void 0 : value.listElRef;
+            return (value === null || value === void 0 ? void 0 : value.listElRef) || null;
         }
         function virtualListContent() {
             const { value } = virtualListRef;
-            return value === null || value === void 0 ? void 0 : value.itemsElRef;
+            return (value === null || value === void 0 ? void 0 : value.itemsElRef) || null;
         }
         function handleVirtualListScroll(e) {
             var _a;
@@ -232,9 +232,11 @@ exports.default = (0, vue_1.defineComponent)({
             scrollTo(arg0, arg1) {
                 var _a, _b;
                 if (virtualScrollRef.value) {
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                     (_a = virtualListRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(arg0, arg1);
                 }
                 else {
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                     (_b = scrollbarInstRef.value) === null || _b === void 0 ? void 0 : _b.scrollTo(arg0, arg1);
                 }
             }
@@ -410,7 +412,7 @@ exports.default = (0, vue_1.defineComponent)({
                         (!expandable || expandable(rowInfo.tmNode.rawNode))) {
                         displayedData.push(rowInfo, {
                             isExpandedRow: true,
-                            key: `${rowInfo.key}-expand`,
+                            key: `${rowInfo.key}-expand`, // solve key repeat of the expanded row
                             tmNode: rowInfo.tmNode,
                             index: rowInfo.index
                         });

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

@@ -86,7 +86,7 @@ export declare const dataTableProps: {
     };
     readonly flexHeight: BooleanConstructor;
     readonly summaryPlacement: {
-        readonly type: PropType<"bottom" | "top">;
+        readonly type: PropType<"top" | "bottom">;
         readonly default: "bottom";
     };
     readonly paginationBehaviorOnFilter: {

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

@@ -38,8 +38,8 @@ declare const _default: import("vue").DefineComponent<{
     handleDateInput: (value: string) => void;
     handleTimePickerChange: (value: number | null) => void;
     clearSelectedDateTime: () => void;
-    virtualListContainer: () => HTMLElement;
-    virtualListContent: () => HTMLElement;
+    virtualListContainer: () => HTMLElement | null;
+    virtualListContent: () => HTMLElement | null;
     handleVirtualListScroll: (e: Event) => void;
     timePickerSize: import("vue").Ref<"small" | "medium" | "large">;
     dateInputValue: import("vue").Ref<string>;

package/lib/date-picker/src/panel/daterange.d.ts

@@ -54,8 +54,8 @@ declare const _default: import("vue").DefineComponent<{
     handleEndDateInputBlur: () => void;
     handleStartYearVlScroll: () => void;
     handleEndYearVlScroll: () => void;
-    virtualListContainer: (type: "start" | "end") => HTMLElement;
-    virtualListContent: (type: "start" | "end") => HTMLElement;
+    virtualListContainer: (type: "start" | "end") => HTMLElement | null;
+    virtualListContent: (type: "start" | "end") => HTMLElement | null;
     onUpdateStartCalendarValue: (value: number) => void;
     onUpdateEndCalendarValue: (value: number) => void;
     startYearScrollbarRef: import("vue").Ref<import("../../../_internal").ScrollbarInst | null>;

package/lib/date-picker/src/panel/datetime.d.ts

@@ -38,8 +38,8 @@ declare const _default: import("vue").DefineComponent<{
     handleDateInput: (value: string) => void;
     handleTimePickerChange: (value: number | null) => void;
     clearSelectedDateTime: () => void;
-    virtualListContainer: () => HTMLElement;
-    virtualListContent: () => HTMLElement;
+    virtualListContainer: () => HTMLElement | null;
+    virtualListContent: () => HTMLElement | null;
     handleVirtualListScroll: (e: Event) => void;
     timePickerSize: import("vue").Ref<"small" | "medium" | "large">;
     dateInputValue: import("vue").Ref<string>;

package/lib/date-picker/src/panel/datetimerange.d.ts

@@ -54,8 +54,8 @@ declare const _default: import("vue").DefineComponent<{
     handleEndDateInputBlur: () => void;
     handleStartYearVlScroll: () => void;
     handleEndYearVlScroll: () => void;
-    virtualListContainer: (type: "start" | "end") => HTMLElement;
-    virtualListContent: (type: "start" | "end") => HTMLElement;
+    virtualListContainer: (type: "start" | "end") => HTMLElement | null;
+    virtualListContent: (type: "start" | "end") => HTMLElement | null;
     onUpdateStartCalendarValue: (value: number) => void;
     onUpdateEndCalendarValue: (value: number) => void;
     startYearScrollbarRef: import("vue").Ref<import("../../../_internal").ScrollbarInst | null>;

package/lib/date-picker/src/panel/month.d.ts

@@ -46,8 +46,8 @@ declare const _default: import("vue").DefineComponent<{
     handleDateInput: (value: string) => void;
     handleTimePickerChange: (value: number | null) => void;
     clearSelectedDateTime: () => void;
-    virtualListContainer: () => HTMLElement;
-    virtualListContent: () => HTMLElement;
+    virtualListContainer: () => HTMLElement | null;
+    virtualListContent: () => HTMLElement | null;
     handleVirtualListScroll: (e: Event) => void;
     timePickerSize: import("vue").Ref<"small" | "medium" | "large">;
     dateInputValue: import("vue").Ref<string>;

package/lib/date-picker/src/panel/monthrange.d.ts

@@ -61,8 +61,8 @@ declare const _default: import("vue").DefineComponent<{
     handleEndDateInputBlur: () => void;
     handleStartYearVlScroll: () => void;
     handleEndYearVlScroll: () => void;
-    virtualListContainer: (type: "start" | "end") => HTMLElement;
-    virtualListContent: (type: "start" | "end") => HTMLElement;
+    virtualListContainer: (type: "start" | "end") => HTMLElement | null;
+    virtualListContent: (type: "start" | "end") => HTMLElement | null;
     onUpdateStartCalendarValue: (value: number) => void;
     onUpdateEndCalendarValue: (value: number) => void;
     startYearScrollbarRef: import("vue").Ref<import("../../../_internal").ScrollbarInst | null>;