From 9745c329a962faa2499f0003c8badab33b9dcabc Mon Sep 17 00:00:00 2001 From: danranVm Date: Mon, 24 Jan 2022 10:22:23 +0800 Subject: [PATCH] feat(pro:layout): suppor all slots of IxMenu (#738) * feat(pro:layout): suppor all slots of IxMenu * ci: fix lint --- packages/components/icon/style/index.less | 1 + .../__tests__/__snapshots__/menu.spec.ts.snap | 10 +++---- .../components/menu/__tests__/menu.spec.ts | 2 +- packages/components/menu/src/Menu.tsx | 2 +- .../{children => contents}/MenuDivider.tsx | 1 + .../src/{children => contents}/MenuItem.tsx | 6 ++-- .../{children => contents}/MenuItemGroup.tsx | 11 ++++---- .../menu/src/{children => contents}/Utils.tsx | 0 .../menu-sub/InlineContent.tsx | 1 + .../Title.tsx => contents/menu-sub/Label.tsx} | 7 +++-- .../menu-sub/MenuSub.tsx | 7 +++-- .../menu-sub/OverlayContent.tsx | 1 + packages/components/menu/style/collapsed.less | 20 +++++++------- packages/components/menu/style/dark.less | 14 ++++++---- packages/components/menu/style/index.less | 16 +++++------ packages/components/menu/style/menu.less | 24 ++++++++-------- packages/components/style/core/reset.less | 2 +- .../__snapshots__/layoutPro.spec.ts.snap | 26 +++++++++--------- packages/pro/layout/demo/Basic.vue | 9 ++++-- packages/pro/layout/demo/Collapsed.vue | 9 ++++-- packages/pro/layout/demo/Fixed.vue | 9 ++++-- packages/pro/layout/demo/Slots.vue | 9 ++++-- packages/pro/layout/demo/Theme.vue | 11 +++++--- packages/pro/layout/demo/Type.vue | 9 ++++-- packages/pro/layout/docs/Index.zh.md | 7 +++-- packages/pro/layout/src/Layout.tsx | 4 +-- .../pro/layout/src/LayoutSiderTrigger.tsx | 4 +-- .../layout/src/composables/useActiveKey.ts | 14 ++++------ .../pro/layout/src/composables/useMenu.ts | 23 ++++++++-------- .../src/{content => contents}/Header.tsx | 18 +++++++----- .../src/{content => contents}/Sider.tsx | 22 ++++++--------- packages/pro/layout/src/token.ts | 15 ++++++---- packages/pro/layout/src/types.ts | 10 ++----- packages/pro/layout/src/utils/menu.ts | 22 +++++++-------- packages/pro/layout/style/mixin.less | 20 +++++++++++--- packages/site/public/medias/home-banner.mp4 | Bin 2449276 -> 0 bytes .../site/src/components/views/home/Home.vue | 4 ++- 37 files changed, 201 insertions(+), 169 deletions(-) rename packages/components/menu/src/{children => contents}/MenuDivider.tsx (92%) rename packages/components/menu/src/{children => contents}/MenuItem.tsx (93%) rename packages/components/menu/src/{children => contents}/MenuItemGroup.tsx (88%) rename packages/components/menu/src/{children => contents}/Utils.tsx (100%) rename packages/components/menu/src/{children => contents}/menu-sub/InlineContent.tsx (96%) rename packages/components/menu/src/{children/menu-sub/Title.tsx => contents/menu-sub/Label.tsx} (93%) rename packages/components/menu/src/{children => contents}/menu-sub/MenuSub.tsx (97%) rename packages/components/menu/src/{children => contents}/menu-sub/OverlayContent.tsx (97%) rename packages/pro/layout/src/{content => contents}/Header.tsx (82%) rename packages/pro/layout/src/{content => contents}/Sider.tsx (81%) delete mode 100644 packages/site/public/medias/home-banner.mp4 diff --git a/packages/components/icon/style/index.less b/packages/components/icon/style/index.less index 1bcda1b56..3d0fc753f 100644 --- 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 index 44e193623..45c00da45 100644 --- 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`] = ` "" diff --git a/packages/components/menu/__tests__/menu.spec.ts b/packages/components/menu/__tests__/menu.spec.ts index f4b7aa2ae..0517afc8e 100644 --- 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 index 6871e353c..b849a5334 100644 --- 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/packages/components/menu/src/children/MenuDivider.tsx b/packages/components/menu/src/contents/MenuDivider.tsx similarity index 92% rename from packages/components/menu/src/children/MenuDivider.tsx rename to packages/components/menu/src/contents/MenuDivider.tsx index e38d1326e..a6d77f7c9 100644 --- a/packages/components/menu/src/children/MenuDivider.tsx +++ b/packages/components/menu/src/contents/MenuDivider.tsx @@ -13,5 +13,6 @@ const MenuDivider: FunctionalComponent = () => { const { mergedPrefixCls } = inject(menuToken)! return
  • } +MenuDivider.displayName = 'MenuDivider' export default MenuDivider diff --git a/packages/components/menu/src/children/MenuItem.tsx b/packages/components/menu/src/contents/MenuItem.tsx similarity index 93% rename from packages/components/menu/src/children/MenuItem.tsx rename to packages/components/menu/src/contents/MenuItem.tsx index 3eb8d517b..85ae97e13 100644 --- a/packages/components/menu/src/children/MenuItem.tsx +++ b/packages/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 (
  • - {iconNode && {iconNode}} - {labelNode} + {iconNode} + {labelNode}
  • ) } diff --git a/packages/components/menu/src/children/MenuItemGroup.tsx b/packages/components/menu/src/contents/MenuItemGroup.tsx similarity index 88% rename from packages/components/menu/src/children/MenuItemGroup.tsx rename to packages/components/menu/src/contents/MenuItemGroup.tsx index 470fb2bfc..75bb6d216 100644 --- a/packages/components/menu/src/children/MenuItemGroup.tsx +++ b/packages/components/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 (
  • -
    - {iconNode && {iconNode}} - { {labelNode}} +
    + {iconNode} + {labelNode}
      {coverChildren(children)}
  • diff --git a/packages/components/menu/src/children/Utils.tsx b/packages/components/menu/src/contents/Utils.tsx similarity index 100% rename from packages/components/menu/src/children/Utils.tsx rename to packages/components/menu/src/contents/Utils.tsx diff --git a/packages/components/menu/src/children/menu-sub/InlineContent.tsx b/packages/components/menu/src/contents/menu-sub/InlineContent.tsx similarity index 96% rename from packages/components/menu/src/children/menu-sub/InlineContent.tsx rename to packages/components/menu/src/contents/menu-sub/InlineContent.tsx index edccd068c..40f85fa85 100644 --- a/packages/components/menu/src/children/menu-sub/InlineContent.tsx +++ b/packages/components/menu/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/packages/components/menu/src/children/menu-sub/Title.tsx b/packages/components/menu/src/contents/menu-sub/Label.tsx similarity index 93% rename from packages/components/menu/src/children/menu-sub/Title.tsx rename to packages/components/menu/src/contents/menu-sub/Label.tsx index 1a1d48d7c..09a62a318 100644 --- a/packages/components/menu/src/children/menu-sub/Title.tsx +++ b/packages/components/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 (
    - {iconNode && {iconNode}} - {labelNode} + {iconNode} + {labelNode} {suffixNode && {suffixNode}}
    ) diff --git a/packages/components/menu/src/children/menu-sub/MenuSub.tsx b/packages/components/menu/src/contents/menu-sub/MenuSub.tsx similarity index 97% rename from packages/components/menu/src/children/menu-sub/MenuSub.tsx rename to packages/components/menu/src/contents/menu-sub/MenuSub.tsx index 9c68ca619..415435f49 100644 --- a/packages/components/menu/src/children/menu-sub/MenuSub.tsx +++ b/packages/components/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 = [, ] + children = [, ] } else { - const trigger = () => + const trigger = () => const content = () => children = ( <ɵOverlay diff --git a/packages/components/menu/src/children/menu-sub/OverlayContent.tsx b/packages/components/menu/src/contents/menu-sub/OverlayContent.tsx similarity index 97% rename from packages/components/menu/src/children/menu-sub/OverlayContent.tsx rename to packages/components/menu/src/contents/menu-sub/OverlayContent.tsx index 431b752bc..4a658cbc5 100644 --- a/packages/components/menu/src/children/menu-sub/OverlayContent.tsx +++ b/packages/components/menu/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 index dfd8e78ef..592caa274 100644 --- 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 index 96f65bad6..283f54394 100644 --- 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,7 +27,7 @@ } .@{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; @@ -35,10 +35,12 @@ } .@{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 index c9d7f0415..d67a9fca3 100644 --- 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 index 2f80ad652..93ea24d75 100644 --- 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,25 +36,25 @@ 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; } } @@ -62,15 +62,15 @@ &-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 index 9d5368265..1415e0a5b 100644 --- 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 { diff --git a/packages/pro/layout/__tests__/__snapshots__/layoutPro.spec.ts.snap b/packages/pro/layout/__tests__/__snapshots__/layoutPro.spec.ts.snap index ca58971f1..ba355f3ce 100644 --- a/packages/pro/layout/__tests__/__snapshots__/layoutPro.spec.ts.snap +++ b/packages/pro/layout/__tests__/__snapshots__/layoutPro.spec.ts.snap @@ -14,34 +14,34 @@ exports[`ProLayout render work 1`] = `
    • -
      Sub Menu 1
      +
      Sub Menu 1
        -
      • Item 4
      • -
      • Item 5
      • +
      • Item 4
      • +
      • Item 5
      • -
        Menu Sub 2
        +
        Menu Sub 2
        • - Item 6 + Item 6
        • - Item 7 + Item 7
      • -
        Menu Sub 3
        +
        Menu Sub 3
        • - Item 8 + Item 8
        • - Item 9 + Item 9
        @@ -50,19 +50,19 @@ exports[`ProLayout render work 1`] = `
      • -
        Menu Sub 4
        +
        Menu Sub 4
        • - Item 10 + Item 10
        • - Item 11 + Item 11
      • -
      • Item 12
      • +
      • Item 12
    diff --git a/packages/pro/layout/demo/Basic.vue b/packages/pro/layout/demo/Basic.vue index ee90dbfe4..66842cc43 100644 --- a/packages/pro/layout/demo/Basic.vue +++ b/packages/pro/layout/demo/Basic.vue @@ -1,5 +1,8 @@