docs(table): ajax demo (#8120)

Co-authored-by: Xian Yu <h3209851541@outlook.com>

.antd-tools.config.js

@@ -0,0 +1,36 @@
+const fs = require('fs');
+const path = require('path');
+
+const restCssPath = path.join(process.cwd(), 'components', 'style', 'reset.css');
+const tokenStatisticPath = path.join(process.cwd(), 'components', 'version', 'token.json');
+const tokenMetaPath = path.join(process.cwd(), 'components', 'version', 'token-meta.json');
+
+function finalizeCompile() {
+  if (fs.existsSync(path.join(__dirname, './es'))) {
+    fs.copyFileSync(restCssPath, path.join(process.cwd(), 'es', 'style', 'reset.css'));
+    fs.copyFileSync(tokenStatisticPath, path.join(process.cwd(), 'es', 'version', 'token.json'));
+    fs.copyFileSync(tokenMetaPath, path.join(process.cwd(), 'es', 'version', 'token-meta.json'));
+  }
+
+  if (fs.existsSync(path.join(__dirname, './lib'))) {
+    fs.copyFileSync(restCssPath, path.join(process.cwd(), 'lib', 'style', 'reset.css'));
+    fs.copyFileSync(tokenStatisticPath, path.join(process.cwd(), 'lib', 'version', 'token.json'));
+    fs.copyFileSync(tokenMetaPath, path.join(process.cwd(), 'lib', 'version', 'token-meta.json'));
+  }
+}
+
+function finalizeDist() {
+  if (fs.existsSync(path.join(__dirname, './dist'))) {
+    fs.copyFileSync(restCssPath, path.join(process.cwd(), 'dist', 'reset.css'));
+  }
+}
+
+module.exports = {
+  compile: {
+    finalize: finalizeCompile,
+  },
+  dist: {
+    finalize: finalizeDist,
+  },
+  bail: true,
+};

.eslintignore

@@ -7,3 +7,7 @@ es/
 lib/
 _site/
 dist/
+site/dist/
+components/version/version.ts
+site/src/router/demoRoutes.js
+locale/

.eslintrc

@@ -1,53 +0,0 @@
-{
-  "root": true,
-  "env": {
-    "browser": true,
-    "node": true,
-    "jasmine": true,
-    "jest": true,
-    "es6": true
-  },
-  "parserOptions": {
-    "parser": "babel-eslint"
-  },
-  "extends": ["plugin:vue/recommended", "prettier"],
-  "plugins": ["markdown"],
-  "overrides": [
-    {
-      "files": ["**/demo/*.md"],
-      "processor": "markdown/markdown",
-      "rules": {
-        "no-console": "off"
-      }
-    }
-  ],
-  "rules": {
-    "comma-dangle": [2, "always-multiline"],
-    "no-var": "error",
-    "no-console": [2, { "allow": ["warn", "error"] }],
-    "object-shorthand": 2,
-    "no-unused-vars": [2, { "ignoreRestSiblings": true, "argsIgnorePattern": "^h$" }],
-    "no-undef": 2,
-    "camelcase": "off",
-    "no-extra-boolean-cast": "off",
-    "semi": ["error", "always"],
-    "vue/require-prop-types": "off",
-    "vue/require-default-prop": "off",
-    "vue/no-reserved-keys": "off",
-    "vue/comment-directive": "off",
-    "vue/prop-name-casing": "off",
-    "vue/max-attributes-per-line": [
-      2,
-      {
-        "singleline": 20,
-        "multiline": {
-          "max": 1,
-          "allowFirstLine": false
-        }
-      }
-    ]
-  },
-  "globals": {
-    "h": true
-  }
-}

.eslintrc.js

@@ -0,0 +1,112 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    jasmine: true,
+    jest: true,
+    es6: true,
+  },
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    '@vue/typescript/recommended',
+    '@vue/prettier',
+    // 'prettier',
+  ],
+  // extends: [
+  //   'eslint:recommended',
+  //   'plugin:vue/vue3-recommended',
+  //   '@vue/typescript/recommended',
+  //   '@vue/prettier',
+  // ],
+  plugins: ['markdown', 'jest', '@typescript-eslint', 'import'],
+  globals: {
+    h: true,
+    defineProps: 'readonly',
+  },
+  overrides: [
+    {
+      files: ['*.md'],
+      processor: 'markdown/markdown',
+      rules: {
+        'no-console': 'off',
+      },
+    },
+    {
+      files: ['*.ts', '*.tsx'],
+      // extends: ['@vue/typescript/recommended', '@vue/prettier'],
+      parserOptions: {
+        project: './tsconfig.json',
+      },
+      rules: {
+        '@typescript-eslint/ban-types': 0,
+        '@typescript-eslint/consistent-type-imports': 'error',
+        '@typescript-eslint/explicit-module-boundary-types': 0,
+        '@typescript-eslint/no-empty-function': 0,
+        '@typescript-eslint/no-non-null-assertion': 0,
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          { vars: 'all', args: 'after-used', ignoreRestSiblings: true },
+        ],
+        '@typescript-eslint/ban-ts-comment': 0,
+      },
+    },
+    {
+      files: ['*.vue'],
+      parser: 'vue-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        ecmaVersion: 2021,
+      },
+      rules: {
+        'no-console': 'off',
+        'vue/no-reserved-component-names': 'off',
+      },
+    },
+  ],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 0,
+    '@typescript-eslint/no-empty-function': 0,
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { vars: 'all', args: 'after-used', ignoreRestSiblings: true, argsIgnorePattern: '^_' },
+    ],
+    'import/no-named-as-default': 'off',
+    'import/namespace': [2, { allowComputed: true }],
+    'import/no-named-as-default-member': 'off',
+    'import/no-unresolved': [2, { ignore: ['ant-design-vue'] }],
+    'comma-dangle': [2, 'always-multiline'],
+    'no-var': 'error',
+    'no-console': [2, { allow: ['warn', 'error'] }],
+    'object-shorthand': 2,
+    'no-unused-vars': [2, { ignoreRestSiblings: true, argsIgnorePattern: '^_' }],
+    'no-undef': 2,
+    camelcase: 'off',
+    'no-extra-boolean-cast': 'off',
+    semi: ['error', 'always'],
+    'vue/no-v-html': 'off',
+    'vue/require-explicit-emits': 'off',
+    'vue/require-prop-types': 'off',
+    'vue/require-default-prop': 'off',
+    'vue/no-reserved-keys': 'off',
+    'vue/comment-directive': 'off',
+    'vue/prop-name-casing': 'off',
+    'vue/one-component-per-file': 'off',
+    'vue/custom-event-name-casing': 'off',
+    'vue/v-on-event-hyphenation': 'off',
+    'vue/max-attributes-per-line': [
+      2,
+      {
+        singleline: 20,
+        multiline: 1,
+      },
+    ],
+    'vue/multi-word-component-names': 'off',
+  },
+};

.gitattributes

@@ -1 +1,2 @@
 *.jsx linguist-language=Vue
+*.tsx linguist-language=Vue

.github/FUNDING.yml

@@ -3,11 +3,3 @@
 github: # [tangjinzhou]
 open_collective: ant-design-vue
 patreon: tangjinzhou
-ko_fi: # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-custom:
-  [
-    "https://www.paypal.me/tangjinzhou",
-    "https://qn.antdv.com/alipay-and-wechat.png",
-    "https://www.buymeacoffee.com/antdv"
-  ]

.github/ISSUE_TEMPLATE/config.yml

@@ -1,4 +1,4 @@
-blank_issues_enabled: false
+blank_issues_enabled: true
 contact_links:
   - name: Create new issue
     url: https://vuecomponent.github.io/issue-helper/
@@ -13,5 +13,5 @@ contact_links:
     url: https://www.paypal.me/tangjinzhou
     about: Love Ant Design Vue? Please consider supporting us via Paypal.
   - name: 支付宝/微信 赞助
