vxe-pc-ui 4.20.32 → 4.20.34

package/packages/modal/src/modal.ts

@@ -31,7 +31,7 @@ import type {
 } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
-const { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useFns, renderEmptyElement } = VxeUI
+const { getConfig, getIcon, getI18n, dbUtils, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useFns, renderEmptyElement } = VxeUI
 
 const { warnLog, errLog } = createComponentLog('modal')
 
@@ -229,6 +229,10 @@ export default defineVxeComponent({
       type: Boolean as PropType<VxeModalPropTypes.Storage>,
       default: () => getConfig().modal.storage
     },
+    storeDriver: {
+      type: String as PropType<VxeModalPropTypes.StoreDriver>,
+      default: () => getConfig().modal.storeDriver
+    },
     storageKey: {
       type: String as PropType<VxeModalPropTypes.StorageKey>,
       default: () => getConfig().modal.storageKey
@@ -361,7 +365,9 @@ export default defineVxeComponent({
       getComputeMaps: () => computeMaps
     } as unknown as VxeModalConstructor & VxeModalMethods
 
-    let modalMethods = {} as ModalMethods
+    const posStoreDB = dbUtils.createStore<string>(props.storageKey, {
+      driver: props.storeDriver
+    })
 
     const getBox = () => {
       const boxElem = refModalBox.value
@@ -534,45 +540,58 @@ export default defineVxeComponent({
       }
     }
 
-    const getStorageMap = (key: string) => {
-      const version = getConfig().version
-      const rest = XEUtils.toStringJSON(localStorage.getItem(key) || '')
-      return rest && rest._v === version ? rest : { _v: version }
+    const getStorageMap = (key: string, id: string) => {
+      // if (posStoreDB) {
+      return posStoreDB.getById(id).then(dbRest => dbRest ? dbRest.data : '')
+      // }
+      // // 已废弃，兼容旧版本
+      // return new Promise<string>(resolve => {
+      //   const version = getConfig().version
+      //   const rest = XEUtils.toStringJSON(localStorage.getItem(key) || '')
+      //   const maps = rest && rest._v === version ? rest : { _v: version }
+      //   resolve(maps[id] || '')
+      // })
     }
 
-    const hasPosStorage = () => {
-      const { id, storage, storageKey } = props
-      return !!(id && storage && getStorageMap(storageKey)[id])
+    const saveStorageMap = (id: string, posStorage: string) => {
+      // const { storageKey } = props
+
+      // if (posStoreDB) {
+      return posStoreDB.updateById(id, posStorage)
+      // }
+      // // 已废弃，兼容旧版本
+      // const version = getConfig().version
+      // const rest = XEUtils.toStringJSON(localStorage.getItem(storageKey) || '')
+      // const posStorageMap = rest && rest._v === version ? rest : { _v: version }
+      // posStorageMap[id] = posStorage
+      // localStorage.setItem(storageKey, XEUtils.toJSONString(posStorageMap))
+      // return Promise.resolve()
     }
 
-    const restorePosStorage = () => {
-      const { id, storage, storageKey } = props
-      if (id && storage) {
-        const posStorage = getStorageMap(storageKey)[id]
-        if (posStorage) {
-          const boxElem = getBox()
-          const [left, top, width, height, zoomLeft, zoomTop, zoomWidth, zoomHeight] = posStorage.split(',')
-          if (boxElem) {
-            if (left) {
-              boxElem.style.left = `${left}px`
-            }
-            if (top) {
-              boxElem.style.top = `${top}px`
-            }
-            if (width) {
-              boxElem.style.width = `${width}px`
-            }
-            if (height) {
-              boxElem.style.height = `${height}px`
-            }
+    const restorePosStorage = (posStorage: string) => {
+      if (posStorage) {
+        const boxElem = getBox()
+        const [left, top, width, height, zoomLeft, zoomTop, zoomWidth, zoomHeight] = posStorage.split(',')
+        if (boxElem) {
+          if (left) {
+            boxElem.style.left = `${left}px`
           }
-          if (zoomLeft && zoomTop) {
-            reactData.revertLocat = {
-              left: zoomLeft,
-              top: zoomTop,
-              width: zoomWidth,
-              height: zoomHeight
-            }
+          if (top) {
+            boxElem.style.top = `${top}px`
+          }
+          if (width) {
+            boxElem.style.width = `${width}px`
+          }
+          if (height) {
+            boxElem.style.height = `${height}px`
+          }
+        }
+        if (zoomLeft && zoomTop) {
+          reactData.revertLocat = {
+            left: XEUtils.toNumber(zoomLeft),
+            top: XEUtils.toNumber(zoomTop),
+            width: XEUtils.toNumber(zoomWidth),
+            height: XEUtils.toNumber(zoomHeight)
           }
         }
       }
@@ -588,7 +607,7 @@ export default defineVxeComponent({
     }
 
     const savePosStorage = () => {
-      const { id, storage, storageKey } = props
+      const { id, storage } = props
       const { zoomStatus, revertLocat } = reactData
       if (zoomStatus) {
         return
@@ -598,12 +617,23 @@ export default defineVxeComponent({
         if (!boxElem) {
           return
         }
-        const posStorageMap = getStorageMap(storageKey)
-        posStorageMap[id] = ([boxElem.style.left, boxElem.style.top, boxElem.clientWidth, boxElem.clientHeight] as (string | number)[])
-          .concat(revertLocat ? [revertLocat.left, revertLocat.top, revertLocat.width, revertLocat.height] : [])
-          .map((val) => (val ? XEUtils.toNumber(val) : ''))
-          .join(',')
-        localStorage.setItem(storageKey, XEUtils.toJSONString(posStorageMap))
+        const posStorage = [
+          boxElem.style.left,
+          boxElem.style.top,
+          boxElem.clientWidth,
+          boxElem.clientHeight,
+          ...(
+            revertLocat
+              ? [
+                  revertLocat.left,
+                  revertLocat.top,
+                  revertLocat.width,
+                  revertLocat.height
+                ]
+              : []
+          )
+        ].map((val) => (val ? XEUtils.toNumber(val) : '')).join(',')
+        saveStorageMap(id, posStorage)
       }
     }
 
@@ -799,7 +829,7 @@ export default defineVxeComponent({
     }
 
     const openModal = () => {
-      const { remember, showFooter, fullscreen } = props
+      const { storageKey, id, remember, showFooter, fullscreen } = props
       const { initialized, visible } = reactData
       const isMsg = computeIsMsg.value
       const isModal = computeIsModal.value
@@ -845,8 +875,21 @@ export default defineVxeComponent({
             }
             if (firstOpen) {
               reactData.firstOpen = false
-              if (hasPosStorage()) {
-                restorePosStorage()
+              if (storageKey && id) {
+                getStorageMap(storageKey, id).then(posStorage => {
+                  if (posStorage) {
+                    restorePosStorage(posStorage)
+                  } else {
+                    if (isModal && fullscreen) {
+                      nextTick(() => handleMaximize())
+                    } else {
+                      recalculate()
+                      updatePosition().then(() => {
+                        setTimeout(() => updatePosition(), 20)
+                      })
+                    }
+                  }
+                })
               } else {
                 if (isModal && fullscreen) {
                   nextTick(() => handleMaximize())
@@ -1270,7 +1313,7 @@ export default defineVxeComponent({
       emit('update:modelValue', value)
     }
 
-    modalMethods = {
+    const modalMethods: ModalMethods = {
       dispatchEvent,
       open: openModal,
       close() {

package/packages/select/src/option.ts

@@ -20,7 +20,9 @@ export default defineVxeComponent({
     disabled: Boolean as PropType<VxeOptionPropTypes.Disabled>
   },
   emits: [] as VxeOptionEmits,
-  setup(props, { slots }) {
+  setup(props, context) {
+    const { slots } = context
+
     const elem = ref() as Ref<HTMLDivElement>
     const $xeSelect = inject('$xeSelect', {} as VxeSelectConstructor)
     const $xeOptgroup = inject<XEOptionProvide | null>('$xeOptgroup', null)

package/packages/select/src/select.ts

@@ -350,11 +350,11 @@ export default defineVxeComponent({
       return Object.assign({}, props.defaultConfig)
     })
     const computePropsOpts = computed(() => {
-      return Object.assign({}, props.optionProps)
+      return Object.assign({}, getConfig().select.optionProps, props.optionProps)
     })
 
     const computeGroupPropsOpts = computed(() => {
-      return Object.assign({}, props.optionGroupProps)
+      return Object.assign({}, getConfig().select.optionGroupProps, props.optionGroupProps)
     })
 
     const computeLabelField = computed(() => {
@@ -2285,26 +2285,31 @@ export default defineVxeComponent({
       )
     }
 
-    watch(
-      () => reactData.staticOptions,
-      (val) => {
-        loadData(val)
-      }
-    )
+    watch(() => reactData.staticOptions, (val) => {
+      loadData(val)
+    })
 
-    watch(
-      () => props.options,
-      (val) => {
-        loadData(val || [])
-      }
-    )
+    const refOptsFlag = ref(0)
+    watch(() => props.options, () => {
+      refOptsFlag.value++
+    })
+    watch(() => props.options ? props.options.length : -1, () => {
+      refOptsFlag.value++
+    })
+    watch(refOptsFlag, () => {
+      loadData(props.options || [])
+    })
 
-    watch(
-      () => props.optionGroups,
-      (val) => {
-        loadData(val || [])
-      }
-    )
+    const refOptGrpsFlag = ref(0)
+    watch(() => props.optionGroups, () => {
+      refOptGrpsFlag.value++
+    })
+    watch(() => props.optionGroups ? props.optionGroups.length : -1, () => {
+      refOptGrpsFlag.value++
+    })
+    watch(refOptGrpsFlag, () => {
+      loadData(props.optionGroups || [])
+    })
 
     const reScrollFlag = ref(0)
     const reLayoutFlag = ref(0)

package/packages/slider/src/slider.ts

@@ -4,22 +4,7 @@ import XEUtils from 'xe-utils'
 import { VxeUI } from '@vxe-ui/core'
 import { getText } from '../../ui/src/utils'
 
-import type {
-  SliderReactData,
-  SliderInternalData,
-  VxeSliderEmits,
-  VxeSliderPropTypes,
-  SliderMethods,
-  VxeFormDefines,
-  VxeFormConstructor,
-  VxeFormPrivateMethods,
-  SliderPrivateMethods,
-  ValueOf,
-  SliderPrivateRef,
-  VxeSliderPrivateComputed,
-  VxeSliderConstructor,
-  VxeSliderPrivateMethods
-} from '../../../types'
+import type { SliderReactData, SliderInternalData, VxeSliderEmits, VxeSliderPropTypes, SliderMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, SliderPrivateMethods, ValueOf, SliderPrivateRef, VxeSliderPrivateComputed, VxeSliderConstructor, VxeSliderPrivateMethods } from '../../../types'
 
 const { getConfig, createEvent, renderEmptyElement, useFns } = VxeUI
 

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

@@ -0,0 +1,17 @@
+import XEUtils from 'xe-utils'
+
+export class TimelineItemInfo {
+  id = XEUtils.uniqueId('timeline_item_')
+  constructor($xeTimeline: any, _vm: any) {
+    Object.assign(this, {
+      title: _vm.title,
+      content: _vm.content
+    })
+  }
+
+  update(name: any, value: any) {
+    this[name] = value
+  }
+
+  [key: string]: any
+}

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

@@ -1,65 +1,40 @@
-import { ref, h, reactive } from 'vue'
+import { ref, h, inject, PropType, onMounted, onUnmounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
-import XEUtils from 'xe-utils'
-import { VxeUI } from '@vxe-ui/core'
+import { createTimelineItem, watchTimelineItem, assembleTimelineItem, destroyTimelineItem } from './util'
 
-import type { TimelineItemReactData, TimelineItemPrivateRef, VxeTimelineItemEmits, VxeTimelineItemPrivateComputed, TimelineItemMethods, TimelineItemPrivateMethods, VxeTimelineItemConstructor, VxeTimelineItemPrivateMethods, ValueOf } from '../../../types'
+import type { VxeTimelineConstructor, VxeTimelineItemPropTypes } from '../../../types'
 
-const { createEvent } = VxeUI
-
-export default defineVxeComponent({
+export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeTimelineItem',
-  props: {},
-  emits: [] as VxeTimelineItemEmits,
+  props: {
+    title: [String, Number] as PropType<VxeTimelineItemPropTypes.Title>,
+    content: [String, Number] as PropType<VxeTimelineItemPropTypes.Content>
+  },
   setup(props, context) {
-    const { emit } = context
-
-    const xID = XEUtils.uniqueId()
+    const { slots } = context
 
     const refElem = ref<HTMLDivElement>()
+    const $xeTimeline = inject('$xeTimeline', {} as VxeTimelineConstructor)
+    const itemConfig = createTimelineItem($xeTimeline, props)
+    itemConfig.slots = slots
 
-    const reactData = reactive<TimelineItemReactData>({})
-
-    const refMaps: TimelineItemPrivateRef = {
-      refElem
-    }
-
-    const computeMaps: VxeTimelineItemPrivateComputed = {}
+    watchTimelineItem(props, itemConfig)
 
-    const $xeTimelineItem = {
-      xID,
-      props,
-      context,
-      reactData,
+    onMounted(() => {
+      const el = refElem.value
+      if (el) {
+        assembleTimelineItem($xeTimeline, el, itemConfig)
+      }
+    })
 
-      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))
-    }
+    onUnmounted(() => {
+      destroyTimelineItem($xeTimeline, itemConfig)
+    })
 
-    const tagMethods: TimelineItemMethods = {
-      dispatchEvent
-    }
-
-    const tagPrivateMethods: TimelineItemPrivateMethods = {}
-
-    Object.assign($xeTimelineItem, tagMethods, tagPrivateMethods)
-
-    const renderVN = () => {
+    return () => {
       return h('div', {
-        ref: refElem,
-        class: 'vxe-timeline-item'
+        ref: refElem
       })
     }
-
-    $xeTimelineItem.renderVN = renderVN
-
-    return $xeTimelineItem
-  },
-  render() {
-    return this.renderVN()
   }
-})
+}) /* define-vxe-component end */

package/packages/timeline/src/timeline.ts

@@ -1,65 +1,204 @@
-import { ref, h, reactive, PropType } from 'vue'
+import { ref, h, reactive, PropType, computed, watch, provide, onMounted, onBeforeUnmount } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '@vxe-ui/core'
+import { getText } from '../../ui/src/utils'
 
-import type { TimelineReactData, VxeTimelinePropTypes, TimelinePrivateRef, VxeTimelineEmits, VxeTimelinePrivateComputed, TimelineMethods, TimelinePrivateMethods, VxeTimelineConstructor, VxeTimelinePrivateMethods, ValueOf } from '../../../types'
+import type { TimelineReactData, TimelineInternalData, VxeTimelineEmits, VxeTimelinePropTypes, TimelineMethods, TimelinePrivateMethods, TimelinePrivateRef, TimelinePrivateComputed, VxeTimelineConstructor, VxeTimelinePrivateMethods, ValueOf } from '../../../types'
 
-const { getConfig, createEvent } = VxeUI
+const { getConfig, useFns, createEvent } = VxeUI
 
-export default defineVxeComponent({
+function createInternalData(): TimelineInternalData {
+  return {
+    fullData: []
+  }
+}
+
+function createReactData(): TimelineReactData {
+  return {
+    itemList: [],
+    staticItems: [],
+    isOptConf: false
+  }
+}
+
+export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeTimeline',
   props: {
     size: {
       type: String as PropType<VxeTimelinePropTypes.Size>,
       default: () => getConfig().timeline.size || getConfig().size
-    }
+    },
+    options: Array as PropType<VxeTimelinePropTypes.Options>,
+    reverse: {
+      type: Boolean as PropType<VxeTimelinePropTypes.Reverse>,
+      default: () => getConfig().timeline.reverse
+    },
+    vertical: {
+      type: Boolean as PropType<VxeTimelinePropTypes.Vertical>,
+      default: () => getConfig().timeline.vertical
+    },
+    optionProps: Object as PropType<VxeTimelinePropTypes.OptionProps>
   },
   emits: [] as VxeTimelineEmits,
   setup(props, context) {
-    const { emit } = context
+    const { slots, emit } = context
 
     const xID = XEUtils.uniqueId()
 
+    const { computeSize } = useFns.useSize(props)
+
     const refElem = ref<HTMLDivElement>()
 
-    const reactData = reactive<TimelineReactData>({})
+    const reactData = reactive(createReactData())
+    const internalData = createInternalData()
 
     const refMaps: TimelinePrivateRef = {
       refElem
     }
 
-    const computeMaps: VxeTimelinePrivateComputed = {}
+    const computeMaps: TimelinePrivateComputed = {}
 
     const $xeTimeline = {
       xID,
       props,
       context,
       reactData,
-
+      internalData,
       getRefMaps: () => refMaps,
       getComputeMaps: () => computeMaps
     } as unknown as VxeTimelineConstructor & VxeTimelinePrivateMethods
 
+    const computePropsOpts = computed(() => {
+      return Object.assign({}, getConfig().timeline.optionProps, props.optionProps)
+    })
+
+    const computeTitleField = computed(() => {
+      const propsOpts = computePropsOpts.value
+      return propsOpts.title || 'title'
+    })
+
+    const computeContentField = computed(() => {
+      const propsOpts = computePropsOpts.value
+      return propsOpts.content || 'content'
+    })
+
     const dispatchEvent = (type: ValueOf<VxeTimelineEmits>, params: Record<string, any>, evnt: Event | null) => {
       emit(type, createEvent(evnt, { $timeline: $xeTimeline }, params))
     }
 
-    const tagMethods: TimelineMethods = {
+    const loadData = (opts: any[], isOptConf: boolean) => {
+      reactData.isOptConf = isOptConf
+      internalData.fullData = opts || []
+      updateItems()
+    }
+
+    const updateItems = () => {
+      const { reverse } = props
+      const { fullData } = internalData
+      reactData.itemList = reverse ? fullData.slice(0).reverse() : fullData.slice(0)
+    }
+
+    const timelineMethods: TimelineMethods = {
       dispatchEvent
     }
 
-    const tagPrivateMethods: TimelinePrivateMethods = {}
+    const timelinePrivateMethods: TimelinePrivateMethods = {}
 
-    Object.assign($xeTimeline, tagMethods, tagPrivateMethods)
+    Object.assign($xeTimeline, timelineMethods, timelinePrivateMethods)
+
+    const renderItem = (item: any, index: number) => {
+      const { itemList, isOptConf } = reactData
+      const titleField = computeTitleField.value
+      const contentField = computeContentField.value
+      const titleVal = getText(isOptConf ? item[titleField] : item.title)
+      const contentVal = getText(isOptConf ? item[contentField] : item.content)
+      const titleSlot = slots.title
+      const contentSlot = slots.content
+      return h('div', {
+        key: index,
+        class: ['vxe-timeline--item', {
+          'is--last': index === itemList.length - 1
+        }]
+      }, [
+        h('div', {
+          class: 'vxe-timeline--item-line'
+        }),
+        h('div', {
+          class: 'vxe-timeline--item-node'
+        }),
+        h('div', {
+          class: 'vxe-timeline--item-wrapper'
+        }, [
+          h('div', {
+            class: 'vxe-timeline--item-title'
+          }, titleSlot ? titleSlot({ item }) : titleVal),
+          h('div', {
+            class: 'vxe-timeline--item-content'
+          }, contentSlot ? contentSlot({ item }) : contentVal)
+        ])
+      ]
+      )
+    }
 
     const renderVN = () => {
+      const { vertical } = props
+      const { itemList } = reactData
+      const vSize = computeSize.value
+      const defaultSlot = slots.default
       return h('div', {
         ref: refElem,
-        class: 'vxe-timeline'
-      })
+        class: ['vxe-timeline', {
+          [`size--${vSize}`]: vSize,
+          'is--vertical': vertical,
+          'is--horizontal': !vertical
+        }]
+      },
+      [
+        h('div', {
+          class: 'vxe-timeline--slots'
+        }, defaultSlot ? defaultSlot({}) : []),
+        h('div', {
+          class: 'vxe-timeline--body'
+        }, itemList.map((item, index) => renderItem(item, index)))
+      ])
     }
 
+    watch(() => reactData.staticItems, (val) => {
+      loadData(val, false)
+    })
+
+    const refOptsFlag = ref(0)
+    watch(() => props.options, () => {
+      refOptsFlag.value++
+    })
+    watch(() => props.options ? props.options.length : -1, () => {
+      refOptsFlag.value++
+    })
+    watch(refOptsFlag, () => {
+      loadData(props.options || [], true)
+    })
+
+    watch(() => props.reverse, () => {
+      updateItems()
+    })
+
+    onMounted(() => {
+      const { staticItems } = reactData
+      if (staticItems.length) {
+        loadData(staticItems, false)
+      } else {
+        loadData(props.options || [], true)
+      }
+    })
+
+    onBeforeUnmount(() => {
+      XEUtils.assign(reactData, createReactData())
+      XEUtils.assign(internalData, createInternalData())
+    })
+
+    provide('$xeTimeline', $xeTimeline)
+
     $xeTimeline.renderVN = renderVN
 
     return $xeTimeline
@@ -67,4 +206,4 @@ export default defineVxeComponent({
   render() {
     return this.renderVN()
   }
-})
+}) /* define-vxe-component end */

package/packages/timeline/src/util.ts

@@ -0,0 +1,41 @@
+import { watch } from 'vue'
+import XEUtils from 'xe-utils'
+import { TimelineItemInfo } from './timeline-info'
+
+import type { VxeTimelineConstructor } from '../../../types'
+
+export function isTimelineItem(item: any) {
+  return item instanceof TimelineItemInfo
+}
+
+export function createTimelineItem($xeTimeline: VxeTimelineConstructor, _vm: any) {
+  return isTimelineItem(_vm) ? _vm : new TimelineItemInfo($xeTimeline, _vm)
+}
+
+export function watchTimelineItem(props: any, itemInfo: TimelineItemInfo) {
+  Object.keys(props).forEach((name) => {
+    watch(() => props[name], (value: any) => {
+      itemInfo.update(name, value)
+    })
+  })
+}
+
+export function assembleTimelineItem($xeTimeline: VxeTimelineConstructor, el: HTMLDivElement, itemInfo: TimelineItemInfo) {
+  const { reactData } = $xeTimeline
+  const { staticItems } = reactData
+  const parentElem = el.parentNode
+  if (parentElem && staticItems) {
+    staticItems.splice(XEUtils.arrayIndexOf(parentElem.children, el), 0, itemInfo)
+    reactData.staticItems = staticItems.slice(0)
+  }
+}
+
+export function destroyTimelineItem($xeTimeline: VxeTimelineConstructor, itemInfo: TimelineItemInfo) {
+  const { reactData } = $xeTimeline
+  const { staticItems } = reactData
+  const index = XEUtils.findIndexOf(staticItems, (item: any) => item.id === itemInfo.id)
+  if (index > -1) {
+    staticItems.splice(index, 1)
+  }
+  reactData.staticItems = staticItems.slice(0)
+}