refactor(drawer): 重构drawer组件 (#235)

Author: xingyan95

packages/devui-vue/devui-cli/commands/build.js

@@ -1,28 +1,28 @@
-const path = require('path')
-const fs = require('fs')
-const fsExtra = require('fs-extra')
-const { defineConfig, build } = require('vite')
-const vue = require('@vitejs/plugin-vue')
-const vueJsx = require('@vitejs/plugin-vue-jsx')
-const nuxtBuild = require('./build-nuxt-auto-import')
+const path = require('path');
+const fs = require('fs');
+const fsExtra = require('fs-extra');
+const { defineConfig, build } = require('vite');
+const vue = require('@vitejs/plugin-vue');
+const vueJsx = require('@vitejs/plugin-vue-jsx');
+const nuxtBuild = require('./build-nuxt-auto-import');
 
-const entryDir = path.resolve(__dirname, '../../devui')
-const outputDir = path.resolve(__dirname, '../../build')
+const entryDir = path.resolve(__dirname, '../../devui');
+const outputDir = path.resolve(__dirname, '../../build');
 
 const baseConfig = defineConfig({
   configFile: false,
   publicDir: false,
-  plugins: [vue(), vueJsx()]
-})
+  plugins: [vue(), vueJsx()],
+});
 
 const rollupOptions = {
-  external: ['vue', 'vue-router'],
+  external: ['vue', 'vue-router', '@vueuse/core'],
   output: {
     globals: {
-      vue: 'Vue'
-    }
-  }
-}
+      vue: 'Vue',
+    },
+  },
+};
 
 const buildSingle = async (name) => {
   await build(
@@ -34,13 +34,13 @@ const buildSingle = async (name) => {
           entry: path.resolve(entryDir, name),
           name: 'index',
           fileName: 'index',
-          formats: ['es', 'umd']
+          formats: ['es', 'umd'],
         },
-        outDir: path.resolve(outputDir, name)
-      }
+        outDir: path.resolve(outputDir, name),
+      },
     })
-  )
-}
+  );
+};
 
 const buildAll = async () => {
   await build(
@@ -52,13 +52,13 @@ const buildAll = async () => {
           entry: path.resolve(entryDir, 'vue-devui.ts'),
           name: 'VueDevui',
           fileName: 'vue-devui',
-          formats: ['es', 'umd']
+          formats: ['es', 'umd'],
         },
-        outDir: outputDir
-      }
+        outDir: outputDir,
+      },
     })
-  )
-}
+  );
+};
 
 const createPackageJson = (name) => {
   const fileStr = `{
@@ -67,25 +67,25 @@ const createPackageJson = (name) => {
   "main": "index.umd.js",
   "module": "index.es.js",
   "style": "style.css"
-}`
+}`;
 
-  fsExtra.outputFile(path.resolve(outputDir, `${name}/package.json`), fileStr, 'utf-8')
-}
+  fsExtra.outputFile(path.resolve(outputDir, `${name}/package.json`), fileStr, 'utf-8');
+};
 
 exports.build = async () => {
-  await buildAll()
+  await buildAll();
 
   const components = fs.readdirSync(entryDir).filter((name) => {
-    const componentDir = path.resolve(entryDir, name)
-    const isDir = fs.lstatSync(componentDir).isDirectory()
-    return isDir && fs.readdirSync(componentDir).includes('index.ts')
-  })
+    const componentDir = path.resolve(entryDir, name);
+    const isDir = fs.lstatSync(componentDir).isDirectory();
+    return isDir && fs.readdirSync(componentDir).includes('index.ts');
+  });
 
   for (const name of components) {
-    await buildSingle(name)
-    createPackageJson(name)
-    nuxtBuild.createAutoImportedComponent(name)
+    await buildSingle(name);
+    createPackageJson(name);
+    nuxtBuild.createAutoImportedComponent(name);
   }
 
-  nuxtBuild.createNuxtPlugin()
-}
+  nuxtBuild.createNuxtPlugin();
+};

packages/devui-vue/devui/drawer/index.ts

@@ -1,25 +1,21 @@
-import type { App } from 'vue'
-import Drawer from './src/drawer'
-import DrawerService from './src/drawer-service'
+import type { App } from 'vue';
+import Drawer from './src/drawer';
+import DrawerService from './src/drawer-service';
 
-Drawer.install = function(app: App): void {
-  app.component(Drawer.name, Drawer)
-}
-
-export { Drawer, DrawerService }
+export { Drawer, DrawerService };
 
 // TODO: no-service model exists memory leak
 // rest tasks
-// 1. draggable width 
-// 2. function of the 1st icon in header-component 
-// 3. rest service-model api 
+// 1. draggable width
+// 2. function of the 1st icon in header-component
+// 3. rest service-model api
 // 4. typescript type of props
 export default {
   title: 'Drawer 抽屉板',
   category: '反馈',
   status: '75%',
   install(app: App): void {
-    app.use(Drawer as any)
-    app.config.globalProperties.$drawerService = DrawerService
-  }
-}
+    app.component(Drawer.name, Drawer);
+    app.config.globalProperties.$drawerService = new DrawerService();
+  },
+};

packages/devui-vue/devui/drawer/src/components/drawer-body.scss

@@ -0,0 +1,20 @@
+@import '../../../styles-var/devui-var.scss';
+
+.devui-drawer-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: $devui-shadow;
+}
+
+.drawer-overlay-fade-enter-active,
+.drawer-overlay-fade-leave-active {
+  transition: opacity 0.1s linear;
+}
+
+.drawer-overlay-fade-enter-from,
+.drawer-overlay-fade-leave-to {
+  opacity: 0;
+}