-    url: https://qn.antdv.com/alipay-and-wechat.png
+    url: https://aliyuncdn.antdv.com/alipay-and-wechat.png
     about: Ant Design Vue 的健康持续发展需要您的支持，🙏

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,51 +0,0 @@
-First of all, thank you for your contribution! 😄
-
-New feature please send pull request to feature branch, and rest to master branch. Pull request will be merged after one of collaborators approve. Please makes sure that these form are filled before submitting your pull request, thank you!
-
-[[中文版模板 / Chinese template](https://github.com/vueComponent/ant-design-vue/blob/master/.github/PULL_REQUEST_TEMPLATE/pr_cn.md)]
-
-### This is a ...
-
-- [ ] New feature
-- [ ] Bug fix
-- [ ] Site / document update
-- [ ] Component style update
-- [ ] TypeScript definition update
-- [ ] Refactoring
-- [ ] Code style optimization
-- [ ] Branch merge
-- [ ] Other (about what?)
-
-### What's the background?
-
-> 1. Describe the source of requirement.
-> 2. Resolve what problem.
-> 3. Related issue link.
-
-### API Realization (Optional if not new feature)
-
-> 1. Basic thought of solution and other optional proposal.
-> 2. List final API realization and usage sample.
-> 3. GIF or snapshot should be provided if includes UI/interactive modification.
-
-### What's the effect? (Optional if not new feature)
-
-> 1. Does this PR affect user? Which part will be affected?
-> 2. What will say in changelog?
-> 3. Does this PR contains potential break change or other risk?
-
-### Changelog description (Optional if not new feature)
-
-> 1. English description
-> 2. Chinese description (optional)
-
-### Self Check before Merge
-
-- [ ] Doc is updated/provided or not needed
-- [ ] Demo is updated/provided or not needed
-- [ ] TypeScript definition is updated/provided or not needed
-- [ ] Changelog is provided or not needed
-
-### Additional Plan? (Optional if not new feature)
-
-> If this PR related with other PR or following info. You can type here.

.github/PULL_REQUEST_TEMPLATE/pr_cn.md

@@ -1,8 +1,8 @@
 首先，感谢你的贡献！ 😄
 
-新特性请提交至 feature 分支，其余可提交至 master 分支。在一个维护者审核通过后合并。请确保填写以下 pull request 的信息，谢谢！~
+新特性请提交至 feature 分支，其余可提交至 main 分支。在一个维护者审核通过后合并。请确保填写以下 pull request 的信息，谢谢！~
 
-[[English Template / 英文模板](?expand=1)]
+[[English Template / 英文模板](./pr_en.md)]
 
 ### 这个变动的性质是
 

.github/PULL_REQUEST_TEMPLATE/pr_en.md

@@ -0,0 +1,51 @@
+First of all, thank you for your contribution! 😄
+
+New feature please send pull request to feature branch, and rest to main branch. Pull request will be merged after one of collaborators approve. Please makes sure that these form are filled before submitting your pull request, thank you!
+
+[[中文版模板 / Chinese template](./pr_cn.md)]
+
+### This is a ...
+
+- [ ] New feature
+- [ ] Bug fix
+- [ ] Site / document update
+- [ ] Component style update
+- [ ] TypeScript definition update
+- [ ] Refactoring
+- [ ] Code style optimization
+- [ ] Branch merge
+- [ ] Other (about what?)
+
+### What's the background?
+
+> 1. Describe the source of requirement.
+> 2. Resolve what problem.
+> 3. Related issue link.
+
+### API Realization (Optional if not new feature)
+
+> 1. Basic thought of solution and other optional proposal.
+> 2. List final API realization and usage sample.
+> 3. GIF or snapshot should be provided if includes UI/interactive modification.
+
+### What's the effect? (Optional if not new feature)
+
+> 1. Does this PR affect user? Which part will be affected?
+> 2. What will say in changelog?
+> 3. Does this PR contains potential break change or other risk?
+
+### Changelog description (Optional if not new feature)
+
+> 1. English description
+> 2. Chinese description (optional)
+
+### Self Check before Merge
+
+- [ ] Doc is updated/provided or not needed
+- [ ] Demo is updated/provided or not needed
+- [ ] TypeScript definition is updated/provided or not needed
+- [ ] Changelog is provided or not needed
+
+### Additional Plan? (Optional if not new feature)
+
+> If this PR related with other PR or following info. You can type here.

.github/workflows/codecov.yml

@@ -16,7 +16,7 @@ jobs:
           key: lock-${{ github.sha }}
 
       - name: create package-lock.json
-        run: npm i --package-lock-only
+        run: npm i --package-lock-only --ignore-scripts
 
       - name: hack for singe file
         run: |
@@ -41,16 +41,15 @@ jobs:
     steps:
       - name: checkout
         uses: actions/checkout@v2
-        with:
+        # with:
-          token: ${{ secrets.ACCESS_TOKEN }}
+        #   token: ${{ secrets.ACCESS_TOKEN }}
-
+      # - name: Checkout submodules
-      - name: Checkout submodules
+      #   uses: actions/checkout@v2
-        uses: actions/checkout@v2
+      #   with:
-        with:
+      #     repository: tangjinzhou/antdv-demo
-          repository: tangjinzhou/antdv-demo
+      #     token: ${{ secrets.ACCESS_TOKEN }}
-          token: ${{ secrets.ACCESS_TOKEN }}
+      #     path: antdv-demo
-          path: antdv-demo
+      #     submodules: true
-          submodules: true
 
       - name: restore cache from package-lock.json
         uses: actions/cache@v1

.github/workflows/emoji-helper.yml

@@ -0,0 +1,14 @@
+name: Emoji Helper
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  emoji:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions-cool/emoji-helper@v1.0.0
+        with:
+          type: 'release'
+          emoji: '+1, laugh, heart, hooray, rocket, eyes'

.github/workflows/issue-close-require.yml

@@ -0,0 +1,23 @@
+name: Issue Close Require
+
+on:
+  schedule:
+    - cron: "0 0 * * *"
+
+permissions:
+  contents: read
+  
+jobs:
+  close-issues:
+    runs-on: ubuntu-latest
+    steps:
+      - name: need reproduce
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'close-issues'
+          labels: '🤔 Need Reproduce'
+          inactive-day: 7
+          body: |
+            Since the issue was labeled with `Need Reproduce`, but no response in 7 days. This issue will be closed. If you have any questions, you can comment and reply.
+
+            由于该 issue 被标记为需要复现信息，却 7 天未收到回应。现关闭 issue，若有任何问题，可评论回复。

.github/workflows/issue-labeled.yml

@@ -0,0 +1,76 @@
+name: Issue Labeled
+
+on:
+  issues:
+    types: [labeled]
+
+permissions:
+  contents: read
+
+jobs:
+  issue-labeled:
+    permissions:
+      issues: write  # for actions-cool/issues-helper to update issues
+      pull-requests: write  # for actions-cool/issues-helper to update PRs
+    runs-on: ubuntu-latest
+    steps:
+      - name: Need Reproduce
+        if: github.event.label.name == '🤔 Need Reproduce'
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'create-comment'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            Hello @${{ github.event.issue.user.login }}. Please provide a online reproduction by forking this [link for vue2](https://codesandbox.io/s/2wpk21kzvr)、 [link for vue3](https://codesandbox.io/s/agitated-franklin-1w72v) or a minimal GitHub repository. Make sure to choose the correct version.
+
+            你好 @${{ github.event.issue.user.login }}, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 [此处 for vue2](https://codesandbox.io/s/2wpk21kzvr)、 [此处 for vue3](https://codesandbox.io/s/agitated-franklin-1w72v) 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。请确保选择准确的版本。
+      
+      - name: help wanted
+        if: github.event.label.name == 'help wanted'
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'create-comment'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            Hello @${{ github.event.issue.user.login }}. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch, fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!
+
+            你好 @${{ github.event.issue.user.login }}，我们完全同意你的提议/反馈，欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支，务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。
+
+      - name: Usage
+        if: github.event.label.name == 'Usage'
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'create-comment, close-issue'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            Hello @${{ github.event.issue.user.login }}, we use GitHub issues to trace bugs or discuss plans of Ant Design Vue. So, please don't ask usage questions here. You can try to open a new discussion in [antdv discussions](https://github.com/vueComponent/ant-design-vue/discussions), select `Q&A` to ask questions, also can ask questions on [Stack Overflow](http://stackoverflow.com/questions/) or [Segment Fault](https://segmentfault.com).
+
+            你好 @${{ github.event.issue.user.login }}，Ant Design Vue Issue 板块是用于 bug 反馈与需求讨论的地方。请勿询问如何使用的问题，你可以试着在 [antdv discussions](https://github.com/vueComponent/ant-design-vue/discussions) 新开一个 discussion，选择 `Q&A` 类别进行提问，也可以在 [Stack Overflow](http://stackoverflow.com/questions/) 或者 [Segment Fault](https://segmentfault.com/) 中提问。
+
+      - name: 1.x
+        if: github.event.label.name == '1.x'
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'create-comment,close-issue'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            Hi @${{ github.event.issue.user.login }}. Current version (1.x) is off the maintenance period. We may not accept pull request or fix bug with it anymore. This topic will be auto closed.
+
+            你好 @${{ github.event.issue.user.login }}，当前版本（1.x）已经过了维护期。我们不会再接受对其的相关 PR 与 issue。当前 topic 会被自动关闭。
+
+      - name: 2.x
+        if: github.event.label.name == '2.x'
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'create-comment,close-issue'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            Hi @${{ github.event.issue.user.login }}. Current version (2.x) is off the maintenance period. We may not accept pull request or fix bug with it anymore. This topic will be auto closed.
+
+            你好 @${{ github.event.issue.user.login }}，当前版本（2.x）已经过了维护期。我们不会再接受对其的相关 PR 与 issue。当前 topic 会被自动关闭。
+  

.github/workflows/issue-open-check.yml

@@ -0,0 +1,34 @@
+name: Issue Open Check
+
+on:
+  issues:
+    types: [opened]
+
+
+permissions:
+  contents: read
+
+jobs:
+  issue-open-check:
+    permissions:
+      contents: read  # for visiky/dingtalk-release-notify to get latest release
+      issues: write  # for actions-cool/issues-helper to update issues
+      pull-requests: write  # for actions-cool/issues-helper to update PRs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions-cool/check-user-permission@v1.0.0
+        id: checkUser
+        with:
+          require: 'write'
+
+      - name: check invalid
+        if: (contains(github.event.issue.body, 'issue-helper') == false) && (steps.checkUser.outputs.result == 'false') 
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'create-comment,add-labels,close-issue'
+          issue-number: ${{ github.event.issue.number }}
+          labels: 'Invalid'
+          body: |
+            Hello @${{ github.event.issue.user.login }}, your issue has been closed because it does not conform to our issue requirements. Please use the [Issue Helper](https://vuecomponent.github.io/issue-helper/) to create an issue, thank you!
+
+            你好 @${{ github.event.issue.user.login }}，为了能够进行高效沟通，我们对 issue 有一定的格式要求，你的 issue 因为不符合要求而被自动关闭。你可以通过 [issue 助手](https://vuecomponent.github.io/issue-helper/) 来创建 issue 以方便我们定位错误。谢谢配合！

.github/workflows/stale.yml

@@ -0,0 +1,19 @@
+name: "Close stale issues"
+
+on:
+  schedule:
+  - cron: "30 1 * * *"
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/stale@v3
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        stale-issue-message: 'This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days'
+        stale-pr-message: 'This PR is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days'
+        exempt-issue-labels: 'bug,enhancement'
+        days-before-stale: 60
+        days-before-close: 7
+

.github/workflows/test.yml

@@ -10,13 +10,13 @@ jobs:
         uses: actions/checkout@v2
 
       - name: cache package-lock.json
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: create package-lock.json
-        run: npm i --package-lock-only
+        run: npm i --package-lock-only --ignore-scripts
 
       - name: hack for singe file
         run: |
@@ -27,7 +27,7 @@ jobs:
 
       - name: cache node_modules
         id: node_modules_cache_id
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@@ -43,25 +43,25 @@ jobs:
         uses: actions/checkout@v2
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
 
       - name: cache lib
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
           path: lib
           key: lib-${{ github.sha }}
 
       - name: cache es
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
           path: es
           key: es-${{ github.sha }}
@@ -77,13 +77,13 @@ jobs:
         uses: actions/checkout@v2
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@@ -97,25 +97,15 @@ jobs:
     steps:
       - name: checkout
         uses: actions/checkout@v2
-        with:
-          token: ${{ secrets.ACCESS_TOKEN }}
-
-      - name: Checkout submodules
-        uses: actions/checkout@v2
-        with:
-          repository: tangjinzhou/antdv-demo
-          token: ${{ secrets.ACCESS_TOKEN }}
-          path: antdv-demo
-          submodules: true
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

.gitignore

@@ -36,9 +36,6 @@ build/Release
 node_modules/
 jspm_packages/
 
-# Typescript v1 declaration files
-typings/
-
 # Optional npm cache directory
 .npm
 
@@ -62,9 +59,11 @@ typings/
 dist
 lib
 es
+/locale
 _site
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 /coverage
 
 # 备份文件
@@ -72,3 +71,16 @@ package-lock.json
 list.txt
 
 site/dev.js
+
+# IDE 语法提示临时文件
+vetur/
+
+report.html
+
+site/src/router/demoRoutes.js
+
+components/version/version.ts
+components/version/version.tsx
+components/version/token.json
+components/version/token-meta.json
+~component-api.json

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "antdv-demo"]
-	path = antdv-demo
-	url = git@github.com:tangjinzhou/antdv-demo.git

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install pretty-quick --staged

.jest.js

@@ -2,42 +2,59 @@ const libDir = process.env.LIB_DIR;
 
 const transformIgnorePatterns = [
   '/dist/',
-  'node_modules/[^/]+?/(?!(es|node_modules)/)', // Ignore modules without es dir
+  // Ignore modules without es dir.
+  // Update: @babel/runtime should also be transformed
+  // 'node_modules/(?!.*(@babel|lodash-es))',
+  'node_modules/(?!@ant-design/icons-vue|@ant-design/icons-svg|lodash-es)/',
 ];
+const testPathIgnorePatterns = ['/node_modules/', 'node'];
 
+function getTestRegex(libDir) {
+  if (libDir === 'dist') {
+    return 'demo\\.test\\.js$';
+  }
+  return '.*\\.test\\.(j|t)sx?$';
+}
 module.exports = {
-  testURL: 'http://localhost/',
+  verbose: true,
   setupFiles: ['./tests/setup.js'],
-  moduleFileExtensions: ['js', 'jsx', 'json', 'vue', 'md', 'jpg'],
+  setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'vue', 'md', 'jpg'],
   modulePathIgnorePatterns: ['/_site/'],
-  testPathIgnorePatterns: ['/node_modules/', 'node'],
+  testPathIgnorePatterns: testPathIgnorePatterns,
   transform: {
-    '^.+\\.(vue|md)$': '<rootDir>/node_modules/vue-jest',
+    '\\.(vue|md)$': '<rootDir>/node_modules/@vue/vue3-jest',
-    '^.+\\.(js|jsx)$': '<rootDir>/node_modules/babel-jest',
+    '\\.(js|jsx)$': '<rootDir>/node_modules/babel-jest',
-    '^.+\\.svg$': '<rootDir>/node_modules/jest-transform-stub',
+    '\\.(ts|tsx)$': '<rootDir>/node_modules/ts-jest',
+    '\\.svg$': '<rootDir>/node_modules/jest-transform-stub',
   },
-  testRegex: libDir === 'dist' ? 'demo\\.test\\.js$' : '.*\\.test\\.js$',
+  testRegex: getTestRegex(libDir),
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/$1',
+    '^@/(.*)$/': '<rootDir>/$1',
-    'ant-design-vue$': '<rootDir>/components/index.js',
+    '^ant-design-vue$': '<rootDir>/components/index',
-    'ant-design-vue/es': '<rootDir>/components',
+    '^ant-design-vue/es/(.*)$': '<rootDir>/components/$1',
   },
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   collectCoverage: process.env.COVERAGE === 'true',
   collectCoverageFrom: [
     'components/**/*.{js,jsx,vue}',
-    '!components/*/style/index.{js,jsx}',
-    '!components/style/*.{js,jsx}',
-    '!components/*/locale/*.{js,jsx}',
     '!components/*/__tests__/**/type.{js,jsx}',
     '!components/vc-*/**/*',
     '!components/*/demo/**/*',
     '!components/_util/**/*',
     '!components/align/**/*',
     '!components/trigger/**/*',
-    '!components/style.js',
     '!**/node_modules/**',
   ],
-  testEnvironment: 'jest-environment-jsdom-fifteen',
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: 'http://localhost',
+    customExportConditions: ['node', 'node-addons'],
+  },
   transformIgnorePatterns,
+  globals: {
+    'ts-jest': {
+      babelConfig: true,
+    },
+  },
 };

.npmrc

@@ -0,0 +1 @@
+enable-pre-post-scripts=true

.prettierignore

@@ -18,7 +18,6 @@ yarn-error.log
 .editorconfig
 .eslintignore
 **/*.yml
-components/style/color/*.less
 **/assets
 .gitattributes
 .stylelintrc
@@ -28,4 +27,5 @@ components/style/color/*.less
 .huskyrc
 .gitmodules
 *.png
+v2-doc/
 

.prettierrc

@@ -1,8 +1,11 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
+  "endOfLine": "lf",
   "printWidth": 100,
   "proseWrap": "never",
+  "arrowParens": "avoid",
+  "htmlWhitespaceSensitivity": "ignore",
   "overrides": [
     {
       "files": ".prettierrc",

.stylelintrc.json

@@ -0,0 +1,43 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-rational-order",
+    "stylelint-config-prettier"
+  ],
+  "customSyntax": "postcss-less",
+  "plugins": ["stylelint-declaration-block-no-ignored-properties"],
+  "rules": {
+    "function-name-case": ["lower"],
+    "function-no-unknown": [
+      true,
+      {
+        "ignoreFunctions": [
+          "fade",
+          "fadeout",
+          "tint",
+          "darken",
+          "ceil",
+          "fadein",
+          "floor",
+          "unit",
+          "shade",
+          "lighten",
+          "percentage",
+          "-"
+        ]
+      }
+    ],
+    "import-notation": null,
+    "no-descending-specificity": null,
+    "no-invalid-position-at-import-rule": null,
+    "declaration-empty-line-before": null,
+    "keyframes-name-pattern": null,
+    "custom-property-pattern": null,
+    "number-max-precision": 8,
+    "alpha-value-notation": "number",
+    "color-function-notation": "legacy",
+    "selector-class-pattern": null,
+    "selector-id-pattern": null,
+    "selector-not-notation": null
+  }
+}

.vcmrc

@@ -9,8 +9,9 @@
     "perf",
     "test",
     "chore",
-    "revert"
+    "revert",
+    "ci"
   ],
   "warnOnFail": false,
   "autoFix": false
-}
+}

BACKERS.md

@@ -24,6 +24,7 @@
 
 <h2 align="center">Backers</h2>
 <p align="center">
+  <a href="https://github.com/chuzhixin/vue-admin-beautiful" target="_blank"><img width="64" style="border-radius: 50%;" src="https://gitee.com/chu1204505056/image/raw/master/vue-admin-beautiful.png" title="vue-admin-beautiful"></a>
   <a href="https://github.com/limichange" target="_blank"><img width="64" style="border-radius: 50%;" src="https://avatars0.githubusercontent.com/u/1947344?s=400&v=4" title="limichange donation total 24$ by qq from 2018.9"></a>
   <a href="https://opencollective.com/ant-design-vue/backer/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/0/avatar.svg"></a>
   <a href="https://opencollective.com/ant-design-vue/backer/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/1/avatar.svg"></a>

LICENSE

@@ -44,3 +44,25 @@ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+MIT License
+
+Copyright (c) 2019-PRESENT Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README-zh_CN.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://www.antdv.com/">
-    <img width="200" src="https://qn.antdv.com/logo.png">
+    <img width="200" src="https://aliyuncdn.antdv.com/logo.png">
   </a>
 </p>
 
@@ -10,9 +10,9 @@
 
 <div align="center">
 
-An enterprise-class UI components based on Ant Design and Vue.
+基于 Ant Design 和 Vue 3 的企业级 UI 组件库。
 
-![test](https://github.com/vueComponent/ant-design-vue/workflows/test/badge.svg) [![codecov](https://img.shields.io/codecov/c/github/vueComponent/ant-design-vue/master.svg?style=flat-square)](https://codecov.io/gh/vueComponent/ant-design-vue) [![npm package](https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square)](https://www.npmjs.org/package/ant-design-vue) [![NPM downloads](http://img.shields.io/npm/dm/ant-design-vue.svg?style=flat-square)](http://www.npmtrends.com/ant-design-vue) [![Join the chat at https://gitter.im/vueComponent/ant-design-english](https://badges.gitter.im/vueComponent/ant-design-english.svg?style=flat-square)](https://gitter.im/vueComponent/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) (English) [![Join the chat at https://gitter.im/vueComponent/ant-design-vue](https://img.shields.io/gitter/room/vueComponent/ant-design-vue.svg?style=flat-square)](https://gitter.im/vueComponent/ant-design-vue?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文） [![backers](https://opencollective.com/ant-design-vue/backers/badge.svg)](#backers) [![sponsors](https://opencollective.com/ant-design-vue/sponsors/badge.svg)](#sponsors) [![extension-for-VSCode](https://img.shields.io/badge/extension%20for-VSCode-blue.svg?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper)
+![test](https://github.com/vueComponent/ant-design-vue/workflows/test/badge.svg) [![codecov](https://img.shields.io/codecov/c/github/vueComponent/ant-design-vue/master.svg?style=flat-square)](https://codecov.io/gh/vueComponent/ant-design-vue) [![npm package](https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square)](https://www.npmjs.org/package/ant-design-vue) [![NPM downloads](http://img.shields.io/npm/dm/ant-design-vue.svg?style=flat-square)](http://www.npmtrends.com/ant-design-vue) [![backers](https://opencollective.com/ant-design-vue/backers/badge.svg)](#backers) [![sponsors](https://opencollective.com/ant-design-vue/sponsors/badge.svg)](#sponsors) [![extension-for-VSCode](https://img.shields.io/badge/extension%20for-VSCode-blue.svg?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper) [![issues-helper](https://img.shields.io/badge/Issues%20Manage%20By-issues--helper-orange?style=flat-square)](https://github.com/actions-cool/issues-helper)
 
 </div>
 
@@ -20,36 +20,28 @@ An enterprise-class UI components based on Ant Design and Vue.
 
 [English](./README.md) | 简体中文
 
-<p align="center">
-  <b>Special thanks to the generous sponsorship by:</b>
-</p>
-<table>
-  <tbody>
-    <tr>
-      <td align="center" valign="middle">
-        <a href="https://tipe.io/?ref=ant-design-vue" target="_blank">
-          <img width="120px" src="https://user-images.githubusercontent.com/1016365/34124854-48fafa06-e3e9-11e7-8c04-251055feebee.png">
-        </a>
-      </td>
-    </tr>
-  </tbody>
-</table>
-
 ## 特性
 
 - 提炼自企业级中后台产品的交互语言和视觉风格。
 - 开箱即用的高质量 Vue 组件。
 - 共享 [Ant Design of React](http://ant-design.gitee.io/docs/spec/introduce-cn) 设计工具体系。
 
+## 关注我们
+
+收藏加关注，第一时间获取更新动态！
+
+![star us](https://user-images.githubusercontent.com/6937879/261937060-e0501ab3-9388-4712-a25d-3f2ba2271865.gif)
+
 ## 支持环境
 
-- 现代浏览器和 IE9 及以上（需要 [polyfills](https://www.antdv.com/docs/vue/getting-started-cn/#兼容性)）。
+- 现代浏览器。1.x 版本支持 IE 9+（需要 [polyfills](https://www.antdv.com/docs/vue/getting-started-cn/#兼容性)）
 - 支持服务端渲染。
 - [Electron](https://electronjs.org/)
+- 支持 Vue 2 和 Vue 3
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
 | --- | --- | --- | --- | --- | --- |
-| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
 
 ## 安装
 
@@ -79,6 +71,9 @@ $ yarn add ant-design-vue
 | [ant-design-vue-helper](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper) | ant-design-vue 的 vscode 扩展 |
 | [vue-cli-plugin-ant-design](https://github.com/vueComponent/vue-cli-plugin-ant-design) | 使用 vue-cli3 快速使用 ant-design-vue 组件库 |
 | [vue-dash-event](https://github.com/vueComponent/vue-dash-event) | 在 DOM 模板中，您可以使用 ant-design-vue 组件的自定义事件（camelCase） |
+| [@formily/antdv](https://github.com/formilyjs/antdv) | 这是一个结合了 Formily 和 ant-design-vue 的组件库 |
+| [@ant-design-vue/nuxt](https://github.com/vueComponent/ant-design-vue-nuxt) | ant-design-vue 的 nuxt 模块扩展 |
+| [ant-design-x-vue](https://github.com/wzc520pyfm/ant-design-x-vue) | 基于 Ant Design X 设计规范的 Vue AI 界面解决方案 |
 
 ## 问答
 
@@ -93,24 +88,33 @@ ant-design-vue 是 MIT 协议的开源项目。为了项目能够更好的持续
 - [Patreon](https://www.patreon.com/tangjinzhou)
 - [opencollective](https://opencollective.com/ant-design-vue)
 - [paypal](https://www.paypal.me/tangjinzhou)
-- [支付宝或微信](https://qn.antdv.com/alipay-and-wechat.png)
+- [支付宝或微信](https://aliyuncdn.antdv.com/alipay-and-wechat.png)
+- ETH: 0x30cc48515d8ae9fefa20ab87226ad7e8ab9c3bc2
 
-## Sponsors
+## 赞助商
 
-Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/ant-design-vue#sponsor)]
+成为赞助商，并在 Github 上的自述文件上获得您的徽标，并链接到您的网站。 [[成为赞助商](https://opencollective.com/ant-design-vue#sponsor)]
 
-<a href="https://opencollective.com/ant-design-vue/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/9/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/10/avatar.svg"></a>
+<a href="http://www.jeecg.com/" target="_blank"><img src="https://aliyuncdn.antdv.com/jeecg-logo.png" height="64"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/9/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/10/avatar.svg"></a>
 
-## Backers
+## 支持者
 
-Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/ant-design-vue#backer)]
+每月捐款支持我们，帮助我们继续我们的活动。 [[成为支持者](https://opencollective.com/ant-design-vue#backer)]
 
-<a href="https://opencollective.com/ant-design-vue/backer/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/0/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/1/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/2/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/3/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/4/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/5/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/6/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/7/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/8/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/9/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/10/avatar.svg"></a>
+<a href="https://github.com/chuzhixin/vue-admin-beautiful" target="_blank"><img width="64" style="border-radius: 50%;" src="https://gitee.com/chu1204505056/image/raw/master/vue-admin-beautiful.png" title="vue-admin-beautiful"></a> <a href="https://opencollective.com/ant-design-vue/backer/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/0/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/1/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/2/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/3/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/4/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/5/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/6/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/7/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/8/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/9/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/10/avatar.svg"></a>
 
 ## Patreon
 
-Support us with a monthly donation and help us continue our activities. [[Become a backer](https://www.patreon.com/tangjinzhou)]
+每月捐款支持我们，帮助我们继续我们的活动。 [[成为支持者](https://www.patreon.com/tangjinzhou)]
 
 <a href="https://www.mokeyjay.com" target="_blank"><img  width="64" style="border-radius: 50%;" src="https://www.mokeyjay.com/headimg.png" title="donation by Patreon"></a>
 
 ## [更多赞助者 (通过 Patreon、支付宝、微信、paypal 等等)](https://github.com/vueComponent/ant-design-vue/blob/master/BACKERS.md)
+
+## 贡献者
+
+感谢所有为 ant-design-vue 做出贡献的人!
+
+<a href="https://github.com/vueComponent/ant-design-vue/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=vueComponent/ant-design-vue&max=100&columns=15" />
+</a>

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://www.antdv.com/">
-    <img width="200" src="https://qn.antdv.com/logo.png">
+    <img width="200" src="https://aliyuncdn.antdv.com/logo.png">
   </a>
 </p>
 
@@ -12,7 +12,7 @@
 
 An enterprise-class UI components based on Ant Design and Vue.
 
-![test](https://github.com/vueComponent/ant-design-vue/workflows/test/badge.svg) [![codecov](https://img.shields.io/codecov/c/github/vueComponent/ant-design-vue/master.svg?style=flat-square)](https://codecov.io/gh/vueComponent/ant-design-vue) [![npm package](https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square)](https://www.npmjs.org/package/ant-design-vue) [![NPM downloads](http://img.shields.io/npm/dm/ant-design-vue.svg?style=flat-square)](http://www.npmtrends.com/ant-design-vue) [![Join the chat at https://gitter.im/vueComponent/ant-design-english](https://badges.gitter.im/vueComponent/ant-design-english.svg?style=flat-square)](https://gitter.im/vueComponent/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) (English) [![Join the chat at https://gitter.im/vueComponent/ant-design-vue](https://img.shields.io/gitter/room/vueComponent/ant-design-vue.svg?style=flat-square)](https://gitter.im/vueComponent/ant-design-vue?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文） [![backers](https://opencollective.com/ant-design-vue/backers/badge.svg)](#backers) [![sponsors](https://opencollective.com/ant-design-vue/sponsors/badge.svg)](#sponsors) [![extension-for-VSCode](https://img.shields.io/badge/extension%20for-VSCode-blue.svg?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper)
+![test](https://github.com/vueComponent/ant-design-vue/workflows/test/badge.svg) [![codecov](https://img.shields.io/codecov/c/github/vueComponent/ant-design-vue/master.svg?style=flat-square)](https://codecov.io/gh/vueComponent/ant-design-vue) [![npm package](https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square)](https://www.npmjs.org/package/ant-design-vue) [![NPM downloads](http://img.shields.io/npm/dm/ant-design-vue.svg?style=flat-square)](http://www.npmtrends.com/ant-design-vue) [![backers](https://opencollective.com/ant-design-vue/backers/badge.svg)](#backers) [![sponsors](https://opencollective.com/ant-design-vue/sponsors/badge.svg)](#sponsors) [![extension-for-VSCode](https://img.shields.io/badge/extension%20for-VSCode-blue.svg?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper) [![issues-helper](https://img.shields.io/badge/Issues%20Manage%20By-issues--helper-orange?style=flat-square)](https://github.com/actions-cool/issues-helper)
 
 </div>
 
@@ -20,40 +20,32 @@ An enterprise-class UI components based on Ant Design and Vue.
 
 English | [简体中文](./README-zh_CN.md)
 
-<p align="center">
-  <b>Special thanks to the generous sponsorship by:</b>
-</p>
-<table>
-  <tbody>
-    <tr>
-      <td align="center" valign="middle">
-        <a href="https://tipe.io/?ref=ant-design-vue" target="_blank">
-          <img width="120px" src="https://user-images.githubusercontent.com/1016365/34124854-48fafa06-e3e9-11e7-8c04-251055feebee.png">
-        </a>
-      </td>
-    </tr>
-  </tbody>
-</table>
-
 ## Features
 
 - An enterprise-class UI design system for desktop applications.
 - A set of high-quality Vue components out of the box.
 - Shared [Ant Design of React](https://ant.design/docs/spec/introduce) design resources.
 
+## Getting started & staying tuned with us.
+
+Star us, and you will receive all releases notifications from GitHub without any delay!
+
+![star us](https://user-images.githubusercontent.com/6937879/261937060-e0501ab3-9388-4712-a25d-3f2ba2271865.gif)
+
 ## Environment Support
 
-- Modern browsers and Internet Explorer 9+ (with [polyfills](https://www.antdv.com/docs/vue/getting-started/#Compatibility))
+- Modern browsers. v1.x support Internet Explorer 9+ (with [polyfills](https://www.antdv.com/docs/vue/getting-started/#compatibility))
 - Server-side Rendering
+- Support Vue 2 & Vue 3
 - [Electron](https://electronjs.org/)
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
 | --- | --- | --- | --- | --- | --- |
-| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
 
 ## Using npm or yarn
 
-**We recommend using npm or yarn to install**，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
+**We recommend using npm or yarn to install**, it not only makes development easier, but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
 
 ```bash
 $ npm install ant-design-vue --save
@@ -63,7 +55,7 @@ $ npm install ant-design-vue --save
 $ yarn add ant-design-vue
 ```
 
-If you are in a bad network environment，you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
+If you are in a bad network environment, you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
 
 ## Links
 
@@ -79,6 +71,9 @@ If you are in a bad network environment，you can try other registries and tools
 | [ant-design-vue-helper](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper) | A vscode extension for ant-design-vue |
 | [vue-cli-plugin-ant-design](https://github.com/vueComponent/vue-cli-plugin-ant-design) | Vue-cli 3 plugin to add ant-design-vue |
 | [vue-dash-event](https://github.com/vueComponent/vue-dash-event) | The library function, implemented in the DOM template, can use the custom event of the ant-design-vue component (camelCase) |
+| [@formily/antdv](https://github.com/formilyjs/antdv) | The Library with Formily and ant-design-vue |
+| [@ant-design-vue/nuxt](https://github.com/vueComponent/ant-design-vue-nuxt) | A nuxt module for ant-design-vue |
+| [ant-design-x-vue](https://github.com/wzc520pyfm/ant-design-x-vue) | A Vue AI interface solutions base on the Ant Design X design specification |
 
 ## Donation
 
@@ -87,26 +82,25 @@ ant-design-vue is an MIT-licensed open source project. In order to achieve bette
 - [Patreon](https://www.patreon.com/tangjinzhou)
 - [opencollective](https://opencollective.com/ant-design-vue)
 - [paypal](https://www.paypal.me/tangjinzhou)
-- [支付宝或微信](https://qn.antdv.com/alipay-and-wechat.png)
+- [支付宝或微信](https://aliyuncdn.antdv.com/alipay-and-wechat.png)
+- ETH: 0x30cc48515d8ae9fefa20ab87226ad7e8ab9c3bc2
 
 ## Sponsors
 
 Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/ant-design-vue#sponsor)]
 
-<a href="https://opencollective.com/ant-design-vue/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/9/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/10/avatar.svg"></a>
+<a href="http://www.jeecg.com/" target="_blank"><img src="https://aliyuncdn.antdv.com/jeecg-logo.png" height="64"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/9/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/10/avatar.svg"></a>
-
-## Backers
-
-Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/ant-design-vue#backer)]
-
-<a href="https://opencollective.com/ant-design-vue/backer/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/0/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/1/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/2/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/3/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/4/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/5/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/6/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/7/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/8/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/9/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/10/avatar.svg"></a><a href="https://opencollective.com/ant-design-vue/backer/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/9/avatar.svg"></a>
-
-## Patreon
-
-Support us with a monthly donation and help us continue our activities. [[Become a backer](https://www.patreon.com/tangjinzhou)]
-
-<a href="https://www.mokeyjay.com" target="_blank"><img  width="64" style="border-radius: 50%;" src="https://www.mokeyjay.com/headimg.png" title="donation by Patreon"></a>
 
 ## [More Sponsor (From Patreon、alipay、wechat、paypal...)](https://github.com/vueComponent/ant-design-vue/blob/master/BACKERS.md)
 
+## Contributors
+
+Thank you to all the people who already contributed to ant-design-vue!
+
+<a href="https://github.com/vueComponent/ant-design-vue/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=vueComponent/ant-design-vue&max=100&columns=15" />
+</a>
+
 [![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/104172832)
+
+This project is tested with BrowserStack.

SECURITY.md

@@ -0,0 +1,17 @@
+# Security Policy
+
+## Supported Versions
+
+Use this section to tell people about which versions of your project are currently being supported with security updates.
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 1.x     | :white_check_mark: |
+| 2.x     | :x:                |
+| 3.x     | :white_check_mark: |
+
+## Reporting a Vulnerability
+
+Use this section to tell people how to report a vulnerability.
+
+Tell them where to go, how often they can expect to get an update on a reported vulnerability, what to expect if the vulnerability is accepted or declined, etc.

antd-tools/apiCollection.js

@@ -0,0 +1,68 @@
+// Read all the api from current documents
+
+const glob = require('glob');
+const fs = require('fs');
+
+const COMPONENT_NAME = /components\/([^/]*)/;
+const PROP_NAME = /^\s*\|\s*([^\s|]*)/;
+
+const components = {};
+
+function mappingPropLine(component, line) {
+  const propMatch = line.match(PROP_NAME);
+  if (!propMatch) return;
+
+  const propName = propMatch[1];
+  if (!/^[a-z]/.test(propName)) return;
+
+  components[component] = Array.from(new Set([...(components[component] || []), propName]));
+}
+
+function apiReport(entities) {
+  const apis = {};
+  Object.keys(entities).forEach(component => {
+    const apiList = entities[component];
+    apiList.forEach(api => {
+      if (typeof apis[api] === 'function') {
+        apis[api] = [];
+      }
+      apis[api] = [...(apis[api] || []), component];
+    });
+  });
+
+  return apis;
+}
+
+function printReport(apis) {
+  const apiList = Object.keys(apis).map(api => ({
+    name: api,
+    componentList: apis[api],
+  }));
+  apiList.sort((a, b) => b.componentList.length - a.componentList.length);
+  // eslint-disable-next-line no-console
+  console.log('| name | components | comments |');
+  // eslint-disable-next-line no-console
+  console.log('| ---- | ---------- | -------- |');
+  apiList.forEach(({ name, componentList }) => {
+    // eslint-disable-next-line no-console
+    console.log('|', name, '|', componentList.join(', '), '| |');
+  });
+}
+
+module.exports = () => {
+  glob('components/*/*.md', (error, files) => {
+    files.forEach(filePath => {
+      // Read md file to parse content
+      const content = fs.readFileSync(filePath, 'utf8');
+      const component = filePath.match(COMPONENT_NAME)[1];
+
+      // Parse lines to get API
+      const lines = content.split(/[\r\n]+/);
+      lines.forEach(line => {
+        mappingPropLine(component, line);
+      });
+    });
+
+    printReport(apiReport(components));
+  });
+};

