vxe-pc-ui 4.4.26 → 4.5.0

package/packages/split/src/split-item.ts

@@ -0,0 +1,125 @@
+import { defineComponent, PropType, ref, h, reactive, watch, provide, inject, onMounted, onUnmounted } from 'vue'
+import { createEvent } from '../../ui'
+import { assembleSplitItem, destroySplitItem } from './util'
+import XEUtils from 'xe-utils'
+
+import type { SplitItemReactData, VxeSplitItemPropTypes, SplitItemPrivateRef, SplitItemInternalData, SplitItemMethods, VxeSplitItemPrivateComputed, SplitItemPrivateMethods, VxeSplitItemEmits, VxeSplitItemConstructor, ValueOf, VxeSplitDefines, VxeSplitItemPrivateMethods, VxeSplitConstructor, VxeSplitPrivateMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeSplitItem',
+  props: {
+    width: [Number, String] as PropType<VxeSplitItemPropTypes.Width>,
+    height: [Number, String] as PropType<VxeSplitItemPropTypes.Height>,
+    minWidth: {
+      type: [Number, String] as PropType<VxeSplitItemPropTypes.MinWidth>,
+      default: () => null
+    },
+    minHeight: {
+      type: [Number, String] as PropType<VxeSplitItemPropTypes.MinHeight>,
+      default: () => null
+    }
+  },
+  emits: [
+  ] as VxeSplitItemEmits,
+  setup (props, context) {
+    const { emit, slots } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const $xeSplit = inject<(VxeSplitConstructor & VxeSplitPrivateMethods) | null>('$xeSplit', null)
+
+    const refElem = ref<HTMLDivElement>()
+
+    const itemConfig = reactive<VxeSplitDefines.ItemConfig>({
+      id: xID,
+      width: props.width,
+      height: props.height,
+      minWidth: props.minWidth,
+      minHeight: props.minHeight,
+      renderWidth: 0,
+      renderHeight: 0,
+      slots: slots
+    })
+
+    const reactData = reactive<SplitItemReactData>({
+    })
+
+    const internalData: SplitItemInternalData = {
+    }
+
+    const computeMaps: VxeSplitItemPrivateComputed = {
+    }
+
+    const refMaps: SplitItemPrivateRef = {
+      refElem
+    }
+
+    const $xeSplitItem = {
+      xID,
+      props,
+      context,
+      reactData,
+      internalData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeSplitItemConstructor & VxeSplitItemPrivateMethods
+
+    const dispatchEvent = (type: ValueOf<VxeSplitItemEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $splitItem: $xeSplitItem }, params))
+    }
+
+    const splitItemMethods: SplitItemMethods = {
+      dispatchEvent
+    }
+
+    const splitItemPrivateMethods: SplitItemPrivateMethods = {
+    }
+
+    Object.assign($xeSplitItem, splitItemMethods, splitItemPrivateMethods)
+
+    const renderVN = () => {
+      return h('div', {
+        ref: refElem
+      })
+    }
+
+    watch(() => props.width, (val) => {
+      itemConfig.width = val
+    })
+
+    watch(() => props.height, (val) => {
+      itemConfig.height = val
+    })
+
+    watch(() => props.minWidth, (val) => {
+      itemConfig.minWidth = val
+    })
+
+    watch(() => props.minHeight, (val) => {
+      itemConfig.minHeight = val
+    })
+
+    onMounted(() => {
+      const elem = refElem.value
+      if ($xeSplit && elem) {
+        assembleSplitItem($xeSplit, elem, itemConfig)
+      }
+    })
+
+    onUnmounted(() => {
+      if ($xeSplit) {
+        destroySplitItem($xeSplit, itemConfig)
+      }
+    })
+
+    provide('$xeSplitItem', $xeSplitItem)
+
+    $xeSplitItem.renderVN = renderVN
+
+    return $xeSplitItem
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/split/src/split.ts

