vxe-pc-ui 0.2.0 → 0.4.0

package/packages/components.ts

@@ -23,6 +23,7 @@ import VxeLayoutContainer from './layout-container'
 import VxeLayoutFooter from './layout-footer'
 import VxeLayoutHeader from './layout-header'
 import VxeListDesign from './list-design'
+import VxeList from './list'
 import VxeLoading from './loading'
 import VxeModal from './modal'
 import VxeOptgroup from './optgroup'
@@ -71,6 +72,7 @@ const components = [
   VxeLayoutFooter,
   VxeLayoutHeader,
   VxeListDesign,
+  VxeList,
   VxeLoading,
   VxeModal,
   VxeOptgroup,
@@ -119,6 +121,7 @@ export * from './layout-container'
 export * from './layout-footer'
 export * from './layout-header'
 export * from './list-design'
+export * from './list'
 export * from './loading'
 export * from './modal'
 export * from './optgroup'

package/packages/form/index.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue'
 import VxeFormComponent from './src/form'
+import { dynamicApp } from '../dynamics'
 
 export const VxeForm = Object.assign(VxeFormComponent, {
   install (app: App) {
@@ -7,5 +8,7 @@ export const VxeForm = Object.assign(VxeFormComponent, {
   }
 })
 
+dynamicApp.component(VxeFormComponent.name as string, VxeFormComponent)
+
 export const Form = VxeForm
 export default VxeForm

package/packages/form/src/form.ts

@@ -8,7 +8,7 @@ import { errLog, warnLog } from '../../ui/src/log'
 import { scrollToView } from '../../ui/src/dom'
 import { createItem, handleFieldOrItem, isHiddenItem, isActivetem } from './util'
 import { useSize } from '../../hooks/size'
-import VxeTooltipComponent from '../../tooltip'
+import VxeTooltipComponent from '../../tooltip/src/tooltip'
 import VxeFormConfigItem from './form-config-item'
 import VxeLoading from '../../loading/index'
 import { getSlotVNs } from '../../ui/src/vn'
@@ -129,7 +129,7 @@ export default defineComponent({
 
     provide('xeFormItemInfo', null)
 
-    const $xegrid = inject<any>('$xegrid', null)
+    const $xeGrid = inject<any>('$xeGrid', null)
 
     const refElem = ref<HTMLFormElement>()
     const refTooltip = ref() as Ref<VxeTooltipInstance>
@@ -160,7 +160,7 @@ export default defineComponent({
       context,
       reactData,
 
-      xegrid: $xegrid,
+      xegrid: $xeGrid,
       getRefMaps: () => refMaps,
       getComputeMaps: () => computeMaps
     } as unknown as VxeFormConstructor & VxeFormPrivateMethods
@@ -596,7 +596,7 @@ export default defineComponent({
 
     formMethods = {
       dispatchEvent (type, params, evnt) {
-        emit(type, Object.assign({ $form: $xeform, $grid: $xegrid, $event: evnt }, params))
+        emit(type, Object.assign({ $form: $xeform, $grid: $xeGrid, $event: evnt }, params))
       },
       reset,
       validate,

package/packages/form-design/index.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue'
 import VxeFormDesignComponent from './src/form-design'
+import { dynamicApp } from '../dynamics'
 
 const VxeFormDesign = Object.assign({}, VxeFormDesignComponent, {
   install (app: App) {
@@ -7,5 +8,7 @@ const VxeFormDesign = Object.assign({}, VxeFormDesignComponent, {
   }
 })
 
+dynamicApp.component(VxeFormDesignComponent.name as string, VxeFormDesignComponent)
+
 export const FormDesign = VxeFormDesign
 export default VxeFormDesign

package/packages/form-gather/index.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue'
 import VxeFormGatherComponent from '../form/src/form-gather'
+import { dynamicApp } from '../dynamics'
 
 export const VxeFormGather = Object.assign(VxeFormGatherComponent, {
   install (app: App) {
@@ -7,5 +8,7 @@ export const VxeFormGather = Object.assign(VxeFormGatherComponent, {
   }
 })
 
+dynamicApp.component(VxeFormGatherComponent.name as string, VxeFormGatherComponent)
+
 export const FormGather = VxeFormGather
 export default VxeFormGather

package/packages/form-item/index.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue'
 import VxeFormItemComponent from '../form/src/form-item'
+import { dynamicApp } from '../dynamics'
 
 export const VxeFormItem = Object.assign(VxeFormItemComponent, {
   install (app: App) {
@@ -7,5 +8,7 @@ export const VxeFormItem = Object.assign(VxeFormItemComponent, {
   }
 })
 
+dynamicApp.component(VxeFormItemComponent.name as string, VxeFormItemComponent)
+
 export const FormItem = VxeFormItem
 export default VxeFormItem

package/packages/icon/index.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue'
 import VxeIconComponent from './src/icon'
+import { dynamicApp } from '../dynamics'
 
 const VxeIcon = Object.assign({}, VxeIconComponent, {
   install (app: App) {
@@ -7,5 +8,7 @@ const VxeIcon = Object.assign({}, VxeIconComponent, {
   }
 })
 
+dynamicApp.component(VxeIconComponent.name as string, VxeIconComponent)
+
 export const Icon = VxeIcon
 export default VxeIcon

package/packages/input/index.ts

@@ -4,12 +4,11 @@ import { dynamicApp } from '../dynamics'
 
 export const VxeInput = Object.assign(VxeInputConstructor, {
   install (app: App) {
-    app.component(VxeInputConstructor.name, VxeInputConstructor)
+    app.component(VxeInputConstructor.name as string, VxeInputConstructor)
   }
 })
 
-export const Input = VxeInput
-
-dynamicApp.component(VxeInputConstructor.name, VxeInputConstructor)
+dynamicApp.component(VxeInputConstructor.name as string, VxeInputConstructor)
 
+export const Input = VxeInput
 export default VxeInput

package/packages/layout-aside/index.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue'
 import VxeLayoutAsideComponent from './src/layout-aside'
+import { dynamicApp } from '../dynamics'
 
 const VxeLayoutAside = Object.assign({}, VxeLayoutAsideComponent, {
   install (app: App) {
@@ -7,5 +8,7 @@ const VxeLayoutAside = Object.assign({}, VxeLayoutAsideComponent, {
   }
 })
 
+dynamicApp.component(VxeLayoutAsideComponent.name as string, VxeLayoutAsideComponent)
+
 export const LayoutAside = VxeLayoutAside
 export default VxeLayoutAside

package/packages/layout-body/index.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue'
 import VxeLayoutBodyComponent from './src/layout-body'
+import { dynamicApp } from '../dynamics'
 
 const VxeLayoutBody = Object.assign({}, VxeLayoutBodyComponent, {
   install (app: App) {
@@ -7,5 +8,7 @@ const VxeLayoutBody = Object.assign({}, VxeLayoutBodyComponent, {
   }
 })
 
+dynamicApp.component(VxeLayoutBodyComponent.name as string, VxeLayoutBodyComponent)
+
 export const LayoutBody = VxeLayoutBody
 export default VxeLayoutBody

package/packages/layout-container/index.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue'
 import VxeLayoutContainerComponent from './src/layout-container'
+import { dynamicApp } from '../dynamics'
 
 const VxeLayoutContainer = Object.assign({}, VxeLayoutContainerComponent, {
   install (app: App) {
@@ -7,5 +8,7 @@ const VxeLayoutContainer = Object.assign({}, VxeLayoutContainerComponent, {
   }
 })
 
+dynamicApp.component(VxeLayoutContainerComponent.name as string, VxeLayoutContainerComponent)
+
 export const LayoutContainer = VxeLayoutContainer
 export default VxeLayoutContainer

package/packages/layout-footer/index.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue'
 import VxeLayoutFooterComponent from './src/layout-footer'
+import { dynamicApp } from '../dynamics'
 
 const VxeLayoutFooter = Object.assign({}, VxeLayoutFooterComponent, {
   install (app: App) {
@@ -7,5 +8,7 @@ const VxeLayoutFooter = Object.assign({}, VxeLayoutFooterComponent, {
   }
 })
 
+dynamicApp.component(VxeLayoutFooterComponent.name as string, VxeLayoutFooterComponent)
+
 export const LayoutFooter = VxeLayoutFooter
 export default VxeLayoutFooter

package/packages/layout-header/index.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue'
 import VxeLayoutHeaderComponent from './src/layout-header'
+import { dynamicApp } from '../dynamics'
 
 const VxeLayoutHeader = Object.assign({}, VxeLayoutHeaderComponent, {
   install (app: App) {
@@ -7,5 +8,7 @@ const VxeLayoutHeader = Object.assign({}, VxeLayoutHeaderComponent, {
   }
 })
 
+dynamicApp.component(VxeLayoutHeaderComponent.name as string, VxeLayoutHeaderComponent)
+
 export const LayoutHeader = VxeLayoutHeader
 export default VxeLayoutHeader

package/packages/list/index.ts

@@ -0,0 +1,14 @@
+import { App } from 'vue'
+import VxeListComponent from './src/list'
+import { dynamicApp } from '../dynamics'
+
+export const VxeList = Object.assign(VxeListComponent, {
+  install (app: App) {
+    app.component(VxeListComponent.name as string, VxeListComponent)
+  }
+})
+
+dynamicApp.component(VxeListComponent.name as string, VxeListComponent)
+
+export const List = VxeList
+export default VxeList

package/packages/list/src/list.ts

@@ -0,0 +1,372 @@
+import { defineComponent, h, PropType, ref, Ref, computed, onUnmounted, watch, reactive, nextTick, onActivated } from 'vue'
+import XEUtils from 'xe-utils'
+import globalConfigStore from '../../ui/src/globalStore'
+import { useSize } from '../../hooks/size'
+import { createResizeEvent, XEResizeObserver } from '../../ui/src/resize'
+import { browse } from '../../ui/src/dom'
+import { GlobalEvent } from '../../ui/src/event'
+import VxeLoadingComponent from '../../loading/src/loading'
+
+import { VxeListConstructor, VxeListPropTypes, VxeListEmits, ListReactData, ListInternalData, ListMethods, ListPrivateRef, VxeListMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeList',
+  props: {
+    data: Array as PropType<VxeListPropTypes.Data>,
+    height: [Number, String] as PropType<VxeListPropTypes.Height>,
+    maxHeight: [Number, String] as PropType<VxeListPropTypes.MaxHeight>,
+    loading: Boolean as PropType<VxeListPropTypes.Loading>,
+    className: [String, Function] as PropType<VxeListPropTypes.ClassName>,
+    size: { type: String as PropType<VxeListPropTypes.Size>, default: () => globalConfigStore.list.size || globalConfigStore.size },
+    autoResize: { type: Boolean as PropType<VxeListPropTypes.AutoResize>, default: () => globalConfigStore.list.autoResize },
+    syncResize: [Boolean, String, Number] as PropType<VxeListPropTypes.SyncResize>,
+    scrollY: Object as PropType<VxeListPropTypes.ScrollY>
+  },
+  emits: [
+    'scroll'
+  ] as VxeListEmits,
+  setup (props, context) {
+    const { slots, emit } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const computeSize = useSize(props)
+
+    const reactData = reactive({
+      scrollYLoad: false,
+      bodyHeight: 0,
+      rowHeight: 0,
+      topSpaceHeight: 0,
+      items: []
+    } as ListReactData)
+
+    const refElem = ref() as Ref<HTMLDivElement>
+    const refVirtualWrapper = ref() as Ref<HTMLDivElement>
+    const refVirtualBody = ref() as Ref<HTMLDivElement>
+
+    const internalData: ListInternalData = {
+      fullData: [],
+      lastScrollLeft: 0,
+      lastScrollTop: 0,
+      scrollYStore: {
+        startIndex: 0,
+        endIndex: 0,
+        visibleSize: 0,
+        offsetSize: 0,
+        rowHeight: 0
+      }
+    }
+
+    const refMaps: ListPrivateRef = {
+      refElem
+    }
+
+    const $xeList = {
+      xID,
+      props,
+      context,
+      reactData,
+      internalData,
+      getRefMaps: () => refMaps
+    } as unknown as VxeListConstructor & VxeListMethods
+
+    let listMethods = {} as ListMethods
+
+    const computeSYOpts = computed(() => {
+      return Object.assign({} as { gt: number }, globalConfigStore.list.scrollY, props.scrollY)
+    })
+
+    const computeStyles = computed(() => {
+      const { height, maxHeight } = props
+      const style: { [key: string]: string | number } = {}
+      if (height) {
+        style.height = `${isNaN(height as number) ? height : `${height}px`}`
+      } else if (maxHeight) {
+        style.height = 'auto'
+        style.maxHeight = `${isNaN(maxHeight as number) ? maxHeight : `${maxHeight}px`}`
+      }
+      return style
+    })
+
+    const updateYSpace = () => {
+      const { scrollYLoad } = reactData
+      const { scrollYStore, fullData } = internalData
+      reactData.bodyHeight = scrollYLoad ? fullData.length * scrollYStore.rowHeight : 0
+      reactData.topSpaceHeight = scrollYLoad ? Math.max(scrollYStore.startIndex * scrollYStore.rowHeight, 0) : 0
+    }
+
+    const handleData = () => {
+      const { scrollYLoad } = reactData
+      const { fullData, scrollYStore } = internalData
+      reactData.items = scrollYLoad ? fullData.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullData.slice(0)
+      return nextTick()
+    }
+
+    const updateYData = () => {
+      handleData()
+      updateYSpace()
+    }
+
+    const computeScrollLoad = () => {
+      return nextTick().then(() => {
+        const { scrollYLoad } = reactData
+        const { scrollYStore } = internalData
+        const virtualBodyElem = refVirtualBody.value
+        const sYOpts = computeSYOpts.value
+        let rowHeight = 0
+        let firstItemElem: HTMLElement | undefined
+        if (virtualBodyElem) {
+          if (sYOpts.sItem) {
+            firstItemElem = virtualBodyElem.querySelector(sYOpts.sItem) as HTMLElement
+          }
+          if (!firstItemElem) {
+            firstItemElem = virtualBodyElem.children[0] as HTMLElement
+          }
+        }
+        if (firstItemElem) {
+          rowHeight = firstItemElem.offsetHeight
+        }
+        rowHeight = Math.max(20, rowHeight)
+        scrollYStore.rowHeight = rowHeight
+        // 计算 Y 逻辑
+        if (scrollYLoad) {
+          const scrollBodyElem = refVirtualWrapper.value
+          const visibleYSize = Math.max(8, Math.ceil(scrollBodyElem.clientHeight / rowHeight))
+          const offsetYSize = sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : (browse.edge ? 10 : 0)
+          scrollYStore.offsetSize = offsetYSize
+          scrollYStore.visibleSize = visibleYSize
+          scrollYStore.endIndex = Math.max(scrollYStore.startIndex, visibleYSize + offsetYSize, scrollYStore.endIndex)
+          updateYData()
+        } else {
+          updateYSpace()
+        }
+        reactData.rowHeight = rowHeight
+      })
+    }
+
+    /**
+     * 清除滚动条
+     */
+    const clearScroll = () => {
+      const scrollBodyElem = refVirtualWrapper.value
+      if (scrollBodyElem) {
+        scrollBodyElem.scrollTop = 0
+      }
+      return nextTick()
+    }
+
+    /**
+     * 如果有滚动条，则滚动到对应的位置
+     * @param {Number} scrollLeft 左距离
+     * @param {Number} scrollTop 上距离
+     */
+    const scrollTo = (scrollLeft: number | null, scrollTop?: number | null): Promise<void> => {
+      const scrollBodyElem = refVirtualWrapper.value
+      if (XEUtils.isNumber(scrollLeft)) {
+        scrollBodyElem.scrollLeft = scrollLeft
+      }
+      if (XEUtils.isNumber(scrollTop)) {
+        scrollBodyElem.scrollTop = scrollTop
+      }
+      if (reactData.scrollYLoad) {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            nextTick(() => {
+              resolve()
+            })
+          }, 50)
+        })
+      }
+      return nextTick()
+    }
+
+    /**
+     * 刷新滚动条
+     */
+    const refreshScroll = () => {
+      const { lastScrollLeft, lastScrollTop } = internalData
+      return clearScroll().then(() => {
+        if (lastScrollLeft || lastScrollTop) {
+          internalData.lastScrollLeft = 0
+          internalData.lastScrollTop = 0
+          return scrollTo(lastScrollLeft, lastScrollTop)
+        }
+      })
+    }
+
+    /**
+     * 重新计算列表
+     */
+    const recalculate = () => {
+      const el = refElem.value
+      if (el.clientWidth && el.clientHeight) {
+        return computeScrollLoad()
+      }
+      return Promise.resolve()
+    }
+
+    const loadYData = (evnt: Event) => {
+      const { scrollYStore } = internalData
+      const { startIndex, endIndex, visibleSize, offsetSize, rowHeight } = scrollYStore
+      const scrollBodyElem = evnt.target as HTMLDivElement
+      const scrollTop = scrollBodyElem.scrollTop
+      const toVisibleIndex = Math.floor(scrollTop / rowHeight)
+      const offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize)
+      const offsetEndIndex = toVisibleIndex + visibleSize + offsetSize
+      if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
+        if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
+          scrollYStore.startIndex = offsetStartIndex
+          scrollYStore.endIndex = offsetEndIndex
+          updateYData()
+        }
+      }
+    }
+
+    const scrollEvent = (evnt: Event) => {
+      const scrollBodyElem = evnt.target as HTMLDivElement
+      const scrollTop = scrollBodyElem.scrollTop
+      const scrollLeft = scrollBodyElem.scrollLeft
+      const isX = scrollLeft !== internalData.lastScrollLeft
+      const isY = scrollTop !== internalData.lastScrollTop
+      internalData.lastScrollTop = scrollTop
+      internalData.lastScrollLeft = scrollLeft
+      if (reactData.scrollYLoad) {
+        loadYData(evnt)
+      }
+      listMethods.dispatchEvent('scroll', { scrollLeft, scrollTop, isX, isY }, evnt)
+    }
+
+    listMethods = {
+      dispatchEvent (type, params, evnt) {
+        emit(type, Object.assign({ $list: $xeList, $event: evnt }, params))
+      },
+      /**
+       * 加载数据
+       * @param {Array} datas 数据
+       */
+      loadData (datas) {
+        const { scrollYStore } = internalData
+        const sYOpts = computeSYOpts.value
+        const fullData = datas || []
+        Object.assign(scrollYStore, {
+          startIndex: 0,
+          endIndex: 1,
+          visibleSize: 0
+        })
+        internalData.fullData = fullData
+        // 如果gt为0，则总是启用
+        reactData.scrollYLoad = !!sYOpts.enabled && sYOpts.gt > -1 && (sYOpts.gt === 0 || sYOpts.gt <= fullData.length)
+        handleData()
+        return computeScrollLoad().then(() => {
+          refreshScroll()
+        })
+      },
+      /**
+       * 重新加载数据
+       * @param {Array} datas 数据
+       */
+      reloadData (datas) {
+        clearScroll()
+        return listMethods.loadData(datas)
+      },
+      recalculate,
+      scrollTo,
+      refreshScroll,
+      clearScroll
+    }
+
+    Object.assign($xeList, listMethods)
+
+    const dataFlag = ref(0)
+    watch(() => props.data ? props.data.length : -1, () => {
+      dataFlag.value++
+    })
+    watch(() => props.data, () => {
+      dataFlag.value++
+    })
+    watch(dataFlag, () => {
+      listMethods.loadData(props.data || [])
+    })
+
+    watch(() => props.syncResize, (value) => {
+      if (value) {
+        recalculate()
+        nextTick(() => setTimeout(() => recalculate()))
+      }
+    })
+
+    onActivated(() => {
+      recalculate().then(() => refreshScroll())
+    })
+
+    let resizeObserver: XEResizeObserver
+
+    nextTick(() => {
+      GlobalEvent.on($xeList, 'resize', () => {
+        recalculate()
+      })
+      if (props.autoResize) {
+        const el = refElem.value
+        resizeObserver = createResizeEvent(() => recalculate())
+        resizeObserver.observe(el)
+      }
+      listMethods.loadData(props.data || [])
+    })
+
+    onUnmounted(() => {
+      if (resizeObserver) {
+        resizeObserver.disconnect()
+      }
+      GlobalEvent.off($xeList, 'resize')
+    })
+
+    const renderVN = () => {
+      const { className, loading } = props
+      const { bodyHeight, topSpaceHeight, items } = reactData
+      const vSize = computeSize.value
+      const styles = computeStyles.value
+      return h('div', {
+        ref: refElem,
+        class: ['vxe-list', className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '', {
+          [`size--${vSize}`]: vSize,
+          'is--loading': loading
+        }]
+      }, [
+        h('div', {
+          ref: refVirtualWrapper,
+          class: 'vxe-list--virtual-wrapper',
+          style: styles,
+          onScroll: scrollEvent
+        }, [
+          h('div', {
+            class: 'vxe-list--y-space',
+            style: {
+              height: bodyHeight ? `${bodyHeight}px` : ''
+            }
+          }),
+          h('div', {
+            ref: refVirtualBody,
+            class: 'vxe-list--body',
+            style: {
+              marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
+            }
+          }, slots.default ? slots.default({ items, $list: $xeList }) : [])
+        ]),
+        /**
+         * 加载中
+         */
+        h(VxeLoadingComponent, {
+          class: 'vxe-list--loading',
+          modelValue: loading
+        })
+      ])
+    }
+
+    $xeList.renderVN = renderVN
+
+    return $xeList
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/list-design/index.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue'
 import VxeListDesignComponent from './src/list-design'
+import { dynamicApp } from '../dynamics'
 
 const VxeListDesign = Object.assign({}, VxeListDesignComponent, {
   install (app: App) {
@@ -7,5 +8,7 @@ const VxeListDesign = Object.assign({}, VxeListDesignComponent, {
   }
 })
 
+dynamicApp.component(VxeListDesignComponent.name as string, VxeListDesignComponent)
+
 export const ListDesign = VxeListDesign
 export default VxeListDesign

package/packages/loading/index.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue'
 import VxeLoadingComponent from './src/loading'
+import { dynamicApp } from '../dynamics'
 
 const VxeLoading = Object.assign({}, VxeLoadingComponent, {
   install (app: App) {
@@ -7,5 +8,7 @@ const VxeLoading = Object.assign({}, VxeLoadingComponent, {
   }
 })
 
+dynamicApp.component(VxeLoadingComponent.name as string, VxeLoadingComponent)
+
 export const Loading = VxeLoading
 export default VxeLoading

package/packages/optgroup/index.ts

@@ -4,12 +4,11 @@ import { dynamicApp } from '../dynamics'
 
 export const VxeOptgroup = Object.assign(VxeOptgroupComponent, {
   install: function (app: App) {
-    app.component(VxeOptgroupComponent.name, VxeOptgroupComponent)
+    app.component(VxeOptgroupComponent.name as string, VxeOptgroupComponent)
   }
 })
 
-export const Optgroup = VxeOptgroup
-
-dynamicApp.component(VxeOptgroupComponent.name, VxeOptgroupComponent)
+dynamicApp.component(VxeOptgroupComponent.name as string, VxeOptgroupComponent)
 
+export const Optgroup = VxeOptgroup
 export default VxeOptgroup

package/packages/option/index.ts

@@ -4,12 +4,11 @@ import { dynamicApp } from '../dynamics'
 
 export const VxeOption = Object.assign(VxeOptionComponent, {
   install: function (app: App) {
-    app.component(VxeOptionComponent.name, VxeOptionComponent)
+    app.component(VxeOptionComponent.name as string, VxeOptionComponent)
   }
 })
 
-export const Option = VxeOption
-
-dynamicApp.component(VxeOptionComponent.name, VxeOptionComponent)
+dynamicApp.component(VxeOptionComponent.name as string, VxeOptionComponent)
 
+export const Option = VxeOption
 export default VxeOption