naive-ui 2.20.3 → 2.21.0

package/lib/menu/src/Menu.d.ts

@@ -2,12 +2,12 @@ import { PropType, ExtractPropTypes, InjectionKey, VNodeChild } from 'vue';
 import { Key } from 'treemate';
 import type { MaybeArray } from '../../_utils';
 import { MenuInjection } from './use-menu-child';
-import { MenuOption, MenuGroupOption, OnUpdateValue, OnUpdateKeys } from './interface';
+import { MenuOption, MenuGroupOption, MenuIgnoredOption, MenuMixedOption, OnUpdateValue, OnUpdateKeys } from './interface';
 import { FollowerPlacement } from 'vueuc';
 import { DropdownProps } from '../../dropdown';
 declare const menuProps: {
     readonly options: {
-        readonly type: PropType<(MenuOption | MenuGroupOption)[]>;
+        readonly type: PropType<MenuMixedOption[]>;
         readonly default: () => never[];
     };
     readonly collapsed: {
@@ -121,6 +121,7 @@ declare const menuProps: {
         itemColorActiveCollapsedInverted: string;
         borderColorHorizontal: string;
         fontSize: string;
+        dividerColor: string;
     }, {
         Tooltip: import("../../_mixins").Theme<"Tooltip", {
             borderRadius: string;
@@ -184,6 +185,7 @@ declare const menuProps: {
         itemColorActiveCollapsedInverted: string;
         borderColorHorizontal: string;
         fontSize: string;
+        dividerColor: string;
     }, {
         Tooltip: import("../../_mixins").Theme<"Tooltip", {
             borderRadius: string;
@@ -247,6 +249,7 @@ declare const menuProps: {
         itemColorActiveCollapsedInverted: string;
         borderColorHorizontal: string;
         fontSize: string;
+        dividerColor: string;
     }, {
         Tooltip: import("../../_mixins").Theme<"Tooltip", {
             borderRadius: string;
@@ -277,7 +280,7 @@ export declare type MenuProps = Partial<MenuSetupProps>;
 export declare const menuInjectionKey: InjectionKey<MenuInjection>;
 declare const _default: import("vue").DefineComponent<{
     readonly options: {
-        readonly type: PropType<(MenuOption | MenuGroupOption)[]>;
+        readonly type: PropType<MenuMixedOption[]>;
         readonly default: () => never[];
     };
     readonly collapsed: {
@@ -391,6 +394,7 @@ declare const _default: import("vue").DefineComponent<{
         itemColorActiveCollapsedInverted: string;
         borderColorHorizontal: string;
         fontSize: string;
+        dividerColor: string;
     }, {
         Tooltip: import("../../_mixins").Theme<"Tooltip", {
             borderRadius: string;
@@ -454,6 +458,7 @@ declare const _default: import("vue").DefineComponent<{
         itemColorActiveCollapsedInverted: string;
         borderColorHorizontal: string;
         fontSize: string;
+        dividerColor: string;
     }, {
         Tooltip: import("../../_mixins").Theme<"Tooltip", {
             borderRadius: string;
@@ -517,6 +522,7 @@ declare const _default: import("vue").DefineComponent<{
         itemColorActiveCollapsedInverted: string;
         borderColorHorizontal: string;
         fontSize: string;
+        dividerColor: string;
     }, {
         Tooltip: import("../../_mixins").Theme<"Tooltip", {
             borderRadius: string;
@@ -549,7 +555,7 @@ declare const _default: import("vue").DefineComponent<{
     uncontrolledValue: import("vue").Ref<Key | null>;
     mergedValue: import("vue").ComputedRef<Key | null>;
     activePath: import("vue").ComputedRef<Key[]>;
-    tmNodes: import("vue").ComputedRef<import("treemate").TreeNode<MenuOption, MenuGroupOption, MenuOption>[]>;
+    tmNodes: import("vue").ComputedRef<import("treemate").TreeNode<MenuOption, MenuGroupOption, MenuIgnoredOption>[]>;
     mergedTheme: import("vue").ComputedRef<{
         common: {
             baseColor: string;
@@ -623,6 +629,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;
@@ -689,6 +698,7 @@ declare const _default: import("vue").DefineComponent<{
             itemColorActiveCollapsedInverted: string;
             borderColorHorizontal: string;
             fontSize: string;
+            dividerColor: string;
         };
         peers: {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
@@ -782,7 +792,7 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean;
     keyField: string;
     iconSize: number;
-    options: (MenuOption | MenuGroupOption)[];
+    options: MenuMixedOption[];
     defaultValue: Key | null;
     indent: number;
     labelField: string;
@@ -835,6 +845,7 @@ declare const _default: import("vue").DefineComponent<{
         itemColorActiveCollapsedInverted: string;
         borderColorHorizontal: string;
         fontSize: string;
+        dividerColor: string;
     }, {
         Tooltip: import("../../_mixins").Theme<"Tooltip", {
             borderRadius: string;
@@ -898,6 +909,7 @@ declare const _default: import("vue").DefineComponent<{
         itemColorActiveCollapsedInverted: string;
         borderColorHorizontal: string;
         fontSize: string;
+        dividerColor: string;
     }, {
         Tooltip: import("../../_mixins").Theme<"Tooltip", {
             borderRadius: string;
@@ -961,6 +973,7 @@ declare const _default: import("vue").DefineComponent<{
         itemColorActiveCollapsedInverted: string;
         borderColorHorizontal: string;
         fontSize: string;
+        dividerColor: string;
     }, {
         Tooltip: import("../../_mixins").Theme<"Tooltip", {
             borderRadius: string;
@@ -1009,7 +1022,7 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean;
     keyField: string;
     iconSize: number;
-    options: (MenuOption | MenuGroupOption)[];
+    options: MenuMixedOption[];
     defaultValue: Key | null;
     indent: number;
     labelField: string;

package/lib/menu/src/Menu.js

@@ -208,8 +208,9 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { inverted } = props;
                 const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
-                const { borderRadius, borderColorHorizontal, fontSize, itemHeight } = self;
+                const { borderRadius, borderColorHorizontal, fontSize, itemHeight, dividerColor } = self;
                 const vars = {
+                    '--divider-color': dividerColor,
                     '--bezier': cubicBezierEaseInOut,
                     '--font-size': fontSize,
                     '--border-color-horizontal': borderColorHorizontal,

package/lib/menu/src/MenuDivider.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, () => JSX.Element | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+export default _default;

package/lib/menu/src/MenuDivider.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const Menu_1 = require("./Menu");
+exports.default = (0, vue_1.defineComponent)({
+    name: 'MenuDivider',
+    setup() {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const NMenu = (0, vue_1.inject)(Menu_1.menuInjectionKey);
+        const { mergedClsPrefixRef, isHorizontalRef } = NMenu;
+        return () => isHorizontalRef.value ? null : ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-menu-divider` }));
+    }
+});

package/lib/menu/src/MenuOption.d.ts

@@ -121,6 +121,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;
@@ -187,6 +190,7 @@ declare const _default: import("vue").DefineComponent<{
             itemColorActiveCollapsedInverted: string;
             borderColorHorizontal: string;
             fontSize: string;
+            dividerColor: string;
         };
         peers: {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
@@ -278,7 +282,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;
@@ -331,6 +335,7 @@ declare const _default: import("vue").DefineComponent<{
             itemColorActiveCollapsedInverted: string;
             borderColorHorizontal: string;
             fontSize: string;
+            dividerColor: string;
         }, {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
                 borderRadius: string;
@@ -394,6 +399,7 @@ declare const _default: import("vue").DefineComponent<{
             itemColorActiveCollapsedInverted: string;
             borderColorHorizontal: string;
             fontSize: string;
+            dividerColor: string;
         }, {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
                 borderRadius: string;
@@ -457,6 +463,7 @@ declare const _default: import("vue").DefineComponent<{
             itemColorActiveCollapsedInverted: string;
             borderColorHorizontal: string;
             fontSize: string;
+            dividerColor: string;
         }, {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
                 borderRadius: string;

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

@@ -77,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;
@@ -130,6 +130,7 @@ declare const _default: import("vue").DefineComponent<{
             itemColorActiveCollapsedInverted: string;
             borderColorHorizontal: string;
             fontSize: string;
+            dividerColor: string;
         }, {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
                 borderRadius: string;
@@ -193,6 +194,7 @@ declare const _default: import("vue").DefineComponent<{
             itemColorActiveCollapsedInverted: string;
             borderColorHorizontal: string;
             fontSize: string;
+            dividerColor: string;
         }, {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
                 borderRadius: string;
@@ -256,6 +258,7 @@ declare const _default: import("vue").DefineComponent<{
             itemColorActiveCollapsedInverted: string;
             borderColorHorizontal: string;
             fontSize: string;
+            dividerColor: string;
         }, {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
                 borderRadius: string;

package/lib/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: {
@@ -112,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;
@@ -165,6 +164,7 @@ declare const _default: import("vue").DefineComponent<{
             itemColorActiveCollapsedInverted: string;
             borderColorHorizontal: string;
             fontSize: string;
+            dividerColor: string;
         }, {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
                 borderRadius: string;
@@ -228,6 +228,7 @@ declare const _default: import("vue").DefineComponent<{
             itemColorActiveCollapsedInverted: string;
             borderColorHorizontal: string;
             fontSize: string;
+            dividerColor: string;
         }, {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
                 borderRadius: string;
@@ -291,6 +292,7 @@ declare const _default: import("vue").DefineComponent<{
             itemColorActiveCollapsedInverted: string;
             borderColorHorizontal: string;
             fontSize: string;
+            dividerColor: string;
         }, {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
                 borderRadius: string;
@@ -315,23 +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;
+        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;
     };
@@ -371,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;
@@ -383,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/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

@@ -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;