@@ -0,0 +1,315 @@
+import { defineComponent, PropType, ref, h, reactive, provide, VNode, watch, nextTick, onMounted, onActivated } from 'vue'
+import { getConfig, createEvent, renderEmptyElement } from '../../ui'
+import { getSlotVNs } from '../../ui/src/vn'
+import { toCssUnit, isScale, addClass, removeClass } from '../../ui/src/dom'
+import { getGlobalDefaultConfig } from '../../ui/src/utils'
+import XEUtils from 'xe-utils'
+
+import type { SplitReactData, SplitPrivateRef, VxeSplitPropTypes, SplitInternalData, SplitMethods, VxeSplitDefines, VxeSplitPrivateComputed, SplitPrivateMethods, VxeSplitEmits, VxeSplitConstructor, ValueOf, VxeSplitPrivateMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeSplit',
+  props: {
+    resize: {
+      type: Boolean as PropType<VxeSplitPropTypes.Resize>,
+      default: null
+    },
+    vertical: {
+      type: Boolean as PropType<VxeSplitPropTypes.Vertical>,
+      default: () => getConfig().split.vertical
+    },
+    border: {
+      type: Boolean as PropType<VxeSplitPropTypes.Border>,
+      default: () => getConfig().split.border
+    },
+    minWidth: {
+      type: [Number, String] as PropType<VxeSplitPropTypes.MinWidth>,
+      default: () => getConfig().split.minWidth
+    },
+    minHeight: {
+      type: [Number, String] as PropType<VxeSplitPropTypes.MinHeight>,
+      default: () => getConfig().split.minHeight
+    }
+  },
+  emits: [
+  ] as VxeSplitEmits,
+  setup (props, context) {
+    const { emit, slots } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<SplitReactData>({
+      staticItems: []
+    })
+
+    const internalData: SplitInternalData = {
+    }
+
+    const computeMaps: VxeSplitPrivateComputed = {
+    }
+
+    const refMaps: SplitPrivateRef = {
+      refElem
+    }
+
+    const $xeSplit = {
+      xID,
+      props,
+      context,
+      reactData,
+      internalData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeSplitConstructor & VxeSplitPrivateMethods
+
+    const dispatchEvent = (type: ValueOf<VxeSplitEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $split: $xeSplit }, params))
+    }
+
+    const callSlot = (slotFunc: any, params: any) => {
+      if (slotFunc) {
+        if (XEUtils.isString(slotFunc)) {
+          slotFunc = slots[slotFunc] || null
+        }
+        if (XEUtils.isFunction(slotFunc)) {
+          return getSlotVNs(slotFunc(params))
+        }
+      }
+      return []
+    }
+
+    const recalculate = () => {
+      return nextTick().then(() => {
+        const { vertical, minWidth, minHeight } = props
+        const { staticItems } = reactData
+        const el = refElem.value
+        if (!el) {
+          return
+        }
+        const wrapperWidth = el.clientWidth
+        const wrapperHeight = el.clientHeight
+        if (!wrapperWidth || !wrapperHeight) {
+          return
+        }
+        const residueItems: VxeSplitDefines.ItemConfig[] = []
+        if (vertical) {
+          let countHeight = 0
+          staticItems.forEach(item => {
+            const { height } = item
+            let itemHeight = 0
+            if (height) {
+              if (isScale(height)) {
+                itemHeight = wrapperHeight * XEUtils.toNumber(height)
+              } else {
+                itemHeight = XEUtils.toNumber(height)
+              }
+              item.renderHeight = itemHeight
+            } else {
+              residueItems.push(item)
+            }
+            countHeight += itemHeight
+          })
+          if (residueItems.length) {
+            const reMeanHeight = (wrapperHeight - countHeight) / residueItems.length
+            residueItems.forEach(item => {
+              item.renderHeight = Math.max(getGlobalDefaultConfig(item.minHeight, minHeight), reMeanHeight)
+            })
+          }
+        } else {
+          let countWidth = 0
+          staticItems.forEach(item => {
+            const { width } = item
+            let itemWidth = 0
+            if (width) {
+              if (isScale(width)) {
+                itemWidth = wrapperWidth * XEUtils.toNumber(width)
+              } else {
+                itemWidth = XEUtils.toNumber(width)
+              }
+              item.renderWidth = itemWidth
+            } else {
+              residueItems.push(item)
+            }
+            countWidth += itemWidth
+          })
+          if (residueItems.length) {
+            const reMeanWidth = (wrapperWidth - countWidth) / residueItems.length
+            residueItems.forEach(item => {
+              item.renderWidth = Math.max(getGlobalDefaultConfig(item.minWidth, minWidth), reMeanWidth)
+            })
+          }
+        }
+      })
+    }
+
+    const dragEvent = (evnt: MouseEvent) => {
+      evnt.preventDefault()
+      const { vertical, minWidth, minHeight } = props
+      const { staticItems } = reactData
+      const handleEl = evnt.currentTarget as HTMLDivElement
+      const el = refElem.value
+      if (!el) {
+        return
+      }
+      const itemId = handleEl.getAttribute('xid')
+      const itemIndex = XEUtils.findIndexOf(staticItems, item => item.id === itemId)
+      const item = staticItems[itemIndex]
+      if (!item) {
+        return
+      }
+      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 currWidth = currItemEl ? currItemEl.clientWidth : 0
+      const prevHeight = prevItemEl ? prevItemEl.clientHeight : 0
+      const currHeight = currItemEl ? currItemEl.clientHeight : 0
+      const prevMinWidth = prevItem ? getGlobalDefaultConfig(prevItem.minWidth, minWidth) : minWidth
+      const currMinWidth = getGlobalDefaultConfig(item.minWidth, minWidth)
+      const prevMinHeight = prevItem ? getGlobalDefaultConfig(prevItem.minHeight, minHeight) : minHeight
+      const currMinHeight = getGlobalDefaultConfig(item.minHeight, minHeight)
+      const disX = evnt.clientX
+      const disY = evnt.clientY
+      addClass(el, 'is--drag')
+      document.onmousemove = evnt => {
+        evnt.preventDefault()
+        if (vertical) {
+          const offsetTop = evnt.clientY - disY
+          if (offsetTop > 0) {
+            if (prevItem) {
+              if (currHeight - offsetTop >= currMinHeight) {
+                prevItem.renderHeight = prevHeight + offsetTop
+                item.renderHeight = currHeight - offsetTop
+              }
+            }
+          } else {
+            if (prevItem) {
+              if (prevHeight + offsetTop >= prevMinHeight) {
+                prevItem.renderHeight = prevHeight + offsetTop
+                item.renderHeight = currHeight - offsetTop
+              }
+            }
+          }
+        } else {
+          const offsetLeft = evnt.clientX - disX
+          if (offsetLeft > 0) {
+            if (prevItem) {
+              if (currWidth - offsetLeft >= currMinWidth) {
+                prevItem.renderWidth = prevWidth + offsetLeft
+                item.renderWidth = currWidth - offsetLeft
+              }
+            }
+          } else {
+            if (prevItem) {
+              if (prevWidth + offsetLeft >= prevMinWidth) {
+                prevItem.renderWidth = prevWidth + offsetLeft
+                item.renderWidth = currWidth - offsetLeft
+              }
+            }
+          }
+        }
+      }
+      document.onmouseup = () => {
+        document.onmousemove = null
+        document.onmouseup = null
+        removeClass(el, 'is--drag')
+      }
+    }
+
+    const splitMethods: SplitMethods = {
+      dispatchEvent,
+      recalculate
+    }
+
+    const splitPrivateMethods: SplitPrivateMethods = {
+    }
+
+    Object.assign($xeSplit, splitMethods, splitPrivateMethods)
+
+    const renderItems = () => {
+      const { border, vertical } = props
+      const { staticItems } = reactData
+      const itemVNs: VNode[] = []
+      staticItems.forEach((item, index) => {
+        const { id, slots, renderHeight, renderWidth } = item
+        const defaultSlot = slots ? slots.default : null
+        const stys: Record<string, string | number> = {}
+        if (vertical) {
+          if (renderHeight) {
+            stys.height = toCssUnit(renderHeight)
+          }
+        } else {
+          if (renderWidth) {
+            stys.width = toCssUnit(renderWidth)
+          }
+        }
+        itemVNs.push(
+          h('div', {
+            xid: id,
+            class: ['vxe-split-item', vertical ? 'is--vertical' : 'is--horizontal', {
+              'is--border': border,
+              'is--height': renderHeight,
+              'is--width': renderWidth,
+              'is--fill': !renderHeight && !renderWidth,
+              'is--handle': index > 0
+            }],
+            style: stys
+          }, [
+            index
+              ? h('div', {
+                xid: id,
+                class: 'vxe-split-item-handle',
+                onMousedown: dragEvent
+              })
+              : renderEmptyElement($xeSplit),
+            h('div', {
+              xid: id,
+              class: 'vxe-split-item--wrapper'
+            }, defaultSlot ? callSlot(defaultSlot, { }) : [])
+          ])
+        )
+      })
+      return h('div', {
+        class: 'vxe-split-wrapper'
+      }, itemVNs)
+    }
+
+    const renderVN = () => {
+      const { vertical } = props
+      const defaultSlot = slots.default
+      return h('div', {
+        ref: refElem,
+        class: ['vxe-split', vertical ? 'is--vertical' : 'is--horizontal']
+      }, [
+        h('div', {
+          class: 'vxe-split-slots'
+        }, defaultSlot ? defaultSlot({}) : []),
+        renderItems()
+      ])
+    }
+
+    watch(() => reactData.staticItems, () => {
+      recalculate()
+    })
+
+    onMounted(() => {
+      recalculate()
+    })
+
+    onActivated(() => {
+      recalculate()
+    })
+
+    provide('$xeSplit', $xeSplit)
+
+    $xeSplit.renderVN = renderVN
+
+    return $xeSplit
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/split/src/util.ts

