vxe-pc-ui 4.14.26 → 4.14.28

package/packages/upload/src/upload.ts

@@ -407,6 +407,7 @@ export default defineVxeComponent({
     })
 
     const computeMaps: VxeUploadPrivateComputed = {
+      computeUrlProp
     }
 
     const $xeUpload = {
@@ -827,21 +828,23 @@ export default defineVxeComponent({
       })
     }
 
-    const handleRemoveEvent = (evnt: MouseEvent, item: VxeUploadDefines.FileObjItem, index: number) => {
+    const handleRemoveEvent = (evnt: Event | null, item: VxeUploadDefines.FileObjItem, index: number) => {
       const { fileList } = reactData
       fileList.splice(index, 1)
       handleChange(fileList)
       // 自动更新校验状态
       if ($xeForm && formItemInfo) {
-        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, fileList)
+        $xeForm.triggerItemEvent(evnt || { type: 'remove' }, formItemInfo.itemConfig.field, fileList)
+      }
+      if (evnt) {
+        dispatchEvent('remove', { option: item }, evnt)
       }
-      dispatchEvent('remove', { option: item }, evnt)
     }
 
-    const removeFileEvent = (evnt: MouseEvent, item: VxeUploadDefines.FileObjItem, index: number) => {
+    const removeFileEvent = (evnt: Event | null, item: VxeUploadDefines.FileObjItem, index: number) => {
       const beforeRemoveFn = props.beforeRemoveMethod || getConfig().upload.beforeRemoveMethod
       const removeFn = props.removeMethod || getConfig().upload.removeMethod
-      Promise.resolve(
+      return Promise.resolve(
         beforeRemoveFn
           ? beforeRemoveFn({
             $upload: $xeUpload,
@@ -863,8 +866,11 @@ export default defineVxeComponent({
             handleRemoveEvent(evnt, item, index)
           }
         } else {
-          dispatchEvent('remove-fail', { option: item }, evnt)
+          if (evnt) {
+            dispatchEvent('remove-fail', { option: item }, evnt)
+          }
         }
+        return status
       })
     }
 
@@ -1250,11 +1256,58 @@ export default defineVxeComponent({
       reactData.isActivated = false
     }
 
+    const handleClearFile = (evnt: Event | null) => {
+      const { fileList } = reactData
+      const urlProp = computeUrlProp.value
+      const rest: Promise<{
+        url: string
+        status: boolean
+      }>[] = []
+      XEUtils.lastEach(fileList, (item, index) => {
+        rest.push(
+          removeFileEvent(evnt, item, index).then((status) => {
+            return { url: item[urlProp], status }
+          })
+        )
+      })
+      return Promise.all(rest)
+    }
+
+    const handleRemoveFile = (evnt: Event | null, urlOrItem: string | VxeUploadDefines.FileObjItem | string[] | VxeUploadDefines.FileObjItem[] | null) => {
+      const { fileList } = reactData
+      const urlProp = computeUrlProp.value
+      const urls = (XEUtils.isArray(urlOrItem) ? urlOrItem : [urlOrItem])
+      const rest: Promise<{
+        url: string
+        status: boolean
+      }>[] = []
+      urls.forEach((obj) => {
+        if (obj) {
+          const url = XEUtils.isString(obj) ? obj : obj[urlProp]
+          const index = XEUtils.findIndexOf(fileList, fileItem => fileItem[urlProp] === url)
+          if (index > -1) {
+            rest.push(
+              removeFileEvent(evnt, fileList[index], index).then(status => {
+                return { url, status }
+              })
+            )
+          }
+        }
+      })
+      return Promise.all(rest)
+    }
+
     const uploadMethods: UploadMethods = {
       dispatchEvent,
       choose () {
         return handleChoose(null)
       },
+      clear () {
+        return handleClearFile(null)
+      },
+      clearByEvent (evnt) {
+        return handleClearFile(evnt)
+      },
       getPendingFiles () {
         const { fileList, fileCacheMaps } = reactData
         const pendingFiles: File[] = []
@@ -1320,10 +1373,17 @@ export default defineVxeComponent({
           VxeUI.modal.close(internalData.moreId)
         }
         return nextTick()
+      },
+      remove (urlOrItem) {
+        return handleRemoveFile(null, urlOrItem)
+      },
+      removeByEvent (evnt, urlOrItem) {
+        return handleRemoveFile(evnt, urlOrItem)
       }
     }
 
     const uploadPrivateMethods: UploadPrivateMethods = {
+      removeFileEvent
     }
 
     Object.assign($xeUpload, uploadMethods, uploadPrivateMethods)

package/styles/components/date-panel.scss

@@ -187,6 +187,7 @@
   flex-direction: row;
 }
 .vxe-date-panel--view-item {
+  position: relative;
   padding: 0.2em;
   &.is--prev,
   &.is--next {
@@ -246,6 +247,9 @@
       }
     }
   }
+  &.is--range-selected {
+    background-color: var(--vxe-ui-font-primary-tinge-color);
+  }
   &.is--range-disabled {
     .vxe-date-panel--view-item-inner {
       color: var(--vxe-ui-input-disabled-color);

package/styles/components/form.scss

@@ -139,7 +139,7 @@
     pointer-events: auto;
   }
   .vxe-form-item--valid-error-theme-beautify {
-    padding: 0.2em 0.6em 0.25em 0.6em;
+    padding: 0.15em 0.6em 0.2em 0.6em;
     color: #fff;
     background-color: var(--vxe-ui-status-error-color);
     .vxe-form-item--valid-error-msg {
@@ -211,7 +211,7 @@
   box-shadow: 2px 2px 4px -2px rgba(0,0,0,.5);
 }
 .vxe-form-item--valid-error-icon-theme-beautify {
-  padding: 0.2em 0.6em 0.25em 0.6em;
+  padding: 0.15em 0.6em 0.2em 0.6em;
   color: #fff;
   background-color: var(--vxe-ui-status-error-color);
   .vxe-form-item--valid-error-msg {

package/styles/components/radio.scss

@@ -2,7 +2,7 @@
 
 /*radio-group*/
 .vxe-radio-group {
-  display: inline-block;
+  display: inline-flex;
   vertical-align: middle;
   line-height: 1;
   font-size: 0;
@@ -15,7 +15,7 @@
 
 /*radio*/
 .vxe-radio {
-  display: inline-block;
+  display: inline-flex;
   vertical-align: middle;
   white-space: nowrap;
   line-height: 1;

package/types/components/date-panel.d.ts

@@ -27,6 +27,12 @@ export namespace VxeDatePanelPropTypes {
   export type Size = VxeComponentSizeType
   export type ModelValue = string | number | Date | null
   export type ClassName = string
+  export type CellClassName = string | ((params: {
+    $datePanel: VxeDatePanelConstructor
+    type: string
+    viewType: VxeDatePanelDefines.DatePanelType
+    date: Date
+  }) => string)
   export type Type = 'date' | 'time' | 'datetime' | 'week' | 'month' | 'quarter' | 'year'
   export type Multiple = boolean
   export type LimitCount = string | number
@@ -76,6 +82,7 @@ export interface VxeDatePanelProps {
   size?: VxeDatePanelPropTypes.Size
   modelValue?: VxeDatePanelPropTypes.ModelValue
   className?: VxeDatePanelPropTypes.ClassName
+  cellClassName?: VxeDatePanelPropTypes.CellClassName
   type?: VxeDatePanelPropTypes.Type
   multiple?: VxeDatePanelPropTypes.Multiple
   limitCount?: VxeDatePanelPropTypes.LimitCount

package/types/components/form.d.ts

@@ -189,6 +189,8 @@ export interface FormInternalData {
       label?: any
     }
   }>
+  fullItemIdData: Record<string, VxeFormDefines.ItemCacheItem>
+  fullItemFieldData: Record<string, VxeFormDefines.ItemCacheItem>
 }
 
 export interface FormMethods<D = any> {
@@ -216,7 +218,6 @@ export interface FormMethods<D = any> {
   /**
    * 更新项状态
    * 当使用自定义渲染时可能会用到
-   * @param params 插槽对象
    */
   updateStatus(
     params: {
@@ -228,14 +229,26 @@ export interface FormMethods<D = any> {
    * 获取表单项列表
    */
   getItems(): VxeFormDefines.ItemInfo[]
+  /**
+   * 加载表单项
+   */
+  loadItems(items: VxeFormPropTypes.Items | VxeFormDefines.ItemInfo[]): Promise<any>
+  /**
+   * 隐藏指定项
+   */
+  hideItem(fieldOrItems?: VxeFormItemPropTypes.Field | VxeFormItemPropTypes.Field[] | VxeFormDefines.ItemInfo | VxeFormDefines.ItemInfo[] | null): Promise<void>
+  /**
+   * 显示指定项
+   */
+  showItem(fieldOrItems?: VxeFormItemPropTypes.Field | VxeFormItemPropTypes.Field[] | VxeFormDefines.ItemInfo | VxeFormDefines.ItemInfo[] | null): Promise<void>
+  /**
   /**
    * 根据列的字段名获取表单项
-   * @param field 字段名
    *
    */
   getItemByField(field: VxeFormItemPropTypes.Field): VxeFormDefines.ItemInfo | null
   /**
-   * 关闭 tooltip 提示
+   * 手动关闭 tooltip 提示
    */
   closeTooltip(): Promise<any>
   /**
@@ -292,6 +305,12 @@ export type VxeFormEmits = [
 ]
 
 export namespace VxeFormDefines {
+  export interface ItemCacheItem {
+    item: ItemInfo
+    index: number
+    items: ItemInfo[]
+  }
+
   export class ItemInfo {
     id: string
 

package/types/components/notice-bar.d.ts

@@ -92,10 +92,14 @@ export namespace VxeNoticeBarEvents {
 
 export namespace VxeNoticeBarSlotTypes {
   export interface DefaultSlotParams {}
+  export interface PrefixSlotParams {}
+  export interface SuffixSlotParams {}
 }
 
 export interface VxeNoticeBarSlots {
   default?: (params: VxeNoticeBarSlotTypes.DefaultSlotParams) => any
+  prefix?: (params: VxeNoticeBarSlotTypes.PrefixSlotParams) => any
+  suffix?: (params: VxeNoticeBarSlotTypes.SuffixSlotParams) => any
 }
 
 export const NoticeBar: typeof VxeNoticeBar

package/types/components/upload.d.ts

@@ -1,4 +1,4 @@
-import { RenderFunction, SetupContext, Ref } from 'vue'
+import { RenderFunction, SetupContext, Ref, ComputedRef } from 'vue'
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType } from '@vxe-ui/core'
 import { VxeImagePropTypes } from './image'
 import { VxeImagePreviewProps } from './image-preview'
@@ -219,6 +219,7 @@ export interface VxeUploadProps {
 }
 
 export interface UploadPrivateComputed {
+  computeUrlProp: ComputedRef<string>
 }
 export interface VxeUploadPrivateComputed extends UploadPrivateComputed { }
 
@@ -258,6 +259,20 @@ export interface UploadMethods {
    * 用于 auto-upload 模式，手动调用上传附件；如果传 true，这包含未上传和上传失败的都会重新提交
    */
   submit(isFull?: boolean): Promise<void>
+  /**
+   * 清除所有文件
+   */
+  clear(): Promise<{
+    url: string
+    status: boolean
+  }[]>
+  /**
+   * 区别就是会触发对应的事件
+   */
+  clearByEvent(event: Event): Promise<{
+    url: string
+    status: boolean
+  }[]>
   /**
    * 获取更多弹窗的可视状态
    */
@@ -274,10 +289,30 @@ export interface UploadMethods {
    * 关闭更多弹窗
    */
   closeMore(): Promise<void>
+  /**
+   * 删除指定文件
+   */
+  remove(urlOrItem: string | VxeUploadDefines.FileObjItem | string[] | VxeUploadDefines.FileObjItem[] | null): Promise<{
+    url: string
+    status: boolean
+  }[]>
+  /**
+   * 区别就是会触发对应的事件
+   */
+  removeByEvent(event: Event, urlOrItem: string | VxeUploadDefines.FileObjItem | string[] | VxeUploadDefines.FileObjItem[] | null): Promise<{
+    url: string
+    status: boolean
+  }[]>
 }
 export interface VxeUploadMethods extends UploadMethods { }
 
-export interface UploadPrivateMethods { }
+export interface UploadPrivateMethods {
+  /**
+   * 内部方法
+   * @private
+   */
+  removeFileEvent(evnt: Event | null, item: VxeUploadDefines.FileObjItem, index: number): Promise<any>
+}
 export interface VxeUploadPrivateMethods extends UploadPrivateMethods { }
 
 export type VxeUploadEmits = [