feat(menu): add some theme variables, closes #2598

tusen-ai · Mar 26, 2022 · 78d8d69 · 78d8d69
1 parent 99bcb3b
commit 78d8d69
Show file tree

Hide file tree

Showing 9 changed files with 268 additions and 104 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -4,6 +4,10 @@
 
 ## NEXT_VERSION
 
+### Breaking Changes
+
+- `n-menu` has some style changes.
+
 ### Fixes
 
 - Fix `n-data-table`‘s row disorder when using `expand` type, closes [#2631](https://github.com/TuSimple/naive-ui/issues/2631).
@@ -14,6 +18,7 @@
 - Fix `n-tree`'s scrollbar overflows in virtual scroll mode, closes [#2673](https://github.com/TuSimple/naive-ui/issues/2673).
 - Fix `n-layout-sider`'s `content-style` can't override `overflow: auto` prop, closes [#2671](https://github.com/TuSimple/naive-ui/issues/2671).
 - Fix `n-date-picker` displays panel item abnormally with `month` and `quarter` type in dark mode.
+- Fix `n-dropdown` `onUpdateShow` not working.
 
 ### Feats
 
@@ -43,6 +48,7 @@
 - `n-dynamic-tags` adds `on-create` prop, closes [#2576](https://github.com/TuSimple/naive-ui/issues/2576).
 - `n-date-picker` adds `time-picker-props` props, closes [#2660](https://github.com/TuSimple/naive-ui/issues/2660).
 - `n-tabs` adds `trigger` prop, closes [#2679](https://github.com/TuSimple/naive-ui/issues/2679).
+- `n-menu` adds `itemColorHover`, `itemColorActiveHover`, `itemTextColorActiveHover`, `itemTextColorHorizontal`, `itemTextColorHoverHorizontal`, `itemTextColorActiveHorizontal`, `itemTextColorActiveHoverHorizontal`, `itemTextColorChildActiveHorizontal`, `itemIconColorActiveHover`, `itemIconColorHorizontal`, `itemIconColorHoverHorizontal`, `itemIconColorActiveHorizontal`, `itemIconColorActiveHoverHorizontal`, `itemIconColorChildActiveHorizontal`, `arrowColorActiveHover`, `itemColorHoverInverted`, `itemColorActiveHoverInverted`, `itemTextColorActiveHoverInverted`, `itemTextColorHorizontalInverted`, `itemTextColorHoverHorizontalInverted`, `itemTextColorChildActiveHorizontalInverted`, `itemTextColorActiveHorizontalInverted`, `itemTextColorActiveHoverHorizontalInverted`, `itemIconColorActiveHoverInverted`, `itemIconColorHorizontalInverted`, `itemIconColorHoverHorizontalInverted`, `itemIconColorActiveHorizontalInverted`, `itemIconColorActiveHoverHorizontalInverted`, `itemIconColorChildActiveHorizontalInverted`, `arrowColorActiveHoverInverted` theme variables, closes [#2598](https://github.com/TuSimple/naive-ui/issues/2598).
 
 ### i18n
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -4,6 +4,10 @@
 
 ## NEXT_VERSION
 
+### Breaking Changes
+
+- `n-menu` 进行了一些样式改动
+
 ### Fixes
 
 - 修复 `n-data-table` 使用 `expand` 类型时，行错乱的问题，关闭 [#2631](https://github.com/TuSimple/naive-ui/issues/2631)
@@ -14,6 +18,7 @@
 - 修复 `n-tree` 再使用虚拟滚动时滚动条长度存在问题，关闭 [#2673](https://github.com/TuSimple/naive-ui/issues/2673)
 - 修复 `n-layout-sider` 的 `content-style` 不能覆盖 `overflow: auto` 属性，关闭 [#2671](https://github.com/TuSimple/naive-ui/issues/2671)
 - 修复 `n-date-picker` 在 `month` 和 `quarter` 模式下暗黑模式的 disabled 的面板时间显示有问题
+- 修复 `n-dropdown` `onUpdateShow` 不生效
 
 ### Feats
 
@@ -43,6 +48,7 @@
 - `n-dynamic-tags` 新增 `on-create` 属性，关闭 [#2576](https://github.com/TuSimple/naive-ui/issues/2576)
 - `n-date-picker` 新增 `time-picker-props` 属性，关闭 [#2660](https://github.com/TuSimple/naive-ui/issues/2660)
 - `n-tabs` 新增 `trigger` 属性，关闭 [#2679](https://github.com/TuSimple/naive-ui/issues/2679)
+- `n-menu` 新增 `itemColorHover`, `itemColorActiveHover`, `itemTextColorActiveHover`, `itemTextColorHorizontal`, `itemTextColorHoverHorizontal`, `itemTextColorActiveHorizontal`, `itemTextColorActiveHoverHorizontal`, `itemTextColorChildActiveHorizontal`, `itemIconColorActiveHover`, `itemIconColorHorizontal`, `itemIconColorHoverHorizontal`, `itemIconColorActiveHorizontal`, `itemIconColorActiveHoverHorizontal`, `itemIconColorChildActiveHorizontal`, `arrowColorActiveHover`, `itemColorHoverInverted`, `itemColorActiveHoverInverted`, `itemTextColorActiveHoverInverted`, `itemTextColorHorizontalInverted`, `itemTextColorHoverHorizontalInverted`, `itemTextColorChildActiveHorizontalInverted`, `itemTextColorActiveHorizontalInverted`, `itemTextColorActiveHoverHorizontalInverted`, `itemIconColorActiveHoverInverted`, `itemIconColorHorizontalInverted`, `itemIconColorHoverHorizontalInverted`, `itemIconColorActiveHorizontalInverted`, `itemIconColorActiveHoverHorizontalInverted`, `itemIconColorChildActiveHorizontalInverted`, `arrowColorActiveHoverInverted` 主题变量，关闭 [#2598](https://github.com/TuSimple/naive-ui/issues/2598)
 
 ### i18n
 

diff --git a/src/dropdown/src/Dropdown.tsx b/src/dropdown/src/Dropdown.tsx
@@ -243,7 +243,8 @@ export default defineComponent({
       if (onSelect) call(onSelect as OnUpdateValueImpl, key, node)
     }
     function doUpdateShow (value: boolean): void {
-      const { 'onUpdate:show': onUpdateShow } = props
+      const { 'onUpdate:show': _onUpdateShow, onUpdateShow } = props
+      if (_onUpdateShow) call(_onUpdateShow, value)
       if (onUpdateShow) call(onUpdateShow, value)
       uncontrolledShowRef.value = value
     }

diff --git a/src/menu/src/Menu.tsx b/src/menu/src/Menu.tsx
@@ -346,43 +346,94 @@ export default defineComponent({
         vars['--n-group-text-color'] = self.groupTextColorInverted
         vars['--n-color'] = self.colorInverted
         vars['--n-item-text-color'] = self.itemTextColorInverted
-        vars['--n-arrow-color'] = self.arrowColorInverted
-        vars['--n-arrow-color-hover'] = self.arrowColorHoverInverted
-        vars['--n-arrow-color-active'] = self.arrowColorActiveInverted
-        vars['--n-arrow-color-child-active'] =
-          self.arrowColorChildActiveInverted
-        vars['--n-item-icon-color'] = self.itemIconColorInverted
         vars['--n-item-text-color-hover'] = self.itemTextColorHoverInverted
-        vars['--n-item-icon-color-hover'] = self.itemIconColorHoverInverted
         vars['--n-item-text-color-active'] = self.itemTextColorActiveInverted
+        vars['--n-item-text-color-child-active'] =
+          self.itemTextColorChildActiveInverted
+        vars['--n-item-text-color-active-hover'] =
+          self.itemTextColorActiveHoverInverted
+        vars['--n-item-icon-color'] = self.itemIconColorInverted
+        vars['--n-item-icon-color-hover'] = self.itemIconColorHoverInverted
         vars['--n-item-icon-color-active'] = self.itemIconColorActiveInverted
+        vars['--n-item-icon-color-active-hover'] =
+          self.itemIconColorActiveHoverInverted
+        vars['--n-item-icon-color-child-active'] =
+          self.itemIconColorChildActiveInverted
         vars['--n-item-icon-color-collapsed'] =
           self.itemIconColorCollapsedInverted
+        vars['--n-item-text-color-horizontal'] =
+          self.itemTextColorHorizontalInverted
+        vars['--n-item-text-color-hover-horizontal'] =
+          self.itemTextColorHoverHorizontalInverted
+        vars['--n-item-text-color-active-horizontal'] =
+          self.itemTextColorActiveHorizontalInverted
+        vars['--n-item-text-color-child-active-horizontal'] =
+          self.itemTextColorChildActiveHorizontalInverted
+        vars['--n-item-text-color-active-hover-horizontal'] =
+          self.itemTextColorActiveHoverHorizontalInverted
+        vars['--n-item-icon-color-horizontal'] =
+          self.itemIconColorHorizontalInverted
+        vars['--n-item-icon-color-hover-horizontal'] =
+          self.itemIconColorHoverHorizontalInverted
+        vars['--n-item-icon-color-active-horizontal'] =
+          self.itemIconColorActiveHorizontalInverted
+        vars['--n-item-icon-color-active-hover-horizontal'] =
+          self.itemIconColorActiveHoverHorizontalInverted
+        vars['--n-item-icon-color-child-active-horizontal'] =
+          self.itemIconColorChildActiveHorizontalInverted
+        vars['--n-arrow-color'] = self.arrowColorInverted
+        vars['--n-arrow-color-hover'] = self.arrowColorHoverInverted
+        vars['--n-arrow-color-active'] = self.arrowColorActiveInverted
+        vars['--n-arrow-color-active-hover'] =
+          self.arrowColorActiveHoverInverted
+        vars['--n-arrow-color-child-active'] =
+          self.arrowColorChildActiveInverted
+        vars['--n-item-color-hover'] = self.itemColorHoverInverted
         vars['--n-item-color-active'] = self.itemColorActiveInverted
+        vars['--n-item-color-active-hover'] = self.itemColorActiveHoverInverted
         vars['--n-item-color-active-collapsed'] =
           self.itemColorActiveCollapsedInverted
-        vars['--n-item-text-color-child-active'] =
-          self.itemTextColorChildActiveInverted
-        vars['--n-item-icon-color-child-active'] =
-          self.itemIconColorChildActiveInverted
       } else {
         vars['--n-group-text-color'] = self.groupTextColor
         vars['--n-color'] = self.color
         vars['--n-item-text-color'] = self.itemTextColor
-        vars['--n-arrow-color'] = self.arrowColor
-        vars['--n-arrow-color-hover'] = self.arrowColorHover
-        vars['--n-arrow-color-active'] = self.arrowColorActive
-        vars['--n-arrow-color-child-active'] = self.arrowColorChildActive
-        vars['--n-item-icon-color'] = self.itemIconColor
         vars['--n-item-text-color-hover'] = self.itemTextColorHover
-        vars['--n-item-icon-color-hover'] = self.itemIconColorHover
         vars['--n-item-text-color-active'] = self.itemTextColorActive
+        vars['--n-item-text-color-child-active'] = self.itemTextColorChildActive
+        vars['--n-item-text-color-active-hover'] = self.itemTextColorActiveHover
+        vars['--n-item-icon-color'] = self.itemIconColor
+        vars['--n-item-icon-color-hover'] = self.itemIconColorHover
         vars['--n-item-icon-color-active'] = self.itemIconColorActive
+        vars['--n-item-icon-color-active-hover'] = self.itemIconColorActiveHover
+        vars['--n-item-icon-color-child-active'] = self.itemIconColorChildActive
         vars['--n-item-icon-color-collapsed'] = self.itemIconColorCollapsed
+        vars['--n-item-text-color-horizontal'] = self.itemTextColorHorizontal
+        vars['--n-item-text-color-hover-horizontal'] =
+          self.itemTextColorHoverHorizontal
+        vars['--n-item-text-color-active-horizontal'] =
+          self.itemTextColorActiveHorizontal
+        vars['--n-item-text-color-child-active-horizontal'] =
+          self.itemTextColorChildActiveHorizontal
+        vars['--n-item-text-color-active-hover-horizontal'] =
+          self.itemTextColorActiveHoverHorizontal
+        vars['--n-item-icon-color-horizontal'] = self.itemIconColorHorizontal
+        vars['--n-item-icon-color-hover-horizontal'] =
+          self.itemIconColorHoverHorizontal
+        vars['--n-item-icon-color-active-horizontal'] =
+          self.itemIconColorActiveHorizontal
+        vars['--n-item-icon-color-active-hover-horizontal'] =
+          self.itemIconColorActiveHoverHorizontal
+        vars['--n-item-icon-color-child-active-horizontal'] =
+          self.itemIconColorChildActiveHorizontal
+        vars['--n-arrow-color'] = self.arrowColor
+        vars['--n-arrow-color-hover'] = self.arrowColorHover
+        vars['--n-arrow-color-active'] = self.arrowColorActive
+        vars['--n-arrow-color-active-hover'] = self.arrowColorActiveHover
+        vars['--n-arrow-color-child-active'] = self.arrowColorChildActive
+        vars['--n-item-color-hover'] = self.itemColorHover
         vars['--n-item-color-active'] = self.itemColorActive
+        vars['--n-item-color-active-hover'] = self.itemColorActiveHover
         vars['--n-item-color-active-collapsed'] = self.itemColorActiveCollapsed
-        vars['--n-item-text-color-child-active'] = self.itemTextColorChildActive
-        vars['--n-item-icon-color-child-active'] = self.itemIconColorChildActive
       }
       return vars
     })

diff --git a/src/menu/src/MenuOption.tsx b/src/menu/src/MenuOption.tsx
@@ -77,14 +77,7 @@ export const NMenuOption = defineComponent({
       menuProps: { renderLabel }
     } = this
     return (
-      <div
-        role="menuitem"
-        class={[
-          `${mergedClsPrefix}-menu-item`,
-          this.selected && `${mergedClsPrefix}-menu-item--selected`,
-          this.mergedDisabled && `${mergedClsPrefix}-menu-item--disabled`
-        ]}
-      >
+      <div role="menuitem" class={[`${mergedClsPrefix}-menu-item`]}>
         <NTooltip
           theme={mergedTheme.peers.Tooltip}
           themeOverrides={mergedTheme.peerOverrides.Tooltip}
@@ -104,6 +97,7 @@ export const NMenuOption = defineComponent({
                 iconMarginRight={this.iconMarginRight}
                 maxIconSize={this.maxIconSize}
                 activeIconSize={this.activeIconSize}
+                selected={this.selected}
                 title={this.title}
                 extra={this.extra}
                 disabled={this.mergedDisabled}

diff --git a/src/menu/src/MenuOptionContent.tsx b/src/menu/src/MenuOptionContent.tsx
@@ -17,6 +17,7 @@ export default defineComponent({
     childActive: Boolean,
     hover: Boolean,
     paddingLeft: Number,
+    selected: Boolean,
     maxIconSize: {
       type: Number,
       required: true
@@ -73,6 +74,7 @@ export default defineComponent({
         class={[
           `${clsPrefix}-menu-item-content`,
           {
+            [`${clsPrefix}-menu-item-content--selected`]: this.selected,
             [`${clsPrefix}-menu-item-content--collapsed`]: this.collapsed,
             [`${clsPrefix}-menu-item-content--child-active`]: this.childActive,
             [`${clsPrefix}-menu-item-content--disabled`]: this.disabled,