@@ -0,0 +1,21 @@
+import XEUtils from 'xe-utils'
+
+import type { VxeSplitConstructor, VxeSplitPrivateMethods, VxeSplitDefines } from '../../../types'
+
+export function assembleSplitItem ($xeSplit: VxeSplitConstructor & VxeSplitPrivateMethods, elem: HTMLElement, itemConfig: VxeSplitDefines.ItemConfig) {
+  const staticItems = $xeSplit.reactData.staticItems
+  const parentElem = elem.parentNode
+  if (parentElem) {
+    staticItems.splice(XEUtils.arrayIndexOf(parentElem.children, elem), 0, itemConfig)
+    $xeSplit.reactData.staticItems = staticItems.slice(0)
+  }
+}
+
+export function destroySplitItem ($xeSplit: VxeSplitConstructor & VxeSplitPrivateMethods, itemConfig: VxeSplitDefines.ItemConfig) {
+  const staticItems = $xeSplit.reactData.staticItems
+  const index = XEUtils.findIndexOf(staticItems, item => item.id === itemConfig.id)
+  if (index > -1) {
+    staticItems.splice(index, 1)
+  }
+  $xeSplit.reactData.staticItems = staticItems.slice(0)
+}

package/packages/split-item/index.ts

@@ -0,0 +1,16 @@
+import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeSplitItemComponent from '../split/src/split-item'
+import { dynamicApp } from '../dynamics'
+
+export const VxeSplitItem = Object.assign({}, VxeSplitItemComponent, {
+  install (app: App) {
+    app.component(VxeSplitItemComponent.name as string, VxeSplitItemComponent)
+  }
+})
+
+dynamicApp.use(VxeSplitItem)
+VxeUI.component(VxeSplitItemComponent)
+
+export const SplitItem = VxeSplitItem
+export default VxeSplitItem

