refactor: use vite build

Author: sendya

.eslintrc.js

@@ -1,29 +1,31 @@
 module.exports = {
-  root: true,
   env: {
-    node: true,
+    browser: true,
+    es2021: true,
   },
   extends: [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/typescript/recommended',
-    '@vue/prettier',
-    '@vue/prettier/@typescript-eslint',
+    'airbnb-base',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:prettier/recommended',
   ],
   parserOptions: {
-    ecmaVersion: 2020,
-    // parser: '@typescript-eslint/parser',
+    ecmaVersion: 12,
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
   },
+  plugins: ['vue', '@typescript-eslint'],
   rules: {
+    'import/extensions': 0,
+    'import/no-unresolved': 0,
+    'no-param-reassign': 0,
+    'consistent-return': 0,
     '@typescript-eslint/no-explicit-any': 0,
-    '@typescript-eslint/no-inferrable-types': 0,
-    '@typescript-eslint/ban-ts-ignore': 'off',
-    '@typescript-eslint/no-var-requires': 'off',
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/no-empty-function': 'off',
-    '@typescript-eslint/no-non-null-assertion': 'off',
-    '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true }],
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    '@typescript-eslint/no-empty-function': 0,
+    '@typescript-eslint/no-non-null-assertion': 0,
+    '@typescript-eslint/explicit-module-boundary-types': 0,
   },
 };

.prettierignore

@@ -1,24 +1,17 @@
+.editorconfig
+.eslintignore
 **/*.svg
 package.json
-lib/
-es/
-dist/
-_site/
-coverage/
-CNAME
 LICENSE
 yarn.lock
-netlify.toml
-yarn-error.log
+**/assets
+**/*.yml
 *.sh
 *.snap
 .gitignore
 .npmignore
 .prettierignore
 .DS_Store
-.editorconfig
-.eslintignore
-**/*.yml
-.gitattributes
-.stylelintrc
-.vcmrc
+node_modules/**
+lib/
+es/

.prettierrc

@@ -1,7 +1,7 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
-  "endOfLine" : "lf",
+  "endOfLine": "lf",
   "printWidth": 100,
   "proseWrap": "never",
   "arrowParens": "avoid",
@@ -14,4 +14,4 @@
       }
     }
   ]
-}
+}

README.md

@@ -22,7 +22,9 @@ npm i @ant-design-vue/pro-layout@next -S
 First, you should add the icons that you need into the library.
 
 ```js
-import 'ant-design-vue/dist/antd.less';
+import 'ant-design-vue/dist/antd.less'; // antd css
+import '@ant-design-vue/pro-layout/dist/style.css'; // pro-layout css
+
 import { createApp } from 'vue';
 import ProLayout, { PageContainer } from '@ant-design-vue/pro-layout';
 
@@ -35,19 +37,27 @@ After that, you can use pro-layout in your Vue components as simply as this:
 
 ```vue
 <template>
-  <pro-layout v-bind="state">
+  <pro-layout
+    :locale="locale"
+    v-bind="state"
+    v-model:openKeys="state.openKeys"
+    v-model:collapsed="state.collapsed"
+    v-model:selectedKeys="state.selectedKeys"
+  >
     <router-view />
   </pro-layout>
 </template>
 
 <script>
 import { defineComponent, reactive } from 'vue';
+// import { getMenuData, clearMenuItem } from '@ant-design-vue/pro-layout';
+
+const locale=(i18n: string) => i18n;
 
 export default defineComponent({
   setup() {
     const state = reactive({
       collapsed: false,
-
       openKeys: ['/dashboard'],
       selectedKeys: ['/welcome'],
 
@@ -63,6 +73,7 @@ export default defineComponent({
     });
 
     return {
+      locale,
       state,
     };
   },
@@ -76,6 +87,7 @@ or `TSX`
 import { defineComponent, reactive } from 'vue';
 import { RouterView } from 'vue-router';
 import ProLayout from '@ant-design-vue/pro-layout';
+import '@ant-design-vue/pro-layout/dist/style.css'; // pro-layout css
 
 export default defineComponent({
   setup() {
@@ -108,6 +120,6 @@ export default defineComponent({
 ## Build project
 
 ```bash
-npm run compile # Build library
+npm run build # Build library
 npm run test # Runing Test
 ```

babel.config.js

@@ -0,0 +1,31 @@
+<template>
+  <a-config-provider :getPopupContainer="getPopupContainer">
+    <router-view />
+  </a-config-provider>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'App',
+  setup() {
+    const getPopupContainer = (el: Element, dialogContext: any) => {
+      if (dialogContext) {
+          return dialogContext.getDialogWrap();
+        } else {
+          return document.body;
+        }
+    }
+    return {
+      getPopupContainer,
+    }
+  }
+});
+</script>
+
+<style>
+#app {
+  height: 100%;
+}
+</style>