antd-tools/cli/index.js

@@ -3,7 +3,6 @@
 'use strict';
 
 require('colorful').colorful();
-require('colorful').isatty = true;
 
 const program = require('commander');
 const packageInfo = require('../../package.json');

antd-tools/cli/run.js

@@ -1,12 +1,14 @@
 #!/usr/bin/env node
+/* eslint-disable no-console */
 
 'use strict';
 
 require('colorful').colorful();
-require('colorful').isatty = true;
 const gulp = require('gulp');
 const program = require('commander');
 
+program.option('-c --npm-tag <type>', 'add --npm-tag=xxx');
+
 program.on('--help', () => {
   console.log('  Usage:'.to.bold.blue.color);
   console.log();

antd-tools/generator-types/README.md

@@ -0,0 +1 @@
+fork github.com/youzan/vant packages/generator-types

antd-tools/generator-types/index.js

@@ -0,0 +1,23 @@
+const path = require('path');
+const pkg = require('../../package.json');
+const { parseAndWrite } = require('./lib/index.js');
+const rootPath = path.resolve(__dirname, '../../');
+
+parseAndWrite({
+  version: pkg.version,
+  name: 'ant-design-vue',
+  path: path.resolve(rootPath, './components'),
+  typingsPath: path.resolve(rootPath, './typings/global.d.ts'),
+  // default match lang
+  test: /en-US\.md/,
+  outputDir: path.resolve(rootPath, './vetur'),
+  tagPrefix: 'a-',
+})
+  .then(result => {
+    // eslint-disable-next-line no-console
+    console.log(`generator types success: ${result} tags generated`);
+  })
+  .catch(error => {
+    console.error('generator types error', error);
+    return Promise.reject(error);
+  });

antd-tools/generator-types/src/formatter.ts

@@ -0,0 +1,128 @@
+import type { Articals } from './parser';
+import { formatType, removeVersion, toKebabCase } from './utils';
+import type { VueTag } from './type';
+
+function getComponentName(name: string, tagPrefix: string) {
+  if (name) {
+    return tagPrefix + toKebabCase(name.split(' ')[0]);
+  }
+  return '';
+}
+
+function parserProps(tag: VueTag, line: any) {
+  const [name, desc, type, defaultVal] = line;
+  if (
+    type &&
+    (type.includes('v-slot') ||
+      type.includes('slot') ||
+      type.includes('slots') ||
+      type.includes('slot-scoped'))
+  ) {
+    tag.slots!.push({
+      name: removeVersion(name),
+      description: desc,
+    });
+  }
+  tag.attributes!.push({
+    name: removeVersion(name),
+    default: defaultVal,
+    description: desc,
+    value: {
+      type: formatType(type || ''),
+      kind: 'expression',
+    },
+  });
+}
+
+export function formatter(
+  articals: Articals,
+  componentName: string,
+  kebabComponentName: string,
+  tagPrefix = '',
+) {
+  if (!articals.length) {
+    return;
+  }
+
+  const tags: VueTag[] = [];
+  const tag: VueTag = {
+    name: kebabComponentName,
+    slots: [],
+    events: [],
+    attributes: [],
+  };
+  tags.push(tag);
+
+  const tables = articals.filter(artical => artical.type === 'table');
+
+  tables.forEach(item => {
+    const { table } = item;
+    const prevIndex = articals.indexOf(item) - 1;
+    const prevArtical = articals[prevIndex];
+
+    if (!prevArtical || !prevArtical.content || !table || !table.body) {
+      return;
+    }
+
+    const tableTitle = prevArtical.content;
+
+    if (tableTitle.includes('API')) {
+      table.body.forEach(line => {
+        parserProps(tag, line);
+      });
+      return;
+    }
+
+    if (tableTitle.includes('events') && !tableTitle.includes(componentName)) {
+      table.body.forEach(line => {
+        const [name, desc] = line;
+        tag.events!.push({
+          name: removeVersion(name),
+          description: desc,
+        });
+      });
+      return;
+    }
+
+    // 额外的子组件
+    if (
+      tableTitle.includes(componentName) &&
+      !tableTitle.includes('events') &&
+      !tableTitle.includes('()')
+    ) {
+      const childTag: VueTag = {
+        name: getComponentName(tableTitle.replace(/\.|\//g, ''), tagPrefix),
+        slots: [],
+        events: [],
+        attributes: [],
+      };
+      table.body.forEach(line => {
+        parserProps(childTag, line);
+      });
+      tags.push(childTag);
+      return;
+    }
+
+    // 额外的子组件事件
+    if (tableTitle.includes(componentName) && tableTitle.includes('events')) {
+      const childTagName = getComponentName(
+        tableTitle.replace('.', '').replace('events', ''),
+        tagPrefix,
+      );
+      const childTag: VueTag | undefined = tags.find(item => item.name === childTagName.trim());
+      if (!childTag) {
+        return;
+      }
+      table.body.forEach(line => {
+        const [name, desc] = line;
+        childTag.events!.push({
+          name: removeVersion(name),
+          description: desc,
+        });
+      });
+      return;
+    }
+  });
+
+  return tags;
+}

antd-tools/generator-types/src/index.ts

@@ -0,0 +1,84 @@
+import glob from 'fast-glob';
+import { dirname, join } from 'path';
+import { mdParser } from './parser';
+import { formatter } from './formatter';
+import { genWebTypes } from './web-types';
+import { outputFileSync, readFileSync } from 'fs-extra';
+import type { Options, VueTag } from './type';
+import { getComponentName, normalizePath, toKebabCase } from './utils';
+import { flatMap } from 'lodash';
+
+async function readMarkdown(options: Options): Promise<Map<String, VueTag>> {
+  const mdPaths = await glob(normalizePath(`${options.path}/**/*.md`));
+  const data = mdPaths
+    .filter(md => options.test.test(md))
+    .map(path => {
+      const docPath = dirname(path);
+      const kebabComponentName =
+        options.tagPrefix + docPath.substring(docPath.lastIndexOf('/') + 1) || '';
+      const componentName = getComponentName(docPath.substring(docPath.lastIndexOf('/') + 1) || '');
+      const fileContent = readFileSync(path, 'utf-8');
+      return formatter(mdParser(fileContent), componentName, kebabComponentName, options.tagPrefix);
+    })
+    .filter(item => item) as VueTag[][];
+  const tags = new Map<String, VueTag>();
+  flatMap(data, item => item).forEach(mergedTag => mergeTag(tags, mergedTag));
+  return tags;
+}
+
+function readTypings(options: Options): Map<String, VueTag> {
+  const tags = new Map<String, VueTag>();
+  const fileContent = readFileSync(options.typingsPath, 'utf-8');
+  fileContent
+    .split('\n')
+    .filter(line => line && line.includes('typeof'))
+    .map(line => {
+      const l = line.trim();
+      return toKebabCase(l.substring(0, l.indexOf(':')));
+    })
+    .forEach(tagName =>
+      tags.set(tagName, {
+        name: tagName,
+        slots: [],
+        events: [],
+        attributes: [],
+      }),
+    );
+  return tags;
+}
+
+function mergeTag(tags: Map<String, VueTag>, mergedTag: VueTag) {
+  const tagName = mergedTag.name;
+  const vueTag = tags.get(tagName);
+  if (vueTag) {
+    vueTag.slots = [...vueTag.slots, ...mergedTag.slots];
+    vueTag.events = [...vueTag.events, ...mergedTag.events];
+    vueTag.attributes = [...vueTag.attributes, ...mergedTag.attributes];
+  } else {
+    tags.set(tagName, mergedTag);
+  }
+}
+
+function mergeTags(mergedTagsArr: Map<String, VueTag>[]): VueTag[] {
+  if (mergedTagsArr.length === 1) return [...mergedTagsArr[0].values()];
+  const tags = new Map<String, VueTag>();
+  if (mergedTagsArr.length === 0) return [];
+  mergedTagsArr.forEach(mergedTags => {
+    mergedTags.forEach(mergedTag => mergeTag(tags, mergedTag));
+  });
+  return [...tags.values()];
+}
+
+export async function parseAndWrite(options: Options): Promise<Number> {
+  if (!options.outputDir) {
+    throw new Error('outputDir can not be empty.');
+  }
+  const tagsFromMarkdown = await readMarkdown(options);
+  const tagsFromTypings = await readTypings(options);
+  const tags = mergeTags([tagsFromMarkdown, tagsFromTypings]);
+  const webTypes = genWebTypes(tags, options);
+  outputFileSync(join(options.outputDir, 'web-types.json'), JSON.stringify(webTypes, null, 2));
+  return tags.length;
+}
+
+export default { parseAndWrite };

antd-tools/generator-types/src/parser.ts

@@ -0,0 +1,107 @@
+/* eslint-disable no-cond-assign */
+const TITLE_REG = /^(#+)\s+([^\n]*)/;
+const TABLE_REG = /^\|.+\r?\n\|\s*-+/;
+const TD_REG = /\s*`[^`]+`\s*|([^|`]+)/g;
+const TABLE_SPLIT_LINE_REG = /^\|\s*-/;
+
+type TableContent = {
+  head: string[];
+  body: string[][];
+};
+
+export type Artical = {
+  type: string;
+  content?: string;
+  table?: TableContent;
+  level?: number;
+};
+
+export type Articals = Artical[];
+
+function readLine(input: string) {
+  const end = input.indexOf('\n');
+
+  return input.substring(0, end !== -1 ? end : input.length);
+}
+
+function splitTableLine(line: string) {
+  line = line.replace(/\\\|/g, 'JOIN');
+
+  const items = line.split('|').map(item => item.trim().replace(/JOIN/g, '|'));
+
+  // remove pipe character on both sides
+  items.pop();
+  items.shift();
+
+  return items;
+}
+
+function tableParse(input: string) {
+  let start = 0;
+  let isHead = true;
+
+  const end = input.length;
+  const table: TableContent = {
+    head: [],
+    body: [],
+  };
+
+  while (start < end) {
+    const target = input.substring(start);
+    const line = readLine(target);
+
+    if (!/^\|/.test(target)) {
+      break;
+    }
+
+    if (TABLE_SPLIT_LINE_REG.test(target)) {
+      isHead = false;
+    } else if (!isHead && line.includes('|')) {
+      const matched = line.trim().match(TD_REG);
+
+      if (matched) {
+        table.body.push(splitTableLine(line));
+      }
+    }
+
+    start += line.length + 1;
+  }
+
+  return {
+    table,
+    usedLength: start,
+  };
+}
+
+export function mdParser(input: string): Articals {
+  const artical = [];
+  let start = 0;
+  const end = input.length;
+
+  while (start < end) {
+    const target = input.substring(start);
+
+    let match;
+    if ((match = TITLE_REG.exec(target))) {
+      artical.push({
+        type: 'title',
+        content: match[2].replace('\r', ''),
+        level: match[1].length,
+      });
+
+      start += match.index + match[0].length;
+    } else if ((match = TABLE_REG.exec(target))) {
+      const { table, usedLength } = tableParse(target.substring(match.index));
+      artical.push({
+        type: 'table',
+        table,
+      });
+
+      start += match.index + usedLength;
+    } else {
+      start += readLine(target).length + 1;
+    }
+  }
+
+  return artical;
+}

antd-tools/generator-types/src/type.ts

@@ -0,0 +1,45 @@
+import type { PathLike } from 'fs';
+
+export type VueSlot = {
+  name: string;
+  description: string;
+};
+
+export type VueEventArgument = {
+  name: string;
+  type: string;
+};
+
+export type VueEvent = {
+  name: string;
+  description?: string;
+  arguments?: VueEventArgument[];
+};
+
+export type VueAttribute = {
+  name: string;
+  default: string;
+  description: string;
+  value: {
+    kind: 'expression';
+    type: string;
+  };
+};
+
+export type VueTag = {
+  name: string;
+  slots: VueSlot[];
+  events: VueEvent[];
+  attributes: VueAttribute[];
+  description?: string;
+};
+
+export type Options = {
+  name: string;
+  path: PathLike;
+  typingsPath: PathLike;
+  test: RegExp;
+  version: string;
+  outputDir?: string;
+  tagPrefix?: string;
+};

antd-tools/generator-types/src/utils.ts

@@ -0,0 +1,30 @@
+// myName -> my-name
+export function toKebabCase(camel: string): string {
+  return camel.replace(/((?<=[a-z\d])[A-Z]|(?<=[A-Z\d])[A-Z](?=[a-z]))/g, '-$1').toLowerCase();
+}
+
+// name `v2.0.0` -> name
+export function removeVersion(str: string) {
+  return str.replace(/`(\w|\.)+`/g, '').trim();
+}
+
+// *boolean* -> boolean
+// _boolean_ -> boolean
+export function formatType(type: string) {
+  return type
+    .replace(/(^(\*|_))|((\*|_)$)/g, '')
+    .replace('\\', '')
+    .replace('\\', '');
+}
+
+export function getComponentName(name: string) {
+  const title = name
+    .split('-')
+    .map(it => it.substring(0, 1) + it.substring(1))
+    .join('');
+  return title.substring(0, 1).toUpperCase() + title.substring(1);
+}
+
+export function normalizePath(path: string): string {
+  return path.replace(/\\/g, '/');
+}

antd-tools/generator-types/src/web-types.ts

@@ -0,0 +1,18 @@
+import type { VueTag, Options } from './type';
+
+// create web-types.json to provide autocomplete in JetBrains IDEs
+export function genWebTypes(tags: VueTag[], options: Options) {
+  return {
+    $schema: 'https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json',
+    framework: 'vue',
+    name: options.name,
+    version: options.version,
+    contributions: {
+      html: {
+        tags,
+        attributes: [],
+        'types-syntax': 'typescript',
+      },
+    },
+  };
+}

antd-tools/generator-types/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "outDir": "./lib",
+    "module": "commonjs",
+    "strict": true,
+    "declaration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "lib": ["esnext"]
+  },
+  "include": ["src/**/*"]
+}

antd-tools/getBabelCommonConfig.js

@@ -1,52 +1,56 @@
-'use strict';
+const { resolve, isThereHaveBrowserslistConfig } = require('./utils/projectHelper');
 
