vxe-pc-ui 4.11.27 → 4.11.29

package/packages/components.ts

@@ -7,6 +7,7 @@ import VxeAlert from './alert'
 import VxeAnchor from './anchor'
 import VxeAnchorLink from './anchor-link'
 import VxeAvatar from './avatar'
+import VxeBacktop from './backtop'
 import VxeBadge from './badge'
 import VxeBreadcrumb from './breadcrumb'
 import VxeBreadcrumbItem from './breadcrumb-item'
@@ -16,6 +17,7 @@ import VxeCalendar from './calendar'
 import VxeCard from './card'
 import VxeCarousel from './carousel'
 import VxeCarouselItem from './carousel-item'
+import VxeCascader from './cascader'
 import VxeCheckbox from './checkbox'
 import VxeCheckboxButton from './checkbox-button'
 import VxeCheckboxGroup from './checkbox-group'
@@ -64,6 +66,7 @@ import VxeRadioGroup from './radio-group'
 import VxeRate from './rate'
 import VxeResult from './result'
 import VxeRow from './row'
+import VxeSegmented from './segmented'
 import VxeSelect from './select'
 import VxeSplitter from './splitter'
 import VxeSplitterPanel from './splitter-panel'
@@ -79,8 +82,11 @@ import VxeTag from './tag'
 import VxeTextEllipsis from './text-ellipsis'
 import VxeText from './text'
 import VxeTextarea from './textarea'
+import VxeTimeline from './timeline'
+import VxeTimelineItem from './timeline-item'
 import VxeTip from './tip'
 import VxeTooltip from './tooltip'
+import VxeTour from './tour'
 import VxeTree from './tree'
 import VxeTreeSelect from './tree-select'
 import VxeUpload from './upload'
