vxe-pc-ui 4.9.26 → 4.9.28

package/packages/form/src/render.ts

@@ -1,5 +1,5 @@
-import { createCommentVNode, h, VNode } from 'vue'
-import { getIcon, getI18n, formats, renderer } from '../../ui'
+import { h, VNode } from 'vue'
+import { getIcon, getI18n, formats, renderer, renderEmptyElement } from '../../ui'
 import { eqEmptyValue, getFuncText, isEnableConf } from '../../ui/src/utils'
 import { toCssUnit } from '../../ui/src/dom'
 import { getSlotVNs } from '../../ui/src/vn'
@@ -32,14 +32,18 @@ function renderSuffixIcon (titleSuffix: VxeFormItemPropTypes.TitleSuffix) {
   ])
 }
 
-export const getItemClass = ($xeForm: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo, isGroup?: boolean) => {
+export function getItemClass ($xeForm: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo, isGroup?: boolean) {
   const formProps = $xeForm.props
   const formReactData = $xeForm.reactData
   const $xeGrid = $xeForm.xeGrid
 
+  const { computeSize, computeValidOpts } = $xeForm.getComputeMaps()
   const { data, rules, readonly, disabled, span: allSpan, titleBackground: allTitleBackground, titleBold: allTitleBold, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, vertical: allVertical, padding: allPadding } = formProps
   const { collapseAll } = formReactData
   const { folding, field, itemRender, showError, className, vertical, padding, children, showContent } = item
+  const vSize = computeSize.value
+  const validOpts = computeValidOpts.value
+  const { showErrorMessage, showMessage, showErrorIcon } = validOpts
   const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null
   const itemClassName = compConf ? (compConf.formItemClassName || compConf.itemClassName) : ''
   const span = item.span || allSpan
@@ -65,9 +69,11 @@ export const getItemClass = ($xeForm: VxeFormConstructor & VxeFormPrivateMethods
     'vxe-form--item',
     item.id,
     span ? `vxe-form--item-col_${span} is--span` : '',
+    `${(XEUtils.isBoolean(showErrorMessage) ? showErrorMessage : showMessage) ? 'show' : 'hide'}--err-msg`,
     className ? (XEUtils.isFunction(className) ? className(params) : className) : '',
     itemClassName ? (XEUtils.isFunction(itemClassName) ? itemClassName(params) : itemClassName) : '',
     {
+      [`size--${vSize}`]: vSize,
       'is--colon': titleColon,
       'is--tbg': titleBackground,
       'is--bold': titleBold,
@@ -79,12 +85,13 @@ export const getItemClass = ($xeForm: VxeFormConstructor & VxeFormPrivateMethods
       'is--required': isRequired,
       'is--hidden': folding && collapseAll,
       'is--active': isActiveItem($xeForm, item),
+      'err--icon': showErrorIcon,
       'is--error': showError
     }
   ]
 }
 
-export const getItemContentClass = ($xeForm: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo, isGroup?: boolean) => {
+export function getItemContentClass ($xeForm: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo, isGroup?: boolean) {
   const formProps = $xeForm.props
   const $xeGrid = $xeForm.xeGrid
 
@@ -224,10 +231,47 @@ export function renderTitle ($xeForm: VxeFormConstructor & VxeFormPrivateMethods
         class: 'vxe-form--item-title-postfix'
       }, fixVNs)
     ])
-    : createCommentVNode()
+    : renderEmptyElement($xeForm)
+}
+
+export function renderItemErrorIcon ($xeForm: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo) {
+  const { computeValidOpts } = $xeForm.getComputeMaps()
+  const validOpts = computeValidOpts.value
+  const { showErrorIcon, errorIcon } = validOpts
+  const { errRule, showIconMsg } = item
+  if (!showErrorIcon) {
+    return renderEmptyElement($xeForm)
+  }
+  return h('div', {
+    key: 'emi',
+    class: ['vxe-form-item--valid-error-icon-wrapper', {
+      'is--show': showIconMsg,
+      'is--hide': !showIconMsg
+    }]
+  }, [
+    h('span', {
+      class: 'vxe-form-item--valid-error-icon-btn',
+      onClick (evnt) {
+        $xeForm.handleValidIconEvent(evnt, { item })
+      }
+    }, [
+      h('i', {
+        class: errorIcon || getIcon().FORM_VALID_ERROR_ICON
+      })
+    ]),
+    h('div', {
+      class: 'vxe-form-item--valid-error-icon-msg-tip'
+    }, errRule
+      ? [
+          h('div', {
+            class: `vxe-form-item--valid-error-icon-msg vxe-form-item--valid-error-icon-theme-${validOpts.theme || 'normal'}`
+          }, errRule.content || errRule.message)
+        ]
+      : [])
+  ])
 }
 
