vxe-pc-ui 4.11.27 → 4.11.29

package/packages/segmented/src/segmented.ts

@@ -0,0 +1,254 @@
+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 } 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 itemWidth = item.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'
+            }, [
+              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()
+  }
+})

package/packages/timeline/src/timeline.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 { TimelineReactData, VxeTimelinePropTypes, TimelinePrivateRef, VxeTimelineEmits, VxeTimelinePrivateComputed, TimelineMethods, TimelinePrivateMethods, VxeTimelineConstructor, VxeTimelinePrivateMethods, ValueOf } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeTimeline',
+  props: {
+    size: {
+      type: String as PropType<VxeTimelinePropTypes.Size>,
+      default: () => getConfig().timeline.size || getConfig().size
+    }
+  },
+  emits: [
+  ] as VxeTimelineEmits,
+  setup (props, context) {
+    const { emit } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<TimelineReactData>({})
+
+    const refMaps: TimelinePrivateRef = {
+      refElem
+    }
+
+    const computeMaps: VxeTimelinePrivateComputed = {
+    }
+
+    const $xeTimeline = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeTimelineConstructor & VxeTimelinePrivateMethods
+
+    const dispatchEvent = (type: ValueOf<VxeTimelineEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $timeline: $xeTimeline }, params))
+    }
+
+    const tagMethods: TimelineMethods = {
+      dispatchEvent
+    }
+
+    const tagPrivateMethods: TimelinePrivateMethods = {
+    }
+
+    Object.assign($xeTimeline, tagMethods, tagPrivateMethods)
+
+    const renderVN = () => {
+      return h('div', {
+        ref: refElem,
+        class: 'vxe-timeline'
+      })
+    }
+
+    $xeTimeline.renderVN = renderVN
+
+    return $xeTimeline
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/timeline-item/index.ts

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

package/packages/tour/index.ts

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

package/packages/tour/src/tour.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 { TourReactData, VxeTourPropTypes, TourPrivateRef, VxeTourEmits, VxeTourPrivateComputed, TourMethods, TourPrivateMethods, VxeTourConstructor, VxeTourPrivateMethods, ValueOf } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeTour',
+  props: {
+    size: {
+      type: String as PropType<VxeTourPropTypes.Size>,
+      default: () => getConfig().tour.size || getConfig().size
+    }
+  },
+  emits: [
+  ] as VxeTourEmits,
+  setup (props, context) {
+    const { emit } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<TourReactData>({})
+
+    const refMaps: TourPrivateRef = {
+      refElem
+    }
+
+    const computeMaps: VxeTourPrivateComputed = {
+    }
+
+    const $xeTour = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeTourConstructor & VxeTourPrivateMethods
+
+    const dispatchEvent = (type: ValueOf<VxeTourEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $tour: $xeTour }, params))
+    }
+
+    const tagMethods: TourMethods = {
+      dispatchEvent
+    }
+
+    const tagPrivateMethods: TourPrivateMethods = {
+    }
+
+    Object.assign($xeTour, tagMethods, tagPrivateMethods)
+
+    const renderVN = () => {
+      return h('div', {
+        ref: refElem,
+        class: 'vxe-tour'
+      })
+    }
+
+    $xeTour.renderVN = renderVN
+
+    return $xeTour
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/ui/index.ts

@@ -28,6 +28,11 @@ setConfig({
   anchor: {},
   anchorLink: {},
   avatar: {},
+  backtop: {
+    showIcon: true,
+    showContent: true,
+    threshold: 20
+  },
   badge: {},
   breadcrumb: {
     separator: '/'
@@ -60,6 +65,9 @@ setConfig({
     interval: 5000
   },
   carouselItem: {},
+  cascader: {
+    autoClose: true
+  },
   checkbox: {},
   checkboxButton: {},
   checkboxGroup: {},
@@ -297,6 +305,7 @@ setConfig({
   rate: {},
   result: {},
   row: {},
+  segmented: {},
   select: {
     multiCharOverflow: 8,
     remoteConfig: {
@@ -361,6 +370,8 @@ setConfig({
   textarea: {
     resize: 'none'
   },
+  timeline: {},
+  timelineItem: {},
   tip: {},
   tooltip: {
     // size: null,
@@ -658,7 +669,10 @@ setIcon({
   SPLIT_TOP_ACTION: iconPrefix + 'arrow-up',
   SPLIT_BOTTOM_ACTION: iconPrefix + 'arrow-down',
   SPLIT_LEFT_ACTION: iconPrefix + 'arrow-left',
-  SPLIT_RIGHT_ACTION: iconPrefix + 'arrow-right'
+  SPLIT_RIGHT_ACTION: iconPrefix + 'arrow-right',
+
+  // backtop
+  BACKTOP_TOP: iconPrefix + 'top'
 })
 
 export * from '@vxe-ui/core'

package/styles/all.scss

@@ -4,6 +4,7 @@
 @use './components/anchor.scss';
 @use './components/anchor-link.scss';
 @use './components/avatar.scss';
+@use './components/backtop.scss';
 @use './components/badge.scss';
 @use './components/breadcrumb.scss';
 @use './components/breadcrumb-item.scss';
@@ -13,6 +14,7 @@
 @use './components/card.scss';
 @use './components/carousel.scss';
 @use './components/carousel-item.scss';
+@use './components/cascader.scss';
 @use './components/checkbox.scss';
 @use './components/checkbox-button.scss';
 @use './components/checkbox-group.scss';
@@ -44,6 +46,7 @@
 @use './components/link.scss';
 @use './components/list.scss';
 @use './components/loading.scss';
+@use './components/mention.scss';
 @use './components/menu.scss';
 @use './components/modal.scss';
 @use './components/notice-bar.scss';
@@ -61,6 +64,7 @@
 @use './components/rate.scss';
 @use './components/result.scss';
 @use './components/row.scss';
+@use './components/segmented.scss';
 @use './components/select.scss';
 @use './components/split.scss';
 @use './components/split-pane.scss';
@@ -74,8 +78,11 @@
 @use './components/text-ellipsis.scss';
 @use './components/text.scss';
 @use './components/textarea.scss';
+@use './components/timeline.scss';
+@use './components/timeline-item.scss';
 @use './components/tip.scss';
 @use './components/tooltip.scss';
+@use './components/tour.scss';
 @use './components/tree.scss';
 @use './components/tree-select.scss';
 @use './components/upload.scss';