@@ -98,6 +104,7 @@ const components = [
   VxeAnchor,
   VxeAnchorLink,
   VxeAvatar,
+  VxeBacktop,
   VxeBadge,
   VxeBreadcrumb,
   VxeBreadcrumbItem,
@@ -107,6 +114,7 @@ const components = [
   VxeCard,
   VxeCarousel,
   VxeCarouselItem,
+  VxeCascader,
   VxeCheckbox,
   VxeCheckboxButton,
   VxeCheckboxGroup,
@@ -155,6 +163,7 @@ const components = [
   VxeRate,
   VxeResult,
   VxeRow,
+  VxeSegmented,
   VxeSelect,
   VxeSplitter,
   VxeSplitterPanel,
@@ -170,8 +179,11 @@ const components = [
   VxeTextEllipsis,
   VxeText,
   VxeTextarea,
+  VxeTimeline,
+  VxeTimelineItem,
   VxeTip,
   VxeTooltip,
+  VxeTour,
   VxeTree,
   VxeTreeSelect,
   VxeUpload,
@@ -206,6 +218,7 @@ export * from './alert'
 export * from './anchor'
 export * from './anchor-link'
 export * from './avatar'
+export * from './backtop'
 export * from './badge'
 export * from './breadcrumb'
 export * from './breadcrumb-item'
@@ -215,6 +228,7 @@ export * from './calendar'
 export * from './card'
 export * from './carousel'
 export * from './carousel-item'
+export * from './cascader'
 export * from './checkbox'
 export * from './checkbox-button'
 export * from './checkbox-group'
@@ -263,6 +277,7 @@ export * from './radio-group'
 export * from './rate'
 export * from './result'
 export * from './row'
+export * from './segmented'
 export * from './select'
 export * from './splitter'
 export * from './splitter-panel'
@@ -278,8 +293,11 @@ export * from './tag'
 export * from './text-ellipsis'
 export * from './text'
 export * from './textarea'
+export * from './timeline'
+export * from './timeline-item'
 export * from './tip'
 export * from './tooltip'
+export * from './tour'
 export * from './tree'
 export * from './tree-select'
 export * from './upload'

package/packages/date-range-picker/src/date-range-picker.ts

@@ -461,11 +461,12 @@ export default defineVxeComponent({
       reactData.startValue = sValue
       reactData.endValue = eValue
       const value = getRangeValue(sValue, eValue)
+      const isFinish = (sValue && eValue) || (!sValue && !eValue)
       emit('update:modelValue', value)
       emit('update:startValue', sValue || '')
       emit('update:endValue', eValue || '')
       if (XEUtils.toValueString(modelValue) !== value) {
-        dispatchEvent('change', { value }, evnt as any)
+        dispatchEvent('change', { value, startValue: sValue, endValue: eValue, isFinish }, evnt as any)
         // 自动更新校验状态
         if ($xeForm && formItemInfo) {
           $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)

package/packages/form/render/index.ts

@@ -404,11 +404,11 @@ renderer.mixin({
               // 处理 model 值双向绑定
               XEUtils.set(data, field, value)
             },
-            change () {
+            change ({ $event, isFinish }) {
               // 处理 change 事件相关逻辑
               $form.updateStatus(params)
-              if (renderOpts.changeToSubmit) {
-                ($form as VxeFormConstructor & VxeFormPrivateMethods).handleSubmitEvent(new Event('change'))
+              if (renderOpts.changeToSubmit && isFinish) {
+                ($form as VxeFormConstructor & VxeFormPrivateMethods).handleSubmitEvent($event)
               }
             }
           }, seOs)

package/packages/form/src/render.ts

@@ -43,7 +43,7 @@ export function getItemClass ($xeForm: VxeFormConstructor & VxeFormPrivateMethod
   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 { showErrorMessage, showMessage, showErrorBackground, showErrorIcon } = validOpts
   const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null
   const itemClassName = compConf ? (compConf.formItemClassName || compConf.itemClassName) : ''
   const span = item.span || allSpan
@@ -64,12 +64,13 @@ export function getItemClass ($xeForm: VxeFormConstructor & VxeFormPrivateMethod
       isRequired = itemRules.some((rule) => rule.required)
     }
   }
+  const showErrMsg = XEUtils.isBoolean(showErrorMessage) ? showErrorMessage : showMessage
   return [
     isGroup || hasGroup ? 'vxe-form--group' : '',
     'vxe-form--item',
     item.id,
     span ? `vxe-form--item-col_${span} is--span` : '',
-    `${(XEUtils.isBoolean(showErrorMessage) ? showErrorMessage : showMessage) ? 'show' : 'hide'}--err-msg`,
+    `${showErrMsg ? 'show' : 'hide'}--err-msg`,
     className ? (XEUtils.isFunction(className) ? className(params) : className) : '',
     itemClassName ? (XEUtils.isFunction(itemClassName) ? itemClassName(params) : itemClassName) : '',
     {
@@ -86,6 +87,7 @@ export function getItemClass ($xeForm: VxeFormConstructor & VxeFormPrivateMethod
       'is--hidden': folding && collapseAll,
       'is--active': isActiveItem($xeForm, item),
       'err--icon': showErrorIcon,
+      'err--bg': showErrorBackground,
       'is--error': showError
     }
   ]

package/packages/layout-body/src/layout-body.ts

@@ -1,16 +1,30 @@
-import { ref, h, reactive, PropType } from 'vue'
+import { ref, h, reactive, PropType, computed } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
-import { getConfig, useSize, createEvent } from '../../ui'
-import VxeLoadingComponent from '../../loading/src/loading'
+import { getConfig, useSize, createEvent, renderEmptyElement } from '../../ui'
+import VxeLoadingComponent from '../../loading'
+import VxeUIBacktopComponent from '../../backtop'
 import XEUtils from 'xe-utils'
 
-import type { VxeLayoutBodyPropTypes, LayoutBodyReactData, LayoutBodyPrivateRef, VxeLayoutBodyEmits, LayoutBodyMethods, LayoutBodyPrivateMethods, VxeLayoutBodyPrivateComputed, VxeLayoutBodyConstructor, VxeLayoutBodyPrivateMethods, ValueOf } from '../../../types'
+import type { LayoutBodyInternalData, VxeLayoutBodyPropTypes, LayoutBodyReactData, LayoutBodyPrivateRef, VxeLayoutBodyEmits, LayoutBodyMethods, LayoutBodyPrivateMethods, VxeLayoutBodyPrivateComputed, VxeLayoutBodyConstructor, VxeLayoutBodyPrivateMethods, ValueOf } from '../../../types'
+
+function createInternalData (): LayoutBodyInternalData {
+  return {}
+}
+
+function createReactData (): LayoutBodyReactData {
+  return {}
+}
 
 export default defineVxeComponent({
   name: 'VxeLayoutBody',
   props: {
     loading: Boolean as PropType<VxeLayoutBodyPropTypes.Loading>,
     padding: Boolean as PropType<VxeLayoutBodyPropTypes.Padding>,
+    showBacktop: {
+      type: Boolean as PropType<VxeLayoutBodyPropTypes.ShowBacktop>,
+      default: () => getConfig().layoutBody.showBacktop
+    },
+    backtopConfig: Object as PropType<VxeLayoutBodyPropTypes.BacktopConfig>,
     size: {
       type: String as PropType<VxeLayoutBodyPropTypes.Size>,
       default: () => getConfig().layoutBody.size || getConfig().size
@@ -21,18 +35,25 @@ export default defineVxeComponent({
     const { slots, emit } = context
 
     const xID = XEUtils.uniqueId()
+    const backtopId = `vxe_layout_body_backtop_${xID}`
 
     const refElem = ref<HTMLDivElement>()
 
     const { computeSize } = useSize(props)
 
-    const reactData = reactive<LayoutBodyReactData>({
-    })
+    const internalData = createInternalData()
+    const reactData = reactive(createReactData())
 
     const refMaps: LayoutBodyPrivateRef = {
       refElem
     }
 
+    const computeBacktopOpts = computed(() => {
+      return Object.assign({}, getConfig().layoutBody.backtopConfig, props.backtopConfig, {
+        target: '#' + backtopId
+      })
+    })
+
     const computeMaps: VxeLayoutBodyPrivateComputed = {
       computeSize
     }
@@ -41,6 +62,7 @@ export default defineVxeComponent({
       xID,
       props,
       context,
+      internalData,
       reactData,
 
       getRefMaps: () => refMaps,
@@ -61,10 +83,11 @@ export default defineVxeComponent({
     Object.assign($xeLayoutBody, layoutBodyMethods, layoutBodyPrivateMethods)
 
     const renderVN = () => {
-      const { loading, padding } = props
+      const { loading, padding, showBacktop } = props
+      const backtopOpts = computeBacktopOpts.value
       const vSize = computeSize.value
       const defaultSlot = slots.default
-
+      const backtopSlot = slots.backtop
       return h('div', {
         ref: refElem,
         class: ['vxe-layout-body', {
@@ -74,6 +97,7 @@ export default defineVxeComponent({
         }]
       }, [
         h('div', {
+          id: showBacktop ? backtopId : '',
           class: 'vxe-layout-body--inner'
         }, defaultSlot ? defaultSlot({}) : []),
         /**
@@ -82,7 +106,17 @@ export default defineVxeComponent({
         h(VxeLoadingComponent, {
           class: 'vxe-list-view--loading',
           modelValue: loading
-        })
+        }),
+        /**
+         * 回到顶部
+         */
+        showBacktop
+          ? h(VxeUIBacktopComponent, backtopOpts, backtopSlot
+            ? {
+                default: backtopSlot
+              }
+            : undefined)
+          : renderEmptyElement($xeLayoutBody)
       ])
     }
 

package/packages/mention/index.ts

@@ -0,0 +1,16 @@
+import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeMentionComponent from './src/mention'
+import { dynamicApp } from '../dynamics'
+
+export const VxeMention = Object.assign({}, VxeMentionComponent, {
+  install (app: App) {
+    app.component(VxeMentionComponent.name as string, VxeMentionComponent)
+  }
+})
+
+dynamicApp.use(VxeMention)
+VxeUI.component(VxeMentionComponent)
+
+export const Mention = VxeMention
+export default VxeMention

package/packages/mention/src/mention.ts

@@ -0,0 +1,71 @@
+import { ref, h, reactive, PropType } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { getConfig, createEvent } from '../../ui'
+
+import type { MentionReactData, VxeMentionPropTypes, MentionPrivateRef, VxeMentionEmits, VxeMentionPrivateComputed, MentionMethods, MentionPrivateMethods, VxeMentionConstructor, VxeMentionPrivateMethods, ValueOf } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeMention',
+  props: {
+    size: {
+      type: String as PropType<VxeMentionPropTypes.Size>,
+      default: () => getConfig().mention.size || getConfig().size
+    }
+  },
+  emits: [
+  ] as VxeMentionEmits,
+  setup (props, context) {
+    const { emit } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<MentionReactData>({})
+
+    const refMaps: MentionPrivateRef = {
+      refElem
+    }
+
+    const computeMaps: VxeMentionPrivateComputed = {
+    }
+
+    const $xeMention = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeMentionConstructor & VxeMentionPrivateMethods
+
+    const dispatchEvent = (type: ValueOf<VxeMentionEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $mention: $xeMention }, params))
+    }
+
+    const tagMethods: MentionMethods = {
+      dispatchEvent
+    }
+
+    const tagPrivateMethods: MentionPrivateMethods = {
+    }
+
+    Object.assign($xeMention, tagMethods, tagPrivateMethods)
+
+    const renderVN = () => {
+      return h('div', {
+        ref: refElem,
+        class: 'vxe-mention'
+      })
+    }
+
+    $xeMention.renderVN = renderVN
+
+    return $xeMention
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/radio/src/button.ts

@@ -4,7 +4,7 @@ import XEUtils from 'xe-utils'
 import { getFuncText } from '../../ui/src/utils'
 import { getConfig, createEvent, useSize } from '../../ui'
 
-import type { VxeRadioButtonPropTypes, VxeRadioGroupConstructor, RadioButtonReactData, RadioButtonPrivateMethods, VxeRadioButtonConstructor, VxeRadioButtonEmits, VxeRadioGroupPrivateMethods, RadioButtonMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+import type { VxeRadioButtonPropTypes, VxeRadioGroupConstructor, RadioButtonReactData, RadioButtonPrivateMethods, VxeRadioButtonConstructor, VxeRadioButtonEmits, VxeRadioGroupPrivateMethods, RadioButtonMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf } from '../../../types'
 
 export default defineVxeComponent({
   name: 'VxeRadioButton',
@@ -87,10 +87,12 @@ export default defineVxeComponent({
       return $xeRadioGroup ? $xeRadioGroup.props.modelValue === radioValue : props.modelValue === radioValue
     })
 
+    const dispatchEvent = (type: ValueOf<VxeRadioButtonEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $radioGroup: $xeRadioGroup }, params))
+    }
+
     const radioButtonMethods: RadioButtonMethods = {
-      dispatchEvent (type, params, evnt) {
-        emit(type, createEvent(evnt, { $radioButton: $xeRadioButton }, params))
-      }
+      dispatchEvent
     }
 
     const radioButtonPrivateMethods: RadioButtonPrivateMethods = {
@@ -99,11 +101,12 @@ export default defineVxeComponent({
     Object.assign($xeRadioButton, radioButtonMethods, radioButtonPrivateMethods)
 
     const handleValue = (checkedValue: VxeRadioButtonPropTypes.CheckedValue, evnt: Event) => {
+      const { content } = props
       if ($xeRadioGroup) {
-        $xeRadioGroup.handleChecked({ label: checkedValue, checkedValue }, evnt)
+        $xeRadioGroup.handleChecked({ label: checkedValue, checkedValue, checkedLabel: content }, evnt)
       } else {
         emit('update:modelValue', checkedValue)
-        radioButtonMethods.dispatchEvent('change', { value: checkedValue, label: checkedValue }, evnt)
+        dispatchEvent('change', { value: checkedValue, label: checkedValue, checkedValue, checkedLabel: content }, evnt)
         // 自动更新校验状态
         if ($xeForm && formItemInfo) {
           $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, checkedValue)

package/packages/radio/src/group.ts

@@ -121,9 +121,10 @@ export default defineVxeComponent({
 
     const radioGroupPrivateMethods: RadioGroupPrivateMethods = {
       handleChecked (params, evnt) {
-        const value = params.checkedValue
+        const { checkedValue, checkedLabel } = params
+        const value = checkedValue
         emitModel(value)
-        dispatchEvent('change', { value, label: value, checkedValue: value }, evnt)
+        dispatchEvent('change', { value, label: value, checkedValue, checkedLabel }, evnt)
         // 自动更新校验状态
         if ($xeForm && formItemInfo) {
           $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)

package/packages/radio/src/radio.ts

@@ -89,11 +89,12 @@ export default defineVxeComponent({
     })
 
     const handleValue = (checkedValue: VxeRadioPropTypes.CheckedValue, evnt: Event) => {
+      const { content } = props
       if ($xeRadioGroup) {
-        $xeRadioGroup.handleChecked({ label: checkedValue, checkedValue }, evnt)
+        $xeRadioGroup.handleChecked({ label: checkedValue, checkedValue, checkedLabel: content }, evnt)
       } else {
         emit('update:modelValue', checkedValue)
-        dispatchEvent('change', { value: checkedValue, label: checkedValue, checkedValue }, evnt)
+        dispatchEvent('change', { value: checkedValue, label: checkedValue, checkedValue, checkedLabel: content }, evnt)
         // 自动更新校验状态
         if ($xeForm && formItemInfo) {
           $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, checkedValue)

package/packages/segmented/index.ts

@@ -0,0 +1,16 @@
+import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeSegmentedComponent from './src/segmented'
+import { dynamicApp } from '../dynamics'
+
+export const VxeSegmented = Object.assign({}, VxeSegmentedComponent, {
+  install (app: App) {
+    app.component(VxeSegmentedComponent.name as string, VxeSegmentedComponent)
+  }
+})
+
+dynamicApp.use(VxeSegmented)
+VxeUI.component(VxeSegmentedComponent)
+
+export const Segmented = VxeSegmented
+export default VxeSegmented