-export const renderItemContent = ($xeForm: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo) => {
+export function renderItemContent ($xeForm: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo) {
   const formProps = $xeForm.props
   const formReactData = $xeForm.reactData
   const formInternalData = $xeForm.internalData
@@ -242,6 +286,7 @@ export const renderItemContent = ($xeForm: VxeFormConstructor & VxeFormPrivateMe
   const validSlot = slots ? slots.valid : null
   const collapseOpts = computeCollapseOpts.value
   const validOpts = computeValidOpts.value
+  const { showErrorMessage, showMessage } = validOpts
   const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null
 
   const itemValue = XEUtils.get(data, field)
@@ -308,7 +353,7 @@ export const renderItemContent = ($xeForm: VxeFormConstructor & VxeFormPrivateMe
       ])
     )
   }
-  if (errRule && validOpts.showMessage) {
+  if (errRule && (XEUtils.isBoolean(showErrorMessage) ? showErrorMessage : showMessage)) {
     const validParams = { ...params, rule: errRule }
     contentVNs.push(
       h('div', {
@@ -334,6 +379,7 @@ export const renderItemContent = ($xeForm: VxeFormConstructor & VxeFormPrivateMe
     )
   }
   return h('div', {
+    key: 'ct',
     class: 'vxe-form--item-inner'
   }, contentVNs)
 }

package/packages/notice-bar/src/notice-bar.ts

@@ -29,6 +29,8 @@ export default defineVxeComponent({
     }
   },
   emits: [
+    'start',
+    'end'
   ] as VxeNoticeBarEmits,
   setup (props, context) {
     const { slots, emit } = context
@@ -43,6 +45,7 @@ export default defineVxeComponent({
     const refContentElem = ref<HTMLDivElement>()
 
     const reactData = reactive<NoticeBarReactData>({
+      animationStatus: false,
       animationDuration: 0
     })
 
@@ -97,11 +100,21 @@ export default defineVxeComponent({
       }
     }
 
+    const animationStartEvent = (evnt: AnimationEvent) => {
+      reactData.animationStatus = true
+      dispatchEvent('start', { status: true }, evnt)
+    }
+
+    const animationEndEvent = (evnt: AnimationEvent) => {
+      reactData.animationStatus = false
+      dispatchEvent('end', { status: false }, evnt)
+    }
+
     Object.assign($xeNoticeBar, noticeBarMethods, noticeBarPrivateMethods)
 
     const renderVN = () => {
-      const { vertical, duration, direction } = props
-      const { animationDuration } = reactData
+      const { vertical, duration, direction, loop } = props
+      const { animationDuration, animationStatus } = reactData
       const vSize = computeSize.value
       const noticeText = computeNoticeText.value
       const defaultSlot = slots.default
@@ -111,7 +124,8 @@ export default defineVxeComponent({
       return h('div', {
         ref: refElem,
         class: ['vxe-notice-bar', `is--${vertical ? 'vertical' : 'horizontal'}`, `dir--${direction || 'left'}`, {
-          [`size--${vSize}`]: vSize
+          [`size--${vSize}`]: vSize,
+          'is--loop': loop
         }]
       }, [
         prefixSlot
@@ -127,10 +141,12 @@ export default defineVxeComponent({
             class: 'vxe-notice-bar--inner'
           }, [
             h('div', {
-              class: 'vxe-notice-bar--wrapper',
+              class: ['vxe-notice-bar--wrapper', `is--${animationStatus ? 'progress' : 'end'}`],
               style: {
                 animationDuration: duration ? toCssUnit(duration, 's') : `${animationDuration}s`
-              }
+              },
+              onAnimationstart: animationStartEvent,
+              onAnimationend: animationEndEvent
             }, defaultSlot ? defaultSlot({}) : noticeText)
           ])
         ]),

package/packages/ui/index.ts

@@ -137,7 +137,7 @@ setConfig({
     // size: null,
     // colon: false,
     validConfig: {
-      showMessage: true,
+      showErrorMessage: true,
       autoPos: true,
       theme: 'beautify'
     },
@@ -508,6 +508,7 @@ setIcon({
   FORM_SUFFIX: iconPrefix + 'question-circle-fill',
   FORM_FOLDING: iconPrefix + 'arrow-up rotate180',
   FORM_UNFOLDING: iconPrefix + 'arrow-up',
+  FORM_VALID_ERROR_ICON: iconPrefix + 'warning-circle-fill',
 
   // form-design
   FORM_DESIGN_STYLE_SETTING: iconPrefix + 'layout',

package/styles/components/form.scss

@@ -169,21 +169,60 @@
   width: 100%;
 }
 
+.vxe-form-item--valid-error-icon-wrapper {
+  visibility: hidden;
+  position: relative;
+  flex-shrink: 0;
+  padding-left: 0.5em;
+  color: var(--vxe-ui-form-validate-error-color);
+  &.is--hide {
+    .vxe-form-item--valid-error-icon-msg-tip {
+      width: 0;
+      padding: 0;
+    }
+  }
+}
+.vxe-form-item--valid-error-icon-btn {
+  position: relative;
+  user-select: none;
+  z-index: 6;
+  cursor: help;
+}
+.vxe-form-item--valid-error-icon-msg-tip {
+  position: absolute;
+  top: 50%;
+  right: 0.8em;
+  display: block;
+  max-width: 24em;
+  padding: 0.4em;
+  overflow: hidden;
+  z-index: 5;
+  transform: translateY(-50%);
+}
+.vxe-form-item--valid-error-icon-msg {
+  border-radius: var(--vxe-ui-base-border-radius);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  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;
+  color: #fff;
+  background-color: var(--vxe-ui-status-error-color);
+  .vxe-form-item--valid-error-msg {
+    background: transparent;
+  }
+}
+.vxe-form-item--valid-error-icon-theme-normal {
+  padding: 0 0.6em;
+  color: var(--vxe-ui-table-validate-error-color);
+  border: 1px solid var(--vxe-ui-table-validate-error-color);
+  background-color: var(--vxe-ui-table-validate-error-background-color);
+}
+
 .vxe-form--item {
   &.is--padding {
-    &.is--vertical {
-      & > .vxe-form--item-title {
-        padding: 0 0.6em;
-      }
-    }
-    &:not(.is--vertical) {
-      & > .vxe-form--item-title {
-        padding: 0.6em;
-      }
-    }
-    & > .vxe-form--item-content {
-      padding: 0.6em;
-    }
     & > .vxe-form--group-content {
       padding: 0;
     }
@@ -256,9 +295,16 @@
     }
   }
   &.is--error {
+    &.show--err-msg {
+      & > .vxe-form--item-content {
+        padding-top: 0;
+        padding-bottom: 1.3em;
+      }
+    }
     & > .vxe-form--item-content {
-      padding-top: 0;
-      padding-bottom: 1.3em;
+      & > .vxe-form-item--valid-error-icon-wrapper {
+        visibility: visible;
+      }
     }
     .vxe-input,
     .vxe-number-input,
@@ -429,6 +475,48 @@
   }
 }
 
+
+.vxe-form--item {
+  &.is--padding {
+    & > .vxe-form--item-title {
+      padding: 0 var(--vxe-ui-form-item-padding-default);
+    }
+    & > .vxe-form--item-content {
+      padding: 0 var(--vxe-ui-form-item-padding-default);
+    }
+  }
+  &.size--medium {
+    &.is--padding {
+      & > .vxe-form--item-title {
+        padding: 0 var(--vxe-ui-form-item-padding-medium);
+      }
+      & > .vxe-form--item-content {
+        padding: 0 var(--vxe-ui-form-item-padding-medium);
+      }
+    }
+  }
+  &.size--small {
+    &.is--padding {
+      & > .vxe-form--item-title {
+        padding: 0 var(--vxe-ui-form-item-padding-small);
+      }
+      & > .vxe-form--item-content {
+        padding: 0 var(--vxe-ui-form-item-padding-small);
+      }
+    }
+  }
+  &.size--mini {
+    &.is--padding {
+      & > .vxe-form--item-title {
+        padding: 0 var(--vxe-ui-form-item-padding-mini);
+      }
+      & > .vxe-form--item-content {
+        padding: 0 var(--vxe-ui-form-item-padding-mini);
+      }
+    }
+  }
+}
+
 .vxe-form {
   .vxe-form--item-title {
     &.align--center {

package/styles/components/notice-bar.scss

@@ -28,19 +28,31 @@
   animation-play-state: running;
 }
 .vxe-notice-bar {
+  &.is--loop {
+    .vxe-notice-bar--wrapper {
+      animation-iteration-count: infinite;
+    }
+  }
   &.is--horizontal {
     &.dir--left {
       .vxe-notice-bar--wrapper {
-        padding-left: 100%;
         animation-name: scrollLeftText;
       }
     }
     &.dir--right {
       .vxe-notice-bar--wrapper {
-        padding-left: 100%;
         animation-name: scrollRightText;
       }
     }
+    &.dir--left,
+    &.dir--right {
+      .vxe-notice-bar--wrapper {
+        padding-left: 100%;
+        &.is--end {
+          padding-left: 0;
+        }
+      }
+    }
     .vxe-notice-bar--wrapper {
       &:hover {
         animation-play-state: paused;

package/styles/components/tree.scss

@@ -119,6 +119,7 @@
   z-index: 7;
   & > i {
     display: inline-flex;
+    background-color: var(--vxe-ui-layout-background-color);
     @include baseMixin.createAnimationTransition(all, 0.2s);
   }
 }

package/styles/theme/base.scss

@@ -104,6 +104,10 @@
   --vxe-ui-form-item-min-height-small: 48px;
   --vxe-ui-form-item-min-height-mini: 44px;
   --vxe-ui-form-validate-error-color: var(--vxe-ui-status-error-color);
+  --vxe-ui-form-item-padding-default: 8px;
+  --vxe-ui-form-item-padding-medium: 7px;
+  --vxe-ui-form-item-padding-small: 6px;
+  --vxe-ui-form-item-padding-mini: 5px;
   --vxe-ui-form-validate-error-background-color: inherit;
 
   /*form-design*/

package/types/components/form.d.ts

@@ -68,11 +68,28 @@ export namespace VxeFormPropTypes {
   export type PreventSubmit = boolean
   export type ValidConfig = {
     autoPos?: boolean
-    showMessage?: boolean
+    /**
+     * 当校验不通过时在对应项显示错误提示
+     */
+    showErrorMessage?: boolean
+    /**
+     * 当校验不通过时在对应项显示错误图标
+     */
+    showErrorIcon?: boolean
+    /**
+     * 自定义错误图标
+     */
+    errorIcon?: boolean
     /**
      * 提示消息主题样式
      */
     theme?: 'normal' | 'beautify' | ''
+
+    /**
+     * 已废弃，被 showErrorMessage 替换
+     * @deprecated
+     */
+    showMessage?: boolean
   }
 
   /**
@@ -236,6 +253,9 @@ export interface FormPrivateMethods {
     item: VxeFormDefines.ItemInfo
   }): void
   handleTitleTipLeaveEvent(): void
+  handleValidIconEvent(evnt: Event, params: {
+    item: VxeFormDefines.ItemInfo
+  }): void
 }
 export interface VxeFormPrivateMethods extends FormPrivateMethods { }
 
@@ -287,6 +307,7 @@ export namespace VxeFormDefines {
     params: any
     // 渲染属性
     showError: boolean
+    showIconMsg: boolean
     errRule: any
     slots: VxeFormItemPropTypes.Slots
     children: ItemInfo[]

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

@@ -47,6 +47,7 @@ export interface NoticeBarPrivateComputed {
 export interface VxeNoticeBarPrivateComputed extends NoticeBarPrivateComputed { }
 
 export interface NoticeBarReactData {
+  animationStatus: boolean
   animationDuration: number
 }
 
@@ -59,19 +60,35 @@ export interface NoticeBarPrivateMethods { }
 export interface VxeNoticeBarPrivateMethods extends NoticeBarPrivateMethods { }
 
 export type VxeNoticeBarEmits = [
+  'start',
+  'end'
 ]
 
 export namespace VxeNoticeBarDefines {
   export interface NoticeBarEventParams extends VxeComponentEventParams {
     $noticeBar: VxeNoticeBarConstructor
   }
+
+  export interface StartEventParams {
+    status: boolean
+  }
+  export interface EndEventParams extends StartEventParams {}
 }
 
-export type VxeNoticeBarEventProps = {}
+export type VxeNoticeBarEventProps = {
+  onStart?: VxeNoticeBarEvents.Start
+  onEnd?: VxeNoticeBarEvents.End
+}
 
-export interface VxeNoticeBarListeners { }
+export interface VxeNoticeBarListeners {
+  start?: VxeNoticeBarEvents.Start
+  end?: VxeNoticeBarEvents.End
+}
 
-export namespace VxeNoticeBarEvents { }
+export namespace VxeNoticeBarEvents {
+  export type Start = (params: VxeNoticeBarDefines.StartEventParams) => void
+  export type End = (params: VxeNoticeBarDefines.EndEventParams) => void
+}
 
 export namespace VxeNoticeBarSlotTypes {
   export interface DefaultSlotParams {}

package/types/ui/global-icon.d.ts

@@ -134,6 +134,7 @@ declare module '@vxe-ui/core' {
     FORM_SUFFIX?: string
     FORM_FOLDING?: string
     FORM_UNFOLDING?: string
+    FORM_VALID_ERROR_ICON?: string
 
     // form-design
     FORM_DESIGN_STYLE_SETTING?: string