vxe-pc-ui 3.16.5 → 3.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, 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,20 @@ 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 expanded = !isExpand
       if (hasChild) {
         evnt.stopPropagation()
         evnt.preventDefault()
+
+        if (menuEffectMaps[itemId]) {
+          clearTimeout(menuEffectMaps[itemId])
+        }
+
         if (accordion) {
           itemList.forEach(obj => {
             if (obj !== item) {
@@ -264,7 +288,33 @@ export default /* define-vxe-component start */ defineVxeComponent({
             }
           })
         }
-        item.isExpand = !isExpand
+        item.isExpand = expanded
+
+        const el = $xeMenu.$refs.refElem as HTMLDivElement
+        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)
+          }
+        }
       }
     },
     handleContextmenuEvent (evnt: MouseEvent, item: VxeMenuDefines.MenuItem) {
@@ -343,7 +393,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 +464,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 +478,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 +520,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 +531,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 +650,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 +671,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 +686,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/tree/src/tree.ts

@@ -2099,6 +2099,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
       return $xeTree.$nextTick()
     },
+    getRecordset () {
+      const $xeTree = this
+
+      return {
+        insertRecords: $xeTree.getInsertRecords(),
+        removeRecords: $xeTree.getRemoveRecords()
+      }
+    },
     handleContextmenuEvent (evnt: MouseEvent, node: any) {
       const $xeTree = this
       const props = $xeTree
@@ -2618,6 +2626,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     getCheckboxNodes () {
       const $xeTree = this
+
+      return $xeTree.getCheckboxRecords()
+    },
+    getCheckboxRecords () {
+      const $xeTree = this
       const internalData = $xeTree.internalData
 
       const { nodeMaps, selectCheckboxMaps } = internalData
@@ -3544,9 +3557,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
                     ])
               ]
             : []),
-          $xeTree.renderDragIcon(h, node, nodeid),
           $xeTree.renderRadio(h, node, nodeid, isExistChild, nLevel, isRadioChecked),
           $xeTree.renderCheckbox(h, node, nodeid, isExistChild, nLevel, isCheckboxChecked, isIndeterminate),
+          $xeTree.renderDragIcon(h, node, nodeid),
           h('div', {
             class: 'vxe-tree--node-item-inner'
           }, [
@@ -3892,6 +3905,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       internalData.resizeObserver = resizeObserver
     }
 
+    $xeTree.recalculate()
     globalEvents.on($xeTree, 'resize', $xeTree.handleGlobalResizeEvent)
   },
   beforeDestroy () {

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

@@ -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

package/types/components/tree.d.ts

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