vxe-pc-ui 4.11.28 → 4.11.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.11.28",
+  "version": "4.11.30",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

package/packages/backtop/index.ts

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

package/packages/backtop/src/backtop.ts

@@ -0,0 +1,264 @@
+import { ref, h, reactive, PropType, watch, onMounted, nextTick, computed, onBeforeUnmount, onUnmounted } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { getConfig, getIcon, createEvent, useSize, renderEmptyElement } from '../../ui'
+import { errLog } from '../../ui/src/log'
+import { toCssUnit } from '../../ui/src/dom'
+
+import type { BacktopInternalData, BacktopReactData, VxeBacktopPropTypes, BacktopPrivateRef, VxeBacktopEmits, VxeComponentStyleType, VxeBacktopPrivateComputed, BacktopMethods, BacktopPrivateMethods, VxeBacktopConstructor, VxeBacktopPrivateMethods, ValueOf } from '../../../types'
+
+function createInternalData (): BacktopInternalData {
+  return {
+    targetEl: null
+  }
+}
+
+function createReactData (): BacktopReactData {
+  return {
+    showBtn: false
+  }
+}
+
+export default defineVxeComponent({
+  name: 'VxeBacktop',
+  props: {
+    target: String as PropType<VxeBacktopPropTypes.Target>,
+    size: {
+      type: String as PropType<VxeBacktopPropTypes.Size>,
+      default: () => getConfig().backtop.size || getConfig().size
+    },
+    circle: {
+      type: Boolean as PropType<VxeBacktopPropTypes.Circle>,
+      default: () => getConfig().backtop.circle
+    },
+    right: {
+      type: [String, Number] as PropType<VxeBacktopPropTypes.Right>,
+      default: () => getConfig().backtop.right
+    },
+    bottom: {
+      type: [String, Number] as PropType<VxeBacktopPropTypes.Bottom>,
+      default: () => getConfig().backtop.bottom
+    },
+    status: {
+      type: [String, Number] as PropType<VxeBacktopPropTypes.Status>,
+      default: () => getConfig().backtop.status
+    },
+    icon: {
+      type: String as PropType<VxeBacktopPropTypes.Icon>,
+      default: () => getConfig().backtop.icon
+    },
+    showIcon: {
+      type: Boolean as PropType<VxeBacktopPropTypes.ShowIcon>,
+      default: () => getConfig().backtop.showIcon
+    },
+    content: {
+      type: [String, Number] as PropType<VxeBacktopPropTypes.Content>,
+      default: () => getConfig().backtop.content
+    },
+    showContent: {
+      type: Boolean as PropType<VxeBacktopPropTypes.ShowContent>,
+      default: () => getConfig().backtop.showContent
+    },
+    zIndex: {
+      type: [String, Number] as PropType<VxeBacktopPropTypes.ZIndex>,
+      default: () => getConfig().backtop.zIndex
+    },
+    threshold: {
+      type: [String, Number] as PropType<VxeBacktopPropTypes.Threshold>,
+      default: () => getConfig().backtop.threshold
+    },
+    position: {
+      type: String as PropType<VxeBacktopPropTypes.Position>,
+      default: () => getConfig().backtop.position
+    }
+  },
+  emits: [
+    'click'
+  ] as VxeBacktopEmits,
+  setup (props, context) {
+    const { slots, emit } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const { computeSize } = useSize(props)
+
+    const internalData = createInternalData()
+    const reactData = reactive(createReactData())
+
+    const refMaps: BacktopPrivateRef = {
+      refElem
+    }
+
+    const computeWrapperStyle = computed(() => {
+      const { right, bottom, zIndex } = props
+      const stys: VxeComponentStyleType = {}
+      if (right) {
+        stys.right = toCssUnit(right)
+      }
+      if (bottom) {
+        stys.bottom = toCssUnit(bottom)
+      }
+      if (zIndex) {
+        stys.zIndex = zIndex
+      }
+      return stys
+    })
+
+    const computeMaps: VxeBacktopPrivateComputed = {
+    }
+
+    const $xeBacktop = {
+      xID,
+      props,
+      context,
+      internalData,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeBacktopConstructor & VxeBacktopPrivateMethods
+
+    const dispatchEvent = (type: ValueOf<VxeBacktopEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $backtop: $xeBacktop }, params))
+    }
+
+    const handleScrollEvent = (evnt: Event) => {
+      const { threshold } = props
+      const currentEl = evnt.currentTarget as HTMLElement
+      const scrollTop = currentEl.scrollTop
+      reactData.showBtn = scrollTop > Math.max(1, XEUtils.toNumber(threshold))
+    }
+
+    const handleToTop = () => {
+      const { targetEl } = internalData
+      if (!targetEl) {
+        return
+      }
+      const scrollTop = targetEl.scrollTop
+      if (scrollTop > 0) {
+        requestAnimationFrame(handleToTop)
+        const currScrollTop = scrollTop - Math.max(12, scrollTop / 6)
+        targetEl.scrollTop = currScrollTop > 10 ? currScrollTop : 0
+      }
+    }
+
+    const removeScrollEvent = () => {
+      const { targetEl } = internalData
+      if (targetEl) {
+        targetEl.removeEventListener('scroll', handleScrollEvent)
+      }
+    }
+
+    const addScrollEvent = () => {
+      const { targetEl } = internalData
+      if (targetEl) {
+        targetEl.addEventListener('scroll', handleScrollEvent, { passive: true })
+      }
+    }
+
+    const handleTargetElement = () => {
+      nextTick(() => {
+        const { target } = props
+        if (!target) {
+          removeScrollEvent()
+          errLog('vxe.error.reqProp', ['target'])
+          return
+        }
+        if (XEUtils.isString(target)) {
+          const tEl = document.querySelector<HTMLElement>(target)
+          if (!tEl) {
+            errLog('vxe.error.errProp', [`target=${target}`, 'body'])
+          }
+          const { targetEl } = internalData
+          if (targetEl !== tEl) {
+            removeScrollEvent()
+            internalData.targetEl = tEl
+            addScrollEvent()
+          }
+        }
+      })
+    }
+
+    const clickEvent = (evnt: MouseEvent) => {
+      handleToTop()
+      dispatchEvent('click', {}, evnt)
+    }
+
+    const tagMethods: BacktopMethods = {
+      dispatchEvent
+    }
+
+    const tagPrivateMethods: BacktopPrivateMethods = {
+    }
+
+    Object.assign($xeBacktop, tagMethods, tagPrivateMethods)
+
+    const renderVN = () => {
+      const { circle, position, status, icon, showIcon, content, showContent } = props
+      const { showBtn } = reactData
+      const wrapperStyle = computeWrapperStyle.value
+      const vSize = computeSize.value
+      const defaultSlot = slots.default
+      return h('div', {
+        ref: refElem,
+        class: ['vxe-backtop', position === 'fixed' ? ('is--' + position) : 'is--absolute', {
+          [`size--${vSize}`]: vSize,
+          [`theme--${status}`]: status,
+          'is--circle': circle,
+          'is--visible': showBtn
+        }],
+        style: wrapperStyle,
+        onClick: clickEvent
+      }, [
+        h('div', {
+          class: 'vxe-backtop--inner'
+        }, [
+          defaultSlot
+            ? defaultSlot({})
+            : [
+                showIcon
+                  ? h('div', {
+                    class: 'vxe-backtop--icon'
+                  }, [
+                    h('i', {
+                      class: icon || getIcon().BACKTOP_TOP
+                    })
+                  ])
+                  : renderEmptyElement($xeBacktop),
+                showContent
+                  ? h('div', {
+                    class: 'vxe-backtop--content'
+                  }, `${content || ''}`)
+                  : renderEmptyElement($xeBacktop)
+              ]
+        ])
+      ])
+    }
+
+    watch(() => props.target, () => {
+      handleTargetElement()
+    })
+
+    onMounted(() => {
+      handleTargetElement()
+    })
+
+    onBeforeUnmount(() => {
+      removeScrollEvent()
+      XEUtils.assign(reactData, createReactData())
+    })
+
+    onUnmounted(() => {
+      XEUtils.assign(internalData, createInternalData())
+    })
+
+    $xeBacktop.renderVN = renderVN
+
+    return $xeBacktop
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/cascader/index.ts

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