-module.exports = function(modules) {
+module.exports = function (modules) {
   const plugins = [
-    require.resolve('@ant-design-vue/babel-plugin-jsx'),
+    [
-    require.resolve('@babel/plugin-proposal-optional-chaining'),
+      resolve('@babel/plugin-transform-typescript'),
-    require.resolve('@babel/plugin-transform-object-assign'),
+      {
-    require.resolve('@babel/plugin-proposal-object-rest-spread'),
+        isTSX: true,
-    require.resolve('@babel/plugin-proposal-export-default-from'),
+      },
-    require.resolve('@babel/plugin-proposal-class-properties'),
+    ],
-    require.resolve('@babel/plugin-syntax-dynamic-import'),
+    [resolve('@vue/babel-plugin-jsx'), { mergeProps: false, enableObjectSlots: false }],
-    // require.resolve('babel-plugin-inline-import-data-uri'),
+    resolve('@babel/plugin-proposal-optional-chaining'),
-    // require.resolve('@babel/plugin-transform-member-expression-literals'),
+    resolve('@babel/plugin-transform-object-assign'),
-    // require.resolve('@babel/plugin-transform-property-literals'),
+    resolve('@babel/plugin-proposal-object-rest-spread'),
-    // require.resolve('@babel/plugin-proposal-export-default-from'),
+    resolve('@babel/plugin-proposal-export-default-from'),
-    // require.resolve('@babel/plugin-transform-object-assign'),
+    resolve('@babel/plugin-proposal-export-namespace-from'),
-    // require.resolve('@babel/plugin-transform-template-literals'),
+    resolve('@babel/plugin-proposal-class-properties'),
-    // require.resolve('@babel/plugin-proposal-object-rest-spread'),
+    resolve('@babel/plugin-syntax-dynamic-import'),
-    // require.resolve('@babel/plugin-proposal-class-properties'),
+    [
+      resolve('@babel/plugin-transform-runtime'),
+      {
+        useESModules: modules === false,
+        version:
+          require(`${process.cwd()}/package.json`).dependencies['@babel/runtime'] || '^7.10.4',
+      },
+    ],
+    // resolve('babel-plugin-inline-import-data-uri'),
+    // resolve('@babel/plugin-transform-member-expression-literals'),
+    // resolve('@babel/plugin-transform-property-literals'),
+    // resolve('@babel/plugin-proposal-export-default-from'),
+    // resolve('@babel/plugin-transform-object-assign'),
+    // resolve('@babel/plugin-transform-template-literals'),
+    // resolve('@babel/plugin-proposal-object-rest-spread'),
+    // resolve('@babel/plugin-proposal-class-properties'),
   ];
-  plugins.push([
-    require.resolve('@babel/plugin-transform-runtime'),
-    {
-      helpers: false,
-    },
-  ]);
   return {
     presets: [
       [
-        require.resolve('@babel/preset-env'),
+        resolve('@babel/preset-env'),
         {
           modules,
-          targets: {
+          targets: isThereHaveBrowserslistConfig()
-            browsers: [
+            ? undefined
-              'last 2 versions',
+            : {
-              'Firefox ESR',
+                browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 11'],
-              '> 1%',
+              },
-              'ie >= 11',
-              'iOS >= 8',
-              'Android >= 4',
-            ],
-          },
         },
       ],
     ],
     plugins,
     env: {
       test: {
-        plugins: [require.resolve('babel-plugin-istanbul')],
+        plugins: [resolve('babel-plugin-istanbul')],
       },
     },
   };

antd-tools/getNpm.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const runCmd = require('./runCmd');
+
+module.exports = function (done) {
+  if (process.env.NPM_CLI) {
+    done(process.env.NPM_CLI);
+    return;
+  }
+  runCmd('which', ['tnpm'], code => {
+    let npm = 'npm';
+    if (!code) {
+      npm = 'tnpm';
+    }
+    done(npm);
+  });
+};

antd-tools/getTSCommonConfig.js

@@ -0,0 +1,24 @@
+'use strict';
+
+const fs = require('fs');
+const { getProjectPath } = require('./utils/projectHelper');
+
+module.exports = function () {
+  let my = {};
+  if (fs.existsSync(getProjectPath('tsconfig.json'))) {
+    my = require(getProjectPath('tsconfig.json'));
+  }
+  return Object.assign(
+    {
+      noUnusedParameters: true,
+      noUnusedLocals: true,
+      strictNullChecks: true,
+      target: 'es6',
+      jsx: 'preserve',
+      moduleResolution: 'node',
+      declaration: true,
+      allowSyntheticDefaultImports: true,
+    },
+    my.compilerOptions,
+  );
+};

antd-tools/getWebpackConfig.js

@@ -1,12 +1,12 @@
+const { getProjectPath, resolve } = require('./utils/projectHelper');
 const path = require('path');
 const webpack = require('webpack');
 const WebpackBar = require('webpackbar');
-const webpackMerge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const postcssConfig = require('./postcssConfig');
 const CleanUpStatsPlugin = require('./utils/CleanUpStatsPlugin');
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
@@ -22,8 +22,8 @@ const imageOptions = {
   limit: 10000,
 };
 
-function getWebpackConfig(modules) {
+function getWebpackConfig(modules, esm = false) {
-  const pkg = require(path.join(process.cwd(), 'package.json'));
+  const pkg = require(getProjectPath('package.json'));
   const babelConfig = require('./getBabelCommonConfig')(modules || false);
 
   const pluginImportOptions = {
@@ -31,43 +31,54 @@ function getWebpackConfig(modules) {
     libraryName: distFileBaseName,
     libraryDirectory: 'components',
   };
-  babelConfig.plugins.push([require.resolve('babel-plugin-import'), pluginImportOptions]);
+  babelConfig.plugins.push([resolve('babel-plugin-import'), pluginImportOptions]);
 
   if (modules === false) {
     babelConfig.plugins.push(require.resolve('./replaceLib'));
   }
 
+  /** @type {import('webpack').Configuration} */
   const config = {
     devtool: 'source-map',
 
     output: {
-      path: path.join(process.cwd(), './dist/'),
+      path: getProjectPath('./dist/'),
       filename: '[name].js',
     },
 
     resolve: {
       modules: ['node_modules', path.join(__dirname, '../node_modules')],
-      extensions: ['.js', '.jsx', '.vue', '.md', '.json'],
+      extensions: [
+        '.web.tsx',
+        '.web.ts',
+        '.web.jsx',
+        '.web.js',
+        '.ts',
+        '.tsx',
+        '.js',
+        '.jsx',
+        '.vue',
+        '.md',
+        '.json',
+      ],
       alias: {
         '@': process.cwd(),
       },
+      fallback: [
+        'child_process',
+        'cluster',
+        'dgram',
+        'dns',
+        'fs',
+        'module',
+        'net',
+        'readline',
+        'repl',
+        'tls',
+      ].reduce((acc, name) => Object.assign({}, acc, { [name]: 'empty' }), {}),
     },
 
-    node: [
-      'child_process',
-      'cluster',
-      'dgram',
-      'dns',
-      'fs',
-      'module',
-      'net',
-      'readline',
-      'repl',
-      'tls',
-    ].reduce((acc, name) => Object.assign({}, acc, { [name]: 'empty' }), {}),
-
     module: {
-      noParse: [/moment.js/],
       rules: [
         {
           test: /\.vue$/,
@@ -81,10 +92,13 @@ function getWebpackConfig(modules) {
                     {
                       loader: 'babel-loader',
                       options: {
-                        presets: [require.resolve('@babel/preset-env')],
+                        presets: [resolve('@babel/preset-env')],
                         plugins: [
-                          require.resolve('@ant-design-vue/babel-plugin-jsx'),
+                          [
-                          require.resolve('@babel/plugin-proposal-object-rest-spread'),
+                            resolve('@vue/babel-plugin-jsx'),
+                            { mergeProps: false, enableObjectSlots: false },
+                          ],
+                          resolve('@babel/plugin-proposal-object-rest-spread'),
                         ],
                       },
                     },
@@ -100,6 +114,21 @@ function getWebpackConfig(modules) {
           exclude: /node_modules/,
           options: babelConfig,
         },
+        {
+          test: /\.tsx?$/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: babelConfig,
+            },
+            {
+              loader: 'ts-loader',
+              options: {
+                transpileOnly: true,
+              },
+            },
+          ],
+        },
         {
           test: /\.css$/,
           use: [
@@ -112,31 +141,11 @@ function getWebpackConfig(modules) {
             },
             {
               loader: 'postcss-loader',
-              options: Object.assign({}, postcssConfig, { sourceMap: true }),
-            },
-          ],
-        },
-        {
-          test: /\.less$/,
-          use: [
-            MiniCssExtractPlugin.loader,
-            {
-              loader: 'css-loader',
               options: {
-                sourceMap: true,
+                postcssOptions: {
-              },
+                  plugins: ['autoprefixer'],
-            },
-            {
-              loader: 'postcss-loader',
-              options: Object.assign({}, postcssConfig, { sourceMap: true }),
-            },
-            {
-              loader: 'less-loader',
-              options: {
-                lessOptions: {
-                  sourceMap: true,
-                  javascriptEnabled: true,
                 },
+                sourceMap: true,
               },
             },
           ],
@@ -161,7 +170,7 @@ function getWebpackConfig(modules) {
       new webpack.BannerPlugin(`
 ${pkg.name} v${pkg.version}
 
-Copyright 2017-present, ant-design-vue.
+Copyright 2017-present, Ant Design Vue.
 All rights reserved.
       `),
       new WebpackBar({
@@ -170,32 +179,57 @@ All rights reserved.
       }),
       new CleanUpStatsPlugin(),
     ],
+    performance: {
+      hints: false,
+    },
   };
 
   if (process.env.RUN_ENV === 'PRODUCTION') {
-    const entry = ['./index'];
+    let entry = ['./index'];
-    config.externals = {
+    config.externals = [
-      vue: {
+      {
-        root: 'Vue',
+        vue: {
-        commonjs2: 'vue',
+          root: 'Vue',
-        commonjs: 'vue',
+          commonjs2: 'vue',
-        amd: 'vue',
+          commonjs: 'vue',
+          amd: 'vue',
+          module: 'vue',
+        },
       },
-    };
+    ];
-    config.output.library = distFileBaseName;
+    if (esm) {
-    config.output.libraryTarget = 'umd';
+      entry = ['./index.esm'];
+      config.experiments = {
+        ...config.experiments,
+        outputModule: true,
+      };
+      config.output.chunkFormat = 'module';
+      config.output.library = {
+        type: 'module',
+      };
+      config.target = 'es2019';
+    } else {
+      config.output.libraryTarget = 'umd';
+      config.output.library = distFileBaseName;
+      config.output.globalObject = 'this';
+    }
+
+    const entryName = esm ? `${distFileBaseName}.esm` : distFileBaseName;
+
     config.optimization = {
       minimizer: [
         new TerserPlugin({
-          sourceMap: true,
+          parallel: true,
+          terserOptions: {
+            warnings: false,
+          },
         }),
       ],
     };
-
     // Development
-    const uncompressedConfig = webpackMerge({}, config, {
+    const uncompressedConfig = merge({}, config, {
       entry: {
-        [distFileBaseName]: entry,
+        [entryName]: entry,
       },
       mode: 'development',
       plugins: [
@@ -206,13 +240,12 @@ All rights reserved.
     });
 
     // Production
-    const prodConfig = webpackMerge({}, config, {
+    const prodConfig = merge({}, config, {
       entry: {
-        [`${distFileBaseName}.min`]: entry,
+        [`${entryName}.min`]: entry,
       },
       mode: 'production',
       plugins: [
-        new webpack.optimize.ModuleConcatenationPlugin(),
         new webpack.LoaderOptionsPlugin({
           minimize: true,
         }),
@@ -221,14 +254,15 @@ All rights reserved.
         }),
       ],
       optimization: {
-        minimizer: [new OptimizeCSSAssetsPlugin({})],
+        minimize: true,
+        minimizer: [new CssMinimizerPlugin({})],
       },
     });
 
     return [prodConfig, uncompressedConfig];
   }
 
-  return config;
+  return [config];
 }
 
 getWebpackConfig.webpack = webpack;

antd-tools/gulpfile.js

@@ -1,19 +1,15 @@
 /* eslint-disable no-console */
-'use strict';
+const { getProjectPath, getConfig } = require('./utils/projectHelper');
-
-// const install = require('./install')
 const runCmd = require('./runCmd');
 const getBabelCommonConfig = require('./getBabelCommonConfig');
 const merge2 = require('merge2');
 const { execSync } = require('child_process');
 const through2 = require('through2');
-const transformLess = require('./transformLess');
 const webpack = require('webpack');
 const babel = require('gulp-babel');
 const argv = require('minimist')(process.argv.slice(2));
 const { Octokit } = require('@octokit/rest');
 
-const packageJson = require(`${process.cwd()}/package.json`);
 // const getNpm = require('./getNpm')
 // const selfPackage = require('../package.json')
 const chalk = require('chalk');
@@ -21,21 +17,35 @@ const getNpmArgs = require('./utils/get-npm-args');
 const getChangelog = require('./utils/getChangelog');
 const path = require('path');
 // const watch = require('gulp-watch')
+const ts = require('gulp-typescript');
 const gulp = require('gulp');
 const fs = require('fs');
 const rimraf = require('rimraf');
-const replaceLib = require('./replaceLib');
 const stripCode = require('gulp-strip-code');
 const compareVersions = require('compare-versions');
+const getTSCommonConfig = require('./getTSCommonConfig');
+const replaceLib = require('./replaceLib');
+const sortApiTable = require('./sortApiTable');
+const { glob } = require('glob');
 
+const packageJson = require(getProjectPath('package.json'));
+const tsDefaultReporter = ts.reporter.defaultReporter();
 const cwd = process.cwd();
-const libDir = path.join(cwd, 'lib');
+const libDir = getProjectPath('lib');
-const esDir = path.join(cwd, 'es');
+const esDir = getProjectPath('es');
+const localeDir = getProjectPath('locale');
+
+const tsConfig = getTSCommonConfig();
+
+// FIXME: hard code, not find typescript can modify the path resolution
+const localeDts = `import type { Locale } from '../lib/locale-provider';
+declare const localeValues: Locale;
+export default localeValues;`;
 
 function dist(done) {
   rimraf.sync(path.join(cwd, 'dist'));
   process.env.RUN_ENV = 'PRODUCTION';
-  const webpackConfig = require(path.join(cwd, 'webpack.build.conf.js'));
+  const webpackConfig = require(getProjectPath('webpack.build.conf.js'));
   webpack(webpackConfig, (err, stats) => {
     if (err) {
       console.error(err.stack || err);
@@ -46,11 +56,17 @@ function dist(done) {
     }
 
     const info = stats.toJson();
+    const { dist: { finalize } = {}, bail } = getConfig();
 
     if (stats.hasErrors()) {
-      console.error(info.errors);
+      (info.errors || []).forEach(error => {
+        console.error(error);
+      });
+      // https://github.com/ant-design/ant-design/pull/31662
+      if (bail) {
+        process.exit(1);
+      }
     }
-
     if (stats.hasWarnings()) {
       console.warn(info.warnings);
     }
@@ -65,10 +81,44 @@ function dist(done) {
       version: false,
     });
     console.log(buildInfo);
+    // Additional process of dist finalize
+    if (finalize) {
+      console.log('[Dist] Finalization...');
+      finalize();
+    }
     done(0);
   });
 }
 
+const tsFiles = ['**/*.ts', '**/*.tsx', '!node_modules/**/*.*', 'typings/**/*.d.ts'];
+
+function compileTs(stream) {
+  return stream
+    .pipe(ts(tsConfig))
+    .js.pipe(
+      through2.obj(function (file, encoding, next) {
+        // console.log(file.path, file.base);
+        file.path = file.path.replace(/\.[jt]sx$/, '.js');
+        this.push(file);
+        next();
+      }),
+    )
+    .pipe(gulp.dest(process.cwd()));
+}
+
+gulp.task('tsc', () =>
+  compileTs(
+    gulp.src(tsFiles, {
+      base: cwd,
+    }),
+  ),
+);
+
+gulp.task('clean', () => {
+  rimraf.sync(getProjectPath('_site'));
+  rimraf.sync(getProjectPath('_data'));
+});
+
 function babelify(js, modules) {
   const babelConfig = getBabelCommonConfig(modules);
   babelConfig.babelrc = false;
@@ -76,67 +126,122 @@ function babelify(js, modules) {
   if (modules === false) {
     babelConfig.plugins.push(replaceLib);
   }
-  let stream = js.pipe(babel(babelConfig)).pipe(
+  const stream = js.pipe(babel(babelConfig)).pipe(
     through2.obj(function z(file, encoding, next) {
       this.push(file.clone());
-      if (file.path.match(/\/style\/index\.(js|jsx)$/)) {
+      if (modules !== false) {
         const content = file.contents.toString(encoding);
         file.contents = Buffer.from(
-          content.replace(/\/style\/?'/g, "/style/css'").replace(/\.less/g, '.css'),
+          content
+            .replace(/lodash-es/g, 'lodash')
+            .replace(/@ant-design\/icons-vue/g, '@ant-design/icons-vue/lib/icons'),
         );
-        file.path = file.path.replace(/index\.(js|jsx)$/, 'css.js');
         this.push(file);
-        next();
-      } else {
-        next();
       }
+      next();
     }),
   );
+  return stream.pipe(gulp.dest(modules === false ? esDir : libDir));
+}
+
+function compile(modules) {
+  const { compile: { transformTSFile, transformFile } = {} } = getConfig();
+  rimraf.sync(modules !== false ? libDir : esDir);
+
+  const assets = gulp
+    .src(['components/**/*.@(png|svg)'])
+    .pipe(gulp.dest(modules === false ? esDir : libDir));
+  let error = 0;
+
+  // =============================== FILE ===============================
+  let transformFileStream;
+
+  if (transformFile) {
+    transformFileStream = gulp
+      .src(['components/**/*.tsx'])
+      .pipe(
+        through2.obj(function (file, encoding, next) {
+          let nextFile = transformFile(file) || file;
+          nextFile = Array.isArray(nextFile) ? nextFile : [nextFile];
+          nextFile.forEach(f => this.push(f));
+          next();
+        }),
+      )
+      .pipe(gulp.dest(modules === false ? esDir : libDir));
+  }
+
+  // ================================ TS ================================
+  const source = [
+    'components/**/*.js',
+    'components/**/*.jsx',
+    'components/**/*.tsx',
+    'components/**/*.ts',
+    'typings/**/*.d.ts',
+    '!components/*/__tests__/*',
+  ];
+
+  // Strip content if needed
+  let sourceStream = gulp.src(source);
   if (modules === false) {
-    stream = stream.pipe(
+    sourceStream = sourceStream.pipe(
       stripCode({
         start_comment: '@remove-on-es-build-begin',
         end_comment: '@remove-on-es-build-end',
       }),
     );
   }
-  return stream.pipe(gulp.dest(modules === false ? esDir : libDir));
+
+  if (transformTSFile) {
+    sourceStream = sourceStream.pipe(
+      through2.obj(function (file, encoding, next) {
+        let nextFile = transformTSFile(file) || file;
+        nextFile = Array.isArray(nextFile) ? nextFile : [nextFile];
+        nextFile.forEach(f => this.push(f));
+        next();
+      }),
+    );
+  }
+
+  const tsResult = sourceStream.pipe(
+    ts(tsConfig, {
+      error(e) {
+        tsDefaultReporter.error(e);
+        error = 1;
+      },
+      finish: tsDefaultReporter.finish,
+    }),
+  );
+
+  function check() {
+    if (error && !argv['ignore-error']) {
+      process.exit(1);
+    }
+  }
+
+  tsResult.on('finish', check);
+  tsResult.on('end', check);
+  const tsFilesStream = babelify(tsResult.js, modules);
+  const tsd = tsResult.dts.pipe(gulp.dest(modules === false ? esDir : libDir));
+  return merge2([tsFilesStream, tsd, assets, transformFileStream].filter(s => s));
 }
 
-function compile(modules) {
+function generateLocale() {
-  rimraf.sync(modules !== false ? libDir : esDir);
+  if (!fs.existsSync(localeDir)) {
-  const less = gulp
+    fs.mkdirSync(localeDir);
-    .src(['components/**/*.less'])
+  }
-    .pipe(
-      through2.obj(function(file, encoding, next) {
-        this.push(file.clone());
-        if (
-          file.path.match(/\/style\/index\.less$/) ||
-          file.path.match(/\/style\/v2-compatible-reset\.less$/)
-        ) {
-          transformLess(file.path)
-            .then(css => {
-              file.contents = Buffer.from(css);
-              file.path = file.path.replace(/\.less$/, '.css');
-              this.push(file);
-              next();
-            })
-            .catch(e => {
-              console.error(e);
-            });
-        } else {
-          next();
-        }
-      }),
-    )
-    .pipe(gulp.dest(modules === false ? esDir : libDir));
-  const assets = gulp
-    .src(['components/**/*.@(png|svg)'])
-    .pipe(gulp.dest(modules === false ? esDir : libDir));
 
-  const source = ['components/**/*.js', 'components/**/*.jsx', '!components/*/__tests__/*'];
+  const localeFiles = glob.sync('components/locale/*.ts?(x)');
-  const jsFilesStream = babelify(gulp.src(source), modules);
+  localeFiles.forEach(item => {
-  return merge2([less, jsFilesStream, assets]);
+    const match = item.match(/components\/locale\/(.*)\.tsx?/);
+    if (match) {
+      const locale = match[1];
+      fs.writeFileSync(
+        path.join(localeDir, `${locale}.js`),
+        `module.exports = require('../lib/locale/${locale}');`,
+      );
+      fs.writeFileSync(path.join(localeDir, `${locale}.d.ts`), localeDts);
+    }
+  });
 }
 
 function tag() {
@@ -242,61 +347,71 @@ function publish(tagString, done) {
 }
 
 function pub(done) {
-  dist(code => {
+  const notOk = !packageJson.version.match(/^\d+\.\d+\.\d+$/);
-    if (code) {
+  let tagString;
-      done(code);
+  if (argv['npm-tag']) {
-      return;
+    tagString = argv['npm-tag'];
-    }
+  }
-    const notOk = !packageJson.version.match(/^\d+\.\d+\.\d+$/);
+  if (!tagString && notOk) {
-    let tagString;
+    tagString = 'next';
-    if (argv['npm-tag']) {
+  }
-      tagString = argv['npm-tag'];
+  if (packageJson.scripts['pre-publish']) {
-    }
+    runCmd('npm', ['run', 'pre-publish'], code2 => {
-    if (!tagString && notOk) {
+      if (code2) {
-      tagString = 'next';
+        done(code2);
-    }
+        return;
-    if (packageJson.scripts['pre-publish']) {
+      }
-      runCmd('npm', ['run', 'pre-publish'], code2 => {
-        if (code2) {
-          done(code2);
-          return;
-        }
-        publish(tagString, done);
-      });
-    } else {
       publish(tagString, done);
-    }
+    });
-  });
+  } else {
+    publish(tagString, done);
+  }
 }
 
-gulp.task(
+const startTime = new Date();
-  'compile-with-es',
+gulp.task('compile-with-es', done => {
-  gulp.series(done => {
+  console.log('start compile at ', startTime);
-    compile(false).on('finish', function() {
+  console.log('[Parallel] Compile to es...');
-      done();
+  compile(false).on('finish', done);
-    });
+});
-  }),
+
-);
+gulp.task('compile-with-lib', done => {
+  console.log('[Parallel] Compile to js...');
+  compile().on('finish', () => {
+    generateLocale();
+    done();
+  });
+});
+
+gulp.task('compile-finalize', done => {
+  // Additional process of compile finalize
+  const { compile: { finalize } = {} } = getConfig();
+  if (finalize) {
+    console.log('[Compile] Finalization...');
+    finalize();
+  }
+  done();
+});
 
 gulp.task(
   'compile',
-  gulp.series('compile-with-es', done => {
+  gulp.series(gulp.parallel('compile-with-es', 'compile-with-lib'), 'compile-finalize', done => {
-    compile().on('finish', function() {
+    console.log('end compile at ', new Date());
-      done();
+    console.log('compile time ', (new Date() - startTime) / 1000, 's');
-    });
+    done();
   }),
 );
 
 gulp.task(
   'dist',
-  gulp.series('compile', done => {
+  gulp.series(done => {
     dist(done);
   }),
 );
 
 gulp.task(
   'pub',
-  gulp.series('check-git', 'compile', done => {
+  gulp.series('check-git', 'compile', 'dist', done => {
     // if (!process.env.GITHUB_TOKEN) {
     //   console.log('no GitHub token found, skip');
     // } else {
@@ -337,7 +452,7 @@ gulp.task(
           newVersion.trim() === version
         ) {
           // eslint-disable-next-line no-unused-vars
-          runCmd('npm', ['run', 'pub'], code => {
+          runCmd('npm', ['run', 'pub'], _code => {
             done();
           });
         } else {
@@ -360,7 +475,11 @@ gulp.task(
     const npmArgs = getNpmArgs();
     if (npmArgs) {
       for (let arg = npmArgs.shift(); arg; arg = npmArgs.shift()) {
-        if (/^pu(b(l(i(sh?)?)?)?)?$/.test(arg) && npmArgs.indexOf('--with-antd-tools') < 0) {
+        if (
+          /^pu(b(l(i(sh?)?)?)?)?$/.test(arg) &&
+          npmArgs.indexOf('--with-antd-tools') < 0 &&
+          !process.env.npm_config_with_antd_tools
+        ) {
           reportError();
           done(1);
           return;
@@ -370,3 +489,11 @@ gulp.task(
     done();
   }),
 );
+
+gulp.task(
+  'sort-api-table',
+  gulp.series(done => {
+    sortApiTable();
+    done();
+  }),
+);

antd-tools/postcssConfig.js

@@ -1,6 +0,0 @@
-const rucksack = require('rucksack-css');
-const autoprefixer = require('autoprefixer');
-
-module.exports = {
-  plugins: [rucksack(), autoprefixer()],
-};

antd-tools/replaceLib.js

@@ -1,14 +1,26 @@
 'use strict';
 
-const { join, dirname } = require('path');
+const { dirname } = require('path');
 const fs = require('fs');
-
+const { getProjectPath } = require('./utils/projectHelper');
-const cwd = process.cwd();
 
 function replacePath(path) {
   if (path.node.source && /\/lib\//.test(path.node.source.value)) {
     const esModule = path.node.source.value.replace('/lib/', '/es/');
-    const esPath = dirname(join(cwd, `node_modules/${esModule}`));
+    const esPath = dirname(getProjectPath('node_modules', esModule));
+    if (fs.existsSync(esPath)) {
+      path.node.source.value = esModule;
+    }
+  }
+
+  // @ant-design/icons-vue/xxx => @ant-design/icons-vue/es/icons/xxx
+  const antdIconMatcher = /@ant-design\/icons-vue\/([^/]*)$/;
+  if (path.node.source && antdIconMatcher.test(path.node.source.value)) {
+    const esModule = path.node.source.value.replace(
+      antdIconMatcher,
+      (_, iconName) => `@ant-design/icons-vue/es/icons/${iconName}`,
+    );
+    const esPath = dirname(getProjectPath('node_modules', esModule));
     if (fs.existsSync(esPath)) {
       path.node.source.value = esModule;
     }

antd-tools/runCmd.js

@@ -1,9 +1,17 @@
 'use strict';
 
+const isWindows = require('is-windows');
 const getRunCmdEnv = require('./utils/getRunCmdEnv');
 
 function runCmd(cmd, _args, fn) {
   const args = _args || [];
+
+  if (isWindows()) {
+    args.unshift(cmd);
+    args.unshift('/c');
+    cmd = process.env.ComSpec;
+  }
+
   const runner = require('child_process').spawn(cmd, args, {
     // keep color
     stdio: 'inherit',

antd-tools/sortApiTable.js

@@ -0,0 +1,165 @@
+const program = require('commander');
+const majo = require('majo');
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+
+const unified = require('unified');
+const parse = require('remark-parse');
+const stringify = require('remark-stringify');
+
+const yamlConfig = require('remark-yaml-config');
+const frontmatter = require('remark-frontmatter');
+
+let fileAPIs = {};
+const remarkWithYaml = unified()
+  .use(parse)
+  .use(stringify, {
+    paddedTable: false,
+    listItemIndent: 1,
+    stringLength: () => 3,
+  })
+  .use(frontmatter)
+  .use(yamlConfig);
+
+const stream = majo.majo();
+
+function getCellValue(node) {
+  return node.children[0].children[0].value;
+}
+
+// from small to large
+const sizeBreakPoints = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+
+const whiteMethodList = ['afterChange', 'beforeChange'];
+
+const groups = {
+  isDynamic: val => /^on[A-Z]/.test(val) || whiteMethodList.indexOf(val) > -1,
+  isSize: val => sizeBreakPoints.indexOf(val) > -1,
+};
+
+function asciiSort(prev, next) {
+  if (prev > next) {
+    return 1;
+  }
+
+  if (prev < next) {
+    return -1;
+  }
+
+  return 0;
+}
+
+// follow the alphabet order
+function alphabetSort(nodes) {
+  // use toLowerCase to keep `case insensitive`
+  return nodes.sort((...comparison) =>
+    asciiSort(...comparison.map(val => getCellValue(val).toLowerCase())),
+  );
+}
+
+function sizeSort(nodes) {
+  return nodes.sort((...comparison) =>
+    asciiSort(...comparison.map(val => sizeBreakPoints.indexOf(getCellValue(val).toLowerCase()))),
+  );
+}
+
+function sort(ast, filename) {
+  const nameMatch = filename.match(/^components\/([^/]*)\//);
+  const componentName = nameMatch[1];
+  fileAPIs[componentName] = fileAPIs[componentName] || {
+    static: new Set(),
+    size: new Set(),
+    dynamic: new Set(),
+  };
+
+  ast.children.forEach(child => {
+    const staticProps = [];
+    // prefix with `on`
+    const dynamicProps = [];
+    // one of ['xs', 'sm', 'md', 'lg', 'xl']
+    const sizeProps = [];
+
+    // find table markdown type
+    if (child.type === 'table') {
+      // slice will create new array, so sort can affect the original array.
+      // slice(1) cut down the thead
+      child.children.slice(1).forEach(node => {
+        const value = getCellValue(node);
+        if (groups.isDynamic(value)) {
+          dynamicProps.push(node);
+          fileAPIs[componentName].dynamic.add(value);
+        } else if (groups.isSize(value)) {
+          sizeProps.push(node);
+          fileAPIs[componentName].size.add(value);
+        } else {
+          staticProps.push(node);
+          fileAPIs[componentName].static.add(value);
+        }
+      });
+
+      // eslint-disable-next-line
+      child.children = [
+        child.children[0],
+        ...alphabetSort(staticProps),
+        ...sizeSort(sizeProps),
+        ...alphabetSort(dynamicProps),
+      ];
+    }
+  });
+
+  return ast;
+}
+
+function sortAPI(md, filename) {
+  return remarkWithYaml.stringify(sort(remarkWithYaml.parse(md), filename));
+}
+
+function sortMiddleware(ctx) {
+  Object.keys(ctx.files).forEach(filename => {
+    const content = ctx.fileContents(filename);
+    ctx.writeContents(filename, sortAPI(content, filename));
+  });
+}
+
+module.exports = () => {
+  fileAPIs = {};
+
+  program
+    .version('0.1.0')
+    .option(
+      '-f, --file [file]',
+      'Specify which file to be transformed',
+      // default value
+      'components/**/index.+(zh-CN|en-US).md',
+    )
+    .option('-o, --output [output]', 'Specify component api output path', '~component-api.json')
+    .parse(process.argv);
+  // Get the markdown file all need to be transformed
+
+  /* eslint-disable no-console */
+  stream
+    .source(program.file)
+    .use(sortMiddleware)
+    .dest('.')
+    .then(() => {
+      if (program.output) {
+        const data = {};
+        Object.keys(fileAPIs).forEach(componentName => {
+          data[componentName] = {
+            static: [...fileAPIs[componentName].static],
+            size: [...fileAPIs[componentName].size],
+            dynamic: [...fileAPIs[componentName].dynamic],
+          };
+        });
+
+        const reportPath = path.resolve(program.output);
+        fs.writeFileSync(reportPath, JSON.stringify(data, null, 2), 'utf8');
+        console.log(chalk.cyan(`API list file: ${reportPath}`));
+      }
+    })
+    .then(() => {
+      console.log(chalk.green(`sort ant-design-vue api successfully!`));
+    });
+  /* eslint-enable no-console */
+};

antd-tools/transformLess.js

@@ -1,33 +0,0 @@
-const less = require('less');
-const { readFileSync } = require('fs');
-const path = require('path');
-const postcss = require('postcss');
-const NpmImportPlugin = require('less-plugin-npm-import');
-const postcssConfig = require('./postcssConfig');
-
-function transformLess(lessFile, config = {}) {
-  const { cwd = process.cwd() } = config;
-  const resolvedLessFile = path.resolve(cwd, lessFile);
-
-  let data = readFileSync(resolvedLessFile, 'utf-8');
-  data = data.replace(/^\uFEFF/, '');
-
-  // Do less compile
-  const lessOpts = {
-    paths: [path.dirname(resolvedLessFile)],
-    filename: resolvedLessFile,
-    plugins: [new NpmImportPlugin({ prefix: '~' })],
-    javascriptEnabled: true,
-  };
-  return less
-    .render(data, lessOpts)
-    .then(result => {
-      const source = result.css;
-      return postcss(postcssConfig.plugins).process(source);
-    })
-    .then(r => {
-      return r.css;
-    });
-}
-
-module.exports = transformLess;

antd-tools/utils/CleanUpStatsPlugin.js

@@ -24,13 +24,13 @@ class CleanUpStatsPlugin {
 
   apply(compiler) {
     compiler.hooks.done.tap('CleanUpStatsPlugin', stats => {
-      const { children } = stats.compilation;
+      const { children, warnings } = stats.compilation;
       if (Array.isArray(children)) {
         stats.compilation.children = children.filter(child => this.shouldPickStatChild(child));
       }
-      // if (Array.isArray(warnings)) {
+      if (Array.isArray(warnings)) {
-      //   stats.compilation.warnings = warnings.filter(message => this.shouldPickWarning(message));
+        stats.compilation.warnings = warnings.filter(message => this.shouldPickWarning(message));
-      // }
+      }
     });
   }
 }

antd-tools/utils/get-npm-args.js

@@ -2,6 +2,11 @@
 
 // NOTE: the following code was partially adopted from https://github.com/iarna/in-publish
 module.exports = function getNpmArgs() {
+  // https://github.com/iarna/in-publish/pull/14
+  if (process.env.npm_command) {
+    return [process.env.npm_command];
+  }
+
   let npmArgv = null;
 
   try {

antd-tools/utils/getChangelog.js

@@ -1,10 +1,7 @@
 const fs = require('fs');
 
 module.exports = function getChangelog(file, version) {
-  const lines = fs
+  const lines = fs.readFileSync(file).toString().split('\n');
-    .readFileSync(file)
-    .toString()
-    .split('\n');
   const changeLog = [];
   const startPattern = new RegExp(`^## ${version}`);
   const stopPattern = /^## /; // 前一个版本

antd-tools/utils/getRunCmdEnv.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const path = require('path');
+const isWindows = require('is-windows');
 
 module.exports = function getRunCmdEnv() {
   const env = {};
@@ -11,16 +12,12 @@ module.exports = function getRunCmdEnv() {
   const nodeModulesBinDir = path.join(__dirname, '../../node_modules/.bin');
 
   Object.entries(env)
-    .filter(
+    .filter(v => v.slice(0, 1).pop().toLowerCase() === 'path')
-      v =>
-        v
-          .slice(0, 1)
-          .pop()
-          .toLowerCase() === 'path',
-    )
     .forEach(v => {
       const key = v.slice(0, 1).pop();
-      env[key] = env[key] ? `${nodeModulesBinDir}:${env[key]}` : nodeModulesBinDir;
+      env[key] = env[key]
+        ? `${nodeModulesBinDir}${isWindows() ? ';' : ':'}${env[key]}`
+        : nodeModulesBinDir;
     });
   return env;
 };

antd-tools/utils/projectHelper.js

@@ -0,0 +1,80 @@
+const fs = require('fs');
+const path = require('path');
+
+const cwd = process.cwd();
+
+function getProjectPath(...filePath) {
+  return path.join(cwd, ...filePath);
+}
+
+function resolve(moduleName) {
+  return require.resolve(moduleName);
+}
+
+// We need hack the require to ensure use package module first
+// For example, `typescript` is required by `gulp-typescript` but provided by `antd`
+// we do not need for ant-design-vue
+let injected = false;
+function injectRequire() {
+  if (injected) return;
+
+  const Module = require('module');
+
+  const oriRequire = Module.prototype.require;
+  Module.prototype.require = function (...args) {
+    const moduleName = args[0];
+    try {
+      return oriRequire.apply(this, args);
+    } catch (err) {
+      const newArgs = [...args];
+      if (moduleName[0] !== '/') {
+        newArgs[0] = getProjectPath('node_modules', moduleName);
+      }
+      return oriRequire.apply(this, newArgs);
+    }
+  };
+
+  injected = true;
+}
+
+function getConfig() {
+  const configPath = getProjectPath('.antd-tools.config.js');
+  if (fs.existsSync(configPath)) {
+    return require(configPath);
+  }
+
+  return {};
+}
+
+/**
+ * 是否存在可用的browserslist config
+ * https://github.com/browserslist/browserslist#queries
+ * @returns
+ */
+function isThereHaveBrowserslistConfig() {
+  try {
+    const packageJson = require(getProjectPath('package.json'));
+    if (packageJson.browserslist) {
+      return true;
+    }
+  } catch (e) {
+    //
+  }
+  if (fs.existsSync(getProjectPath('.browserslistrc'))) {
+    return true;
+  }
+  if (fs.existsSync(getProjectPath('browserslist'))) {
+    return true;
+  }
+  // parent项目的配置支持，需要再补充
+  // ROWSERSLIST ROWSERSLIST_ENV 变量的形式，需要再补充。
+  return false;
+}
+
+module.exports = {
+  getProjectPath,
+  resolve,
+  injectRequire,
+  getConfig,
+  isThereHaveBrowserslistConfig,
+};

antdv-demo

@@ -1 +0,0 @@
-Subproject commit a71e2eac4c9b38092fc8edd2282bdd91170fa04b

babel.config.js

@@ -1,16 +1,18 @@
 module.exports = {
   env: {
     test: {
-      presets: [['@babel/preset-env', { targets: { node: true } }]],
+      presets: [['@babel/preset-env']],
       plugins: [
-        ['@ant-design-vue/babel-plugin-jsx'],
+        ['@vue/babel-plugin-jsx', { mergeProps: false, enableObjectSlots: false }],
         '@babel/plugin-proposal-optional-chaining',
         '@babel/plugin-transform-object-assign',
         '@babel/plugin-proposal-object-rest-spread',
         '@babel/plugin-proposal-export-default-from',
+        '@babel/plugin-proposal-export-namespace-from',
         '@babel/plugin-proposal-class-properties',
         '@babel/plugin-syntax-dynamic-import',
         '@babel/plugin-transform-runtime',
+        'transform-require-context',
       ],
     },
   },

breakChange-2.x.md

@@ -1,121 +0,0 @@
-# break change
-
-## global api
-
-所有 dom 原生属性由驼峰改成全小写，涉及 API
-
-####
-
-maxLength -> maxlength tabIndex => tabindex readOnly => readonly autoComplete => autocomplete
-
-## Tag
-
-### CheckableTag
-
-v-model -> v-model:checked
-
-### Tag
-
-v-model -> v-model:visible
-
-移除 afterClose 属性
-
-## Radio
-
-radioGroup radio v-model -> v-model:value
-
-## popconfirm
-
-okButtonProps、cancelButtonProps 扁平化处理
-
-v-model -> v-model:visible
-
-## popover
-
-v-model -> v-model:visible
-
-## Tooltip
-
-v-model -> v-model:visible
-
-## Modal
-
-v-model -> v-model:visible
-
-okButtonProps、cancelButtonProps 扁平化处理
-
-## Mentions
-
-v-model -> v-model:value
-
-## menu
-
-v-model -> v-model:selectedKeys :openKeys.sync -> v-mdoel:openKeys
-
-## dropdown
-
-v-model -> v-model:visible
-
-## Steps
-
-v-model -> v-model:current
-
-## checkbox
-
-v-model -> v-model:checked
-
-checkboxGroup
-
-v-model -> v-model:value
-
-## Switch
-
-v-model -> v-model:checked
-
-## tabs
-
-v-model -> v-model:activeKey
-
-renderTabBar({props, on, style, class}, DefaultTabBar) -> {DefaultTabBar, ...props} 多参数改成单参数并且扁平化处理
-
-## card
-
-tabList[{scopedSlots}] -> tabList[{slots}]
-
-## rate
-
-v-model -> v-model:value
-
-## Collapse
-
-v-model -> v-model:activeKey
-
-## List
-
-renderItem(item, index) => renderItem({item, index}) 该用单参数
-
-## TreeSelect
-
-treeData 中 scopedSlots => slots , v-model => v-model:value
-
-## datePicker
-
-dateRender
-
-(current: moment.Moment, today: moment.Moment) => ({current: moment.Moment, today: moment.Moment})
-
-monthCellContentRender (date, locale) => ({date, locale})
-
-## table
-
-customRender( text, record, index, column ); => customRender({ text, record, index, column });
-
-expandedRowRender(record, index, indent, expanded) => expandedRowRender({ record, index, indent, expanded })
-
-filterIcon(filtered, column) => filterIcon({ filtered, column })
-
-## calendar
-
-dateCellRender、dateFullCellRender、monthCellRender、monthFullCellRender
-
-function (date, today?) => function({current, today?})

components/_util/ActionButton.tsx

@@ -0,0 +1,123 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import { shallowRef, onMounted, defineComponent, onBeforeUnmount } from 'vue';
+import Button from '../button';
+import type { ButtonProps } from '../button';
+import type { LegacyButtonType } from '../button/buttonTypes';
+import { convertLegacyProps } from '../button/buttonTypes';
+import useDestroyed from './hooks/useDestroyed';
+import { objectType } from './type';
+import { findDOMNode } from './props-util';
+
+const actionButtonProps = {
+  type: {
+    type: String as PropType<LegacyButtonType>,
+  },
+  actionFn: Function as PropType<(...args: any[]) => any | PromiseLike<any>>,
+  close: Function,
+  autofocus: Boolean,
+  prefixCls: String,
+  buttonProps: objectType<ButtonProps>(),
+  emitEvent: Boolean,
+  quitOnNullishReturnValue: Boolean,
+};
+
+export type ActionButtonProps = ExtractPropTypes<typeof actionButtonProps>;
+
+function isThenable<T>(thing?: PromiseLike<T>): boolean {
+  return !!(thing && thing.then);
+}
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'ActionButton',
+  props: actionButtonProps,
+  setup(props, { slots }) {
+    const clickedRef = shallowRef<boolean>(false);
+    const buttonRef = shallowRef();
+    const loading = shallowRef(false);
+    let timeoutId: any;
+    const isDestroyed = useDestroyed();
+    onMounted(() => {
+      if (props.autofocus) {
+        timeoutId = setTimeout(() => findDOMNode(buttonRef.value)?.focus?.());
+      }
+    });
+    onBeforeUnmount(() => {
+      clearTimeout(timeoutId);
+    });
+
+    const onInternalClose = (...args: any[]) => {
+      props.close?.(...args);
+    };
+
+    const handlePromiseOnOk = (returnValueOfOnOk?: PromiseLike<any>) => {
+      if (!isThenable(returnValueOfOnOk)) {
+        return;
+      }
+      loading.value = true;
+      returnValueOfOnOk!.then(
+        (...args: any[]) => {
+          if (!isDestroyed.value) {
+            loading.value = false;
+          }
+          onInternalClose(...args);
+          clickedRef.value = false;
+        },
+        (e: Error) => {
+          // See: https://github.com/ant-design/ant-design/issues/6183
+          if (!isDestroyed.value) {
+            loading.value = false;
+          }
+          clickedRef.value = false;
+          return Promise.reject(e);
+        },
+      );
+    };
+
+    const onClick = (e: MouseEvent) => {
+      const { actionFn } = props;
+      if (clickedRef.value) {
+        return;
+      }
+      clickedRef.value = true;
+      if (!actionFn) {
+        onInternalClose();
+        return;
+      }
+      let returnValueOfOnOk: PromiseLike<any>;
+      if (props.emitEvent) {
+        returnValueOfOnOk = actionFn(e);
+        if (props.quitOnNullishReturnValue && !isThenable(returnValueOfOnOk)) {
+          clickedRef.value = false;
+          onInternalClose(e);
+          return;
+        }
+      } else if (actionFn.length) {
+        returnValueOfOnOk = actionFn(props.close);
+        // https://github.com/ant-design/ant-design/issues/23358
+        clickedRef.value = false;
+      } else {
+        returnValueOfOnOk = actionFn();
+        if (!returnValueOfOnOk) {
+          onInternalClose();
+          return;
+        }
+      }
+      handlePromiseOnOk(returnValueOfOnOk);
+    };
+    return () => {
+      const { type, prefixCls, buttonProps } = props;
+      return (
+        <Button
+          {...convertLegacyProps(type)}
+          onClick={onClick}
+          loading={loading.value}
+          prefixCls={prefixCls}
+          {...buttonProps}
+          ref={buttonRef}
+          v-slots={slots}
+        ></Button>
+      );
+    };
+  },
+});

components/_util/BaseInput.tsx

@@ -0,0 +1,168 @@
+import type { PropType } from 'vue';
+import { computed, defineComponent, shallowRef, ref, watch } from 'vue';
+import PropTypes from './vue-types';
+import type { BaseInputInnerExpose } from './BaseInputInner';
+import BaseInputInner from './BaseInputInner';
+import { styleObjectToString } from '../vc-util/Dom/css';
+
+export interface BaseInputExpose {
+  focus: () => void;
+  blur: () => void;
+  input: HTMLInputElement | HTMLTextAreaElement | null;
+  setSelectionRange: (
+    start: number,
+    end: number,
+    direction?: 'forward' | 'backward' | 'none',
+  ) => void;
+  select: () => void;
+  getSelectionStart: () => number | null;
+  getSelectionEnd: () => number | null;
+  getScrollTop: () => number | null;
+  setScrollTop: (scrollTop: number) => void;
+}
+const BaseInput = defineComponent({
+  compatConfig: { MODE: 3 },
+  inheritAttrs: false,
+  props: {
+    disabled: PropTypes.looseBool,
+    type: PropTypes.string,
+    value: PropTypes.any,
+    lazy: PropTypes.bool.def(true),
+    tag: {
+      type: String as PropType<'input' | 'textarea'>,
+      default: 'input',
+    },
+    size: PropTypes.string,
+    style: PropTypes.oneOfType([String, Object]),
+    class: PropTypes.string,
+  },
+  emits: [
+    'change',
+    'input',
+    'blur',
+    'keydown',
+    'focus',
+    'compositionstart',
+    'compositionend',
+    'keyup',
+    'paste',
+    'mousedown',
+  ],
+  setup(props, { emit, attrs, expose }) {
+    const inputRef = shallowRef<BaseInputInnerExpose>(null);
+    const renderValue = ref();
+    const isComposing = ref(false);
+    watch(
+      [() => props.value, isComposing],
+      () => {
+        if (isComposing.value) return;
+        renderValue.value = props.value;
+      },
+      { immediate: true },
+    );
+    const handleChange = (e: Event) => {
+      emit('change', e);
+    };
+    const onCompositionstart = (e: CompositionEvent) => {
+      isComposing.value = true;
+      (e.target as any).composing = true;
+      emit('compositionstart', e);
+    };
+    const onCompositionend = (e: CompositionEvent) => {
+      isComposing.value = false;
+      (e.target as any).composing = false;
+      emit('compositionend', e);
+      const event = document.createEvent('HTMLEvents');
+      event.initEvent('input', true, true);
+      e.target.dispatchEvent(event);
+      handleChange(e);
+    };
+    const handleInput = (e: Event) => {
+      if (isComposing.value && props.lazy) {
+        renderValue.value = (e.target as HTMLInputElement).value;
+        return;
+      }
+      emit('input', e);
+    };
+
+    const handleBlur = (e: Event) => {
+      emit('blur', e);
+    };
+    const handleFocus = (e: Event) => {
+      emit('focus', e);
+    };
+
+    const focus = () => {
+      if (inputRef.value) {
+        inputRef.value.focus();
+      }
+    };
+    const blur = () => {
+      if (inputRef.value) {
+        inputRef.value.blur();
+      }
+    };
+    const handleKeyDown = (e: KeyboardEvent) => {
+      emit('keydown', e);
+    };
+    const handleKeyUp = (e: KeyboardEvent) => {
+      emit('keyup', e);
+    };
+    const setSelectionRange = (
+      start: number,
+      end: number,
+      direction?: 'forward' | 'backward' | 'none',
+    ) => {
+      inputRef.value?.setSelectionRange(start, end, direction);
+    };
+
+    const select = () => {
+      inputRef.value?.select();
+    };
+    expose({
+      focus,
+      blur,
+      input: computed(() => inputRef.value?.input),
+      setSelectionRange,
+      select,
+      getSelectionStart: () => inputRef.value?.getSelectionStart(),
+      getSelectionEnd: () => inputRef.value?.getSelectionEnd(),
+      getScrollTop: () => inputRef.value?.getScrollTop(),
+    });
+    const handleMousedown = (e: MouseEvent) => {
+      emit('mousedown', e);
+    };
+    const handlePaste = (e: ClipboardEvent) => {
+      emit('paste', e);
+    };
+    const styleString = computed(() => {
+      return props.style && typeof props.style !== 'string'
+        ? styleObjectToString(props.style)
+        : props.style;
+    });
+    return () => {
+      const { style, lazy, ...restProps } = props;
+      return (
+        <BaseInputInner
+          {...restProps}
+          {...attrs}
+          style={styleString.value}
+          onInput={handleInput}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          ref={inputRef}
+          value={renderValue.value}
+          onCompositionstart={onCompositionstart}
+          onCompositionend={onCompositionend}
+          onKeyup={handleKeyUp}
+          onKeydown={handleKeyDown}
+          onPaste={handlePaste}
+          onMousedown={handleMousedown}
+        />
+      );
+    };
+  },
+});
+
+export default BaseInput;

components/_util/BaseInputInner.tsx

@@ -0,0 +1,96 @@
+import type { PropType } from 'vue';
+import { defineComponent, shallowRef } from 'vue';
+import PropTypes from './vue-types';
+
+export interface BaseInputInnerExpose {
+  focus: () => void;
+  blur: () => void;
+  input: HTMLInputElement | HTMLTextAreaElement | null;
+  setSelectionRange: (
+    start: number,
+    end: number,
+    direction?: 'forward' | 'backward' | 'none',
+  ) => void;
+  select: () => void;
+  getSelectionStart: () => number | null;
+  getSelectionEnd: () => number | null;
+  getScrollTop: () => number | null;
+  setScrollTop: (scrollTop: number) => void;
+}
+const BaseInputInner = defineComponent({
+  compatConfig: { MODE: 3 },
+  // inheritAttrs: false,
+  props: {
+    disabled: PropTypes.looseBool,
+    type: PropTypes.string,
+    value: PropTypes.any,
+    tag: {
+      type: String as PropType<'input' | 'textarea'>,
+      default: 'input',
+    },
+    size: PropTypes.string,
+    onChange: Function as PropType<(e: Event) => void>,
+    onInput: Function as PropType<(e: Event) => void>,
+    onBlur: Function as PropType<(e: Event) => void>,
+    onFocus: Function as PropType<(e: Event) => void>,
+    onKeydown: Function as PropType<(e: Event) => void>,
+    onCompositionstart: Function as PropType<(e: Event) => void>,
+    onCompositionend: Function as PropType<(e: Event) => void>,
+    onKeyup: Function as PropType<(e: Event) => void>,
+    onPaste: Function as PropType<(e: Event) => void>,
+    onMousedown: Function as PropType<(e: Event) => void>,
+  },
+  emits: [
+    'change',
+    'input',
+    'blur',
+    'keydown',
+    'focus',
+    'compositionstart',
+    'compositionend',
+    'keyup',
+    'paste',
+    'mousedown',
+  ],
+  setup(props, { expose }) {
+    const inputRef = shallowRef(null);
+
+    const focus = () => {
+      if (inputRef.value) {
+        inputRef.value.focus();
+      }
+    };
+    const blur = () => {
+      if (inputRef.value) {
+        inputRef.value.blur();
+      }
+    };
+    const setSelectionRange = (
+      start: number,
+      end: number,
+      direction?: 'forward' | 'backward' | 'none',
+    ) => {
+      inputRef.value?.setSelectionRange(start, end, direction);
+    };
+
+    const select = () => {
+      inputRef.value?.select();
+    };
+    expose({
+      focus,
+      blur,
+      input: inputRef,
+      setSelectionRange,
+      select,
+      getSelectionStart: () => inputRef.value?.selectionStart,
+      getSelectionEnd: () => inputRef.value?.selectionEnd,
+      getScrollTop: () => inputRef.value?.scrollTop,
+    });
+    return () => {
+      const { tag: Tag, value, ...restProps } = props;
+      return <Tag {...restProps} ref={inputRef} value={value} />;
+    };
+  },
+});
+
+export default BaseInputInner;

components/_util/BaseMixin.js

@@ -1,43 +0,0 @@
-import { getOptionProps } from './props-util';
-
-export default {
-  methods: {
-    setState(state = {}, callback) {
-      let newState = typeof state === 'function' ? state(this.$data, this.$props) : state;
-      if (this.getDerivedStateFromProps) {
-        const s = this.getDerivedStateFromProps(getOptionProps(this), {
-          ...this.$data,
-          ...newState,
-        });
-        if (s === null) {
-          return;
-        } else {
-          newState = { ...newState, ...(s || {}) };
-        }
-      }
-      Object.assign(this.$data, newState);
-      if (this._.isMounted) {
-        this.$forceUpdate();
-      }
-      this.$nextTick(() => {
-        callback && callback();
-      });
-    },
-    __emit() {
-      // 直接调用事件，底层组件不需要vueTool记录events
-      const args = [].slice.call(arguments, 0);
-      let eventName = args[0];
-      eventName = `on${eventName[0].toUpperCase()}${eventName.substring(1)}`;
-      const event = this.$props[eventName] || this.$attrs[eventName];
-      if (args.length && event) {
-        if (Array.isArray(event)) {
-          for (let i = 0, l = event.length; i < l; i++) {
-            event[i](...args.slice(1));
-          }
-        } else {
-          event(...args.slice(1));
-        }
-      }
-    },
-  },
-};

components/_util/BaseMixin.ts

@@ -0,0 +1,45 @@
+import { nextTick } from 'vue';
+import { getOptionProps } from './props-util';
+
+export default {
+  methods: {
+    setState(state = {}, callback: () => any) {
+      let newState = typeof state === 'function' ? state(this.$data, this.$props) : state;
+      if (this.getDerivedStateFromProps) {
+        const s = this.getDerivedStateFromProps(getOptionProps(this), {
+          ...this.$data,
+          ...newState,
+        });
+        if (s === null) {
+          return;
+        } else {
+          newState = { ...newState, ...(s || {}) };
+        }
+      }
+      Object.assign(this.$data, newState);
+      if (this._.isMounted) {
+        this.$forceUpdate();
+      }
+      nextTick(() => {
+        callback && callback();
+      });
+    },
+    __emit() {
+      // 直接调用事件，底层组件不需要vueTool记录events
+      // eslint-disable-next-line prefer-rest-params
+      const args = [].slice.call(arguments, 0);
+      let eventName = args[0];
+      eventName = `on${eventName[0].toUpperCase()}${eventName.substring(1)}`;
+      const event = this.$props[eventName] || this.$attrs[eventName];
+      if (args.length && event) {
+        if (Array.isArray(event)) {
+          for (let i = 0, l = event.length; i < l; i++) {
+            event[i](...args.slice(1));
+          }
+        } else {
+          event(...args.slice(1));
+        }
+      }
+    },
+  },
+};

components/_util/BaseMixin2.js

@@ -1,43 +0,0 @@
-import { getOptionProps } from './props-util';
-
-export default {
-  methods: {
-    setState(state = {}, callback) {
-      let newState = typeof state === 'function' ? state(this, this.$props) : state;
-      if (this.getDerivedStateFromProps) {
-        const s = this.getDerivedStateFromProps(getOptionProps(this), {
-          ...this,
-          ...newState,
-        });
-        if (s === null) {
-          return;
-        } else {
-          newState = { ...newState, ...(s || {}) };
-        }
-      }
-      Object.assign(this, newState);
-      if (this._.isMounted) {
-        this.$forceUpdate();
-      }
-      this.$nextTick(() => {
-        callback && callback();
-      });
-    },
-    __emit() {
-      // 直接调用事件，底层组件不需要vueTool记录events
-      const args = [].slice.call(arguments, 0);
-      let eventName = args[0];
-      eventName = `on${eventName[0].toUpperCase()}${eventName.substring(1)}`;
-      const event = this.$props[eventName] || this.$attrs[eventName];
-      if (args.length && event) {
-        if (Array.isArray(event)) {
-          for (let i = 0, l = event.length; i < l; i++) {
-            event[i](...args.slice(1));
-          }
-        } else {
-          event(...args.slice(1));
-        }
-      }
-    },
-  },
-};

components/_util/ContainerRender.jsx

@@ -1,98 +0,0 @@
-import PropTypes from './vue-types';
-
-export default {
-  props: {
-    autoMount: PropTypes.bool.def(true),
-    autoDestroy: PropTypes.bool.def(true),
-    visible: PropTypes.bool,
-    forceRender: PropTypes.bool.def(false),
-    parent: PropTypes.any,
-    getComponent: PropTypes.func.isRequired,
-    getContainer: PropTypes.func.isRequired,
-    children: PropTypes.func.isRequired,
-  },
-
-  mounted() {
-    if (this.autoMount) {
-      this.renderComponent();
-    }
-  },
-
-  updated() {
-    if (this.autoMount) {
-      this.renderComponent();
-    }
-  },
-
-  beforeUnmount() {
-    if (this.autoDestroy) {
-      this.removeContainer();
-    }
-  },
-  methods: {
-    removeContainer() {
-      if (this.container) {
-        this._component && this._component.$destroy();
-        this.container.parentNode.removeChild(this.container);
-        this.container = null;
-        this._component = null;
-      }
-    },
-
-    renderComponent(props = {}, ready) {
-      const { visible, forceRender, getContainer, parent } = this;
-      const self = this;
-      if (visible || parent._component || parent.$refs._component || forceRender) {
-        let el = this.componentEl;
-        if (!this.container) {
-          this.container = getContainer();
-          el = document.createElement('div');
-          this.componentEl = el;
-          this.container.appendChild(el);
-        }
-        // self.getComponent 不要放在 render 中，会因为响应式数据问题导致，多次触发 render
-        const com = { component: self.getComponent(props) };
-        if (!this._component) {
-          this._component = new this.$root.constructor({
-            el,
-            parent: self,
-            data: {
-              _com: com,
-            },
-            mounted() {
-              this.$nextTick(() => {
-                if (ready) {
-                  ready.call(self);
-                }
-              });
-            },
-            updated() {
-              this.$nextTick(() => {
-                if (ready) {
-                  ready.call(self);
-                }
-              });
-            },
-            methods: {
-              setComponent(_com) {
-                this.$data._com = _com;
-              },
-            },
-            render() {
-              return this.$data._com.component;
-            },
-          });
-        } else {
-          this._component.setComponent(com);
-        }
-      }
-    },
-  },
-
-  render() {
-    return this.children({
-      renderComponent: this.renderComponent,
-      removeContainer: this.removeContainer,
-    });
-  },
-};

components/_util/EventInterface.ts

@@ -0,0 +1,19 @@
+export type FocusEventHandler = (e: FocusEvent) => void;
+export type MouseEventHandler = (e: MouseEvent) => void;
+export type KeyboardEventHandler = (e: KeyboardEvent) => void;
+export type CompositionEventHandler = (e: CompositionEvent) => void;
+export type ClipboardEventHandler = (e: ClipboardEvent) => void;
+export type ChangeEventHandler = (e: ChangeEvent) => void;
+export type WheelEventHandler = (e: WheelEvent) => void;
+export type ChangeEvent = Event & {
+  target: {
+    value?: string | undefined;
+  };
+};
+export type CheckboxChangeEvent = Event & {
+  target: {
+    checked?: boolean;
+  };
+};
+
+export type EventHandler = (...args: any[]) => void;

components/_util/FormDecoratorDirective.js

@@ -1,10 +0,0 @@
-export function antDecorator(Vue) {
-  return Vue.directive('decorator', {});
-}
-
-export default {
-  // just for tag
-  install: Vue => {
-    antDecorator(Vue);
-  },
-};

components/_util/KeyCode.js

@@ -1,521 +0,0 @@
-/**
- * @ignore
- * some key-codes definition and utils from closure-library
- * @author yiminghe@gmail.com
- */
-
-const KeyCode = {
-  /**
-   * MAC_ENTER
-   */
-  MAC_ENTER: 3,
-  /**
-   * BACKSPACE
-   */
-  BACKSPACE: 8,
-  /**
-   * TAB
-   */
-  TAB: 9,
-  /**
-   * NUMLOCK on FF/Safari Mac
-   */
-  NUM_CENTER: 12, // NUMLOCK on FF/Safari Mac
-  /**
-   * ENTER
-   */
-  ENTER: 13,
-  /**
-   * SHIFT
-   */
-  SHIFT: 16,
-  /**
-   * CTRL
-   */
-  CTRL: 17,
-  /**
-   * ALT
-   */
-  ALT: 18,
-  /**
-   * PAUSE
-   */
-  PAUSE: 19,
-  /**
-   * CAPS_LOCK
-   */
-  CAPS_LOCK: 20,
-  /**
-   * ESC
-   */
-  ESC: 27,
-  /**
-   * SPACE
-   */
-  SPACE: 32,
-  /**
-   * PAGE_UP
-   */
-  PAGE_UP: 33, // also NUM_NORTH_EAST
-  /**
-   * PAGE_DOWN
-   */
-  PAGE_DOWN: 34, // also NUM_SOUTH_EAST
-  /**
-   * END
-   */
-  END: 35, // also NUM_SOUTH_WEST
-  /**
-   * HOME
-   */
-  HOME: 36, // also NUM_NORTH_WEST
-  /**
-   * LEFT
-   */
-  LEFT: 37, // also NUM_WEST
-  /**
-   * UP
-   */
-  UP: 38, // also NUM_NORTH
-  /**
-   * RIGHT
-   */
-  RIGHT: 39, // also NUM_EAST
-  /**
-   * DOWN
-   */
-  DOWN: 40, // also NUM_SOUTH
-  /**
-   * PRINT_SCREEN
-   */
-  PRINT_SCREEN: 44,
-  /**
-   * INSERT
-   */
-  INSERT: 45, // also NUM_INSERT
-  /**
-   * DELETE
-   */
-  DELETE: 46, // also NUM_DELETE
-  /**
-   * ZERO
-   */
-  ZERO: 48,
-  /**
-   * ONE
-   */
-  ONE: 49,
-  /**
-   * TWO
-   */
-  TWO: 50,
-  /**
-   * THREE
-   */
-  THREE: 51,
-  /**
-   * FOUR
-   */
-  FOUR: 52,
-  /**
-   * FIVE
-   */
-  FIVE: 53,
-  /**
-   * SIX
-   */
-  SIX: 54,
-  /**
-   * SEVEN
-   */
-  SEVEN: 55,
-  /**
-   * EIGHT
-   */
-  EIGHT: 56,
-  /**
-   * NINE
-   */
-  NINE: 57,
-  /**
-   * QUESTION_MARK
-   */
-  QUESTION_MARK: 63, // needs localization
-  /**
-   * A
-   */
-  A: 65,
-  /**
-   * B
-   */
-  B: 66,
-  /**
-   * C
-   */
-  C: 67,
-  /**
-   * D
-   */
-  D: 68,
-  /**
-   * E
-   */
-  E: 69,
-  /**
-   * F
-   */
-  F: 70,
-  /**
-   * G
-   */
-  G: 71,
-  /**
-   * H
-   */
-  H: 72,
-  /**
-   * I
-   */
-  I: 73,
-  /**
-   * J
-   */
-  J: 74,
-  /**
-   * K
-   */
-  K: 75,
-  /**
-   * L
-   */
-  L: 76,
-  /**
-   * M
-   */
-  M: 77,
-  /**
-   * N
-   */
-  N: 78,
-  /**
-   * O
-   */
-  O: 79,
-  /**
-   * P
-   */
-  P: 80,
-  /**
-   * Q
-   */
-  Q: 81,
-  /**
-   * R
-   */
-  R: 82,
-  /**
-   * S
-   */
-  S: 83,
-  /**
-   * T
-   */
-  T: 84,
-  /**
-   * U
-   */
-  U: 85,
-  /**
-   * V
-   */
-  V: 86,
-  /**
-   * W
-   */
-  W: 87,
-  /**
-   * X
-   */
-  X: 88,
-  /**
-   * Y
-   */
-  Y: 89,
-  /**
-   * Z
-   */
-  Z: 90,
-  /**
-   * META
-   */
-  META: 91, // WIN_KEY_LEFT
-  /**
-   * WIN_KEY_RIGHT
-   */
-  WIN_KEY_RIGHT: 92,
-  /**
-   * CONTEXT_MENU
-   */
-  CONTEXT_MENU: 93,
-  /**
-   * NUM_ZERO
-   */
-  NUM_ZERO: 96,
-  /**
-   * NUM_ONE
-   */
-  NUM_ONE: 97,
-  /**
-   * NUM_TWO
-   */
-  NUM_TWO: 98,
-  /**
-   * NUM_THREE
-   */
-  NUM_THREE: 99,
-  /**
-   * NUM_FOUR
-   */
-  NUM_FOUR: 100,
-  /**
-   * NUM_FIVE
-   */
-  NUM_FIVE: 101,
-  /**
-   * NUM_SIX
-   */
-  NUM_SIX: 102,
-  /**
-   * NUM_SEVEN
-   */
-  NUM_SEVEN: 103,
-  /**
-   * NUM_EIGHT
-   */
-  NUM_EIGHT: 104,
-  /**
-   * NUM_NINE
-   */
-  NUM_NINE: 105,
-  /**
-   * NUM_MULTIPLY
-   */
-  NUM_MULTIPLY: 106,
-  /**
-   * NUM_PLUS
-   */
-  NUM_PLUS: 107,
-  /**
-   * NUM_MINUS
-   */
-  NUM_MINUS: 109,
-  /**
-   * NUM_PERIOD
-   */
-  NUM_PERIOD: 110,
-  /**
-   * NUM_DIVISION
-   */
-  NUM_DIVISION: 111,
-  /**
-   * F1
-   */
-  F1: 112,
-  /**
-   * F2
-   */
-  F2: 113,
-  /**
-   * F3
-   */
-  F3: 114,
-  /**
-   * F4
-   */
-  F4: 115,
-  /**
-   * F5
-   */
-  F5: 116,
-  /**
-   * F6
-   */
-  F6: 117,
-  /**
-   * F7
-   */
-  F7: 118,
-  /**
-   * F8
-   */
-  F8: 119,
-  /**
-   * F9
-   */
-  F9: 120,
-  /**
-   * F10
-   */
-  F10: 121,
-  /**
-   * F11
-   */
-  F11: 122,
-  /**
-   * F12
-   */
-  F12: 123,
-  /**
-   * NUMLOCK
-   */
-  NUMLOCK: 144,
-  /**
-   * SEMICOLON
-   */
-  SEMICOLON: 186, // needs localization
-  /**
-   * DASH
-   */
-  DASH: 189, // needs localization
-  /**
-   * EQUALS
-   */
-  EQUALS: 187, // needs localization
-  /**
-   * COMMA
-   */
-  COMMA: 188, // needs localization
-  /**
-   * PERIOD
-   */
-  PERIOD: 190, // needs localization
-  /**
-   * SLASH
-   */
-  SLASH: 191, // needs localization
-  /**
-   * APOSTROPHE
-   */
-  APOSTROPHE: 192, // needs localization
-  /**
-   * SINGLE_QUOTE
-   */
-  SINGLE_QUOTE: 222, // needs localization
-  /**
-   * OPEN_SQUARE_BRACKET
-   */
-  OPEN_SQUARE_BRACKET: 219, // needs localization
-  /**
-   * BACKSLASH
-   */
-  BACKSLASH: 220, // needs localization
-  /**
-   * CLOSE_SQUARE_BRACKET
-   */
-  CLOSE_SQUARE_BRACKET: 221, // needs localization
-  /**
-   * WIN_KEY
-   */
-  WIN_KEY: 224,
-  /**
-   * MAC_FF_META
-   */
-  MAC_FF_META: 224, // Firefox (Gecko) fires this for the meta key instead of 91
-  /**
-   * WIN_IME
-   */
-  WIN_IME: 229,
-};
-
-/*
- whether text and modified key is entered at the same time.
- */
-KeyCode.isTextModifyingKeyEvent = function isTextModifyingKeyEvent(e) {
-  const keyCode = e.keyCode;
-  if (
-    (e.altKey && !e.ctrlKey) ||
-    e.metaKey ||
-    // Function keys don't generate text
-    (keyCode >= KeyCode.F1 && keyCode <= KeyCode.F12)
-  ) {
-    return false;
-  }
-
-  // The following keys are quite harmless, even in combination with
-  // CTRL, ALT or SHIFT.
-  switch (keyCode) {
-    case KeyCode.ALT:
-    case KeyCode.CAPS_LOCK:
-    case KeyCode.CONTEXT_MENU:
-    case KeyCode.CTRL:
-    case KeyCode.DOWN:
-    case KeyCode.END:
-    case KeyCode.ESC:
-    case KeyCode.HOME:
-    case KeyCode.INSERT:
-    case KeyCode.LEFT:
-    case KeyCode.MAC_FF_META:
-    case KeyCode.META:
-    case KeyCode.NUMLOCK:
-    case KeyCode.NUM_CENTER:
-    case KeyCode.PAGE_DOWN:
-    case KeyCode.PAGE_UP:
-    case KeyCode.PAUSE:
-    case KeyCode.PRINT_SCREEN:
-    case KeyCode.RIGHT:
-    case KeyCode.SHIFT:
-    case KeyCode.UP:
-    case KeyCode.WIN_KEY:
-    case KeyCode.WIN_KEY_RIGHT:
-      return false;
-    default:
-      return true;
-  }
-};
-
-/*
- whether character is entered.
- */
-KeyCode.isCharacterKey = function isCharacterKey(keyCode) {
-  if (keyCode >= KeyCode.ZERO && keyCode <= KeyCode.NINE) {
-    return true;
-  }
-
-  if (keyCode >= KeyCode.NUM_ZERO && keyCode <= KeyCode.NUM_MULTIPLY) {
-    return true;
-  }
-
-  if (keyCode >= KeyCode.A && keyCode <= KeyCode.Z) {
-    return true;
-  }
-
-  // Safari sends zero key code for non-latin characters.
-  if (window.navigation.userAgent.indexOf('WebKit') !== -1 && keyCode === 0) {
-    return true;
-  }
-
-  switch (keyCode) {
-    case KeyCode.SPACE:
-    case KeyCode.QUESTION_MARK:
-    case KeyCode.NUM_PLUS:
-    case KeyCode.NUM_MINUS:
-    case KeyCode.NUM_PERIOD:
-    case KeyCode.NUM_DIVISION:
-    case KeyCode.SEMICOLON:
-    case KeyCode.DASH:
-    case KeyCode.EQUALS:
-    case KeyCode.COMMA:
-    case KeyCode.PERIOD:
-    case KeyCode.SLASH:
-    case KeyCode.APOSTROPHE:
-    case KeyCode.SINGLE_QUOTE:
-    case KeyCode.OPEN_SQUARE_BRACKET:
-    case KeyCode.BACKSLASH:
-    case KeyCode.CLOSE_SQUARE_BRACKET:
-      return true;
-    default:
-      return false;
-  }
-};
-
-export default KeyCode;

components/_util/KeyCode.ts

@@ -0,0 +1,522 @@
+/**
+ * @ignore
+ * some key-codes definition and utils from closure-library
+ * @author yiminghe@gmail.com
+ */
+
+const KeyCode = {
+  /**
+   * MAC_ENTER
+   */
+  MAC_ENTER: 3,
+  /**
+   * BACKSPACE
+   */
+  BACKSPACE: 8,
+  /**
+   * TAB
+   */
+  TAB: 9,
+  /**
+   * NUMLOCK on FF/Safari Mac
+   */
+  NUM_CENTER: 12, // NUMLOCK on FF/Safari Mac
+  /**
+   * ENTER
+   */
+  ENTER: 13,
+  /**
+   * SHIFT
+   */
+  SHIFT: 16,
+  /**
+   * CTRL
+   */
+  CTRL: 17,
+  /**
+   * ALT
+   */
+  ALT: 18,
+  /**
+   * PAUSE
+   */
+  PAUSE: 19,
+  /**
+   * CAPS_LOCK
+   */
+  CAPS_LOCK: 20,
+  /**
+   * ESC
+   */
+  ESC: 27,
+  /**
+   * SPACE
+   */
+  SPACE: 32,
+  /**
+   * PAGE_UP
+   */
+  PAGE_UP: 33, // also NUM_NORTH_EAST
+  /**
+   * PAGE_DOWN
+   */
+  PAGE_DOWN: 34, // also NUM_SOUTH_EAST
+  /**
+   * END
+   */
+  END: 35, // also NUM_SOUTH_WEST
+  /**
+   * HOME
+   */
+  HOME: 36, // also NUM_NORTH_WEST
+  /**
+   * LEFT
+   */
+  LEFT: 37, // also NUM_WEST
+  /**
+   * UP
+   */
+  UP: 38, // also NUM_NORTH
+  /**
+   * RIGHT
+   */
+  RIGHT: 39, // also NUM_EAST
+  /**
+   * DOWN
+   */
+  DOWN: 40, // also NUM_SOUTH
+  /**
+   * PRINT_SCREEN
+   */
+  PRINT_SCREEN: 44,
+  /**
+   * INSERT
+   */
+  INSERT: 45, // also NUM_INSERT
+  /**
+   * DELETE
+   */
+  DELETE: 46, // also NUM_DELETE
+  /**
+   * ZERO
+   */
+  ZERO: 48,
+  /**
+   * ONE
+   */
+  ONE: 49,
+  /**
+   * TWO
+   */
+  TWO: 50,
+  /**
+   * THREE
+   */
+  THREE: 51,
+  /**
+   * FOUR
+   */
+  FOUR: 52,
+  /**
+   * FIVE
+   */
+  FIVE: 53,
+  /**
+   * SIX
+   */
+  SIX: 54,
+  /**
+   * SEVEN
+   */
+  SEVEN: 55,
+  /**
+   * EIGHT
+   */
+  EIGHT: 56,
+  /**
+   * NINE
+   */
+  NINE: 57,
+  /**
+   * QUESTION_MARK
+   */
+  QUESTION_MARK: 63, // needs localization
+  /**
+   * A
+   */
+  A: 65,
+  /**
+   * B
+   */
+  B: 66,
+  /**
+   * C
+   */
+  C: 67,
+  /**
+   * D
+   */
+  D: 68,
+  /**
+   * E
+   */
+  E: 69,
+  /**
+   * F
+   */
+  F: 70,
+  /**
+   * G
+   */
+  G: 71,
+  /**
+   * H
+   */
+  H: 72,
+  /**
+   * I
+   */
+  I: 73,
+  /**
+   * J
+   */
+  J: 74,
+  /**
+   * K
+   */
+  K: 75,
+  /**
+   * L
+   */
+  L: 76,
+  /**
+   * M
+   */
+  M: 77,
+  /**
+   * N
+   */
+  N: 78,
+  /**
+   * O
+   */
+  O: 79,
+  /**
+   * P
+   */
+  P: 80,
+  /**
+   * Q
+   */
+  Q: 81,
+  /**
+   * R
+   */
+  R: 82,
+  /**
+   * S
+   */
+  S: 83,
+  /**
+   * T
+   */
+  T: 84,
+  /**
+   * U
+   */
+  U: 85,
+  /**
+   * V
+   */
+  V: 86,
+  /**
+   * W
+   */
+  W: 87,
+  /**
+   * X
+   */
+  X: 88,
+  /**
+   * Y
+   */
+  Y: 89,
+  /**
+   * Z
+   */
+  Z: 90,
+  /**
+   * META
+   */
+  META: 91, // WIN_KEY_LEFT
+  /**
+   * WIN_KEY_RIGHT
+   */
+  WIN_KEY_RIGHT: 92,
+  /**
+   * CONTEXT_MENU
+   */
+  CONTEXT_MENU: 93,
+  /**
+   * NUM_ZERO
+   */
+  NUM_ZERO: 96,
+  /**
+   * NUM_ONE
+   */
+  NUM_ONE: 97,
+  /**
+   * NUM_TWO
+   */
+  NUM_TWO: 98,
+  /**
+   * NUM_THREE
+   */
+  NUM_THREE: 99,
+  /**
+   * NUM_FOUR
+   */
+  NUM_FOUR: 100,
+  /**
+   * NUM_FIVE
+   */
+  NUM_FIVE: 101,
+  /**
+   * NUM_SIX
+   */
+  NUM_SIX: 102,
+  /**
+   * NUM_SEVEN
+   */
+  NUM_SEVEN: 103,
+  /**
+   * NUM_EIGHT
+   */
+  NUM_EIGHT: 104,
+  /**
+   * NUM_NINE
+   */
+  NUM_NINE: 105,
+  /**
+   * NUM_MULTIPLY
+   */
+  NUM_MULTIPLY: 106,
+  /**
+   * NUM_PLUS
+   */
+  NUM_PLUS: 107,
+  /**
+   * NUM_MINUS
+   */
+  NUM_MINUS: 109,
+  /**
+   * NUM_PERIOD
+   */
+  NUM_PERIOD: 110,
+  /**
+   * NUM_DIVISION
+   */
+  NUM_DIVISION: 111,
+  /**
+   * F1
+   */
+  F1: 112,
+  /**
+   * F2
+   */
+  F2: 113,
+  /**
+   * F3
+   */
+  F3: 114,
+  /**
+   * F4
+   */
+  F4: 115,
+  /**
+   * F5
+   */
+  F5: 116,
+  /**
+   * F6
+   */
+  F6: 117,
+  /**
+   * F7
+   */
+  F7: 118,
+  /**
+   * F8
+   */
+  F8: 119,
+  /**
+   * F9
+   */
+  F9: 120,
+  /**
+   * F10
+   */
+  F10: 121,
+  /**
+   * F11
+   */
+  F11: 122,
+  /**
+   * F12
+   */
+  F12: 123,
+  /**
+   * NUMLOCK
+   */
+  NUMLOCK: 144,
+  /**
+   * SEMICOLON
+   */
+  SEMICOLON: 186, // needs localization
+  /**
+   * DASH
+   */
+  DASH: 189, // needs localization
+  /**
+   * EQUALS
+   */
+  EQUALS: 187, // needs localization
+  /**
+   * COMMA
+   */
+  COMMA: 188, // needs localization
+  /**
+   * PERIOD
+   */
+  PERIOD: 190, // needs localization
+  /**
+   * SLASH
+   */
+  SLASH: 191, // needs localization
+  /**
+   * APOSTROPHE
+   */
+  APOSTROPHE: 192, // needs localization
+  /**
+   * SINGLE_QUOTE
+   */
+  SINGLE_QUOTE: 222, // needs localization
+  /**
+   * OPEN_SQUARE_BRACKET
+   */
+  OPEN_SQUARE_BRACKET: 219, // needs localization
+  /**
+   * BACKSLASH
+   */
+  BACKSLASH: 220, // needs localization
+  /**
+   * CLOSE_SQUARE_BRACKET
+   */
+  CLOSE_SQUARE_BRACKET: 221, // needs localization
+  /**
+   * WIN_KEY
+   */
+  WIN_KEY: 224,
+  /**
+   * MAC_FF_META
+   */
+  MAC_FF_META: 224, // Firefox (Gecko) fires this for the meta key instead of 91
+  /**
+   * WIN_IME
+   */
+  WIN_IME: 229,
+
+  // ======================== Function ========================
+  /**
+   * whether text and modified key is entered at the same time.
+   */
+  isTextModifyingKeyEvent: function isTextModifyingKeyEvent(e: KeyboardEvent) {
+    const { keyCode } = e;
+    if (
+      (e.altKey && !e.ctrlKey) ||
+      e.metaKey ||
+      // Function keys don't generate text
+      (keyCode >= KeyCode.F1 && keyCode <= KeyCode.F12)
+    ) {
+      return false;
+    }
+
+    // The following keys are quite harmless, even in combination with
+    // CTRL, ALT or SHIFT.
+    switch (keyCode) {
+      case KeyCode.ALT:
+      case KeyCode.CAPS_LOCK:
+      case KeyCode.CONTEXT_MENU:
+      case KeyCode.CTRL:
+      case KeyCode.DOWN:
+      case KeyCode.END:
+      case KeyCode.ESC:
+      case KeyCode.HOME:
+      case KeyCode.INSERT:
+      case KeyCode.LEFT:
+      case KeyCode.MAC_FF_META:
+      case KeyCode.META:
+      case KeyCode.NUMLOCK:
+      case KeyCode.NUM_CENTER:
+      case KeyCode.PAGE_DOWN:
+      case KeyCode.PAGE_UP:
+      case KeyCode.PAUSE:
+      case KeyCode.PRINT_SCREEN:
+      case KeyCode.RIGHT:
+      case KeyCode.SHIFT:
+      case KeyCode.UP:
+      case KeyCode.WIN_KEY:
+      case KeyCode.WIN_KEY_RIGHT:
+        return false;
+      default:
+        return true;
+    }
+  },
+
+  /**
+   * whether character is entered.
+   */
+  isCharacterKey: function isCharacterKey(keyCode: number) {
+    if (keyCode >= KeyCode.ZERO && keyCode <= KeyCode.NINE) {
+      return true;
+    }
+
+    if (keyCode >= KeyCode.NUM_ZERO && keyCode <= KeyCode.NUM_MULTIPLY) {
+      return true;
+    }
+
+    if (keyCode >= KeyCode.A && keyCode <= KeyCode.Z) {
+      return true;
+    }
+
+    // Safari sends zero key code for non-latin characters.
+    if (window.navigator.userAgent.indexOf('WebKit') !== -1 && keyCode === 0) {
+      return true;
+    }
+
+    switch (keyCode) {
+      case KeyCode.SPACE:
+      case KeyCode.QUESTION_MARK:
+      case KeyCode.NUM_PLUS:
+      case KeyCode.NUM_MINUS:
+      case KeyCode.NUM_PERIOD:
+      case KeyCode.NUM_DIVISION:
+      case KeyCode.SEMICOLON:
+      case KeyCode.DASH:
+      case KeyCode.EQUALS:
+      case KeyCode.COMMA:
+      case KeyCode.PERIOD:
+      case KeyCode.SLASH:
+      case KeyCode.APOSTROPHE:
+      case KeyCode.SINGLE_QUOTE:
+      case KeyCode.OPEN_SQUARE_BRACKET:
+      case KeyCode.BACKSLASH:
+      case KeyCode.CLOSE_SQUARE_BRACKET:
+        return true;
+      default:
+        return false;
+    }
+  },
+};
+
+export default KeyCode;

components/_util/Portal.js

@@ -1,48 +0,0 @@
-import PropTypes from './vue-types';
-import { Teleport } from 'vue';
-
-export default {
-  name: 'Portal',
-  props: {
-    getContainer: PropTypes.func.isRequired,
-    children: PropTypes.any.isRequired,
-    didUpdate: PropTypes.func,
-  },
-  data() {
-    this._container = null;
-    return {};
-  },
-  mounted() {
-    this.createContainer();
-  },
-  updated() {
-    const { didUpdate } = this.$props;
-    if (didUpdate) {
-      this.$nextTick(() => {
-        didUpdate(this.$props);
-      });
-    }
-  },
-
-  beforeUnmount() {
-    this.removeContainer();
-  },
-  methods: {
-    createContainer() {
-      this._container = this.$props.getContainer();
-      this.$forceUpdate();
-    },
-    removeContainer() {
-      if (this._container && this._container.parentNode) {
-        this._container.parentNode.removeChild(this._container);
-      }
-    },
-  },
-
-  render() {
-    if (this._container) {
-      return <Teleport to={this._container}>{this.$props.children}</Teleport>;
-    }
-    return null;
-  },
-};

components/_util/Portal.tsx

@@ -0,0 +1,72 @@
+import PropTypes from './vue-types';
+import {
+  defineComponent,
+  nextTick,
+  onBeforeMount,
+  onMounted,
+  onUpdated,
+  Teleport,
+  watch,
+} from 'vue';
+import { useInjectPortal } from '../vc-trigger/context';
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'Portal',
+  inheritAttrs: false,
+  props: {
+    getContainer: PropTypes.func.isRequired,
+    didUpdate: Function,
+  },
+  setup(props, { slots }) {
+    let isSSR = true;
+    // getContainer 不会改变，不用响应式
+    let container: HTMLElement;
+    const { shouldRender } = useInjectPortal();
+
+    function setContainer() {
+      if (shouldRender.value) {
+        container = props.getContainer();
+      }
+    }
+
+    onBeforeMount(() => {
+      isSSR = false;
+      // drawer
+      setContainer();
+    });
+    onMounted(() => {
+      if (container) return;
+      // https://github.com/vueComponent/ant-design-vue/issues/6937
+      setContainer();
+    });
+
+    const stopWatch = watch(shouldRender, () => {
+      if (shouldRender.value && !container) {
+        container = props.getContainer();
+      }
+      if (container) {
+        stopWatch();
+      }
+    });
+    onUpdated(() => {
+      nextTick(() => {
+        if (shouldRender.value) {
+          props.didUpdate?.(props);
+        }
+      });
+    });
+    // onBeforeUnmount(() => {
+    //   if (container && container.parentNode) {
+    //     container.parentNode.removeChild(container);
+    //   }
+    // });
+    return () => {
+      if (!shouldRender.value) return null;
+      if (isSSR) {
+        return slots.default?.();
+      }
+      return container ? <Teleport to={container} v-slots={slots}></Teleport> : null;
+    };
+  },
+});

components/_util/PortalWrapper.js

@@ -1,150 +0,0 @@
-import PropTypes from './vue-types';
-import switchScrollingEffect from './switchScrollingEffect';
-import setStyle from './setStyle';
-import Portal from './Portal';
-
-let openCount = 0;
-const windowIsUndefined = !(
-  typeof window !== 'undefined' &&
-  window.document &&
-  window.document.createElement
-);
-// https://github.com/ant-design/ant-design/issues/19340
-// https://github.com/ant-design/ant-design/issues/19332
-let cacheOverflow = {};
-
-export default {
-  name: 'PortalWrapper',
-  props: {
-    wrapperClassName: PropTypes.string,
-    forceRender: PropTypes.bool,
-    getContainer: PropTypes.any,
-    children: PropTypes.func,
-    visible: PropTypes.bool,
-  },
-  data() {
-    this._component = null;
-    const { visible } = this.$props;
-    openCount = visible ? openCount + 1 : openCount;
-    return {};
-  },
-  updated() {
-    this.setWrapperClassName();
-  },
-  watch: {
-    visible(val) {
-      openCount = val ? openCount + 1 : openCount - 1;
-    },
-    getContainer(getContainer, prevGetContainer) {
-      const getContainerIsFunc =
-        typeof getContainer === 'function' && typeof prevGetContainer === 'function';
-      if (
-        getContainerIsFunc
-          ? getContainer.toString() !== prevGetContainer.toString()
-          : getContainer !== prevGetContainer
-      ) {
-        this.removeCurrentContainer(false);
-      }
-    },
-  },
-  beforeUnmount() {
-    const { visible } = this.$props;
-    // 离开时不会 render， 导到离开时数值不变，改用 func 。。
-    openCount = visible && openCount ? openCount - 1 : openCount;
-    this.removeCurrentContainer(visible);
-  },
-  methods: {
-    getParent() {
-      const { getContainer } = this.$props;
-      if (getContainer) {
-        if (typeof getContainer === 'string') {
-          return document.querySelectorAll(getContainer)[0];
-        }
-        if (typeof getContainer === 'function') {
-          return getContainer();
-        }
-        if (typeof getContainer === 'object' && getContainer instanceof window.HTMLElement) {
-          return getContainer;
-        }
-      }
-      return document.body;
-    },
-
-    getDomContainer() {
-      if (windowIsUndefined) {
-        return null;
-      }
-      if (!this.container) {
-        this.container = document.createElement('div');
-        const parent = this.getParent();
-        if (parent) {
-          parent.appendChild(this.container);
-        }
-      }
-      this.setWrapperClassName();
-      return this.container;
-    },
-
-    setWrapperClassName() {
-      const { wrapperClassName } = this.$props;
-      if (this.container && wrapperClassName && wrapperClassName !== this.container.className) {
-        this.container.className = wrapperClassName;
-      }
-    },
-
-    savePortal(c) {
-      // Warning: don't rename _component
-      // https://github.com/react-component/util/pull/65#discussion_r352407916
-      this._component = c;
-    },
-
-    removeCurrentContainer() {
-      this.container = null;
-      this._component = null;
-    },
-
-    /**
-     * Enhance ./switchScrollingEffect
-     * 1. Simulate document body scroll bar with
-     * 2. Record body has overflow style and recover when all of PortalWrapper invisible
-     * 3. Disable body scroll when PortalWrapper has open
-     *
-     * @memberof PortalWrapper
-     */
-    switchScrollingEffect() {
-      if (openCount === 1 && !Object.keys(cacheOverflow).length) {
-        switchScrollingEffect();
-        // Must be set after switchScrollingEffect
-        cacheOverflow = setStyle({
-          overflow: 'hidden',
-          overflowX: 'hidden',
-          overflowY: 'hidden',
-        });
-      } else if (!openCount) {
-        setStyle(cacheOverflow);
-        cacheOverflow = {};
-        switchScrollingEffect(true);
-      }
-    },
-  },
-
-  render() {
-    const { children, forceRender, visible } = this.$props;
-    let portal = null;
-    const childProps = {
-      getOpenCount: () => openCount,
-      getContainer: this.getDomContainer,
-      switchScrollingEffect: this.switchScrollingEffect,
-    };
-    if (forceRender || visible || this._component) {
-      portal = (
-        <Portal
-          getContainer={this.getDomContainer}
-          children={children(childProps)}
-          ref={this.savePortal}
-        ></Portal>
-      );
-    }
-    return portal;
-  },
-};

components/_util/PortalWrapper.tsx

@@ -0,0 +1,191 @@
+import PropTypes from './vue-types';
+import Portal from './Portal';
+import {
+  defineComponent,
+  shallowRef,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  onUpdated,
+  nextTick,
+  computed,
+} from 'vue';
+import canUseDom from './canUseDom';
+import raf from './raf';
+import { booleanType } from './type';
+import useScrollLocker from './hooks/useScrollLocker';
+
+let openCount = 0;
+const supportDom = canUseDom();
+
+/** @private Test usage only */
+export function getOpenCount() {
+  return process.env.NODE_ENV === 'test' ? openCount : 0;
+}
+
+const getParent = (getContainer: GetContainer) => {
+  if (!supportDom) {
+    return null;
+  }
+  if (getContainer) {
+    if (typeof getContainer === 'string') {
+      return document.querySelectorAll(getContainer)[0] as HTMLElement;
+    }
+    if (typeof getContainer === 'function') {
+      return getContainer();
+    }
+    if (typeof getContainer === 'object' && getContainer instanceof window.HTMLElement) {
+      return getContainer;
+    }
+  }
+  return document.body;
+};
+
+export type GetContainer = string | HTMLElement | (() => HTMLElement);
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'PortalWrapper',
+  inheritAttrs: false,
+  props: {
+    wrapperClassName: String,
+    forceRender: { type: Boolean, default: undefined },
+    getContainer: PropTypes.any,
+    visible: { type: Boolean, default: undefined },
+    autoLock: booleanType(),
+    didUpdate: Function,
+  },
+
+  setup(props, { slots }) {
+    const container = shallowRef<HTMLElement>();
+    const componentRef = shallowRef();
+    const rafId = shallowRef<number>();
+    const triggerUpdate = shallowRef(1);
+    const defaultContainer = canUseDom() && document.createElement('div');
+    const removeCurrentContainer = () => {
+      // Portal will remove from `parentNode`.
+      // Let's handle this again to avoid refactor issue.
+      if (container.value === defaultContainer) {
+        container.value?.parentNode?.removeChild(container.value);
+      }
+      container.value = null;
+    };
+    let parent: HTMLElement = null;
+    const attachToParent = (force = false) => {
+      if (force || (container.value && !container.value.parentNode)) {
+        parent = getParent(props.getContainer);
+        if (parent) {
+          parent.appendChild(container.value);
+          return true;
+        }
+
+        return false;
+      }
+
+      return true;
+    };
+    const getContainer = () => {
+      if (!supportDom) {
+        return null;
+      }
+      if (!container.value) {
+        container.value = defaultContainer;
+        attachToParent(true);
+      }
+      setWrapperClassName();
+      return container.value;
+    };
+    const setWrapperClassName = () => {
+      const { wrapperClassName } = props;
+      if (container.value && wrapperClassName && wrapperClassName !== container.value.className) {
+        container.value.className = wrapperClassName;
+      }
+    };
+    onUpdated(() => {
+      setWrapperClassName();
+      attachToParent();
+    });
+
+    useScrollLocker(
+      computed(() => {
+        return (
+          props.autoLock &&
+          props.visible &&
+          canUseDom() &&
+          (container.value === document.body || container.value === defaultContainer)
+        );
+      }),
+    );
+    onMounted(() => {
+      let init = false;
+      watch(
+        [() => props.visible, () => props.getContainer],
+        ([visible, getContainer], [prevVisible, prevGetContainer]) => {
+          // Update count
+          if (supportDom) {
+            parent = getParent(props.getContainer);
+            if (parent === document.body) {
+              if (visible && !prevVisible) {
+                openCount += 1;
+              } else if (init) {
+                openCount -= 1;
+              }
+            }
+          }
+
+          if (init) {
+            // Clean up container if needed
+            const getContainerIsFunc =
+              typeof getContainer === 'function' && typeof prevGetContainer === 'function';
+            if (
+              getContainerIsFunc
+                ? getContainer.toString() !== prevGetContainer.toString()
+                : getContainer !== prevGetContainer
+            ) {
+              removeCurrentContainer();
+            }
+          }
+          init = true;
+        },
+        { immediate: true, flush: 'post' },
+      );
+
+      nextTick(() => {
+        if (!attachToParent()) {
+          rafId.value = raf(() => {
+            triggerUpdate.value += 1;
+          });
+        }
+      });
+    });
+
+    onBeforeUnmount(() => {
+      const { visible } = props;
+      if (supportDom && parent === document.body) {
+        // 离开时不会 render， 导到离开时数值不变，改用 func 。。
+        openCount = visible && openCount ? openCount - 1 : openCount;
+      }
+      removeCurrentContainer();
+      raf.cancel(rafId.value);
+    });
+    return () => {
+      const { forceRender, visible } = props;
+      let portal = null;
+      const childProps = {
+        getOpenCount: () => openCount,
+        getContainer,
+      };
+      if (triggerUpdate.value && (forceRender || visible || componentRef.value)) {
+        portal = (
+          <Portal
+            getContainer={getContainer}
+            ref={componentRef}
+            didUpdate={props.didUpdate}
+            v-slots={{ default: () => slots.default?.(childProps) }}
+          ></Portal>
+        );
+      }
+      return portal;
+    };
+  },
+});

components/_util/StateMixin.js

@@ -1,10 +0,0 @@
-export default {
-  methods: {
-    setState(state, callback) {
-      Object.assign(this.$data, state);
-      this.$nextTick(() => {
-        callback && callback();
-      });
-    },
-  },
-};

components/_util/__mocks__/Portal.tsx

@@ -0,0 +1,13 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'Portal',
+  inheritAttrs: false,
+  props: ['getContainer'],
+  setup(_props, { slots }) {
+    return () => {
+      return slots.default?.();
+    };
+  },
+});

components/_util/__mocks__/RenderSlot.tsx

@@ -0,0 +1,11 @@
+import { defineComponent } from 'vue';
+import { customRenderSlot } from '../vnode';
+
+export default defineComponent({
+  name: 'RenderSlot',
+  setup(_props, { slots }) {
+    return () => {
+      return customRenderSlot(slots, 'default', {}, () => ['default value']);
+    };
+  },
+});

components/_util/__tests__/unreachableException.test.js

@@ -0,0 +1,8 @@
+import UnreachableException from '../unreachableException';
+
+describe('UnreachableException', () => {
+  it('error thrown matches snapshot', () => {
+    const exception = new UnreachableException('some value');
+    expect(exception.error.message).toMatchInlineSnapshot(`"unreachable case: \\"some value\\""`);
+  });
+});

components/_util/__tests__/vNode.test.js

@@ -0,0 +1,26 @@
+import RenderSlot from '../__mocks__/RenderSlot';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+
+describe('render slot content', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(RenderSlot, {
+      slots: {
+        default: () => 'This is slot content',
+      },
+    });
+
+    expect(wrapper.html()).toContain('This is slot content');
+  });
+
+  it('render default value when slot is fragment', async () => {
+    const wrapper = mount(RenderSlot, {
+      slots: {
+        default: () => <></>,
+      },
+    });
+
+    await nextTick();
+    expect(wrapper.html()).toContain('default value');
+  });
+});

components/_util/ant-ref.js

@@ -1,30 +0,0 @@
-import { nextTick } from 'vue';
-const antvRef = {
-  beforeMount: function bind(el, binding, vnode) {
-    nextTick(function() {
-      binding.value(el, vnode.key);
-    });
-    binding.value(el, vnode.key);
-  },
-  updated: function update(el, binding, vnode, oldVnode) {
-    if (oldVnode && oldVnode.directives) {
-      let oldBinding = oldVnode.directives.find(function(directive) {
-        return directive === antvRef;
-      });
-      if (oldBinding && oldBinding.value !== binding.value) {
-        oldBinding && oldBinding.value(null, oldVnode.key);
-        binding.value(el, vnode.key);
-        return;
-      }
-    }
-    // Should not have this situation
-    if (vnode.el !== oldVnode.el) {
-      binding.value(el, vnode.key);
-    }
-  },
-  unmounted: function unbind(el, binding, vnode) {
-    binding.value(null, vnode.key);
-  },
-};
-
-export default antvRef;

components/_util/antDirective.js

@@ -1,12 +0,0 @@
-import ref from 'vue-ref';
-// import { antInput } from './antInputDirective';
-import { antDecorator } from './FormDecoratorDirective';
-import { antPortal } from './portalDirective';
-
-export default {
-  install: Vue => {
-    Vue.use(ref, { name: 'ant-ref' });
-    antDecorator(Vue);
-    antPortal(Vue);
-  },
-};

components/_util/antInputDirective.js

@@ -1,72 +0,0 @@
-/**
- * Not type checking this file because flow doesn't like attaching
- * properties to Elements.
- */
-
-export const inBrowser = typeof window !== 'undefined';
-export const UA = inBrowser && window.navigator.userAgent.toLowerCase();
-export const isIE9 = UA && UA.indexOf('msie 9.0') > 0;
-function makeMap(str, expectsLowerCase) {
-  const map = Object.create(null);
-  const list = str.split(',');
-  for (let i = 0; i < list.length; i++) {
-    map[list[i]] = true;
-  }
-  return expectsLowerCase ? val => map[val.toLowerCase()] : val => map[val];
-}
-const isTextInputType = makeMap('text,number,password,search,email,tel,url');
-
-function onCompositionStart(e) {
-  e.target.composing = true;
-}
-
-function onCompositionEnd(e) {
-  // prevent triggering an input event for no reason
-  if (!e.target.composing) return;
-  e.target.composing = false;
-  trigger(e.target, 'input');
-}
-
-function trigger(el, type) {
-  const e = document.createEvent('HTMLEvents');
-  e.initEvent(type, true, true);
-  el.dispatchEvent(e);
-}
-
-/* istanbul ignore if */
-if (isIE9) {
-  // http://www.matts411.com/post/internet-explorer-9-oninput/
-  document.addEventListener('selectionchange', () => {
-    const el = document.activeElement;
-    if (el && el.vmodel) {
-      trigger(el, 'input');
-    }
-  });
-}
-
-export const antInput = {
-  mounted(el, binding, vnode) {
-    if (vnode.type === 'textarea' || isTextInputType(el.type)) {
-      if (!binding.modifiers || !binding.modifiers.lazy) {
-        el.addEventListener('compositionstart', onCompositionStart);
-        el.addEventListener('compositionend', onCompositionEnd);
-        // Safari < 10.2 & UIWebView doesn't fire compositionend when
-        // switching focus before confirming composition choice
-        // this also fixes the issue where some browsers e.g. iOS Chrome
-        // fires "change" instead of "input" on autocomplete.
-        el.addEventListener('change', onCompositionEnd);
-        /* istanbul ignore if */
-        if (isIE9) {
-          el.vmodel = true;
-        }
-      }
-    }
-  },
-};
-
-export default {
-  install: app => {
-    antInput(app);
-    app.directive('ant-input', antInput);
-  },
-};

components/_util/callMoment.js

@@ -1,4 +0,0 @@
-// https://github.com/moment/moment/issues/3650
-export default function callMoment(moment, ...args) {
-  return (moment.default || moment)(...args);
-}

components/_util/canUseDom.ts

@@ -0,0 +1,5 @@
+function canUseDom() {
+  return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+}
+
+export default canUseDom;

components/_util/classNames.ts

@@ -0,0 +1,27 @@
+import { isArray, isString, isObject } from './util';
+function classNames(...args: any[]) {
+  const classes = [];
+  for (let i = 0; i < args.length; i++) {
+    const value = args[i];
+    if (!value) continue;
+    if (isString(value)) {
+      classes.push(value);
+    } else if (isArray(value)) {
+      for (let i = 0; i < value.length; i++) {
+        const inner = classNames(value[i]);
+        if (inner) {
+          classes.push(inner);
+        }
+      }
+    } else if (isObject(value)) {
+      for (const name in value) {
+        if (value[name]) {
+          classes.push(name);
+        }
+      }
+    }
+  }
+  return classes.join(' ');
+}
+
+export default classNames;

components/_util/collapseMotion.tsx

@@ -0,0 +1,50 @@
+import { nextTick } from 'vue';
+import { addClass, removeClass } from '../vc-util/Dom/class';
+import type { CSSMotionProps } from './transition';
+
+const collapseMotion = (name = 'ant-motion-collapse', appear = true): CSSMotionProps => {
+  return {
+    name,
+    appear,
+    css: true,
+    onBeforeEnter: (node: HTMLDivElement) => {
+      node.style.height = '0px';
+      node.style.opacity = '0';
+      addClass(node, name);
+    },
+    onEnter: (node: HTMLDivElement) => {
+      nextTick(() => {
+        node.style.height = `${node.scrollHeight}px`;
+        node.style.opacity = '1';
+      });
+    },
+    onAfterEnter: (node: HTMLDivElement) => {
+      if (node) {
+        removeClass(node, name);
+        node.style.height = null;
+        node.style.opacity = null;
+      }
+    },
+    onBeforeLeave: (node: HTMLDivElement) => {
+      addClass(node, name);
+      node.style.height = `${node.offsetHeight}px`;
+      node.style.opacity = null;
+    },
+    onLeave: (node: HTMLDivElement) => {
+      setTimeout(() => {
+        node.style.height = '0px';
+        node.style.opacity = '0';
+      });
+    },
+    onAfterLeave: (node: HTMLDivElement) => {
+      if (node) {
+        removeClass(node, name);
+        if (node.style) {
+          node.style.height = null;
+          node.style.opacity = null;
+        }
+      }
+    },
+  };
+};
+export default collapseMotion;

components/_util/colors.js

@@ -1,17 +0,0 @@
-import { tuple } from './type';
-
-export const PresetColorTypes = tuple(
-  'pink',
-  'red',
-  'yellow',
-  'orange',
-  'cyan',
-  'green',
-  'blue',
-  'purple',
-  'geekblue',
-  'magenta',
-  'volcano',
-  'gold',
-  'lime',
-);

components/_util/colors.ts

@@ -0,0 +1,34 @@
+import type { PresetColorKey } from '../theme/interface';
+import { PresetColors } from '../theme/interface';
+
+type InverseColor = `${PresetColorKey}-inverse`;
+const inverseColors = PresetColors.map<InverseColor>(color => `${color}-inverse`);
+
+export const PresetStatusColorTypes = [
+  'success',
+  'processing',
+  'error',
+  'default',
+  'warning',
+] as const;
+
+export type PresetColorType = PresetColorKey | InverseColor;
+
+export type PresetStatusColorType = (typeof PresetStatusColorTypes)[number];
+
+/**
+ * determine if the color keyword belongs to the `Ant Design` {@link PresetColors}.
+ * @param color color to be judged
+ * @param includeInverse whether to include reversed colors
+ */
+export function isPresetColor(color?: any, includeInverse = true) {
+  if (includeInverse) {
+    return [...inverseColors, ...PresetColors].includes(color);
+  }
+
+  return PresetColors.includes(color);
+}
+
+export function isPresetStatusColor(color?: any): color is PresetStatusColorType {
+  return PresetStatusColorTypes.includes(color);
+}

components/_util/component-classes.ts

@@ -0,0 +1,168 @@
+/**
+ * source by `component-classes`
+ * https://github.com/component/classes.git
+ */
+
+import indexOf from 'lodash-es/indexOf';
+
+/**
+ * Whitespace regexp.
+ */
+const re = /\s+/;
+
+export class ClassList {
+  el: Element;
+  list: DOMTokenList;
+
+  constructor(el: Element) {
+    if (!el || !el.nodeType) {
+      throw new Error('A DOM element reference is required');
+    }
+    this.el = el;
+    this.list = el.classList;
+  }
+
+  array() {
+    const className = this.el.getAttribute('class') || '';
+    const str = className.replace(/^\s+|\s+$/g, '');
+    const arr = str.split(re);
+    if ('' === arr[0]) arr.shift();
+    return arr;
+  }
+
+  /**
+   * Add class `name` if not already present.
+   *
+   * @param {String} name
+   * @return {ClassList}
+   * @api public
+   */
+  add(name: string): ClassList {
+    // classList
+    if (this.list) {
+      this.list.add(name);
+      return this;
+    }
+
+    // fallback
+    const arr = this.array();
+    const i = indexOf(arr, name);
+    if (!~i) arr.push(name);
+    this.el.className = arr.join(' ');
+    return this;
+  }
+  /**
+   * Remove class `name` when present, or
+   * pass a regular expression to remove
+   * any which match.
+   *
+   * @param {String|RegExp} name
+   * @return {ClassList}
+   * @api public
+   */
+  remove(name: string | RegExp): ClassList {
+    if ('[object RegExp]' === toString.call(name)) {
+      return this._removeMatching(name as RegExp);
+    }
+
+    // classList
+    if (this.list) {
+      this.list.remove(name as string);
+      return this;
+    }
+
+    // fallback
+    const arr = this.array();
+    const i = indexOf(arr, name);
+    if (~i) arr.splice(i, 1);
+    this.el.className = arr.join(' ');
+    return this;
+  }
+  /**
+   * Remove all classes matching `re`.
+   *
+   * @param {RegExp} re
+   * @return {ClassList}
+   * @api private
+   */
+  _removeMatching(re: RegExp): ClassList {
+    const arr = this.array();
+    for (let i = 0; i < arr.length; i++) {
+      if (re.test(arr[i])) {
+        this.remove(arr[i]);
+      }
+    }
+    return this;
+  }
+
+  /**
+   * Toggle class `name`, can force state via `force`.
+   *
+   * For browsers that support classList, but do not support `force` yet,
+   * the mistake will be detected and corrected.
+   *
+   * @param {String} name
+   * @param {Boolean} force
+   * @return {ClassList}
+   * @api public
+   */
+  toggle(name: string, force: boolean): ClassList {
+    // classList
+    if (this.list) {
+      if ('undefined' !== typeof force) {
+        if (force !== this.list.toggle(name, force)) {
+          this.list.toggle(name); // toggle again to correct
+        }
+      } else {
+        this.list.toggle(name);
+      }
+      return this;
+    }
+
+    // fallback
+    if ('undefined' !== typeof force) {
+      if (!force) {
+        this.remove(name);
+      } else {
+        this.add(name);
+      }
+    } else {
+      if (this.has(name)) {
+        this.remove(name);
+      } else {
+        this.add(name);
+      }
+    }
+
+    return this;
+  }
+  /**
+   * Check if class `name` is present.
+   *
+   * @param {String} name
+   * @api public
+   */
+  has(name: string) {
+    return this.list ? this.list.contains(name) : !!~indexOf(this.array(), name);
+  }
+  /**
+   * Check if class `name` is present.
+   *
+   * @param {String} name
+   * @api public
+   */
+  contains(name: string) {
+    return this.has(name);
+  }
+}
+
+/**
+ * Wrap `el` in a `ClassList`.
+ *
+ * @param {Element} el
+ * @return {ClassList}
+ * @api public
+ */
+export default function (el: Element): ClassList {
+  return new ClassList(el);
+}

components/_util/copy-to-clipboard/index.ts

@@ -0,0 +1,120 @@
+import deselectCurrent from './toggle-selection';
+
+interface Options {
+  debug?: boolean;
+  message?: string;
+  format?: string; // MIME type
+  onCopy?: (clipboardData: object) => void;
+}
+
+const clipboardToIE11Formatting = {
+  'text/plain': 'Text',
+  'text/html': 'Url',
+  default: 'Text',
+};
+
+const defaultMessage = 'Copy to clipboard: #{key}, Enter';
+
+function format(message: string) {
+  const copyKey = (/mac os x/i.test(navigator.userAgent) ? '⌘' : 'Ctrl') + '+C';
+  return message.replace(/#{\s*key\s*}/g, copyKey);
+}
+
+function copy(text: string, options?: Options): boolean {
+  let message,
+    reselectPrevious,
+    range,
+    selection,
+    mark,
+    success = false;
+  if (!options) {
+    options = {};
+  }
+  const debug = options.debug || false;
+  try {
+    reselectPrevious = deselectCurrent();
+
+    range = document.createRange();
+    selection = document.getSelection();
+
+    mark = document.createElement('span');
+    mark.textContent = text;
+    // reset user styles for span element
+    mark.style.all = 'unset';
+    // prevents scrolling to the end of the page
+    mark.style.position = 'fixed';
+    mark.style.top = 0;
+    mark.style.clip = 'rect(0, 0, 0, 0)';
+    // used to preserve spaces and line breaks
+    mark.style.whiteSpace = 'pre';
+    // do not inherit user-select (it may be `none`)
+    mark.style.webkitUserSelect = 'text';
+    mark.style.MozUserSelect = 'text';
+    mark.style.msUserSelect = 'text';
+    mark.style.userSelect = 'text';
+    mark.addEventListener('copy', function (e) {
+      e.stopPropagation();
+      if (options.format) {
+        e.preventDefault();
+        if (typeof e.clipboardData === 'undefined') {
+          // IE 11
+          debug && console.warn('unable to use e.clipboardData');
+          debug && console.warn('trying IE specific stuff');
+          (window as any).clipboardData.clearData();
+          const format =
+            clipboardToIE11Formatting[options.format] || clipboardToIE11Formatting['default'];
+          (window as any).clipboardData.setData(format, text);
+        } else {
+          // all other browsers
+          e.clipboardData.clearData();
+          e.clipboardData.setData(options.format, text);
+        }
+      }
+      if (options.onCopy) {
+        e.preventDefault();
+        options.onCopy(e.clipboardData);
+      }
+    });
+
+    document.body.appendChild(mark);
+
+    range.selectNodeContents(mark);
+    selection.addRange(range);
+
+    const successful = document.execCommand('copy');
+    if (!successful) {
+      throw new Error('copy command was unsuccessful');
+    }
+    success = true;
+  } catch (err) {
+    debug && console.error('unable to copy using execCommand: ', err);
+    debug && console.warn('trying IE specific stuff');
+    try {
+      (window as any).clipboardData.setData(options.format || 'text', text);
+      options.onCopy && options.onCopy((window as any).clipboardData);
+      success = true;
+    } catch (err) {
+      debug && console.error('unable to copy using clipboardData: ', err);
+      debug && console.error('falling back to prompt');
+      message = format('message' in options ? options.message : defaultMessage);
+      window.prompt(message, text);
+    }
+  } finally {
+    if (selection) {
+      if (typeof selection.removeRange == 'function') {
+        selection.removeRange(range);
+      } else {
+        selection.removeAllRanges();
+      }
+    }
+
+    if (mark) {
+      document.body.removeChild(mark);
+    }
+    reselectPrevious();
+  }
+
+  return success;
+}
+
+export default copy;

components/_util/copy-to-clipboard/toggle-selection.ts

@@ -0,0 +1,41 @@
+// copy from https://github.com/sudodoki/toggle-selection
+// refactor to esm
+const deselectCurrent = (): (() => void) => {
+  const selection = document.getSelection();
+  if (!selection.rangeCount) {
+    return function () {};
+  }
+  let active = document.activeElement as any;
+
+  const ranges = [];
+  for (let i = 0; i < selection.rangeCount; i++) {
+    ranges.push(selection.getRangeAt(i));
+  }
+
+  switch (
+    active.tagName.toUpperCase() // .toUpperCase handles XHTML
+  ) {
+    case 'INPUT':
+    case 'TEXTAREA':
+      active.blur();
+      break;
+
+    default:
+      active = null;
+      break;
+  }
+
+  selection.removeAllRanges();
+  return function () {
+    selection.type === 'Caret' && selection.removeAllRanges();
+
+    if (!selection.rangeCount) {
+      ranges.forEach(function (range) {
+        selection.addRange(range);
+      });
+    }
+
+    active && active.focus();
+  };
+};
+export default deselectCurrent;

components/_util/createChainedFunction.js

@@ -1,22 +0,0 @@
-/**
- * Safe chained function
- *
- * Will only create a new function if needed,
- * otherwise will pass back existing functions or null.
- *
- * @returns {function|null}
- */
-export default function createChainedFunction() {
-  const args = [].slice.call(arguments, 0);
-  if (args.length === 1) {
-    return args[0];
-  }
-
-  return function chainedFunction() {
-    for (let i = 0; i < args.length; i++) {
-      if (args[i] && args[i].apply) {
-        args[i].apply(this, arguments);
-      }
-    }
-  };
-}

components/_util/createContext.ts

@@ -0,0 +1,22 @@
+import { inject, provide, reactive, watchEffect } from 'vue';
+
+function createContext<T extends Record<string, any>>(defaultValue?: T) {
+  const contextKey = Symbol('contextKey');
+  const useProvide = (props: T, newProps?: T) => {
+    const mergedProps = reactive<T>({} as T);
+    provide(contextKey, mergedProps);
+    watchEffect(() => {
+      Object.assign(mergedProps, props, newProps || {});
+    });
+    return mergedProps;
+  };
+  const useInject = () => {
+    return inject(contextKey, defaultValue as T) || ({} as T);
+  };
+  return {
+    useProvide,
+    useInject,
+  };
+}
+
+export default createContext;

components/_util/createRef.ts

@@ -0,0 +1,31 @@
+export interface RefObject extends Function {
+  current?: any;
+}
+
+function createRef(): any {
+  const func: RefObject = (node: any) => {
+    func.current = node;
+  };
+  return func;
+}
+
+export function fillRef<T>(ref, node: T) {
+  if (typeof ref === 'function') {
+    ref(node);
+  } else if (typeof ref === 'object' && ref && 'current' in ref) {
+    (ref as any).current = node;
+  }
+}
+
+/**
+ * Merge refs into one ref function to support ref passing.
+ */
+export function composeRef<T>(...refs: any[]) {
+  return (node: T) => {
+    refs.forEach(ref => {
+      fillRef(ref, node);
+    });
+  };
+}
+
+export default createRef;

components/_util/css-animation/Event.js

@@ -1,130 +0,0 @@
-const START_EVENT_NAME_MAP = {
-  transitionstart: {
-    transition: 'transitionstart',
-    WebkitTransition: 'webkitTransitionStart',
-    MozTransition: 'mozTransitionStart',
-    OTransition: 'oTransitionStart',
-    msTransition: 'MSTransitionStart',
-  },
-
-  animationstart: {
-    animation: 'animationstart',
-    WebkitAnimation: 'webkitAnimationStart',
-    MozAnimation: 'mozAnimationStart',
-    OAnimation: 'oAnimationStart',
-    msAnimation: 'MSAnimationStart',
-  },
-};
-
-const END_EVENT_NAME_MAP = {
-  transitionend: {
-    transition: 'transitionend',
-    WebkitTransition: 'webkitTransitionEnd',
-    MozTransition: 'mozTransitionEnd',
-    OTransition: 'oTransitionEnd',
-    msTransition: 'MSTransitionEnd',
-  },
-
-  animationend: {
-    animation: 'animationend',
-    WebkitAnimation: 'webkitAnimationEnd',
-    MozAnimation: 'mozAnimationEnd',
-    OAnimation: 'oAnimationEnd',
-    msAnimation: 'MSAnimationEnd',
-  },
-};
-
-const startEvents = [];
-const endEvents = [];
-
-function detectEvents() {
-  const testEl = document.createElement('div');
-  const style = testEl.style;
-
-  if (!('AnimationEvent' in window)) {
-    delete START_EVENT_NAME_MAP.animationstart.animation;
-    delete END_EVENT_NAME_MAP.animationend.animation;
-  }
-
-  if (!('TransitionEvent' in window)) {
-    delete START_EVENT_NAME_MAP.transitionstart.transition;
-    delete END_EVENT_NAME_MAP.transitionend.transition;
-  }
-
-  function process(EVENT_NAME_MAP, events) {
-    for (const baseEventName in EVENT_NAME_MAP) {
-      if (EVENT_NAME_MAP.hasOwnProperty(baseEventName)) {
-        const baseEvents = EVENT_NAME_MAP[baseEventName];
-        for (const styleName in baseEvents) {
-          if (styleName in style) {
-            events.push(baseEvents[styleName]);
-            break;
-          }
-        }
-      }
-    }
-  }
-
-  process(START_EVENT_NAME_MAP, startEvents);
-  process(END_EVENT_NAME_MAP, endEvents);
-}
-
-if (typeof window !== 'undefined' && typeof document !== 'undefined') {
-  detectEvents();
-}
-
-function addEventListener(node, eventName, eventListener) {
-  node.addEventListener(eventName, eventListener, false);
-}
-
-function removeEventListener(node, eventName, eventListener) {
-  node.removeEventListener(eventName, eventListener, false);
-}
-
-const TransitionEvents = {
-  // Start events
-  startEvents,
-
-  addStartEventListener(node, eventListener) {
-    if (startEvents.length === 0) {
-      window.setTimeout(eventListener, 0);
-      return;
-    }
-    startEvents.forEach(startEvent => {
-      addEventListener(node, startEvent, eventListener);
-    });
-  },
-
-  removeStartEventListener(node, eventListener) {
-    if (startEvents.length === 0) {
-      return;
-    }
-    startEvents.forEach(startEvent => {
-      removeEventListener(node, startEvent, eventListener);
-    });
-  },
-
-  // End events
-  endEvents,
-
-  addEndEventListener(node, eventListener) {
-    if (endEvents.length === 0) {
-      window.setTimeout(eventListener, 0);
-      return;
-    }
-    endEvents.forEach(endEvent => {
-      addEventListener(node, endEvent, eventListener);
-    });
-  },
-
-  removeEndEventListener(node, eventListener) {
-    if (endEvents.length === 0) {
-      return;
-    }
-    endEvents.forEach(endEvent => {
-      removeEventListener(node, endEvent, eventListener);
-    });
-  },
-};
-
-export default TransitionEvents;