Feat css var (#5327)

* style: affix & util

* feat(alert): add customIcon slot

* feat(anchor): ts type

* style: auto-complete

* feat: avatar add crossOrigin & maxPopoverTrigger

* style(backTop): v-show instead v-if

* style: badge

* style: breadcrumb

* feat: button add global size

* feat: update i18n

* feat: picker add disabledTime

* test: update snap

* doc: update img url

* style: fix Card tabs of left position

* doc: update cascader doc

* feat: collapse

* style: comment

* style: configprovider

* feat: date-picker add soem icon slot

* style: update descriptions style

* feat: add divider orientationMargin

* doc: update drawer

* feat: dropdown add destroyPopupOnHide & loading

* style: update empty

* feat: form add labelWrap

* style: update grid

* test: update grid snap

* fix: image ts error

* fix: mentions cannot select, close #5233

* doc: update pagination change info, close #5293

* fix: table dynamic expand error, close #5295

* style: remove not use

* release 3.0.0-beta.11

* doc: update typo

* feat: input add showCount

* feat: inputNumber add prefix slot

* style: update layout

* style: update list

* feat: add locale i18

* style: update locale ts

* style: update mentions

* feat: menu divider add dashed

* perf: menu

* perf: menu animate

* feat: modal method add wrapClassName

* style: update pageheader

* feat: update pagination ts

* feat: confirm add showCancel & promise

* doc: update popover

* style: update progress

* style: radio

* style: update rate、result、row

* feat: select add fieldNames

* feat: add skeleton button & input

* feat: spin tip support slot

* style: slider & space

* stype: update steps ts type

* style: update switch

* feat: table add tree filter

* test: update input sanp

* feat: table add filterMode...

* fix: tree autoExpandParent bug

* test: update input snap

* doc: tabs add destroyInactiveTabPane

* style: update tag

* style: update timeline & time-picker

* fix: Tooltip arrowPointAtCenter 1px shift bug

* feat: typography add enterEnterIcon triggerType

* doc: update tree-select

* fix: deps and TypeScript types

* style: udpate transfer

* style: update style

* doc: add colorScheme

* chore: add css var builg

* doc: sort api

* style: lint code

* doc: add css var

* test: update snap

* chore: add pre script

* chore: update lint

* perf: collapse animate

* perf: collapse tree

* perf: typography shaking when edit

* doc: update auto-complete demo

* fix: table tree not have animate

* feat: deprecated dropdown center placement

* feat: deprecated dropdown center placement

* test: update snap

.antd-tools.config.js

@@ -0,0 +1,195 @@
+const fs = require('fs');
+const path = require('path');
+const defaultVars = require('./scripts/default-vars');
+const darkVars = require('./scripts/dark-vars');
+const compactVars = require('./scripts/compact-vars');
+
+function generateThemeFileContent(theme) {
+  return `const { ${theme}ThemeSingle } = require('./theme');\nconst defaultTheme = require('./default-theme');\n
+module.exports = {
+  ...defaultTheme,
+  ...${theme}ThemeSingle
+}`;
+}
+
+// We need compile additional content for antd user
+function finalizeCompile() {
+  if (fs.existsSync(path.join(__dirname, './lib'))) {
+    // Build a entry less file to dist/antd.less
+    const componentsPath = path.join(process.cwd(), 'components');
+    let componentsLessContent = '';
+    // Build components in one file: lib/style/components.less
+    fs.readdir(componentsPath, (err, files) => {
+      files.forEach(file => {
+        if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) {
+          componentsLessContent += `@import "../${path.posix.join(
+            file,
+            'style',
+            'index-pure.less',
+          )}";\n`;
+        }
+      });
+      fs.writeFileSync(
+        path.join(process.cwd(), 'lib', 'style', 'components.less'),
+        componentsLessContent,
+      );
+    });
+  }
+}
+
+function buildThemeFile(theme, vars) {
+  // Build less entry file: dist/antd.${theme}.less
+  if (theme !== 'default') {
+    fs.writeFileSync(
+      path.join(process.cwd(), 'dist', `antd.${theme}.less`),
+      `@import "../lib/style/${theme}.less";\n@import "../lib/style/components.less";`,
+    );
+    // eslint-disable-next-line no-console
+    console.log(`Built a entry less file to dist/antd.${theme}.less`);
+  } else {
+    fs.writeFileSync(
+      path.join(process.cwd(), 'dist', `default-theme.js`),
+      `module.exports = ${JSON.stringify(vars, null, 2)};\n`,
+    );
+    return;
+  }
+
+  // Build ${theme}.js: dist/${theme}-theme.js, for less-loader
+
+  fs.writeFileSync(
+    path.join(process.cwd(), 'dist', `theme.js`),
+    `const ${theme}ThemeSingle = ${JSON.stringify(vars, null, 2)};\n`,
+    {
+      flag: 'a',
+    },
+  );
+
+  fs.writeFileSync(
+    path.join(process.cwd(), 'dist', `${theme}-theme.js`),
+    generateThemeFileContent(theme),
+  );
+
+  // eslint-disable-next-line no-console
+  console.log(`Built a ${theme} theme js file to dist/${theme}-theme.js`);
+}
+
+function finalizeDist() {
+  if (fs.existsSync(path.join(__dirname, './dist'))) {
+    // Build less entry file: dist/antd.less
+    fs.writeFileSync(
+      path.join(process.cwd(), 'dist', 'antd.less'),
+      '@import "../lib/style/default.less";\n@import "../lib/style/components.less";',
+    );
+    // eslint-disable-next-line no-console
+    fs.writeFileSync(
+      path.join(process.cwd(), 'dist', 'theme.js'),
+      `const defaultTheme = require('./default-theme.js');\n`,
+    );
+    // eslint-disable-next-line no-console
+    console.log('Built a entry less file to dist/antd.less');
+    buildThemeFile('default', defaultVars);
+    buildThemeFile('dark', darkVars);
+    buildThemeFile('compact', compactVars);
+    buildThemeFile('variable', {});
+    fs.writeFileSync(
+      path.join(process.cwd(), 'dist', `theme.js`),
+      `
+function getThemeVariables(options = {}) {
+  let themeVar = {
+    'hack': \`true;@import "\${require.resolve('antd/lib/style/color/colorPalette.less')}";\`,
+    ...defaultTheme
+  };
+  if(options.dark) {
+    themeVar = {
+      ...themeVar,
+      ...darkThemeSingle
+    }
+  }
+  if(options.compact){
+    themeVar = {
+      ...themeVar,
+      ...compactThemeSingle
+    }
+  }
+  return themeVar;
+}
+
+module.exports = {
+  darkThemeSingle,
+  compactThemeSingle,
+  getThemeVariables
+}`,
+      {
+        flag: 'a',
+      },
+    );
+  }
+}
+
+function isComponentStyleEntry(file) {
+  return file.path.match(/style(\/|\\)index\.tsx/);
+}
+
+function needTransformStyle(content) {
+  return content.includes('../../style/index.less') || content.includes('./index.less');
+}
+
+module.exports = {
+  compile: {
+    includeLessFile: [/(\/|\\)components(\/|\\)style(\/|\\)default.less$/],
+    transformTSFile(file) {
+      if (isComponentStyleEntry(file)) {
+        let content = file.contents.toString();
+
+        if (needTransformStyle(content)) {
+          const cloneFile = file.clone();
+
+          // Origin
+          content = content.replace('../../style/index.less', '../../style/default.less');
+          cloneFile.contents = Buffer.from(content);
+
+          return cloneFile;
+        }
+      }
+    },
+    transformFile(file) {
+      if (isComponentStyleEntry(file)) {
+        const indexLessFilePath = file.path.replace('index.tsx', 'index.less');
+
+        if (fs.existsSync(indexLessFilePath)) {
+          // We put origin `index.less` file to `index-pure.less`
+          const pureFile = file.clone();
+          pureFile.contents = Buffer.from(fs.readFileSync(indexLessFilePath, 'utf8'));
+          pureFile.path = pureFile.path.replace('index.tsx', 'index-pure.less');
+
+          // Rewrite `index.less` file with `root-entry-name`
+          const indexLessFile = file.clone();
+          indexLessFile.contents = Buffer.from(
+            [
+              // Inject variable
+              '@root-entry-name: default;',
+              // Point to origin file
+              "@import './index-pure.less';",
+            ].join('\n\n'),
+          );
+          indexLessFile.path = indexLessFile.path.replace('index.tsx', 'index.less');
+
+          return [indexLessFile, pureFile];
+        }
+      }
+
+      return [];
+    },
+    lessConfig: {
+      modifyVars: {
+        'root-entry-name': 'default',
+      },
+    },
+    finalize: finalizeCompile,
+  },
+  dist: {
+    finalize: finalizeDist,
+  },
+  generateThemeFileContent,
+  bail: true,
+};

.eslintignore

@@ -7,3 +7,4 @@ es/
 lib/
 _site/
 dist/
+components/version/version.tsx

.gitignore

@@ -76,3 +76,6 @@ vetur/
 report.html
 
 site/src/router/demoRoutes.js
+
+components/version/version.tsx
+~component-api.json

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/run.js

@@ -4,7 +4,6 @@
 'use strict';
 
 require('colorful').colorful();
-require('colorful').isatty = true;
 const gulp = require('gulp');
 const program = require('commander');
 

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/gulpfile.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-const { getProjectPath } = require('./utils/projectHelper');
+const { getProjectPath, getConfig } = require('./utils/projectHelper');
 const runCmd = require('./runCmd');
 const getBabelCommonConfig = require('./getBabelCommonConfig');
 const merge2 = require('merge2');
@@ -26,6 +26,7 @@ const stripCode = require('gulp-strip-code');
 const compareVersions = require('compare-versions');
 const getTSCommonConfig = require('./getTSCommonConfig');
 const replaceLib = require('./replaceLib');
+const sortApiTable = require('./sortApiTable');
 
 const packageJson = require(getProjectPath('package.json'));
 const tsDefaultReporter = ts.reporter.defaultReporter();
@@ -49,11 +50,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);
     }
@@ -68,6 +75,11 @@ function dist(done) {
       version: false,
     });
     console.log(buildInfo);
+    // Additional process of dist finalize
+    if (finalize) {
+      console.log('[Dist] Finalization...');
+      finalize();
+    }
     done(0);
   });
 }
@@ -103,7 +115,7 @@ 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|ts|tsx)$/)) {
@@ -128,33 +140,40 @@ function babelify(js, modules) {
       next();
     }),
   );
