naive-ui 2.22.0 → 2.24.0

package/lib/dynamic-tags/src/DynamicTags.d.ts

@@ -2571,7 +2571,7 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--input-width': string;
+        '--n-input-width': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     closable?: unknown;

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

@@ -127,7 +127,7 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { self: { inputWidth } } = themeRef.value;
                 return {
-                    '--input-width': inputWidth
+                    '--n-input-width': inputWidth
                 };
             })
         };

package/lib/dynamic-tags/src/styles/index.cssr.js

@@ -9,5 +9,5 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 
 
 exports.default = (0, cssr_1.cB)('dynamic-tags', [(0, cssr_1.cB)('input', {
-  minWidth: 'var(--input-width)'
+  minWidth: 'var(--n-input-width)'
 })]);

package/lib/empty/src/Empty.d.ts

@@ -1,14 +1,15 @@
 import { PropType, VNodeChild } from 'vue';
 import { ExtractPublicPropTypes } from '../../_utils';
 declare const emptyProps: {
-    description: {
-        type: StringConstructor;
-        default: undefined;
-    };
+    description: StringConstructor;
     showDescription: {
         type: BooleanConstructor;
         default: boolean;
     };
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     size: {
         type: PropType<"small" | "medium" | "large" | "huge">;
         default: string;
@@ -56,14 +57,15 @@ declare const emptyProps: {
 };
 export declare type EmptyProps = ExtractPublicPropTypes<typeof emptyProps>;
 declare const _default: import("vue").DefineComponent<{
-    description: {
-        type: StringConstructor;
-        default: undefined;
-    };
+    description: StringConstructor;
     showDescription: {
         type: BooleanConstructor;
         default: boolean;
     };
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     size: {
         type: PropType<"small" | "medium" | "large" | "huge">;
         default: string;
@@ -113,16 +115,17 @@ declare const _default: import("vue").DefineComponent<{
     mergedRenderIcon: import("vue").ComputedRef<() => VNodeChild>;
     localizedDescription: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--icon-size': string;
-        '--font-size': string;
-        '--bezier': string;
-        '--text-color': string;
-        '--icon-color': string;
-        '--extra-text-color': string;
+        '--n-icon-size': string;
+        '--n-font-size': string;
+        '--n-bezier': string;
+        '--n-text-color': string;
+        '--n-icon-color': string;
+        '--n-extra-text-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     description?: unknown;
     showDescription?: unknown;
+    showIcon?: unknown;
     size?: unknown;
     renderIcon?: unknown;
     theme?: unknown;
@@ -131,6 +134,7 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     size: "small" | "medium" | "large" | "huge";
     showDescription: boolean;
+    showIcon: boolean;
 } & {
     description?: string | undefined;
     theme?: import("../../_mixins").Theme<"Empty", {
@@ -174,8 +178,8 @@ declare const _default: import("vue").DefineComponent<{
     }, any>> | undefined;
     renderIcon?: (() => VNodeChild) | undefined;
 }>, {
-    description: string;
     size: "small" | "medium" | "large" | "huge";
     showDescription: boolean;
+    showIcon: boolean;
 }>;
 export default _default;

package/lib/empty/src/Empty.js

@@ -11,10 +11,10 @@ const _internal_1 = require("../../_internal");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const ConfigProvider_1 = require("../../config-provider/src/ConfigProvider");
-const emptyProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { description: {
-        type: String,
-        default: undefined
-    }, showDescription: {
+const emptyProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { description: String, showDescription: {
+        type: Boolean,
+        default: true
+    }, showIcon: {
         type: Boolean,
         default: true
     }, size: {
@@ -48,12 +48,12 @@ exports.default = (0, vue_1.defineComponent)({
                 const { size } = props;
                 const { common: { cubicBezierEaseInOut }, self: { [(0, _utils_1.createKey)('iconSize', size)]: iconSize, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, textColor, iconColor, extraTextColor } } = themeRef.value;
                 return {
-                    '--icon-size': iconSize,
-                    '--font-size': fontSize,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--text-color': textColor,
-                    '--icon-color': iconColor,
-                    '--extra-text-color': extraTextColor
+                    '--n-icon-size': iconSize,
+                    '--n-font-size': fontSize,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-text-color': textColor,
+                    '--n-icon-color': iconColor,
+                    '--n-extra-text-color': extraTextColor
                 };
             })
         };
@@ -61,9 +61,9 @@ exports.default = (0, vue_1.defineComponent)({
     render() {
         const { $slots, mergedClsPrefix } = this;
         return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-empty`, style: this.cssVars },
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-empty__icon` }, (0, vue_1.renderSlot)($slots, 'icon', undefined, () => [
+            this.showIcon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-empty__icon` }, (0, vue_1.renderSlot)($slots, 'icon', undefined, () => [
                 (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: this.mergedRenderIcon })
-            ])),
+            ]))) : null,
             this.showDescription ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-empty__description` }, (0, vue_1.renderSlot)($slots, 'default', undefined, () => [
                 this.localizedDescription
             ]))) : null,

package/lib/empty/src/styles/index.cssr.js

@@ -5,34 +5,35 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --font-size
-// --icon-size
-// --icon-color
-// --bezier
-// --text-color
-// --extra-text-color
+// --n-font-size
+// --n-icon-size
+// --n-icon-color
+// --n-bezier
+// --n-text-color
+// --n-extra-text-color
 
 
 exports.default = (0, cssr_1.cB)('empty', `
  display: flex;
  flex-direction: column;
  align-items: center;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
 `, [(0, cssr_1.cE)('icon', `
- width: var(--icon-size);
- height: var(--icon-size);
- font-size: var(--icon-size);
- line-height: var(--icon-size);
- color: var(--icon-color);
+ width: var(--n-icon-size);
+ height: var(--n-icon-size);
+ font-size: var(--n-icon-size);
+ line-height: var(--n-icon-size);
+ color: var(--n-icon-color);
  transition:
- color .3s var(--bezier);
- `), (0, cssr_1.cE)('description', `
+ color .3s var(--n-bezier);
+ `, [(0, cssr_1.c)('+', [(0, cssr_1.cE)('description', `
  margin-top: 8px;
- transition: color .3s var(--bezier);
- color: var(--text-color);
+ `)])]), (0, cssr_1.cE)('description', `
+ transition: color .3s var(--n-bezier);
+ color: var(--n-text-color);
  `), (0, cssr_1.cE)('extra', `
  text-align: center;
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  margin-top: 12px;
- color: var(--extra-text-color);
+ color: var(--n-extra-text-color);
  `)]);

package/lib/form/src/Feedbacks.js

@@ -13,7 +13,10 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         var _a;
-        const { feedback, clsPrefix } = this;
+        const { $slots, feedback, clsPrefix } = this;
+        if ($slots.default) {
+            return $slots.default();
+        }
         return feedback ? ((0, vue_1.h)("div", { key: feedback, class: `${clsPrefix}-form-item-feedback__line` }, feedback)) : ((_a = this.explains) === null || _a === void 0 ? void 0 : _a.map((explain) => ((0, vue_1.h)("div", { key: explain, class: `${clsPrefix}-form-item-feedback__line` }, explain))));
     }
 });

package/lib/form/src/Form.d.ts

@@ -1,5 +1,5 @@
 import { PropType, ExtractPropTypes } from 'vue';
-import { FormRules, LabelAlign, LabelPlacement, FormInst } from './interface';
+import { FormRules, LabelAlign, LabelPlacement, FormInst, Size } from './interface';
 import { ExtractPublicPropTypes } from '../../_utils';
 declare const formProps: {
     readonly inline: BooleanConstructor;
@@ -15,12 +15,12 @@ declare const formProps: {
     };
     readonly rules: PropType<FormRules>;
     readonly disabled: BooleanConstructor;
-    readonly size: PropType<"small" | "medium" | "large">;
+    readonly size: PropType<Size>;
     readonly showRequireMark: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
     };
-    readonly requireMarkPlacement: PropType<"left" | "right">;
+    readonly requireMarkPlacement: PropType<"left" | "right" | "right-hanging">;
     readonly showFeedback: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -34,15 +34,15 @@ declare const formProps: {
         readonly default: undefined;
     };
     readonly theme: PropType<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -65,15 +65,15 @@ declare const formProps: {
         labelTextAlignHorizontal: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -96,15 +96,15 @@ declare const formProps: {
         labelTextAlignHorizontal: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -143,12 +143,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly rules: PropType<FormRules>;
     readonly disabled: BooleanConstructor;
-    readonly size: PropType<"small" | "medium" | "large">;
+    readonly size: PropType<Size>;
     readonly showRequireMark: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
     };
-    readonly requireMarkPlacement: PropType<"left" | "right">;
+    readonly requireMarkPlacement: PropType<"left" | "right" | "right-hanging">;
     readonly showFeedback: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -162,15 +162,15 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly theme: PropType<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -193,15 +193,15 @@ declare const _default: import("vue").DefineComponent<{
         labelTextAlignHorizontal: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -224,15 +224,15 @@ declare const _default: import("vue").DefineComponent<{
         labelTextAlignHorizontal: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -281,17 +281,17 @@ declare const _default: import("vue").DefineComponent<{
     model: Record<string, any>;
     showFeedback: boolean;
 } & {
-    size?: "small" | "medium" | "large" | undefined;
+    size?: Size | undefined;
     theme?: import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -314,15 +314,15 @@ declare const _default: import("vue").DefineComponent<{
         labelTextAlignHorizontal: string;
     }, any> | undefined;
     themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -345,15 +345,15 @@ declare const _default: import("vue").DefineComponent<{
         labelTextAlignHorizontal: string;
     }, any>> | undefined;
     builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Form", {
+        blankHeightSmall: string;
+        blankHeightMedium: string;
+        blankHeightLarge: string;
         lineHeight: string;
         labelTextColor: string;
         asteriskColor: string;
         feedbackTextColorError: string;
         feedbackTextColorWarning: string;
         feedbackTextColor: string;
-        blankHeightSmall: string;
-        blankHeightMedium: string;
-        blankHeightLarge: string;
         feedbackPadding: string;
         feedbackHeightSmall: string;
         feedbackHeightMedium: string;
@@ -379,7 +379,7 @@ declare const _default: import("vue").DefineComponent<{
     labelWidth?: string | number | undefined;
     rules?: FormRules | undefined;
     showRequireMark?: boolean | undefined;
-    requireMarkPlacement?: "left" | "right" | undefined;
+    requireMarkPlacement?: "left" | "right" | "right-hanging" | undefined;
     showLabel?: boolean | undefined;
 }>, {
     inline: boolean;

package/lib/form/src/Form.js

@@ -45,6 +45,15 @@ exports.default = (0, vue_1.defineComponent)({
         (0, _mixins_1.useTheme)('Form', 'Form', form_cssr_1.default, styles_1.formLight, props, mergedClsPrefixRef);
         // from path to form-item
         const formItems = {};
+        // for label-width = 'auto'
+        const maxChildLabelWidthRef = (0, vue_1.ref)(undefined);
+        const deriveMaxChildLabelWidth = (currentWidth) => {
+            const currentMaxChildLabelWidth = maxChildLabelWidthRef.value;
+            if (currentMaxChildLabelWidth === undefined ||
+                currentWidth >= currentMaxChildLabelWidth) {
+                maxChildLabelWidthRef.value = currentWidth;
+            }
+        };
         function validate(validateCallback, shouldRuleBeApplied = () => true) {
             return __awaiter(this, void 0, void 0, function* () {
                 return yield new Promise((resolve, reject) => {
@@ -65,16 +74,12 @@ exports.default = (0, vue_1.defineComponent)({
                             if (validateCallback) {
                                 validateCallback(errors);
                             }
-                            else {
-                                reject(errors);
-                            }
+                            reject(errors);
                         }
                         else {
                             if (validateCallback)
                                 validateCallback();
-                            else {
-                                resolve();
-                            }
+                            resolve();
                         }
                     });
                 });
@@ -88,7 +93,11 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         }
-        (0, vue_1.provide)(interface_1.formInjectionKey, props);
+        (0, vue_1.provide)(interface_1.formInjectionKey, {
+            props,
+            maxChildLabelWidthRef,
+            deriveMaxChildLabelWidth
+        });
         (0, vue_1.provide)(interface_1.formItemInstsInjectionKey, { formItems });
         const formExposedMethod = {
             validate,