Merge branch 'x-extends:master' into master

examples/App.vue

@@ -288,6 +288,13 @@ export default defineComponent({
               },
               keywords: ['modal', '$XModal']
             },
+            {
+              label: 'app.aside.nav.drawer',
+              locat: {
+                name: 'ModuleDrawer'
+              },
+              keywords: ['drawer']
+            },
             {
               label: 'app.aside.nav.file',
               locat: {

examples/i18n/lang/en-US.ts

@@ -188,6 +188,7 @@ export default {
         textarea: 'Textarea',
         select: 'Select',
         modal: 'Modal',
+        drawer: 'Drawer',
         tooltip: 'Tooltip',
         form: 'Form',
         switch: 'Switch',

examples/i18n/lang/zh-CN.ts

@@ -187,6 +187,7 @@ export default {
         textarea: '文本域',
         select: '下拉框',
         modal: '弹窗',
+        drawer: '抽屉',
         tooltip: '工具提示',
         form: '表单',
         switch: '开关',

examples/i18n/lang/zh-TC.ts

@@ -187,6 +187,7 @@ export default {
         textarea: '文本域',
         select: '下拉框',
         modal: '弹窗',
+        drawer: '抽屉',
         tooltip: '工具提示',
         form: '表单',
         switch: '开关',

examples/main.ts

@@ -43,6 +43,7 @@ import {
   VxeButton,
   VxeButtonGroup,
   VxeModal,
+  VxeDrawer,
   VxeTooltip,
   VxeForm,
   VxeFormItem,
@@ -90,6 +91,7 @@ app.use(VxeTextarea)
 app.use(VxeButton)
 app.use(VxeButtonGroup)
 app.use(VxeModal)
+app.use(VxeDrawer)
 app.use(VxeSelect)
 app.use(VxeOptgroup)
 app.use(VxeOption)

examples/plugins/table/renderer/empty.tsx

@@ -3,7 +3,7 @@ import { VXETable } from '../../../../packages/all'
 // 创建一个简单的空内容渲染
 VXETable.renderer.add('NotData', {
   // 空内容模板
-  renderEmpty () {
+  renderTableEmptyView () {
     return [
       <span>
         <img src="/vxe-table/static/other/img1.gif"/>

examples/plugins/table/setup.ts

@@ -3,7 +3,7 @@ import i18n from '@/i18n'
 import { VXETable } from '../../../packages/all'
 
 // 设置默认参数
-VXETable.config({
+VXETable.setConfig({
   table: {
     exportConfig: {
       types: ['csv', 'html', 'xml', 'txt']

examples/router/index.ts

@@ -256,6 +256,7 @@ import ModuleTextarea from '../views/textarea/Textarea.vue'
 import ModuleSelect from '../views/select/Select.vue'
 import ModulePager from '../views/pager/Pager.vue'
 import ModuleModal from '../views/modal/Modal.vue'
+import ModuleDrawer from '../views/drawer/Drawer.vue'
 import ModuleTooltip from '../views/tooltip/Tooltip.vue'
 import ModuleToolbar from '../views/toolbar/Toolbar.vue'
 import ModuleForm from '../views/form/Form.vue'
@@ -1515,6 +1516,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'ModuleModal',
     component: ModuleModal
   },
+  {
+    path: '/table/module/drawer',
+    name: 'ModuleDrawer',
+    component: ModuleDrawer
+  },
   {
     path: '/table/module/tooltip',
     name: 'ModuleTooltip',

examples/views/drawer/Drawer.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <p>
+      <vxe-button content="左侧打开" @click="demo1.value1 = true"></vxe-button>
+      <vxe-drawer v-model="demo1.value1" position="left">
+        <template #default>
+          <div>默认尺寸</div>
+          <div>xxxxxxxxx</div>
+          <div>xxxxxxxxxx</div>
+        </template>
+      </vxe-drawer>
+
+      <vxe-button content="右侧打开" @click="demo1.value2 = true"></vxe-button>
+      <vxe-drawer v-model="demo1.value2" position="right">
+        <template #default>
+          <div>默认尺寸</div>
+          <div>xxxxxxxxx</div>
+          <div>xxxxxxxxxx</div>
+        </template>
+      </vxe-drawer>
+
+      <vxe-button content="顶部打开" @click="demo1.value3 = true"></vxe-button>
+      <vxe-drawer v-model="demo1.value3" position="top">
+        <template #default>
+          <div>默认尺寸</div>
+          <div>xxxxxxxxx</div>
+          <div>xxxxxxxxxx</div>
+        </template>
+      </vxe-drawer>
+
+      <vxe-button content="底部打开" @click="demo1.value4 = true"></vxe-button>
+      <vxe-drawer v-model="demo1.value4" position="bottom">
+        <template #default>
+          <div>默认尺寸</div>
+          <div>xxxxxxxxx</div>
+          <div>xxxxxxxxxx</div>
+        </template>
+      </vxe-drawer>
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+const demo1 = reactive({
+  value1: false,
+  value2: false,
+  value3: false,
+  value4: false
+})
+</script>

examples/views/start/Global.vue

@@ -17,7 +17,7 @@ export default defineComponent({
         `
         import VXETable from 'vxe-table'
 
-        VXETable.setup({
+        VXETable.setConfig({
           // size: null, // 全局尺寸
           // zIndex: 999, // 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡
           // version: 0, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据

examples/views/start/I18n.vue

@@ -63,7 +63,7 @@ export default defineComponent({
         import i18n from './i18n'
         import VXETable from 'vxe-table'
         
-        VXETable.setup({
+        VXETable.setConfig({
           // 对组件内置的提示语进行国际化翻译
           i18n: (key, args) => i18n.global.t(key, args)
         })
@@ -73,7 +73,7 @@ export default defineComponent({
         createApp(App).use(i18n).use(VXETable).$mount('#app')
         `,
         `
-        VXETable.setup({
+        VXETable.setConfig({
           // 可选，对参数中的列头、校验提示..等进行自动翻译（只对支持国际化的有效）
           translate (key, args) {
             // 例如，只翻译 "app." 开头的键值

examples/views/start/Icons.vue

@@ -6,7 +6,7 @@
       <pre-code class="typescript">
         import VXETable from 'vxe-table'
 
-        VXETable.setup({
+        VXETable.setConfig({
           icon: {
             // loading
             LOADING: 'vxe-icon-spinner roll vxe-loading--default-icon',

examples/views/start/Use.vue

@@ -79,7 +79,7 @@
         import zhCN from 'vxe-table/es/locale/lang/zh-CN'
 
         // 按需加载的方式默认是不带国际化的，自定义国际化需要自行解析占位符 '{0}'，例如：
-        VXETable.setup({
+        VXETable.setConfig({
           i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
         })
 
@@ -205,7 +205,7 @@
         import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
 
         // 按需加载的方式默认是不带国际化的，自定义国际化需要自行解析占位符 '{0}'，例如：
-        VXETable.setup({
+        VXETable.setConfig({
           i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
         })
 

examples/views/table/renderer/Empty.vue

@@ -3,7 +3,7 @@
     <p class="tip">
       空内容渲染 <table-api-link prop="empty-render"/>，查看 <a class="link" href="https://gitee.com/xuliangzhan_admin/vxe-table/tree/master/examples/plugins/table/renderer" target="_blank">示例的源码</a><span class="red">（具体请自行实现，该示例仅供参考）</span><br>
       配置参数：<br>
-      renderEmpty (renderOpts, params: { $table }) 空值时显示的内容<br>
+      renderTableEmptyView (renderOpts, params: { $table }) 空值时显示的内容<br>
     </p>
 
     <vxe-table
@@ -44,7 +44,7 @@ export default defineComponent({
         // 创建一个空内容渲染
         VXETable.renderer.add('NotData', {
           // 空内容模板
-          renderEmpty (renderOpts, params) {
+          renderTableEmptyView (renderOpts, params) {
             return [
               <span>
                 <img src="/vxe-table/static/other/img1.gif"/>

gulpfile.js

@@ -52,6 +52,7 @@ const componentList = [
   'button',
   'button-group',
   'modal',
+  'drawer',
   'tooltip',
   'form',
   'form-item',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.6.14-beta.1",
+  "version": "4.6.15-beta.3",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印导出、自定义模板、渲染器、JSON 配置式...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

packages/all.ts

@@ -1,6 +1,6 @@
 import { App } from 'vue'
 import XEUtils from 'xe-utils'
-import { config } from './v-x-e-table'
+import { setConfig } from './v-x-e-table'
 import { setTheme } from './v-x-e-table/src/theme'
 
 import { VxeTableFilterModule } from './filter'
@@ -27,6 +27,7 @@ import { VxeTextarea } from './textarea'
 import { VxeButton } from './button'
 import { VxeButtonGroup } from './button-group'
 import { VxeModal } from './modal'
+import { VxeDrawer } from './drawer'
 import { VxeTooltip } from './tooltip'
 import { VxeForm } from './form'
 import { VxeFormItem } from './form-item'
@@ -69,6 +70,7 @@ const components = [
   VxeButton,
   VxeButtonGroup,
   VxeModal,
+  VxeDrawer,
   VxeTooltip,
   VxeForm,
   VxeFormItem,
@@ -85,14 +87,14 @@ const components = [
 ]
 
 // 默认中文
-config({
+setConfig({
   i18n: (key: string, args: any) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
 })
 
 // 默认安装
 export function install (app: App, options: any) {
   if (XEUtils.isPlainObject(options)) {
-    config(options)
+    setConfig(options)
     if ((options as any).theme) {
       setTheme(options)
     }
@@ -129,6 +131,7 @@ export * from './textarea'
 export * from './button'
 export * from './button-group'
 export * from './modal'
+export * from './drawer'
 export * from './tooltip'
 export * from './form'
 export * from './form-item'

packages/drawer/index.d.ts

@@ -0,0 +1,4 @@
+import { VxeDrawer } from '../../types/drawer'
+
+export * from '../../types/drawer'
+export default VxeDrawer

packages/drawer/index.ts

@@ -0,0 +1,73 @@
+import { App } from 'vue'
+import XEUtils from 'xe-utils'
+import VxeDrawerComponent, { allActiveDrawers } from './src/modal'
+import { VXETable } from '../v-x-e-table'
+import { dynamicApp, dynamicStore, checkDynamic } from '../dynamics'
+
+import { VxeDrawerPropTypes, DrawerEventTypes, VxeDrawerDefines } from '../../types'
+
+function openDrawer (options: VxeDrawerDefines.DrawerOptions): Promise<DrawerEventTypes> {
+  // 使用动态组件渲染动态弹框
+  checkDynamic()
+  return new Promise(resolve => {
+    if (options && options.id && allActiveDrawers.some(comp => comp.props.id === options.id)) {
+      resolve('exist')
+    } else {
+      const _onHide = options.onHide
+      const drawerOpts = Object.assign(options, {
+        key: XEUtils.uniqueId(),
+        modelValue: true,
+        onHide (params) {
+          const drawerList = dynamicStore.drawers
+          if (_onHide) {
+            _onHide(params)
+          }
+          dynamicStore.drawers = drawerList.filter(item => item.key !== drawerOpts.key)
+          resolve(params.type)
+        }
+      } as VxeDrawerDefines.DrawerOptions)
+      dynamicStore.drawers.push(drawerOpts)
+    }
+  })
+}
+
+function getDrawer (id: VxeDrawerPropTypes.ID) {
+  return XEUtils.find(allActiveDrawers, $drawer => $drawer.props.id === id)
+}
+
+/**
+ * 全局关闭动态的活动窗口（只能用于关闭动态的创建的活动窗口）
+ * 如果传 id 则关闭指定的窗口
+ * 如果不传则关闭所有窗口
+ */
+function closeDrawer (id?: VxeDrawerPropTypes.ID) {
+  const drawers = id ? [getDrawer(id)] : allActiveDrawers
+  const restPromises: any[] = []
+  drawers.forEach($drawer => {
+    if ($drawer) {
+      restPromises.push($drawer.close())
+    }
+  })
+  return Promise.all(restPromises)
+}
+
+const DrawerController = {
+  get: getDrawer,
+  close: closeDrawer,
+  open: openDrawer
+}
+
+export const drawer = DrawerController
+
+export const VxeDrawer = Object.assign(VxeDrawerComponent, {
+  install: function (app: App) {
+    app.component(VxeDrawerComponent.name as string, VxeDrawerComponent)
+    VXETable.drawer = DrawerController
+  }
+})
+
+dynamicApp.component(VxeDrawerComponent.name as string, VxeDrawerComponent)
+
+export const Drawer = VxeDrawer
+
+export default VxeDrawer