vxe-pc-ui 4.10.49 → 4.11.0

package/packages/ui/index.ts

@@ -378,6 +378,12 @@ setConfig({
     radioConfig: {
       strict: true
     },
+    dragConfig: {
+      showIcon: true,
+      animation: true,
+      showGuidesStatus: true,
+      showDragTip: true
+    },
     virtualYConfig: {
       enabled: true,
       gt: 50,
@@ -585,6 +591,10 @@ setIcon({
   TREE_NODE_OPEN: iconPrefix + 'caret-right rotate90',
   TREE_NODE_CLOSE: iconPrefix + 'caret-right',
   TREE_NODE_LOADED: iconPrefix + 'spinner roll',
+  TREE_DRAG: iconPrefix + 'drag-handle',
+  TREE_DRAG_STATUS_NODE: iconPrefix + 'sort',
+  TREE_DRAG_STATUS_SUB_NODE: iconPrefix + 'add-sub',
+  TREE_DRAG_DISABLED: iconPrefix + 'no-drop',
 
   // tree-select
   TREE_SELECT_LOADED: iconPrefix + 'spinner roll',

package/packages/ui/src/anime.ts

@@ -0,0 +1,52 @@
+
+import XEUtils from 'xe-utils'
+import { addClass, removeClass } from './dom'
+
+const rowMoveCls = 'row--drag-move'
+const colMoveClass = 'col--drag-move'
+
+/**
+ * 上下拖拽
+ */
+export function moveRowAnimateToTb (elemList: NodeListOf<HTMLElement> | HTMLDivElement[], offsetTop: number) {
+  XEUtils.arrayEach(elemList, trEl => {
+    trEl.style.transform = `translateY(${offsetTop}px)`
+  })
+  requestAnimationFrame(() => {
+    XEUtils.arrayEach(elemList, trEl => {
+      addClass(trEl, rowMoveCls)
+      trEl.style.transform = ''
+    })
+  })
+}
+
+export function clearRowAnimate (elem: HTMLElement | undefined, clss: string[]) {
+  setTimeout(() => {
+    if (elem) {
+      XEUtils.arrayEach(elem.querySelectorAll(clss.map(cls => `${cls}.${rowMoveCls}`).join(',')), elem => removeClass(elem, rowMoveCls))
+    }
+  }, 500)
+}
+
+/**
+ * 左右拖拽
+ */
+export function moveColAnimateToLr (elemList: NodeListOf<HTMLElement> | HTMLDivElement[], offsetLeft: number) {
+  XEUtils.arrayEach(elemList, trEl => {
+    trEl.style.transform = `translateX(${offsetLeft}px)`
+  })
+  requestAnimationFrame(() => {
+    XEUtils.arrayEach(elemList, trEl => {
+      addClass(trEl, colMoveClass)
+      trEl.style.transform = ''
+    })
+  })
+}
+
+export function clearColAnimate (elem: HTMLElement | undefined, clss: string[]) {
+  setTimeout(() => {
+    if (elem) {
+      XEUtils.arrayEach(elem.querySelectorAll(clss.map(cls => `${cls}.${rowMoveCls}`).join(',')), elem => removeClass(elem, colMoveClass))
+    }
+  }, 500)
+}

package/styles/components/select.scss

@@ -56,6 +56,7 @@
 
 .vxe-select--panel-search {
   display: block;
+  flex-shrink: 0;
   padding: var(--vxe-ui-layout-padding-default);
   .vxe-select-search--input {
     width: 100%;
@@ -63,13 +64,23 @@
 }
 
 .vxe-select--panel-wrapper {
+  display: flex;
+  flex-direction: column;
   position: relative;
+  max-height: 18em;
   border-radius: var(--vxe-ui-base-border-radius);
   border: 1px solid var(--vxe-ui-base-popup-border-color);
   box-shadow: var(--vxe-ui-base-popup-box-shadow);
   background-color: var(--vxe-ui-layout-background-color);
 }
 
+.vxe-select--panel-body {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  overflow: hidden;
+}
+
 .vxe-select--header-button {
   display: flex;
   flex-direction: row;
@@ -99,10 +110,12 @@
 
 .vxe-select--panel-header,
 .vxe-select--panel-footer {
+  flex-shrink: 0;
   padding: 4px 0;
 }
 
 .vxe-select-option--wrapper {
+  flex-grow: 1;
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;
@@ -118,9 +131,6 @@
   border: 0;
   outline: 0;
 }
-.vxe-select-option--wrapper {
-  max-height: 18em;
-}
 .vxe-select-option {
   position: relative;
   padding: 0 0.6em;

package/styles/components/tree.scss

@@ -72,6 +72,122 @@
   }
 }
 
+.vxe-tree--drag-handle {
+  flex-shrink: 0;
+  padding-right: 0.2em;
+  &:not(.is--disabled) {
+    cursor: grab;
+    &:active {
+      cursor: grabbing;
+    }
+    &:hover {
+      color: var(--vxe-ui-font-primary-color);
+    }
+  }
+  &.is--disabled {
+    color: var(--vxe-ui-input-disabled-color);
+    cursor: not-allowed;
+  }
+}
+
+.vxe-tree--node-wrapper {
+  &.row--drag-move {
+    transition: transform 0.5s ease;
+  }
+  &.node--drag-origin {
+    opacity: 0.3;
+  }
+}
+
+/*拖拽行与列*/
+.vxe-tree--drag-node-line {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 11;
+  pointer-events: none;
+}
+.vxe-tree--drag-node-line {
+  width: 100%;
+  height: 1px;
+  border: 2px solid transparent;
+  &[drag-pos="top"] {
+    border-top-color: var(--vxe-ui-font-primary-color);
+  }
+  &[drag-pos="bottom"] {
+    border-bottom-color: var(--vxe-ui-font-primary-color);
+  }
+  &[drag-to-child="y"] {
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+    border-left-color: var(--vxe-ui-status-success-color);
+  }
+  &.is--guides {
+    background-color: var(--vxe-ui-tree-drag-over-background-color);
+  }
+}
+.vxe-body--row-list-move {
+  transition-property: transform;
+  transition-duration: 0.35s;
+}
+.vxe-tree--drag-sort-tip {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0.6em 1.4em;
+  max-width: 50%;
+  min-width: 100px;
+  border-radius: var(--vxe-ui-border-radius);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+  pointer-events: none;
+  background-color: var(--vxe-ui-layout-background-color);
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+  z-index: 33;
+  &[drag-status="normal"] {
+    .vxe-tree--drag-sort-tip-normal-status {
+      display: block;
+    }
+  }
+  &[drag-status="sub"] {
+    .vxe-tree--drag-sort-tip-sub-status {
+      display: block;
+    }
+  }
+  &[drag-status="disabled"] {
+    .vxe-tree--drag-sort-tip-disabled-status {
+      display: block;
+    }
+  }
+}
+.vxe-tree--drag-sort-tip-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.vxe-tree--drag-sort-tip-status {
+  padding-right: 0.4em;
+}
+.vxe-tree--drag-sort-tip-disabled-status {
+  display: none;
+  flex-shrink: 0;
+  color: var(--vxe-ui-status-error-color)
+}
+.vxe-tree--drag-sort-tip-normal-status,
+.vxe-tree--drag-sort-tip-sub-status {
+  display: none;
+}
+.vxe-tree--drag-sort-tip-content {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .vxe-tree--node-line-wrapper {
   position: relative;
   display: block;

package/styles/theme/dark.scss

@@ -107,6 +107,7 @@
   --vxe-ui-tree-node-hover-checkbox-checked-background-color: #6e5326;
   --vxe-ui-tree-node-current-background-color: #18222c;
   --vxe-ui-tree-node-hover-current-background-color: #262727;
+  --vxe-ui-tree-drag-over-background-color:rgba(48, 48, 0, 0.3);
 
   /*rate*/
   --vxe-ui-rate-item-color: #bd9537;

package/styles/theme/light.scss

@@ -106,6 +106,7 @@
   --vxe-ui-tree-node-hover-checkbox-checked-background-color: #{light_variable.$vxe-ui-tree-node-hover-checkbox-checked-background-color};
   --vxe-ui-tree-node-current-background-color: #{light_variable.$vxe-ui-tree-node-current-background-color};
   --vxe-ui-tree-node-hover-current-background-color: #{light_variable.$vxe-ui-tree-node-hover-current-background-color};
+  --vxe-ui-tree-drag-over-background-color: #{light_variable.$vxe-ui-tree-drag-over-background-color};
 
   /*rate*/
   --vxe-ui-rate-item-color: #{light_variable.$vxe-ui-rate-item-color};

package/styles/variable.scss

@@ -99,6 +99,7 @@ $vxe-ui-tree-node-checkbox-checked-background-color: #fff3e0 !default;
 $vxe-ui-tree-node-hover-checkbox-checked-background-color: #ffebbc !default;
 $vxe-ui-tree-node-current-background-color: #e6f7ff !default;
 $vxe-ui-tree-node-hover-current-background-color: #d7effb !default;
+$vxe-ui-tree-drag-over-background-color: rgba(255,255,200,0.3) !default;
 
 /*rate*/
 $vxe-ui-rate-item-color: #f7ba2a !default;

package/types/components/select.d.ts

@@ -104,6 +104,11 @@ export namespace VxeSelectPropTypes {
   export type OptionId = string
   export type OptionKey = boolean
   export type Transfer = boolean
+  export interface PopupConfig {
+    width?: number | string
+    height?: number | string
+    className?: string | ((params: { $select: VxeSelectConstructor }) => string)
+  }
 
   export interface VirtualYConfig {
     /**
@@ -165,6 +170,7 @@ export interface VxeSelectProps {
   remoteConfig?: VxeSelectPropTypes.RemoteConfig
   max?: VxeSelectPropTypes.Max
   transfer?: VxeSelectPropTypes.Transfer
+  popupConfig?: VxeSelectPropTypes.PopupConfig
   virtualYConfig?: VxeSelectPropTypes.VirtualYConfig
 
   /**

package/types/components/tree.d.ts

@@ -119,6 +119,83 @@ export namespace VxeTreePropTypes {
   export type IconLoaded = string
   export type Size = VxeComponentSizeType
 
+  export type Drag = boolean
+  export interface DragConfig<D = any> {
+    /**
+     * 自定义图标
+     */
+    icon?: string
+    /**
+     * 是否显示拖拽按钮图标
+     */
+    showIcon?: boolean
+    /**
+     * 显示拖拽提示，拖拽过程中显示信息
+     */
+    showDragTip?: boolean
+    /**
+     * 触发拖拽方式
+     */
+    trigger?: 'default' | 'node' | '' | null
+    /**
+     * 是否允许同级行拖拽，用于树结构，启用后允许同层级之间进行拖拽
+     */
+    isPeerDrag?: boolean
+    /**
+     * 是否允许同级/跨层行拖拽，用于树结构，启用后允许跨层级拖拽（除了上级拖到子级）
+     */
+    isCrossDrag?: boolean
+    /**
+     * 需要 isCrossDrag，是否允许拖拽成目标行的子级
+     */
+    isToChildDrag?: boolean
+    /**
+     * 需要 isCrossDrag，是否允许将自己拖拽到子级行中
+     */
+    isSelfToChildDrag?: boolean
+    /**
+     * 是否显示拖拽辅助状态显示
+     */
+    showGuidesStatus?: boolean
+    /**
+     * 是否显示拖拽动画，启用后由数据量的大小来影响渲染性能
+     */
+    animation?: boolean
+    /**
+     * 是否禁用拖拽按钮
+     */
+    disabledMethod?(params: {
+      $tree: VxeTreeConstructor
+      node: D
+    }): boolean
+    /**
+     * 是否显示拖拽按钮
+     */
+    visibleMethod?(params: {
+      $tree: VxeTreeConstructor
+      node: D
+    }): boolean
+    /**
+     * 自定义提示内容
+     */
+    tooltipMethod?(params: {
+      $tree: VxeTreeConstructor
+      node: D
+    }): string | number | null
+    /**
+     * 拖拽开始时是否允许行拖拽调整顺序的方法，该方法的返回值用来决定是否允许被拖拽
+     */
+    dragStartMethod?(params: VxeTreeDefines.NodeDragstartEventParams<D>): boolean
+    /**
+     * 拖拽结束时是否允许行拖拽调整顺序的方法，该方法的返回值用来决定是否允许被拖拽调整顺序
+     */
+    dragEndMethod?(params: Omit<VxeTreeDefines.NodeDragendEventParams<D>, '_index'>): Promise<boolean> | boolean
+    /**
+     * 用于 isToChildDrag，在拖拽完成后，该方法的返回值用于决定是否拖拽成子级
+     */
+    dragToChildMethod?(params: Omit<VxeTreeDefines.NodeDragToChildMethod<D>, '_index'>): boolean
+  }
+
   /**
    * 根据指定值来筛选数据
    */
@@ -221,6 +298,8 @@ export interface VxeTreeProps<D = any> {
      * 该方法用于异步加载子节点
      */
   loadMethod?: VxeTreePropTypes.LoadMethod<D>
+  drag?: VxeTreePropTypes.Drag
+  dragConfig?: VxeTreePropTypes.DragConfig
   showIcon?: VxeTreePropTypes.ShowIcon
   iconOpen?: VxeTreePropTypes.IconOpen
   iconClose?: VxeTreePropTypes.IconClose
@@ -230,11 +309,14 @@ export interface VxeTreeProps<D = any> {
 }
 
 export interface TreePrivateComputed<D = any> {
+  computeKeyField: ComputedRef<string>
+  computeParentField: ComputedRef<string>
   computeChildrenField: ComputedRef<string>
   computeMapChildrenField: ComputedRef<string>
   computeRadioOpts: ComputedRef<VxeTreePropTypes.RadioConfig<D>>
   computeCheckboxOpts: ComputedRef<VxeTreePropTypes.CheckboxConfig<D>>
   computeNodeOpts: ComputedRef<VxeTreePropTypes.NodeConfig<D>>
+  computeDragOpts: ComputedRef<VxeTreePropTypes.DragConfig<D>>
 }
 export interface VxeTreePrivateComputed extends TreePrivateComputed { }
 
@@ -251,6 +333,9 @@ export interface TreeReactData {
   treeList: any[]
   updateExpandedFlag: number
   updateCheckboxFlag: number
+
+  dragNode: any
+  dragTipText: string
 }
 
 export interface TreeInternalData {
@@ -276,6 +361,10 @@ export interface TreeInternalData {
   }
   lastScrollTime: number
   hpTimeout?: undefined | number
+
+  prevDragNode?: any
+  prevDragToChild?: boolean
+  prevDragPos?: 'top' | 'bottom' | ''
 }
 
 export interface TreeMethods<D = any> {
@@ -446,6 +535,10 @@ export interface TreeMethods<D = any> {
    * 重新计算列表
    */
   recalculate(): Promise<void>
+  /**
+   * 获取数据的全量数据
+   */
+  getFullData(): D[]
 
   /**
    * 如果有滚动条，则滚动到对应的位置
@@ -470,7 +563,36 @@ export interface TreeMethods<D = any> {
 }
 export interface VxeTreeMethods<D = any> extends TreeMethods<D> { }
 
-export interface TreePrivateMethods { }
+export interface TreePrivateMethods {
+  /**
+   * @private
+   */
+  handleData(force?: boolean): void
+  /**
+   * @private
+   */
+  cacheNodeMap(): void
+  /**
+   * @private
+   */
+  updateAfterDataIndex(): void
+  /**
+   * @private
+   */
+  updateCheckboxStatus(): void
+  /**
+   * @private
+   */
+  updateYSpace(): void
+  /**
+   * @private
+   */
+  findNodeIndexOf(list: any[], row: any): number
+  /**
+   * @private
+   */
+  eqNode(node1: any, node2: any): boolean
+}
 export interface VxeTreePrivateMethods extends TreePrivateMethods { }
 
 export type VxeTreeEmits = [
@@ -484,7 +606,10 @@ export type VxeTreeEmits = [
   'checkbox-change',
   'load-success',
   'load-error',
-  'scroll'
+  'scroll',
+  'node-dragstart',
+  'node-dragover',
+  'node-dragend'
 ]
 
 export namespace VxeTreeDefines {
@@ -495,6 +620,8 @@ export namespace VxeTreeDefines {
   export interface NodeCacheItem {
     item: any
     index: number
+    $index: number
+    _index: number
     items: any[]
     nodes: any[]
     parent: any
@@ -504,6 +631,33 @@ export namespace VxeTreeDefines {
     treeLoaded: boolean
   }
 
+  export interface NodeDragstartEventParams<D = any> {
+    node: D
+  }
+
+  export interface NodeDragoverEventParams<D = any> {
+    oldNode: D
+    targetNode: D
+    dragNode: D
+    dragPos: 'top' | 'bottom'
+    offsetIndex: 0 | 1
+  }
+
+  export interface NodeDragendEventParams<D = any> {
+    newNode: D
+    oldNode: D
+    dragNode: D
+    dragPos: 'top' | 'bottom'
+    dragToChild: boolean
+    offsetIndex: 0 | 1
+    _index: {
+      newIndex: number
+      oldIndex: number
+    }
+  }
+
+  export interface NodeDragToChildMethod<D = any> extends NodeDragendEventParams<D> {}
+
   export interface NodeClickParams<D = any> {
     node: D
   }
@@ -536,14 +690,17 @@ export namespace VxeTreeDefines {
   }
 }
 
-export type VxeTreeEventProps = {
-  onNodeClick?: VxeTreeEvents.NodeClick
-  onNodeDblclick?: VxeTreeEvents.NodeDblclick
-  onCurrentChange?: VxeTreeEvents.CurrentChange
-  onRadioChange?: VxeTreeEvents.RadioChange
-  onCheckboxChange?: VxeTreeEvents.CheckboxChange
-  onLoadSuccess?: VxeTreeEvents.LoadSuccess
-  onLoadError?: VxeTreeEvents.LoadError
+export type VxeTreeEventProps<D = any> = {
+  onNodeClick?: VxeTreeEvents.NodeClick<D>
+  onNodeDblclick?: VxeTreeEvents.NodeDblclick<D>
+  onCurrentChange?: VxeTreeEvents.CurrentChange<D>
+  onRadioChange?: VxeTreeEvents.RadioChange<D>
+  onCheckboxChange?: VxeTreeEvents.CheckboxChange<D>
+  onLoadSuccess?: VxeTreeEvents.LoadSuccess<D>
+  onLoadError?: VxeTreeEvents.LoadError<D>
+  onNodeDragstart?: VxeTreeEvents.NodeDragstart<D>
+  onNodeDragover?: VxeTreeEvents.NodeDragover<D>
+  onNodeDragend?: VxeTreeEvents.NodeDragend<D>
 }
 
 export interface VxeTreeListeners<D = any> {
@@ -554,6 +711,9 @@ export interface VxeTreeListeners<D = any> {
   checkboxChange?: VxeTreeEvents.CheckboxChange<D>
   loadSuccess?: VxeTreeEvents.LoadSuccess<D>
   loadError?: VxeTreeEvents.LoadError<D>
+  nodeDragstart?: VxeTreeEvents.NodeDragstart<D>
+  nodeDragover?: VxeTreeEvents.NodeDragover<D>
+  nodeDragend?: VxeTreeEvents.NodeDragend<D>
 }
 
 export namespace VxeTreeEvents {
@@ -564,6 +724,9 @@ export namespace VxeTreeEvents {
   export type CheckboxChange<D = any> = (params: VxeTreeDefines.CheckboxChangeEventParams<D>) => void
   export type LoadSuccess<D = any> = (params: VxeTreeDefines.LoadSuccessEventParams<D>) => void
   export type LoadError<D = any> = (params: VxeTreeDefines.LoadErrorEventParams<D>) => void
+  export type NodeDragstart<D = any> = (params: VxeTreeDefines.NodeDragstartEventParams<D>) => void
+  export type NodeDragover<D = any> = (params: VxeTreeDefines.NodeDragoverEventParams<D>) => void
+  export type NodeDragend<D = any> = (params: VxeTreeDefines.NodeDragendEventParams<D>) => void
 }
 
 export namespace VxeTreeSlotTypes {

package/types/ui/global-icon.d.ts

@@ -206,6 +206,10 @@ declare module '@vxe-ui/core' {
     TREE_NODE_OPEN?: string
     TREE_NODE_CLOSE?: string
     TREE_NODE_LOADED?: string
+    TREE_DRAG?: string
+    TREE_DRAG_STATUS_NODE?: string
+    TREE_DRAG_STATUS_SUB_NODE?: string
+    TREE_DRAG_DISABLED?: string
 
     // tree-select
     TREE_SELECT_LOADED?: string