vxe-pc-ui 4.5.2 → 4.5.4

package/packages/split/src/split.ts

@@ -1,5 +1,5 @@
-import { defineComponent, PropType, ref, h, reactive, provide, VNode, computed, watch, nextTick, onMounted, onActivated } from 'vue'
-import { getConfig, createEvent, renderEmptyElement } from '../../ui'
+import { defineComponent, PropType, ref, h, reactive, provide, VNode, computed, watch, nextTick, onMounted, onUnmounted, onActivated } from 'vue'
+import { getConfig, getIcon, createEvent, globalEvents, renderEmptyElement } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import { toCssUnit, isScale, addClass, removeClass } from '../../ui/src/dom'
 import { getGlobalDefaultConfig } from '../../ui/src/utils'
@@ -24,9 +24,16 @@ export default defineComponent({
       type: Boolean as PropType<VxeSplitPropTypes.Padding>,
       default: () => getConfig().split.padding
     },
-    itemConfig: Object as PropType<VxeSplitPropTypes.ItemConfig>
+    itemConfig: Object as PropType<VxeSplitPropTypes.ItemConfig>,
+    barConfig: Object as PropType<VxeSplitPropTypes.BarConfig>,
+    actionConfig: Object as PropType<VxeSplitPropTypes.ActionConfig>
   },
   emits: [
+    'action-dblclick',
+    'action-click',
+    'resize-start',
+    'resize-drag',
+    'resize-end'
   ] as VxeSplitEmits,
   setup (props, context) {
     const { emit, slots } = context
@@ -46,8 +53,37 @@ export default defineComponent({
       return Object.assign({}, getConfig().split.itemConfig, props.itemConfig)
     })
 
+    const computeBarOpts = computed(() => {
+      return Object.assign({}, getConfig().split.barConfig, props.barConfig)
+    })
+
+    const computeActionOpts = computed(() => {
+      return Object.assign({}, getConfig().split.actionConfig, props.actionConfig)
+    })
+
+    const computeIsFoldNext = computed(() => {
+      const actionOpts = computeActionOpts.value
+      return actionOpts.direction === 'next'
+    })
+
+    const computeBarStyle = computed(() => {
+      const barOpts = computeBarOpts.value
+      const { width, height } = barOpts
+      const stys: Record<string, string | number> = {}
+      if (height) {
+        stys.height = toCssUnit(height)
+      }
+      if (width) {
+        stys.width = toCssUnit(width)
+      }
+      return stys
+    })
+
     const computeMaps: VxeSplitPrivateComputed = {
-      computeItemOpts
+      computeItemOpts,
+      computeBarOpts,
+      computeActionOpts,
+      computeIsFoldNext
     }
 
     const refMaps: SplitPrivateRef = {
@@ -81,6 +117,49 @@ export default defineComponent({
       return []
     }
 
+    const getDefaultActionIcon = (item: VxeSplitDefines.ChunkConfig) => {
+      const { vertical } = props
+      const { showAction, isExpand } = item
+      const isFoldNext = computeIsFoldNext.value
+      const topIcon = 'SPLIT_TOP_ACTION'
+      const bottomIcon = 'SPLIT_BOTTOM_ACTION'
+      const leftIcon = 'SPLIT_LEFT_ACTION'
+      const rightIcon = 'SPLIT_RIGHT_ACTION'
+      if (showAction) {
+        let iconName: 'SPLIT_TOP_ACTION' | 'SPLIT_BOTTOM_ACTION' | 'SPLIT_LEFT_ACTION' | 'SPLIT_RIGHT_ACTION' | '' = ''
+        if (isFoldNext) {
+          if (vertical) {
+            iconName = isExpand ? bottomIcon : topIcon
+          } else {
+            iconName = isExpand ? rightIcon : leftIcon
+          }
+        } else {
+          if (vertical) {
+            iconName = isExpand ? topIcon : bottomIcon
+          } else {
+            iconName = isExpand ? leftIcon : rightIcon
+          }
+        }
+        if (iconName) {
+          return getIcon()[iconName]
+        }
+      }
+      return ''
+    }
+
+    const reset = () => {
+      const { staticItems } = reactData
+      staticItems.forEach(item => {
+        item.isExpand = true
+        item.isVisible = true
+        item.foldHeight = 0
+        item.foldWidth = 0
+        item.resizeHeight = 0
+        item.resizeWidth = 0
+      })
+      return nextTick()
+    }
+
     const recalculate = () => {
       return nextTick().then(() => {
         const { vertical } = props
@@ -152,82 +231,143 @@ export default defineComponent({
       evnt.preventDefault()
       const { vertical } = props
       const { staticItems } = reactData
-      const handleEl = evnt.currentTarget as HTMLDivElement
+      const barEl = evnt.currentTarget as HTMLDivElement
+      const handleEl = barEl.parentElement as HTMLDivElement
       const el = refElem.value
       if (!el) {
         return
       }
-      const itemId = handleEl.getAttribute('xid')
+      const itemId = handleEl.getAttribute('itemid')
       const itemIndex = XEUtils.findIndexOf(staticItems, item => item.id === itemId)
       const item = staticItems[itemIndex]
       if (!item) {
         return
       }
+      if (!item.isExpand) {
+        return
+      }
+      const isFoldNext = computeIsFoldNext.value
       const itemOpts = computeItemOpts.value
       const allMinWidth = XEUtils.toNumber(itemOpts.minWidth)
       const allMinHeight = XEUtils.toNumber(itemOpts.minHeight)
-      const prevItem = staticItems[itemIndex - 1]
-      const prevItemEl = prevItem ? el.querySelector<HTMLDivElement>(`.vxe-split-item[xid="${prevItem.id}"]`) : null
-      const currItemEl = item ? el.querySelector<HTMLDivElement>(`.vxe-split-item[xid="${item.id}"]`) : null
-      const prevWidth = prevItemEl ? prevItemEl.clientWidth : 0
+      const targetItem = staticItems[itemIndex + (isFoldNext ? 1 : -1)]
+      const targetItemEl = targetItem ? el.querySelector<HTMLDivElement>(`.vxe-split-item[itemid="${targetItem.id}"]`) : null
+      const currItemEl = item ? el.querySelector<HTMLDivElement>(`.vxe-split-item[itemid="${item.id}"]`) : null
+      const targetWidth = targetItemEl ? targetItemEl.clientWidth : 0
       const currWidth = currItemEl ? currItemEl.clientWidth : 0
-      const prevHeight = prevItemEl ? prevItemEl.clientHeight : 0
+      const targetHeight = targetItemEl ? targetItemEl.clientHeight : 0
       const currHeight = currItemEl ? currItemEl.clientHeight : 0
-      const prevMinWidth = XEUtils.toNumber(prevItem ? getGlobalDefaultConfig(prevItem.minWidth, allMinWidth) : allMinWidth)
+      const targetMinWidth = XEUtils.toNumber(targetItem ? getGlobalDefaultConfig(targetItem.minWidth, allMinWidth) : allMinWidth)
       const currMinWidth = XEUtils.toNumber(getGlobalDefaultConfig(item.minWidth, allMinWidth))
-      const prevMinHeight = XEUtils.toNumber(prevItem ? getGlobalDefaultConfig(prevItem.minHeight, allMinHeight) : allMinHeight)
+      const targetMinHeight = XEUtils.toNumber(targetItem ? getGlobalDefaultConfig(targetItem.minHeight, allMinHeight) : allMinHeight)
       const currMinHeight = XEUtils.toNumber(getGlobalDefaultConfig(item.minHeight, allMinHeight))
       const disX = evnt.clientX
       const disY = evnt.clientY
       addClass(el, 'is--drag')
-      document.onmousemove = evnt => {
+      document.onmousemove = (evnt) => {
         evnt.preventDefault()
         if (vertical) {
-          const offsetTop = evnt.clientY - disY
+          const offsetTop = isFoldNext ? (disY - evnt.clientY) : (evnt.clientY - disY)
           if (offsetTop > 0) {
-            if (prevItem) {
+            if (targetItem) {
               if (currHeight - offsetTop >= currMinHeight) {
-                prevItem.renderHeight = prevHeight + offsetTop
-                item.renderHeight = currHeight - offsetTop
+                const reHeight = currHeight - offsetTop
+                targetItem.resizeHeight = targetHeight + offsetTop
+                item.resizeHeight = reHeight
+                dispatchEvent('resize-drag', { item, name: item.name, offsetHeight: offsetTop, resizeHeight: reHeight, offsetWidth: 0, resizeWidth: 0 }, evnt)
               }
             }
           } else {
-            if (prevItem) {
-              if (prevHeight + offsetTop >= prevMinHeight) {
-                prevItem.renderHeight = prevHeight + offsetTop
-                item.renderHeight = currHeight - offsetTop
+            if (targetItem) {
+              if (targetHeight + offsetTop >= targetMinHeight) {
+                const reHeight = currHeight - offsetTop
+                targetItem.resizeHeight = targetHeight + offsetTop
+                item.resizeHeight = reHeight
+                dispatchEvent('resize-drag', { item, name: item.name, offsetHeight: offsetTop, resizeHeight: reHeight, offsetWidth: 0, resizeWidth: 0 }, evnt)
               }
             }
           }
         } else {
-          const offsetLeft = evnt.clientX - disX
+          const offsetLeft = isFoldNext ? (disX - evnt.clientX) : (evnt.clientX - disX)
           if (offsetLeft > 0) {
-            if (prevItem) {
+            if (targetItem) {
               if (currWidth - offsetLeft >= currMinWidth) {
-                prevItem.renderWidth = prevWidth + offsetLeft
-                item.renderWidth = currWidth - offsetLeft
+                const reWidth = currWidth - offsetLeft
+                targetItem.resizeWidth = targetWidth + offsetLeft
+                item.resizeWidth = reWidth
+                dispatchEvent('resize-drag', { item, name: item.name, offsetHeight: 0, resizeHeight: 0, offsetWidth: offsetLeft, resizeWidth: reWidth }, evnt)
               }
             }
           } else {
-            if (prevItem) {
-              if (prevWidth + offsetLeft >= prevMinWidth) {
-                prevItem.renderWidth = prevWidth + offsetLeft
-                item.renderWidth = currWidth - offsetLeft
+            if (targetItem) {
+              if (targetWidth + offsetLeft >= targetMinWidth) {
+                const reWidth = currWidth - offsetLeft
+                targetItem.resizeWidth = targetWidth + offsetLeft
+                item.resizeWidth = reWidth
+                dispatchEvent('resize-drag', { item, name: item.name, offsetHeight: 0, resizeHeight: 0, offsetWidth: offsetLeft, resizeWidth: reWidth }, evnt)
               }
             }
           }
         }
       }
-      document.onmouseup = () => {
+      document.onmouseup = (evnt: MouseEvent) => {
         document.onmousemove = null
         document.onmouseup = null
         removeClass(el, 'is--drag')
+        dispatchEvent('resize-end', { item, name: item.name, resizeHeight: item.resizeHeight, resizeWidth: item.resizeWidth }, evnt)
+        recalculate()
       }
+      dispatchEvent('resize-start', { item, name: item.name }, evnt)
+    }
+
+    const handleItemActionEvent = (evnt: MouseEvent) => {
+      const el = refElem.value
+      if (!el) {
+        return
+      }
+      const { vertical } = props
+      const { staticItems } = reactData
+      const isFoldNext = computeIsFoldNext.value
+      const btnEl = evnt.currentTarget as HTMLDivElement
+      const handleEl = btnEl.parentElement as HTMLDivElement
+      const itemId = handleEl.getAttribute('itemid')
+      const itemIndex = XEUtils.findIndexOf(staticItems, item => item.id === itemId)
+      const item = staticItems[itemIndex]
+      const targetItem = staticItems[itemIndex + (isFoldNext ? 1 : -1)]
+      if (item) {
+        const { showAction, isExpand } = item
+        if (showAction) {
+          if (vertical) {
+            if (targetItem) {
+              targetItem.isVisible = !isExpand
+              targetItem.foldHeight = 0
+              item.isExpand = !isExpand
+              item.isVisible = true
+              item.foldHeight = isExpand ? (targetItem.resizeHeight || targetItem.renderHeight) + (item.resizeHeight || item.renderHeight) : 0
+            }
+          } else {
+            if (targetItem) {
+              targetItem.isVisible = !isExpand
+              targetItem.foldWidth = 0
+              item.isExpand = !isExpand
+              item.isVisible = true
+              item.foldWidth = isExpand ? (targetItem.resizeWidth || targetItem.renderWidth) + (item.resizeWidth || item.renderWidth) : 0
+            }
+          }
+          dispatchEvent(evnt.type === 'dblclick' ? 'action-dblclick' : 'action-click', { item, name: item.name, targetItem, targetName: targetItem ? targetItem.name : '', expanded: item.isExpand }, evnt)
+          recalculate()
+        }
+      }
+    }
+
+    const handleGlobalResizeEvent = () => {
+      recalculate()
     }
 
     const splitMethods: SplitMethods = {
       dispatchEvent,
-      recalculate
+      recalculate,
+      reset
     }
 
     const splitPrivateMethods: SplitPrivateMethods = {
@@ -235,51 +375,88 @@ export default defineComponent({
 
     Object.assign($xeSplit, splitMethods, splitPrivateMethods)
 
+    const renderHandleBar = (item: VxeSplitDefines.ChunkConfig) => {
+      const barStyle = computeBarStyle.value
+      const actionOpts = computeActionOpts.value
+      const isFoldNext = computeIsFoldNext.value
+      const { id, isExpand, showAction } = item
+
+      const btnOns: {
+        onClick?: (evnt: MouseEvent) => void
+        onDblclick?: (evnt: MouseEvent) => void
+      } = {}
+      if (actionOpts.trigger === 'dblclick') {
+        btnOns.onDblclick = handleItemActionEvent
+      } else {
+        btnOns.onClick = handleItemActionEvent
+      }
+      return h('div', {
+        itemid: id,
+        class: ['vxe-split-item-handle', isFoldNext ? 'to--next' : 'to--prev']
+      }, [
+        h('div', {
+          class: 'vxe-split-item-handle-bar',
+          style: barStyle,
+          onMousedown: dragEvent
+        }),
+        showAction
+          ? h('span', {
+            class: 'vxe-split-item-action-btn',
+            ...btnOns
+          }, [
+            h('i', {
+              class: (isExpand ? actionOpts.openIcon : actionOpts.closeIcon) || getDefaultActionIcon(item)
+            })
+          ])
+          : renderEmptyElement($xeSplit)
+      ])
+    }
+
     const renderItems = () => {
       const { border, padding, vertical } = props
       const { staticItems } = reactData
+      const isFoldNext = computeIsFoldNext.value
       const itemVNs: VNode[] = []
       staticItems.forEach((item, index) => {
-        const { id, slots, renderHeight, renderWidth } = item
+        const { id, slots, renderHeight, resizeHeight, foldHeight, renderWidth, resizeWidth, foldWidth, isVisible, isExpand } = item
         const defaultSlot = slots ? slots.default : null
         const stys: Record<string, string | number> = {}
+        const itemWidth = isVisible ? (foldWidth || resizeWidth || renderWidth) : 0
+        const itemHeight = isVisible ? (foldHeight || resizeHeight || renderHeight) : 0
         if (vertical) {
-          if (renderHeight) {
-            stys.height = toCssUnit(renderHeight)
+          if (itemHeight) {
+            stys.height = toCssUnit(itemHeight)
           }
         } else {
-          if (renderWidth) {
-            stys.width = toCssUnit(renderWidth)
+          if (itemWidth) {
+            stys.width = toCssUnit(itemWidth)
           }
         }
         itemVNs.push(
           h('div', {
-            xid: id,
+            itemid: id,
             class: ['vxe-split-item', vertical ? 'is--vertical' : 'is--horizontal', {
               'is--padding': padding,
               'is--border': border,
-              'is--height': renderHeight,
-              'is--width': renderWidth,
-              'is--fill': !renderHeight && !renderWidth,
-              'is--handle': index > 0
+              'is--height': itemHeight,
+              'is--width': itemWidth,
+              'is--fill': isVisible && !itemHeight && !itemWidth,
+              'is--handle': index > 0,
+              'is--expand': isExpand,
+              'is--hidden': !isVisible
             }],
             style: stys
           }, [
-            index
-              ? h('div', {
-                xid: id,
-                class: 'vxe-split-item-handle',
-                onMousedown: dragEvent
-              })
-              : renderEmptyElement($xeSplit),
+            index && !isFoldNext ? renderHandleBar(item) : renderEmptyElement($xeSplit),
             h('div', {
-              xid: id,
+              itemid: id,
               class: 'vxe-split-item--wrapper'
             }, [
               h('div', {
                 class: 'vxe-split-item--inner'
               }, defaultSlot ? callSlot(defaultSlot, { }) : [])
-            ])
+            ]),
+            isFoldNext && index < staticItems.length - 1 ? renderHandleBar(item) : renderEmptyElement($xeSplit)
           ])
         )
       })
@@ -315,7 +492,15 @@ export default defineComponent({
     })
 
     onMounted(() => {
-      recalculate()
+      nextTick(() => {
+        recalculate()
+      })
+
+      globalEvents.on($xeSplit, 'resize', handleGlobalResizeEvent)
+    })
+
+    onUnmounted(() => {
+      globalEvents.off($xeSplit, 'resize')
     })
 
     onActivated(() => {

package/packages/ui/index.ts

@@ -562,7 +562,13 @@ setIcon({
 
   // color-picker
   COLOR_COPY: iconPrefix + 'copy',
-  EYE_DROPPER: iconPrefix + 'dropper'
+  EYE_DROPPER: iconPrefix + 'dropper',
+
+  // split
+  SPLIT_TOP_ACTION: iconPrefix + 'arrow-up',
+  SPLIT_BOTTOM_ACTION: iconPrefix + 'arrow-down',
+  SPLIT_LEFT_ACTION: iconPrefix + 'arrow-left',
+  SPLIT_RIGHT_ACTION: iconPrefix + 'arrow-right'
 })
 
 export * from '@vxe-ui/core'

package/packages/ui/src/dom.ts

@@ -1,7 +1,5 @@
 import XEUtils from 'xe-utils'
 
-export const browse = XEUtils.browse()
-
 let tpImgEl: HTMLImageElement | undefined
 
 export function initTpImg () {

package/styles/components/split.scss

@@ -1,4 +1,5 @@
 @use "sass:list";
+@use '../helpers/baseMixin.scss';
 
 .vxe-split {
   &.is--vertical {
@@ -41,15 +42,9 @@
 }
 
 .vxe-split-item-handle {
+  position: relative;
   flex-shrink: 0;
-  background-color: var(--vxe-split-handle-bar-background-color);
   user-select: none;
-  &:hover {
-    background-color: var(--vxe-ui-font-primary-lighten-color);
-  }
-  &:active {
-    background-color: var(--vxe-ui-font-primary-darken-color);
-  }
 }
 
 .vxe-split-item--wrapper {
@@ -57,20 +52,35 @@
   word-break: break-word;
   overflow: hidden;
   flex-grow: 1;
-  & > .vxe-split {
-    height: 100%;
-  }
 }
 .vxe-split-item--inner {
   height: 100%;
   width: 100%;
   overflow: auto;
+  & > .vxe-split {
+    height: 100%;
+  }
+}
+.vxe-split-item-handle-bar {
+  background-color: var(--vxe-split-handle-bar-background-color);
+}
+.vxe-split-item-action-btn {
+  display: block;
+  position: absolute;
+  z-index: 2;
+  cursor: pointer;
+  background-color: var(--vxe-ui-layout-background-color);
+  border: 1px solid var(--vxe-ui-input-border-color);
+  @include baseMixin.createAnimationTransition(transform, 0.1s);
 }
 
 .vxe-split-item {
   display: flex;
   position: relative;
-  overflow: auto;
+  overflow: hidden;
+  &.is--hidden {
+    width: 0;
+  }
   &.is--padding {
     & > .vxe-split-item--wrapper {
       padding: var(--vxe-ui-layout-padding-default);
@@ -89,11 +99,61 @@
       border: 1px solid var(--vxe-ui-base-popup-border-color);
     }
   }
+  &.is--expand {
+    &.is--horizontal {
+      & > .vxe-split-item-handle {
+        .vxe-split-item-handle-bar {
+          cursor: w-resize;
+        }
+      }
+    }
+    &.is--vertical {
+      & > .vxe-split-item-handle {
+        .vxe-split-item-handle-bar {
+          cursor: n-resize;
+        }
+      }
+    }
+    & > .vxe-split-item-handle {
+      & > .vxe-split-item-handle-bar {
+        background-color: var(--vxe-split-handle-bar-background-color);
+        &:hover {
+          background-color: var(--vxe-ui-font-primary-lighten-color);
+        }
+        &:active {
+          background-color: var(--vxe-ui-font-primary-darken-color);
+        }
+      }
+    }
+  }
   &.is--horizontal {
     flex-direction: row;
     & > .vxe-split-item-handle {
-      width: var(--vxe-split-handle-bar-width);
-      cursor: w-resize;
+      &.to--prev {
+        .vxe-split-item-action-btn {
+          left: 0;
+        }
+      }
+      &.to--next {
+        .vxe-split-item-action-btn {
+          right: 0;
+        }
+      }
+      .vxe-split-item-handle-bar {
+        width: var(--vxe-split-handle-bar-width);
+        height: 100%;
+      }
+      .vxe-split-item-action-btn {
+        top: 50%;
+        transform: translateY(-50%);
+        padding: 1em 0;
+        &:hover {
+          color: var(--vxe-ui-font-primary-color);
+        }
+        &:active {
+          transform: translateY(-50%) scale(0.9);
+        }
+      }
     }
     &.is--border {
       & > .vxe-split-item-handle {
@@ -104,8 +164,31 @@
   &.is--vertical {
     flex-direction: column;
     & > .vxe-split-item-handle {
-      height: var(--vxe-split-handle-bar-height);
-      cursor: n-resize;
+      &.to--prev {
+        .vxe-split-item-action-btn {
+          top: 0;
+        }
+      }
+      &.to--next {
+        .vxe-split-item-action-btn {
+          bottom: 0;
+        }
+      }
+      .vxe-split-item-handle-bar {
+        height: var(--vxe-split-handle-bar-height);
+        width: 100%;
+      }
+      .vxe-split-item-action-btn {
+        left: 50%;
+        transform: translateX(-50%);
+        padding: 0 1em;
+        &:hover {
+          color: var(--vxe-ui-font-primary-color);
+        }
+        &:active {
+          transform: translateX(-50%) scale(0.9);
+        }
+      }
     }
     &.is--border {
       & > .vxe-split-item-handle {

package/types/components/split-item.d.ts

@@ -23,17 +23,21 @@ export interface SplitItemPrivateRef {
 export interface VxeSplitItemPrivateRef extends SplitItemPrivateRef { }
 
 export namespace VxeSplitItemPropTypes {
+  export type Name = string | number
   export type Width = string | number
   export type Height = string | number
   export type MinWidth = string | number
   export type MinHeight = string | number
+  export type ShowAction = boolean
 }
 
-export type VxeSplitItemProps = {
+export interface VxeSplitItemProps {
+  name?: VxeSplitItemPropTypes.Name
   width?: VxeSplitItemPropTypes.Width
   height?: VxeSplitItemPropTypes.Height
   minWidth?: VxeSplitItemPropTypes.MinWidth
   minHeight?: VxeSplitItemPropTypes.MinHeight
+  showAction?: VxeSplitItemPropTypes.ShowAction
 
   slots?: {
     default?: string | ((params: VxeSplitItemSlotTypes.DefaultSlotParams) => VxeComponentSlotType | VxeComponentSlotType[])