vxe-pc-ui 3.3.40 → 3.3.42

package/packages/list/src/list.ts

@@ -2,7 +2,7 @@ import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, globalEvents, globalResize, createEvent, globalMixins } from '../../ui'
-import { browse } from '../../ui/src/dom'
+import { browse, isScale } from '../../ui/src/dom'
 import { getSlotVNs } from '../../ui/src/vn'
 import VxeLoadingComponent from '../../loading/src/loading'
 
@@ -29,7 +29,9 @@ export default defineVxeComponent({
     const reactData: ListReactData = {
       scrollYLoad: false,
       bodyHeight: 0,
-      rowHeight: 0,
+      customHeight: 0,
+      customMaxHeight: 0,
+      parentHeight: 0,
       topSpaceHeight: 0,
       items: []
     }
@@ -65,14 +67,16 @@ export default defineVxeComponent({
     computeStyles () {
       const $xeList = this
       const props = $xeList
+      const reactData = $xeList.reactData
 
       const { height, maxHeight } = props
+      const { customHeight, customMaxHeight } = reactData
       const style: { [key: string]: string | number } = {}
       if (height) {
-        style.height = `${isNaN(height as number) ? height : `${height}px`}`
+        style.height = `${customHeight}px`
       } else if (maxHeight) {
         style.height = 'auto'
-        style.maxHeight = `${isNaN(maxHeight as number) ? maxHeight : `${maxHeight}px`}`
+        style.maxHeight = `${customMaxHeight}px`
       }
       return style
     }
@@ -135,6 +139,35 @@ export default defineVxeComponent({
       $xeList.clearScroll()
       return $xeList.loadData(datas)
     },
+    calcTableHeight (key: 'height' | 'maxHeight') {
+      const $xeList = this
+      const props = $xeList
+      const reactData = $xeList.reactData
+
+      const { parentHeight } = reactData
+      const val = props[key]
+      let num = 0
+      if (val) {
+        if (val === '100%' || val === 'auto') {
+          num = parentHeight
+        } else {
+          if (isScale(val)) {
+            num = Math.floor((XEUtils.toInteger(val) || 1) / 100 * parentHeight)
+          } else {
+            num = XEUtils.toNumber(val)
+          }
+          num = Math.max(40, num)
+        }
+      }
+      return num
+    },
+    updateHeight () {
+      const $xeList = this
+      const reactData = $xeList.reactData
+
+      reactData.customHeight = $xeList.calcTableHeight('height')
+      reactData.customMaxHeight = $xeList.calcTableHeight('maxHeight')
+    },
     updateYSpace  () {
       const $xeList = this
       const reactData = $xeList.reactData
@@ -169,7 +202,7 @@ export default defineVxeComponent({
       return $xeList.$nextTick().then(() => {
         const { scrollYLoad } = reactData
         const { scrollYStore } = internalData
-        const virtualBodyElem = $xeList.$refs.refVirtualBody as HTMLElement
+        const virtualBodyElem = $xeList.$refs.refVirtualBody as HTMLDivElement
         const sYOpts = $xeList.computeSYOpts
         let rowHeight = 0
         let firstItemElem: HTMLElement | undefined
@@ -193,12 +226,11 @@ export default defineVxeComponent({
           const offsetYSize = sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : (browse.edge ? 10 : 0)
           scrollYStore.offsetSize = offsetYSize
           scrollYStore.visibleSize = visibleYSize
-          scrollYStore.endIndex = Math.max(scrollYStore.startIndex, visibleYSize + offsetYSize, scrollYStore.endIndex)
+          scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex)
           $xeList.updateYData()
         } else {
           $xeList.updateYSpace()
         }
-        reactData.rowHeight = rowHeight
       })
     },
     /**
@@ -261,12 +293,18 @@ export default defineVxeComponent({
      */
     recalculate  () {
       const $xeList = this
+      const reactData = $xeList.reactData
 
       const el = $xeList.$refs.refElem as HTMLDivElement
-      if (el.clientWidth && el.clientHeight) {
-        return $xeList.computeScrollLoad()
+      if (el) {
+        const parentEl = el.parentElement
+        reactData.parentHeight = parentEl ? parentEl.clientHeight : 0
+        $xeList.updateHeight()
+        if (el.clientWidth && el.clientHeight) {
+          return $xeList.computeScrollLoad()
+        }
       }
-      return Promise.resolve()
+      return $xeList.$nextTick()
     },
     loadYData  (evnt: Event) {
       const $xeList = this
@@ -367,6 +405,16 @@ export default defineVxeComponent({
 
       $xeList.loadData(props.data || [])
     },
+    height () {
+      const $xeList = this
+
+      $xeList.recalculate()
+    },
+    maxHeight () {
+      const $xeList = this
+
+      $xeList.recalculate()
+    },
     syncResize (val) {
       const $xeList = this
 
@@ -380,9 +428,6 @@ export default defineVxeComponent({
     const $xeList = this
     const props = $xeList
 
-    globalEvents.on($xeList, 'resize', () => {
-      $xeList.recalculate()
-    })
     $xeList.loadData(props.data || [])
   },
   mounted () {
@@ -390,12 +435,17 @@ export default defineVxeComponent({
     const props = $xeList
     const internalData = $xeList.internalData
 
+    $xeList.recalculate()
     if (props.autoResize) {
       const el = $xeList.$refs.refElem as HTMLDivElement
       const resizeObserver = globalResize.create(() => $xeList.recalculate())
       resizeObserver.observe(el)
+      if (el) {
+        resizeObserver.observe(el.parentElement as HTMLDivElement)
+      }
       internalData.resizeObserver = resizeObserver
     }
+    globalEvents.on($xeList, 'resize', $xeList.recalculate)
   },
   activated () {
     const $xeList = this

package/packages/ui/index.ts

@@ -79,6 +79,7 @@ setConfig({
   },
   collapsePane: {},
   countdown: {},
+  colorPicker: {},
   datePicker: {
     // size: null,
     // transfer: false

package/packages/upload/src/upload.ts

@@ -1008,7 +1008,7 @@ export default defineVxeComponent({
           slots: {
             default (params, h) {
               const { showErrorStatus, dragToUpload, dragSort } = props
-              const { isDragMove, isDragUploadStatus, dragIndex } = reactData
+              const { isActivated, isDragMove, isDragUploadStatus, dragIndex } = reactData
               const { fileList } = reactData
               const isDisabled = $xeUpload.computeIsDisabled
 
@@ -1026,6 +1026,7 @@ export default defineVxeComponent({
                 class: ['vxe-upload--more-popup', {
                   'is--readonly': formReadonly,
                   'is--disabled': isDisabled,
+                  'is--active': isActivated,
                   'show--error': showErrorStatus,
                   'is--drag': isDragUploadStatus
                 }],
@@ -1199,8 +1200,14 @@ export default defineVxeComponent({
       const $xeUpload = this
       const reactData = $xeUpload.reactData
 
-      const el = $xeUpload.$refs.refElem
-      const isActivated = getEventTargetNode(evnt, el).flag
+      const el = $xeUpload.$refs.refElem as HTMLDivElement
+      const popupEl = $xeUpload.$refs.refPopupElem as HTMLDivElement
+      let isActivated = getEventTargetNode(evnt, el).flag
+      if (!isActivated && popupEl) {
+        const parentEl = popupEl.parentElement || popupEl
+        const modalEl = parentEl ? parentEl.parentElement : parentEl
+        isActivated = getEventTargetNode(evnt, modalEl).flag
+      }
       reactData.isActivated = isActivated
     },
     handleGlobalBlurEvent () {

package/styles/components/upload.scss

@@ -2,17 +2,6 @@
   position: relative;
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
-  &.is--active {
-    .vxe-upload--image-action-box {
-      border-color: var(--vxe-ui-font-primary-color);
-    }
-    .vxe-upload--file-action-btn {
-      & > .vxe-button {
-        border-color: var(--vxe-ui-font-primary-color);
-        border-style: var(--vxe-ui-upload-file-button-border-style);
-      }
-    }
-  }
   &.show--error {
     .vxe-upload--file-item {
       &.is--error {
@@ -29,8 +18,20 @@
     }
   }
 }
+
 .vxe-upload,
 .vxe-upload--more-popup {
+  &.is--active {
+    .vxe-upload--image-action-box {
+      border-color: var(--vxe-ui-font-primary-color);
+    }
+    .vxe-upload--file-action-btn {
+      & > .vxe-button {
+        border-color: var(--vxe-ui-font-primary-color);
+        border-style: var(--vxe-ui-upload-file-button-border-style);
+      }
+    }
+  }
   &.is--disabled {
     .vxe-upload--file-action-btn,
     .vxe-upload--image-action-box {

package/types/components/color-picker.d.ts

@@ -1,4 +1,4 @@
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentStyleType } from '@vxe-ui/core'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
 
@@ -16,9 +16,32 @@ export interface ColorPickerPrivateRef {
 export interface VxeColorPickerPrivateRef extends ColorPickerPrivateRef { }
 
 export namespace VxeColorPickerPropTypes {
+  export type ModelValue = string
+  export type Size = VxeComponentSizeType
+  export type ClassName = string | ((params: { $colorPicker: VxeColorPickerConstructor }) => string)
+  export type PopupClassName = string | ((params: {$colorPicker: VxeColorPickerConstructor }) => string)
+  export type Readonly = boolean
+  export type Disabled = boolean
+  export type Placeholder = string
+  export type Clearable = boolean
+  export type Placement = 'top' | 'bottom' | '' | null
+  export type Transfer = boolean
 }
 
 export interface VxeColorPickerProps {
+  /**
+   * 绑定值
+   */
+  modelValue?: VxeColorPickerPropTypes.ModelValue
+  size?: VxeColorPickerPropTypes.Size
+  className?: VxeColorPickerPropTypes.ClassName
+  popupClassName?: VxeColorPickerPropTypes.PopupClassName
+  readonly?: VxeColorPickerPropTypes.Readonly
+  disabled?: VxeColorPickerPropTypes.Disabled
+  placeholder?: VxeColorPickerPropTypes.Placeholder
+  clearable?: VxeColorPickerPropTypes.Clearable
+  placement?: VxeColorPickerPropTypes.Placement
+  transfer?: VxeColorPickerPropTypes.Transfer
 }
 
 export interface ColorPickerPrivateComputed {
@@ -26,6 +49,18 @@ export interface ColorPickerPrivateComputed {
 export interface VxeColorPickerPrivateComputed extends ColorPickerPrivateComputed { }
 
 export interface ColorPickerReactData {
+  initialized: boolean
+  selectColor: string
+  panelIndex: number
+  panelStyle: VxeComponentStyleType
+  panelPlacement: any
+  visiblePanel: boolean
+  isAniVisible: boolean
+  isActivated: boolean
+}
+
+export interface ColorPickerInternalData {
+  hpTimeout?: undefined | number
 }
 
 export interface ColorPickerMethods {
@@ -35,7 +70,12 @@ export interface VxeColorPickerMethods extends ColorPickerMethods { }
 export interface ColorPickerPrivateMethods { }
 export interface VxeColorPickerPrivateMethods extends ColorPickerPrivateMethods { }
 
-export type VxeColorPickerEmits = []
+export type VxeColorPickerEmits = [
+  'update:modelValue',
+  'change',
+  'clear',
+  'click'
+]
 
 export namespace VxeColorPickerDefines {
   export interface ColorPickerEventParams extends VxeComponentEventParams {

package/types/components/list.d.ts

@@ -63,7 +63,9 @@ export interface VxeListPrivateComputed extends ListPrivateComputed { }
 export interface ListReactData {
   scrollYLoad: boolean
   bodyHeight: number
-  rowHeight: number
+  customHeight: number
+  customMaxHeight: number
+  parentHeight: number
   topSpaceHeight: number
   items: any[]
 }

package/types/components/table-module/edit.d.ts

@@ -14,18 +14,37 @@ export interface TableEditMethods<D = any> {
    * 如果 row 为 -1 则从插入到底部，如果为树结构，则插入到目标节点底部
    * 如果 row 为有效行则插入到该行的位置，如果为树结构，则有插入到效的目标节点该行的位置
    * @param {Object/Array} records 新的数据
-   * @param {Row} row 指定行
+   * @param {Row} targetRow 指定行
    */
-  insertAt(records: any, row: any | -1 | null): Promise<{ row: D, rows: D[] }>
+  insertAt(records: any, targetRow: any | -1 | null): Promise<{ row: D, rows: D[] }>
   /**
-   * 往表格在指定行中的下一行插入临时数据
+   * 与 insertAt 行为一致，区别就是会插入指定目标的到下一行
+   * @param records records 新的数据
+   * @param targetRow row 指定行
+   */
+  insertNextAt(records: any, targetRow: any | -1 | null): Promise<{ row: D, rows: D[] }>
+  /**
+   * 用于树结构，往指定节点插入子级临时数据，从子级的第一行新增一行或多行新数据
+   * @param records 新数据
+   */
+  insertChild(records: any, parentRow: any): Promise<{ row: D, rows: D[] }>
+  /**
+   * 用于树结构，往指定节点插入子级临时数据
    * 如果 row 为空则从插入到顶部，如果为树结构，则插入到目标节点顶部
    * 如果 row 为 -1 则从插入到底部，如果为树结构，则插入到目标节点底部
-   * 如果 row 为有效行则插入到该行的下一行位置，如果为树结构，则有插入到效的目标节点该行的下一行位置
-   * @param records records 新的数据
-   * @param row row 指定行
+   * 如果 row 为有效行则插入到该行的位置，如果为树结构，则有插入到效的目标节点该行的位置
+   * @param records 新的数据
+   * @param parentRow 父节点
+   * @param targetRow 指定子节点
+   */
+  insertChildAt(records: any, parentRow: any, targetRow: any | -1 | null): Promise<{ row: D, rows: D[] }>
+  /**
+   * 与 insertChildAt 行为一致，区别就是会插入指定目标子级的到下一行
+   * @param records 新的数据
+   * @param parentRow 父节点
+   * @param targetRow 指定子节点
    */
-  insertNextAt(records: any, row: any | -1 | null): Promise<{ row: D, rows: D[] }>
+  insertChildNextAt(records: any, parentRow: any, targetRow: any | -1 | null): Promise<{ row: D, rows: D[] }>
   /**
    * 删除指定行数据，指定 row 或 [row, ...] 删除多条数据，如果为空则删除所有数据
    * @param rows 指定行