naive-ui 2.22.0 → 2.24.0

package/es/form/src/utils.js

@@ -8,8 +8,8 @@ export function formItemSize(props) {
         mergedSize: computed(() => {
             if (props.size !== undefined)
                 return props.size;
-            if ((NForm === null || NForm === void 0 ? void 0 : NForm.size) !== undefined)
-                return NForm.size;
+            if ((NForm === null || NForm === void 0 ? void 0 : NForm.props.size) !== undefined)
+                return NForm.props.size;
             return 'medium';
         })
     };
@@ -21,11 +21,20 @@ export function formItemMisc(props) {
         if (mergedLabelPlacementRef.value === 'top')
             return;
         const { labelWidth } = props;
-        if (labelWidth !== undefined) {
+        if (labelWidth !== undefined && labelWidth !== 'auto') {
             return formatLength(labelWidth);
         }
-        if ((NForm === null || NForm === void 0 ? void 0 : NForm.labelWidth) !== undefined) {
-            return formatLength(NForm.labelWidth);
+        if (labelWidth === 'auto' || (NForm === null || NForm === void 0 ? void 0 : NForm.props.labelWidth) === 'auto') {
+            const autoComputedWidth = NForm === null || NForm === void 0 ? void 0 : NForm.maxChildLabelWidthRef.value;
+            if (autoComputedWidth !== undefined) {
+                return formatLength(autoComputedWidth);
+            }
+            else {
+                return undefined;
+            }
+        }
+        if ((NForm === null || NForm === void 0 ? void 0 : NForm.props.labelWidth) !== undefined) {
+            return formatLength(NForm.props.labelWidth);
         }
         return undefined;
     });
@@ -33,37 +42,39 @@ export function formItemMisc(props) {
         const { labelPlacement } = props;
         if (labelPlacement !== undefined)
             return labelPlacement;
-        if (NForm === null || NForm === void 0 ? void 0 : NForm.labelPlacement)
-            return NForm.labelPlacement;
+        if (NForm === null || NForm === void 0 ? void 0 : NForm.props.labelPlacement)
+            return NForm.props.labelPlacement;
         return 'top';
     });
     const mergedLabelAlignRef = computed(() => {
         const { labelAlign } = props;
         if (labelAlign)
             return labelAlign;
-        if (NForm === null || NForm === void 0 ? void 0 : NForm.labelAlign)
-            return NForm.labelAlign;
+        if (NForm === null || NForm === void 0 ? void 0 : NForm.props.labelAlign)
+            return NForm.props.labelAlign;
         return undefined;
     });
     const mergedLabelStyleRef = computed(() => {
+        var _a;
         return [
+            (_a = props.labelProps) === null || _a === void 0 ? void 0 : _a.style,
+            props.labelStyle,
             {
                 width: mergedLabelWidthRef.value
-            },
-            props.labelStyle
+            }
         ];
     });
     const mergedShowRequireMarkRef = computed(() => {
         const { showRequireMark } = props;
         if (showRequireMark !== undefined)
             return showRequireMark;
-        return NForm === null || NForm === void 0 ? void 0 : NForm.showRequireMark;
+        return NForm === null || NForm === void 0 ? void 0 : NForm.props.showRequireMark;
     });
     const mergedRequireMarkPlacementRef = computed(() => {
         const { requireMarkPlacement } = props;
         if (requireMarkPlacement !== undefined)
             return requireMarkPlacement;
-        return NForm === null || NForm === void 0 ? void 0 : NForm.requireMarkPlacement;
+        return (NForm === null || NForm === void 0 ? void 0 : NForm.props.requireMarkPlacement) || 'right';
     });
     const validationErroredRef = ref(false);
     const mergedValidationStatusRef = computed(() => {
@@ -78,16 +89,16 @@ export function formItemMisc(props) {
         const { showFeedback } = props;
         if (showFeedback !== undefined)
             return showFeedback;
-        if ((NForm === null || NForm === void 0 ? void 0 : NForm.showFeedback) !== undefined)
-            return NForm.showFeedback;
+        if ((NForm === null || NForm === void 0 ? void 0 : NForm.props.showFeedback) !== undefined)
+            return NForm.props.showFeedback;
         return true;
     });
     const mergedShowLabelRef = computed(() => {
         const { showLabel } = props;
         if (showLabel !== undefined)
             return showLabel;
-        if ((NForm === null || NForm === void 0 ? void 0 : NForm.showLabel) !== undefined)
-            return NForm.showLabel;
+        if ((NForm === null || NForm === void 0 ? void 0 : NForm.props.showLabel) !== undefined)
+            return NForm.props.showLabel;
         return true;
     });
     return {
@@ -124,7 +135,7 @@ export function formItemRule(props) {
                 rules.push(rule);
         }
         if (NForm) {
-            const { rules: formRules } = NForm;
+            const { rules: formRules } = NForm.props;
             const { value: rulePath } = compatibleRulePathRef;
             if (formRules !== undefined && rulePath !== undefined) {
                 const formRule = get(formRules, rulePath);

package/es/form/styles/_common.d.ts

@@ -1,7 +1,4 @@
 declare const _default: {
-    blankHeightSmall: string;
-    blankHeightMedium: string;
-    blankHeightLarge: string;
     feedbackPadding: string;
     feedbackHeightSmall: string;
     feedbackHeightMedium: string;

package/es/form/styles/_common.js

@@ -1,7 +1,4 @@
 export default {
-    blankHeightSmall: '28px',
-    blankHeightMedium: '34px',
-    blankHeightLarge: '40px',
     feedbackPadding: '4px 0 0 2px',
     feedbackHeightSmall: '24px',
     feedbackHeightMedium: '24px',

package/es/form/styles/light.d.ts

@@ -1,15 +1,15 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
+    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;

package/es/form/styles/light.js

@@ -1,8 +1,8 @@
 import { commonLight } from '../../_styles/common';
 import commonVariables from './_common';
 export const self = (vars) => {
-    const { textColor1, errorColor, warningColor, lineHeight, textColor3 } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { lineHeight, labelTextColor: textColor1, asteriskColor: errorColor, feedbackTextColorError: errorColor, feedbackTextColorWarning: warningColor, feedbackTextColor: textColor3 });
+    const { heightSmall, heightMedium, heightLarge, textColor1, errorColor, warningColor, lineHeight, textColor3 } = vars;
+    return Object.assign(Object.assign({}, commonVariables), { blankHeightSmall: heightSmall, blankHeightMedium: heightMedium, blankHeightLarge: heightLarge, lineHeight, labelTextColor: textColor1, asteriskColor: errorColor, feedbackTextColorError: errorColor, feedbackTextColorWarning: warningColor, feedbackTextColor: textColor3 });
 };
 const formLight = {
     name: 'Form',

package/es/gradient-text/src/GradientText.d.ts

@@ -115,11 +115,11 @@ declare const _default: import("vue").DefineComponent<{
     styleFontSize: import("vue").ComputedRef<string | number | undefined>;
     styleBgImage: import("vue").ComputedRef<string | undefined>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--rotate': string;
-        '--color-start': string;
-        '--color-end': string;
-        '--font-weight': string;
+        '--n-bezier': string;
+        '--n-rotate': string;
+        '--n-color-start': string;
+        '--n-color-end': string;
+        '--n-font-weight': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly size?: unknown;

package/es/gradient-text/src/GradientText.js

@@ -48,11 +48,11 @@ export default defineComponent({
                 const { value: type } = compatibleTypeRef;
                 const { common: { cubicBezierEaseInOut }, self: { rotate, [createKey('colorStart', type)]: colorStart, [createKey('colorEnd', type)]: colorEnd, fontWeight } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--rotate': rotate,
-                    '--color-start': colorStart,
-                    '--color-end': colorEnd,
-                    '--font-weight': fontWeight
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-rotate': rotate,
+                    '--n-color-start': colorStart,
+                    '--n-color-end': colorEnd,
+                    '--n-font-weight': fontWeight
                 };
             })
         };

package/es/gradient-text/src/styles/index.cssr.js

@@ -1,19 +1,19 @@
 import { cB } from '../../../_utils/cssr'; // vars:
-// --font-weight
-// --rotate
-// --bezier
-// --color-start
-// --color-end
+// --n-font-weight
+// --n-rotate
+// --n-bezier
+// --n-color-start
+// --n-color-end
 
 export default cB('gradient-text', `
  display: inline-block;
- font-weight: var(--font-weight);
+ font-weight: var(--n-font-weight);
  -webkit-background-clip: text;
  background-clip: text;
  color: #0000;
  white-space: nowrap;
- background-image: linear-gradient(var(--rotate), var(--color-start) 0%, var(--color-end) 100%);
+ background-image: linear-gradient(var(--n-rotate), var(--n-color-start) 0%, var(--n-color-end) 100%);
  transition:
- --color-start .3s var(--bezier),
- --color-end .3s var(--bezier);
+ --n-color-start .3s var(--n-bezier),
+ --n-color-end .3s var(--n-bezier);
 `);

package/es/icon/src/Icon.d.ts

@@ -35,13 +35,13 @@ declare const _default: import("vue").DefineComponent<{
         color: string | undefined;
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--color': string;
-        '--opacity': string;
+        '--n-bezier': string;
+        '--n-color': string;
+        '--n-opacity': string;
     } | {
-        '--bezier': string;
-        '--color'?: undefined;
-        '--opacity'?: undefined;
+        '--n-bezier': string;
+        '--n-color'?: undefined;
+        '--n-opacity'?: undefined;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     depth?: unknown;

package/es/icon/src/Icon.js

@@ -26,13 +26,13 @@ export default defineComponent({
                 if (depth !== undefined) {
                     const { color, [`opacity${depth}Depth`]: opacity } = self;
                     return {
-                        '--bezier': cubicBezierEaseInOut,
-                        '--color': color,
-                        '--opacity': opacity
+                        '--n-bezier': cubicBezierEaseInOut,
+                        '--n-color': color,
+                        '--n-opacity': opacity
                     };
                 }
                 return {
-                    '--bezier': cubicBezierEaseInOut
+                    '--n-bezier': cubicBezierEaseInOut
                 };
             })
         };

package/es/icon/src/styles/index.cssr.js

@@ -1,7 +1,7 @@
 import { c, cB, cM } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --color
-// --opacity
+// --n-bezier
+// --n-color
+// --n-opacity
 
 export default cB('icon', `
  height: 1em;
@@ -13,12 +13,12 @@ export default cB('icon', `
  fill: currentColor;
  transform: translateZ(0);
 `, [cM('color-transition', {
-  transition: 'color .3s var(--bezier)'
+  transition: 'color .3s var(--n-bezier)'
 }), cM('depth', {
-  color: 'var(--color)'
+  color: 'var(--n-color)'
 }, [c('svg', {
-  opacity: 'var(--opacity)',
-  transition: 'opacity .3s var(--bezier)'
+  opacity: 'var(--n-opacity)',
+  transition: 'opacity .3s var(--n-bezier)'
 })]), c('svg', {
   height: '1em',
   width: '1em'

package/es/image/src/Image.d.ts

@@ -1,9 +1,101 @@
 import { PropType, ImgHTMLAttributes } from 'vue';
-import { ExtractPublicPropTypes } from '../../_utils';
+import type { ExtractPublicPropTypes } from '../../_utils';
 export interface ImageInst {
     click: () => void;
 }
 declare const imageProps: {
+    showToolbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showToolbarTooltip: BooleanConstructor;
+    theme: PropType<import("../../_mixins").Theme<"Image", {
+        toolbarIconColor: string;
+        toolbarColor: string;
+        toolbarBoxShadow: string;
+        toolbarBorderRadius: string;
+    }, {
+        Tooltip: import("../../_mixins").Theme<"Tooltip", {
+            borderRadius: string;
+            boxShadow: string;
+            color: string;
+            textColor: string;
+            padding: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+            }, any>;
+        }>;
+    }>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+        toolbarIconColor: string;
+        toolbarColor: string;
+        toolbarBoxShadow: string;
+        toolbarBorderRadius: string;
+    }, {
+        Tooltip: import("../../_mixins").Theme<"Tooltip", {
+            borderRadius: string;
+            boxShadow: string;
+            color: string;
+            textColor: string;
+            padding: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+            }, any>;
+        }>;
+    }>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+        toolbarIconColor: string;
+        toolbarColor: string;
+        toolbarBoxShadow: string;
+        toolbarBorderRadius: string;
+    }, {
+        Tooltip: import("../../_mixins").Theme<"Tooltip", {
+            borderRadius: string;
+            boxShadow: string;
+            color: string;
+            textColor: string;
+            padding: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+            }, any>;
+        }>;
+    }>>>;
     alt: StringConstructor;
     height: PropType<string | number>;
     imgProps: PropType<ImgHTMLAttributes>;
@@ -15,10 +107,6 @@ declare const imageProps: {
     fallbackSrc: StringConstructor;
     width: PropType<string | number>;
     src: StringConstructor;
-    showToolbar: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     previewDisabled: BooleanConstructor;
     loadDescription: StringConstructor;
     onError: PropType<(e: Event) => void>;
@@ -26,6 +114,98 @@ declare const imageProps: {
 };
 export declare type ImageProps = ExtractPublicPropTypes<typeof imageProps>;
 declare const _default: import("vue").DefineComponent<{
+    showToolbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showToolbarTooltip: BooleanConstructor;
+    theme: PropType<import("../../_mixins").Theme<"Image", {
+        toolbarIconColor: string;
+        toolbarColor: string;
+        toolbarBoxShadow: string;
+        toolbarBorderRadius: string;
+    }, {
+        Tooltip: import("../../_mixins").Theme<"Tooltip", {
+            borderRadius: string;
+            boxShadow: string;
+            color: string;
+            textColor: string;
+            padding: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+            }, any>;
+        }>;
+    }>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+        toolbarIconColor: string;
+        toolbarColor: string;
+        toolbarBoxShadow: string;
+        toolbarBorderRadius: string;
+    }, {
+        Tooltip: import("../../_mixins").Theme<"Tooltip", {
+            borderRadius: string;
+            boxShadow: string;
+            color: string;
+            textColor: string;
+            padding: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+            }, any>;
+        }>;
+    }>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+        toolbarIconColor: string;
+        toolbarColor: string;
+        toolbarBoxShadow: string;
+        toolbarBorderRadius: string;
+    }, {
+        Tooltip: import("../../_mixins").Theme<"Tooltip", {
+            borderRadius: string;
+            boxShadow: string;
+            color: string;
+            textColor: string;
+            padding: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+            }, any>;
+        }>;
+    }>>>;
     alt: StringConstructor;
     height: PropType<string | number>;
     imgProps: PropType<ImgHTMLAttributes>;
@@ -37,10 +217,6 @@ declare const _default: import("vue").DefineComponent<{
     fallbackSrc: StringConstructor;
     width: PropType<string | number>;
     src: StringConstructor;
-    showToolbar: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     previewDisabled: BooleanConstructor;
     loadDescription: StringConstructor;
     onError: PropType<(e: Event) => void>;
@@ -60,6 +236,11 @@ declare const _default: import("vue").DefineComponent<{
     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<{
+    showToolbar?: unknown;
+    showToolbarTooltip?: unknown;
+    theme?: unknown;
+    themeOverrides?: unknown;
+    builtinThemeOverrides?: unknown;
     alt?: unknown;
     height?: unknown;
     imgProps?: unknown;
@@ -68,7 +249,6 @@ declare const _default: import("vue").DefineComponent<{
     fallbackSrc?: unknown;
     width?: unknown;
     src?: unknown;
-    showToolbar?: unknown;
     previewDisabled?: unknown;
     loadDescription?: unknown;
     onError?: unknown;
@@ -76,6 +256,7 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     objectFit: "fill" | "none" | "contain" | "cover" | "scale-down";
     showToolbar: boolean;
+    showToolbarTooltip: boolean;
     previewDisabled: boolean;
 } & {
     onError?: ((e: Event) => void) | undefined;
@@ -84,6 +265,93 @@ declare const _default: import("vue").DefineComponent<{
     onLoad?: ((e: Event) => void) | undefined;
     alt?: string | undefined;
     src?: string | undefined;
+    theme?: import("../../_mixins").Theme<"Image", {
+        toolbarIconColor: string;
+        toolbarColor: string;
+        toolbarBoxShadow: string;
+        toolbarBorderRadius: string;
+    }, {
+        Tooltip: import("../../_mixins").Theme<"Tooltip", {
+            borderRadius: string;
+            boxShadow: string;
+            color: string;
+            textColor: string;
+            padding: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+            }, any>;
+        }>;
+    }> | undefined;
+    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+        toolbarIconColor: string;
+        toolbarColor: string;
+        toolbarBoxShadow: string;
+        toolbarBorderRadius: string;
+    }, {
+        Tooltip: import("../../_mixins").Theme<"Tooltip", {
+            borderRadius: string;
+            boxShadow: string;
+            color: string;
+            textColor: string;
+            padding: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+            }, any>;
+        }>;
+    }>> | undefined;
+    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+        toolbarIconColor: string;
+        toolbarColor: string;
+        toolbarBoxShadow: string;
+        toolbarBorderRadius: string;
+    }, {
+        Tooltip: import("../../_mixins").Theme<"Tooltip", {
+            borderRadius: string;
+            boxShadow: string;
+            color: string;
+            textColor: string;
+            padding: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+            }, any>;
+        }>;
+    }>> | undefined;
     fallbackSrc?: string | undefined;
     previewSrc?: string | undefined;
     imgProps?: ImgHTMLAttributes | undefined;
@@ -91,6 +359,7 @@ declare const _default: import("vue").DefineComponent<{
 }>, {
     objectFit: "fill" | "none" | "contain" | "cover" | "scale-down";
     showToolbar: boolean;
+    showToolbarTooltip: boolean;
     previewDisabled: boolean;
 }>;
 export default _default;