vxe-pc-ui 3.4.26 → 3.5.0

package/packages/select/src/select.ts

@@ -123,7 +123,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       optList: [],
       afterVisibleList: [],
       staticOptions: [],
-      reactFlag: 0,
+      reactFlag: 1,
 
       currentOption: null,
       searchValue: '',
@@ -320,14 +320,16 @@ export default /* define-vxe-component start */ defineVxeComponent({
     computeSelectLabel (this: any) {
       const $xeSelect = this
       const props = $xeSelect
+      const reactData = $xeSelect.reactData
 
       const { value, remote, multiple } = props
+      const { reactFlag } = reactData
       const multiMaxCharNum = $xeSelect.computeMultiMaxCharNum
       if (XEUtils.eqNull(value)) {
         return ''
       }
       const vals = XEUtils.isArray(value) ? value : [value]
-      if (remote) {
+      if (remote && reactFlag) {
         return vals.map(val => $xeSelect.getRemoteSelectLabel(val)).join(', ')
       }
       return vals.map((val) => {
@@ -441,9 +443,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeSelect = this
       const internalData = $xeSelect.internalData
 
-      const { remoteValMaps } = internalData
+      const { remoteValMaps, optFullValMaps } = internalData
       const labelField = $xeSelect.computeLabelField
-      const remoteItem = remoteValMaps[value]
+      const remoteItem = remoteValMaps[value] || optFullValMaps[value]
       const item = remoteItem ? remoteItem.item : null
       return XEUtils.toValueString(item ? item[labelField] : value)
     },

package/packages/split/index.ts

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

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

@@ -0,0 +1,154 @@
+import { CreateElement, PropType, VNode } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import { globalMixins, createEvent } from '../../ui'
+import { assembleSplitItem, destroySplitItem } from './util'
+import XEUtils from 'xe-utils'
+
+import type { SplitItemReactData, VxeSplitItemPropTypes, VxeSplitItemEmits, VxeComponentSizeType, ValueOf, VxeSplitConstructor, VxeSplitPrivateMethods, VxeSplitDefines } from '../../../types'
+
+export default /* define-vxe-component start */ defineVxeComponent({
+  name: 'VxeSplitItem',
+  mixins: [
+    globalMixins.sizeMixin
+  ],
+  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
+    }
+  },
+  inject: {
+    $xeSplit: {
+      default: null
+    }
+  },
+  provide () {
+    const $xeSplitItem = this
+    return {
+      $xeSplitItem
+    }
+  },
+  data () {
+    const xID = XEUtils.uniqueId()
+    const reactData: SplitItemReactData = {
+    }
+    const itemConfig: VxeSplitDefines.ItemConfig = {
+      id: xID,
+      width: 0,
+      height: 0,
+      minWidth: 0,
+      minHeight: 0,
+      renderWidth: 0,
+      renderHeight: 0,
+      slots: {}
+    }
+
+    return {
+      xID,
+      reactData,
+      itemConfig
+    }
+  },
+  computed: {
+    ...({} as {
+      computeSize(): VxeComponentSizeType
+      $xeSplit(): (VxeSplitConstructor & VxeSplitPrivateMethods) | null
+    })
+  },
+  watch: {
+    span (val) {
+      const $xeSplitItem = this
+      const itemConfig = $xeSplitItem.itemConfig
+
+      itemConfig.span = val
+    },
+    width (val) {
+      const $xeSplitItem = this
+      const itemConfig = $xeSplitItem.itemConfig
+
+      itemConfig.width = val
+    },
+    height (val) {
+      const $xeSplitItem = this
+      const itemConfig = $xeSplitItem.itemConfig
+
+      itemConfig.height = val
+    },
+    minWidth (val) {
+      const $xeSplitItem = this
+      const itemConfig = $xeSplitItem.itemConfig
+
+      itemConfig.minWidth = val
+    },
+    minHeight (val) {
+      const $xeSplitItem = this
+      const itemConfig = $xeSplitItem.itemConfig
+
+      itemConfig.minHeight = val
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxeSplitItemEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeSplitItem = this
+      $xeSplitItem.$emit(type, createEvent(evnt, { $splitItem: $xeSplitItem }, params))
+    },
+    //
+    // Render
+    //
+    renderVN (h: CreateElement): VNode {
+      return h('div', {
+        ref: 'refElem'
+      })
+    }
+  },
+  created () {
+    const $xeSplitItem = this
+    const props = $xeSplitItem
+    const slots = $xeSplitItem.$scopedSlots
+    const itemConfig = $xeSplitItem.itemConfig
+
+    Object.assign(itemConfig, {
+      width: props.width,
+      height: props.height,
+      minWidth: props.minWidth,
+      minHeight: props.minHeight,
+      renderWidth: 0,
+      renderHeight: 0,
+      slots
+    })
+  },
+  mounted () {
+    const $xeSplitItem = this
+    const slots = $xeSplitItem.$scopedSlots
+    const itemConfig = $xeSplitItem.itemConfig
+    const $xeSplit = $xeSplitItem.$xeSplit
+
+    itemConfig.slots = slots
+
+    const elem = $xeSplitItem.$refs.refElem as HTMLElement
+    if ($xeSplit && elem) {
+      assembleSplitItem($xeSplit, elem, itemConfig)
+    }
+  },
+  beforeDestroy () {
+    const $xeSplitItem = this
+    const itemConfig = $xeSplitItem.itemConfig
+    const $xeSplit = $xeSplitItem.$xeSplit
+
+    if ($xeSplit) {
+      destroySplitItem($xeSplit, itemConfig)
+    }
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+}) /* define-vxe-component end */

package/packages/split/src/split.ts

@@ -0,0 +1,312 @@
+import { CreateElement, PropType, VNode } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { getConfig, createEvent, globalMixins, 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 type { SplitReactData, VxeSplitPropTypes, VxeComponentSizeType, SplitInternalData, VxeSplitEmits, ValueOf, VxeSplitDefines } from '../../../types'
+
+export default /* define-vxe-component start */ defineVxeComponent({
+  name: 'VxeSplit',
+  mixins: [
+    globalMixins.sizeMixin
+  ],
+  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
+    }
+  },
+  data () {
+    const xID = XEUtils.uniqueId()
+    const reactData: SplitReactData = {
+      staticItems: []
+    }
+    const internalData: SplitInternalData = {
+    }
+    return {
+      xID,
+      reactData,
+      internalData
+    }
+  },
+  provide () {
+    const $xeSplit = this
+    return {
+      $xeSplit
+    }
+  },
+  computed: {
+    ...({} as {
+      computeSize(): VxeComponentSizeType
+    })
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxeSplitEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeSplit = this
+      $xeSplit.$emit(type, createEvent(evnt, { $split: $xeSplit }, params))
+    },
+    callSlot  (slotFunc: any, params: any) {
+      const $xeSplit = this
+      const slots = $xeSplit.$scopedSlots
+
+      if (slotFunc) {
+        if (XEUtils.isString(slotFunc)) {
+          slotFunc = slots[slotFunc] || null
+        }
+        if (XEUtils.isFunction(slotFunc)) {
+          return getSlotVNs(slotFunc(params))
+        }
+      }
+      return []
+    },
+    recalculate () {
+      const $xeSplit = this
+      const props = $xeSplit
+      const reactData = $xeSplit.reactData
+
+      return $xeSplit.$nextTick().then(() => {
+        const { vertical, minWidth, minHeight } = props
+        const { staticItems } = reactData
+        const el = $xeSplit.$refs.refElem as HTMLDivElement
+        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)
+            })
+          }
+        }
+      })
+    },
+    dragEvent (evnt: MouseEvent) {
+      const $xeSplit = this
+      const props = $xeSplit
+      const reactData = $xeSplit.reactData
+
+      evnt.preventDefault()
+      const { vertical, minWidth, minHeight } = props
+      const { staticItems } = reactData
+      const handleEl = evnt.currentTarget as HTMLDivElement
+      const el = $xeSplit.$refs.refElem as HTMLDivElement
+      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')
+      }
+    },
+
+    //
+    // Render
+    //
+    renderItems (h: CreateElement) {
+      const $xeSplit = this
+      const props = $xeSplit
+      const reactData = $xeSplit.reactData
+
+      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', {
+            attrs: {
+              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', {
+                attrs: {
+                  xid: id
+                },
+                class: 'vxe-split-item-handle',
+                on: {
+                  mousedown: $xeSplit.dragEvent
+                }
+              })
+              : renderEmptyElement($xeSplit),
+            h('div', {
+              attrs: {
+                xid: id
+              },
+              class: 'vxe-split-item--wrapper'
+            }, defaultSlot ? $xeSplit.callSlot(defaultSlot, { }) : [])
+          ])
+        )
+      })
+      return h('div', {
+        class: 'vxe-split-wrapper'
+      }, itemVNs)
+    },
+    renderVN (h: CreateElement): VNode {
+      const $xeSplit = this
+      const props = $xeSplit
+      const slots = $xeSplit.$scopedSlots
+
+      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({}) : []),
+        $xeSplit.renderItems(h)
+      ])
+    }
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+}) /* define-vxe-component end */

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 { VueConstructor } 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: VueConstructor) {
+    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%;
-      }
-    }
-  }
-}