vxe-pc-ui 3.17.19 → 3.17.21

package/packages/slider/src/slider.ts

@@ -3,7 +3,21 @@ import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, createEvent, renderEmptyElement } from '../../ui'
 
-import type { SliderReactData, VxeSliderEmits, ValueOf, VxeSliderPropTypes, VxeFormDefines, VxeComponentSizeType, VxeFormConstructor, VxeFormPrivateMethods } from '../../../types'
+import type { SliderReactData, SliderInternalData, VxeSliderEmits, ValueOf, VxeSliderPropTypes, VxeFormDefines, VxeComponentSizeType, VxeFormConstructor, VxeFormPrivateMethods } from '../../../types'
+
+function createInternalData (): SliderInternalData {
+  return {
+    // _isUp: false,
+    currValue: 0,
+    startValue: 0,
+    endValue: 0
+  }
+}
+
+function createReactData (): SliderReactData {
+  return {
+  }
+}
 
 export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeSlider',
@@ -13,6 +27,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
   },
   props: {
     value: [String, Number, Array] as PropType<VxeSliderPropTypes.ModelValue>,
+    startValue: [String, Number] as PropType<VxeSliderPropTypes.StartValue>,
+    endValue: [String, Number] as PropType<VxeSliderPropTypes.EndValue>,
     vertical: Boolean as PropType<VxeSliderPropTypes.Vertical>,
     max: {
       type: [String, Number] as PropType<VxeSliderPropTypes.Max>,
@@ -41,6 +57,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
     disabled: {
       type: Boolean as PropType<VxeSliderPropTypes.Disabled>,
       default: null
+    },
+    immediate: {
+      type: Boolean as PropType<VxeSliderPropTypes.Immediate>,
+      default: () => getConfig().slider.immediate
     }
   },
   inject: {
@@ -54,11 +74,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
   },
   data () {
     const xID = XEUtils.uniqueId()
-    const reactData: SliderReactData = {
-      startValue: 0,
-      endValue: 0
-    }
+    const reactData = createReactData()
     return {
+      ...({} as {
+        internalData: SliderInternalData,
+      }),
       xID,
       reactData
     }
@@ -108,6 +128,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeSlider
 
       return XEUtils.toNumber(props.min || 0)
+    },
+    computeMVal () {
+      const $xeSlider = this
+      const props = $xeSlider
+
+      const { range, startValue, endValue } = props
+      return range ? `${startValue || ''}${endValue || ''}` : ''
     }
   },
   methods: {
@@ -120,141 +147,230 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     emitModel (value: any) {
       const $xeSlider = this
+      const internalData = $xeSlider.internalData
 
       const { _events } = $xeSlider as any
+      internalData._isUp = true
       if (_events && _events.modelValue) {
         $xeSlider.$emit('modelValue', value)
       } else {
         $xeSlider.$emit('model-value', value)
       }
     },
-    getStartPercent (startValue: number) {
+    getBarPercent (currValue: number) {
       const $xeSlider = this
-      const props = $xeSlider
 
-      const { range } = props
       const maxNum = $xeSlider.computeMaxNum
       const minNum = $xeSlider.computeMinNum
-      return range ? XEUtils.floor((startValue - minNum) / XEUtils.toNumber(maxNum - minNum) * 100) : 0
+      if (maxNum === minNum) {
+        return 0
+      }
+      if (currValue < minNum) {
+        currValue = minNum
+      }
+      if (currValue > maxNum) {
+        currValue = maxNum
+      }
+      return ((currValue - minNum) / (maxNum - minNum)) * 100
     },
-    getEndPercent (startValue: number, endValue: number) {
+    parseFields (startValue?: VxeSliderPropTypes.StartValue, endValue?: VxeSliderPropTypes.EndValue) {
       const $xeSlider = this
-      const props = $xeSlider
+      const internalData = $xeSlider.internalData
 
-      const { range } = props
-      const maxNum = $xeSlider.computeMaxNum
-      const minNum = $xeSlider.computeMinNum
-      return XEUtils.floor((endValue - (range ? startValue : 0) - minNum) / XEUtils.toNumber(maxNum - minNum) * 100)
+      const [sVal, eVal] = XEUtils.orderBy([XEUtils.toNumber(startValue), XEUtils.toNumber(endValue)])
+      const currValue = XEUtils.floor(XEUtils.toNumber(sVal || 0))
+      internalData.currValue = currValue
+      internalData.startValue = currValue
+      internalData.endValue = XEUtils.floor(XEUtils.toNumber(eVal || 0))
     },
-    updateModel () {
+    parseArrs (arrVals: number[]) {
+      const $xeSlider = this
+      const internalData = $xeSlider.internalData
+
+      const [sVal, eVal] = XEUtils.orderBy(arrVals)
+      const currValue = XEUtils.floor(XEUtils.toNumber(sVal || 0))
+      internalData.currValue = currValue
+      internalData.startValue = currValue
+      internalData.endValue = XEUtils.floor(XEUtils.toNumber(eVal || 0))
+    },
+    parseNum (val: VxeSliderPropTypes.ModelValue | undefined) {
+      const $xeSlider = this
+      const internalData = $xeSlider.internalData
+
+      const currValue = XEUtils.floor(XEUtils.toNumber(val || 0))
+      internalData.currValue = currValue
+      internalData.startValue = 0
+      internalData.endValue = currValue
+    },
+    updateModelValue (umType?: 1 | 2) {
       const $xeSlider = this
       const props = $xeSlider
-      const reactData = $xeSlider.reactData
 
-      const { value } = props
-      if (XEUtils.isArray(value)) {
-        const [sVal, eVal] = XEUtils.clone(value, true).sort()
-        reactData.startValue = XEUtils.floor(XEUtils.toNumber(sVal || 0))
-        reactData.endValue = XEUtils.floor(XEUtils.toNumber(eVal || 0))
+      const { range, value: modelValue, startValue, endValue } = props
+      if (!umType) {
+        if (range) {
+          if (XEUtils.eqNull(modelValue)) {
+            if (startValue || endValue) {
+              $xeSlider.parseFields(startValue, endValue)
+            }
+          } else {
+            if (XEUtils.isArray(modelValue)) {
+              $xeSlider.parseArrs(modelValue.map(num => XEUtils.toNumber(num)))
+            } else {
+              $xeSlider.parseNum(modelValue)
+            }
+          }
+        } else {
+          $xeSlider.parseNum(modelValue)
+        }
+      } else if (range && umType === 2) {
+        $xeSlider.parseFields(startValue, endValue)
       } else {
-        reactData.startValue = 0
-        reactData.endValue = XEUtils.floor(XEUtils.toNumber(value || 0))
+        if (XEUtils.isArray(modelValue)) {
+          $xeSlider.parseArrs(modelValue.map(num => XEUtils.toNumber(num)))
+        } else {
+          $xeSlider.parseNum(modelValue)
+        }
       }
+      $xeSlider.updateBarStyle()
+      $xeSlider.updateTrackStyle()
     },
     updateBarStyle () {
       const $xeSlider = this
-      const reactData = $xeSlider.reactData
+      const props = $xeSlider
+      const internalData = $xeSlider.internalData
 
-      const { startValue, endValue } = reactData
-      const trackElem = $xeSlider.$refs.refTrackElem as HTMLDivElement
+      const { range } = props
+      const { currValue, startValue, endValue } = internalData
       const startBtnElem = $xeSlider.$refs.refStartBtnElem as HTMLDivElement
       const endBtnElem = $xeSlider.$refs.refEndBtnElem as HTMLDivElement
-      let startPercent = 0
-      let endPercent = 0
-      if (startValue > endValue) {
-        startPercent = $xeSlider.getStartPercent(endValue)
-        endPercent = $xeSlider.getEndPercent(endValue, startValue)
+      if (range) {
+        const [sVal, eVal] = XEUtils.orderBy([startValue, endValue])
+        if (startBtnElem) {
+          startBtnElem.style.left = $xeSlider.getBarPercent(sVal) + '%'
+        }
+        if (endBtnElem) {
+          endBtnElem.style.left = $xeSlider.getBarPercent(eVal) + '%'
+        }
       } else {
-        startPercent = $xeSlider.getStartPercent(startValue)
-        endPercent = $xeSlider.getEndPercent(startValue, endValue)
+        if (endBtnElem) {
+          endBtnElem.style.left = $xeSlider.getBarPercent(currValue) + '%'
+        }
       }
+    },
+    updateTrackStyle () {
+      const $xeSlider = this
+      const props = $xeSlider
+      const internalData = $xeSlider.internalData
+
+      const { range } = props
+      const { currValue, startValue, endValue } = internalData
+      const trackElem = $xeSlider.$refs.refTrackElem as HTMLDivElement
       if (trackElem) {
-        trackElem.style.left = `${startPercent}%`
-        trackElem.style.width = `${endPercent}%`
-      }
-      if (startBtnElem) {
-        startBtnElem.style.left = `${startPercent}%`
-      }
-      if (endBtnElem) {
-        endBtnElem.style.left = `${XEUtils.floor(startPercent + endPercent)}%`
+        if (range) {
+          const [sVal, eVal] = XEUtils.orderBy([startValue, endValue])
+          trackElem.style.left = $xeSlider.getBarPercent(sVal) + '%'
+          trackElem.style.width = $xeSlider.getBarPercent(eVal - sVal) + '%'
+        } else {
+          trackElem.style.left = '0'
+          trackElem.style.width = $xeSlider.getBarPercent(currValue) + '%'
+        }
       }
     },
     changeEvent (evnt: MouseEvent) {
       const $xeSlider = this
       const props = $xeSlider
-      const reactData = $xeSlider.reactData
+      const internalData = $xeSlider.internalData
       const $xeForm = $xeSlider.$xeForm
       const formItemInfo = $xeSlider.formItemInfo
 
       const { range } = props
-      const { startValue, endValue } = reactData
-      const value = range ? [startValue, endValue].sort() : endValue
+      const { currValue, startValue, endValue } = internalData
+      const vals = range ? XEUtils.orderBy([startValue, endValue]) : []
+      const value = range ? vals : currValue
       $xeSlider.emitModel(value)
+      if (range) {
+        $xeSlider.$emit('update:startValue', vals[0] || 0)
+        $xeSlider.$emit('update:endValue', vals[1] || 0)
+      }
       $xeSlider.dispatchEvent('change', { value }, evnt)
       // 自动更新校验状态
       if ($xeForm && formItemInfo) {
         $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
       }
     },
-    handleMousedownEvent (evnt: MouseEvent, isEnd: boolean) {
+    getValueByLeft (offsetLeft: number, barWidth: number) {
       const $xeSlider = this
-      const reactData = $xeSlider.reactData
 
-      const formReadonly = $xeSlider.computeFormReadonly
-      const isDisabled = $xeSlider.computeIsDisabled
       const maxNum = $xeSlider.computeMaxNum
       const minNum = $xeSlider.computeMinNum
+      if (barWidth === 0) {
+        return minNum
+      }
+      const clamped = Math.max(0, Math.min(barWidth, offsetLeft))
+      const ratio = clamped / barWidth
+      const raw = minNum + ratio * (maxNum - minNum)
+      return Math.floor(raw)
+    },
+    handleBtnMousedownEvent (evnt: MouseEvent) {
+      const $xeSlider = this
+      const props = $xeSlider
+      const internalData = $xeSlider.internalData
+
+      const { range, immediate } = props
+      const btnElem = evnt.currentTarget as HTMLDivElement
+      const formReadonly = $xeSlider.computeFormReadonly
+      const isDisabled = $xeSlider.computeIsDisabled
       if (!(formReadonly || isDisabled)) {
         evnt.preventDefault()
         document.onmousemove = evnt => {
           evnt.preventDefault()
+          const el = $xeSlider.$refs.refElem as HTMLDivElement
           const barElem = $xeSlider.$refs.refBarElem as HTMLDivElement
-          if (barElem) {
+          if (el && barElem) {
+            const btnType = btnElem.getAttribute('data-type')
             const barRect = barElem.getBoundingClientRect()
-            const trackWidth = (evnt.clientX - barRect.left) / barRect.width
-            if (isEnd) {
-              reactData.endValue = XEUtils.floor(Math.max(minNum, Math.min(maxNum, trackWidth * (maxNum - minNum) + minNum)))
-            } else {
-              reactData.startValue = XEUtils.floor(Math.max(minNum, Math.min(maxNum, trackWidth * (maxNum - minNum))))
+            const barWidth = barRect.width
+            const offsetLeft = Math.min(barWidth, Math.max(0, evnt.clientX - barRect.left))
+            const currValue = $xeSlider.getValueByLeft(offsetLeft, barWidth)
+            if (range) {
+              if (btnType === '1') {
+                internalData.startValue = currValue
+              } else {
+                internalData.endValue = currValue
+              }
             }
-            $xeSlider.dispatchEvent('track-dragover', { startValue: reactData.startValue, endValue: reactData.endValue }, evnt)
+            internalData.currValue = currValue
+            btnElem.style.left = $xeSlider.getBarPercent(currValue) + '%'
+            $xeSlider.dispatchEvent('track-dragover', {
+              currentValue: internalData.currValue,
+              startValue: internalData.startValue,
+              endValue: internalData.endValue
+            }, evnt)
+          }
+          if (immediate) {
+            $xeSlider.changeEvent(evnt)
           }
-          $xeSlider.updateBarStyle()
+          $xeSlider.updateTrackStyle()
         }
         document.onmouseup = (evnt: MouseEvent) => {
           document.onmousemove = null
           document.onmouseup = null
-          $xeSlider.dispatchEvent('track-dragend', { startValue: reactData.startValue, endValue: reactData.endValue }, evnt)
+          $xeSlider.dispatchEvent('track-dragend', {
+            currentValue: internalData.currValue,
+            startValue: internalData.startValue,
+            endValue: internalData.endValue
+          }, evnt)
           $xeSlider.changeEvent(evnt)
-          $xeSlider.updateBarStyle()
+          $xeSlider.updateTrackStyle()
         }
-        $xeSlider.dispatchEvent('track-dragstart', { startValue: reactData.startValue, endValue: reactData.endValue }, evnt)
+        $xeSlider.dispatchEvent('track-dragstart', {
+          currentValue: internalData.currValue,
+          startValue: internalData.startValue,
+          endValue: internalData.endValue
+        }, evnt)
       }
     },
-    handleStartMousedownEvent (evnt: MouseEvent) {
-      const $xeSlider = this
-
-      const endBtnElem = $xeSlider.$refs.refEndBtnElem as HTMLDivElement
-      const startBtnElem = evnt.currentTarget as HTMLDivElement
-      $xeSlider.handleMousedownEvent(evnt, endBtnElem ? endBtnElem.offsetLeft < startBtnElem.offsetLeft : false)
-    },
-    handleEndMousedownEvent (evnt: MouseEvent) {
-      const $xeSlider = this
-
-      const startBtnElem = $xeSlider.$refs.refStartBtnElem as HTMLDivElement
-      const endBtnElem = evnt.currentTarget as HTMLDivElement
-      $xeSlider.handleMousedownEvent(evnt, startBtnElem ? endBtnElem.offsetLeft > startBtnElem.offsetLeft : true)
-    },
 
     //
     // Render
@@ -291,18 +407,24 @@ export default /* define-vxe-component start */ defineVxeComponent({
             ? renderEmptyElement($xeSlider)
             : h('div', {
               ref: 'refStartBtnElem',
-              class: 'vxe-slider--bar-btn vxe-slider--start-btn',
+              class: 'vxe-slider--bar-btn',
+              attrs: {
+                'data-type': '1'
+              },
               on: {
-                mousedown: $xeSlider.handleStartMousedownEvent
+                mousedown: $xeSlider.handleBtnMousedownEvent
               }
             }),
           formReadonly
             ? renderEmptyElement($xeSlider)
             : h('div', {
               ref: 'refEndBtnElem',
-              class: 'vxe-slider--bar-btn vxe-slider--end-btn',
+              class: 'vxe-slider--bar-btn',
+              attrs: {
+                'data-type': '2'
+              },
               on: {
-                mousedown: $xeSlider.handleEndMousedownEvent
+                mousedown: $xeSlider.handleBtnMousedownEvent
               }
             })
         ])
@@ -312,19 +434,43 @@ export default /* define-vxe-component start */ defineVxeComponent({
   watch: {
     value () {
       const $xeSlider = this
+      const internalData = $xeSlider.internalData
 
-      $xeSlider.updateModel()
+      if (!internalData._isUp) {
+        $xeSlider.updateModelValue(1)
+      }
+      internalData._isUp = false
+    },
+    computeMVal () {
+      const $xeSlider = this
+      const internalData = $xeSlider.internalData
+
+      if (!internalData._isUp) {
+        $xeSlider.updateModelValue(2)
+      }
+      internalData._isUp = false
     }
   },
   created () {
     const $xeSlider = this
 
-    $xeSlider.updateModel()
+    $xeSlider.internalData = createInternalData()
+
+    $xeSlider.updateModelValue()
   },
   mounted () {
     const $xeSlider = this
 
     $xeSlider.updateBarStyle()
+    $xeSlider.updateTrackStyle()
+  },
+  beforeDestroy () {
+    const $xeSlider = this
+    const reactData = $xeSlider.reactData
+    const internalData = $xeSlider.internalData
+
+    XEUtils.assign(reactData, createReactData())
+    XEUtils.assign(internalData, createInternalData())
   },
   render (this: any, h) {
     return this.renderVN(h)

package/packages/space/index.ts

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

package/packages/space/src/space.ts

@@ -0,0 +1,159 @@
+import { CreateElement, VNode, PropType } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { getConfig, createEvent, globalMixins } from '../../ui'
+import { getPropClass, toCssUnit } from '../../ui/src/dom'
+import { eqEmptyValue } from '../../ui/src/utils'
+
+import type { SpaceReactData, VxeSpaceEmits, VxeSpacePropTypes, ValueOf, VxeComponentSizeType, VxeComponentPermissionInfo, VxeComponentStyleType } from '../../../types'
+
+export default /* define-vxe-component start */ defineVxeComponent({
+  name: 'VxeSpace',
+  mixins: [
+    globalMixins.sizeMixin,
+    globalMixins.permissionMixin
+  ],
+  props: {
+    size: {
+      type: String as PropType<VxeSpacePropTypes.Size>,
+      default: () => getConfig().space.size || getConfig().size
+    },
+    wrap: {
+      type: Boolean as PropType<VxeSpacePropTypes.Wrap>,
+      default: () => getConfig().space.wrap
+    },
+    gap: {
+      type: [Number, String, Array, Object] as PropType<VxeSpacePropTypes.Gap>,
+      default: () => getConfig().space.gap
+    },
+    vertical: {
+      type: Boolean as PropType<VxeSpacePropTypes.Vertical>,
+      default: () => getConfig().space.vertical
+    },
+    className: {
+      type: String as PropType<VxeSpacePropTypes.ClassName>,
+      default: () => getConfig().space.className
+    },
+    itemClassName: {
+      type: String as PropType<VxeSpacePropTypes.ItemClassName>,
+      default: () => getConfig().space.itemClassName
+    },
+    separator: {
+      type: String as PropType<VxeSpacePropTypes.Separator>,
+      default: () => getConfig().space.separator
+    },
+    align: {
+      type: String as PropType<VxeSpacePropTypes.Align>,
+      default: () => getConfig().space.align
+    }
+  },
+  data () {
+    const xID = XEUtils.uniqueId()
+    const reactData: SpaceReactData = {
+      activeValue: null
+    }
+    return {
+      xID,
+      reactData
+    }
+  },
+  computed: {
+    ...({} as {
+      computePermissionInfo(): VxeComponentPermissionInfo
+      computeSize(): VxeComponentSizeType
+    }),
+    computeWrapperStyle () {
+      const $xeSpace = this
+      const props = $xeSpace
+
+      const { align, gap } = props
+      const stys: VxeComponentStyleType = {}
+      let rowGap: string | number = ''
+      let columGap: string | number = ''
+      if (XEUtils.isNumber(gap) || XEUtils.isString(gap)) {
+        rowGap = gap
+        columGap = gap
+      } else if (gap) {
+        if (XEUtils.isArray(gap)) {
+          rowGap = gap[0]
+          columGap = gap[1]
+        } else {
+          rowGap = gap.rowGap || ''
+          columGap = gap.columGap || ''
+        }
+      }
+      if (align) {
+        stys['align-items'] = align
+      }
+      if (!eqEmptyValue(rowGap)) {
+        stys['--vxe-ui-space-current-row-gap'] = toCssUnit(rowGap)
+      }
+      if (!eqEmptyValue(columGap)) {
+        stys['--vxe-ui-space-current-column-gap'] = toCssUnit(columGap)
+      }
+      return stys
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxeSpaceEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeSpace = this
+      $xeSpace.$emit(type, createEvent(evnt, { $space: $xeSpace }, params))
+    },
+
+    //
+    // Render
+    //
+    renderItems (h: CreateElement) {
+      const $xeSpace = this
+      const props = $xeSpace
+      const slots = $xeSpace.$scopedSlots
+
+      const { separator, itemClassName } = props
+      const itemVNs: VNode[] = []
+      const defaultSlot = slots.default
+      const separatorSlot = slots.separator
+      if (defaultSlot) {
+        XEUtils.each(defaultSlot({}), (itemVN, index, items) => {
+          itemVNs.push(
+            h('div', {
+              key: 'i' + index,
+              class: ['vxe-space--item', getPropClass(itemClassName, { index })]
+            }, [itemVN])
+          )
+          if ((separator || separatorSlot) && index < items.length - 1) {
+            itemVNs.push(
+              h('div', {
+                key: 's' + index,
+                class: 'vxe-space--separator'
+              }, separatorSlot ? separatorSlot({}) : ('' + separator))
+            )
+          }
+        })
+      }
+      return itemVNs
+    },
+    renderVN (h: CreateElement): VNode {
+      const $xeSpace = this
+      const props = $xeSpace
+
+      const { vertical, wrap, className } = props
+      const wrapperStyle = $xeSpace.computeWrapperStyle
+      const vSize = $xeSpace.computeSize
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-space', getPropClass(className, {}), {
+          [`size--${vSize}`]: vSize,
+          'is--wrap': wrap,
+          'is--vertical': vertical
+        }],
+        style: wrapperStyle
+      }, $xeSpace.renderItems(h))
+    }
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+}) /* define-vxe-component end */

package/packages/ui/index.ts

@@ -382,6 +382,7 @@ setConfig({
     max: 100,
     min: 0
   },
+  space: {},
   steps: {},
   switch: {},
   tabPane: {},

package/packages/ui/src/dom.ts

@@ -17,6 +17,10 @@ export function getTpImg () {
   return tpImgEl
 }
 
+export function getPropClass (property: any, params: any) {
+  return property ? (XEUtils.isFunction(property) ? property(params) : property) || '' : ''
+}
+
 const reClsMap: { [key: string]: any } = {}
 
 function getClsRE (cls: any) {

package/styles/all.scss

@@ -70,6 +70,7 @@
 @use './components/split.scss';
 @use './components/split-pane.scss';
 @use './components/slider.scss';
+@use './components/space.scss';
 @use './components/steps.scss';
 @use './components/switch.scss';
 @use './components/tab-pane.scss';