feat(pro:layout): suppor all slots of IxMenu (#738)

* feat(pro:layout): suppor all slots of IxMenu * ci: fix lint
IDuxFE · Jan 24, 2022 · 9745c32 · 9745c32
1 parent 8365e82
commit 9745c32
Show file tree

Hide file tree

Showing 37 changed files with 201 additions and 169 deletions.
diff --git a/packages/components/icon/style/index.less b/packages/components/icon/style/index.less
@@ -9,6 +9,7 @@
   min-height: 1em;
   line-height: 1em;
   color: inherit;
+  transition: transform @transition-duration-base @ease-out;
 
   > svg {
     width: 1em;

diff --git a/packages/components/menu/__tests__/__snapshots__/menu.spec.ts.snap b/packages/components/menu/__tests__/__snapshots__/menu.spec.ts.snap
@@ -2,16 +2,16 @@
 
 exports[`Menu render work 1`] = `
 "<ul class=\\"ix-menu ix-menu-light ix-menu-vertical\\">
-  <li class=\\"ix-menu-item\\"><span class=\\"ix-menu-item-icon\\"><i class=\\"ix-icon ix-icon-home\\" role=\\"img\\" aria-label=\\"home\\"></i></span><span class=\\"ix-menu-item-content\\"><a>Item 1</a></span></li>
-  <li class=\\"ix-menu-item\\"><span class=\\"ix-menu-item-icon\\"><i class=\\"ix-icon ix-icon-mail\\" role=\\"img\\" aria-label=\\"mail\\"></i></span><span class=\\"ix-menu-item-content\\">Item 2</span></li>
-  <li class=\\"ix-menu-item ix-menu-item-disabled\\"><span class=\\"ix-menu-item-icon\\"><i class=\\"ix-icon ix-icon-appstore\\" role=\\"img\\" aria-label=\\"appstore\\"></i></span><span class=\\"ix-menu-item-content\\">Item 3</span></li>
+  <li class=\\"ix-menu-item\\"><i class=\\"ix-icon ix-icon-home\\" role=\\"img\\" aria-label=\\"home\\"></i><span><a>Item 1</a></span></li>
+  <li class=\\"ix-menu-item\\"><i class=\\"ix-icon ix-icon-mail\\" role=\\"img\\" aria-label=\\"mail\\"></i><span>Item 2</span></li>
+  <li class=\\"ix-menu-item ix-menu-item-disabled\\"><i class=\\"ix-icon ix-icon-appstore\\" role=\\"img\\" aria-label=\\"appstore\\"></i><span>Item 3</span></li>
   <li class=\\"ix-menu-divider\\"></li>
   <li class=\\"ix-menu-sub ix-menu-sub-vertical\\">
-    <div class=\\"ix-menu-sub-title\\"><span class=\\"ix-menu-sub-title-icon\\"><i class=\\"ix-icon ix-icon-setting\\" role=\\"img\\" aria-label=\\"setting\\"></i></span><span class=\\"ix-menu-sub-title-content\\">Sub Menu 1</span><span class=\\"ix-menu-sub-title-suffix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span></div>
+    <div class=\\"ix-menu-sub-label\\"><i class=\\"ix-icon ix-icon-setting\\" role=\\"img\\" aria-label=\\"setting\\"></i><span>Sub Menu 1</span><span class=\\"ix-menu-sub-label-suffix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span></div>
     <!---->
   </li>
   <li class=\\"ix-menu-sub ix-menu-sub-disabled ix-menu-sub-vertical\\">
-    <div class=\\"ix-menu-sub-title\\"><span class=\\"ix-menu-sub-title-icon\\"><i class=\\"ix-icon ix-icon-github\\" role=\\"img\\" aria-label=\\"github\\"></i></span><span class=\\"ix-menu-sub-title-content\\">Menu Sub 4</span><span class=\\"ix-menu-sub-title-suffix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span></div>
+    <div class=\\"ix-menu-sub-label\\"><i class=\\"ix-icon ix-icon-github\\" role=\\"img\\" aria-label=\\"github\\"></i><span>Menu Sub 4</span><span class=\\"ix-menu-sub-label-suffix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span></div>
     <!---->
   </li>
 </ul>"

diff --git a/packages/components/menu/__tests__/menu.spec.ts b/packages/components/menu/__tests__/menu.spec.ts
@@ -99,7 +99,7 @@ describe('Menu', () => {
     expect(subs[3].classes()).toContain('ix-menu-sub-expanded')
 
     await wrapper.setProps({ expandedKeys: [] })
-    await subs[0].find('.ix-menu-sub-title').trigger('click')
+    await subs[0].find('.ix-menu-sub-label').trigger('click')
     await wait(105)
 
     expect(onUpdateExpandedKeys).toBeCalledWith(['sub1'])

diff --git a/packages/components/menu/src/Menu.tsx b/packages/components/menu/src/Menu.tsx
@@ -11,10 +11,10 @@ import { type VKey, callEmit } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 import { ɵDropdownToken } from '@idux/components/dropdown'
 
-import { coverChildren } from './children/Utils'
 import { useDataSource } from './composables/useDataSource'
 import { useExpanded } from './composables/useExpanded'
 import { useSelected } from './composables/useSelected'
+import { coverChildren } from './contents/Utils'
 import { menuToken } from './token'
 import { menuProps } from './types'
 

diff --git a/...ponents/menu/src/children/MenuDivider.tsx → ...ponents/menu/src/contents/MenuDivider.tsx b/...ponents/menu/src/children/MenuDivider.tsx → ...ponents/menu/src/contents/MenuDivider.tsx
@@ -13,5 +13,6 @@ const MenuDivider: FunctionalComponent<HTMLAttributes> = () => {
   const { mergedPrefixCls } = inject(menuToken)!
   return <li class={`${mergedPrefixCls.value}-divider`}></li>
 }
+MenuDivider.displayName = 'MenuDivider'
 
 export default MenuDivider
diff --git a/...components/menu/src/children/MenuItem.tsx → ...components/menu/src/contents/MenuItem.tsx b/...components/menu/src/children/MenuItem.tsx → ...components/menu/src/contents/MenuItem.tsx
@@ -18,6 +18,7 @@ import { menuItemProps } from '../types'
 import { coverIcon } from './Utils'
 
 export default defineComponent({
+  name: 'MenuItem',
   props: menuItemProps,
   setup(props) {
     const key = useKey()
@@ -76,11 +77,10 @@ export default defineComponent({
       const iconNode = coverIcon(iconSlot, slotProps!, icon)
       const labelNode = labelSlot ? labelSlot(slotProps!) : label
 
-      const prefixCls = `${mergedPrefixCls.value}-item`
       return (
         <li class={classes.value} style={style.value} {...additional} onClick={disabled ? undefined : onClick}>
-          {iconNode && <span class={`${prefixCls}-icon`}>{iconNode}</span>}
-          <span class={`${prefixCls}-content`}>{labelNode}</span>
+          {iconNode}
+          <span>{labelNode}</span>
         </li>
       )
     }

diff --git a/...nents/menu/src/children/MenuItemGroup.tsx → ...nents/menu/src/contents/MenuItemGroup.tsx b/...nents/menu/src/children/MenuItemGroup.tsx → ...nents/menu/src/contents/MenuItemGroup.tsx
@@ -18,6 +18,7 @@ import { menuItemGroupProps } from '../types'
 import { coverChildren, coverIcon } from './Utils'
 
 export default defineComponent({
+  name: 'MenuItemGroup',
   props: menuItemGroupProps,
   setup(props) {
     const key = useKey()
@@ -31,9 +32,7 @@ export default defineComponent({
 
     const level = menuSubContext ? menuSubContext.level + 1 : 1
     const paddingLeft = usePaddingLeft(mode, indent, level, !!menuItemGroupContext)
-    const titleStyle = computed(() => {
-      return { paddingLeft: paddingLeft.value }
-    })
+    const labelStyle = computed(() => ({ paddingLeft: paddingLeft.value }))
 
     const onClick = (evt: Event) => {
       evt.stopPropagation()
@@ -60,9 +59,9 @@ export default defineComponent({
       const prefixCls = `${mergedPrefixCls.value}-item-group`
       return (
         <li class={prefixCls} {...additional} onClick={onClick}>
-          <div class={`${prefixCls}-title`} style={titleStyle.value}>
-            {iconNode && <span class={`${prefixCls}-title-icon`}>{iconNode}</span>}
-            {<span class={`${prefixCls}-title-content`}> {labelNode}</span>}
+          <div class={`${prefixCls}-label`} style={labelStyle.value}>
+            {iconNode}
+            <span>{labelNode}</span>
           </div>
           <ul class={`${prefixCls}-content`}>{coverChildren(children)}</ul>
         </li>

diff --git a/...es/components/menu/src/children/Utils.tsx → ...es/components/menu/src/contents/Utils.tsx b/...es/components/menu/src/children/Utils.tsx → ...es/components/menu/src/contents/Utils.tsx
diff --git a/...u/src/children/menu-sub/InlineContent.tsx → ...u/src/contents/menu-sub/InlineContent.tsx b/...u/src/children/menu-sub/InlineContent.tsx → ...u/src/contents/menu-sub/InlineContent.tsx
@@ -13,6 +13,7 @@ import { menuSubToken, menuToken } from '../../token'
 import { coverChildren } from '../Utils'
 
 export default defineComponent({
+  name: 'MenuSubInlineContent',
   setup() {
     const { mergedPrefixCls } = inject(menuToken)!
     const { props, isExpanded } = inject(menuSubToken)!

diff --git a/...ents/menu/src/children/menu-sub/Title.tsx → ...ents/menu/src/contents/menu-sub/Label.tsx b/...ents/menu/src/children/menu-sub/Title.tsx → ...ents/menu/src/contents/menu-sub/Label.tsx
@@ -15,6 +15,7 @@ import { menuSubToken, menuToken } from '../../token'
 import { coverIcon } from '../Utils'
 
 export default defineComponent({
+  name: 'MenuSubLabel',
   setup() {
     const { slots: menuSlots, config, mergedPrefixCls } = inject(menuToken)!
     const { props, isExpanded, isSelected, changeExpanded, handleMouseEvent, mode, paddingLeft } = inject(menuSubToken)!
@@ -70,11 +71,11 @@ export default defineComponent({
       const labelNode = labelSlot ? labelSlot(slotProps!) : label
       const suffixNode = coverIcon(suffixSlot, slotProps!, suffix.value, rotate.value)
 
-      const prefixCls = `${mergedPrefixCls.value}-sub-title`
+      const prefixCls = `${mergedPrefixCls.value}-sub-label`
       return (
         <div class={prefixCls} style={style.value} {...events.value}>
-          {iconNode && <span class={`${prefixCls}-icon`}>{iconNode}</span>}
-          <span class={`${prefixCls}-content`}>{labelNode}</span>
+          {iconNode}
+          <span>{labelNode}</span>
           {suffixNode && <span class={`${prefixCls}-suffix`}>{suffixNode}</span>}
         </div>
       )

diff --git a/...ts/menu/src/children/menu-sub/MenuSub.tsx → ...ts/menu/src/contents/menu-sub/MenuSub.tsx b/...ts/menu/src/children/menu-sub/MenuSub.tsx → ...ts/menu/src/contents/menu-sub/MenuSub.tsx
@@ -29,12 +29,13 @@ import { usePaddingLeft } from '../../composables/usePaddingLeft'
 import { type MenuSubContext, menuItemGroupToken, menuSubToken, menuToken } from '../../token'
 import { type MenuData, type MenuMode, type MenuSubProps, menuSubProps } from '../../types'
 import InlineContent from './InlineContent'
+import Label from './Label'
 import OverlayContent from './OverlayContent'
-import Title from './Title'
 
 const defaultDelay: [number, number] = [0, 100]
 
 export default defineComponent({
+  name: 'MenuSub',
   props: menuSubProps,
   setup(props) {
     const common = useGlobalConfig('common')
@@ -113,9 +114,9 @@ export default defineComponent({
       const { additional, disabled } = props.data
       let children: VNodeTypes
       if (mode.value === 'inline') {
-        children = [<Title></Title>, <InlineContent></InlineContent>]
+        children = [<Label></Label>, <InlineContent></InlineContent>]
       } else {
-        const trigger = () => <Title></Title>
+        const trigger = () => <Label></Label>
         const content = () => <OverlayContent></OverlayContent>
         children = (
           <ɵOverlay

diff --git a/.../src/children/menu-sub/OverlayContent.tsx → .../src/contents/menu-sub/OverlayContent.tsx b/.../src/children/menu-sub/OverlayContent.tsx → .../src/contents/menu-sub/OverlayContent.tsx
@@ -13,6 +13,7 @@ import { menuSubToken, menuToken } from '../../token'
 import { coverChildren } from '../Utils'
 
 export default defineComponent({
+  name: 'MenuSubOverlayContent',
   setup() {
     const { mergedPrefixCls, theme } = inject(menuToken)!
     const { props, handleMouseEvent } = inject(menuSubToken)!

diff --git a/packages/components/menu/style/collapsed.less b/packages/components/menu/style/collapsed.less
@@ -1,31 +1,31 @@
 .@{menu-prefix} {
 
   &-collapsed {
-    .@{menu-prefix}-item-icon,
-    .@{menu-prefix}-sub-title-icon {
-      margin: 0;
+    .@{menu-prefix}-item,
+    .@{menu-prefix}-item-group-label,
+    .@{menu-prefix}-sub-label {
       font-size: @menu-collapsed-font-size;
 
-      + span {
+      .@{icon-prefix} + span {
         display: none;
       }
     }
 
-    .@{menu-prefix}-sub-title-suffix {
-      display: none;
+    .@{menu-prefix}-item-group-label {
+      padding: 0 8px;
     }
 
-    .@{menu-prefix}-item-group-title {
-      padding: 0 8px;
+    .@{menu-prefix}-sub-label-suffix {
+      display: none;
     }
   }
 
   &-vertical&-collapsed,
   &-inline&-collapsed {
     .@{menu-prefix}-item,
-    .@{menu-prefix}-sub > .@{menu-prefix}-sub-title,
+    .@{menu-prefix}-sub > .@{menu-prefix}-sub-label,
     .@{menu-prefix}-item-group .@{menu-prefix}-item,
-    .@{menu-prefix}-item-group .@{menu-prefix}-sub-title {
+    .@{menu-prefix}-item-group .@{menu-prefix}-sub-label {
       padding: 0 ~'calc(50% - @{menu-collapsed-font-size} / 2)';
     }
   }

diff --git a/packages/components/menu/style/dark.less b/packages/components/menu/style/dark.less
@@ -8,12 +8,12 @@
       color: @menu-dark-color;
     }
 
-    .@{menu-prefix}-item-group-title {
+    .@{menu-prefix}-item-group-label {
       color: @menu-dark-color;
     }
 
     .@{menu-prefix}-item:not(.@{menu-prefix}-item-disabled),
-    .@{menu-prefix}-sub:not(.@{menu-prefix}-sub-disabled) > .@{menu-prefix}-sub-title {
+    .@{menu-prefix}-sub:not(.@{menu-prefix}-sub-disabled) > .@{menu-prefix}-sub-label {
 
       &:hover,
       &:active {
@@ -27,18 +27,20 @@
     }
 
     .@{menu-prefix}-item.@{menu-prefix}-item-selected,
-    .@{menu-prefix}-sub-selected > .@{menu-prefix}-sub-title {
+    .@{menu-prefix}-sub-selected > .@{menu-prefix}-sub-label {
 
       a {
         color: @menu-highlight-color;
       }
     }
 
     .@{menu-prefix}-item-disabled,
-    .@{menu-prefix}-item-disabled a,
-    .@{menu-prefix}-sub-disabled > .@{menu-prefix}-sub-title,
-    .@{menu-prefix}-sub-disabled > .@{menu-prefix}-sub-title a {
+    .@{menu-prefix}-sub-disabled > .@{menu-prefix}-sub-label {
       color: @menu-dark-disabled-color;
+
+      a {
+        color: @menu-dark-disabled-color;
+      }
     }
   }
 

diff --git a/packages/components/menu/style/index.less b/packages/components/menu/style/index.less
@@ -22,7 +22,7 @@
     }
 
     .@{menu-prefix}-item,
-    .@{menu-prefix}-sub-title {
+    .@{menu-prefix}-sub-label {
       margin: @menu-item-margin;
     }
 
@@ -59,7 +59,7 @@
   &-horizontal {
     .@{menu-prefix}-sub-expanded {
       color: @menu-highlight-color;
-      .@{menu-prefix}-sub-title a {
+      .@{menu-prefix}-sub-label a {
         color: @menu-highlight-color;
       }
     }
@@ -75,7 +75,7 @@
     }
 
     .@{menu-prefix}-item,
-    .@{menu-prefix}-sub-title {
+    .@{menu-prefix}-sub-label {
       margin: 0 @menu-item-padding-left;
       padding: @menu-item-horizontal-padding;
       border-bottom: @menu-item-border-bottom-width @menu-border-style transparent;
@@ -94,18 +94,18 @@
 
     .@{menu-prefix}-item:hover,
     .@{menu-prefix}-item-selected,
-    .@{menu-prefix}-sub-title:hover,
-    .@{menu-prefix}-sub-expanded .@{menu-prefix}-sub-title,
-    .@{menu-prefix}-sub-selected .@{menu-prefix}-sub-title {
+    .@{menu-prefix}-sub-label:hover,
+    .@{menu-prefix}-sub-expanded .@{menu-prefix}-sub-label,
+    .@{menu-prefix}-sub-selected .@{menu-prefix}-sub-label {
       border-color: @menu-highlight-color;
     }
 
     .@{menu-prefix}-item-disabled,
-    .@{menu-prefix}-sub-disabled .@{menu-prefix}-sub-title {
+    .@{menu-prefix}-sub-disabled .@{menu-prefix}-sub-label {
       border-color: transparent !important;
     }
 
-    .@{menu-prefix}-sub-title-suffix {
+    .@{menu-prefix}-sub-label-suffix {
       display: none;
     }
 

diff --git a/packages/components/menu/style/menu.less b/packages/components/menu/style/menu.less
@@ -9,7 +9,7 @@
   }
 
   &-item,
-  &-sub-title {
+  &-sub-label {
     cursor: pointer;
     transition: background @transition-duration-base, color @transition-duration-base;
 
@@ -36,41 +36,41 @@
       background-color: @menu-highlight-bg-color;
     }
 
-    &-icon {
-      margin-right: @menu-item-icon-margin-right;
+    .@{icon-prefix} + span {
+      margin-left: @menu-item-icon-margin-right;
     }
   }
 
   &-item-group {
 
-    &-title {
+    &-label {
       color: @menu-item-group-text-color;
       font-size: @menu-font-size;
 
-      &-icon {
-        margin-right: @menu-item-icon-margin-right;
+      .@{icon-prefix} + span {
+        margin-left: @menu-item-icon-margin-right;
       }
     }
 
     & > &-content {
       .@{menu-prefix}-item,
-      .@{menu-prefix}-sub-title {
+      .@{menu-prefix}-sub-label {
         padding-left: @menu-item-group-content-padding-left;
       }
     }
   }
 
   &-sub {
 
-    &-title-suffix {
+    &-label-suffix {
       position: absolute;
       right: @menu-sub-suffix-icon-right;
     }
   }
 
   &-item,
-  &-item-group-title,
-  &-sub-title {
+  &-item-group-label,
+  &-sub-label {
     position: relative;
     height: @menu-item-height;
     line-height: @menu-item-height;
@@ -80,7 +80,7 @@
   }
 
   &-item&-item-selected,
-  &-sub-selected > &-sub-title {
+  &-sub-selected > &-sub-label {
     color: @menu-highlight-color;
 
     a {
@@ -89,7 +89,7 @@
   }
 
   &-item&-item-disabled,
-  &-sub-disabled > &-sub-title {
+  &-sub-disabled > &-sub-label {
     color: @menu-disabled-color;
     background-color: @menu-disabled-bg-color;
     cursor: not-allowed;

diff --git a/packages/components/style/core/reset.less b/packages/components/style/core/reset.less
@@ -255,7 +255,7 @@ select::-ms-expand {
 }
 
 select::-ms-value {
-  color: currentColor; /* Internet Explorer 11+ */
+  color: currentcolor; /* Internet Explorer 11+ */
 }
 
 legend {