naive-ui 2.34.4 → 2.36.0

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

@@ -38,13 +38,13 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
     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>;
     datePickerSlots: Readonly<{
-        [name: string]: import("vue").Slot | undefined;
+        [name: string]: import("vue").Slot<any> | undefined;
     }>;
     handleQuickMonthClick: (dateItem: MonthItem | YearItem | QuarterItem, updatePanelValue: (value: number) => void) => void;
     justifyColumnsScrollState: (value?: number) => void;

package/lib/date-picker/src/panel/use-calendar.js

@@ -254,12 +254,12 @@ function useCalendar(props, type) {
     // For month type
     function virtualListContainer() {
         const { value } = yearVlRef;
-        return value === null || value === void 0 ? void 0 : value.listElRef;
+        return (value === null || value === void 0 ? void 0 : value.listElRef) || null;
     }
     // For month type
     function virtualListContent() {
         const { value } = yearVlRef;
-        return value === null || value === void 0 ? void 0 : value.itemsElRef;
+        return (value === null || value === void 0 ? void 0 : value.itemsElRef) || null;
     }
     // For month type
     function handleVirtualListScroll(e) {

package/lib/date-picker/src/panel/use-dual-calendar.d.ts

@@ -42,7 +42,7 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
     startTimeValue: import("vue").ComputedRef<number | null>;
     endTimeValue: import("vue").ComputedRef<number | null>;
     datePickerSlots: Readonly<{
-        [name: string]: import("vue").Slot | undefined;
+        [name: string]: import("vue").Slot<any> | undefined;
     }>;
     shortcuts: import("vue").ComputedRef<Shortcuts | undefined>;
     startCalendarDateTime: import("vue").Ref<number>;
@@ -60,8 +60,8 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
     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<ScrollbarInst | null>;

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

@@ -611,19 +611,19 @@ function useDualCalendar(props, type) {
     function virtualListContainer(type) {
         var _a, _b;
         if (type === 'start') {
-            return (_a = startYearVlRef.value) === null || _a === void 0 ? void 0 : _a.listElRef;
+            return ((_a = startYearVlRef.value) === null || _a === void 0 ? void 0 : _a.listElRef) || null;
         }
         else {
-            return (_b = endYearVlRef.value) === null || _b === void 0 ? void 0 : _b.listElRef;
+            return ((_b = endYearVlRef.value) === null || _b === void 0 ? void 0 : _b.listElRef) || null;
         }
     }
     function virtualListContent(type) {
         var _a, _b;
         if (type === 'start') {
-            return (_a = startYearVlRef.value) === null || _a === void 0 ? void 0 : _a.itemsElRef;
+            return ((_a = startYearVlRef.value) === null || _a === void 0 ? void 0 : _a.itemsElRef) || null;
         }
         else {
-            return (_b = endYearVlRef.value) === null || _b === void 0 ? void 0 : _b.itemsElRef;
+            return ((_b = endYearVlRef.value) === null || _b === void 0 ? void 0 : _b.itemsElRef) || null;
         }
     }
     const childComponentRefs = {

package/lib/date-picker/src/styles/index.cssr.js

@@ -76,6 +76,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('date-picker', `
  border-radius: var(--n-panel-border-radius);
  background-color: var(--n-panel-color);
  color: var(--n-panel-text-color);
+ user-select: none;
  `, [(0, fade_in_scale_up_cssr_1.fadeInScaleUpTransition)(), (0, cssr_1.cM)('shadow', `
  box-shadow: var(--n-panel-box-shadow);
  `), (0, cssr_1.cB)('date-panel-calendar', {

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

@@ -28,12 +28,7 @@ const matcherMap = {
 };
 function matchDate(sourceTime, patternTime, type) {
     const matcher = matcherMap[type];
-    if (Array.isArray(sourceTime)) {
-        return sourceTime.some((time) => matcher(time, patternTime));
-    }
-    else {
-        return matcher(sourceTime, patternTime);
-    }
+    return matcher(sourceTime, patternTime);
 }
 // date item's valueTs can be a tuple since two date may show in one panel, so
 // any matched value would make it shown as selected

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

@@ -19,7 +19,7 @@ exports.default = {
     calendarLeftPaddingDatetime: '4px 12px',
     calendarLeftPaddingDaterange: '6px 12px 4px 12px',
     calendarLeftPaddingDatetimerange: '4px 12px',
-    calendarLeftPaddingMonth: '0',
+    calendarLeftPaddingMonth: '0', // TODO: make it actually effective
     calendarLeftPaddingYear: '0',
     calendarLeftPaddingQuarter: '0',
     calendarLeftPaddingMonthrange: '0',

package/lib/descriptions/src/Descriptions.d.ts

@@ -24,7 +24,9 @@ export declare const descriptionsProps: {
         readonly default: "medium";
     };
     readonly bordered: BooleanConstructor;
+    readonly labelClass: StringConstructor;
     readonly labelStyle: PropType<string | CSSProperties>;
+    readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly theme: PropType<import("../../_mixins").Theme<"Descriptions", {
         lineHeight: string;
@@ -150,7 +152,9 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "medium";
     };
     readonly bordered: BooleanConstructor;
+    readonly labelClass: StringConstructor;
     readonly labelStyle: PropType<string | CSSProperties>;
+    readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly theme: PropType<import("../../_mixins").Theme<"Descriptions", {
         lineHeight: string;
@@ -249,7 +253,7 @@ declare const _default: import("vue").DefineComponent<{
         tdPaddingLarge: string;
     }, any>>>;
 }, {
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     cssVars: import("vue").ComputedRef<{
         '--n-title-text-color': string;
         '--n-th-padding': string;
@@ -299,7 +303,9 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "medium";
     };
     readonly bordered: BooleanConstructor;
+    readonly labelClass: StringConstructor;
     readonly labelStyle: PropType<string | CSSProperties>;
+    readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly theme: PropType<import("../../_mixins").Theme<"Descriptions", {
         lineHeight: string;
@@ -404,5 +410,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly bordered: boolean;
     readonly labelAlign: "left" | "right" | "center";
     readonly labelPlacement: "left" | "top";
-}>;
+}, {}>;
 export default _default;

package/lib/descriptions/src/Descriptions.js

@@ -11,6 +11,7 @@ const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const utils_1 = require("./utils");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const seemly_1 = require("seemly");
 exports.descriptionsProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { title: String, column: {
         type: Number,
         default: 3
@@ -26,7 +27,7 @@ exports.descriptionsProps = Object.assign(Object.assign({}, _mixins_1.useTheme.p
     }, size: {
         type: String,
         default: 'medium'
-    }, bordered: Boolean, labelStyle: [Object, String], contentStyle: [Object, String] });
+    }, bordered: Boolean, labelClass: String, labelStyle: [Object, String], contentClass: String, contentStyle: [Object, String] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Descriptions',
     props: exports.descriptionsProps,
@@ -81,7 +82,7 @@ exports.default = (0, vue_1.defineComponent)({
         const defaultSlots = this.$slots.default;
         const children = defaultSlots ? (0, _utils_1.flatten)(defaultSlots()) : [];
         const memorizedLength = children.length;
-        const { compitableColumn, labelPlacement, labelAlign, size, bordered, title, cssVars, mergedClsPrefix, separator, onRender } = this;
+        const { contentClass, labelClass, compitableColumn, labelPlacement, labelAlign, size, bordered, title, cssVars, mergedClsPrefix, separator, onRender } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         const filteredChildren = children.filter((child) => (0, utils_1.isDescriptionsItem)(child));
         if (process.env.NODE_ENV !== 'production' && memorizedLength !== filteredChildren.length) {
@@ -107,7 +108,13 @@ exports.default = (0, vue_1.defineComponent)({
             const contentStyle = props.contentStyle || props['content-style'] || this.contentStyle;
             if (labelPlacement === 'left') {
                 if (bordered) {
-                    state.row.push((0, vue_1.h)("th", { class: `${mergedClsPrefix}-descriptions-table-header`, colspan: 1, style: labelStyle }, itemLabel), (0, vue_1.h)("td", { class: `${mergedClsPrefix}-descriptions-table-content`, colspan: isLastIteration
+                    state.row.push((0, vue_1.h)("th", { class: [
+                            `${mergedClsPrefix}-descriptions-table-header`,
+                            labelClass
+                        ], colspan: 1, style: labelStyle }, itemLabel), (0, vue_1.h)("td", { class: [
+                            `${mergedClsPrefix}-descriptions-table-content`,
+                            contentClass
+                        ], colspan: isLastIteration
                             ? (compitableColumn - memorizedSpan) * 2 + 1
                             : itemSpan * 2 - 1, style: contentStyle }, itemChildren));
                 }
@@ -115,19 +122,28 @@ exports.default = (0, vue_1.defineComponent)({
                     state.row.push((0, vue_1.h)("td", { class: `${mergedClsPrefix}-descriptions-table-content`, colspan: isLastIteration
                             ? (compitableColumn - memorizedSpan) * 2
                             : itemSpan * 2 },
-                        (0, vue_1.h)("span", { class: `${mergedClsPrefix}-descriptions-table-content__label`, style: labelStyle }, [
+                        (0, vue_1.h)("span", { class: [
+                                `${mergedClsPrefix}-descriptions-table-content__label`,
+                                labelClass
+                            ], style: labelStyle }, [
                             ...itemLabel,
                             separator && ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-descriptions-separator` }, separator))
                         ]),
-                        (0, vue_1.h)("span", { class: `${mergedClsPrefix}-descriptions-table-content__content`, style: contentStyle }, itemChildren)));
+                        (0, vue_1.h)("span", { class: [
+                                `${mergedClsPrefix}-descriptions-table-content__content`,
+                                contentClass
+                            ], style: contentStyle }, itemChildren)));
                 }
             }
             else {
                 const colspan = isLastIteration
                     ? (compitableColumn - memorizedSpan) * 2
                     : itemSpan * 2;
-                state.row.push((0, vue_1.h)("th", { class: `${mergedClsPrefix}-descriptions-table-header`, colspan: colspan, style: labelStyle }, itemLabel));
-                state.secondRow.push((0, vue_1.h)("td", { class: `${mergedClsPrefix}-descriptions-table-content`, colspan: colspan, style: contentStyle }, itemChildren));
+                state.row.push((0, vue_1.h)("th", { class: [`${mergedClsPrefix}-descriptions-table-header`, labelClass], colspan: colspan, style: labelStyle }, itemLabel));
+                state.secondRow.push((0, vue_1.h)("td", { class: [
+                        `${mergedClsPrefix}-descriptions-table-content`,
+                        contentClass
+                    ], colspan: colspan, style: contentStyle }, itemChildren));
             }
             if (state.span >= compitableColumn || isLastIteration) {
                 state.span = 0;
@@ -156,6 +172,10 @@ exports.default = (0, vue_1.defineComponent)({
             title || this.$slots.header ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-descriptions-header` }, title || (0, _utils_1.getSlot)(this, 'header'))) : null,
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-descriptions-table-wrapper` },
                 (0, vue_1.h)("table", { class: `${mergedClsPrefix}-descriptions-table` },
-                    (0, vue_1.h)("tbody", null, rows)))));
+                    (0, vue_1.h)("tbody", null,
+                        labelPlacement === 'top' && ((0, vue_1.h)("tr", { class: `${mergedClsPrefix}-descriptions-table-row`, style: {
+                                visibility: 'collapse'
+                            } }, (0, seemly_1.repeat)(compitableColumn * 2, (0, vue_1.h)("td", null)))),
+                        rows)))));
     }
 });

package/lib/descriptions/src/DescriptionsItem.d.ts

@@ -6,7 +6,9 @@ export declare const descriptionsItemProps: {
         readonly type: NumberConstructor;
         readonly default: 1;
     };
+    readonly labelClass: StringConstructor;
     readonly labelStyle: PropType<string | CSSProperties>;
+    readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | CSSProperties>;
 };
 export type DescriptionItemProps = ExtractPublicPropTypes<typeof descriptionsItemProps>;
@@ -16,7 +18,9 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 1;
     };
+    readonly labelClass: StringConstructor;
     readonly labelStyle: PropType<string | CSSProperties>;
+    readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | CSSProperties>;
 }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly label: StringConstructor;
@@ -24,9 +28,11 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 1;
     };
+    readonly labelClass: StringConstructor;
     readonly labelStyle: PropType<string | CSSProperties>;
+    readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | CSSProperties>;
 }>>, {
     readonly span: number;
-}>;
+}, {}>;
 export default _default;

package/lib/descriptions/src/DescriptionsItem.js

@@ -9,7 +9,9 @@ exports.descriptionsItemProps = {
         type: Number,
         default: 1
     },
+    labelClass: String,
     labelStyle: [Object, String],
+    contentClass: String,
     contentStyle: [Object, String]
 };
 exports.default = (0, vue_1.defineComponent)({

package/lib/dialog/src/Dialog.d.ts

@@ -737,7 +737,7 @@ export declare const NDialog: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }, {
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     mergedIconPlacement: import("vue").ComputedRef<import("./interface").IconPlacement>;
     mergedTheme: import("vue").ComputedRef<{
         common: {
@@ -1867,4 +1867,4 @@ export declare const NDialog: import("vue").DefineComponent<{
     bordered: boolean;
     showIcon: boolean;
     closable: boolean;
-}>;
+}, {}>;

package/lib/dialog/src/Dialog.js

@@ -23,7 +23,7 @@ const iconRenderMap = {
 exports.NDialog = (0, vue_1.defineComponent)({
     name: 'Dialog',
     alias: [
-        'NimbusConfirmCard',
+        'NimbusConfirmCard', // deprecated
         'Confirm' // deprecated
     ],
     props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), dialogProps_1.dialogProps),
@@ -125,7 +125,11 @@ exports.NDialog = (0, vue_1.defineComponent)({
                 `${mergedClsPrefix}-dialog--icon-${mergedIconPlacement}`,
                 bordered && `${mergedClsPrefix}-dialog--bordered`
             ], style: cssVars, role: "dialog" },
-            closable ? ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-dialog__close`, onClick: this.handleCloseClick })) : null,
+            closable
+                ? (0, _utils_1.resolveWrappedSlot)(this.$slots.close, (node) => {
+                    return node ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-dialog__close` }, node)) : ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-dialog__close`, onClick: this.handleCloseClick }));
+                })
+                : null,
             showIcon && mergedIconPlacement === 'top' ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-dialog-icon-container` }, icon)) : null,
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-dialog__title` },
                 showIcon && mergedIconPlacement === 'left' ? icon : null,

package/lib/dialog/src/DialogEnvironment.d.ts

@@ -177,12 +177,12 @@ export declare const NDialogEnvironment: import("vue").DefineComponent<{
     iconPlacement: PropType<import("./interface").IconPlacement>;
 }>>, {
     type: "default" | "error" | "info" | "success" | "warning";
-    autoFocus: boolean;
     loading: boolean;
+    autoFocus: boolean;
     bordered: boolean;
     showIcon: boolean;
     closable: boolean;
     blockScroll: boolean;
     maskClosable: boolean;
     closeOnEsc: boolean;
-}>;
+}, {}>;

package/lib/dialog/src/DialogProvider.d.ts

@@ -49,10 +49,10 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
         onAfterLeave?: (() => void) | undefined;
         title?: string | (() => import("vue").VNodeChild) | undefined;
         action?: (() => import("vue").VNodeChild) | undefined;
+        loading?: boolean | undefined;
         autoFocus?: boolean | undefined;
         positiveText?: string | undefined;
         negativeText?: string | undefined;
-        loading?: boolean | undefined;
         bordered?: boolean | undefined;
         showIcon?: boolean | undefined;
         closable?: boolean | undefined;
@@ -71,6 +71,7 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
             circle?: boolean | undefined;
             disabled?: boolean | undefined;
             onClick?: import("../../_utils").MaybeArray<(e: MouseEvent) => void> | undefined;
+            loading?: boolean | undefined;
             focusable?: boolean | undefined;
             strong?: boolean | undefined;
             themeOverrides?: {
@@ -385,7 +386,6 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
                     name: "common";
                 } | undefined;
             } | undefined;
-            loading?: boolean | undefined;
             bordered?: boolean | undefined;
             textColor?: string | undefined;
             renderIcon?: (() => import("vue").VNodeChild) | undefined;
@@ -410,6 +410,7 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
             circle?: boolean | undefined;
             disabled?: boolean | undefined;
             onClick?: import("../../_utils").MaybeArray<(e: MouseEvent) => void> | undefined;
+            loading?: boolean | undefined;
             focusable?: boolean | undefined;
             strong?: boolean | undefined;
             themeOverrides?: {
@@ -724,7 +725,6 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
                     name: "common";
                 } | undefined;
             } | undefined;
-            loading?: boolean | undefined;
             bordered?: boolean | undefined;
             textColor?: string | undefined;
             renderIcon?: (() => import("vue").VNodeChild) | undefined;
@@ -757,5 +757,5 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     injectionKey: StringConstructor;
     to: PropType<string | HTMLElement>;
-}>>, {}>;
+}>>, {}, {}>;
 export {};

package/lib/dialog/src/DialogProvider.js

@@ -33,7 +33,9 @@ exports.NDialogProvider = (0, vue_1.defineComponent)({
             dialogList.splice(dialogList.findIndex((dialog) => dialog.key === key), 1);
         }
         function destroyAll() {
-            Object.values(dialogInstRefs).forEach((dialogInstRef) => { dialogInstRef.hide(); });
+            Object.values(dialogInstRefs).forEach((dialogInstRef) => {
+                dialogInstRef.hide();
+            });
         }
         const api = {
             create,

package/lib/dialog/src/dialogProps.d.ts

@@ -32,4 +32,4 @@ declare const dialogProps: {
 };
 export type DialogProps = ExtractPublicPropTypes<typeof dialogProps>;
 export { dialogProps };
-export declare const dialogPropKeys: ("type" | "content" | "icon" | "title" | "action" | "positiveText" | "negativeText" | "loading" | "bordered" | "showIcon" | "closable" | "onClose" | "iconPlacement" | "positiveButtonProps" | "negativeButtonProps" | "onPositiveClick" | "onNegativeClick")[];
+export declare const dialogPropKeys: ("type" | "content" | "icon" | "title" | "action" | "loading" | "positiveText" | "negativeText" | "bordered" | "showIcon" | "closable" | "onClose" | "iconPlacement" | "positiveButtonProps" | "negativeButtonProps" | "onPositiveClick" | "onNegativeClick")[];

package/lib/discrete/src/InjectionExtractor.d.ts

@@ -5,4 +5,4 @@ export declare const NInjectionExtractor: import("vue").DefineComponent<{
     [key: string]: any;
 }>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     onSetup: PropType<() => void>;
-}>>, {}>;
+}>>, {}, {}>;

package/lib/divider/src/Divider.d.ts

@@ -47,7 +47,7 @@ declare const _default: import("vue").DefineComponent<{
         fontWeight: string;
     }, any>>>;
 }, {
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-color': string;
@@ -82,5 +82,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly dashed: boolean;
     readonly vertical: boolean;
     readonly titlePlacement: "left" | "right" | "center";
-}>;
+}, {}>;
 export default _default;

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

@@ -48,6 +48,10 @@ export declare const drawerProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly maxWidth: NumberConstructor;
+    readonly maxHeight: NumberConstructor;
+    readonly minWidth: NumberConstructor;
+    readonly minHeight: NumberConstructor;
     readonly resizable: BooleanConstructor;
     readonly defaultWidth: {
         readonly type: PropType<string | number>;
@@ -203,6 +207,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly maxWidth: NumberConstructor;
+    readonly maxHeight: NumberConstructor;
+    readonly minWidth: NumberConstructor;
+    readonly minHeight: NumberConstructor;
     readonly resizable: BooleanConstructor;
     readonly defaultWidth: {
         readonly type: PropType<string | number>;
@@ -311,7 +319,7 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }, {
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     namespace: import("vue").ComputedRef<string | undefined>;
     mergedBodyStyle: import("vue").ComputedRef<(string | CSSProperties)[]>;
     handleMaskClick: (e: MouseEvent) => void;
@@ -340,6 +348,7 @@ declare const _default: import("vue").DefineComponent<{
             errorColorPressed: string;
             errorColorSuppl: string;
             textColorBase: string;
+            /** @deprecated */
             textColor1: string;
             textColor2: string;
             textColor3: string;
@@ -534,6 +543,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly maxWidth: NumberConstructor;
+    readonly maxHeight: NumberConstructor;
+    readonly minWidth: NumberConstructor;
+    readonly minHeight: NumberConstructor;
     readonly resizable: BooleanConstructor;
     readonly defaultWidth: {
         readonly type: PropType<string | number>;
@@ -655,5 +668,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly showMask: boolean | "transparent";
     readonly defaultWidth: string | number;
     readonly defaultHeight: string | number;
-}>;
+}, {}>;
 export default _default;

package/lib/drawer/src/Drawer.js

@@ -41,7 +41,7 @@ exports.drawerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, blockScroll: {
         type: Boolean,
         default: true
-    }, resizable: Boolean, defaultWidth: {
+    }, maxWidth: Number, maxHeight: Number, minWidth: Number, minHeight: Number, resizable: Boolean, defaultWidth: {
         type: [Number, String],
         default: 251
     }, defaultHeight: {
@@ -215,7 +215,7 @@ exports.default = (0, vue_1.defineComponent)({
                                     `${mergedClsPrefix}-drawer-mask--invisible`
                             ], onClick: this.handleMaskClick })) : null
                     })) : null,
-                    (0, vue_1.h)(DrawerBodyWrapper_1.default, Object.assign({}, this.$attrs, { class: [this.drawerClass, this.$attrs.class], style: [this.mergedBodyStyle, this.$attrs.style], blockScroll: this.blockScroll, contentStyle: this.contentStyle, placement: this.placement, scrollbarProps: this.scrollbarProps, show: this.show, displayDirective: this.displayDirective, nativeScrollbar: this.nativeScrollbar, onAfterEnter: this.onAfterEnter, onAfterLeave: this.onAfterLeave, trapFocus: this.trapFocus, autoFocus: this.autoFocus, resizable: this.resizable, showMask: this.showMask, onEsc: this.handleEsc, onClickoutside: this.handleMaskClick }), this.$slots)), [[vdirs_1.zindexable, { zIndex: this.zIndex, enabled: this.show }]]);
+                    (0, vue_1.h)(DrawerBodyWrapper_1.default, Object.assign({}, this.$attrs, { class: [this.drawerClass, this.$attrs.class], style: [this.mergedBodyStyle, this.$attrs.style], blockScroll: this.blockScroll, contentStyle: this.contentStyle, placement: this.placement, scrollbarProps: this.scrollbarProps, show: this.show, displayDirective: this.displayDirective, nativeScrollbar: this.nativeScrollbar, onAfterEnter: this.onAfterEnter, onAfterLeave: this.onAfterLeave, trapFocus: this.trapFocus, autoFocus: this.autoFocus, resizable: this.resizable, maxHeight: this.maxHeight, minHeight: this.minHeight, maxWidth: this.maxWidth, minWidth: this.minWidth, showMask: this.showMask, onEsc: this.handleEsc, onClickoutside: this.handleMaskClick }), this.$slots)), [[vdirs_1.zindexable, { zIndex: this.zIndex, enabled: this.show }]]);
             }
         }));
     }

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

