vxe-pc-ui 4.16.5 → 4.16.7

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,17 @@ 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 expanded = !isExpand
       if (hasChild) {
         evnt.stopPropagation()
         evnt.preventDefault()
+
+        if (menuEffectMaps[itemId]) {
+          clearTimeout(menuEffectMaps[itemId])
+        }
+
         if (accordion) {
           itemList.forEach(obj => {
             if (obj !== item) {
@@ -222,7 +243,33 @@ export default defineVxeComponent({
             }
           })
         }
-        item.isExpand = !isExpand
+        item.isExpand = expanded
+
+        const el = refElem.value
+        if (el) {
+          const nemuEl = el.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 +429,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 +443,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 +477,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 +488,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 +609,6 @@ export default defineVxeComponent({
     })
 
     onBeforeUnmount(() => {
-      globalEvents.off($xeMenu, 'resize')
       const collapseEl = refCollapseElem.value
       if (collapseEl) {
         const parentNode = collapseEl.parentNode
@@ -568,8 +616,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/tree/src/tree.ts

@@ -1819,6 +1819,9 @@ export default defineVxeComponent({
         return nodeKeys
       },
       getCheckboxNodes () {
+        return $xeTree.getCheckboxRecords()
+      },
+      getCheckboxRecords () {
         const { nodeMaps, selectCheckboxMaps } = internalData
         const list: any[] = []
         XEUtils.each(selectCheckboxMaps, (item, nodeid) => {
@@ -2223,7 +2226,13 @@ export default defineVxeComponent({
         const nodeid = getNodeId(node)
         return !!reactData.removeNodeFlag && !!internalData.removeNodeMaps[nodeid]
       },
-      closeTooltip
+      closeTooltip,
+      getRecordset () {
+        return {
+          insertRecords: $xeTree.getInsertRecords(),
+          removeRecords: $xeTree.getRemoveRecords()
+        }
+      }
     }
 
     const handleNodeDragEndClearStatus = () => {
@@ -3210,9 +3219,9 @@ export default defineVxeComponent({
                     ])
               ]
             : []),
-          renderDragIcon(node, nodeid),
           renderRadio(node, nodeid, isExistChild, nLevel, isRadioChecked),
           renderCheckbox(node, nodeid, isExistChild, nLevel, isCheckboxChecked, isIndeterminate),
+          renderDragIcon(node, nodeid),
           h('div', {
             class: 'vxe-tree--node-item-inner'
           }, [
@@ -3517,6 +3526,7 @@ export default defineVxeComponent({
         internalData.resizeObserver = resizeObserver
       }
 
+      recalculate()
       globalEvents.on($xeTree, 'resize', handleGlobalResizeEvent)
     })
 

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/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/list.d.ts

@@ -440,6 +440,10 @@ export interface ListMethods<D = any> {
    * 只对 show-checkbox 有效，根据主键设置复选框
    */
   setCheckboxRowByKey(rowKeys: string | number | null | undefined | (string | number | null | undefined)[], checked: boolean): Promise<void>
+  /**
+   * 只对 show-checkbox 有效，获取复选框已选的行
+   */
+  getCheckboxRecords(): D[]
   /**
    * 只对 show-checkbox 有效，获取复选框已选的行
    */
@@ -492,6 +496,14 @@ export interface ListMethods<D = any> {
    * 判断数据是否被删除
    */
   isRemoveByRow(row: any | null): boolean
+  /**
+   * 获取列表数据集
+   * 获取新增、删除的数据
+   */
+  getRecordset(): {
+    insertRecords: D[]
+    removeRecords: D[]
+  }
 }
 export interface VxeListMethods<D = any> extends ListMethods<D> { }
 

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

package/types/components/tree.d.ts

@@ -544,6 +544,10 @@ export interface TreeMethods<D = any> {
    * 只对 show-checkbox 有效，获取复选框的节点
    */
   getCheckboxNodes(): D[]
+  /**
+   * 只对 show-checkbox 有效，获取复选框的节点
+   */
+  getCheckboxRecords(): D[]
   /**
    * 用于 showCheckbox，手动清空复选框的
    */
@@ -724,6 +728,14 @@ export interface TreeMethods<D = any> {
    * 手动关闭工具提示
    */
   closeTooltip(): Promise<void>
+  /**
+   * 获取列表数据集
+   * 获取新增、删除的数据
+   */
+  getRecordset(): {
+    insertRecords: D[]
+    removeRecords: D[]
+  }
 }
 export interface VxeTreeMethods<D = any> extends TreeMethods<D> { }