vxe-pc-ui 3.16.6 → 3.16.8

package/packages/menu/src/menu.ts

@@ -8,12 +8,32 @@ import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
 import VxeLoadingComponent from '../../loading'
 
-import type { VxeMenuDefines, MenuReactData, VxeMenuPropTypes, VxeLayoutAsideConstructor, VxeMenuEmits, VxeLayoutAsidePropTypes, VxeComponentPermissionInfo, VxeComponentSizeType, ValueOf } from '../../../types'
+import type { VxeMenuDefines, MenuInternalData, MenuReactData, VxeMenuPropTypes, VxeLayoutAsideConstructor, VxeMenuEmits, VxeLayoutAsidePropTypes, VxeComponentPermissionInfo, VxeComponentSizeType, ValueOf } from '../../../types'
 
 const { errLog } = createComponentLog('menu')
 
 const { menus, getConfig, getIcon } = VxeUI
 
+function createInternalData (): MenuInternalData {
+  return {
+    menuEffectMaps: {}
+  }
+}
+
+function createReactData (): MenuReactData {
+  return {
+    initialized: false,
+    isEnterCollapse: false,
+    collapseStyle: {},
+    collapseZindex: 0,
+    activeName: '',
+    menuList: [],
+    itemHeight: 1
+  }
+}
+
+let nemuUniqueKey = 100000000
+
 export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeMenu',
   mixins: [
@@ -49,16 +69,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
     }
   },
   data () {
-    const reactData: MenuReactData = {
-      initialized: false,
-      isEnterCollapse: false,
-      collapseStyle: {},
-      collapseZindex: 0,
-      activeName: null,
-      menuList: [],
-      itemHeight: 1
-    }
+    const reactData = createReactData()
     return {
+      ...({} as {
+        internalData: MenuInternalData,
+      }),
       xID: XEUtils.uniqueId(),
       reactData
     }
@@ -185,6 +200,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           ...item,
           parentKey: parent ? (parent.name || path.slice(0, path.length - 1).join(',')) : '',
           level: path.length,
+          itemId: ++nemuUniqueKey,
           itemKey: item.name || path.join(','),
           isExactActive: false,
           isActive: false,
@@ -251,12 +267,21 @@ export default /* define-vxe-component start */ defineVxeComponent({
     handleClickIconCollapse  (evnt: MouseEvent, item: VxeMenuDefines.MenuItem, itemList: VxeMenuDefines.MenuItem[]) {
       const $xeMenu = this
       const props = $xeMenu
+      const internalData = $xeMenu.internalData
 
       const { accordion } = props
-      const { hasChild, isExpand } = item
+      const { menuEffectMaps } = internalData
+      const { itemId, hasChild, isExpand } = item
+      const isCollapsed = $xeMenu.computeIsCollapsed
+      const expanded = !isExpand
       if (hasChild) {
         evnt.stopPropagation()
         evnt.preventDefault()
+
+        if (menuEffectMaps[itemId]) {
+          clearTimeout(menuEffectMaps[itemId])
+        }
+
         if (accordion) {
           itemList.forEach(obj => {
             if (obj !== item) {
@@ -264,7 +289,33 @@ export default /* define-vxe-component start */ defineVxeComponent({
             }
           })
         }
-        item.isExpand = !isExpand
+        item.isExpand = expanded
+
+        const wrapperEl = isCollapsed ? $xeMenu.$refs.refCollapseElem as HTMLDivElement : $xeMenu.$refs.refElem as HTMLDivElement
+        if (wrapperEl) {
+          const nemuEl = wrapperEl.querySelector<HTMLDivElement>(`.vxe-menu--item-wrapper[data-menu-id="${itemId}"]`)
+          const groupEl = nemuEl ? nemuEl.querySelector<HTMLDivElement>('.vxe-menu--item-group') : null
+          if (groupEl) {
+            if (expanded) {
+              groupEl.style.height = '0'
+              groupEl.setAttribute('data-effect', 'y')
+              requestAnimationFrame(() => {
+                groupEl.style.height = `${groupEl.scrollHeight}px`
+              })
+            } else {
+              groupEl.style.height = `${groupEl.scrollHeight}px`
+              groupEl.setAttribute('data-effect', 'y')
+              requestAnimationFrame(() => {
+                groupEl.style.height = '0'
+              })
+            }
+            menuEffectMaps[itemId] = setTimeout(() => {
+              delete menuEffectMaps[itemId]
+              groupEl.removeAttribute('data-effect')
+              groupEl.style.height = ''
+            }, 350)
+          }
+        }
       }
     },
     handleContextmenuEvent (evnt: MouseEvent, item: VxeMenuDefines.MenuItem) {
@@ -343,7 +394,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const reactData = $xeMenu.reactData
 
       const { collapseStyle } = reactData
-      const el = this.$refs.refElem as HTMLDivElement
+      const el = $xeMenu.$refs.refElem as HTMLDivElement
       reactData.collapseStyle = Object.assign({}, collapseStyle, {
         width: el ? toCssUnit(el.offsetWidth) : ''
       })
@@ -414,7 +465,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeMenu = this
       const reactData = $xeMenu.reactData
 
-      const { itemKey, level, hasChild, isActive, isExactActive, isExpand, routerLink, childList } = item
+      const { itemId, itemKey, level, hasChild, isActive, isExactActive, isExpand, routerLink, childList } = item
       const { isEnterCollapse } = reactData
       const isCollapsed = $xeMenu.computeIsCollapsed
       if (item.permissionCode) {
@@ -428,7 +479,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
           'is--exact-active': isExactActive,
           'is--active': isActive,
           'is--expand': (!isCollapsed || isEnterCollapse) && isExpand
-        }]
+        }],
+        attrs: {
+          'data-menu-id': itemId
+        }
       }, [
         routerLink
           ? h('router-link', {
@@ -467,7 +521,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     renderCollapseChildren (h: CreateElement, item: VxeMenuDefines.MenuItem, itemList: VxeMenuDefines.MenuItem[]): VNode {
       const $xeMenu = this
 
-      const { itemKey, level, hasChild, isActive, isExactActive, routerLink, childList } = item
+      const { itemId, itemKey, level, hasChild, isActive, isExactActive, routerLink, childList } = item
       if (item.permissionCode) {
         if (!permission.checkVisible(item.permissionCode)) {
           return renderEmptyElement($xeMenu)
@@ -478,7 +532,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
         class: ['vxe-menu--item-wrapper', `vxe-menu--item-level${level}`, {
           'is--exact-active': isExactActive,
           'is--active': isActive
-        }]
+        }],
+        attrs: {
+          'data-menu-id': itemId
+        }
       }, [
         routerLink
           ? h('router-link', {
@@ -594,6 +651,18 @@ export default /* define-vxe-component start */ defineVxeComponent({
       $xeMenu.handleCollapseMenu()
     }
   },
+  created () {
+    const $xeMenu = this
+    const props = $xeMenu
+
+    $xeMenu.internalData = createInternalData()
+
+    const reactData = $xeMenu.reactData
+    reactData.initialized = !!props.collapsed
+    reactData.activeName = props.value
+    $xeMenu.updateMenuConfig()
+    $xeMenu.updateActiveMenu(true)
+  },
   mounted () {
     const $xeMenu = this
     const props = $xeMenu
@@ -603,13 +672,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
     if (menuConfig && !VxeUIContextMenu) {
       errLog('vxe.error.reqComp', ['vxe-context-menu'])
     }
-    globalEvents.on($xeMenu, 'resize', $xeMenu.updateCollapseStyle)
     $xeMenu.updateCollapseStyle()
+    globalEvents.on($xeMenu, 'resize', $xeMenu.updateCollapseStyle)
   },
   beforeDestroy () {
     const $xeMenu = this
+    const reactData = $xeMenu.reactData
+    const internalData = $xeMenu.internalData
 
-    globalEvents.off($xeMenu, 'resize')
     const collapseEl = $xeMenu.$refs.refCollapseElem as HTMLDivElement
     if (collapseEl) {
       const parentNode = collapseEl.parentNode
@@ -617,16 +687,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
         parentNode.removeChild(collapseEl)
       }
     }
-  },
-  created () {
-    const $xeMenu = this
-    const props = $xeMenu
-
-    const reactData = $xeMenu.reactData
-    reactData.initialized = !!props.collapsed
-    reactData.activeName = props.value
-    $xeMenu.updateMenuConfig()
-    $xeMenu.updateActiveMenu(true)
+    globalEvents.off($xeMenu, 'resize')
+    XEUtils.assign(reactData, createReactData())
+    XEUtils.assign(internalData, createInternalData())
   },
   render (this: any, h) {
     return this.renderVN(h)

package/packages/ui/index.ts

@@ -513,8 +513,8 @@ setIcon({
   BUTTON_TOOLTIP_ICON: iconPrefix + 'question-circle-fill',
 
   // menu
-  MENU_ITEM_EXPAND_OPEN: iconPrefix + 'arrow-down rotate180',
-  MENU_ITEM_EXPAND_CLOSE: iconPrefix + 'arrow-down',
+  MENU_ITEM_EXPAND_OPEN: iconPrefix + 'arrow-right rotate90',
+  MENU_ITEM_EXPAND_CLOSE: iconPrefix + 'arrow-right',
 
   // select
   SELECT_LOADED: iconPrefix + 'spinner roll',

package/styles/components/cascader.scss

@@ -5,18 +5,18 @@
 .vxe-cascader,
 .vxe-cascader--panel {
   --vxe-ui-cascader-current-font-size: var(--vxe-ui-font-size-default);
-  --vxe-ui-cascader-current-font-size: var(--vxe-ui-layout-padding-default);
+  --vxe-ui-cascader-current-padding: var(--vxe-ui-layout-padding-default);
   &.size--medium {
     --vxe-ui-cascader-current-font-size: var(--vxe-ui-font-size-medium);
-    --vxe-ui-cascader-current-font-size: var(--vxe-ui-layout-padding-medium);
+    --vxe-ui-cascader-current-padding: var(--vxe-ui-layout-padding-medium);
   }
   &.size--small {
     --vxe-ui-cascader-current-font-size: var(--vxe-ui-font-size-small);
-    --vxe-ui-cascader-current-font-size: var(--vxe-ui-layout-padding-small);
+    --vxe-ui-cascader-current-padding: var(--vxe-ui-layout-padding-small);
   }
   &.size--mini {
     --vxe-ui-cascader-current-font-size: var(--vxe-ui-font-size-mini);
-    --vxe-ui-cascader-current-font-size: var(--vxe-ui-layout-padding-mini);
+    --vxe-ui-cascader-current-padding: var(--vxe-ui-layout-padding-mini);
   }
 }
 
@@ -83,8 +83,8 @@
 
 .vxe-cascader--panel-search {
   display: block;
-  padding: var(--vxe-ui-cascader-current-font-size);
-  width: calc(var(--vxe-ui-cascader-node-width) * var(--vxe-ui-cascader-chunk-size));
+  padding: var(--vxe-ui-cascader-current-padding);
+  width: 100%;
   .vxe-cascader-search--input {
     width: 100%;
   }
@@ -99,7 +99,7 @@
   min-height: 2em;
 }
 .vxe-cascader--total-btns {
-  padding-left: var(--vxe-ui-cascader-current-font-size);
+  padding-left: var(--vxe-ui-cascader-current-padding);
   flex-grow: 1;
 }
 .vxe-cascader--total-btns,
@@ -166,7 +166,7 @@
 .vxe-cascader-chunk--item-wrapper {
   flex-shrink: 0;
   border-left: 1px solid var(--vxe-ui-base-popup-border-color);
-  padding: var(--vxe-ui-cascader-current-font-size) 0;
+  padding: var(--vxe-ui-cascader-current-padding) 0;
   &:first-child {
     border-left: 0;
   }
@@ -190,7 +190,7 @@
   flex-direction: row;
   height: var(--vxe-ui-cascader-node-height);
   line-height: var(--vxe-ui-cascader-node-height);
-  padding: 0 calc(var(--vxe-ui-cascader-current-font-size) + 18px) 0 var(--vxe-ui-cascader-current-font-size);
+  padding: 0 calc(var(--vxe-ui-cascader-current-padding) + 18px) 0 var(--vxe-ui-cascader-current-padding);
   cursor: pointer;
   &:hover {
     background-color: var(--vxe-ui-cascader-node-hover-background-color);

package/styles/components/menu.scss

@@ -1,7 +1,8 @@
 @use '../helpers/baseMixin.scss';
 
 // 局部变量
-.vxe-menu {
+.vxe-menu,
+.vxe-menu--collapse-wrapper {
   --vxe-ui-menu-current-font-size: var(--vxe-ui-font-size-default);
   --vxe-ui-menu-current-item-height: var(--vxe-ui-menu-item-height-default);
   &.size--medium {
@@ -31,7 +32,8 @@
     min-height: 4em;
   }
 }
-.vxe-menu {
+.vxe-menu,
+.vxe-menu--collapse-wrapper  {
   font-size: var(--vxe-ui-menu-current-font-size);
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
@@ -114,7 +116,11 @@
 }
 
 .vxe-menu--item-group {
-  display: none;
+  height: 0;
+  overflow: hidden;
+  &[data-effect] {
+    transition: height 0.3s ease-in-out;
+  }
 }
 .vxe-menu--item-wrapper {
   &.is--active {
@@ -130,7 +136,7 @@
   }
   &.is--expand {
     & > .vxe-menu--item-group {
-      display: block;
+      height: auto;
     }
   }
 }

package/types/components/cascader.d.ts

@@ -250,6 +250,7 @@ export interface CascaderInternalData {
   selectCheckboxMaps: Record<string, any>
   treeExpandedMaps: Record<string, boolean>
   treeExpandLazyLoadedMaps: Record<string, boolean>
+  isUpdateMode?: boolean
 }
 
 export interface CascaderMethods {

package/types/components/menu.d.ts

@@ -9,6 +9,7 @@ export declare const VxeMenu: DefineVxeComponentApp<VxeMenuProps, VxeMenuEventPr
 export type VxeMenuComponent = DefineVxeComponentOptions<VxeMenuProps>
 
 export type VxeMenuInstance = DefineVxeComponentInstance<{
+  internalData: MenuInternalData
   reactData: MenuReactData
 }, VxeMenuProps, VxeMenuPrivateComputed, VxeMenuMethods>
 
@@ -79,6 +80,10 @@ export interface MenuPrivateComputed {
 }
 export interface VxeMenuPrivateComputed extends MenuPrivateComputed { }
 
+export interface MenuInternalData {
+  menuEffectMaps: Record<number, number>
+}
+
 export interface MenuReactData {
   initialized: boolean
   collapseStyle: VxeComponentStyleType
@@ -111,6 +116,7 @@ export namespace VxeMenuDefines {
   }
 
   export interface MenuItem extends VxeMenuPropTypes.MenuOption {
+    itemId: number
     itemKey: string | number
     level: number,
     parentKey: string | number