@@ -33,6 +33,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean | "transparent">;
         required: true;
     };
+    maxWidth: NumberConstructor;
+    maxHeight: NumberConstructor;
+    minWidth: NumberConstructor;
+    minHeight: NumberConstructor;
     resizable: BooleanConstructor;
     onClickoutside: PropType<(e: MouseEvent) => void>;
     onAfterLeave: PropType<() => void>;
@@ -227,6 +231,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean | "transparent">;
         required: true;
     };
+    maxWidth: NumberConstructor;
+    maxHeight: NumberConstructor;
+    minWidth: NumberConstructor;
+    minHeight: NumberConstructor;
     resizable: BooleanConstructor;
     onClickoutside: PropType<(e: MouseEvent) => void>;
     onAfterLeave: PropType<() => void>;
@@ -238,5 +246,5 @@ declare const _default: import("vue").DefineComponent<{
     resizable: boolean;
     trapFocus: boolean;
     blockScroll: boolean;
-}>;
+}, {}>;
 export default _default;

package/lib/drawer/src/DrawerBodyWrapper.js

@@ -44,6 +44,10 @@ exports.default = (0, vue_1.defineComponent)({
             type: [Boolean, String],
             required: true
         },
+        maxWidth: Number,
+        maxHeight: Number,
+        minWidth: Number,
+        minHeight: Number,
         resizable: Boolean,
         onClickoutside: Function,
         onAfterLeave: Function,
@@ -96,6 +100,24 @@ exports.default = (0, vue_1.defineComponent)({
             isHoverOnResizeTriggerRef.value = false;
         };
         const { doUpdateHeight, doUpdateWidth } = NDrawer;
+        const regulateWidth = (size) => {
+            const { maxWidth } = props;
+            if (maxWidth && size > maxWidth)
+                return maxWidth;
+            const { minWidth } = props;
+            if (minWidth && size < minWidth)
+                return minWidth;
+            return size;
+        };
+        const regulateHeight = (size) => {
+            const { maxHeight } = props;
+            if (maxHeight && size > maxHeight)
+                return maxHeight;
+            const { minHeight } = props;
+            if (minHeight && size < minHeight)
+                return minHeight;
+            return size;
+        };
         const handleBodyMousemove = (e) => {
             var _a, _b;
             if (isDraggingRef.value) {
@@ -103,6 +125,7 @@ exports.default = (0, vue_1.defineComponent)({
                     let height = ((_a = bodyRef.value) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
                     const increment = startPosition - e.clientY;
                     height += props.placement === 'bottom' ? increment : -increment;
+                    height = regulateHeight(height);
                     doUpdateHeight(height);
                     startPosition = e.clientY;
                 }
@@ -110,6 +133,7 @@ exports.default = (0, vue_1.defineComponent)({
                     let width = ((_b = bodyRef.value) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
                     const increment = startPosition - e.clientX;
                     width += props.placement === 'right' ? increment : -increment;
+                    width = regulateWidth(width);
                     doUpdateWidth(width);
                     startPosition = e.clientX;
                 }
@@ -189,7 +213,7 @@ exports.default = (0, vue_1.defineComponent)({
         return this.displayDirective === 'show' || this.displayed || this.show
             ? (0, vue_1.withDirectives)(
             /* Keep the wrapper dom. Make sure the drawer has a host.
-              Nor the detached content will disappear without transition */
+            Nor the detached content will disappear without transition */
             (0, vue_1.h)("div", { role: "none" },
                 (0, vue_1.h)(vueuc_1.VFocusTrap, { disabled: !this.showMask || !this.trapFocus, active: this.show, autoFocus: this.autoFocus, onEsc: this.onEsc }, {
                     default: () => ((0, vue_1.h)(vue_1.Transition, { name: this.transitionName, appear: this.isMounted, onAfterEnter: this.onAfterEnter, onAfterLeave: this.handleAfterLeave }, {

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

@@ -194,5 +194,5 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     closable: boolean;
     nativeScrollbar: boolean;
-}>;
+}, {}>;
 export default _default;