fix

README.en.md

@@ -12,7 +12,7 @@
 [![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-pc-ui.svg)](https://github.com/x-extends/vxe-pc-ui/pulls?q=is%3Apr+is%3Aclosed)
 [![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
 
-A [vue](https://www.npmjs.com/package/vue) based PC side component library.  
+A [vue](https://www.npmjs.com/package/vue) based PC component library.  
 
 ## Browser Support
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.0.16",
-  "description": "A vue based PC side component library",
+  "version": "4.0.18",
+  "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
     "serve": "vue-cli-service serve",
@@ -25,7 +25,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "@vxe-ui/core": "^1.0.1"
+    "@vxe-ui/core": "^1.0.6"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",

packages/alert/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeAlertComponent from './src/alert'
 import { dynamicApp } from '../dynamics'
 
 export const VxeAlert = Object.assign({}, VxeAlertComponent, {
   install (app: App) {
     app.component(VxeAlertComponent.name as string, VxeAlertComponent)
+    VxeUI.component(VxeAlertComponent)
   }
 })
 

packages/anchor-link/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeAnchorLinkComponent from '../anchor/src/anchor-link'
 import { dynamicApp } from '../dynamics'
 
 export const VxeAnchorLink = Object.assign({}, VxeAnchorLinkComponent, {
   install (app: App) {
     app.component(VxeAnchorLinkComponent.name as string, VxeAnchorLinkComponent)
+    VxeUI.component(VxeAnchorLinkComponent)
   }
 })
 

packages/anchor/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeAnchorComponent from './src/anchor'
 import { dynamicApp } from '../dynamics'
 
 export const VxeAnchor = Object.assign({}, VxeAnchorComponent, {
   install (app: App) {
     app.component(VxeAnchorComponent.name as string, VxeAnchorComponent)
+    VxeUI.component(VxeAnchorComponent)
   }
 })
 

packages/breadcrumb-item/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeBreadcrumbItemComponent from '../breadcrumb/src/breadcrumb-item'
 import { dynamicApp } from '../dynamics'
 
 export const VxeBreadcrumbItem = Object.assign({}, VxeBreadcrumbItemComponent, {
   install (app: App) {
     app.component(VxeBreadcrumbItemComponent.name as string, VxeBreadcrumbItemComponent)
+    VxeUI.component(VxeBreadcrumbItemComponent)
   }
 })
 

packages/breadcrumb/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeBreadcrumbComponent from './src/breadcrumb'
 import { dynamicApp } from '../dynamics'
 
 export const VxeBreadcrumb = Object.assign({}, VxeBreadcrumbComponent, {
   install (app: App) {
     app.component(VxeBreadcrumbComponent.name as string, VxeBreadcrumbComponent)
+    VxeUI.component(VxeBreadcrumbComponent)
   }
 })
 

packages/button-group/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeButtonGroupComponent from '../button/src/button-group'
 import { dynamicApp } from '../dynamics'
 
 export const VxeButtonGroup = Object.assign({}, VxeButtonGroupComponent, {
   install (app: App) {
     app.component(VxeButtonGroupComponent.name as string, VxeButtonGroupComponent)
+    VxeUI.component(VxeButtonGroupComponent)
   }
 })
 

packages/button/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeButtonComponent from './src/button'
 import { dynamicApp } from '../dynamics'
 
 export const VxeButton = Object.assign({}, VxeButtonComponent, {
   install (app: App) {
     app.component(VxeButtonComponent.name as string, VxeButtonComponent)
+    VxeUI.component(VxeButtonComponent)
   }
 })
 

packages/calendar/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeCalendarComponent from './src/calendar'
 import { dynamicApp } from '../dynamics'
 
 export const VxeCalendar = Object.assign({}, VxeCalendarComponent, {
   install (app: App) {
     app.component(VxeCalendarComponent.name as string, VxeCalendarComponent)
+    VxeUI.component(VxeCalendarComponent)
   }
 })
 

packages/card/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeCardComponent from './src/card'
 import { dynamicApp } from '../dynamics'
 
 export const VxeCard = Object.assign({}, VxeCardComponent, {
   install (app: App) {
     app.component(VxeCardComponent.name as string, VxeCardComponent)
+    VxeUI.component(VxeCardComponent)
   }
 })
 

packages/carousel/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeCarouselComponent from './src/carousel'
 import { dynamicApp } from '../dynamics'
 
 export const VxeCarousel = Object.assign({}, VxeCarouselComponent, {
   install (app: App) {
     app.component(VxeCarouselComponent.name as string, VxeCarouselComponent)
+    VxeUI.component(VxeCarouselComponent)
   }
 })
 

packages/checkbox-group/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeCheckboxGroupComponent from '../checkbox/src/group'
 import { dynamicApp } from '../dynamics'
 
 export const VxeCheckboxGroup = Object.assign(VxeCheckboxGroupComponent, {
   install (app: App) {
     app.component(VxeCheckboxGroupComponent.name as string, VxeCheckboxGroupComponent)
+    VxeUI.component(VxeCheckboxGroupComponent)
   }
 })
 

packages/checkbox/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeCheckboxComponent from './src/checkbox'
 import { dynamicApp } from '../dynamics'
 
 export const VxeCheckbox = Object.assign(VxeCheckboxComponent, {
   install (app: App) {
     app.component(VxeCheckboxComponent.name as string, VxeCheckboxComponent)
+    VxeUI.component(VxeCheckboxComponent)
   }
 })
 

packages/col/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeColComponent from '../row/src/col'
 import { dynamicApp } from '../dynamics'
 
 export const VxeCol = Object.assign({}, VxeColComponent, {
   install (app: App) {
     app.component(VxeColComponent.name as string, VxeColComponent)
+    VxeUI.component(VxeColComponent)
   }
 })
 

packages/collapse-pane/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeCollapsePaneComponent from './src/collapse-pane'
 import { dynamicApp } from '../dynamics'
 
 export const VxeCollapsePane = Object.assign({}, VxeCollapsePaneComponent, {
   install (app: App) {
     app.component(VxeCollapsePaneComponent.name as string, VxeCollapsePaneComponent)
+    VxeUI.component(VxeCollapsePaneComponent)
   }
 })
 

packages/collapse/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeCollapseComponent from './src/collapse'
 import { dynamicApp } from '../dynamics'
 
 export const VxeCollapse = Object.assign({}, VxeCollapseComponent, {
   install (app: App) {
     app.component(VxeCollapseComponent.name as string, VxeCollapseComponent)
+    VxeUI.component(VxeCollapseComponent)
   }
 })
 

packages/date-picker/index.ts

@@ -1,11 +1,13 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeDatePickerComponent from './src/date-picker'
 import { dynamicApp } from '../dynamics'
 
 export const VxeDatePicker = Object.assign({}, VxeDatePickerComponent, {
   install (app: App) {
     app.component(VxeDatePickerComponent.name as string, VxeDatePickerComponent)
     app.component('VxeDateInput', VxeDatePickerComponent)
+    VxeUI.component(VxeDatePickerComponent)
   }
 })
 

packages/drawer/index.ts

@@ -1,7 +1,7 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import XEUtils from 'xe-utils'
 import VxeDrawerComponent, { allActiveDrawers } from './src/drawer'
-import { VxeUI } from '@vxe-ui/core'
 import { dynamicApp, dynamicStore, checkDynamic } from '../dynamics'
 
 import { VxeDrawerPropTypes, DrawerEventTypes, VxeDrawerDefines } from '../../types'
@@ -60,6 +60,7 @@ export const DrawerController = {
 export const VxeDrawer = Object.assign(VxeDrawerComponent, {
   install: function (app: App) {
     app.component(VxeDrawerComponent.name as string, VxeDrawerComponent)
+    VxeUI.component(VxeDrawerComponent)
     VxeUI.drawer = DrawerController
   }
 })

packages/flow-design/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeFlowDesignComponent from './src/flow-design'
 import { dynamicApp } from '../dynamics'
 
 export const VxeFlowDesign = Object.assign({}, VxeFlowDesignComponent, {
   install (app: App) {
     app.component(VxeFlowDesignComponent.name as string, VxeFlowDesignComponent)
+    VxeUI.component(VxeFlowDesignComponent)
   }
 })
 

packages/flow-view/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeFlowViewComponent from './src/flow-view'
 import { dynamicApp } from '../dynamics'
 
 export const VxeFlowView = Object.assign({}, VxeFlowViewComponent, {
   install (app: App) {
     app.component(VxeFlowViewComponent.name as string, VxeFlowViewComponent)
+    VxeUI.component(VxeFlowViewComponent)
   }
 })
 

packages/form-design/index.ts

@@ -1,11 +1,13 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeFormDesignComponent from './src/form-design'
 import { dynamicApp } from '../dynamics'
 import './render'
 
 export const VxeFormDesign = Object.assign({}, VxeFormDesignComponent, {
   install (app: App) {
     app.component(VxeFormDesignComponent.name as string, VxeFormDesignComponent)
+    VxeUI.component(VxeFormDesignComponent)
   }
 })
 

packages/form-gather/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeFormGatherComponent from '../form/src/form-gather'
 import { dynamicApp } from '../dynamics'
 
 export const VxeFormGather = Object.assign(VxeFormGatherComponent, {
   install (app: App) {
     app.component(VxeFormGatherComponent.name as string, VxeFormGatherComponent)
+    VxeUI.component(VxeFormGatherComponent)
   }
 })
 

packages/form-item/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeFormItemComponent from '../form/src/form-item'
 import { dynamicApp } from '../dynamics'
 
 export const VxeFormItem = Object.assign(VxeFormItemComponent, {
   install (app: App) {
     app.component(VxeFormItemComponent.name as string, VxeFormItemComponent)
+    VxeUI.component(VxeFormItemComponent)
   }
 })
 

packages/form-view/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeFormViewComponent from '../form-design/src/form-view'
 import { dynamicApp } from '../dynamics'
 
 export const VxeFormView = Object.assign(VxeFormViewComponent, {
   install: function (app: App) {
     app.component(VxeFormViewComponent.name as string, VxeFormViewComponent)
+    VxeUI.component(VxeFormViewComponent)
   }
 })
 

packages/form/index.ts

@@ -1,11 +1,13 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeFormComponent from './src/form'
 import { dynamicApp } from '../dynamics'
 import './render'
 
 export const VxeForm = Object.assign(VxeFormComponent, {
   install (app: App) {
     app.component(VxeFormComponent.name as string, VxeFormComponent)
+    VxeUI.component(VxeFormComponent)
   }
 })
 

packages/icon/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeIconComponent from './src/icon'
 import { dynamicApp } from '../dynamics'
 
 export const VxeIcon = Object.assign({}, VxeIconComponent, {
   install (app: App) {
     app.component(VxeIconComponent.name as string, VxeIconComponent)
+    VxeUI.component(VxeIconComponent)
   }
 })
 

packages/image-preview/index.ts

@@ -7,6 +7,7 @@ import { openPreviewImage } from '../image/src/util'
 export const VxeImagePreview = Object.assign(VxeImagePreviewComponent, {
   install (app: App) {
     app.component(VxeImagePreviewComponent.name as string, VxeImagePreviewComponent)
+    VxeUI.component(VxeImagePreviewComponent)
     VxeUI.previewImage = openPreviewImage
   }
 })

packages/image/index.ts

@@ -1,10 +1,12 @@
 import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
 import VxeImageComponent from './src/image'
 import { dynamicApp } from '../dynamics'
 
 export const VxeImage = Object.assign({}, VxeImageComponent, {
   install (app: App) {
     app.component(VxeImageComponent.name as string, VxeImageComponent)
+    VxeUI.component(VxeImageComponent)
   }
 })
 

packages/image/src/util.ts

@@ -19,6 +19,7 @@ export const openPreviewImage: VxeImageDefines.PreviewImageFunction = (options)
       height: '100%',
       showHeader: false,
       showFooter: false,
+      padding: false,
       escClosable: opts.escClosable,
       className: 'vxe-image-preview-popup-wrapper',
       slots: {