-  if (modules === false) {
-    stream = stream.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));
 }
 
 function compile(modules) {
+  const { compile: { transformTSFile, transformFile, includeLessFile = [] } = {} } = getConfig();
   rimraf.sync(modules !== false ? libDir : esDir);
+
+  // =============================== LESS ===============================
   const less = gulp
     .src(['components/**/*.less'])
     .pipe(
       through2.obj(function (file, encoding, next) {
-        this.push(file.clone());
+        // Replace content
+        const cloneFile = file.clone();
+        const content = file.contents.toString().replace(/^\uFEFF/, '');
+
+        cloneFile.contents = Buffer.from(content);
+
+        // Clone for css here since `this.push` will modify file.path
+        const cloneCssFile = cloneFile.clone();
+
+        this.push(cloneFile);
+
+        // Transform less file
         if (
-          file.path.match(/\/style\/index\.less$/) ||
+          file.path.match(/(\/|\\)style(\/|\\)index\.less$/) ||
-          file.path.match(/\/style\/v2-compatible-reset\.less$/)
+          file.path.match(/(\/|\\)style(\/|\\)v2-compatible-reset\.less$/) ||
+          includeLessFile.some(regex => file.path.match(regex))
         ) {
-          transformLess(file.path)
+          transformLess(cloneCssFile.contents.toString(), cloneCssFile.path)
             .then(css => {
-              file.contents = Buffer.from(css);
+              cloneCssFile.contents = Buffer.from(css);
-              file.path = file.path.replace(/\.less$/, '.css');
+              cloneCssFile.path = cloneCssFile.path.replace(/\.less$/, '.css');
-              this.push(file);
+              this.push(cloneCssFile);
               next();
             })
             .catch(e => {
@@ -170,6 +189,25 @@ function compile(modules) {
     .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',
@@ -179,7 +217,29 @@ function compile(modules) {
     '!components/*/__tests__/*',
   ];
 
-  const tsResult = gulp.src(source).pipe(
+  // Strip content if needed
+  let sourceStream = gulp.src(source);
+  if (modules === false) {
+    sourceStream = sourceStream.pipe(
+      stripCode({
+        start_comment: '@remove-on-es-build-begin',
+        end_comment: '@remove-on-es-build-end',
+      }),
+    );
+  }
+
+  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);
@@ -199,7 +259,7 @@ function compile(modules) {
   tsResult.on('end', check);
   const tsFilesStream = babelify(tsResult.js, modules);
   const tsd = tsResult.dts.pipe(gulp.dest(modules === false ? esDir : libDir));
-  return merge2([less, tsFilesStream, tsd, assets]);
+  return merge2([less, tsFilesStream, tsd, assets, transformFileStream].filter(s => s));
 }
 
 function tag() {
@@ -420,7 +480,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;
@@ -430,3 +494,11 @@ gulp.task(
     done();
   }),
 );
+
+gulp.task(
+  'sort-api-table',
+  gulp.series(done => {
+    sortApiTable();
+    done();
+  }),
+);

antd-tools/replaceLib.js

@@ -12,6 +12,19 @@ function replacePath(path) {
       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;
+    }
+  }
 }
 
 function replaceLib() {

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,16 +1,14 @@
 const less = require('less');
-const { readFileSync } = require('fs');
 const path = require('path');
 const postcss = require('postcss');
-const NpmImportPlugin = require('less-plugin-npm-import');
 const autoprefixer = require('autoprefixer');
+const NpmImportPlugin = require('less-plugin-npm-import');
+const { getConfig } = require('./utils/projectHelper');
 
-function transformLess(lessFile, config = {}) {
+function transformLess(lessContent, lessFilePath, config = {}) {
   const { cwd = process.cwd() } = config;
-  const resolvedLessFile = path.resolve(cwd, lessFile);
+  const { compile: { lessConfig } = {} } = getConfig();
-
+  const resolvedLessFile = path.resolve(cwd, lessFilePath);
-  let data = readFileSync(resolvedLessFile, 'utf-8');
-  data = data.replace(/^\uFEFF/, '');
 
   // Do less compile
   const lessOpts = {
@@ -18,13 +16,12 @@ function transformLess(lessFile, config = {}) {
     filename: resolvedLessFile,
     plugins: [new NpmImportPlugin({ prefix: '~' })],
     javascriptEnabled: true,
+    ...lessConfig,
   };
   return less
-    .render(data, lessOpts)
+    .render(lessContent, lessOpts)
     .then(result => postcss([autoprefixer]).process(result.css, { from: undefined }))
-    .then(r => {
+    .then(r => r.css);
-      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/getRunCmdEnv.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const path = require('path');
+const isWindows = require('is-windows');
 
 module.exports = function getRunCmdEnv() {
   const env = {};
@@ -14,7 +15,9 @@ module.exports = function getRunCmdEnv() {
     .filter(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

@@ -13,6 +13,7 @@ function 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;
@@ -45,9 +46,35 @@ function getConfig() {
   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,
 };

antd-tools/utils/styleUtil.js

@@ -0,0 +1,11 @@
+// We convert less import in es/lib to css file path
+function cssInjection(content) {
+  return content
+    .replace(/\/style\/?'/g, "/style/css'")
+    .replace(/\/style\/?"/g, '/style/css"')
+    .replace(/\.less/g, '.css');
+}
+
+module.exports = {
+  cssInjection,
+};

components/_util/ActionButton.tsx

@@ -4,6 +4,7 @@ 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';
 
 const actionButtonProps = {
   type: {
@@ -32,6 +33,7 @@ export default defineComponent({
     const buttonRef = ref();
     const loading = ref(false);
     let timeoutId: any;
+    const isDestroyed = useDestroyed();
     onMounted(() => {
       if (props.autofocus) {
         timeoutId = setTimeout(() => buttonRef.value.$el?.focus());
@@ -49,7 +51,9 @@ export default defineComponent({
       loading.value = true;
       returnValueOfOnOk!.then(
         (...args: any[]) => {
-          loading.value = false;
+          if (!isDestroyed.value) {
+            loading.value = false;
+          }
           close(...args);
           clickedRef.value = false;
         },
@@ -58,7 +62,9 @@ export default defineComponent({
           // eslint-disable-next-line no-console
           console.error(e);
           // See: https://github.com/ant-design/ant-design/issues/6183
-          loading.value = false;
+          if (!isDestroyed.value) {
+            loading.value = false;
+          }
           clickedRef.value = false;
         },
       );

components/_util/EventInterface.ts

@@ -6,5 +6,10 @@ export type ChangeEvent = Event & {
     value?: string | undefined;
   };
 };
+export type CheckboxChangeEvent = Event & {
+  target: {
+    checked?: boolean;
+  };
+};
 
 export type EventHandler = (...args: any[]) => void;

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/collapseMotion.tsx

@@ -1,11 +1,11 @@
-import { addClass, removeClass } from '../../vc-util/Dom/class';
 import { nextTick } from 'vue';
-import type { CSSMotionProps } from '../../_util/transition';
+import { addClass, removeClass } from '../vc-util/Dom/class';
+import type { CSSMotionProps } from './transition';
 
-const listAnimation = (name = 'ant-motion-collapse'): CSSMotionProps => {
+const collapseMotion = (name = 'ant-motion-collapse', appear = true): CSSMotionProps => {
   return {
     name,
-    appear: true,
+    appear,
     css: true,
     onBeforeEnter: (node: HTMLDivElement) => {
       node.style.height = '0px';
@@ -47,4 +47,4 @@ const listAnimation = (name = 'ant-motion-collapse'): CSSMotionProps => {
     },
   };
 };
-export default listAnimation;
+export default collapseMotion;

components/_util/hooks/useConfigInject.ts

@@ -19,6 +19,7 @@ export default (
   pageHeader: ComputedRef<{ ghost: boolean }>;
   form?: ComputedRef<{
     requiredMark?: RequiredMark;
+    colon?: boolean;
   }>;
   autoInsertSpaceInButton: ComputedRef<boolean>;
   renderEmpty?: ComputedRef<(componentName?: string) => VueNode>;

components/_util/hooks/useDestroyed.ts

@@ -0,0 +1,12 @@
+import { onBeforeUnmount, ref } from 'vue';
+
+const useDestroyed = () => {
+  const mounted = ref(true);
+  onBeforeUnmount(() => {
+    mounted.value = false;
+  });
+
+  return mounted;
+};
+
+export default useDestroyed;

components/_util/hooks/usePrefixCls.ts

@@ -1,9 +0,0 @@
-import type { ComputedRef } from 'vue';
-import { computed, inject } from 'vue';
-import { defaultConfigProvider } from '../../config-provider';
-
-export default (name: string, props: Record<any, any>): ComputedRef<string> => {
-  const configProvider = inject('configProvider', defaultConfigProvider);
-  const prefixCls = computed(() => configProvider.getPrefixCls(name, props.prefixCls));
-  return prefixCls;
-};

components/_util/openAnimation.js

@@ -1,67 +0,0 @@
-import cssAnimation from './css-animation';
-import { nextTick } from 'vue';
-import { requestAnimationTimeout, cancelAnimationTimeout } from './requestAnimationTimeout';
-
-function animate(node, show, done) {
-  let height;
-  let requestAnimationFrameId;
-  let appearRequestAnimationFrameId;
-  return cssAnimation(node, 'ant-motion-collapse-legacy', {
-    start() {
-      if (appearRequestAnimationFrameId) {
-        cancelAnimationTimeout(appearRequestAnimationFrameId);
-      }
-      if (!show) {
-        node.style.height = `${node.offsetHeight}px`;
-        node.style.opacity = '1';
-      } else {
-        height = node.offsetHeight;
-        // not get offsetHeight when appear
-        // set it into raf get correct offsetHeight
-        if (height === 0) {
-          appearRequestAnimationFrameId = requestAnimationTimeout(() => {
-            height = node.offsetHeight;
-            node.style.height = '0px';
-            node.style.opacity = '0';
-          });
-        } else {
-          node.style.height = '0px';
-          node.style.opacity = '0';
-        }
-      }
-    },
-    active() {
-      if (requestAnimationFrameId) {
-        cancelAnimationTimeout(requestAnimationFrameId);
-      }
-      requestAnimationFrameId = requestAnimationTimeout(() => {
-        node.style.height = `${show ? height : 0}px`;
-        node.style.opacity = show ? '1' : '0';
-      });
-    },
-    end() {
-      if (appearRequestAnimationFrameId) {
-        cancelAnimationTimeout(appearRequestAnimationFrameId);
-      }
-      if (requestAnimationFrameId) {
-        cancelAnimationTimeout(requestAnimationFrameId);
-      }
-      node.style.height = '';
-      node.style.opacity = '';
-      done && done();
-    },
-  });
-}
-
-const animation = {
-  onEnter(node, done) {
-    nextTick(() => {
-      animate(node, true, done);
-    });
-  },
-  onLeave(node, done) {
-    return animate(node, false, done);
-  },
-};
-
-export default animation;

components/_util/styleChecker.ts

@@ -2,8 +2,8 @@ import canUseDom from './canUseDom';
 
 export const canUseDocElement = () => canUseDom() && window.document.documentElement;
 
-export const isStyleSupport = (styleName: string | Array<string>): boolean => {
+const isStyleNameSupport = (styleName: string | string[]): boolean => {
-  if (canUseDocElement()) {
+  if (canUseDom() && window.document.documentElement) {
     const styleNameList = Array.isArray(styleName) ? styleName : [styleName];
     const { documentElement } = window.document;
 
@@ -12,6 +12,25 @@ export const isStyleSupport = (styleName: string | Array<string>): boolean => {
   return false;
 };
 
+const isStyleValueSupport = (styleName: string, value: any) => {
+  if (!isStyleNameSupport(styleName)) {
+    return false;
+  }
+
+  const ele = document.createElement('div');
+  const origin = ele.style[styleName];
+  ele.style[styleName] = value;
+  return ele.style[styleName] !== origin;
+};
+
+export function isStyleSupport(styleName: string | string[], styleValue?: any) {
+  if (!Array.isArray(styleName) && styleValue !== undefined) {
+    return isStyleValueSupport(styleName, styleValue);
+  }
+
+  return isStyleNameSupport(styleName);
+}
+
 let flexGapSupported: boolean | undefined;
 export const detectFlexGapSupported = () => {
   if (!canUseDocElement()) {

components/_util/transition.tsx

@@ -129,13 +129,17 @@ export interface CSSMotionProps extends Partial<BaseTransitionProps<Element>> {
   css?: boolean;
 }
 
-const collapseMotion = (style: Ref<CSSProperties>, className: Ref<string>): CSSMotionProps => {
+const collapseMotion = (
+  name = 'ant-motion-collapse',
+  style: Ref<CSSProperties>,
+  className: Ref<string>,
+): CSSMotionProps => {
   return {
-    name: 'ant-motion-collapse',
+    name,
     appear: true,
     css: true,
     onBeforeEnter: node => {
-      className.value = 'ant-motion-collapse';
+      className.value = name;
       style.value = getCollapsedHeight(node);
     },
     onEnter: node => {
@@ -148,7 +152,7 @@ const collapseMotion = (style: Ref<CSSProperties>, className: Ref<string>): CSSM
       style.value = {};
     },
     onBeforeLeave: node => {
-      className.value = 'ant-motion-collapse';
+      className.value = name;
       style.value = getCurrentHeight(node);
     },
     onLeave: node => {

components/_util/unreachableException.ts

@@ -0,0 +1,7 @@
+export default class UnreachableException {
+  error: Error;
+
+  constructor(value: any) {
+    this.error = new Error(`unreachable case: ${JSON.stringify(value)}`);
+  }
+}

components/_util/wave.tsx

@@ -24,6 +24,7 @@ export default defineComponent({
   name: 'Wave',
   props: {
     insertExtraNode: Boolean,
+    disabled: Boolean,
   },
   setup(props, { slots, expose }) {
     const instance = getCurrentInstance();
@@ -60,10 +61,11 @@ export default defineComponent({
       return insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
     };
     const onClick = (node: HTMLElement, waveColor: string) => {
-      if (!node || isHidden(node) || node.className.indexOf('-leave') >= 0) {
+      const { insertExtraNode, disabled } = props;
+      if (disabled || !node || isHidden(node) || node.className.indexOf('-leave') >= 0) {
         return;
       }
-      const { insertExtraNode } = props;
+
       extraNode = document.createElement('div');
       extraNode.className = 'ant-click-animating-node';
       const attributeName = getAttributeName();

components/affix/index.en-US.md

@@ -23,9 +23,9 @@ Please note that Affix should not cover other content on the page, especially wh
 
 ### events
 
-| Events Name | Description                              | Arguments         | Version |
+| Events Name | Description                              | Arguments                   | Version |
-| ----------- | ---------------------------------------- | ----------------- | ------- |
+| ----------- | ---------------------------------------- | --------------------------- | ------- |
-| change      | Callback for when Affix state is changed | Function(affixed) |
+| change      | Callback for when Affix state is changed | (affixed?: boolean) => void |         |
 
 **Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:
 
@@ -35,8 +35,12 @@ Please note that Affix should not cover other content on the page, especially wh
 
 ## FAQ
 
-### Affix bind container with `target`, sometime move out of container.
+### When binding container with `target` in Affix, elements sometimes move out of the container.
 
-We don't listen window scroll for performance consideration.
+We only listen to container scroll events for performance consideration. You can add custom listeners if you still want to, like react demo <https://codesandbox.io/s/2xyj5zr85p>
 
 Related issues：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
+
+### When Affix is ​​used in a horizontal scroll container, the position of the element `left` is incorrect.
+
+Affix is ​​generally only applicable to areas with one-way scrolling, and only supports usage in vertical scrolling containers. If you want to use it in a horizontal container, you can consider implementing with the native `position: sticky` property.

components/affix/index.tsx

@@ -179,10 +179,7 @@ const Affix = defineComponent({
     watch(
       () => props.target,
       val => {
-        let newTarget = null;
+        const newTarget = val?.() || null;
-        if (val) {
-          newTarget = val() || null;
-        }
         if (state.prevTarget !== newTarget) {
           removeObserveTarget(currentInstance);
           if (newTarget) {

components/affix/index.zh-CN.md

@@ -19,14 +19,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
 | 成员 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | offsetBottom | 距离窗口底部达到指定偏移量后触发 | number |  |  |
-| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |  |
+| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | 0 |  |
 | target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |  |
 
 ### 事件
 
-| 事件名称 | 说明                         | 回调参数          | 版本 |
+| 事件名称 | 说明                         | 回调参数                    | 版本 |     |
-| -------- | ---------------------------- | ----------------- | ---- | --- |
+| -------- | ---------------------------- | --------------------------- | ---- | --- |
-| change   | 固定状态改变时触发的回调函数 | Function(affixed) | 无   |     |
+| change   | 固定状态改变时触发的回调函数 | (affixed?: boolean) => void | -    |     |
 
 **注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
 
@@ -38,6 +38,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
 
 ### Affix 使用 `target` 绑定容器时，元素会跑到容器外。
 
-从性能角度考虑，我们只监听容器滚动事件。
+从性能角度考虑，我们只监听容器滚动事件。如果希望任意滚动，你可以在窗体添加滚动监听, 参考 react 版本示例 <https://codesandbox.io/s/2xyj5zr85p>
 
 相关 issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
+
+### Affix 在水平滚动容器中使用时， 元素 `left` 位置不正确。
+
+Affix 一般只适用于单向滚动的区域，只支持在垂直滚动容器中使用。如果希望在水平容器中使用，你可以考虑使用 原生 `position: sticky` 实现。
+
+相关 issue: [#29108](https://github.com/ant-design/ant-design/issues/29108)

components/affix/utils.ts

@@ -3,19 +3,14 @@ import type { ComponentPublicInstance } from 'vue';
 import supportsPassive from '../_util/supportsPassive';
 
 export type BindElement = HTMLElement | Window | null | undefined;
-export type Rect = ClientRect | DOMRect;
 
-export function getTargetRect(target: BindElement): ClientRect {
+export function getTargetRect(target: BindElement): DOMRect {
   return target !== window
     ? (target as HTMLElement).getBoundingClientRect()
-    : ({ top: 0, bottom: window.innerHeight } as ClientRect);
+    : ({ top: 0, bottom: window.innerHeight } as DOMRect);
 }
 
-export function getFixedTop(
+export function getFixedTop(placeholderReact: DOMRect, targetRect: DOMRect, offsetTop: number) {
-  placeholderReact: Rect,
-  targetRect: Rect,
-  offsetTop: number | undefined,
-) {
   if (offsetTop !== undefined && targetRect.top > placeholderReact.top - offsetTop) {
     return `${offsetTop + targetRect.top}px`;
   }
@@ -23,9 +18,9 @@ export function getFixedTop(
 }
 
 export function getFixedBottom(
-  placeholderReact: Rect,
+  placeholderReact: DOMRect,
-  targetRect: Rect,
+  targetRect: DOMRect,
-  offsetBottom: number | undefined,
+  offsetBottom: number,
 ) {
   if (offsetBottom !== undefined && targetRect.bottom < placeholderReact.bottom + offsetBottom) {
     const targetBottomOffset = window.innerHeight - targetRect.bottom;

components/alert/__tests__/__snapshots__/demo.test.js.snap

@@ -1,68 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/alert/demo/banner.vue correctly 1`] = `
-<div class="ant-alert ant-alert-warning ant-alert-banner" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-warning ant-alert-banner" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Warning text</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div>
   <!---->
 </div><br>
-<div class="ant-alert ant-alert-warning ant-alert-banner ant-alert-closable" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-warning ant-alert-banner ant-alert-closable" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Very long warning text warning text text text text text text text</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
 </div><br>
-<div class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner" data-show="true">
+<div role="alert" class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner" data-show="true">
   <!---->
   <div class="ant-alert-content">
     <div class="ant-alert-message">Warning text without icon</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div>
   <!---->
 </div><br>
-<div class="ant-alert ant-alert-error ant-alert-banner" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-error ant-alert-banner" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Error text</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div>
   <!---->
 </div>
 `;
 
 exports[`renders ./components/alert/demo/basic.vue correctly 1`] = `
-<div class="ant-alert ant-alert-success ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-success ant-alert-no-icon" data-show="true">
   <!---->
   <div class="ant-alert-content">
     <div class="ant-alert-message">Success Text</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div>
   <!---->
 </div>
 `;
 
 exports[`renders ./components/alert/demo/closable.vue correctly 1`] = `
-<div class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-closable" data-show="true">
+<div role="alert" class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-closable" data-show="true">
   <!---->
   <div class="ant-alert-content">
     <div class="ant-alert-message">Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
 </div>
-<div class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon ant-alert-closable" data-show="true">
+<div role="alert" class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon ant-alert-closable" data-show="true">
   <!---->
   <div class="ant-alert-content">
     <div class="ant-alert-message">Error Text</div>
@@ -72,86 +60,74 @@ exports[`renders ./components/alert/demo/closable.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/alert/demo/close-text.vue correctly 1`] = `
-<div class="ant-alert ant-alert-info ant-alert-no-icon ant-alert-closable" data-show="true">
+<div role="alert" class="ant-alert ant-alert-info ant-alert-no-icon ant-alert-closable" data-show="true">
   <!---->
   <div class="ant-alert-content">
     <div class="ant-alert-message">Info Text</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div><button type="button" class="ant-alert-close-icon" tabindex="0"><span class="ant-alert-close-text">Close Now</span></button>
 </div>
 `;
 
 exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
-<div class="ant-alert ant-alert-success ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-success ant-alert-no-icon" data-show="true">
   <!---->
   <div class="ant-alert-content">
     <div class="ant-alert-message">showIcon = false</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-success" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-success" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Success Tips</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-info" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-info" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Informational Notes</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-warning" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-warning" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Warning</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-error" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-error" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Error</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-success ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-success ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Success Tips</div>
     <div class="ant-alert-description">Detailed description and advices about successful copywriting.</div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-info ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-info ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Informational Notes</div>
     <div class="ant-alert-description">Additional description and informations about copywriting.</div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-warning ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-warning ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Warning</div>
     <div class="ant-alert-description">This is a warning notice about copywriting.</div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-error ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-error ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Error</div>
     <div class="ant-alert-description">This is an error message about copywriting.</div>
@@ -161,7 +137,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/alert/demo/description.vue correctly 1`] = `
-<div class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon" data-show="true">
   <!---->
   <div class="ant-alert-content">
     <div class="ant-alert-message">Success Text</div>
@@ -171,7 +147,7 @@ exports[`renders ./components/alert/demo/description.vue correctly 1`] = `
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon" data-show="true">
   <!---->
   <div class="ant-alert-content">
     <div class="ant-alert-message">Info Text</div>
@@ -179,7 +155,7 @@ exports[`renders ./components/alert/demo/description.vue correctly 1`] = `
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon" data-show="true">
   <!---->
   <div class="ant-alert-content">
     <div class="ant-alert-message">Warning Text</div>
@@ -187,7 +163,7 @@ exports[`renders ./components/alert/demo/description.vue correctly 1`] = `
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon" data-show="true">
   <!---->
   <div class="ant-alert-content">
     <div class="ant-alert-message">Error Text</div>
@@ -198,64 +174,56 @@ exports[`renders ./components/alert/demo/description.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/alert/demo/icon.vue correctly 1`] = `
-<div class="ant-alert ant-alert-success" data-show="true"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle ant-alert-icon"><svg focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-success" data-show="true"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle ant-alert-icon"><svg focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Success Tips</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-info" data-show="true"><span role="img" aria-label="info-circle" class="anticon anticon-info-circle ant-alert-icon"><svg focusable="false" class="" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-info" data-show="true"><span role="img" aria-label="info-circle" class="anticon anticon-info-circle ant-alert-icon"><svg focusable="false" class="" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Informational Notes</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-warning" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-warning" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Warning</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-error" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-error" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Error</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-success ant-alert-with-description" data-show="true"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle ant-alert-icon"><svg focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-success ant-alert-with-description" data-show="true"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle ant-alert-icon"><svg focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Success Tips</div>
     <div class="ant-alert-description">Detailed description and advices about successful copywriting.</div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-info ant-alert-with-description" data-show="true"><span role="img" aria-label="info-circle" class="anticon anticon-info-circle ant-alert-icon"><svg focusable="false" class="" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-info ant-alert-with-description" data-show="true"><span role="img" aria-label="info-circle" class="anticon anticon-info-circle ant-alert-icon"><svg focusable="false" class="" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Informational Notes</div>
     <div class="ant-alert-description">Additional description and informations about copywriting.</div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-warning ant-alert-with-description" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-warning ant-alert-with-description" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Warning</div>
     <div class="ant-alert-description">This is a warning notice about copywriting.</div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-error ant-alert-with-description" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-error ant-alert-with-description" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Error</div>
     <div class="ant-alert-description">This is an error message about copywriting.</div>
@@ -265,55 +233,45 @@ exports[`renders ./components/alert/demo/icon.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/alert/demo/smooth-closed.vue correctly 1`] = `
-<div class="ant-alert ant-alert-success ant-alert-no-icon ant-alert-closable" data-show="true">
+<div role="alert" class="ant-alert ant-alert-success ant-alert-no-icon ant-alert-closable" data-show="true">
   <!---->
   <div class="ant-alert-content">
     <div class="ant-alert-message">Alert Message Text</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
 </div>
 `;
 
 exports[`renders ./components/alert/demo/style.vue correctly 1`] = `
-<div class="ant-alert ant-alert-success ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-success ant-alert-no-icon" data-show="true">
   <!---->
   <div class="ant-alert-content">
     <div class="ant-alert-message">Success Text</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-info ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-info ant-alert-no-icon" data-show="true">
   <!---->
   <div class="ant-alert-content">
     <div class="ant-alert-message">Info Text</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-warning ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-warning ant-alert-no-icon" data-show="true">
   <!---->
   <div class="ant-alert-content">
     <div class="ant-alert-message">Warning Text</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-error ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-error ant-alert-no-icon" data-show="true">
   <!---->
   <div class="ant-alert-content">
     <div class="ant-alert-message">Error Text</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div>
   <!---->
 </div>

components/alert/index.en-US.md

@@ -19,6 +19,7 @@ Alert component for feedback.
 | afterClose | Called when close animation is finished | () => void | - |  |
 | banner | Whether to show as banner | boolean | false |  |
 | closable | Whether Alert can be closed | boolean |  |  |
+| closeIcon | Custom close icon | slot | <CloseOutlined /> | 3.0 |
 | closeText | Close text to show | string\|slot | - |  |
 | description | Additional content of Alert | string\|slot | - |  |
 | icon | Custom icon, effective when `showIcon` is `true` | vnode \| slot | - |  |

components/alert/index.tsx

@@ -1,5 +1,5 @@
-import type { ExtractPropTypes } from 'vue';
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
-import { inject, defineComponent, ref } from 'vue';
+import { defineComponent, ref } from 'vue';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
 import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
@@ -13,9 +13,10 @@ import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import { getTransitionProps, Transition } from '../_util/transition';
 import { isValidElement, getPropsSlot } from '../_util/props-util';
-import { defaultConfigProvider } from '../config-provider';
 import { tuple, withInstall } from '../_util/type';
 import { cloneElement } from '../_util/vnode';
+import type { NodeMouseEventHandler } from '../vc-tree/contextTypes';
+import useConfigInject from '../_util/hooks/useConfigInject';
 
 function noop() {}
 
@@ -37,7 +38,7 @@ const AlertTypes = tuple('success', 'info', 'warning', 'error');
 
 export type AlertType = typeof AlertTypes[number];
 
-const alertProps = {
+export const alertProps = () => ({
   /**
    * Type of Alert styles, options: `success`, `info`, `warning`, `error`
    */
@@ -57,18 +58,18 @@ const alertProps = {
   prefixCls: PropTypes.string,
   banner: PropTypes.looseBool,
   icon: PropTypes.any,
-  onClose: PropTypes.any,
+  closeIcon: PropTypes.any,
-};
+  onClose: Function as PropType<NodeMouseEventHandler>,
+});
 
-export type AlertProps = Partial<ExtractPropTypes<typeof alertProps>>;
+export type AlertProps = Partial<ExtractPropTypes<ReturnType<typeof alertProps>>>;
 
 const Alert = defineComponent({
   name: 'AAlert',
   inheritAttrs: false,
-  props: alertProps,
+  props: alertProps(),
-  emits: ['close'],
   setup(props, { slots, emit, attrs, expose }) {
-    const configProvider = inject('configProvider', defaultConfigProvider);
+    const { prefixCls, direction } = useConfigInject('alert', props);
     const closing = ref(false);
     const closed = ref(false);
     const alertNode = ref();
@@ -94,11 +95,9 @@ const Alert = defineComponent({
     };
 
     expose({ animationEnd });
-
+    const motionStyle = ref<CSSProperties>({});
     return () => {
-      const { prefixCls: customizePrefixCls, banner } = props;
+      const { banner, closeIcon: customCloseIcon = slots.closeIcon?.() } = props;
-      const { getPrefixCls } = configProvider;
-      const prefixCls = getPrefixCls('alert', customizePrefixCls);
 
       let { closable, type, showIcon } = props;
 
@@ -118,22 +117,30 @@ const Alert = defineComponent({
       if (closeText) {
         closable = true;
       }
-
+      const prefixClsValue = prefixCls.value;
-      const alertCls = classNames(prefixCls, {
+      const alertCls = classNames(prefixClsValue, {
-        [`${prefixCls}-${type}`]: true,
+        [`${prefixClsValue}-${type}`]: true,
-        [`${prefixCls}-closing`]: closing.value,
+        [`${prefixClsValue}-closing`]: closing.value,
-        [`${prefixCls}-with-description`]: !!description,
+        [`${prefixClsValue}-with-description`]: !!description,
-        [`${prefixCls}-no-icon`]: !showIcon,
+        [`${prefixClsValue}-no-icon`]: !showIcon,
-        [`${prefixCls}-banner`]: !!banner,
+        [`${prefixClsValue}-banner`]: !!banner,
-        [`${prefixCls}-closable`]: closable,
+        [`${prefixClsValue}-closable`]: closable,
+        [`${prefixClsValue}-rtl`]: direction.value === 'rtl',
       });
 
       const closeIcon = closable ? (
-        <button type="button" onClick={handleClose} class={`${prefixCls}-close-icon`} tabindex={0}>
+        <button
+          type="button"
+          onClick={handleClose}
+          class={`${prefixClsValue}-close-icon`}
+          tabindex={0}
+        >
           {closeText ? (
-            <span class={`${prefixCls}-close-text`}>{closeText}</span>
+            <span class={`${prefixClsValue}-close-text`}>{closeText}</span>
-          ) : (
+          ) : customCloseIcon === undefined ? (
             <CloseOutlined />
+          ) : (
+            customCloseIcon
           )}
         </button>
       ) : null;
@@ -141,29 +148,40 @@ const Alert = defineComponent({
       const iconNode = (icon &&
         (isValidElement(icon) ? (
           cloneElement(icon, {
-            class: `${prefixCls}-icon`,
+            class: `${prefixClsValue}-icon`,
           })
         ) : (
-          <span class={`${prefixCls}-icon`}>{icon}</span>
+          <span class={`${prefixClsValue}-icon`}>{icon}</span>
-        ))) || <IconType class={`${prefixCls}-icon`} />;
+        ))) || <IconType class={`${prefixClsValue}-icon`} />;
 
-      const transitionProps = getTransitionProps(`${prefixCls}-slide-up`, {
+      const transitionProps = getTransitionProps(`${prefixClsValue}-motion`, {
         appear: false,
+        css: true,
         onAfterLeave: animationEnd,
+        onBeforeLeave: (node: HTMLDivElement) => {
+          node.style.maxHeight = `${node.offsetHeight}px`;
+        },
+        onLeave: (node: HTMLDivElement) => {
+          node.style.maxHeight = '0px';
+        },
       });
       return closed.value ? null : (
         <Transition {...transitionProps}>
           <div
+            role="alert"
             {...attrs}
+            style={{ ...(attrs.style as Object), ...motionStyle.value }}
             v-show={!closing.value}
             class={[attrs.class, alertCls]}
             data-show={!closing.value}
             ref={alertNode}
           >
             {showIcon ? iconNode : null}
-            <div class={`${prefixCls}-content`}>
+            <div class={`${prefixClsValue}-content`}>
-              <div class={`${prefixCls}-message`}>{message}</div>
+              {message ? <div class={`${prefixClsValue}-message`}>{message}</div> : null}
-              <div class={`${prefixCls}-description`}>{description}</div>
+              {description ? (
+                <div class={`${prefixClsValue}-description`}>{description}</div>
+              ) : null}
             </div>
             {closeIcon}
           </div>

components/alert/index.zh-CN.md

@@ -20,6 +20,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
 | afterClose | 关闭动画结束后触发的回调函数 | () => void | - |  |
 | banner | 是否用作顶部公告 | boolean | false |  |
 | closable | 默认不显示关闭按钮 | boolean | 无 |  |
+| closeIcon | 自定义关闭 Icon | slot | <CloseOutlined /> | 3.0 |
 | closeText | 自定义关闭按钮 | string\|slot | 无 |  |
 | description | 警告提示的辅助性文字介绍 | string\|slot | 无 |  |
 | icon | 自定义图标，`showIcon` 为 `true` 时有效 | vnode\|slot | - |  |

components/alert/style/index.less

@@ -3,16 +3,6 @@
 
 @alert-prefix-cls: ~'@{ant-prefix}-alert';
 
-@alert-message-color: @heading-color;
-@alert-text-color: @text-color;
-@alert-close-color: @text-color-secondary;
-@alert-close-hover-color: @icon-color-hover;
-
-@alert-with-description-icon-size: 24px;
-@alert-with-description-no-icon-padding-vertical: @padding-md - 1px;
-@alert-with-description-padding-vertical: @padding-md - 1px;
-@alert-with-description-padding: @alert-with-description-padding-vertical 15px;
-
 .@{alert-prefix-cls} {
   .reset-component();
 
@@ -65,9 +55,19 @@
   &-error {
     background-color: @alert-error-bg-color;
     border: @border-width-base @border-style-base @alert-error-border-color;
+
     .@{alert-prefix-cls}-icon {
       color: @alert-error-icon-color;
     }
+
+    .@{alert-prefix-cls}-description > pre {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  &-action {
+    margin-left: @margin-xs;
   }
 
   &-close-icon {
@@ -84,6 +84,7 @@
     .@{iconfont-css-prefix}-close {
       color: @alert-close-color;
       transition: color 0.3s;
+
       &:hover {
         color: @alert-close-hover-color;
       }
@@ -93,6 +94,7 @@
   &-close-text {
     color: @alert-close-color;
     transition: color 0.3s;
+
     &:hover {
       color: @alert-close-hover-color;
     }
@@ -127,18 +129,20 @@
     display: block;
   }
 
-  &&-closing {
+  &&-motion-leave {
-    height: 0 !important;
+    overflow: hidden;
-    margin: 0;
+    opacity: 1;
-    padding-top: 0;
+    transition: max-height 0.3s @ease-in-out-circ, opacity 0.3s @ease-in-out-circ,
-    padding-bottom: 0;
+      padding-top 0.3s @ease-in-out-circ, padding-bottom 0.3s @ease-in-out-circ,
-    transform-origin: 50% 0;
+      margin-bottom 0.3s @ease-in-out-circ;
-    transition: all 0.3s @ease-in-out-circ;
   }
 
-  &-slide-up-leave {
+  &&-motion-leave-active {
-    animation: antAlertSlideUpOut 0.3s @ease-in-out-circ;
+    max-height: 0;
-    animation-fill-mode: both;
+    margin-bottom: 0 !important;
+    padding-top: 0;
+    padding-bottom: 0;
+    opacity: 0;
   }
 
   &-banner {
@@ -148,28 +152,4 @@
   }
 }
 
-@keyframes antAlertSlideUpIn {
+@import './rtl';
-  0% {
-    transform: scaleY(0);
-    transform-origin: 0% 0%;
-    opacity: 0;
-  }
-  100% {
-    transform: scaleY(1);
-    transform-origin: 0% 0%;
-    opacity: 1;
-  }
-}
-
-@keyframes antAlertSlideUpOut {
-  0% {
-    transform: scaleY(1);
-    transform-origin: 0% 0%;
-    opacity: 1;
-  }
-  100% {
-    transform: scaleY(0);
-    transform-origin: 0% 0%;
-    opacity: 0;
-  }
-}

components/alert/style/rtl.less

@@ -0,0 +1,40 @@
+.@{alert-prefix-cls} {
+  &&-rtl {
+    direction: rtl;
+  }
+
+  &-icon {
+    .@{alert-prefix-cls}-rtl & {
+      margin-right: auto;
+      margin-left: @margin-xs;
+    }
+  }
+
+  &-action {
+    .@{alert-prefix-cls}-rtl & {
+      margin-right: @margin-xs;
+      margin-left: auto;
+    }
+  }
+
+  &-close-icon {
+    .@{alert-prefix-cls}-rtl & {
+      margin-right: @margin-xs;
+      margin-left: auto;
+    }
+  }
+
+  &-with-description {
+    .@{alert-prefix-cls}-rtl& {
+      padding-right: @alert-with-description-icon-size;
+      padding-left: @alert-with-description-padding-vertical;
+    }
+
+    .@{alert-prefix-cls}-icon {
+      .@{alert-prefix-cls}-rtl& {
+        margin-right: auto;
+        margin-left: @alert-with-description-padding-vertical;
+      }
+    }
+  }
+}

components/anchor/Anchor.tsx

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes } from 'vue';
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
 import {
   defineComponent,
   nextTick,
@@ -9,7 +9,6 @@ import {
   ref,
   computed,
 } from 'vue';
-import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';
 import addEventListener from '../vc-util/Dom/addEventListener';
 import Affix from '../affix';
@@ -40,7 +39,7 @@ function getOffsetTop(element: HTMLElement, container: AnchorContainer): number
   return rect.top;
 }
 
-const sharpMatcherRegx = /#(\S+)$/;
+const sharpMatcherRegx = /#([\S ]+)$/;
 
 type Section = {
   link: string;
@@ -49,22 +48,22 @@ type Section = {
 
 export type AnchorContainer = HTMLElement | Window;
 
-const anchorProps = {
+export const anchorProps = () => ({
-  prefixCls: PropTypes.string,
+  prefixCls: String,
-  offsetTop: PropTypes.number,
+  offsetTop: Number,
-  bounds: PropTypes.number,
+  bounds: Number,
-  affix: PropTypes.looseBool.def(true),
+  affix: { type: Boolean, default: true },
-  showInkInFixed: PropTypes.looseBool.def(false),
+  showInkInFixed: { type: Boolean, default: false },
-  getContainer: PropTypes.func.def(getDefaultContainer),
+  getContainer: Function as PropType<() => AnchorContainer>,
-  wrapperClass: PropTypes.string,
+  wrapperClass: String,
-  wrapperStyle: PropTypes.style,
+  wrapperStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
-  getCurrentAnchor: PropTypes.func,
+  getCurrentAnchor: Function as PropType<() => string>,
-  targetOffset: PropTypes.number,
+  targetOffset: Number,
-  onChange: PropTypes.func,
+  onChange: Function as PropType<(currentActiveLink: string) => void>,
-  onClick: PropTypes.func,
+  onClick: Function as PropType<(e: MouseEvent, link: { title: any; href: string }) => void>,
-};
+});
 
-export type AnchorProps = Partial<ExtractPropTypes<typeof anchorProps>>;
+export type AnchorProps = Partial<ExtractPropTypes<ReturnType<typeof anchorProps>>>;
 
 export interface AnchorState {
   scrollContainer: HTMLElement | Window;
@@ -76,8 +75,7 @@ export interface AnchorState {
 export default defineComponent({
   name: 'AAnchor',
   inheritAttrs: false,
-  props: anchorProps,
+  props: anchorProps(),
-  emits: ['change', 'click'],
   setup(props, { emit, attrs, slots, expose }) {
     const { prefixCls, getTargetContainer, direction } = useConfigInject('anchor', props);
     const inkNodeRef = ref();
@@ -129,10 +127,10 @@ export default defineComponent({
       emit('change', link);
     };
     const handleScrollTo = (link: string) => {
-      const { offsetTop, getContainer, targetOffset } = props;
+      const { offsetTop, targetOffset } = props;
 
       setCurrentActiveLink(link);
-      const container = getContainer();
+      const container = getContainer.value();
       const scrollTop = getScroll(container, true);
       const sharpLinkMatch = sharpMatcherRegx.exec(link);
       if (!sharpLinkMatch) {
@@ -152,7 +150,7 @@ export default defineComponent({
         callback: () => {
           state.animating = false;
         },
-        getContainer,
+        getContainer: getContainer.value,
       });
     };
     expose({

components/anchor/index.en-US.md

@@ -21,25 +21,25 @@ For displaying anchor hyperlinks on page and jumping between them.
 | affix | Fixed mode of Anchor | boolean | true |  |
 | bounds | Bounding distance of anchor area | number | 5(px) |  |
 | getContainer | Scrolling container | () => HTMLElement | () => window |  |
+| getCurrentAnchor | Customize the anchor highlight | () => string | - | 1.5.0 |
 | offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |  |
 | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |  |
 | showInkInFixed | Whether show ink-balls when `：affix="false"` | boolean | false |  |
+| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | `offsetTop` | 1.5.0 |
 | wrapperClass | The class name of the container | string | - |  |
 | wrapperStyle | The style of the container | object | - |  |
-| getCurrentAnchor | Customize the anchor highlight | () => string | - | 1.5.0 |
-| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | `offsetTop` | 1.5.0 |
 
 ### Events
 
-| Events Name | Description | Arguments | Version |
+| Events Name | Description | Arguments | Version |  |
 | --- | --- | --- | --- | --- |
-| click | set the handler to handle `click` event | Function(e: Event, link: Object) |  |
 | change | Listening for anchor link change | (currentActiveLink: string) => void |  | 1.5.0 |
+| click | set the handler to handle `click` event | Function(e: Event, link: Object) |  |  |
 
 ### Link Props
 
 | Property | Description                               | Type         | Default | Version |
 | -------- | ----------------------------------------- | ------------ | ------- | ------- |
 | href     | target of hyperlink                       | string       |         |         |
-| title    | content of hyperlink                      | string\|slot |         |         |
 | target   | Specifies where to display the linked URL | string       |         | 1.5.0   |
+| title    | content of hyperlink                      | string\|slot |         |         |

components/anchor/index.zh-CN.md

@@ -22,25 +22,25 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
 | affix | 固定模式 | boolean | true |  |
 | bounds | 锚点区域边界 | number | 5(px) |  |
 | getContainer | 指定滚动的容器 | () => HTMLElement | () => window |  |
+| getCurrentAnchor | 自定义高亮的锚点 | () => string | - | 1.5.0 |
 | offsetBottom | 距离窗口底部达到指定偏移量后触发 | number |  |  |
 | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |  |
 | showInkInFixed | `:affix="false"` 时是否显示小圆点 | boolean | false |  |
+| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | `offsetTop` | 1.5.0 |
 | wrapperClass | 容器的类名 | string | - |  |
 | wrapperStyle | 容器样式 | object | - |  |
-| getCurrentAnchor | 自定义高亮的锚点 | () => string | - | 1.5.0 |
-| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | `offsetTop` | 1.5.0 |
 
 ### 事件
 
-| 事件名称 | 说明                   | 回调参数                            | 版本 |
+| 事件名称 | 说明                   | 回调参数                            | 版本 |       |
 | -------- | ---------------------- | ----------------------------------- | ---- | ----- |
-| click    | `click` 事件的 handler | Function(e: Event, link: Object)    |      |
 | change   | 监听锚点链接改变       | (currentActiveLink: string) => void |      | 1.5.0 |
+| click    | `click` 事件的 handler | Function(e: Event, link: Object)    |      |       |
 
 ### Link Props
 
 | 成员   | 说明                             | 类型         | 默认值 | 版本  |
 | ------ | -------------------------------- | ------------ | ------ | ----- |
 | href   | 锚点链接                         | string       |        |       |
-| title  | 文字内容                         | string\|slot |        |       |
 | target | 该属性指定在何处显示链接的资源。 | string       |        | 1.5.0 |
+| title  | 文字内容                         | string\|slot |        |       |

components/anchor/style/index.less

@@ -21,6 +21,7 @@
     top: 0;
     left: 0;
     height: 100%;
+
     &::before {
       position: relative;
       display: block;
@@ -30,6 +31,7 @@
       background-color: @anchor-border-color;
       content: ' ';
     }
+
     &-ball {
       position: absolute;
       left: 50%;
@@ -41,6 +43,7 @@
       border-radius: 8px;
       transform: translateX(-50%);
       transition: top 0.3s ease-in-out;
+
       &.visible {
         display: inline-block;
       }

components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

@@ -14,10 +14,10 @@ exports[`renders ./components/auto-complete/demo/basic.vue correctly 1`] = `
 
 exports[`renders ./components/auto-complete/demo/certain-category.vue correctly 1`] = `
 <div class="certain-category-search-wrapper" style="width: 250px;">
-  <div class="ant-select ant-select-lg certain-category-search ant-select-lg ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" style="width: 100%;">
+  <div class="ant-select certain-category-search ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" style="width: 250px;">
     <!---->
     <!---->
-    <div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-input-affix-wrapper ant-select-selection-search-input"><!----><input placeholder="input here" id="rc_select_TEST_OR_SSR" autocomplete="off" type="search" class="ant-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"><span class="ant-input-suffix"><!----><span role="img" aria-label="search" class="anticon anticon-search certain-category-icon"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span></span></span>
+    <div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-select-selection-search-input"><span class="ant-input-wrapper ant-input-group"><!----><input placeholder="input here" id="rc_select_TEST_OR_SSR" autocomplete="off" type="search" class="ant-input ant-input-lg" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"><span class="ant-input-group-addon"><button class="ant-btn ant-btn-lg ant-input-search-button ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button></span></span></span></span>
       <!----><span class="ant-select-selection-placeholder"><!----></span>
     </div>
     <!---->
@@ -64,7 +64,7 @@ exports[`renders ./components/auto-complete/demo/options.vue correctly 1`] = `
 
 exports[`renders ./components/auto-complete/demo/uncertain-category.vue correctly 1`] = `
 <div class="global-search-wrapper" style="width: 300px;">
-  <div class="ant-select ant-select-lg global-search ant-select-lg ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" style="width: 100%;">
+  <div style="width: 300px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search">
     <!---->
     <!---->
     <div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-input-search-with-button ant-select-selection-search-input"><span class="ant-input-wrapper ant-input-group"><!----><input placeholder="input here" id="rc_select_TEST_OR_SSR" autocomplete="off" type="search" class="ant-input ant-input-lg" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"><span class="ant-input-group-addon"><button class="ant-btn ant-btn-primary ant-btn-lg ant-input-search-button" type="button"><!----><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button></span></span></span></span>

components/auto-complete/demo/certain-category.vue

@@ -21,11 +21,8 @@ Lookup-Patterns - Certain Category.
       v-model:value="value"
       class="certain-category-search"
       dropdown-class-name="certain-category-search-dropdown"
-      :dropdown-match-select-width="false"
+      :dropdown-match-select-width="500"
-      :dropdown-style="{ width: '300px' }"
+      style="width: 250px"
-      size="large"
-      style="width: 100%"
-      option-label-prop="value"
       :options="dataSource"
     >
       <template #option="item">
@@ -52,30 +49,33 @@ Lookup-Patterns - Certain Category.
           </a>
         </template>
         <template v-else>
-          {{ item.title }}
+          <div style="display: flex; justify-content: space-between">
-          <span class="certain-search-item-count">{{ item.count }} people</span>
+            {{ item.value }}
+            <span>
+              <UserOutlined />
+              {{ item.count }}
+            </span>
+          </div>
         </template>
       </template>
-      <a-input placeholder="input here">
+      <a-input-search placeholder="input here" size="large"></a-input-search>
-        <template #suffix><search-outlined class="certain-category-icon" /></template>
-      </a-input>
     </a-auto-complete>
   </div>
 </template>
 
 <script lang="ts">
-import { SearchOutlined } from '@ant-design/icons-vue';
 import { defineComponent, ref } from 'vue';
+import { UserOutlined } from '@ant-design/icons-vue';
 const dataSource = [
   {
     value: 'Libraries',
     options: [
       {
-        value: 'AntDesign',
+        value: 'AntDesignVue',
         count: 10000,
       },
       {
-        value: 'AntDesign UI',
+        value: 'AntDesignVue UI',
         count: 10600,
       },
     ],
@@ -84,11 +84,11 @@ const dataSource = [
     value: 'Solutions',
     options: [
       {
-        value: 'AntDesign UI FAQ',
+        value: 'AntDesignVue UI FAQ',
         count: 60100,
       },
       {
-        value: 'AntDesign FAQ',
+        value: 'AntDesignVue FAQ',
         count: 30010,
       },
     ],
@@ -97,7 +97,7 @@ const dataSource = [
     value: 'Articles',
     options: [
       {
-        value: 'AntDesign design language',
+        value: 'AntDesignVue design language',
         count: 100000,
       },
     ],
@@ -108,7 +108,7 @@ const dataSource = [
 ];
 export default defineComponent({
   components: {
-    SearchOutlined,
+    UserOutlined,
   },
   setup() {
     return {
@@ -142,27 +142,3 @@ export default defineComponent({
   max-height: 300px;
 }
 </style>
-
-<style scoped>
-.certain-category-search-wrapper
-  :deep(.certain-category-search.ant-select-auto-complete)
-  .ant-input-affix-wrapper
-  .ant-input-suffix {
-  right: 12px;
-}
-.certain-category-search-wrapper :deep(.certain-search-item-count) {
-  position: absolute;
-  color: #999;
-  right: 16px;
-}
-.certain-category-search-wrapper
-  :deep(.certain-category-search.ant-select-focused)
-  .certain-category-icon {
-  color: #108ee9;
-}
-.certain-category-search-wrapper :deep(.certain-category-icon) {
-  color: #6e6e6e;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  font-size: 16px;
-}
-</style>

components/auto-complete/demo/uncertain-category.vue

@@ -14,29 +14,30 @@ title:
 
 Lookup-Patterns - Uncertain Category.
 </docs>
-
 <template>
   <div class="global-search-wrapper" style="width: 300px">
     <a-auto-complete
       v-model:value="value"
-      class="global-search"
+      :dropdown-match-select-width="252"
-      size="large"
+      style="width: 300px"
-      style="width: 100%"
-      option-label-prop="title"
       :options="dataSource"
       @select="onSelect"
       @search="handleSearch"
     >
       <template #option="item">
-        Found {{ item.query }} on
+        <div style="display: flex; justify-content: space-between">
-        <a
+          <span>
-          :href="`https://s.taobao.com/search?q=${item.query}`"
+            Found {{ item.query }} on
-          target="_blank"
+            <a
-          rel="noopener noreferrer"
+              :href="`https://s.taobao.com/search?q=${item.query}`"
-        >
+              target="_blank"
-          {{ item.category }}
+              rel="noopener noreferrer"
-        </a>
+            >
-        <span class="global-search-item-count">{{ item.count }} results</span>
+              {{ item.category }}
+            </a>
+          </span>
+          <span>{{ item.count }} results</span>
+        </div>
       </template>
       <a-input-search size="large" placeholder="input here" enter-button></a-input-search>
     </a-auto-complete>
@@ -86,40 +87,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-.global-search-wrapper {
-  padding-right: 50px;
-}
-
-.global-search {
-  width: 100%;
-}
-
-.global-search.ant-select-auto-complete .ant-select-selection--single {
-  margin-right: -46px;
-}
-
-.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
-  padding-right: 62px;
-}
-
-.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.global-search-item {
-  display: flex;
-}
-
-.global-search-item-desc {
-  flex: auto;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.global-search-item-count {
-  flex: none;
-}
-</style>

components/auto-complete/index.en-US.md

@@ -10,7 +10,13 @@ Autocomplete function of input field.
 
 ## When To Use
 
-When there is a need for autocomplete functionality.
+- When you need an input box instead of a selector.
+- When you need input suggestions or helping text.
+
+The differences with Select are:
+
+- AutoComplete is an input box with text hints, and users can type freely. The keyword is aiding **input**.
+- Select is selecting among given choices. The keyword is **select**.
 
 ## API
 
@@ -23,29 +29,29 @@ When there is a need for autocomplete functionality.
 | allowClear | Show clear button, effective in multiple mode only. | boolean | false |  |
 | autofocus | get focus when component mounted | boolean | false |  |
 | backfill | backfill selected item the input when using keyboard | boolean | false |  |
-| #default (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `<Input />` |  |
+| default (for customize input element) | customize input element | slot | `<Input />` |  |
-| options | Data source for autocomplete | [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |  |
-| option | custom render option by slot | v-slot:option="{value, label, [disabled, key, title]}" | - | 3.0 |
-| dropdownMenuStyle | additional style applied to dropdown menu | object |  | 1.5.0 |
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |  |
+| defaultOpen | Initial open state of dropdown | boolean | - |  |
 | disabled | Whether disabled select | boolean | false |  |
 | dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true |  |
+| dropdownMenuStyle | additional style applied to dropdown menu | object |  | 1.5.0 |
 | filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true |  |
+| open | Controlled open state of dropdown | boolean | - |  |
+| option | custom render option by slot | v-slot:option="{value, label, [disabled, key, title]}" | - | 3.0 |
+| options | Data source for autocomplete | [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |  |
 | placeholder | placeholder of input | string | - |  |
 | v-model:value | selected option | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | - |  |
-| defaultOpen | Initial open state of dropdown | boolean | - |  |
-| open | Controlled open state of dropdown | boolean | - |  |
 
 ### events
 
-| Events Name | Description | Arguments | Version |
+| Events Name | Description | Arguments | Version |  |
 | --- | --- | --- | --- | --- |
-| change | Called when select an option or input value change, or value of input is changed | function(value) |  |
+| blur | Called when leaving the component. | function() |  |  |
-| blur | Called when leaving the component. | function() |  |
+| change | Called when select an option or input value change, or value of input is changed | function(value) |  |  |
-| focus | Called when entering the component | function() |  |
+| dropdownVisibleChange | Call when dropdown open | function(open) |  |  |
+| focus | Called when entering the component | function() |  |  |
 | search | Called when searching items. | function(value) | - |  |
-| select | Called when a option is selected. param is option's value and option instance. | function(value, option) |  |
+| select | Called when a option is selected. param is option's value and option instance. | function(value, option) |  |  |
-| dropdownVisibleChange | Call when dropdown open | function(open) |  |
 
 ## Methods
 
@@ -58,7 +64,7 @@ When there is a need for autocomplete functionality.
 
 ### Part of the api in v2 are not available in v3?
 
-AutoComplete is an Input component that supports auto complete tips. As such, it should not support props like `labelInValue` that affect value display. In v2, the AutoComplete implementation can not handle the case where the `value` and `label` are identical. v3 not longer support `label` as the value input.
+AutoComplete is an Input component that supports auto complete tips. As such, it should not support props like `labelInValue` that affect value display. In v3, the AutoComplete implementation can not handle the case where the `value` and `label` are identical. v4 not longer support `label` as the value input.
 
 Besides, to unify the API, `dataSource` is replaced with `options`. You can migrate with the following change:
 

components/auto-complete/index.tsx

@@ -1,4 +1,4 @@
-import type { App, Plugin, VNode, ExtractPropTypes } from 'vue';
+import type { App, VNode, ExtractPropTypes } from 'vue';
 import { defineComponent, ref } from 'vue';
 import Select, { selectProps } from '../select';
 import PropTypes from '../_util/vue-types';
@@ -44,8 +44,6 @@ const AutoComplete = defineComponent({
   },
   emits: ['change', 'select', 'focus', 'blur'],
   slots: ['option'],
-  Option,
-  OptGroup,
   setup(props, { slots, attrs, expose }) {
     warning(
       !('dataSource' in slots),
@@ -145,15 +143,13 @@ const AutoComplete = defineComponent({
 });
 
 /* istanbul ignore next */
-AutoComplete.install = function (app: App) {
+export default Object.assign(AutoComplete, {
-  app.component(AutoComplete.name, AutoComplete);
+  Option,
-  app.component(AutoComplete.Option.displayName, AutoComplete.Option);
+  OptGroup,
-  app.component(AutoComplete.OptGroup.displayName, AutoComplete.OptGroup);
+  install(app: App) {
-  return app;
+    app.component(AutoComplete.name, AutoComplete);
-};
+    app.component(Option.displayName, Option);
-
+    app.component(OptGroup.displayName, OptGroup);
-export default AutoComplete as typeof AutoComplete &
+    return app;
-  Plugin & {
+  },
-    readonly Option: typeof Option;
+});
-    readonly OptGroup: typeof OptGroup;
-  };

components/auto-complete/index.zh-CN.md

@@ -30,36 +30,36 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 | allowClear | 支持清除, 单选模式有效 | boolean | false |  |
 | autofocus | 自动获取焦点 | boolean | false |  |
 | backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |  |
-| #default (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `<Input />` |  |
+| default (自定义输入框) | 自定义输入框 | slot | `<Input />` |  |
-| options | 自动完成的数据源 | [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |  |
-| option | 通过 option 插槽，自定义节点 | v-slot:option="{value, label, [disabled, key, title]}" | - | 3.0 |
-| dropdownMenuStyle | dropdown 菜单自定义样式 | object |  | 1.5.0 |
 | defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |  |
+| defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
 | disabled | 是否禁用 | boolean | false |  |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true |  |
+| dropdownMenuStyle | dropdown 菜单自定义样式 | object |  | 1.5.0 |
 | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |  |
+| open | 是否展开下拉菜单 | boolean | - |  |
+| option | 通过 option 插槽，自定义节点 | v-slot:option="{value, label, [disabled, key, title]}" | - | 3.0 |
+| options | 自动完成的数据源 | [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |  |
 | placeholder | 输入框提示 | string \| slot | - |  |
 | v-model:value | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | 无 |  |
-| defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
-| open | 是否展开下拉菜单 | boolean | - |  |
 
 ### 事件
 
 | 事件名称 | 说明 | 回调参数 | 版本 |
 | --- | --- | --- | --- |
-| change | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) |
+| blur | 失去焦点时的回调 | function() |  |
-| blur | 失去焦点时的回调 | function() |
+| change | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) |  |
-| focus | 获得焦点时的回调 | function() |
+| dropdownVisibleChange | 展开下拉菜单的回调 | function(open) |  |
-| search | 搜索补全项的时候调用 | function(value) |
+| focus | 获得焦点时的回调 | function() |  |
-| select | 被选中时调用，参数为选中项的 value 值 | function(value, option) |
+| search | 搜索补全项的时候调用 | function(value) |  |
-| dropdownVisibleChange | 展开下拉菜单的回调 | function(open) |
+| select | 被选中时调用，参数为选中项的 value 值 | function(value, option) |  |
 
 ## 方法
 
 | 名称    | 描述     | 版本 |
 | ------- | -------- | ---- |
-| blur()  | 移除焦点 |
+| blur()  | 移除焦点 |      |
-| focus() | 获取焦点 |
+| focus() | 获取焦点 |      |
 
 ## FAQ
 

components/auto-complete/style/index.tsx

@@ -3,4 +3,3 @@ import './index.less';
 
 // style dependencies
 import '../../select/style';
-import '../../input/style';

components/avatar/Avatar.tsx

@@ -13,7 +13,7 @@ import { useInjectSize } from '../_util/hooks/useSize';
 
 export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
 
-export const avatarProps = {
+export const avatarProps = () => ({
   prefixCls: PropTypes.string,
   shape: PropTypes.oneOf(tuple('circle', 'square')).def('circle'),
   size: {
@@ -27,17 +27,18 @@ export const avatarProps = {
   alt: PropTypes.string,
   gap: PropTypes.number,
   draggable: PropTypes.bool,
+  crossOrigin: String as PropType<'' | 'anonymous' | 'use-credentials'>,
   loadError: {
     type: Function as PropType<() => boolean>,
   },
-};
+});
 
-export type AvatarProps = Partial<ExtractPropTypes<typeof avatarProps>>;
+export type AvatarProps = Partial<ExtractPropTypes<ReturnType<typeof avatarProps>>>;
 
 const Avatar = defineComponent({
   name: 'AAvatar',
   inheritAttrs: false,
-  props: avatarProps,
+  props: avatarProps(),
   slots: ['icon'],
   setup(props, { slots, attrs }) {
     const isImgExist = ref(true);
@@ -125,7 +126,7 @@ const Avatar = defineComponent({
     });
 
     return () => {
-      const { shape, size: customSize, src, alt, srcset, draggable } = props;
+      const { shape, size: customSize, src, alt, srcset, draggable, crossOrigin } = props;
       const icon = getPropsSlot(slots, props, 'icon');
       const pre = prefixCls.value;
       const size = customSize === 'default' ? groupSize.value : customSize;
@@ -159,6 +160,7 @@ const Avatar = defineComponent({
             srcset={srcset}
             onError={handleImgLoadError}
             alt={alt}
+            crossorigin={crossOrigin}
           />
         );
       } else if (icon) {

components/avatar/Group.tsx

@@ -1,6 +1,6 @@
 import { cloneElement } from '../_util/vnode';
 import type { AvatarSize } from './Avatar';
-import Avatar, { avatarProps } from './Avatar';
+import Avatar from './Avatar';
 import Popover from '../popover';
 import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
 import { defineComponent } from 'vue';
@@ -10,7 +10,7 @@ import { tuple } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import useProvideSize from '../_util/hooks/useSize';
 
-const groupProps = {
+export const groupProps = () => ({
   prefixCls: PropTypes.string,
   maxCount: PropTypes.number,
   maxStyle: {
@@ -18,26 +18,33 @@ const groupProps = {
     default: () => ({} as CSSProperties),
   },
   maxPopoverPlacement: PropTypes.oneOf(tuple('top', 'bottom')).def('top'),
+  maxPopoverTrigger: String as PropType<'hover' | 'focus' | 'click'>,
   /*
    * Size of avatar, options: `large`, `small`, `default`
    * or a custom number size
    * */
-  size: avatarProps.size,
+  size: {
-};
+    type: [Number, String, Object] as PropType<AvatarSize>,
+    default: (): AvatarSize => 'default',
+  },
+});
 
-export type AvatarGroupProps = Partial<ExtractPropTypes<typeof groupProps>> & {
+export type AvatarGroupProps = Partial<ExtractPropTypes<ReturnType<typeof groupProps>>>;
-  size?: AvatarSize;
-};
 
 const Group = defineComponent({
   name: 'AAvatarGroup',
   inheritAttrs: false,
-  props: groupProps,
+  props: groupProps(),
   setup(props, { slots, attrs }) {
     const { prefixCls, direction } = useConfigInject('avatar-group', props);
     useProvideSize<AvatarSize>(props);
     return () => {
-      const { maxPopoverPlacement = 'top', maxCount, maxStyle } = props;
+      const {
+        maxPopoverPlacement = 'top',
+        maxCount,
+        maxStyle,
+        maxPopoverTrigger = 'hover',
+      } = props;
 
       const cls = {
         [prefixCls.value]: true,
@@ -61,7 +68,7 @@ const Group = defineComponent({
           <Popover
             key="avatar-popover-key"
             content={childrenHidden}
-            trigger="hover"
+            trigger={maxPopoverTrigger}
             placement={maxPopoverPlacement}
             overlayClassName={`${prefixCls.value}-popover`}
           >

components/avatar/__tests__/__snapshots__/demo.test.js.snap

@@ -15,23 +15,23 @@ exports[`renders ./components/avatar/demo/dynamic.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/avatar/demo/group.vue correctly 1`] = `
-<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span><span style="background-color: rgb(245, 106, 0);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
+<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(245, 106, 0);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
   <!----><span style="background-color: rgb(135, 208, 104);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span>
 </div>
 <div class="ant-divider ant-divider-horizontal" role="separator">
   <!---->
 </div>
-<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
+<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
   <!----><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">+2</span></span>
 </div>
 <div class="ant-divider ant-divider-horizontal" role="separator">
   <!---->
 </div>
-<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-lg ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
+<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-lg ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
   <!----><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-lg ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">+2</span></span>
 </div>
 `;
 
 exports[`renders ./components/avatar/demo/responsive.vue correctly 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-icon" style="width: 24px; height: 24px; line-height: 24px; font-size: 12px;"><span role="img" aria-label="ant-design" class="anticon anticon-ant-design"><svg focusable="false" class="" data-icon="ant-design" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M716.3 313.8c19-18.9 19-49.7 0-68.6l-69.9-69.9.1.1c-18.5-18.5-50.3-50.3-95.3-95.2-21.2-20.7-55.5-20.5-76.5.5L80.9 474.2a53.84 53.84 0 000 76.4L474.6 944a54.14 54.14 0 0076.5 0l165.1-165c19-18.9 19-49.7 0-68.6a48.7 48.7 0 00-68.7 0l-125 125.2c-5.2 5.2-13.3 5.2-18.5 0L189.5 521.4c-5.2-5.2-5.2-13.3 0-18.5l314.4-314.2c.4-.4.9-.7 1.3-1.1 5.2-4.1 12.4-3.7 17.2 1.1l125.2 125.1c19 19 49.8 19 68.7 0zM408.6 514.4a106.3 106.2 0 10212.6 0 106.3 106.2 0 10-212.6 0zm536.2-38.6L821.9 353.5c-19-18.9-49.8-18.9-68.7.1a48.4 48.4 0 000 68.6l83 82.9c5.2 5.2 5.2 13.3 0 18.5l-81.8 81.7a48.4 48.4 0 000 68.6 48.7 48.7 0 0068.7 0l121.8-121.7a53.93 53.93 0 00-.1-76.4z"></path></svg></span></span>`;
 
-exports[`renders ./components/avatar/demo/type.vue correctly 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">USER</span></span><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><span style="background-color: rgb(135, 208, 104);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span>`;
+exports[`renders ./components/avatar/demo/type.vue correctly 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">USER</span></span><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><span style="background-color: rgb(135, 208, 104);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span>`;

components/avatar/demo/group.vue

@@ -17,7 +17,7 @@ Avatar group display.
 
 <template>
   <a-avatar-group>
-    <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+    <a-avatar src="https://joeschmoe.io/api/v1/random" />
     <a-avatar style="background-color: #f56a00">K</a-avatar>
     <a-tooltip title="Ant User" placement="top">
       <a-avatar style="background-color: #87d068">
@@ -30,7 +30,7 @@ Avatar group display.
   </a-avatar-group>
   <a-divider />
   <a-avatar-group :max-count="2" :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">
-    <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+    <a-avatar src="https://joeschmoe.io/api/v1/random" />
     <a-avatar style="background-color: #1890ff">K</a-avatar>
     <a-tooltip title="Ant User" placement="top">
       <a-avatar style="background-color: #87d068">
@@ -50,7 +50,7 @@ Avatar group display.
       backgroundColor: '#fde3cf',
     }"
   >
-    <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+    <a-avatar src="https://joeschmoe.io/api/v1/random" />
     <a-avatar style="background-color: #1890ff">K</a-avatar>
     <a-tooltip title="Ant User" placement="top">
       <a-avatar style="background-color: #87d068">

components/avatar/demo/type.vue

@@ -23,7 +23,7 @@ Image, Icon and letter are supported, and the latter two kinds avatar can have c
   </a-avatar>
   <a-avatar>U</a-avatar>
   <a-avatar>USER</a-avatar>
-  <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+  <a-avatar src="https://joeschmoe.io/api/v1/random" />
   <a-avatar style="color: #f56a00; background-color: #fde3cf">U</a-avatar>
   <a-avatar style="background-color: #87d068">
     <template #icon>

components/avatar/index.en-US.md

@@ -13,15 +13,16 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| icon | the `Icon` type for an icon avatar, see `Icon` Component | VNode \| slot | - |
+| alt | This attribute defines the alternative text describing the image | string | - |  |
-| shape | the shape of avatar | `circle` \| `square` | `circle` |
+| crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.0 |
-| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 2.2.0 |
-| src | the address of the image for an image avatar | string | - |
-| srcset | a list of sources to use for different screen resolutions | string | - |
-| alt | This attribute defines the alternative text describing the image | string | - |
-| gap | Letter type unit distance between left and right sides | number | 4 | 2.2.0 |
 | draggable | Whether the picture is allowed to be dragged | boolean \| `'true'` \| `'false'` | - | 2.2.0 |
-| loadError | handler when img load error, return false to prevent default fallback behavior | () => boolean | - |
+| gap | Letter type unit distance between left and right sides | number | 4 | 2.2.0 |
+| icon | the `Icon` type for an icon avatar, see `Icon` Component | VNode \| slot | - |  |
+| loadError | handler when img load error, return false to prevent default fallback behavior | () => boolean | - |  |
+| shape | the shape of avatar | `circle` \| `square` | `circle` |  |
+| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 2.2.0 |
+| src | the address of the image for an image avatar | string | - |  |
+| srcset | a list of sources to use for different screen resolutions | string | - |  |
 
 ### Avatar.Group (2.2.0)
 
@@ -29,5 +30,6 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 | --- | --- | --- | --- | --- |
 | maxCount | Max avatars to show | number | - |  |
 | maxPopoverPlacement | The placement of excess avatar Popover | `top` \| `bottom` | `top` |  |
+| maxPopoverTrigger | Set the trigger of excess avatar Popover | `hover` \| `focus` \| `click` | `hover` | 3.0 |
 | maxStyle | The style of excess avatar style | CSSProperties | - |  |
 | size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` |  |

components/avatar/index.zh-CN.md

@@ -18,15 +18,16 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| icon | 设置头像的图标类型，可设为 Icon 的 `type` 或 VNode | VNode \| slot | - |
+| alt | 图像无法显示时的替代文本 | string | - |  |
+| crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.0 |
+| draggable | 图片是否允许拖动 | boolean \| `'true'` \| `'false'` | - | 2.2.0 |
+| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 2.2.0 |
+| icon | 设置头像的图标类型，可设为 Icon 的 `type` 或 VNode | VNode \| slot | - |  |
+| loadError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |  |
 | shape | 指定头像的形状 | `circle` \| `square` | `circle` |  |
 | size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 2.2.0 |
-| src | 图片类头像的资源地址 | string | - |
+| src | 图片类头像的资源地址 | string | - |  |
-| srcset | 设置图片类头像响应式资源地址 | string | - |
+| srcset | 设置图片类头像响应式资源地址 | string | - |  |
-| alt | 图像无法显示时的替代文本 | string | - |
-| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 2.2.0 |
-| draggable | 图片是否允许拖动 | boolean \| `'true'` \| `'false'` | - | 2.2.0 |
-| loadError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |
 
 ### Avatar.Group (2.2.0)
 
@@ -34,5 +35,6 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
 | --- | --- | --- | --- | --- |
 | maxCount | 显示的最大头像个数 | number | - |  |
 | maxPopoverPlacement | 多余头像气泡弹出位置 | `top` \| `bottom` | `top` |  |
+| maxPopoverTrigger | 设置多余头像 Popover 的触发方式 | `hover` \| `focus` \| `click` | `hover` | 3.0 |
 | maxStyle | 多余头像样式 | CSSProperties | - |  |
 | size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` |  |

components/back-top/__tests__/__snapshots__/demo.test.js.snap

@@ -1,9 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/back-top/demo/basic.vue correctly 1`] = `<!----> Scroll down to see the bottom-right <strong style="color: rgba(64, 64, 64, 0.6);">gray</strong> button.`;
+exports[`renders ./components/back-top/demo/basic.vue correctly 1`] = `
+<div class="ant-back-top" style="display: none;">
+  <div class="ant-back-top-content">
+    <div class="ant-back-top-icon"><span role="img" aria-label="vertical-align-top" class="anticon anticon-vertical-align-top"><svg focusable="false" class="" data-icon="vertical-align-top" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"></path></svg></span></div>
+  </div>
+</div> Scroll down to see the bottom-right <strong style="color: rgba(64, 64, 64, 0.6);">gray</strong> button.
+`;
 
 exports[`renders ./components/back-top/demo/custom.vue correctly 1`] = `
 <div id="components-back-top-demo-custom">
-  <!----> Scroll down to see the bottom-right <strong style="color: rgb(16, 136, 233);">blue</strong> button.
+  <div class="ant-back-top" style="display: none;">
+    <div class="ant-back-top-inner">UP</div>
+  </div> Scroll down to see the bottom-right <strong style="color: rgb(16, 136, 233);">blue</strong> button.
 </div>
 `;

components/back-top/index.tsx

@@ -1,7 +1,6 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import {
   defineComponent,
-  inject,
   nextTick,
   onActivated,
   onBeforeUnmount,
@@ -10,17 +9,16 @@ import {
   ref,
   watch,
   onDeactivated,
-  computed,
 } from 'vue';
 import VerticalAlignTopOutlined from '@ant-design/icons-vue/VerticalAlignTopOutlined';
 import PropTypes from '../_util/vue-types';
 import addEventListener from '../vc-util/Dom/addEventListener';
 import getScroll from '../_util/getScroll';
 import { getTransitionProps, Transition } from '../_util/transition';
-import { defaultConfigProvider } from '../config-provider';
 import scrollTo from '../_util/scrollTo';
 import { withInstall } from '../_util/type';
 import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
+import useConfigInject from '../_util/hooks/useConfigInject';
 
 export const backTopProps = {
   visibilityHeight: PropTypes.number.def(400),
@@ -39,7 +37,7 @@ const BackTop = defineComponent({
   props: backTopProps,
   emits: ['click'],
   setup(props, { slots, attrs, emit }) {
-    const configProvider = inject('configProvider', defaultConfigProvider);
+    const { prefixCls, direction } = useConfigInject('back-top', props);
     const domRef = ref();
     const state = reactive({
       visible: false,
@@ -113,8 +111,6 @@ const BackTop = defineComponent({
       scrollRemove();
     });
 
-    const prefixCls = computed(() => configProvider.getPrefixCls('back-top', props.prefixCls));
-
     return () => {
       const defaultElement = (
         <div class={`${prefixCls.value}-content`}>
@@ -129,17 +125,18 @@ const BackTop = defineComponent({
         class: {
           [`${prefixCls.value}`]: true,
           [`${attrs.class}`]: attrs.class,
-          [`${prefixCls.value}-rtl`]: configProvider.direction === 'rtl',
+          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
         },
       };
 
-      const backTopBtn = state.visible ? (
-        <div {...divProps} ref={domRef}>
-          {slots.default?.() || defaultElement}
-        </div>
-      ) : null;
       const transitionProps = getTransitionProps('fade');
-      return <Transition {...transitionProps}>{backTopBtn}</Transition>;
+      return (
+        <Transition {...transitionProps}>
+          <div v-show={state.visible} {...divProps} ref={domRef}>
+            {slots.default?.() || defaultElement}
+          </div>
+        </Transition>
+      );
     };
   },
 });

components/badge/Badge.tsx

@@ -62,7 +62,7 @@ export default defineComponent({
       () => numberedDisplayCount.value === '0' || numberedDisplayCount.value === 0,
     );
 
-    const showAsDot = computed(() => (props.dot && !isZero.value) || hasStatus.value);
+    const showAsDot = computed(() => props.dot && !isZero.value);
 
     const mergedCount = computed(() => (showAsDot.value ? '' : numberedDisplayCount.value));
 

components/badge/__tests__/__snapshots__/demo.test.js.snap

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/badge/demo/basic.vue correctly 1`] = `
-<span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
+<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
-<!----></span><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count" title="0"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">0</p></span></sup>
+<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="0"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">0</p></span></sup>
-<!----></span><span class="ant-badge"><a href="#" class="head-example"></a><span style="color: rgb(245, 34, 45);" role="img" aria-label="clock-circle" class="anticon anticon-clock-circle ant-scroll-number-custom-component"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><span style="color: rgb(245, 34, 45);" role="img" aria-label="clock-circle" class="anticon anticon-clock-circle ant-scroll-number-custom-component"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
 <!----></span>
 `;
 
 exports[`renders ./components/badge/demo/change.vue correctly 1`] = `
-<div><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
+<div><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
   <!----></span>
   <div class="ant-btn-group"><button class="ant-btn" type="button">
       <!----><span role="img" aria-label="minus" class="anticon anticon-minus"><svg focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></span>
@@ -16,9 +16,14 @@ exports[`renders ./components/badge/demo/change.vue correctly 1`] = `
       <!----><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span>
     </button></div>
 </div>
-<div style="margin-top: 10px;"><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup><!----></span><button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch">
+<div class="ant-divider ant-divider-horizontal" role="separator">
-    <!----><span class="ant-switch-inner"><!----></span>
+  <!---->
-  </button></div>
+</div><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup>
+<!----></span><button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch">
+  <div class="ant-switch-handle">
+    <!---->
+  </div><span class="ant-switch-inner"><!----></span>
+</button>
 `;
 
 exports[`renders ./components/badge/demo/colors.vue correctly 1`] = `
@@ -38,19 +43,16 @@ exports[`renders ./components/badge/demo/colors.vue correctly 1`] = `
   <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-gold"></span><span class="ant-badge-status-text">gold</span></span></div>
   <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-lime"></span><span class="ant-badge-status-text">lime</span></span></div>
 </div>
-<h4 style="margin: 16px 0px;">Custom:</h4>
+<div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Custom</span></div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(255, 85, 0);"></span><span class="ant-badge-status-text">#f50</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(45, 183, 245);"></span><span class="ant-badge-status-text">#2db7f5</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(135, 208, 104);"></span><span class="ant-badge-status-text">#87d068</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(16, 142, 233);"></span><span class="ant-badge-status-text">#108ee9</span></span>
-<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(255, 85, 0);"></span><span class="ant-badge-status-text">#f50</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(45, 183, 245);"></span><span class="ant-badge-status-text">#2db7f5</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(135, 208, 104);"></span><span class="ant-badge-status-text">#87d068</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(16, 142, 233);"></span><span class="ant-badge-status-text">#108ee9</span></span></div>
 `;
 
 exports[`renders ./components/badge/demo/dot.vue correctly 1`] = `
-<div id="components-badge-demo-dot"><span class="ant-badge"><span role="img" aria-label="notification" class="anticon anticon-notification"><svg focusable="false" class="" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"></path></svg></span><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup>
+<span class="ant-badge"><span style="font-size: 16px;" role="img" aria-label="notification" class="anticon anticon-notification"><svg focusable="false" class="" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"></path></svg></span><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup>
-  <!----></span><span class="ant-badge"><span role="img" aria-label="notification" class="anticon anticon-notification"><svg focusable="false" class="" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"></path></svg></span><sup data-show="false" class="ant-scroll-number ant-badge-count" title="0" style="display: none;">0</sup>
+<!----></span><span class="ant-badge"><a href="#">Link something</a><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup><!----></span>
-  <!----></span><span class="ant-badge"><a href="#">Link something</a><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup><!----></span>
-</div>
 `;
 
 exports[`renders ./components/badge/demo/link.vue correctly 1`] = `
-<a href="#"><span class="ant-badge"><span class="head-example"></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
+<a href="#"><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
   <!----></span>
 </a>
 `;
@@ -62,19 +64,147 @@ exports[`renders ./components/badge/demo/no-wrapper.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/badge/demo/overflow.vue correctly 1`] = `
-<span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span></sup>
+<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span></sup>
-<!----></span><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="100">99+</sup><!----></span><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99">10+</sup><!----></span><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="1000">999+</sup><!----></span>
+<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="100">99+</sup>
+<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99">10+</sup>
+<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="1000">999+</sup>
+<!----></span>
 `;
 
 exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
 <div class="ant-ribbon-wrapper">
-  <div class="ant-card ant-card-bordered">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
     <!---->
-    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
-    <div class="ant-card-body">And raises the spyglass.</div>
     <!---->
   </div>
-  <div class="ant-ribbon ant-ribbon-placement-end"><span class="ant-ribbon-text">Pushes open the window</span>
+  <div class="ant-ribbon ant-ribbon-placement-end"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"><span class="ant-ribbon-text">Hippies</span>
     <div class="ant-ribbon-corner"></div>
   </div>
 </div>
@@ -83,7 +213,6 @@ exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
 exports[`renders ./components/badge/demo/status.vue correctly 1`] = `<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text"><!----></span></span><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text"><!----></span></span><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-default"></span><span class="ant-badge-status-text"><!----></span></span><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text"><!----></span></span><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text"><!----></span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text">Success</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text">Error</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-default"></span><span class="ant-badge-status-text">Default</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text">Processing</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text">warning</span></span>`;
 
 exports[`renders ./components/badge/demo/title.vue correctly 1`] = `
-<div id="components-badge-demo-title"><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count" title="Custom hover text"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
+<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="Custom hover text"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
-  <!----></span>
+<!----></span>
-</div>
 `;

components/badge/demo/basic.vue

@@ -1,7 +1,7 @@
 <docs>
 ---
 order: 0
-title: 
+title:
   zh-CN: 基本
   en-US: Basic
 ---
@@ -17,16 +17,16 @@ Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZe
 </docs>
 <template>
   <a-badge count="5">
-    <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
   </a-badge>
   <a-badge count="0" show-zero>
-    <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
   </a-badge>
   <a-badge>
     <template #count>
       <clock-circle-outlined style="color: #f5222d" />
     </template>
-    <a href="#" class="head-example"></a>
+    <a-avatar shape="square" size="large" />
   </a-badge>
 </template>
 

components/badge/demo/change.vue

@@ -1,7 +1,7 @@
 <docs>
 ---
 order: 5
-title: 
+title:
   zh-CN: 动态
   en-US: Dynamic
 ---
@@ -11,14 +11,14 @@ title:
 展示动态变化的效果。
 
 ## en-US
-  
+
 The count will be animated as it changes.
 </docs>
 
 <template>
   <div>
     <a-badge :count="count">
-      <a href="#" class="head-example" />
+      <a-avatar shape="square" size="large" />
     </a-badge>
     <a-button-group>
       <a-button @click="decline">
@@ -29,12 +29,11 @@ The count will be animated as it changes.
       </a-button>
     </a-button-group>
   </div>
-  <div style="margin-top: 10px">
+  <a-divider />
-    <a-badge :dot="show">
+  <a-badge :dot="show">
-      <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
-    </a-badge>
+  </a-badge>
-    <a-switch v-model:checked="show" />
+  <a-switch v-model:checked="show" />
-  </div>
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';

components/badge/demo/colors.vue

@@ -1,7 +1,7 @@
 <docs>
 ---
 order: 7
-title: 
+title:
   zh-CN: 多彩徽标
   en-US: Colorful Badge
 ---
@@ -23,16 +23,14 @@ New feature after 3.16.0. We preset a series of colorful Badge styles for use in
       <a-badge :color="color" :text="color" />
     </div>
   </div>
-  <h4 style="margin: 16px 0">Custom:</h4>
+  <a-divider orientation="left">Custom</a-divider>
-  <div>
+  <a-badge color="#f50" text="#f50" />
-    <a-badge color="#f50" text="#f50" />
+  <br />
-    <br />
+  <a-badge color="#2db7f5" text="#2db7f5" />
-    <a-badge color="#2db7f5" text="#2db7f5" />
+  <br />
-    <br />
+  <a-badge color="#87d068" text="#87d068" />
-    <a-badge color="#87d068" text="#87d068" />
+  <br />
-    <br />
+  <a-badge color="#108ee9" text="#108ee9" />
-    <a-badge color="#108ee9" text="#108ee9" />
-  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';

components/badge/demo/dot.vue

@@ -1,7 +1,7 @@
 <docs>
 ---
 order: 3
-title: 
+title:
   zh-CN: 讨嫌的小红点
   en-US: Red badge
 ---
@@ -17,17 +17,12 @@ If count equals 0, it won't display the dot.
 </docs>
 
 <template>
-  <div id="components-badge-demo-dot">
+  <a-badge dot>
-    <a-badge dot>
+    <notification-outlined style="font-size: 16px" />
-      <notification-outlined />
+  </a-badge>
-    </a-badge>
+  <a-badge dot>
-    <a-badge :count="0" dot>
+    <a href="#">Link something</a>
-      <notification-outlined />
+  </a-badge>
-    </a-badge>
-    <a-badge dot>
-      <a href="#">Link something</a>
-    </a-badge>
-  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
@@ -38,11 +33,3 @@ export default defineComponent({
   },
 });
 </script>
-<style scoped>
-#components-badge-demo-dot .anticon-notification {
-  width: 16px;
-  height: 16px;
-  line-height: 16px;
-  font-size: 16px;
-}
-</style>

components/badge/demo/index.vue

@@ -8,8 +8,8 @@
     <Change />
     <Title />
     <Colors />
-    <Link />
     <Ribbon />
+    <Link />
   </demo-sort>
 </template>
 <script lang="ts">

components/badge/demo/link.vue

@@ -1,7 +1,7 @@
 <docs>
 ---
 order: 8
-title: 
+title:
   zh-CN: 可点击
   en-US: Clickable
 ---
@@ -18,7 +18,7 @@ The badge can be wrapped with `a` tag to make it linkable.
 <template>
   <a href="#">
     <a-badge count="5">
-      <span class="head-example" />
+      <a-avatar shape="square" size="large" />
     </a-badge>
   </a>
 </template>

components/badge/demo/overflow.vue

@@ -1,7 +1,7 @@
 <docs>
 ---
 order: 2
-title: 
+title:
   zh-CN: 封顶数字
   en-US: Overflow Count
 ---
@@ -18,15 +18,15 @@ title:
 
 <template>
   <a-badge :count="99">
-    <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
   </a-badge>
   <a-badge :count="100">
-    <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
   </a-badge>
   <a-badge :count="99" :overflow-count="10">
-    <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
   </a-badge>
   <a-badge :count="1000" :overflow-count="999">
-    <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
   </a-badge>
 </template>

components/badge/demo/ribbon.vue

@@ -6,17 +6,38 @@ title:
   en-US: Ribbon
 ---
 
-## zh-CN 
+## zh-CN
-使用缎带型的徽标。 
+使用缎带型的徽标。
 
-## en-US 
+## en-US
 
-Use ribbon badge. 
+Use ribbon badge.
 
 </docs>
 
 <template>
-  <a-badge-ribbon text="Pushes open the window">
+  <a-badge-ribbon text="Hippies">
-    <a-card>And raises the spyglass.</a-card>
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="pink">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="red">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="cyan">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="green">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="purple">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="volcano">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="magenta">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
   </a-badge-ribbon>
 </template>

components/badge/demo/title.vue

@@ -1,7 +1,7 @@
 <docs>
 ---
 order: 6
-title: 
+title:
   zh-CN: 自定义标题
   en-US: Title
 ---
@@ -17,21 +17,7 @@ The badge will display `title` when hovered over, instead of `count`.
 </docs>
 
 <template>
-  <div id="components-badge-demo-title">
+  <a-badge :count="5" title="Custom hover text">
-    <a-badge :count="5" title="Custom hover text">
+    <a-avatar shape="square" size="large" />
-      <a href="#" class="head-example" />
+  </a-badge>
-    </a-badge>
-  </div>
 </template>
-<style scoped>
-#components-badge-demo-title .ant-badge:not(.ant-badge-status) {
-  margin-right: 20px;
-}
-.head-example {
-  width: 42px;
-  height: 42px;
-  border-radius: 4px;
-  background: #eee;
-  display: inline-block;
-}
-</style>

components/badge/index.zh-CN.md

@@ -31,12 +31,12 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
 | color | 自定义小圆点的颜色 | string | - | 1.5.0 |
 | count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number \| string \| slot |  |  |
 | dot | 不展示数字，只有一个小红点 | boolean | false |  |
+| numberStyle | 设置状态点的样式 | object | '' |  |
 | offset | 设置状态点的位置偏移，格式为 [x, y] | [number\|string, number\|string] | - |  |
 | overflowCount | 展示封顶的数字值 | number | 99 |  |
 | showZero | 当数值为 0 时，是否展示 Badge | boolean | false |  |
 | status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |  |
 | text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' |  |
-| numberStyle | 设置状态点的样式 | object | '' |  |
 | title | 设置鼠标放在状态点上时显示的文字 | string | `count` |  |
 
 ### Badge.Ribbon (2.0.1+)

components/badge/style/index.less

@@ -25,6 +25,7 @@
     background: @badge-color;
     border-radius: (@badge-height / 2);
     box-shadow: 0 0 0 1px @shadow-color-inverse;
+
     a,
     a:hover {
       color: @badge-text-color;
@@ -54,6 +55,11 @@
     box-shadow: 0 0 0 1px @shadow-color-inverse;
   }
 
+  // Tricky way to resolve https://github.com/ant-design/ant-design/issues/30088
+  &-dot.@{number-prefix-cls} {
+    transition: background 1.5s;
+  }
+
   &-count,
   &-dot,
   .@{number-prefix-cls}-custom-component {
@@ -81,12 +87,15 @@
       vertical-align: middle;
       border-radius: 50%;
     }
+
     &-success {
       background-color: @success-color;
     }
+
     &-processing {
       position: relative;
       background-color: @processing-color;
+
       &::after {
         position: absolute;
         top: 0;
@@ -99,12 +108,15 @@
         content: '';
       }
     }
+
     &-default {
       background-color: @normal-color;
     }
+
     &-error {
       background-color: @error-color;
     }
+
     &-warning {
       background-color: @warning-color;
     }
@@ -152,21 +164,18 @@
       vertical-align: middle;
     }
 
-    .@{number-prefix-cls}-custom-component {
+    .@{number-prefix-cls}-custom-component,
+    .@{badge-prefix-cls}-count {
       transform: none;
     }
 
     .@{number-prefix-cls}-custom-component,
-    .@{ant-prefix}-scroll-number {
+    .@{number-prefix-cls} {
       position: relative;
       top: auto;
       display: block;
       transform-origin: 50% 50%;
     }
-
-    .@{badge-prefix-cls}-count {
-      transform: none;
-    }
   }
 }
 
@@ -175,6 +184,7 @@
     transform: scale(0.8);
     opacity: 0.5;
   }
+
   100% {
     transform: scale(2.4);
     opacity: 0;
@@ -183,12 +193,16 @@
 
 // Safari will blink with transform when inner element has absolute style.
 .safari-fix-motion() {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-transform-style: preserve-3d;
   -webkit-backface-visibility: hidden;
+  /* stylelint-enable property-no-vendor-prefix */
 }
 
 .@{number-prefix-cls} {
   overflow: hidden;
+  direction: ltr;
+
   &-only {
     position: relative;
     display: inline-block;
@@ -213,6 +227,7 @@
     transform: scale(0) translate(50%, -50%);
     opacity: 0;
   }
+
   100% {
     transform: scale(1) translate(50%, -50%);
   }
@@ -222,6 +237,7 @@
   0% {
     transform: scale(1) translate(50%, -50%);
   }
+
   100% {
     transform: scale(0) translate(50%, -50%);
     opacity: 0;
@@ -233,6 +249,7 @@
     transform: scale(0);
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
   }
@@ -242,6 +259,7 @@
   0% {
     transform: scale(1);
   }
+
   100% {
     transform: scale(0);
     opacity: 0;

components/badge/style/rtl.less

@@ -3,9 +3,9 @@
     direction: rtl;
   }
 
-  &-count,
+  &:not(&-not-a-wrapper) &-count,
-  &-dot,
+  &:not(&-not-a-wrapper) &-dot,
-  .@{number-prefix-cls}-custom-component {
+  &:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component {
     .@{badge-prefix-cls}-rtl & {
       right: auto;
       left: 0;
@@ -15,7 +15,7 @@
     }
   }
 
-  .@{badge-prefix-cls}-rtl& .@{number-prefix-cls}-custom-component {
+  &-rtl&:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component {
     right: auto;
     left: 0;
     transform: translate(-50%, -50%);
@@ -30,25 +30,6 @@
       }
     }
   }
-
-  &-zoom-appear,
-  &-zoom-enter {
-    .@{badge-prefix-cls}-rtl & {
-      animation-name: antZoomBadgeInRtl;
-    }
-  }
-
-  &-zoom-leave {
-    .@{badge-prefix-cls}-rtl & {
-      animation-name: antZoomBadgeOutRtl;
-    }
-  }
-
-  &-not-a-wrapper {
-    .@{badge-prefix-cls}-count {
-      transform: none;
-    }
-  }
 }
 
 .@{ribbon-prefix-cls}-rtl {
@@ -62,6 +43,7 @@
       right: unset;
       left: 0;
       border-color: currentColor currentColor transparent transparent;
+
       &::after {
         border-color: currentColor currentColor transparent transparent;
       }
@@ -76,29 +58,10 @@
       right: 0;
       left: unset;
       border-color: currentColor transparent transparent currentColor;
+
       &::after {
         border-color: currentColor transparent transparent currentColor;
       }
     }
   }
 }
-
-@keyframes antZoomBadgeInRtl {
-  0% {
-    transform: scale(0) translate(-50%, -50%);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1) translate(-50%, -50%);
-  }
-}
-
-@keyframes antZoomBadgeOutRtl {
-  0% {
-    transform: scale(1) translate(-50%, -50%);
-  }
-  100% {
-    transform: scale(0) translate(-50%, -50%);
-    opacity: 0;
-  }
-}

components/breadcrumb/Breadcrumb.tsx

@@ -66,9 +66,9 @@ export default defineComponent({
       return path;
     };
 
-    const addChildPath = (paths: string[], childPath = '', params: unknown) => {
+    const addChildPath = (paths: string[], childPath: string, params: unknown) => {
       const originalPaths = [...paths];
-      const path = getPath(childPath, params);
+      const path = getPath(childPath || '', params);
       if (path) {
         originalPaths.push(path);
       }

components/breadcrumb/BreadcrumbItem.tsx

@@ -30,7 +30,7 @@ export default defineComponent({
       const overlay = getPropsSlot(slots, props, 'overlay');
       if (overlay) {
         return (
-          <DropDown overlay={overlay} placement="bottomCenter">
+          <DropDown overlay={overlay} placement="bottom">
             <span class={`${prefixCls}-overlay-link`}>
               {breadcrumbItem}
               <DownOutlined />

components/breadcrumb/index.en-US.md

@@ -31,7 +31,7 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 
 #### Events
 
-| Events Name | Description                   | Arguments            | Version |
+| Events Name | Description                   | Arguments            | Version |       |
 | ----------- | ----------------------------- | -------------------- | ------- | ----- |
 | click       | handler to handle click event | (e:MouseEvent)=>void | -       | 1.5.0 |
 

components/breadcrumb/index.zh-CN.md

@@ -32,7 +32,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
 
 #### 事件
 
-| 事件名称 | 说明     | 回调参数             | 版本 |
+| 事件名称 | 说明     | 回调参数             | 版本 |       |
 | -------- | -------- | -------------------- | ---- | ----- |
 | click    | 单击事件 | (e:MouseEvent)=>void | -    | 1.5.0 |
 

components/breadcrumb/style/index.less

@@ -16,6 +16,7 @@
   a {
     color: @breadcrumb-link-color;
     transition: color 0.3s;
+
     &:hover {
       color: @breadcrumb-link-color-hover;
     }
@@ -23,6 +24,7 @@
 
   & > span:last-child {
     color: @breadcrumb-last-item-color;
+
     a {
       color: @breadcrumb-last-item-color;
     }

components/breadcrumb/style/index.tsx

@@ -1,5 +1,6 @@
 import '../../style/index.less';
 import './index.less';
 
+// style dependencies
 import '../../menu/style';
 import '../../dropdown/style';

components/button/button-group.tsx

@@ -5,6 +5,7 @@ import useConfigInject from '../_util/hooks/useConfigInject';
 
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { SizeType } from '../config-provider';
+import UnreachableException from '../_util/unreachableException';
 
 const buttonGroupProps = {
   prefixCls: PropTypes.string,
@@ -33,8 +34,12 @@ export default defineComponent({
         case 'small':
           sizeCls = 'sm';
           break;
-        default:
+        case 'middle':
+        case undefined:
           break;
+        default:
+          // eslint-disable-next-line no-console
+          console.warn(new UnreachableException(size).error);
       }
       return {
         [`${prefixCls.value}`]: true,

components/button/button.tsx

@@ -23,7 +23,6 @@ type Loading = boolean | number;
 
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
-const props = buttonTypes();
 
 function isUnborderedButtonType(type: ButtonType | undefined) {
   return type === 'text' || type === 'link';
@@ -33,11 +32,11 @@ export default defineComponent({
   name: 'AButton',
   inheritAttrs: false,
   __ANT_BUTTON: true,
-  props,
+  props: buttonTypes(),
   slots: ['icon'],
   emits: ['click', 'mousedown'],
   setup(props, { slots, attrs, emit }) {
-    const { prefixCls, autoInsertSpaceInButton, direction } = useConfigInject('btn', props);
+    const { prefixCls, autoInsertSpaceInButton, direction, size } = useConfigInject('btn', props);
 
     const buttonNodeRef = ref<HTMLElement>(null);
     const delayTimeoutRef = ref(undefined);
@@ -73,25 +72,17 @@ export default defineComponent({
     );
 
     const classes = computed(() => {
-      const { type, shape, size, ghost, block, danger } = props;
+      const { type, shape = 'default', ghost, block, danger } = props;
       const pre = prefixCls.value;
-      // large => lg
+
-      // small => sm
+      const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined };
-      let sizeCls = '';
+      const sizeFullname = size.value;
-      switch (size) {
+      const sizeCls = sizeFullname ? sizeClassNameMap[sizeFullname] || '' : '';
-        case 'large':
+
-          sizeCls = 'lg';
-          break;
-        case 'small':
-          sizeCls = 'sm';
-          break;
-        default:
-          break;
-      }
       return {
         [`${pre}`]: true,
         [`${pre}-${type}`]: type,
-        [`${pre}-${shape}`]: shape,
+        [`${pre}-${shape}`]: shape !== 'default' && shape,
         [`${pre}-${sizeCls}`]: sizeCls,
         [`${pre}-loading`]: innerLoading.value,
         [`${pre}-background-ghost`]: ghost && !isUnborderedButtonType(type),
@@ -206,7 +197,11 @@ export default defineComponent({
         return buttonNode;
       }
 
-      return <Wave ref="wave">{buttonNode}</Wave>;
+      return (
+        <Wave ref="wave" disabled={!!innerLoading.value}>
+          {buttonNode}
+        </Wave>
+      );
     };
   },
 });

components/button/buttonTypes.ts

@@ -6,7 +6,7 @@ import type { SizeType } from '../config-provider';
 
 const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'link', 'text');
 export type ButtonType = typeof ButtonTypes[number];
-const ButtonShapes = tuple('circle', 'round');
+const ButtonShapes = tuple('default', 'circle', 'round');
 export type ButtonShape = typeof ButtonShapes[number];
 
 const ButtonHTMLTypes = tuple('submit', 'button', 'reset');

components/button/demo/ghost.vue

@@ -21,6 +21,6 @@ title:
     <a-button type="primary" ghost>Primary</a-button>
     <a-button ghost>Default</a-button>
     <a-button type="dashed" ghost>Dashed</a-button>
-    <a-button danger ghost>Danger</a-button>
+    <a-button type="primary" danger ghost>Danger</a-button>
   </div>
 </template>

components/button/demo/icon.vue

@@ -49,6 +49,52 @@ If you want specific control over the positioning and placement of the `Icon`, t
     <template #icon><SearchOutlined /></template>
     Search
   </a-button>
+  <a-button href="https://www.google.com">
+    <template #icon><SearchOutlined /></template>
+  </a-button>
+  <br />
+  <br />
+  <a-tooltip title="search">
+    <a-button type="primary" shape="circle" size="large">
+      <template #icon><SearchOutlined /></template>
+    </a-button>
+  </a-tooltip>
+  <a-button type="primary" shape="circle" size="large">A</a-button>
+  <a-button type="primary" size="large">
+    <template #icon><SearchOutlined /></template>
+    Search
+  </a-button>
+  <a-tooltip title="search">
+    <a-button shape="circle" size="large">
+      <template #icon><SearchOutlined /></template>
+    </a-button>
+  </a-tooltip>
+  <a-button size="large">
+    <template #icon><SearchOutlined /></template>
+    Search
+  </a-button>
+  <br />
+  <a-tooltip title="search">
+    <a-button shape="circle" size="large">
+      <template #icon><SearchOutlined /></template>
+    </a-button>
+  </a-tooltip>
+  <a-button size="large">
+    <template #icon><SearchOutlined /></template>
+    Search
+  </a-button>
+  <a-tooltip title="search">
+    <a-button type="dashed" shape="circle" size="large">
+      <template #icon><SearchOutlined /></template>
+    </a-button>
+  </a-tooltip>
+  <a-button type="dashed" size="large">
+    <template #icon><SearchOutlined /></template>
+    Search
+  </a-button>
+  <a-button size="large" href="https://www.google.com">
+    <template #icon><SearchOutlined /></template>
+  </a-button>
 </template>
 <script>
 import { SearchOutlined } from '@ant-design/icons-vue';

components/button/demo/loading.vue

@@ -16,25 +16,34 @@ A loading indicator can be added to a button by setting the `loading` property o
 </docs>
 
 <template>
-  <a-button type="primary" loading>Loading</a-button>
+  <a-space style="width: 100%">
-  <a-button type="primary" size="small" loading>Loading</a-button>
+    <a-button type="primary" loading>Loading</a-button>
-  <br />
+    <a-button type="primary" size="small" loading>Loading</a-button>
-  <a-button type="primary" :loading="loading" @mouseenter="loading = true">mouseenter me!</a-button>
+  </a-space>
-  <a-button type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
+  <a-space style="width: 100%">
-    延迟1s
+    <a-button type="primary" :loading="loading" @mouseenter="loading = true">
-  </a-button>
+      mouseenter me!
-  <br />
+    </a-button>
-  <a-button type="primary" loading />
+    <a-button type="primary" :loading="iconLoading" @click="enterIconLoading">
-  <a-button type="primary" shape="circle" loading />
+      <template #icon><PoweroffOutlined /></template>
-  <a-button danger shape="round" loading />
+      延迟1s
+    </a-button>
+  </a-space>
+  <a-space style="width: 100%">
+    <a-button type="primary" loading />
+    <a-button type="primary" shape="circle" loading />
+    <a-button danger shape="round" loading />
+  </a-space>
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+import { PoweroffOutlined } from '@ant-design/icons-vue';
 
 interface DelayLoading {
   delay: number;
 }
 export default defineComponent({
+  components: { PoweroffOutlined },
   setup() {
     const iconLoading = ref<boolean | DelayLoading>(false);
     const enterIconLoading = () => {

components/button/demo/size.vue

@@ -46,8 +46,8 @@ If a large or small button is desired, set the `size` property to either `large`
   <a-button type="primary" shape="round" :size="size">
     <template #icon>
       <DownloadOutlined />
-      Download
     </template>
+    Download
   </a-button>
   <a-button type="primary" shape="round" :size="size">
     <template #icon>

components/button/index.en-US.md

@@ -40,7 +40,7 @@ Different button styles can be generated by setting Button properties. The recom
 | htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |  |
 | icon | set the icon of button, see: Icon component | v-slot | - |  |
 | loading | set the loading status of button | boolean \| { delay: number } | `false` |  |
-| shape | can be set button shape | `circle` \| `round` | - |  |
+| shape | Can be set button shape | `default` \| `circle` \| `round` | 'default' |  |
 | size | set the size of button | `large` \| `middle` \| `small` | `middle` |  |
 | target | same as target attribute of a, works when href is specified | string | - |  |
 | type | can be set button type | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |

components/button/index.zh-CN.md

@@ -18,7 +18,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
 - 默认按钮：用于没有主次之分的一组行动点。
 - 虚线按钮：常用于添加操作。
 - 文本按钮：用于最次级的行动点。
-- 链接按钮：用于作为外链的行动点。
+- 链接按钮：一般用于链接，即导航至某位置。
 
 以及四种状态属性与上面配合使用。
 
@@ -43,7 +43,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
 | htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |  |
 | icon | 设置按钮的图标类型 | v-slot | - |  |
 | loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` |  |
-| shape | 设置按钮形状 | `circle` \| `round` | - |  |
+| shape | 设置按钮形状 | `default` \| `circle` \| `round` | 'default' |  |
 | size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` |  |
 | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |  |
 | type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |

components/button/style/index.less

@@ -18,7 +18,7 @@
   // Fixing https://github.com/ant-design/ant-design/issues/18107
   // Fixing https://github.com/ant-design/ant-design/issues/13214
   // It is a render problem of chrome, which is only happened in the codesandbox demo
-  // 0.001px solution works and I don't why
+  // 0.001px solution works and I don't know why
   line-height: @btn-line-height;
   .btn();
   .btn-default();
@@ -101,7 +101,21 @@
 
   &-icon-only {
     .btn-square(@btn-prefix-cls);
+    vertical-align: -3px;
+
+    > .@{iconfont-css-prefix} {
+      display: flex;
+      justify-content: center;
+    }
+  }
+
+  // https://github.com/ant-design/ant-design/issues/32365
+  a&-icon-only {
     vertical-align: -1px;
+
+    > .@{iconfont-css-prefix} {
+      display: inline;
+    }
   }
 
   &-round {
@@ -146,48 +160,32 @@
 
   &&-loading {
     position: relative;
-    &:not([disabled]) {
+    cursor: default;
-      pointer-events: none;
-    }
 
     &::before {
       display: block;
     }
   }
 
-  &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
+  & > &-loading-icon {
-    padding-left: 29px;
+    transition: width 0.3s @ease-in-out, opacity 0.3s @ease-in-out;
-    .@{iconfont-css-prefix}:not(:last-child) {
-      margin-left: -14px;
-    }
-  }
 
-  &-sm&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
-    padding-left: 24px;
     .@{iconfont-css-prefix} {
-      margin-left: -17px;
+      padding-right: @padding-xs;
+      animation: none;
+      // for smooth button padding transition
+      svg {
+        animation: loadingCircle 1s infinite linear;
+      }
+    }
+
+    &:only-child {
+      .@{iconfont-css-prefix} {
+        padding-right: 0;
+      }
     }
   }
 
-  // & > &-loading-icon {
-  //   transition: all 0.3s @ease-in-out;
-
-  //   .@{iconfont-css-prefix} {
-  //     padding-right: @padding-xs;
-  //     animation: none;
-  //     // for smooth button padding transition
-  //     svg {
-  //       animation: loadingCircle 1s infinite linear;
-  //     }
-  //   }
-
-  //   &:only-child {
-  //     .@{iconfont-css-prefix} {
-  //       padding-right: 0;
-  //     }
-  //   }
-  // }
-
   &-group {
     .btn-group(@btn-prefix-cls);
   }
@@ -204,26 +202,49 @@
     margin-left: @margin-xs;
   }
 
-  &-background-ghost {
+  &&-background-ghost {
     color: @btn-default-ghost-color;
-    background: @btn-default-ghost-bg !important;
     border-color: @btn-default-ghost-border;
+
+    &,
+    &:hover,
+    &:active,
+    &:focus {
+      background: @btn-default-ghost-bg;
+    }
+
+    &:hover,
+    &:focus {
+      color: @primary-color-hover;
+      border-color: @primary-color-hover;
+    }
+
+    &:active {
+      color: @primary-color-active;
+      border-color: @primary-color-active;
+    }
+
+    &[disabled] {
+      color: @disabled-color;
+      background: @btn-default-ghost-bg;
+      border-color: @btn-default-border;
+    }
   }
 
   &-background-ghost&-primary {
-    .button-variant-ghost(@btn-primary-bg);
+    .button-variant-ghost(@btn-primary-bg, @btn-primary-bg, @primary-color-hover, @primary-color-active);
   }
 
   &-background-ghost&-danger {
-    .button-variant-ghost(@btn-danger-border);
+    .button-variant-ghost(@btn-danger-border, @btn-danger-border, @error-color-hover, @error-color-active);
   }
 
   &-background-ghost&-dangerous {
-    .button-variant-ghost(@btn-danger-border);
+    .button-variant-ghost(@btn-danger-border, @btn-danger-border, @error-color-hover, @error-color-active);
   }
 
   &-background-ghost&-dangerous&-link {
-    .button-variant-ghost(@btn-danger-border, transparent);
+    .button-variant-ghost(@btn-danger-border, transparent, @error-color-hover, @error-color-active);
   }
 
   &-two-chinese-chars::first-letter {
@@ -235,7 +256,7 @@
     letter-spacing: 0.34em;
   }
 
-  &&-block {
+  &-block {
     width: 100%;
   }
 
@@ -260,6 +281,7 @@ a.@{btn-prefix-cls} {
   &-lg {
     line-height: @btn-height-lg - 2px;
   }
+
   &-sm {
     line-height: @btn-height-sm - 2px;
   }

components/button/style/mixin.less

@@ -11,6 +11,28 @@
   border-radius: @border-radius;
 }
 
+.button-color(@color; @background; @border) {
+  color: @color;
+  border-color: @border; // a inside Button which only work in Chrome
+  & when not(@background = null) {
+    background: @background;
+  }
+  // http://stackoverflow.com/a/17253457
+  > a:only-child {
+    color: currentColor;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: transparent;
+      content: '';
+    }
+  }
+}
+
 .button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {
   &[disabled] {
     &,
@@ -25,7 +47,7 @@
   }
 }
 
-.button-variant-primary(@color; @background) {
+.button-variant-primary(@color; @background; @backgroundHover: yellow; @backgroundActive: yellow) {
   .button-color(@color; @background; @background);
 
   text-shadow: @btn-text-shadow;
@@ -38,11 +60,14 @@
         @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
       );
     }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
       .button-color(
         @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
       );
     }
+    & when (@theme = variable) {
+      .button-color(@color; @backgroundHover; @backgroundHover);
+    }
   }
 
   &:active {
@@ -51,11 +76,14 @@
         @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
       );
     }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
       .button-color(
         @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
       );
     }
+    & when (@theme = variable) {
+      .button-color(@color; @backgroundActive; @backgroundActive);
+    }
   }
 
   .button-disabled();
@@ -69,105 +97,112 @@
     & when (@theme = dark) {
       .button-color(@primary-5; @background; @primary-5);
     }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
       .button-color(
         ~`colorPalette('@{btn-primary-bg}', 5) `; @background;
           ~`colorPalette('@{btn-primary-bg}', 5) `
       );
     }
+    & when (@theme = variable) {
+      .button-color(@primary-color-hover; @background; @primary-color-hover);
+    }
   }
+
   &:active {
     & when (@theme = dark) {
       .button-color(@primary-7; @background; @primary-7);
     }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
       .button-color(
         ~`colorPalette('@{btn-primary-bg}', 7) `; @background;
           ~`colorPalette('@{btn-primary-bg}', 7) `
       );
     }
+    & when (@theme = variable) {
+      .button-color(@primary-color-active; @background; @primary-color-active);
+    }
   }
   .button-disabled();
 }
-.button-variant-ghost(@color; @border: @color) {
+
-  .button-color(@color; transparent; @border);
+.button-variant-ghost(@color; @border; @borderHover: yellow; @borderActive: yellow) {
+  .button-color(@color; null; @border);
   text-shadow: none;
+
   &:hover,
   &:focus {
     & when (@border = transparent) {
       & when (@theme = dark) {
-        .button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
+        .button-color(~`colorPalette('@{color}', 7) `; null; transparent);
       }
-      & when not (@theme = dark) {
+      & when (not (@theme = dark) and not (@theme = variable)) {
-        .button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
+        .button-color(~`colorPalette('@{color}', 5) `; null; transparent);
+      }
+      & when (@theme = variable) {
+        .button-color(@borderActive; transparent; transparent);
       }
     }
     & when not (@border = transparent) {
       & when (@theme = dark) {
         .button-color(
-          ~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `
+          ~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) `
         );
       }
-      & when not (@theme = dark) {
+      & when (not (@theme = dark) and not (@theme = variable)) {
         .button-color(
-          ~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `
+          ~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) `
         );
       }
+      & when (@theme = variable) {
+        .button-color(@borderHover; transparent; @borderHover);
+      }
     }
   }
+
   &:active {
     & when (@border = transparent) {
       & when (@theme = dark) {
-        .button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
+        .button-color(~`colorPalette('@{color}', 5) `; null; transparent);
       }
-      & when not (@theme = dark) {
+      & when (not (@theme = dark) and not (@theme = variable)) {
-        .button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
+        .button-color(~`colorPalette('@{color}', 7) `; null; transparent);
+      }
+      & when (@theme = variable) {
+        .button-color(@borderActive; transparent; transparent);
       }
     }
-    & when not(@border = transparent) {
+    & when not (@border = transparent) {
       & when (@theme = dark) {
         .button-color(
-          ~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `
+          ~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) `
         );
       }
-      & when not (@theme = dark) {
+      & when (not (@theme = dark) and not (@theme = variable)) {
         .button-color(
-          ~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `
+          ~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) `
         );
       }
+      & when (@theme = variable) {
+        .button-color(@borderActive; transparent; @borderActive);
+      }
     }
   }
   .button-disabled();
 }
-.button-color(@color; @background; @border) {
+
-  color: @color;
-  background: @background;
-  border-color: @border; // a inside Button which only work in Chrome
-  // http://stackoverflow.com/a/17253457
-  > a:only-child {
-    color: currentColor;
-    &::after {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background: transparent;
-      content: '';
-    }
-  }
-}
 .button-group-base(@btnClassName) {
   position: relative;
   display: inline-flex;
   > .@{btnClassName},
   > span > .@{btnClassName} {
     position: relative;
+
     &:hover,
     &:focus,
     &:active {
       z-index: 2;
     }
+
     &[disabled] {
       z-index: 0;
     }
@@ -219,29 +254,36 @@
   > .@{iconfont-css-prefix} {
     line-height: 1;
   }
+
   &,
   &:active,
   &:focus {
     outline: 0;
   }
+
   &:not([disabled]):hover {
     text-decoration: none;
   }
+
   &:not([disabled]):active {
     outline: 0;
     box-shadow: none;
   }
+
   &[disabled] {
     cursor: not-allowed;
+
     > * {
       pointer-events: none;
     }
   }
+
   &-lg {
     .button-size(
       @btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; @btn-border-radius-base
     );
   }
+
   &-sm {
     .button-size(
       @btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm
@@ -250,11 +292,12 @@
 }
 // primary button style
 .btn-primary() {
-  .button-variant-primary(@btn-primary-color; @btn-primary-bg);
+  .button-variant-primary(@btn-primary-color; @btn-primary-bg; @primary-color-hover; @primary-color-active);
 }
 // default button style
 .btn-default() {
-  .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border);
+  .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border; );
+
   &:hover,
   &:focus,
   &:active {
@@ -273,11 +316,12 @@
 }
 // danger button style
 .btn-danger() {
-  .button-variant-primary(@btn-danger-color, @btn-danger-bg);
+  .button-variant-primary(@btn-danger-color, @btn-danger-bg, @error-color-hover, @error-color-active);
 }
 // danger default button style
 .btn-danger-default() {
   .button-color(@error-color, @btn-default-bg, @error-color);
+
   &:hover,
   &:focus {
     & when (@theme = dark) {
@@ -286,13 +330,17 @@
           `
       );
     }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
       .button-color(
         ~`colorPalette('@{error-color}', 5) `; @btn-default-bg; ~`colorPalette('@{error-color}', 5)
           `
       );
     }
+    & when (@theme = variable) {
+      .button-color(@error-color-hover, @btn-default-bg, @error-color-hover);
+    }
   }
+
   &:active {
     & when (@theme = dark) {
       .button-color(
@@ -300,12 +348,15 @@
           `
       );
     }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
       .button-color(
         ~`colorPalette('@{error-color}', 7) `; @btn-default-bg; ~`colorPalette('@{error-color}', 7)
           `
       );
     }
+    & when (@theme = variable) {
+      .button-color(@error-color-active, @btn-default-bg, @error-color-active);
+    }
   }
   .button-disabled();
 }
@@ -313,22 +364,30 @@
 .btn-danger-link() {
   .button-variant-other(@error-color, transparent, transparent);
   box-shadow: none;
+
   &:hover,
   &:focus {
     & when (@theme = dark) {
       .button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent);
     }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
       .button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
     }
+    & when (@theme = variable) {
+      .button-color(@error-color-hover; transparent; transparent);
+    }
   }
+
   &:active {
     & when (@theme = dark) {
       .button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
     }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
       .button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent);
     }
+    & when (@theme = variable) {
+      .button-color(@error-color-active; transparent; transparent);
+    }
   }
   .button-disabled(@disabled-color; transparent; transparent);
 }
@@ -336,9 +395,11 @@
 .btn-link() {
   .button-variant-other(@link-color, transparent, transparent);
   box-shadow: none;
+
   &:hover {
     background: @btn-link-hover-bg;
   }
+
   &:hover,
   &:focus,
   &:active {
@@ -350,6 +411,7 @@
 .btn-text() {
   .button-variant-other(@text-color, transparent, transparent);
   box-shadow: none;
+
   &:hover,
   &:focus {
     color: @text-color;
@@ -368,23 +430,30 @@
 .btn-danger-text() {
   .button-variant-other(@error-color, transparent, transparent);
   box-shadow: none;
+
   &:hover,
   &:focus {
     & when (@theme = dark) {
       .button-color(~`colorPalette('@{error-color}', 7) `; @btn-text-hover-bg; transparent);
     }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
       .button-color(~`colorPalette('@{error-color}', 5) `; @btn-text-hover-bg; transparent);
     }
+    & when (@theme = variable) {
+      .button-color(@error-color-hover; @btn-text-hover-bg; transparent);
+    }
   }
 
   &:active {
     & when (@theme = dark) {
       .button-color(~`colorPalette('@{error-color}', 5) `; fadein(@btn-text-hover-bg, 1%); transparent);
     }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
       .button-color(~`colorPalette('@{error-color}', 7) `; fadein(@btn-text-hover-bg, 1%); transparent);
     }
+    & when (@theme = variable) {
+      .button-color(@error-color-active; fadein(@btn-text-hover-bg, 1%); transparent);
+    }
   }
   .button-disabled(@disabled-color; transparent; transparent);
 }
@@ -406,12 +475,14 @@
 .btn-square(@btnClassName: btn) {
   .square(@btn-square-size);
   .button-size(@btn-square-size; 0; @btn-square-only-icon-size; @btn-border-radius-base);
+
   & > * {
     font-size: @btn-square-only-icon-size;
   }
   &.@{btnClassName}-lg {
     .square(@btn-square-size-lg);
     .button-size(@btn-square-size-lg; 0; @btn-square-only-icon-size-lg; @btn-border-radius-base);
+
     & > * {
       font-size: @btn-square-only-icon-size-lg;
     }
@@ -419,6 +490,7 @@
   &.@{btnClassName}-sm {
     .square(@btn-square-size-sm);
     .button-size(@btn-square-size-sm; 0; @btn-square-only-icon-size-sm; @btn-border-radius-base);
+
     & > * {
       font-size: @btn-square-only-icon-size-sm;
     }
@@ -479,6 +551,7 @@
     border-top-right-radius: @btn-border-radius-base;
     border-bottom-right-radius: @btn-border-radius-base;
   }
+
   &-sm {
     > .@{btnClassName}:only-child {
       border-radius: @btn-border-radius-sm;
@@ -497,12 +570,14 @@
       border-bottom-right-radius: @btn-border-radius-sm;
     }
   }
+
   & > & {
     float: left;
   }
   & > &:not(:first-child):not(:last-child) > .@{btnClassName} {
     border-radius: 0;
   }
+
   & > &:first-child:not(:last-child) {
     > .@{btnClassName}:last-child {
       padding-right: 8px;

components/button/style/rtl.less

@@ -10,6 +10,7 @@
         border-right-color: @btn-group-border;
         border-left-color: @btn-default-border;
       }
+
       &[disabled] {
         .@{btn-prefix-cls}-group-rtl& {
           border-right-color: @btn-default-border;
@@ -67,20 +68,14 @@
   > .@{btnClassName}:first-child:not(:last-child),
   > span:first-child:not(:last-child) > .@{btnClassName} {
     .@{btnClassName}-group-rtl& {
-      border-top-left-radius: 0;
+      border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
-      border-top-right-radius: @btn-border-radius-base;
-      border-bottom-right-radius: @btn-border-radius-base;
-      border-bottom-left-radius: 0;
     }
   }
 
   > .@{btnClassName}:last-child:not(:first-child),
   > span:last-child:not(:first-child) > .@{btnClassName} {
     .@{btnClassName}-group-rtl& {
-      border-top-left-radius: @btn-border-radius-base;
+      border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: @btn-border-radius-base;
     }
   }
 
@@ -88,20 +83,14 @@
     > .@{btnClassName}:first-child:not(:last-child),
     > span:first-child:not(:last-child) > .@{btnClassName} {
       .@{btnClassName}-group-rtl& {
-        border-top-left-radius: 0;
+        border-radius: 0 @btn-border-radius-sm @btn-border-radius-sm 0;
-        border-top-right-radius: @btn-border-radius-sm;
-        border-bottom-right-radius: @btn-border-radius-sm;
-        border-bottom-left-radius: 0;
       }
     }
 
     > .@{btnClassName}:last-child:not(:first-child),
     > span:last-child:not(:first-child) > .@{btnClassName} {
       .@{btnClassName}-group-rtl& {
-        border-top-left-radius: @btn-border-radius-sm;
+        border-radius: @btn-border-radius-sm 0 0 @btn-border-radius-sm;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: @btn-border-radius-sm;
       }
     }
   }

components/calendar/__tests__/__snapshots__/demo.test.js.snap

@@ -797,7 +797,7 @@ exports[`renders ./components/calendar/demo/customize-header.vue correctly 1`] =
   <div class="ant-picker-calendar ant-picker-calendar-mini">
     <div style="padding: 10px;">
       <div style="margin-bottom: 10px;">Custom header</div>
-      <div class="ant-row ant-row-space-between">
+      <div class="ant-row ant-row-space-between" type="flex">
         <div class="ant-col">
           <div class="ant-radio-group ant-radio-group-outline ant-radio-group-small"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>
         </div>
@@ -1615,13 +1615,11 @@ exports[`renders ./components/calendar/demo/notice-calendar.vue correctly 1`] =
 `;
 
 exports[`renders ./components/calendar/demo/select.vue correctly 1`] = `
-<div class="ant-alert ant-alert-info ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-info ant-alert-no-icon" data-show="true">
   <!---->
   <div class="ant-alert-content">
     <div class="ant-alert-message">You selected date: 2017-01-25</div>
-    <div class="ant-alert-description">
+    <!---->
-      <!---->
-    </div>
   </div>
   <!---->
 </div>

components/calendar/index.en-US.md

@@ -28,21 +28,21 @@ customize the progress dot by setting a scoped slot
 | --- | --- | --- | --- | --- |
 | dateCellRender | Customize the display of the date cell by setting a scoped slot, the returned content will be appended to the cell | v-slot:dateCellRender="{current: dayjs}" | - |  |
 | dateFullCellRender | Customize the display of the date cell by setting a scoped slot, the returned content will override the cell | v-slot:dateFullCellRender="{current: dayjs}" | - |  |
-| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: dayjs) => boolean | - |
+| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: dayjs) => boolean | - |  |
 | fullscreen | Whether to display in full-screen | boolean | `true` |  |
+| headerRender | render custom header in panel | v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}" | - | 1.5.0 |
 | locale | The calendar's locale | object | [default](https://github.com/vueComponent/ant-design-vue/blob/next/components/date-picker/locale/example.json) |  |
 | mode | The display mode of the calendar | `month` \| `year` | `month` |  |
 | monthCellRender | Customize the display of the month cell by setting a scoped slot, the returned content will be appended to the cell | v-slot:monthCellRender="{current: dayjs}" | - |  |
 | monthFullCellRender | Customize the display of the month cell by setting a scoped slot, the returned content will override the cell | v-slot:monthFullCellRender="{current: dayjs}" | - |  |
 | validRange | to set valid range | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - |  |
 | value(v-model) | The current selected date | [dayjs](https://day.js.org/) | current date |  |
-| headerRender | render custom header in panel | v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}" | - | 1.5.0 |
 | valueFormat | optional, format of binding value. If not specified, the binding value will be a Date object | string，[date formats](https://day.js.org/docs/en/display/format) | - |  |
 
 ### events
 
-| Events Name | Description | Arguments | Version |
+| Events Name | Description | Arguments | Version |  |
 | --- | --- | --- | --- | --- |
+| change | Callback for when value change | function(date: dayjs \| string） | - |  |
 | panelChange | Callback for when panel changes | function(date: dayjs \| string, mode: string) | - |  |
 | select | Callback for when a date is selected | function(date: dayjs \| string） | - |  |
-| change | Callback for when value change | function(date: dayjs \| string） | - |  |

components/calendar/index.zh-CN.md

@@ -29,19 +29,19 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
 | dateFullCellRender | 作用域插槽，自定义渲染日期单元格，返回内容覆盖单元格 | v-slot:dateFullCellRender="{current: dayjs}" | 无 |  |
 | disabledDate | 不可选择的日期 | (currentDate: dayjs) => boolean | 无 |  |
 | fullscreen | 是否全屏显示 | boolean | true |  |
+| headerRender | 自定义头部内容 | v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}" | - |  |
 | locale | 国际化配置 | object | [默认配置](https://github.com/vueComponent/ant-design-vue/blob/next/components/date-picker/locale/example.json) |  |
 | mode | 初始模式，`month/year` | string | month |  |
 | monthCellRender | 作用域插槽，自定义渲染月单元格，返回内容会被追加到单元格 | v-slot:monthCellRender="{current: dayjs}" | 无 |  |
 | monthFullCellRender | 作用域插槽，自定义渲染月单元格，返回内容覆盖单元格 | v-slot:monthFullCellRender="{current: dayjs}" | 无 |  |
 | validRange | 设置可以显示的日期 | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | 无 |  |
 | value(v-model) | 展示日期 | [dayjs](https://day.js.org/) | 当前日期 |  |
-| headerRender | 自定义头部内容 | v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}" | - |  |
 | valueFormat | 可选，绑定值的格式，对 value、defaultValue 起作用。不指定则绑定值为 dayjs 对象 | string，[具体格式](https://day.js.org/docs/zh-CN/display/format) | - |  |
 
 ### 事件
 
-| 事件名称 | 说明 | 回调参数 |
+| 事件名称 | 说明 | 回调参数 |  |
 | --- | --- | --- | --- |
+| change | 日期变化时的回调, 面板变化有可能导致日期变化 | function(date: dayjs \| string） | 无 |
 | panelChange | 日期面板变化回调 | function(date: dayjs \| string, mode: string) | 无 |
 | select | 点击选择日期回调 | function(date: dayjs \| string） | 无 |
-| change | 日期变化时的回调, 面板变化有可能导致日期变化 | function(date: dayjs \| string） | 无 |

components/calendar/locale/bn_BD.tsx

@@ -0,0 +1,3 @@
+import bnBD from '../../date-picker/locale/bn_BD';
+
+export default bnBD;

components/calendar/locale/ka_GE.tsx

@@ -0,0 +1,3 @@
+import kaGE from '../../date-picker/locale/ka_GE';
+
+export default kaGE;

components/calendar/locale/km_KH.tsx

@@ -0,0 +1,3 @@
+import kmKH from '../../date-picker/locale/km_KH';
+
+export default kmKH;