naive-ui 2.20.0 → 2.21.0

package/es/menu/src/MenuOptionContent.d.ts

@@ -49,6 +49,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly value?: unknown;
         readonly defaultValue?: unknown;
         readonly mode?: unknown;
+        readonly watchProps?: unknown;
         readonly disabled?: unknown;
         readonly inverted?: unknown;
         readonly 'onUpdate:expandedKeys'?: unknown;
@@ -76,7 +77,7 @@ declare const _default: import("vue").DefineComponent<{
         disabled: boolean;
         keyField: string;
         iconSize: number;
-        options: (import("./interface").MenuOption | import("./interface").MenuGroupOption)[];
+        options: import("./interface").MenuMixedOption[];
         defaultValue: import("treemate").Key | null;
         indent: number;
         labelField: string;
@@ -129,6 +130,7 @@ declare const _default: import("vue").DefineComponent<{
             itemColorActiveCollapsedInverted: string;
             borderColorHorizontal: string;
             fontSize: string;
+            dividerColor: string;
         }, {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
                 borderRadius: string;
@@ -192,6 +194,7 @@ declare const _default: import("vue").DefineComponent<{
             itemColorActiveCollapsedInverted: string;
             borderColorHorizontal: string;
             fontSize: string;
+            dividerColor: string;
         }, {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
                 borderRadius: string;
@@ -255,6 +258,7 @@ declare const _default: import("vue").DefineComponent<{
             itemColorActiveCollapsedInverted: string;
             borderColorHorizontal: string;
             fontSize: string;
+            dividerColor: string;
         }, {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
                 borderRadius: string;
@@ -289,9 +293,10 @@ declare const _default: import("vue").DefineComponent<{
         onExpandedNamesChange?: import("../../_utils").MaybeArray<import("./interface").OnUpdateKeys> | undefined;
         collapsed?: boolean | undefined;
         expandIcon?: ((option: import("./interface").MenuOption) => import("vue").VNodeChild) | undefined;
-        rootIndent?: number | undefined;
         defaultExpandedKeys?: import("treemate").Key[] | undefined;
+        rootIndent?: number | undefined;
         expandedKeys?: import("treemate").Key[] | undefined;
+        watchProps?: ("defaultValue" | "defaultExpandedKeys")[] | undefined;
         "onUpdate:expandedKeys"?: import("../../_utils").MaybeArray<import("./interface").OnUpdateKeys> | undefined;
         onUpdateExpandedKeys?: import("../../_utils").MaybeArray<import("./interface").OnUpdateKeys> | undefined;
         renderExtra?: ((option: import("./interface").MenuOption | import("./interface").MenuGroupOption) => import("vue").VNodeChild) | undefined;

package/es/menu/src/Submenu.d.ts

@@ -1,14 +1,13 @@
 import { PropType, VNodeChild, InjectionKey } from 'vue';
 import type { SubmenuInjection } from './use-menu-child';
-import { TreeNode } from 'treemate';
-import { MenuGroupOption, MenuOption, TmNode } from './interface';
+import { MenuMixedOption, TmNode } from './interface';
 export declare const submenuProps: {
     readonly rawNodes: {
-        readonly type: PropType<(MenuOption | MenuGroupOption)[]>;
+        readonly type: PropType<MenuMixedOption[]>;
         readonly default: () => never[];
     };
     readonly tmNodes: {
-        readonly type: PropType<TreeNode<MenuOption, MenuGroupOption, MenuOption>[]>;
+        readonly type: PropType<TmNode[]>;
         readonly default: () => never[];
     };
     readonly tmNode: {
@@ -37,11 +36,11 @@ export declare const submenuProps: {
 export declare const submenuInjectionKey: InjectionKey<SubmenuInjection>;
 declare const _default: import("vue").DefineComponent<{
     readonly rawNodes: {
-        readonly type: PropType<(MenuOption | MenuGroupOption)[]>;
+        readonly type: PropType<MenuMixedOption[]>;
         readonly default: () => never[];
     };
     readonly tmNodes: {
-        readonly type: PropType<TreeNode<MenuOption, MenuGroupOption, MenuOption>[]>;
+        readonly type: PropType<TmNode[]>;
         readonly default: () => never[];
     };
     readonly tmNode: {
@@ -84,6 +83,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly value?: unknown;
         readonly defaultValue?: unknown;
         readonly mode?: unknown;
+        readonly watchProps?: unknown;
         readonly disabled?: unknown;
         readonly inverted?: unknown;
         readonly 'onUpdate:expandedKeys'?: unknown;
@@ -111,7 +111,7 @@ declare const _default: import("vue").DefineComponent<{
         disabled: boolean;
         keyField: string;
         iconSize: number;
-        options: (MenuOption | MenuGroupOption)[];
+        options: MenuMixedOption[];
         defaultValue: import("treemate").Key | null;
         indent: number;
         labelField: string;
@@ -164,6 +164,7 @@ declare const _default: import("vue").DefineComponent<{
             itemColorActiveCollapsedInverted: string;
             borderColorHorizontal: string;
             fontSize: string;
+            dividerColor: string;
         }, {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
                 borderRadius: string;
@@ -227,6 +228,7 @@ declare const _default: import("vue").DefineComponent<{
             itemColorActiveCollapsedInverted: string;
             borderColorHorizontal: string;
             fontSize: string;
+            dividerColor: string;
         }, {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
                 borderRadius: string;
@@ -290,6 +292,7 @@ declare const _default: import("vue").DefineComponent<{
             itemColorActiveCollapsedInverted: string;
             borderColorHorizontal: string;
             fontSize: string;
+            dividerColor: string;
         }, {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
                 borderRadius: string;
@@ -314,22 +317,23 @@ declare const _default: import("vue").DefineComponent<{
                 }, any>;
             }>;
         }>> | undefined;
-        items?: (MenuOption | MenuGroupOption)[] | undefined;
-        renderIcon?: ((option: MenuOption) => VNodeChild) | undefined;
-        renderLabel?: ((option: MenuOption | MenuGroupOption) => VNodeChild) | undefined;
+        items?: (import("./interface").MenuOption | import("./interface").MenuGroupOption)[] | undefined;
+        renderIcon?: ((option: import("./interface").MenuOption) => VNodeChild) | undefined;
+        renderLabel?: ((option: import("./interface").MenuOption | import("./interface").MenuGroupOption) => VNodeChild) | undefined;
         "onUpdate:value"?: import("../../_utils").MaybeArray<import("./interface").OnUpdateValue> | undefined;
         onUpdateValue?: import("../../_utils").MaybeArray<import("./interface").OnUpdateValue> | undefined;
         defaultExpandedNames?: import("treemate").Key[] | undefined;
         expandedNames?: import("treemate").Key[] | undefined;
         onExpandedNamesChange?: import("../../_utils").MaybeArray<import("./interface").OnUpdateKeys> | undefined;
         collapsed?: boolean | undefined;
-        expandIcon?: ((option: MenuOption) => VNodeChild) | undefined;
-        rootIndent?: number | undefined;
+        expandIcon?: ((option: import("./interface").MenuOption) => VNodeChild) | undefined;
         defaultExpandedKeys?: import("treemate").Key[] | undefined;
+        rootIndent?: number | undefined;
         expandedKeys?: import("treemate").Key[] | undefined;
+        watchProps?: ("defaultValue" | "defaultExpandedKeys")[] | undefined;
         "onUpdate:expandedKeys"?: import("../../_utils").MaybeArray<import("./interface").OnUpdateKeys> | undefined;
         onUpdateExpandedKeys?: import("../../_utils").MaybeArray<import("./interface").OnUpdateKeys> | undefined;
-        renderExtra?: ((option: MenuOption | MenuGroupOption) => VNodeChild) | undefined;
+        renderExtra?: ((option: import("./interface").MenuOption | import("./interface").MenuGroupOption) => VNodeChild) | undefined;
         dropdownProps?: import("../../dropdown").DropdownProps | undefined;
         onOpenNamesChange?: import("../../_utils").MaybeArray<import("./interface").OnUpdateKeys> | undefined;
     };
@@ -369,9 +373,9 @@ declare const _default: import("vue").DefineComponent<{
     tmNode: TmNode;
     level: number;
     isGroup: boolean;
-    tmNodes: TreeNode<MenuOption, MenuGroupOption, MenuOption>[];
+    tmNodes: TmNode[];
     internalKey: import("treemate").Key;
-    rawNodes: (MenuOption | MenuGroupOption)[];
+    rawNodes: MenuMixedOption[];
 } & {
     extra?: string | (() => VNodeChild) | undefined;
     icon?: (() => VNodeChild) | undefined;
@@ -381,7 +385,7 @@ declare const _default: import("vue").DefineComponent<{
     root: boolean;
     disabled: boolean;
     isGroup: boolean;
-    tmNodes: TreeNode<MenuOption, MenuGroupOption, MenuOption>[];
-    rawNodes: (MenuOption | MenuGroupOption)[];
+    tmNodes: TmNode[];
+    rawNodes: MenuMixedOption[];
 }>;
 export default _default;

package/es/menu/src/interface.d.ts

@@ -1,19 +1,37 @@
 import { TreeNode } from 'treemate';
-import { VNodeChild } from 'vue';
+import { VNodeChild, HTMLAttributes } from 'vue';
 export declare type Key = string | number;
 export interface MenuOptionSharedPart {
     key?: Key;
     disabled?: boolean;
     icon?: () => VNodeChild;
-    children?: Array<MenuOption | MenuGroupOption>;
+    children?: Array<MenuOption | MenuGroupOption | MenuDividerOption>;
     extra?: string | (() => VNodeChild);
+    props?: HTMLAttributes;
     [key: string]: unknown;
     /** @deprecated */
     titleExtra?: string | (() => VNodeChild);
 }
+/**
+ * @private
+ */
+export declare type MenuIgnoredOption = MenuDividerOption | MenuRenderOption;
+export interface MenuDividerOption {
+    type: 'divider';
+    key?: Key;
+    props?: HTMLAttributes;
+    [key: string]: unknown;
+}
+export interface MenuRenderOption {
+    type: 'render';
+    key?: Key;
+    props?: HTMLAttributes;
+    render?: () => VNodeChild;
+    [key: string]: unknown;
+}
 export interface MenuGroupOptionBase extends MenuOptionSharedPart {
     type: 'group';
-    children?: Array<MenuOption | MenuGroupOption>;
+    children: Array<MenuOption | MenuDividerOption>;
 }
 export declare type MenuOption = (MenuOptionSharedPart & {
     /** @deprecated */
@@ -27,7 +45,8 @@ export declare type MenuGroupOption = (MenuGroupOptionBase & {
 }) | (MenuGroupOptionBase & {
     label?: string | (() => VNodeChild);
 });
-export declare type TmNode = TreeNode<MenuOption, MenuGroupOption>;
+export declare type MenuMixedOption = MenuDividerOption | MenuOption | MenuGroupOption;
+export declare type TmNode = TreeNode<MenuOption, MenuGroupOption, MenuIgnoredOption>;
 export declare type OnUpdateValue = (value: string & number & (string | number), item: MenuOption) => void;
 export declare type OnUpdateKeys = (keys: string[] & number[] & Array<string | number>) => void;
 export declare type OnUpdateValueImpl = (value: string | number | (string | number), item: MenuOption) => void;

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

@@ -193,7 +193,12 @@ export default c([cB('menu', `
  `)])]), cB('menu-tooltip', [c('a', `
  color: inherit;
  text-decoration: none;
- `)])]);
+ `)]), cB('menu-divider', `
+ transition: background-color .3s var(--bezier);
+ background-color: var(--divider-color);
+ height: 1px;
+ margin: 6px 18px;
+ `)]);
 
 function hoverStyle(props, children) {
   return [cM('hover', props, children), c('&:hover', props, children)];

package/es/menu/src/utils.d.ts

@@ -1,5 +1,7 @@
 import { VNode } from 'vue';
 import type { TreeNode } from 'treemate';
-import { MenuOption, MenuGroupOption } from './interface';
+import { MenuOption, MenuGroupOption, MenuIgnoredOption, MenuMixedOption } from './interface';
 import { MenuSetupProps } from './Menu';
-export declare function itemRenderer(tmNode: TreeNode<MenuOption, MenuGroupOption>, menuProps: MenuSetupProps): VNode;
+export declare function isIgnoredNode(rawNode: MenuMixedOption): rawNode is MenuIgnoredOption;
+export declare function isDividerNode(rawNode: MenuMixedOption): rawNode is MenuIgnoredOption;
+export declare function itemRenderer(tmNode: TreeNode<MenuOption, MenuGroupOption, MenuIgnoredOption>, menuProps: MenuSetupProps): VNode | undefined;

package/es/menu/src/utils.js

@@ -3,12 +3,26 @@ import { keep, keysOf } from '../../_utils';
 import NMenuOptionGroup, { menuItemGroupProps } from './MenuOptionGroup';
 import NSubmenu, { submenuProps } from './Submenu';
 import NMenuOption, { menuItemProps } from './MenuOption';
+import NMenuDivider from './MenuDivider';
 const groupPropKeys = keysOf(menuItemGroupProps);
 const itemPropKeys = keysOf(menuItemProps);
 const submenuPropKeys = keysOf(submenuProps);
+export function isIgnoredNode(rawNode) {
+    return rawNode.type === 'divider' || rawNode.type === 'render';
+}
+export function isDividerNode(rawNode) {
+    return rawNode.type === 'divider';
+}
 export function itemRenderer(tmNode, menuProps) {
+    const { rawNode } = tmNode;
+    if (isIgnoredNode(rawNode)) {
+        if (isDividerNode(rawNode)) {
+            return h(NMenuDivider, Object.assign({ key: tmNode.key }, rawNode.props));
+        }
+        return undefined;
+    }
     const { labelField } = menuProps;
-    const { rawNode, key, level, isGroup } = tmNode;
+    const { key, level, isGroup } = tmNode;
     const props = Object.assign(Object.assign({}, rawNode), { title: (rawNode.title || rawNode[labelField]), extra: rawNode.titleExtra || rawNode.extra, key, internalKey: key, // since key can't be used as a prop
         level, root: level === 0, isGroup });
     if (tmNode.children) {
@@ -17,7 +31,7 @@ export function itemRenderer(tmNode, menuProps) {
         }
         return h(NSubmenu, keep(props, submenuPropKeys, {
             key,
-            rawNodes: tmNode.rawNode[menuProps.childrenField],
+            rawNodes: rawNode[menuProps.childrenField],
             tmNodes: tmNode.children,
             tmNode
         }));

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

@@ -54,6 +54,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     itemColorActiveCollapsedInverted: string;
     borderColorHorizontal: string;
     fontSize: string;
+    dividerColor: string;
 };
 export declare type MenuThemeVars = ReturnType<typeof self>;
 declare const menuLight: import("../../_mixins/use-theme").Theme<"Menu", {
@@ -95,6 +96,7 @@ declare const menuLight: import("../../_mixins/use-theme").Theme<"Menu", {
     itemColorActiveCollapsedInverted: string;
     borderColorHorizontal: string;
     fontSize: string;
+    dividerColor: string;
 }, {
     Tooltip: import("../../_mixins/use-theme").Theme<"Tooltip", {
         borderRadius: string;

package/es/menu/styles/light.js

@@ -21,8 +21,9 @@ export function createPartialInvertedVars(color, activeColor, groupColor) {
     };
 }
 export const self = (vars) => {
-    const { borderRadius, textColor3, primaryColor, textColor2, primaryColorHover, textColor1, fontSize } = vars;
-    return Object.assign({ borderRadius: borderRadius, color: '#0000', groupTextColor: textColor3, itemColorActive: changeColor(primaryColor, { alpha: 0.1 }), itemColorActiveCollapsed: '#0000', itemTextColor: textColor2, itemTextColorHover: primaryColorHover, itemTextColorChildActive: primaryColor, itemTextColorActive: primaryColor, itemIconColor: textColor1, itemIconColorHover: primaryColorHover, itemIconColorActive: primaryColor, itemIconColorChildActive: primaryColor, itemIconColorCollapsed: textColor1, itemHeight: '42px', arrowColor: primaryColor, arrowColorHover: primaryColorHover, arrowColorChildActive: primaryColor, arrowColorActive: primaryColor, colorInverted: '#0000', itemColorActiveInverted: primaryColor, itemColorActiveCollapsedInverted: primaryColor, borderColorHorizontal: '#0000', fontSize }, createPartialInvertedVars('#BBB', '#FFF', '#AAA'));
+    const { borderRadius, textColor3, primaryColor, textColor2, primaryColorHover, textColor1, fontSize, dividerColor } = vars;
+    return Object.assign({ borderRadius: borderRadius, color: '#0000', groupTextColor: textColor3, itemColorActive: changeColor(primaryColor, { alpha: 0.1 }), itemColorActiveCollapsed: '#0000', itemTextColor: textColor2, itemTextColorHover: primaryColorHover, itemTextColorChildActive: primaryColor, itemTextColorActive: primaryColor, itemIconColor: textColor1, itemIconColorHover: primaryColorHover, itemIconColorActive: primaryColor, itemIconColorChildActive: primaryColor, itemIconColorCollapsed: textColor1, itemHeight: '42px', arrowColor: textColor2, arrowColorHover: primaryColorHover, arrowColorChildActive: primaryColor, arrowColorActive: primaryColor, colorInverted: '#0000', itemColorActiveInverted: primaryColor, itemColorActiveCollapsedInverted: primaryColor, borderColorHorizontal: '#0000', fontSize,
+        dividerColor }, createPartialInvertedVars('#BBB', '#FFF', '#AAA'));
 };
 const menuLight = createTheme({
     name: 'Menu',

package/es/modal/src/BodyWrapper.d.ts

@@ -142,6 +142,9 @@ declare const _default: import("vue").DefineComponent<{
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -221,20 +224,30 @@ declare const _default: import("vue").DefineComponent<{
                     fontSizeMedium: string;
                     fontSizeLarge: string;
                     opacityDisabled: string;
+                    colorOpacitySecondary: number;
+                    colorOpacitySecondaryHover: number;
+                    colorOpacitySecondaryPressed: number;
+                    colorSecondary: string;
+                    colorSecondaryHover: string;
+                    colorSecondaryPressed: string;
+                    colorTertiary: string;
+                    colorTertiaryHover: string;
+                    colorTertiaryPressed: string;
+                    colorQuaternary: string;
+                    colorQuaternaryHover: string;
+                    colorQuaternaryPressed: string;
                     color: string;
                     colorHover: string;
                     colorPressed: string;
                     colorFocus: string;
                     colorDisabled: string;
                     textColor: string;
+                    textColorTertiary: string;
                     textColorHover: string;
                     textColorPressed: string;
                     textColorFocus: string;
                     textColorDisabled: string;
                     textColorText: string;
-                    textColorTextDepth1: string;
-                    textColorTextDepth2: string;
-                    textColorTextDepth3: string;
                     textColorTextHover: string;
                     textColorTextPressed: string;
                     textColorTextFocus: string;
@@ -381,9 +394,8 @@ declare const _default: import("vue").DefineComponent<{
                     borderDisabledError: string;
                     rippleColorError: string;
                     waveOpacity: string;
-                    fontWeightText: string;
                     fontWeight: string;
-                    fontWeighGhost: string;
+                    fontWeightStrong: string;
                     paddingTiny: string;
                     paddingSmall: string;
                     paddingMedium: string;
@@ -457,20 +469,30 @@ declare const _default: import("vue").DefineComponent<{
                         fontSizeMedium: string;
                         fontSizeLarge: string;
                         opacityDisabled: string;
+                        colorOpacitySecondary: number;
+                        colorOpacitySecondaryHover: number;
+                        colorOpacitySecondaryPressed: number;
+                        colorSecondary: string;
+                        colorSecondaryHover: string;
+                        colorSecondaryPressed: string;
+                        colorTertiary: string;
+                        colorTertiaryHover: string;
+                        colorTertiaryPressed: string;
+                        colorQuaternary: string;
+                        colorQuaternaryHover: string;
+                        colorQuaternaryPressed: string;
                         color: string;
                         colorHover: string;
                         colorPressed: string;
                         colorFocus: string;
                         colorDisabled: string;
                         textColor: string;
+                        textColorTertiary: string;
                         textColorHover: string;
                         textColorPressed: string;
                         textColorFocus: string;
                         textColorDisabled: string;
                         textColorText: string;
-                        textColorTextDepth1: string;
-                        textColorTextDepth2: string;
-                        textColorTextDepth3: string;
                         textColorTextHover: string;
                         textColorTextPressed: string;
                         textColorTextFocus: string;
@@ -617,9 +639,8 @@ declare const _default: import("vue").DefineComponent<{
                         borderDisabledError: string;
                         rippleColorError: string;
                         waveOpacity: string;
-                        fontWeightText: string;
                         fontWeight: string;
-                        fontWeighGhost: string;
+                        fontWeightStrong: string;
                         paddingTiny: string;
                         paddingSmall: string;
                         paddingMedium: string;
@@ -720,12 +741,12 @@ declare const _default: import("vue").DefineComponent<{
     onAfterEnter?: (() => void) | undefined;
     title?: string | (() => import("vue").VNodeChild) | undefined;
     action?: (() => import("vue").VNodeChild) | undefined;
+    positiveText?: string | undefined;
+    negativeText?: string | undefined;
     contentStyle?: string | import("vue").CSSProperties | undefined;
     iconPlacement?: import("../../dialog/src/interface").IconPlacement | undefined;
     headerStyle?: string | import("vue").CSSProperties | undefined;
     footerStyle?: string | import("vue").CSSProperties | undefined;
-    negativeText?: string | undefined;
-    positiveText?: string | undefined;
     preset?: "dialog" | "card" | "confirm" | undefined;
 }>, {
     type: "default" | "error" | "info" | "success" | "warning";

package/es/modal/src/BodyWrapper.js

@@ -53,6 +53,9 @@ export default defineComponent({
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const NModal = inject(modalInjectionKey);
         function styleTransformOrigin() {
+            if (NModal.transformOriginRef.value === 'center') {
+                return '';
+            }
             const { value: transformOriginX } = transformOriginXRef;
             const { value: transformOriginY } = transformOriginYRef;
             if (transformOriginX === null || transformOriginY === null) {
@@ -65,6 +68,9 @@ export default defineComponent({
             return '';
         }
         function syncTransformOrigin(el) {
+            if (NModal.transformOriginRef.value === 'center') {
+                return;
+            }
             const mousePosition = NModal.getMousePosition();
             if (!mousePosition) {
                 return;