vxe-pc-ui 4.11.28 → 4.11.30

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/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/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

package/packages/segmented/src/segmented.ts

@@ -0,0 +1,264 @@
+import { ref, h, reactive, PropType, VNode, watch, computed, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { getConfig, createEvent, useSize, renderEmptyElement } from '../../ui'
+import { toCssUnit } from '../../ui/src/dom'
+
+import type { SegmentedReactData, VxeSegmentedPropTypes, SegmentedPrivateRef, VxeSegmentedEmits, VxeSegmentedPrivateComputed, SegmentedMethods, SegmentedPrivateMethods, VxeSegmentedConstructor, VxeSegmentedPrivateMethods, VxeComponentStyleType, ValueOf } from '../../../types'
+
+function createReactData (): SegmentedReactData {
+  return {
+    groupName: XEUtils.uniqueId('xe_group_'),
+    selectStyle: {
+      display: '',
+      left: '',
+      width: ''
+    }
+  }
+}
+
+export default defineVxeComponent({
+  name: 'VxeSegmented',
+  props: {
+    modelValue: [String, Number] as PropType<VxeSegmentedPropTypes.ModelValue>,
+    name: [String, Number] as PropType<VxeSegmentedPropTypes.Name>,
+    disabled: Boolean as PropType<VxeSegmentedPropTypes.Disabled>,
+    options: Array as PropType<VxeSegmentedPropTypes.Options>,
+    type: {
+      type: String as PropType<VxeSegmentedPropTypes.Type>,
+      default: () => getConfig().segmented.type
+    },
+    status: String as PropType<VxeSegmentedPropTypes.Status>,
+    width: [String, Number] as PropType<VxeSegmentedPropTypes.Width>,
+    height: [String, Number] as PropType<VxeSegmentedPropTypes.Height>,
+    optionConfig: Object as PropType<VxeSegmentedPropTypes.OptionConfig>,
+    size: {
+      type: String as PropType<VxeSegmentedPropTypes.Size>,
+      default: () => getConfig().segmented.size || getConfig().size
+    }
+  },
+  emits: [
+    'update:modelValue',
+    'change'
+  ] as VxeSegmentedEmits,
+  setup (props, context) {
+    const { slots, emit } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const { computeSize } = useSize(props)
+
+    const refElem = ref<HTMLDivElement>()
+    const refWrapperElem = ref<HTMLDivElement>()
+    const refSelectedElem = ref<HTMLDivElement>()
+
+    const reactData = reactive(createReactData())
+
+    const refMaps: SegmentedPrivateRef = {
+      refElem
+    }
+
+    const computeItemType = computed(() => {
+      const { type } = props
+      if (type === 'round') {
+        return type
+      }
+      if (type === 'inside') {
+        return type
+      }
+      return 'default'
+    })
+
+    const computeWrapperStyle = computed(() => {
+      const { width, height } = props
+      const stys: VxeComponentStyleType = {}
+      if (width) {
+        stys.width = toCssUnit(width)
+      }
+      if (height) {
+        stys.height = toCssUnit(height)
+      }
+      return stys
+    })
+
+    const computeOptionOpts = computed(() => {
+      return Object.assign({}, getConfig().segmented.optionConfig, props.optionConfig)
+    })
+
+    const computeItemList = computed(() => {
+      return props.options || []
+    })
+
+    const computeSelectIndex = computed(() => {
+      const { modelValue } = props
+      const itemList = computeItemList.value
+      return XEUtils.findIndexOf(itemList, item => item.value === modelValue)
+    })
+
+    const comIsFullWidth = computed(() => {
+      const wrapperStyle = computeWrapperStyle.value
+      return wrapperStyle.width === '100%'
+    })
+
+    const computeMaps: VxeSegmentedPrivateComputed = {
+    }
+
+    const $xeSegmented = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeSegmentedConstructor & VxeSegmentedPrivateMethods
+
+    const dispatchEvent = (type: ValueOf<VxeSegmentedEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $segmented: $xeSegmented }, params))
+    }
+
+    const emitModel = (value: any) => {
+      emit('update:modelValue', value)
+    }
+
+    const changeEvent = (evnt: Event, item: VxeSegmentedPropTypes.Option) => {
+      const value = item.value
+      emitModel(value)
+      dispatchEvent('change', { value }, evnt)
+      updateStyle()
+    }
+
+    const updateStyle = () => {
+      nextTick(() => {
+        const selectIndex = computeSelectIndex.value
+        const wrapperElem = refWrapperElem.value
+        const atStyle = {
+          display: '',
+          left: '',
+          width: ''
+        }
+        if (wrapperElem) {
+          const itemEl = wrapperElem.children[selectIndex] as HTMLDivElement
+          if (itemEl) {
+            atStyle.display = 'block'
+            atStyle.left = toCssUnit(itemEl.offsetLeft)
+            atStyle.width = toCssUnit(itemEl.clientWidth)
+          }
+        }
+        reactData.selectStyle = atStyle
+      })
+    }
+
+    const tagMethods: SegmentedMethods = {
+      dispatchEvent
+    }
+
+    const tagPrivateMethods: SegmentedPrivateMethods = {
+    }
+
+    Object.assign($xeSegmented, tagMethods, tagPrivateMethods)
+
+    const renderItems = () => {
+      const { modelValue, name } = props
+      const { groupName } = reactData
+      const optionOpts = computeOptionOpts.value
+      const itemList = computeItemList.value
+      const isFullWidth = comIsFullWidth.value
+      const fullItemWidth = isFullWidth ? Math.max(0, 100 / itemList.length) : 0
+      const defaultSlot = slots.default
+      const itemVNs: VNode[] = []
+      itemList.forEach((item, i) => {
+        const { icon, width } = item
+        const itemWidth = width || optionOpts.width
+        itemVNs.push(
+          h('label', {
+            key: i,
+            class: ['vxe-segmented--item', {
+              'is--checked': modelValue === item.value
+            }],
+            style: isFullWidth || itemWidth
+              ? {
+                  width: itemWidth ? toCssUnit(itemWidth) : (fullItemWidth ? `${fullItemWidth}%` : '')
+                }
+              : undefined
+          }, [
+            h('input', {
+              class: 'vxe-segmented--input',
+              type: 'radio',
+              name: name || groupName,
+              onChange (evnt) {
+                changeEvent(evnt, item)
+              }
+            }),
+            h('div', {
+              class: 'vxe-segmented--content'
+            }, [
+              icon
+                ? h('div', {
+                  class: 'vxe-segmented--icon'
+                }, [
+                  h('i', {
+                    class: icon
+                  })
+                ])
+                : renderEmptyElement($xeSegmented),
+              h('div', {
+                class: 'vxe-segmented--label'
+              }, defaultSlot ? defaultSlot({ option: item }) : XEUtils.eqNull(item.label) ? '' : `${item.label}`)
+            ])
+          ])
+        )
+      })
+      return itemVNs
+    }
+
+    const renderVN = () => {
+      const { status } = props
+      const { selectStyle } = reactData
+      const itemType = computeItemType.value
+      const wrapperStyle = computeWrapperStyle.value
+      const vSize = computeSize.value
+      return h('div', {
+        ref: refElem,
+        class: ['vxe-segmented', `type--${itemType}`, {
+          [`size--${vSize}`]: vSize,
+          [`theme--${status}`]: status
+        }]
+      }, [
+        h('div', {
+          class: 'vxe-segmented--group',
+          style: wrapperStyle
+        }, [
+          h('div', {
+            ref: refSelectedElem,
+            class: 'vxe-segmented--selected',
+            style: selectStyle
+          }),
+          h('div', {
+            ref: refWrapperElem,
+            class: 'vxe-segmented--inner'
+          }, renderItems())
+        ])
+      ])
+    }
+
+    watch(computeSelectIndex, () => {
+      updateStyle()
+    })
+
+    onMounted(() => {
+      updateStyle()
+    })
+
+    onBeforeUnmount(() => {
+      XEUtils.assign(reactData, createReactData())
+    })
+
+    $xeSegmented.renderVN = renderVN
+
+    return $xeSegmented
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/tabs/src/tabs.ts

@@ -130,14 +130,11 @@ export default defineVxeComponent({
     })
 
     const computeWrapperStyle = computed(() => {
-      const { width, height } = props
+      const { width } = props
       const stys: VxeComponentStyleType = {}
       if (width) {
         stys.width = toCssUnit(width)
       }
-      if (height) {
-        stys.height = toCssUnit(height)
-      }
       return stys
     })
 

package/packages/timeline/index.ts

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

package/packages/timeline/src/timeline-item.ts

@@ -0,0 +1,67 @@
+import { ref, h, reactive } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { createEvent } from '../../ui'
+
+import type { TimelineItemReactData, TimelineItemPrivateRef, VxeTimelineItemEmits, VxeTimelineItemPrivateComputed, TimelineItemMethods, TimelineItemPrivateMethods, VxeTimelineItemConstructor, VxeTimelineItemPrivateMethods, ValueOf } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeTimelineItem',
+  props: {
+  },
+  emits: [
+  ] as VxeTimelineItemEmits,
+  setup (props, context) {
+    const { emit } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<TimelineItemReactData>({})
+
+    const refMaps: TimelineItemPrivateRef = {
+      refElem
+    }
+
+    const computeMaps: VxeTimelineItemPrivateComputed = {
+    }
+
+    const $xeTimelineItem = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeTimelineItemConstructor & VxeTimelineItemPrivateMethods
+
+    const dispatchEvent = (type: ValueOf<VxeTimelineItemEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $timelineItem: $xeTimelineItem }, params))
+    }
+
+    const tagMethods: TimelineItemMethods = {
+      dispatchEvent
+    }
+
+    const tagPrivateMethods: TimelineItemPrivateMethods = {
+    }
+
+    Object.assign($xeTimelineItem, tagMethods, tagPrivateMethods)
+
+    const renderVN = () => {
+      return h('div', {
+        ref: refElem,
+        class: 'vxe-timeline-item'
+      })
+    }
+
+    $xeTimelineItem.renderVN = renderVN
+
+    return $xeTimelineItem
+  },
+  render () {
+    return this.renderVN()
+  }
+})