naive-ui 2.20.3 → 2.21.3

package/lib/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/lib/menu/src/styles/index.cssr.js

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

package/lib/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/lib/menu/src/utils.js

@@ -18,19 +18,38 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.itemRenderer = void 0;
+exports.itemRenderer = exports.isDividerNode = exports.isIgnoredNode = void 0;
 const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
 const MenuOptionGroup_1 = __importStar(require("./MenuOptionGroup"));
 const Submenu_1 = __importStar(require("./Submenu"));
 const MenuOption_1 = __importStar(require("./MenuOption"));
+const MenuDivider_1 = __importDefault(require("./MenuDivider"));
 const groupPropKeys = (0, _utils_1.keysOf)(MenuOptionGroup_1.menuItemGroupProps);
 const itemPropKeys = (0, _utils_1.keysOf)(MenuOption_1.menuItemProps);
 const submenuPropKeys = (0, _utils_1.keysOf)(Submenu_1.submenuProps);
+function isIgnoredNode(rawNode) {
+    return rawNode.type === 'divider' || rawNode.type === 'render';
+}
+exports.isIgnoredNode = isIgnoredNode;
+function isDividerNode(rawNode) {
+    return rawNode.type === 'divider';
+}
+exports.isDividerNode = isDividerNode;
 function itemRenderer(tmNode, menuProps) {
+    const { rawNode } = tmNode;
+    if (isIgnoredNode(rawNode)) {
+        if (isDividerNode(rawNode)) {
+            return (0, vue_1.h)(MenuDivider_1.default, 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) {
@@ -39,7 +58,7 @@ function itemRenderer(tmNode, menuProps) {
         }
         return (0, vue_1.h)(Submenu_1.default, (0, _utils_1.keep)(props, submenuPropKeys, {
             key,
-            rawNodes: tmNode.rawNode[menuProps.childrenField],
+            rawNodes: rawNode[menuProps.childrenField],
             tmNodes: tmNode.children,
             tmNode
         }));

package/lib/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/lib/menu/styles/light.js

@@ -25,8 +25,9 @@ function createPartialInvertedVars(color, activeColor, groupColor) {
 }
 exports.createPartialInvertedVars = createPartialInvertedVars;
 const self = (vars) => {
-    const { borderRadius, textColor3, primaryColor, textColor2, primaryColorHover, textColor1, fontSize } = vars;
-    return Object.assign({ borderRadius: borderRadius, color: '#0000', groupTextColor: textColor3, itemColorActive: (0, seemly_1.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 }, createPartialInvertedVars('#BBB', '#FFF', '#AAA'));
+    const { borderRadius, textColor3, primaryColor, textColor2, primaryColorHover, textColor1, fontSize, dividerColor } = vars;
+    return Object.assign({ borderRadius: borderRadius, color: '#0000', groupTextColor: textColor3, itemColorActive: (0, seemly_1.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'));
 };
 exports.self = self;
 const menuLight = (0, use_theme_1.createTheme)({

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

@@ -139,9 +139,13 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -221,20 +225,30 @@ declare const _default: import("vue").DefineComponent<{
                     fontSizeMedium: string;
                     fontSizeLarge: string;
                     opacityDisabled: string;
+                    colorOpacitySecondary: string;
+                    colorOpacitySecondaryHover: string;
+                    colorOpacitySecondaryPressed: string;
+                    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 +395,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 +470,30 @@ declare const _default: import("vue").DefineComponent<{
                         fontSizeMedium: string;
                         fontSizeLarge: string;
                         opacityDisabled: string;
+                        colorOpacitySecondary: string;
+                        colorOpacitySecondaryHover: string;
+                        colorOpacitySecondaryPressed: string;
+                        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 +640,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;