package/packages/ui/index.ts

@@ -277,6 +277,11 @@ setConfig({
       oSize: 2
     }
   },
+  split: {
+    minWidth: 40,
+    minHeight: 40
+  },
+  splitItem: {},
   slider: {
     max: 100,
     min: 0

package/packages/ui/src/utils.ts

@@ -14,6 +14,13 @@ export function getLastZIndex () {
   return DomZIndex.getCurrent()
 }
 
+export function getGlobalDefaultConfig (value: any, globalValue: any) {
+  if (XEUtils.eqNull(value)) {
+    return globalValue
+  }
+  return value
+}
+
 export function getFuncText (content: string | number | boolean | null | undefined, args?: any) {
   if (content) {
     const translate = getConfig().translate

package/styles/all.scss

@@ -65,6 +65,8 @@
 @use './components/result.scss';
 @use './components/row.scss';
 @use './components/select.scss';
+@use './components/split.scss';
+@use './components/split-item.scss';
 @use './components/slider.scss';
 @use './components/steps.scss';
 @use './components/switch.scss';

package/styles/components/col.scss

@@ -1,61 +0,0 @@
-@use "sass:list";
-
-// 24 栅格布局
-$colSpanList: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%,
-              37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%,
-              70.83333%, 75%, 79.16667%, 83.33333%, 87.5%, 91.66667%, 95.83333%, 100%;
-.vxe-col {
-  display: block;
-  &.is--ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  &.is--fill {
-    flex-grow: 1;
-  }
-  &:not(.is--fill) {
-    flex-shrink: 0;
-  }
-  &.align--left {
-    text-align: left;
-  }
-  &.align--center {
-    text-align: center;
-  }
-  &.align--right {
-    text-align: right;
-  }
-  @for $i from 0 to list.length($colSpanList) {
-    &.span#{$i + 1} {
-      width: list.nth($colSpanList, $i + 1);
-    }
-  }
-}
-
-.vxe-col--inner {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.vxe-col {
-  &.is--span,
-  &.is--width {
-    & > .vxe-col--inner {
-      & > .vxe-default-textarea,
-      & > .vxe-default-select,
-      & > .vxe-input,
-      & > .vxe-number-input,
-      & > .vxe-password-input,
-      & > .vxe-date-picker,
-      & > .vxe-textarea,
-      & > .vxe-select,
-      & > .vxe-tree-select,
-      & > .vxe-table-select,
-      & > .vxe-ico-picker {
-        width: 100%;
-      }
-    }
-  }
-}

package/styles/components/row.scss

@@ -1,3 +1,6 @@
+@use "sass:list";
+@use '../helpers/baseVar.scss' as base_var;
+
 .vxe-row {
   position: relative;
   display: flex;
@@ -10,3 +13,59 @@
     flex-wrap: wrap;
   }
 }
+
+.vxe-col {
+  display: block;
+  &.is--ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &.is--fill {
+    flex-grow: 1;
+  }
+  &:not(.is--fill) {
+    flex-shrink: 0;
+  }
+  &.align--left {
+    text-align: left;
+  }
+  &.align--center {
+    text-align: center;
+  }
+  &.align--right {
+    text-align: right;
+  }
+  @for $i from 0 to list.length(base_var.$colSpanList) {
+    &.span#{$i + 1} {
+      width: list.nth(base_var.$colSpanList, $i + 1);
+    }
+  }
+}
+
+.vxe-col--inner {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.vxe-col {
+  &.is--span,
+  &.is--width {
+    & > .vxe-col--inner {
+      & > .vxe-default-textarea,
+      & > .vxe-default-select,
+      & > .vxe-input,
+      & > .vxe-number-input,
+      & > .vxe-password-input,
+      & > .vxe-date-picker,
+      & > .vxe-textarea,
+      & > .vxe-select,
+      & > .vxe-tree-select,
+      & > .vxe-table-select,
+      & > .vxe-ico-picker {
+        width: 100%;
+      }
+    }
+  }
+}