vxe-pc-ui 4.16.6 → 4.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, VxeMenuPropTypes, MenuReactData, VxeMenuEmits, MenuMethods, VxeComponentSlotType, VxeLayoutAsidePropTypes, MenuPrivateMethods, MenuPrivateRef, VxeMenuPrivateComputed, VxeMenuConstructor, VxeMenuPrivateMethods, ValueOf, VxeLayoutAsideConstructor, VxeLayoutAsidePrivateMethods } from '../../../types'
+import type { VxeMenuDefines, VxeMenuPropTypes, MenuInternalData, MenuReactData, VxeMenuEmits, MenuMethods, VxeComponentSlotType, VxeLayoutAsidePropTypes, MenuPrivateMethods, MenuPrivateRef, VxeMenuPrivateComputed, VxeMenuConstructor, VxeMenuPrivateMethods, ValueOf, VxeLayoutAsideConstructor, VxeLayoutAsidePrivateMethods } 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 defineVxeComponent({
   name: 'VxeMenu',
   props: {
@@ -57,15 +77,8 @@ export default defineVxeComponent({
 
     const { computeSize } = useSize(props)
 
-    const reactData = reactive<MenuReactData>({
-      initialized: !!props.collapsed,
-      isEnterCollapse: false,
-      collapseStyle: {},
-      collapseZindex: 0,
-      activeName: props.modelValue,
-      menuList: [],
-      itemHeight: 1
-    })
+    const reactData = reactive(createReactData())
+    const internalData = createInternalData()
 
     const refMaps: MenuPrivateRef = {
       refElem
@@ -151,6 +164,7 @@ export default 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,
@@ -211,10 +225,18 @@ export default defineVxeComponent({
 
     const handleClickIconCollapse = (evnt: MouseEvent, item: VxeMenuDefines.MenuItem, itemList: VxeMenuDefines.MenuItem[]) => {
       const { accordion } = props
-      const { hasChild, isExpand } = item
+      const { menuEffectMaps } = internalData
+      const { itemId, hasChild, isExpand } = item
+      const isCollapsed = computeIsCollapsed.value
+      const expanded = !isExpand
       if (hasChild) {
         evnt.stopPropagation()
         evnt.preventDefault()
+
+        if (menuEffectMaps[itemId]) {
+          clearTimeout(menuEffectMaps[itemId])
+        }
+
         if (accordion) {
           itemList.forEach(obj => {
             if (obj !== item) {
@@ -222,7 +244,33 @@ export default defineVxeComponent({
             }
           })
         }
-        item.isExpand = !isExpand
+        item.isExpand = expanded
+
+        const wrapperEl = isCollapsed ? refCollapseElem.value : refElem.value
+        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)
+          }
+        }
       }
     }
 
@@ -382,7 +430,7 @@ export default defineVxeComponent({
     }
 
     const renderDefaultChildren = (item: VxeMenuDefines.MenuItem, itemList: VxeMenuDefines.MenuItem[]): VNode => {
-      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 = computeIsCollapsed.value
       if (item.permissionCode) {
@@ -396,7 +444,8 @@ export default defineVxeComponent({
           'is--exact-active': isExactActive,
           'is--active': isActive,
           'is--expand': (!isCollapsed || isEnterCollapse) && isExpand
-        }]
+        }],
+        'data-menu-id': itemId
       }, [
         routerLink
           ? h(resolveComponent('router-link'), {
@@ -429,7 +478,7 @@ export default defineVxeComponent({
     }
 
     const renderCollapseChildren = (item: VxeMenuDefines.MenuItem, itemList: VxeMenuDefines.MenuItem[]): VNode => {
-      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)
@@ -440,7 +489,8 @@ export default defineVxeComponent({
         class: ['vxe-menu--item-wrapper', `vxe-menu--item-level${level}`, {
           'is--exact-active': isExactActive,
           'is--active': isActive
-        }]
+        }],
+        'data-menu-id': itemId
       }, [
         routerLink
           ? h(resolveComponent('router-link'), {
@@ -560,7 +610,6 @@ export default defineVxeComponent({
     })
 
     onBeforeUnmount(() => {
-      globalEvents.off($xeMenu, 'resize')
       const collapseEl = refCollapseElem.value
       if (collapseEl) {
         const parentNode = collapseEl.parentNode
@@ -568,8 +617,13 @@ export default defineVxeComponent({
           parentNode.removeChild(collapseEl)
         }
       }
+      globalEvents.off($xeMenu, 'resize')
+      XEUtils.assign(reactData, createReactData())
+      XEUtils.assign(internalData, createInternalData())
     })
 
+    reactData.initialized = !!props.collapsed
+    reactData.activeName = props.modelValue
     updateMenuConfig()
     updateActiveMenu(true)
 

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,9 +116,11 @@
 }
 
 .vxe-menu--item-group {
-  max-height: 0;
+  height: 0;
   overflow: hidden;
-  transition: max-height 0.3s ease-in-out;
+  &[data-effect] {
+    transition: height 0.3s ease-in-out;
+  }
 }
 .vxe-menu--item-wrapper {
   &.is--active {
@@ -132,7 +136,7 @@
   }
   &.is--expand {
     & > .vxe-menu--item-group {
-      max-height: 1000px;
+      height: auto;
     }
   }
 }

package/types/components/cascader.d.ts

@@ -257,6 +257,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

@@ -13,6 +13,7 @@ export type VxeMenuInstance = DefineVxeComponentInstance<VxeMenuProps, VxeMenuCo
 export interface VxeMenuConstructor extends VxeComponentBaseOptions, VxeMenuMethods {
   props: VxeMenuProps
   context: SetupContext<VxeMenuEmits>
+  internalData: MenuInternalData
   reactData: MenuReactData
   getRefMaps(): MenuPrivateRef
   getComputeMaps(): MenuPrivateComputed
@@ -85,6 +86,10 @@ export interface MenuPrivateComputed {
 }
 export interface VxeMenuPrivateComputed extends MenuPrivateComputed { }
 
+export interface MenuInternalData {
+  menuEffectMaps: Record<number, number>
+}
+
 export interface MenuReactData {
   initialized: boolean
   collapseStyle: VxeComponentStyleType
@@ -116,6 +121,7 @@ export namespace VxeMenuDefines {
   }
 
   export interface MenuItem extends VxeMenuPropTypes.MenuOption {
+    itemId: number
     itemKey: string | number
     level: number,
     parentKey: string | number