feat(组件): doc

按element-plus docs文档中心基础上开发

.eslintignore

@@ -1,5 +1,4 @@
 node_modules
 !.*
 dist
-playground
 iconfont

docs/.gitignore

@@ -0,0 +1,8 @@
+.vitepress/i18n/*
+.vitepress/crowdin/*
+!.vitepress/crowdin/en-US
+
+temp
+fr-FR
+es-ES
+ja-JP

docs/.vitepress/build/crowdin-credentials.ts

@@ -0,0 +1,26 @@
+import path from 'path'
+import fs from 'fs/promises'
+import chalk from 'chalk'
+import consola from 'consola'
+import { docRoot, errorAndExit } from '@element-plus/build-utils'
+
+const credentialPlaceholder = 'API_TOKEN_PLACEHOLDER'
+
+const CREDENTIAL = process.env.CROWDIN_TOKEN
+if (!CREDENTIAL) {
+    errorAndExit(new Error('Environment variable CROWDIN_TOKEN cannot be empty'))
+}
+
+;(async () => {
+    consola.debug(chalk.cyan('Fetching Crowdin credential'))
+    const configPath = path.resolve(docRoot, 'crowdin.yml')
+    try {
+        const file = await fs.readFile(configPath, {
+            encoding: 'utf-8',
+        })
+        await fs.writeFile(configPath, file.replace(credentialPlaceholder, CREDENTIAL))
+        consola.success(chalk.green('Crowdin credential update successfully'))
+    } catch (e: any) {
+        errorAndExit(e)
+    }
+})()

docs/.vitepress/build/crowdin-generate.ts

@@ -0,0 +1,101 @@
+import fs from 'fs'
+import path from 'path'
+import chalk from 'chalk'
+import consola from 'consola'
+import { docRoot, errorAndExit } from '@element-plus/build-utils'
+
+// NB: this file is only for generating files that enables developers to develop the website.
+const componentLocaleRoot = path.resolve(docRoot, '.vitepress/crowdin')
+
+const exists = 'File already exists'
+
+async function main() {
+    const localeOutput = path.resolve(docRoot, '.vitepress/i18n')
+    if (fs.existsSync(localeOutput)) {
+        throw new Error(exists)
+    }
+
+    consola.trace(chalk.cyan('Starting for build doc for developing'))
+    // all language should be identical since it is mirrored from crowdin.
+    const dirs = await fs.promises.readdir(componentLocaleRoot, {
+        withFileTypes: true,
+    })
+    const languages = dirs.map(dir => dir.name)
+    const langWithoutEn = languages.filter(l => l !== 'en-US')
+
+    await fs.promises.mkdir(localeOutput)
+
+    // build lang.json for telling `header>language-select` how many languages are there
+    await fs.promises.writeFile(path.resolve(localeOutput, 'lang.json'), JSON.stringify(languages), 'utf-8')
+
+    // loop through en-US
+
+    const enUS = path.resolve(componentLocaleRoot, 'en-US')
+    // we do not include en-US since we are currently using it as template
+    const languagePaths = langWithoutEn.map(l => {
+        return {
+            name: l,
+            pathname: path.resolve(componentLocaleRoot, l),
+        }
+    })
+
+    consola.debug(languagePaths)
+    await traverseDir(enUS, languagePaths, localeOutput)
+}
+
+async function traverseDir(dir: string, paths: { name: string; pathname: string }[], targetPath: string) {
+    const contents = await fs.promises.readdir(dir, { withFileTypes: true })
+
+    await Promise.all(
+        contents.map(async c => {
+            if (c.isDirectory()) {
+                await fs.promises.mkdir(path.resolve(targetPath, c.name), {
+                    recursive: true,
+                })
+
+                return traverseDir(
+                    path.resolve(dir, c.name),
+                    paths.map(p => {
+                        return {
+                            ...p,
+                            pathname: path.resolve(p.pathname, c.name),
+                        }
+                    }),
+                    path.resolve(targetPath, c.name)
+                )
+            } else if (c.isFile()) {
+                // eslint-disable-next-line @typescript-eslint/no-var-requires
+                const content = require(path.resolve(dir, c.name))
+
+                const contentToWrite = {
+                    'en-US': content,
+                }
+
+                await Promise.all(
+                    paths.map(async p => {
+                        // eslint-disable-next-line @typescript-eslint/no-var-requires
+                        const content = require(path.resolve(p.pathname, c.name))
+
+                        contentToWrite[p.name] = content
+                    })
+                )
+
+                return fs.promises.writeFile(path.resolve(targetPath, c.name), JSON.stringify(contentToWrite, null, 2), {
+                    encoding: 'utf-8',
+                })
+            }
+        })
+    )
+}
+
+main()
+    .then(() => {
+        consola.success(chalk.green('Locale for website development generated'))
+    })
+    .catch(err => {
+        if (err.message === exists) {
+            // do nothing
+        } else {
+            errorAndExit(err)
+        }
+    })

docs/.vitepress/build/rebuild-pwa.ts

@@ -0,0 +1,15 @@
+import { resolveConfig } from 'vite'
+import type { VitePluginPWAAPI } from 'vite-plugin-pwa'
+
+const rebuildPwa = async () => {
+    const config = await resolveConfig({}, 'build', 'production')
+    const pwaPlugin: VitePluginPWAAPI = config.plugins.find(i => {
+        return i.name === 'vite-plugin-pwa'
+    })?.api
+
+    if (pwaPlugin && pwaPlugin.generateSW && !pwaPlugin.disabled) {
+        await pwaPlugin.generateSW()
+    }
+}
+
+rebuildPwa()

docs/.vitepress/config.mts

@@ -1,15 +1,79 @@
+import consola from 'consola'
+import { REPO_BRANCH, REPO_PATH } from '@element-plus/build-constants'
+import { docsDirName } from '@element-plus/build-utils'
+import { languages } from './utils/lang'
+import { features, head, mdPlugin, nav, sidebars } from './config'
 import type { UserConfig } from 'vitepress'
+
+const buildTransformers = () => {
+    const transformer = () => {
+        return {
+            props: [],
+            needRuntime: true,
+        }
+    }
+
+    const transformers = {}
+    const directives = ['infinite-scroll', 'loading', 'popover', 'click-outside', 'repeat-click', 'trap-focus', 'mousewheel', 'resize']
+    directives.forEach(k => {
+        transformers[k] = transformer
+    })
+
+    return transformers
+}
+
+consola.debug(`DOC_ENV: ${process.env.DOC_ENV}`)
+
+const locales = {}
+languages.forEach(lang => {
+    locales[`/${lang}`] = {
+        label: lang,
+        lang,
+    }
+})
+
+// consola.log('locales', locales)
+// consola.log('sidebars', sidebars)
+
 export const config: UserConfig = {
-    title: 'kankan components',
-    description: '四维组件文档中心',
+    title: 'kankan component 看看组件公共文档',
+    description: 'a Vue 3 based component library for designers and developers',
     lastUpdated: true,
+    head,
     themeConfig: {
-        repo: '',
-        docsBranch: '',
-        docsDir: '',
+        repo: REPO_PATH,
+        docsBranch: REPO_BRANCH,
+        docsDir: docsDirName,
+
         editLinks: true,
-        editLinkText: '',
+        editLinkText: 'Edit this page on GitHub',
         lastUpdated: 'Last Updated',
+
+        logo: '/images/element-plus-logo.svg',
+        logoSmall: '/images/element-plus-logo-small.svg',
+        sidebars,
+        nav,
+        agolia: {
+            apiKey: '377f2b647a96d9b1d62e4780f2344da2',
+            appId: 'BH4D9OD16A',
+        },
+        features,
+        langs: languages,
+    },
+
+    locales,
+
+    markdown: {
+        config: md => mdPlugin(md),
+    },
+
+    vue: {
+        template: {
+            ssr: true,
+            compilerOptions: {
+                directiveTransforms: buildTransformers(),
+            },
+        },
     },
 }
 

docs/.vitepress/config/head.ts

@@ -1,7 +1,7 @@
-// import fs from 'fs'
-// import path from 'path'
-// import { vpRoot } from '@element-plus/build-utils'
-// import { languages } from '../utils/lang'
+import fs from 'fs'
+import path from 'path'
+import { vpRoot } from '@element-plus/build-utils'
+import { languages } from '../utils/lang'
 
 import type { HeadConfig } from 'vitepress'
 
@@ -51,9 +51,90 @@ export const head: HeadConfig[] = [
             content: '/browserconfig.xml',
         },
     ],
+    [
+        'script',
+        {},
+        `;(() => {
+      window.supportedLangs = ${JSON.stringify(languages)}
+    })()`,
+    ],
+
+    ['script', {}, fs.readFileSync(path.resolve(vpRoot, 'lang.js'), 'utf-8')],
+    // [
+    //     'script',
+    //     {
+    //         async: 'true',
+    //         src: 'https://www.googletagmanager.com/gtag/js?id=UA-175337989-1',
+    //     },
+    // ],
+    [
+        'script',
+        {},
+        `if ('serviceWorker' in navigator) {
+      navigator.serviceWorker
+        .register('/sw.js')
+        .then(function(registration) {
+          console.log(registration);
+        })
+        .catch(function(err) {
+          console.log(err);
+        });
+    }`,
+    ],
+    //     [
+    //         'script',
+    //         {
+    //             async: 'true',
+    //         },
+    //         `window.dataLayer = window.dataLayer || [];
+    // function gtag(){dataLayer.push(arguments);}
+    // gtag('js', new Date());
+    // gtag('config', 'UA-175337989-1');`,
+    //     ],
+    //     [
+    //         'script',
+    //         {
+    //             async: 'true',
+    //             src: 'https://www.googletagmanager.com/gtag/js?id=G-M74ZHEQ1M1',
+    //         },
+    //     ],
+    //     [
+    //         'script',
+    //         {},
+    //         `
+    //       window.dataLayer = window.dataLayer || [];
+    //       function gtag(){dataLayer.push(arguments);}
+    //       gtag('js', new Date());
+
+    //       gtag('config', 'G-M74ZHEQ1M1');
+    //     `,
+    //     ],
+    //     [
+    //         'script',
+    //         {},
+    //         `(function(h,o,t,j,a,r){
+    //       h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+    //       h._hjSettings={hjid:2894908,hjsv:6};
+    //       a=o.getElementsByTagName('head')[0];
+    //       r=o.createElement('script');r.async=1;
+    //       r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+    //       a.appendChild(r);
+    //   })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`,
+    //     ],
+    [
+        'script',
+        {
+            async: 'true',
+        },
+        `
+  var resource = document.createElement('link');
+  resource.setAttribute("rel", "stylesheet");
+  resource.setAttribute("href","//fonts.loli.net/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap");
+  resource.setAttribute("type","text/css");
+  var head = document.querySelector('head');
+  head.appendChild(resource);
+    `,
+    ],
 ]
-// head.push([
-//   'script',
-//   {},
-//   fs.readFileSync(path.resolve(vpRoot, 'dark-mode.js'), 'utf-8'),
-// ])
+
+head.push(['script', {}, fs.readFileSync(path.resolve(vpRoot, 'dark-mode.js'), 'utf-8')])

docs/.vitepress/config/index.ts

@@ -4,4 +4,4 @@ export * from './head'
 export * from './nav'
 export * from './plugins'
 export * from './sidebars'
-// export * from './sponsors'
+export * from './sponsors'

docs/.vitepress/config/sponsors.ts

@@ -0,0 +1,46 @@
+export const rightRichTextSponsors = []
+
+export const rightLogoSmallSponsors = [
+    {
+        name: 'BuildAdmin',
+        img: '/images/sponsors/buildadmin.png',
+        imgL: '/images/sponsors/buildadmin-l.png',
+        url: 'https://wonderful-code.gitee.io/?from=element-plus',
+        slogan: 'Vue3 opensource admin system',
+        slogan_cn: 'Vue3企业级开源后台管理系统',
+    },
+    {
+        name: 'bit',
+        img: '/images/bit.svg',
+        imgL: '/images/bit-l.png',
+        url: 'https://bit.dev/?from=element-ui',
+        slogan: 'Share Code',
+        isDark: true, // dark theme
+    },
+]
+
+export const leftCustomImgSponsors = [
+    {
+        name: 'VForm',
+        img: '/images/vform.png',
+        url: 'https://vform666.com/vform3.html?from=element_plus',
+        slogan: 'Vue 2/3 Visual/Low-Code Forms',
+        slogan_cn: 'Vue 2/3 可视化低代码表单',
+        banner_img: '/images/vform-banner.png',
+    },
+    {
+        name: 'JSDesign',
+        name_cn: '即时设计',
+        img: '/images/js-design.png',
+        url: 'https://js.design?source=element-plus',
+        slogan: 'Professional online UI design tool',
+        slogan_cn: '专业在线UI设计工具',
+        banner_img: '/images/js-design-banner.jpg',
+    },
+]
+
+export const platinumSponsors = [...leftCustomImgSponsors, ...rightRichTextSponsors]
+
+export const leftLogoSponsors = []
+
+export const goldSponsors = [...rightLogoSmallSponsors, ...leftLogoSponsors]

docs/.vitepress/crowdin/en-US/component/changelog.json

@@ -0,0 +1,5 @@
+{
+    "published-by": "Published by",
+    "open-link": "Open link",
+    "select-version": "Select a version"
+}

docs/.vitepress/crowdin/en-US/component/demo-block.json

@@ -0,0 +1,12 @@
+{
+    "view-source": "View source",
+    "hide-source": "Hide source",
+    "edit-in-editor": "Edit in Playground",
+    "edit-on-github": "Edit on GitHub",
+    "edit-in-codepen": "Edit in Codepen.io",
+    "copy-code": "Copy code",
+    "switch-button-option-text": "Switch to Options API",
+    "switch-button-setup-text": "Switch to Composition API",
+    "copy-success": "Copied!",
+    "copy-error": "This browser does not support automatic copy！"
+}

docs/.vitepress/crowdin/en-US/component/edit-link.json

@@ -0,0 +1,4 @@
+{
+    "edit-on-github": "Edit this page on GitHub",
+    "edit-on-crowdin": "Edit this page on Crowdin"
+}

docs/.vitepress/crowdin/en-US/component/footer.json

@@ -0,0 +1,6 @@
+{
+    "source": "Source",
+    "contributors": "Contributors",
+    "component": "Component",
+    "docs": "Docs"
+}

docs/.vitepress/crowdin/en-US/component/icons.json

@@ -0,0 +1,4 @@
+{
+    "copy-success": "Copied!",
+    "copy-error": "Your browser does not support copy :("
+}

docs/.vitepress/crowdin/en-US/component/last-update-at.json

@@ -0,0 +1,3 @@
+{
+    "title": "Last Updated"
+}

docs/.vitepress/crowdin/en-US/component/pwa.json

@@ -0,0 +1,6 @@
+{
+    "message": "New content available, click on refresh button to update.",
+    "refresh": "Refresh",
+    "always-refresh": "Always Refresh",
+    "close": "Close"
+}

docs/.vitepress/crowdin/en-US/component/search.json

@@ -0,0 +1,5 @@
+{
+    "search": "Search",
+    "empty": "No results",
+    "index": "en"
+}

docs/.vitepress/crowdin/en-US/component/sponsor.json

@@ -0,0 +1,6 @@
+{
+    "title": "Sponsors",
+    "sponsoredBy": "Sponsored by",
+    "platinumSponsor": "Platinum Sponsors",
+    "goldSponsor": "Gold Sponsors"
+}

docs/.vitepress/crowdin/en-US/component/translation.json

@@ -0,0 +1,3 @@
+{
+    "help": "Help Translate 😉"
+}

docs/.vitepress/crowdin/en-US/pages/component.json

@@ -0,0 +1,320 @@
+{
+    "basic": {
+        "text": "Basic",
+        "children": [
+            {
+                "link": "/button",
+                "text": "Button"
+            },
+            {
+                "link": "/border",
+                "text": "Border"
+            },
+            {
+                "link": "/color",
+                "text": "Color"
+            },
+            {
+                "link": "/container",
+                "text": "Layout Container"
+            },
+            {
+                "link": "/icon",
+                "text": "Icon"
+            },
+            {
+                "link": "/layout",
+                "text": "Layout"
+            },
+            {
+                "link": "/link",
+                "text": "Link"
+            },
+            {
+                "link": "/scrollbar",
+                "text": "Scrollbar"
+            },
+            {
+                "link": "/space",
+                "text": "Space"
+            },
+            {
+                "link": "/typography",
+                "text": "Typography"
+            }
+        ]
+    },
+    "configuration": {
+        "text": "Configuration",
+        "children": [
+            {
+                "link": "/config-provider",
+                "text": "Config Provider"
+            }
+        ]
+    },
+    "form": {
+        "text": "Form",
+        "children": [
+            {
+                "link": "/autocomplete",
+                "text": "Autocomplete"
+            },
+            {
+                "link": "/cascader",
+                "text": "Cascader"
+            },
+            {
+                "link": "/checkbox",
+                "text": "Checkbox"
+            },
+            {
+                "link": "/color-picker",
+                "text": "Color Picker"
+            },
+            {
+                "link": "/date-picker",
+                "text": "Date Picker"
+            },
+            {
+                "link": "/datetime-picker",
+                "text": "DateTime Picker"
+            },
+            {
+                "link": "/form",
+                "text": "Form"
+            },
+            {
+                "link": "/input",
+                "text": "Input"
+            },
+            {
+                "link": "/input-number",
+                "text": "Input Number"
+            },
+            {
+                "link": "/radio",
+                "text": "Radio"
+            },
+            {
+                "link": "/rate",
+                "text": "Rate"
+            },
+            {
+                "link": "/select",
+                "text": "Select"
+            },
+            {
+                "link": "/select-v2",
+                "text": "Virtualized Select"
+            },
+            {
+                "link": "/slider",
+                "text": "Slider"
+            },
+            {
+                "link": "/switch",
+                "text": "Switch"
+            },
+            {
+                "link": "/time-picker",
+                "text": "Time Picker"
+            },
+            {
+                "link": "/time-select",
+                "text": "Time Select"
+            },
+            {
+                "link": "/transfer",
+                "text": "Transfer"
+            },
+            {
+                "link": "/upload",
+                "text": "Upload"
+            }
+        ]
+    },
+
+    "data": {
+        "text": "Data",
+        "children": [
+            {
+                "link": "/avatar",
+                "text": "Avatar"
+            },
+            {
+                "link": "/badge",
+                "text": "Badge"
+            },
+            {
+                "link": "/calendar",
+                "text": "Calendar"
+            },
+            {
+                "link": "/card",
+                "text": "Card"
+            },
+            {
+                "link": "/carousel",
+                "text": "Carousel"
+            },
+            {
+                "link": "/collapse",
+                "text": "Collapse"
+            },
+            {
+                "link": "/descriptions",
+                "text": "Descriptions"
+            },
+            {
+                "link": "/empty",
+                "text": "Empty"
+            },
+            {
+                "link": "/image",
+                "text": "Image"
+            },
+            {
+                "link": "/infinite-scroll",
+                "text": "Infinite Scroll"
+            },
+            {
+                "link": "/pagination",
+                "text": "Pagination"
+            },
+            {
+                "link": "/progress",
+                "text": "Progress"
+            },
+            {
+                "link": "/result",
+                "text": "Result"
+            },
+            {
+                "link": "/skeleton",
+                "text": "Skeleton"
+            },
+            {
+                "link": "/table",
+                "text": "Table"
+            },
+            {
+                "link": "/table-v2",
+                "text": "Virtualized Table",
+                "promotion": "2.2.0"
+            },
+            {
+                "link": "/tag",
+                "text": "Tag"
+            },
+            {
+                "link": "/timeline",
+                "text": "Timeline"
+            },
+            {
+                "link": "/tree",
+                "text": "Tree"
+            },
+            {
+                "link": "/tree-select",
+                "text": "TreeSelect",
+                "promotion": "2.1.8"
+            },
+            {
+                "link": "/tree-v2",
+                "text": "Virtualized Tree"
+            }
+        ]
+    },
+    "navigation": {
+        "text": "Navigation",
+        "children": [
+            {
+                "link": "/affix",
+                "text": "Affix"
+            },
+            {
+                "link": "/backtop",
+                "text": "Backtop"
+            },
+            {
+                "link": "/breadcrumb",
+                "text": "Breadcrumb"
+            },
+            {
+                "link": "/dropdown",
+                "text": "Dropdown"
+            },
+            {
+                "link": "/menu",
+                "text": "Menu"
+            },
+            {
+                "link": "/page-header",
+                "text": "Page Header"
+            },
+            {
+                "link": "/steps",
+                "text": "Steps"
+            },
+            {
+                "link": "/tabs",
+                "text": "Tabs"
+            }
+        ]
+    },
+    "feedback": {
+        "text": "Feedback",
+        "children": [
+            {
+                "link": "/alert",
+                "text": "Alert"
+            },
+            {
+                "link": "/dialog",
+                "text": "Dialog"
+            },
+            {
+                "link": "/drawer",
+                "text": "Drawer"
+            },
+            {
+                "link": "/loading",
+                "text": "Loading"
+            },
+            {
+                "link": "/message",
+                "text": "Message"
+            },
+            {
+                "link": "/message-box",
+                "text": "Message Box"
+            },
+            {
+                "link": "/notification",
+                "text": "Notification"
+            },
+            {
+                "link": "/popconfirm",
+                "text": "Popconfirm"
+            },
+            {
+                "link": "/popover",
+                "text": "Popover"
+            },
+            {
+                "link": "/tooltip",
+                "text": "Tooltip"
+            }
+        ]
+    },
+    "others": {
+        "text": "Others",
+        "children": [
+            {
+                "link": "/divider",
+                "text": "Divider"
+            }
+        ]
+    }
+}

docs/.vitepress/crowdin/en-US/pages/guide.json

@@ -0,0 +1,79 @@
+{
+    "intro": {
+        "text": "Basics",
+        "children": [
+            {
+                "text": "Design",
+                "link": "/guide/design"
+            },
+            {
+                "text": "Navigation",
+                "link": "/guide/nav"
+            },
+            {
+                "text": "Installation",
+                "link": "/guide/installation"
+            },
+            {
+                "text": "Quick Start",
+                "link": "/guide/quickstart"
+            }
+        ]
+    },
+    "advanced": {
+        "text": "Advanced",
+        "children": [
+            {
+                "text": "i18n",
+                "link": "/guide/i18n"
+            },
+            {
+                "text": "Migration from ElementUI",
+                "link": "/guide/migration"
+            },
+            {
+                "text": "Theming",
+                "link": "/guide/theming"
+            },
+            {
+                "text": "Dark Mode",
+                "link": "/guide/dark-mode",
+                "promotion": "2.2.0"
+            },
+            {
+                "text": "Custom Namespace",
+                "link": "/guide/namespace",
+                "promotion": "2.2.0"
+            },
+            {
+                "text": "Built-in Transitions",
+                "link": "/guide/transitions"
+            },
+            {
+                "text": "Changelog",
+                "link": "/guide/changelog"
+            }
+        ]
+    },
+    "development": {
+        "text": "Development",
+        "children": [
+            {
+                "text": "Development Guide",
+                "link": "/guide/dev-guide"
+            },
+            {
+                "text": "Development FAQ",
+                "link": "/guide/dev-faq"
+            },
+            {
+                "text": "Commit Examples",
+                "link": "/guide/commit-examples"
+            },
+            {
+                "text": "Translation",
+                "link": "/guide/translation"
+            }
+        ]
+    }
+}

docs/.vitepress/crowdin/en-US/pages/home.json

@@ -0,0 +1,28 @@
+{
+    "1": "",
+    "2": "",
+    "3": "Guide",
+    "4": "Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.",
+    "5": "View Detail",
+    "6": "Component",
+    "7": "Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.",
+    "8": "Resource",
+    "9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.",
+    "10": "Links",
+    "11": "GitHub",
+    "12": "Changelog",
+    "13": "Element UI for Vue 2",
+    "14": "Online Theme Roller",
+    "15": "Gitter",
+    "16": "Feedback",
+    "17": "Contribution",
+    "18": "SegmentFault",
+    "19": "Community",
+    "20": "Become a Sponsor!",
+    "21": "Please contact us via",
+    "title_release": "Element Plus stable release is coming",
+    "title": "Element Plus",
+    "title_sub": "a Vue 3 based component library for designers and developers",
+    "china_mirror": "China Mirror 🇨🇳",
+    "discord": "Discord"
+}

docs/.vitepress/crowdin/en-US/pages/not-found.json

@@ -0,0 +1,5 @@
+{
+    "title": "Resource not found",
+    "button-title": "Back to Home",
+    "desc": "The page you requested does not exist"
+}

docs/.vitepress/crowdin/en-US/pages/resource.json

@@ -0,0 +1,12 @@
+{
+    "title": "Resources",
+    "lineOne": "More resources are still under development. ",
+    "lineTwo": "If you are interested in participating in the design of Element Plus, be our guest to contact us via <span><a href=\"mailto:element-plus@outlook.com\" target=\"_blank\">element-plus@outlook.com</a></span>.",
+    "download": "Download",
+    "axure": "Axure Components",
+    "axureIntro": "By importing Element Plus in Axure, you can easily apply all the components we provide during interaction design.",
+    "sketch": "Sketch Template",
+    "sketchIntro": "Newly designed Sketch component library in 2022 with full components for Element Plus to improve design efficiency while keeping a unified visual style.",
+    "figma": "Figma Template",
+    "figmaIntro": "Newly designed Figma component library in 2022 with new features such as Auto-layout and Variants."
+}

docs/.vitepress/crowdin/en-US/pages/sidebar.json

@@ -0,0 +1,17 @@
+[
+    {
+        "text": "Guide",
+        "link": "/guide/design",
+        "activeMatch": "/guide/"
+    },
+    {
+        "text": "Component",
+        "link": "/component/button",
+        "activeMatch": "/component/"
+    },
+    {
+        "text": "Resource",
+        "link": "/resource/index",
+        "activeMatch": "/resource/"
+    }
+]

docs/.vitepress/dark-mode.js

@@ -0,0 +1,6 @@
+;(() => {
+    const saved = localStorage.getItem('el-theme-appearance')
+    if (saved === 'auto' ? window.matchMedia(`(prefers-color-scheme: dark)`).matches : saved === 'dark') {
+        document.documentElement.classList.add('dark')
+    }
+})()

docs/.vitepress/env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+export {}

docs/.vitepress/lang.js

@@ -0,0 +1,25 @@
+;(() => {
+    const supportedLangs = window.supportedLangs
+    const cacheKey = 'preferred_lang'
+    const defaultLang = 'zh-CN'
+    // docs supported languages
+    const langAlias = {
+        en: 'en-US',
+        fr: 'fr-FR',
+        es: 'es-ES',
+    }
+    let userPreferredLang = localStorage.getItem(cacheKey) || navigator.language
+    const language = langAlias[userPreferredLang] || (supportedLangs.includes(userPreferredLang) ? userPreferredLang : defaultLang)
+    localStorage.setItem(cacheKey, language)
+    userPreferredLang = language
+    if (!location.pathname.startsWith(`/${userPreferredLang}`)) {
+        const toPath = [`/${userPreferredLang}`].concat(location.pathname.split('/').slice(2)).join('/')
+        location.pathname = toPath.endsWith('.html') || toPath.endsWith('/') ? toPath : toPath.concat('/')
+    }
+    if (navigator && navigator.serviceWorker.controller) {
+        navigator.serviceWorker.controller.postMessage({
+            type: 'LANG',
+            lang: userPreferredLang,
+        })
+    }
+})()

docs/.vitepress/plugins/external-link-icon.ts

@@ -0,0 +1,32 @@
+import type MarkdownIt from 'markdown-it'
+import type Renderer from 'markdown-it/lib/renderer'
+
+export default (md: MarkdownIt): void => {
+    const renderToken: Renderer.RenderRule = (tokens, idx, options, env, self) => self.renderToken(tokens, idx, options)
+    const defaultLinkOpenRenderer = md.renderer.rules.link_open || renderToken
+    const defaultLinkCloseRenderer = md.renderer.rules.link_close || renderToken
+    let isExternalLink = false
+
+    md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+        const token = tokens[idx]
+        const href = token.attrGet('href')
+
+        if (href) {
+            token.attrJoin('class', 'vp-link')
+            if (/^((ht|f)tps?):\/\/?/.test(href)) {
+                isExternalLink = true
+            }
+        }
+
+        return defaultLinkOpenRenderer(tokens, idx, options, env, self)
+    }
+
+    md.renderer.rules.link_close = (tokens, idx, options, env, self) => {
+        if (isExternalLink) {
+            isExternalLink = false
+            return `<i-ri-external-link-line class="link-icon" />${self.renderToken(tokens, idx, options)}`
+        }
+
+        return defaultLinkCloseRenderer(tokens, idx, options, env, self)
+    }
+}

docs/.vitepress/plugins/markdown-transform.ts

@@ -0,0 +1,102 @@
+import fs from 'fs'
+import path from 'path'
+import glob from 'fast-glob'
+import { docRoot, docsDirName, projRoot } from '@element-plus/build-utils'
+import { REPO_BRANCH, REPO_PATH } from '@element-plus/build-constants'
+import { getLang, languages } from '../utils/lang'
+import footerLocale from '../i18n/component/footer.json'
+
+import type { Plugin } from 'vite'
+
+type Append = Record<'headers' | 'footers' | 'scriptSetups', string[]>
+
+export function MarkdownTransform(): Plugin {
+    return {
+        name: 'element-plus-md-transform',
+        enforce: 'pre',
+        async transform(code, id) {
+            if (!id.endsWith('.md')) return
+
+            const componentId = path.basename(id, '.md')
+            const append: Append = {
+                headers: [],
+                footers: [],
+                scriptSetups: [`const demos = import.meta.globEager('../../examples/${componentId}/*.vue')`],
+            }
+
+            code = transformVpScriptSetup(code, append)
+
+            const pattern = `{${[...languages, languages[0]].join(',')}}/component`
+            const compPaths = await glob(pattern, {
+                cwd: docRoot,
+                absolute: true,
+                onlyDirectories: true,
+            })
+            if (compPaths.some(compPath => id.startsWith(compPath))) {
+                code = transformComponentMarkdown(id, componentId, code, append)
+            }
+
+            return combineMarkdown(code, [combineScriptSetup(append.scriptSetups), ...append.headers], append.footers)
+        },
+    }
+}
+
+const combineScriptSetup = (codes: string[]) =>
+    `\n<script setup>
+${codes.join('\n')}
+</script>
+`
+
+const combineMarkdown = (code: string, headers: string[], footers: string[]) => {
+    const frontmatterEnds = code.indexOf('---\n\n') + 4
+    const firstSubheader = code.search(/\n## \w/)
+    const sliceIndex = firstSubheader < 0 ? frontmatterEnds : firstSubheader
+
+    if (headers.length > 0) code = code.slice(0, sliceIndex) + headers.join('\n') + code.slice(sliceIndex)
+    code += footers.join('\n')
+
+    return `${code}\n`
+}
+
+const vpScriptSetupRE = /<vp-script\s(.*\s)?setup(\s.*)?>([\s\S]*)<\/vp-script>/
+
+const transformVpScriptSetup = (code: string, append: Append) => {
+    const matches = code.match(vpScriptSetupRE)
+    if (matches) code = code.replace(matches[0], '')
+    const scriptSetup = matches?.[3] ?? ''
+    if (scriptSetup) append.scriptSetups.push(scriptSetup)
+    return code
+}
+
+const GITHUB_BLOB_URL = `https://github.com/${REPO_PATH}/blob/${REPO_BRANCH}`
+const GITHUB_TREE_URL = `https://github.com/${REPO_PATH}/tree/${REPO_BRANCH}`
+const transformComponentMarkdown = (id: string, componentId: string, code: string, append: Append) => {
+    const lang = getLang(id)
+    const docUrl = `${GITHUB_BLOB_URL}/${docsDirName}/en-US/component/${componentId}.md`
+    const componentUrl = `${GITHUB_TREE_URL}/packages/components/${componentId}`
+    const componentPath = path.resolve(projRoot, `packages/components/${componentId}`)
+    const isComponent = fs.existsSync(componentPath)
+
+    const links = [[footerLocale[lang].docs, docUrl]]
+    if (isComponent) links.unshift([footerLocale[lang].component, componentUrl])
+    const linksText = links
+        .filter(i => i)
+        .map(([text, link]) => `[${text}](${link})`)
+        .join(' • ')
+
+    const sourceSection = `
+## ${footerLocale[lang].source}
+
+${linksText}
+`
+
+    const contributorsSection = `
+## ${footerLocale[lang].contributors}
+
+<Contributors id="${componentId}" />
+`
+
+    append.footers.push(sourceSection, isComponent ? contributorsSection : '')
+
+    return code
+}

docs/.vitepress/plugins/table-wrapper.ts

@@ -0,0 +1,6 @@
+import type MarkdownIt from 'markdown-it'
+
+export default (md: MarkdownIt): void => {
+    md.renderer.rules.table_open = () => '<div class="vp-table"><table>'
+    md.renderer.rules.table_close = () => '</table></div>'
+}

docs/.vitepress/sw.ts

@@ -0,0 +1,176 @@
+import { cacheNames, clientsClaim } from 'workbox-core'
+import type { ManifestEntry } from 'workbox-build'
+
+declare let self: ServiceWorkerGlobalScope & {
+    __WB_MANIFEST: ManifestEntry[]
+}
+const manifest = self.__WB_MANIFEST
+const cacheName = cacheNames.runtime
+const defaultLang = manifest.some(item => {
+    return item.url.includes(navigator.language)
+})
+    ? navigator.language
+    : 'en-US'
+
+let userPreferredLang = ''
+let cacheEntries: RequestInfo[] = []
+let cacheManifestURLs: string[] = []
+let manifestURLs: string[] = []
+
+class LangDB {
+    private db: IDBDatabase | undefined
+    private databaseName = 'PWA_DB'
+    private version = 1
+    private storeNames = 'lang'
+
+    constructor() {
+        this.initDB()
+    }
+
+    private initDB() {
+        return new Promise<boolean>(resolve => {
+            const request = indexedDB.open(this.databaseName, this.version)
+
+            request.onsuccess = event => {
+                this.db = (event.target as IDBOpenDBRequest).result
+                resolve(true)
+            }
+
+            request.onupgradeneeded = event => {
+                this.db = (event.target as IDBOpenDBRequest).result
+
+                if (!this.db.objectStoreNames.contains(this.storeNames)) {
+                    this.db.createObjectStore(this.storeNames, { keyPath: 'id' })
+                }
+            }
+        })
+    }
+
+    private async initLang() {
+        this.db!.transaction(this.storeNames, 'readwrite').objectStore(this.storeNames).add({ id: 1, lang: defaultLang })
+    }
+
+    async getLang() {
+        if (!this.db) await this.initDB()
+
+        return new Promise<string>(resolve => {
+            const request = this.db!.transaction(this.storeNames).objectStore(this.storeNames).get(1)
+
+            request.onsuccess = () => {
+                if (request.result) {
+                    resolve(request.result.lang)
+                } else {
+                    this.initLang()
+                    resolve(defaultLang)
+                }
+            }
+
+            request.onerror = () => {
+                resolve(defaultLang)
+            }
+        })
+    }
+
+    async setLang(lang: string) {
+        if (userPreferredLang !== lang) {
+            userPreferredLang = lang
+            cacheEntries = []
+            cacheManifestURLs = []
+            manifestURLs = []
+
+            if (!this.db) await this.initDB()
+
+            this.db!.transaction(this.storeNames, 'readwrite').objectStore(this.storeNames).put({ id: 1, lang })
+        }
+    }
+}
+
+async function initManifest() {
+    userPreferredLang = userPreferredLang || (await langDB.getLang())
+    // match the data that needs to be cached
+    // NOTE: When the structure of the document dist files changes, it needs to be changed here
+    const cacheList = [userPreferredLang, `assets/(${userPreferredLang}|app|index|style|chunks)`, 'images', 'android-chrome', 'apple-touch-icon', 'manifest.webmanifest']
+    const regExp = new RegExp(`^(${cacheList.join('|')})`)
+
+    for (const item of manifest) {
+        const url = new URL(item.url, self.location.origin)
+        manifestURLs.push(url.href)
+
+        if (regExp.test(item.url) || /^\/$/.test(item.url)) {
+            const request = new Request(url.href, { credentials: 'same-origin' })
+            cacheEntries.push(request)
+            cacheManifestURLs.push(url.href)
+        }
+    }
+}
+
+const langDB = new LangDB()
+
+self.addEventListener('install', event => {
+    event.waitUntil(
+        caches.open(cacheName).then(async cache => {
+            if (!cacheEntries.length) await initManifest()
+
+            return cache.addAll(cacheEntries)
+        })
+    )
+})
+
+self.addEventListener('activate', (event: ExtendableEvent) => {
+    // clean up outdated runtime cache
+    event.waitUntil(
+        caches.open(cacheName).then(async cache => {
+            if (!cacheManifestURLs.length) await initManifest()
+
+            cache.keys().then(keys => {
+                keys.forEach(request => {
+                    // clean up those who are not listed in cacheManifestURLs
+                    !cacheManifestURLs.includes(request.url) && cache.delete(request)
+                })
+            })
+        })
+    )
+})
+
+self.addEventListener('fetch', event => {
+    event.respondWith(
+        caches.match(event.request).then(async response => {
+            // when the cache is hit, it returns directly to the cache
+            if (response) return response
+            if (!manifestURLs.length) await initManifest()
+            const requestClone = event.request.clone()
+
+            // otherwise create a new fetch request
+            return fetch(requestClone)
+                .then(response => {
+                    const responseClone = response.clone()
+
+                    if (response.type !== 'basic' && response.status !== 200) {
+                        return response
+                    }
+
+                    // cache the data contained in the manifestURLs list
+                    manifestURLs.includes(requestClone.url) &&
+                        caches.open(cacheName).then(cache => {
+                            cache.put(requestClone, responseClone)
+                        })
+                    return response
+                })
+                .catch(err => {
+                    throw new Error(`Failed to load resource ${requestClone.url}, ${err}`)
+                })
+        })
+    )
+})
+
+self.addEventListener('message', event => {
+    if (event.data) {
+        if (event.data.type === 'SKIP_WAITING') {
+            self.skipWaiting()
+        } else if (event.data.type === 'LANG') {
+            langDB.setLang(event.data.lang)
+        }
+    }
+})
+
+clientsClaim()

docs/.vitepress/theme/index.ts

@@ -0,0 +1,19 @@
+import ElementPlus from 'element-plus'
+
+import VPApp, { NotFound, globals } from '../vitepress'
+import { define } from '../utils/types'
+import 'uno.css'
+import './style.css'
+import type { Theme } from 'vitepress'
+
+export default define<Theme>({
+    NotFound,
+    Layout: VPApp,
+    enhanceApp: ({ app }) => {
+        app.use(ElementPlus)
+
+        globals.forEach(([name, Comp]) => {
+            app.component(name, Comp)
+        })
+    },
+})

docs/.vitepress/theme/style.css

@@ -0,0 +1,66 @@
+#nprogress {
+  pointer-events: none;
+}
+#nprogress .bar {
+  background: #29d;
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1;
+  -webkit-transform: rotate(3deg) translateY(-4px);
+  -ms-transform: rotate(3deg) translateY(-4px);
+  transform: rotate(3deg) translateY(-4px);
+}
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+  border-color: #29d transparent transparent #29d;
+  border-style: solid;
+  border-width: 2px;
+  border-radius: 50%;
+  -webkit-animation: nprogress-spinner 0.4s linear infinite;
+  animation: nprogress-spinner 0.4s linear infinite;
+}
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+.nprogress-custom-parent #nprogress .bar,
+.nprogress-custom-parent #nprogress .spinner {
+  position: absolute;
+}
+@-webkit-keyframes nprogress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(1turn);
+  }
+}
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}

docs/.vitepress/utils/highlight.ts

@@ -0,0 +1,52 @@
+// ref https://github.com/vuejs/vitepress/blob/main/src/node/markdown/plugins/highlight.ts
+import chalk from 'chalk'
+import escapeHtml from 'escape-html'
+import prism from 'prismjs'
+import consola from 'consola'
+
+// prism is listed as actual dep so it's ok to require
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const loadLanguages = require('prismjs/components/index')
+
+// required to make embedded highlighting work...
+loadLanguages(['markup', 'css', 'javascript'])
+
+function wrap(code: string, lang: string): string {
+    if (lang === 'text') {
+        code = escapeHtml(code)
+    }
+    return `<pre v-pre><code>${code}</code></pre>`
+}
+
+export const highlight = (str: string, lang: string) => {
+    if (!lang) {
+        return wrap(str, 'text')
+    }
+    lang = lang.toLowerCase()
+    const rawLang = lang
+    if (lang === 'vue' || lang === 'html') {
+        lang = 'markup'
+    }
+    if (lang === 'md') {
+        lang = 'markdown'
+    }
+    if (lang === 'ts') {
+        lang = 'typescript'
+    }
+    if (lang === 'py') {
+        lang = 'python'
+    }
+    if (!prism.languages[lang]) {
+        try {
+            loadLanguages([lang])
+        } catch {
+            // eslint-disable-next-line no-console
+            consola.warn(chalk.yellow(`[vitepress] Syntax highlight for language "${lang}" is not supported.`))
+        }
+    }
+    if (prism.languages[lang]) {
+        const code = prism.highlight(str, prism.languages[lang], lang)
+        return wrap(code, rawLang)
+    }
+    return wrap(str, 'text')
+}

docs/.vitepress/utils/lang.ts

@@ -0,0 +1,9 @@
+import fs from 'fs'
+import path from 'path'
+import { docRoot } from '@element-plus/build-utils'
+
+export const languages = fs.readdirSync(path.resolve(__dirname, '../crowdin'))
+
+export const ensureLang = (lang: string) => `/${lang}`
+
+export const getLang = (id: string) => path.relative(docRoot, id).split(path.sep)[0]

docs/.vitepress/utils/types.ts

@@ -0,0 +1 @@
+export const define = <T>(value: T): T => value

docs/.vitepress/vitepress/components/globals/contributors.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import _contributors from '@element-plus/metadata/dist/contributors.json'
+import _contributors from '@kankan/metadata/dist/contributors.json'
 import VpLink from '../common/vp-link.vue'
 
 const props = defineProps<{ id: string }>()

docs/.vitepress/vitepress/components/vp-app.vue

@@ -13,7 +13,7 @@ import VPNav from './vp-nav.vue'
 import VPSubNav from './vp-subnav.vue'
 import VPSidebar from './vp-sidebar.vue'
 import VPContent from './vp-content.vue'
-import VPSponsors from './vp-sponsors.vue'
+// import VPSponsors from './vp-sponsors.vue'
 
 const USER_PREFER_GITHUB_PAGE = 'USER_PREFER_GITHUB_PAGE'
 const [isSidebarOpen, toggleSidebar] = useToggle(false)
@@ -66,24 +66,24 @@ onMounted(async () => {
         { capture: true }
     )
 
-    if (lang.value === 'zh-CN') {
-        if (isMirrorUrl()) return
+    // if (lang.value === 'zh-CN') {
+    //     if (isMirrorUrl()) return
 
-        if (userPrefer.value) {
-            // no alert in the next 90 days
-            if (dayjs.unix(Number(userPrefer.value)).add(90, 'day').diff(dayjs(), 'day', true) > 0) return
-        }
-        try {
-            await ElMessageBox.confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示', {
-                confirmButtonText: '跳转',
-                cancelButtonText: '取消',
-            })
-            const toLang = '/zh-CN/'
-            location.href = `https://element-plus.gitee.io${toLang}${location.pathname.slice(toLang.length)}`
-        } catch {
-            userPrefer.value = String(dayjs().unix())
-        }
-    }
+    //     if (userPrefer.value) {
+    //         // no alert in the next 90 days
+    //         if (dayjs.unix(Number(userPrefer.value)).add(90, 'day').diff(dayjs(), 'day', true) > 0) return
+    //     }
+    //     try {
+    //         await ElMessageBox.confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示', {
+    //             confirmButtonText: '跳转',
+    //             cancelButtonText: '取消',
+    //         })
+    //         const toLang = '/zh-CN/'
+    //         location.href = `https://element-plus.gitee.io${toLang}${location.pathname.slice(toLang.length)}`
+    //     } catch {
+    //         userPrefer.value = String(dayjs().unix())
+    //     }
+    // }
     // unregister sw
     navigator?.serviceWorker?.getRegistrations().then(registrations => {
         for (const registration of registrations) {
@@ -99,9 +99,9 @@ onMounted(async () => {
         <VPNav />
         <VPSubNav v-if="hasSidebar" @open-menu="toggleSidebar(true)" />
         <VPSidebar :open="isSidebarOpen" @close="toggleSidebar(false)">
-            <template #top>
+            <!-- <template #top>
                 <VPSponsors />
-            </template>
+            </template> -->
             <template #bottom>
                 <slot name="sidebar-bottom" />
             </template>

docs/.vitepress/vitepress/components/vp-hero-content.vue

@@ -4,13 +4,13 @@
     </div>
     <el-divider style="margin-bottom: 0" />
     <div class="text-center py-6 text-xs">
-        <p class="mb-1">
+        <!-- <p class="mb-1">
             Released under the
             <a href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener noreferer">MIT License</a>.
         </p>
         <p class="mt-1">
             Made with ❤️ by
             <a href="https://github.com/element-plus" target="_blank" rel="noopener noreferer">Element Plus</a>
-        </p>
+        </p> -->
     </div>
 </template>

docs/.vitepress/vitepress/components/vp-sponsors.vue

@@ -2,8 +2,8 @@
 import { computed } from 'vue'
 import sponsorLocale from '../../i18n/component/sponsor.json'
 import { useLang } from '../composables/lang'
-import VPSponsorSmall from './vp-sponsor-small.vue'
-import VPSponsorLarge from './vp-sponsor-large.vue'
+// import VPSponsorSmall from './vp-sponsor-small.vue'
+// import VPSponsorLarge from './vp-sponsor-large.vue'
 
 const lang = useLang()
 const sponsor = computed(() => sponsorLocale[lang.value])
@@ -12,8 +12,8 @@ const sponsor = computed(() => sponsorLocale[lang.value])
 <template>
     <div class="page-content">
         <p class="title">{{ sponsor.sponsoredBy }}</p>
-        <VPSponsorLarge />
-        <VPSponsorSmall />
+        <!-- <VPSponsorLarge />
+        <VPSponsorSmall /> -->
     </div>
 </template>
 

docs/.vitepress/vitepress/composables/lock-screen.ts

@@ -1,6 +1,6 @@
 import { onUnmounted } from 'vue'
 import { isClient } from '@vueuse/core'
-import { addClass, getScrollBarWidth, getStyle, hasClass, removeClass } from '@element-plus/utils'
+import { addClass, getScrollBarWidth, getStyle, hasClass, removeClass } from '@kankan/utils'
 
 export const useLockScreen = () => {
     let scrollBarWidth = 0

docs/.vitepress/vitepress/index.ts

@@ -3,10 +3,10 @@ import 'normalize.css'
 
 // for dev
 // reset
-import '../../../packages/theme-chalk/src/reset.scss'
-import '../../../packages/theme-chalk/src/index.scss'
+import 'element-plus/theme-chalk/src/reset.scss'
+import 'element-plus/theme-chalk/src/index.scss'
 // for dark mode
-import '../../../packages/theme-chalk/src/dark/css-vars.scss'
+import 'element-plus/theme-chalk/src/dark/css-vars.scss'
 
 import './styles/css-vars.scss'
 import './styles/app.scss'

docs/components.d.ts

@@ -0,0 +1,99 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+declare module '@vue/runtime-core' {
+    export interface GlobalComponents {
+        AxureComponentsSvg: typeof import('./.vitepress/vitepress/components/globals/resources/axure-components-svg.vue')['default']
+        BackToTop: typeof import('./.vitepress/vitepress/components/icons/back-to-top.vue')['default']
+        Codepen: typeof import('./.vitepress/vitepress/components/icons/codepen.vue')['default']
+        ComponentSvg: typeof import('./.vitepress/vitepress/components/home/svg/component-svg.vue')['default']
+        ConsistencySvg: typeof import('./.vitepress/vitepress/components/globals/design/consistency-svg.vue')['default']
+        Contributors: typeof import('./.vitepress/vitepress/components/globals/contributors.vue')['default']
+        ControllabilitySvg: typeof import('./.vitepress/vitepress/components/globals/design/controllability-svg.vue')['default']
+        Dark: typeof import('./.vitepress/vitepress/components/icons/dark.vue')['default']
+        DeprecatedTag: typeof import('./.vitepress/vitepress/components/dev/DeprecatedTag.vue')['default']
+        DesignGuide: typeof import('./.vitepress/vitepress/components/globals/design-guide.vue')['default']
+        EfficiencySvg: typeof import('./.vitepress/vitepress/components/globals/design/efficiency-svg.vue')['default']
+        ElementPlusLogo: typeof import('./.vitepress/vitepress/components/icons/element-plus-logo.vue')['default']
+        ElementPlusTextLogo: typeof import('./.vitepress/vitepress/components/icons/element-plus-text-logo.vue')['default']
+        Expand: typeof import('./.vitepress/vitepress/components/icons/expand.vue')['default']
+        FeedbackSvg: typeof import('./.vitepress/vitepress/components/globals/design/feedback-svg.vue')['default']
+        FigmaTemplateSvg: typeof import('./.vitepress/vitepress/components/globals/resources/figma-template-svg.vue')['default']
+        GuideSvg: typeof import('./.vitepress/vitepress/components/home/svg/guide-svg.vue')['default']
+        HomeCards: typeof import('./.vitepress/vitepress/components/home/home-cards.vue')['default']
+        HomeSponsors: typeof import('./.vitepress/vitepress/components/home/home-sponsors.vue')['default']
+        Icons: typeof import('./.vitepress/vitepress/components/globals/icons.vue')['default']
+        IRiCodeLine: typeof import('~icons/ri/code-line')['default']
+        IRiExternalLinkLine: typeof import('~icons/ri/external-link-line')['default']
+        IRiFileCopyLine: typeof import('~icons/ri/file-copy-line')['default']
+        IRiFlaskLine: typeof import('~icons/ri/flask-line')['default']
+        IRiGithubLine: typeof import('~icons/ri/github-line')['default']
+        IRiTranslate2: typeof import('~icons/ri/translate2')['default']
+        L1Categories: typeof import('./.vitepress/vitepress/components/nav/l1-categories.vue')['default']
+        L2Categories: typeof import('./.vitepress/vitepress/components/nav/l2-categories.vue')['default']
+        L3Categories: typeof import('./.vitepress/vitepress/components/nav/l3-categories.vue')['default']
+        LeftBottomLayerSvg: typeof import('./.vitepress/vitepress/components/home/svg/left-bottom-layer-svg.vue')['default']
+        LeftLayerSvg: typeof import('./.vitepress/vitepress/components/home/svg/left-layer-svg.vue')['default']
+        Light: typeof import('./.vitepress/vitepress/components/icons/light.vue')['default']
+        MainColor: typeof import('./.vitepress/vitepress/components/globals/main-color.vue')['default']
+        NeutralColor: typeof import('./.vitepress/vitepress/components/globals/neutral-color.vue')['default']
+        ParallaxHome: typeof import('./.vitepress/vitepress/components/globals/parallax-home.vue')['default']
+        PeopleSvg: typeof import('./.vitepress/vitepress/components/home/svg/people-svg.vue')['default']
+        Playground: typeof import('./.vitepress/vitepress/components/icons/playground.vue')['default']
+        Resource: typeof import('./.vitepress/vitepress/components/globals/resource.vue')['default']
+        ResourceSvg: typeof import('./.vitepress/vitepress/components/home/svg/resource-svg.vue')['default']
+        RightLayerSvg: typeof import('./.vitepress/vitepress/components/home/svg/right-layer-svg.vue')['default']
+        RightLogoSmallList: typeof import('./.vitepress/vitepress/components/sponsors/right-logo-small-list.vue')['default']
+        RightRichtextList: typeof import('./.vitepress/vitepress/components/sponsors/right-richtext-list.vue')['default']
+        ScreenSvg: typeof import('./.vitepress/vitepress/components/home/svg/screen-svg.vue')['default']
+        SecondaryColors: typeof import('./.vitepress/vitepress/components/globals/secondary-colors.vue')['default']
+        SketchTemplateSvg: typeof import('./.vitepress/vitepress/components/globals/resources/sketch-template-svg.vue')['default']
+        SponsorList: typeof import('./.vitepress/vitepress/components/home/sponsor-list.vue')['default']
+        SponsorsButton: typeof import('./.vitepress/vitepress/components/sponsors/sponsors-button.vue')['default']
+        ToggleButton: typeof import('./.vitepress/vitepress/components/icons/toggle-button.vue')['default']
+        ToggleSidebarBtn: typeof import('./.vitepress/vitepress/components/subnav/toggle-sidebar-btn.vue')['default']
+        TopNavigationExample: typeof import('./.vitepress/vitepress/components/nav/top-navigation-example.vue')['default']
+        VersionTag: typeof import('./.vitepress/vitepress/components/dev/VersionTag.vue')['default']
+        VpApp: typeof import('./.vitepress/vitepress/components/vp-app.vue')['default']
+        VpChangelog: typeof import('./.vitepress/vitepress/components/globals/vp-changelog.vue')['default']
+        VpContent: typeof import('./.vitepress/vitepress/components/vp-content.vue')['default']
+        VpDemo: typeof import('./.vitepress/vitepress/components/vp-demo.vue')['default']
+        VpDocContent: typeof import('./.vitepress/vitepress/components/vp-doc-content.vue')['default']
+        VpEditLink: typeof import('./.vitepress/vitepress/components/doc-content/vp-edit-link.vue')['default']
+        VpExample: typeof import('./.vitepress/vitepress/components/demo/vp-example.vue')['default']
+        VpFooter: typeof import('./.vitepress/vitepress/components/globals/vp-footer.vue')['default']
+        VpHamburger: typeof import('./.vitepress/vitepress/components/navbar/vp-hamburger.vue')['default']
+        VpHeroContent: typeof import('./.vitepress/vitepress/components/vp-hero-content.vue')['default']
+        VpLastUpdatedAt: typeof import('./.vitepress/vitepress/components/doc-content/vp-last-updated-at.vue')['default']
+        VpLink: typeof import('./.vitepress/vitepress/components/common/vp-link.vue')['default']
+        VpMarkdown: typeof import('./.vitepress/vitepress/components/common/vp-markdown.vue')['default']
+        VpMenu: typeof import('./.vitepress/vitepress/components/navbar/vp-menu.vue')['default']
+        VpMenuLink: typeof import('./.vitepress/vitepress/components/navbar/vp-menu-link.vue')['default']
+        VpNav: typeof import('./.vitepress/vitepress/components/vp-nav.vue')['default']
+        VpNavbar: typeof import('./.vitepress/vitepress/components/vp-navbar.vue')['default']
+        VpNavFull: typeof import('./.vitepress/vitepress/components/vp-nav-full.vue')['default']
+        VpNotFound: typeof import('./.vitepress/vitepress/components/vp-not-found.vue')['default']
+        VpOverlay: typeof import('./.vitepress/vitepress/components/vp-overlay.vue')['default']
+        VpPageFooter: typeof import('./.vitepress/vitepress/components/doc-content/vp-page-footer.vue')['default']
+        VpPageNav: typeof import('./.vitepress/vitepress/components/doc-content/vp-page-nav.vue')['default']
+        VpReloadPrompt: typeof import('./.vitepress/vitepress/components/vp-reload-prompt.vue')['default']
+        VpSearch: typeof import('./.vitepress/vitepress/components/navbar/vp-search.vue')['default']
+        VpSidebar: typeof import('./.vitepress/vitepress/components/vp-sidebar.vue')['default']
+        VpSidebarLink: typeof import('./.vitepress/vitepress/components/sidebar/vp-sidebar-link.vue')['default']
+        VpSocialLink: typeof import('./.vitepress/vitepress/components/navbar/vp-social-link.vue')['default']
+        VpSocialLinks: typeof import('./.vitepress/vitepress/components/navbar/vp-social-links.vue')['default']
+        VpSourceCode: typeof import('./.vitepress/vitepress/components/demo/vp-source-code.vue')['default']
+        VpSponsorLarge: typeof import('./.vitepress/vitepress/components/vp-sponsor-large.vue')['default']
+        VpSponsors: typeof import('./.vitepress/vitepress/components/vp-sponsors.vue')['default']
+        VpSponsorSmall: typeof import('./.vitepress/vitepress/components/vp-sponsor-small.vue')['default']
+        VpSubnav: typeof import('./.vitepress/vitepress/components/vp-subnav.vue')['default']
+        VpSwitch: typeof import('./.vitepress/vitepress/components/common/vp-switch.vue')['default']
+        VpTableOfContent: typeof import('./.vitepress/vitepress/components/doc-content/vp-table-of-content.vue')['default']
+        VpThemeToggler: typeof import('./.vitepress/vitepress/components/navbar/vp-theme-toggler.vue')['default']
+        VpTranslation: typeof import('./.vitepress/vitepress/components/navbar/vp-translation.vue')['default']
+    }
+}
+
+export {}

docs/crowdin.yml

@@ -0,0 +1,131 @@
+#
+# Your Crowdin credentials
+#
+'project_id': '473874'
+'api_token': 'API_TOKEN_PLACEHOLDER'
+'base_path': '.'
+'base_url': 'https://api.crowdin.com'
+
+#
+# Choose file structure in Crowdin
+# e.g. true or false
+#
+'preserve_hierarchy': true
+
+#
+# Files configuration
+#
+files: [
+    # The first item is the configuration for the entire website.
+    {
+      #
+      # Source files filter
+      # e.g. "/resources/en/*.json"
+      #
+      'source': '.vitepress/crowdin/en-US/**/*.json',
+
+      #
+      # Where translations will be placed
+      # e.g. "/resources/%two_letters_code%/%original_file_name%"
+      #
+      'translation': '.vitepress/crowdin/%locale%/**/%original_file_name%',
+      #
+      # Files or directories for ignore
+      # e.g. ["/**/?.txt", "/**/[0-9].txt", "/**/*\?*.txt"]
+      #
+      #"ignore" : [],
+
+      #
+      # The dest allows you to specify a file name in Crowdin
+      # e.g. "/messages.json"
+      #
+      #"dest" : "",
+
+      #
+      # File type
+      # e.g. "json"
+      #
+      #"type" : "",
+
+      #
+      # The parameter "update_option" is optional. If it is not set, after the files update the translations for changed strings will be removed. Use to fix typos and for minor changes in the source strings
+      # e.g. "update_as_unapproved" or "update_without_changes"
+      #
+      #"update_option" : "",
+
+      #
+      # Start block (for XML only)
+      #
+
+      #
+      # Defines whether to translate tags attributes.
+      # e.g. 0 or 1  (Default is 1)
+      #
+      # "translate_attributes" : 1,
+
+      #
+      # Defines whether to translate texts placed inside the tags.
+      # e.g. 0 or 1 (Default is 1)
+      #
+      # "translate_content" : 1,
+
+      #
+      # This is an array of strings, where each item is the XPaths to DOM element that should be imported
+      # e.g. ["/content/text", "/content/text[@value]"]
+      #
+      # "translatable_elements" : [],
+
+      #
+      # Defines whether to split long texts into smaller text segments
+      # e.g. 0 or 1 (Default is 1)
+      #
+      # "content_segmentation" : 1,
+
+      #
+      # End block (for XML only)
+      #
+
+      #
+      # Start .properties block
+      #
+
+      #
+      # Defines whether single quote should be escaped by another single quote or backslash in exported translations
+      # e.g. 0 or 1 or 2 or 3 (Default is 3)
+      # 0 - do not escape single quote;
+      # 1 - escape single quote by another single quote;
+      # 2 - escape single quote by backslash;
+      # 3 - escape single quote by another single quote only in strings containing variables ( {0} ).
+      #
+      # "escape_quotes" : 3,
+
+      #
+      # Defines whether any special characters (=, :, ! and #) should be escaped by backslash in exported translations.
+      # e.g. 0 or 1 (Default is 0)
+      # 0 - do not escape special characters
+      # 1 - escape special characters by a backslash
+      #
+      # "escape_special_characters": 0
+      #
+
+      #
+      # End .properties block
+      #
+
+      #
+      # Does the first line contain header?
+      # e.g. true or false
+      #
+      #"first_line_contains_header" : true,
+
+      #
+      # for spreadsheets
+      # e.g. "identifier,source_phrase,context,uk,ru,fr"
+      #
+      # "scheme" : "",
+    },
+    {
+      'source': 'en-US/**/*.md',
+      'translation': '%locale%/**/%original_file_name%',
+    },
+  ]

docs/en-US/component/affix.md

@@ -0,0 +1,68 @@
+---
+title: Affix
+lang: en-US
+---
+
+# Affix
+
+Fix the element to a specific visible area.
+
+## Basic Usage
+
+Affix is fixed at the top of the page by default.
+
+:::demo You can set `offset` attribute to change the offset top，the default value is 0.
+
+affix/basic
+
+:::
+
+## Target Container
+
+You can set `target` attribute to keep the affix in the container at all times. It will be hidden if out of range.
+
+:::demo Please notice that the container avoid having scrollbar.
+
+affix/target
+
+:::
+
+## Fixed Position
+
+The affix component provides two fixed positions: `top` and `bottom`.
+
+:::demo You can set `position` attribute to change the fixed position, the default value is `top`.
+
+affix/fixed
+
+:::
+
+## Affix API
+
+### Affix Attributes
+
+| Name       | Description                      | Type                | Default | Required |
+| ---------- | -------------------------------- | ------------------- | ------- | -------- |
+| `offset`   | offset distance.                 | `number`            | `0`     | No       |
+| `position` | position of affix.               | `'top' \| 'bottom'` | `'top'` | No       |
+| `target`   | target container. (CSS selector) | `string`            | —       | No       |
+| `z-index`  | `z-index` of affix               | `number`            | `100`   | No       |
+
+### Affix Events
+
+| Name     | Description                        | Type                                                     |
+| -------- | ---------------------------------- | -------------------------------------------------------- |
+| `change` | triggers when fixed state changed. | `(fixed: boolean) => void`                               |
+| `scroll` | triggers when scrolling.           | `(value: { scrollTop: number, fixed: boolean }) => void` |
+
+### Affix Exposes
+
+| Method   | Description                 | Type         |
+| -------- | --------------------------- | ------------ |
+| `update` | update affix state manually | `() => void` |
+
+### Affix Slots
+
+| Name      | Description                |
+| --------- | -------------------------- |
+| `default` | customize default content. |

docs/en-US/component/alert.md

@@ -0,0 +1,104 @@
+---
+title: Alert
+lang: en-US
+---
+
+# Alert
+
+Displays important alert messages.
+
+## Basic Usage
+
+Alert components are non-overlay elements in the page that does not disappear automatically.
+
+:::demo Alert provides 4 types of themes defined by `type`, whose default value is `info`.
+
+alert/basic
+
+:::
+
+## Theme
+
+Alert provide two different themes, `light` and `dark`.
+
+:::demo Set `effect` to change theme, default is `light`.
+
+alert/theme
+
+:::
+
+## Customizable Close Button
+
+Customize the close button as texts or other symbols.
+
+:::demo Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. `closable` attribute decides if the component can be closed or not. It accepts `boolean`, and the default is `true`. You can set `close-text` attribute to replace the default cross symbol as the close button. Be careful that `close-text` must be a string. `close` event fires when the component is closed.
+
+alert/close-button
+
+:::
+
+## With Icon
+
+Displaying an icon improves readability.
+
+:::demo Setting the `show-icon` attribute displays an icon that corresponds with the current Alert type.
+
+alert/icon
+
+:::
+
+## Centered Text
+
+Use the `center` attribute to center the text.
+
+:::demo
+
+alert/center
+
+:::
+
+## With Description
+
+Description includes a message with more detailed information.
+
+:::demo Besides the required `title` attribute, you can add a `description` attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.
+
+alert/description
+
+:::
+
+## With Icon and Description
+
+:::demo At last, this is an example with both icon and description.
+
+alert/icon-description
+
+:::
+
+## Alert API
+
+### Alert Attributes
+
+| Name          | Description                       | Type                                          | Default   | Required |
+| ------------- | --------------------------------- | --------------------------------------------- | --------- | -------- |
+| `title`       | alert title.                      | `string`                                      | —         | No       |
+| `type`        | alert type.                       | `'success' \| 'warning' \| 'info' \| 'error'` | `'info'`  | No       |
+| `description` | descriptive text.                 | `string`                                      | —         | No       |
+| `closable`    | whether closable or not.          | `boolean`                                     | `true`    | No       |
+| `center`      | whether to center the text.       | `boolean`                                     | `false`   | No       |
+| `close-text`  | customized close button text.     | `string`                                      | —         | No       |
+| `show-icon`   | whether a type icon is displayed. | `boolean`                                     | `false`   | No       |
+| `effect`      | theme style.                      | `'light' \| 'dark'`                           | `'light'` | No       |
+
+### Alert Events
+
+| Name    | Description                   | Type                        |
+| ------- | ----------------------------- | --------------------------- |
+| `close` | trigger when alert is closed. | `(evt: MouseEvent) => void` |
+
+### Alert Slots
+
+| Name      | Description                       |
+| --------- | --------------------------------- |
+| `default` | content of the alert description. |
+| `title`   | content of the alert title.       |

docs/en-US/component/autocomplete.md

@@ -0,0 +1,81 @@
+---
+title: Autocomplete
+lang: en-US
+---
+
+## Autocomplete
+
+You can get some recommended tips based on the current input.
+
+:::demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
+
+autocomplete/autocomplete
+
+:::
+
+## Custom template
+
+Customize how suggestions are displayed.
+
+:::demo Use `scoped slot` to customize suggestion items. In the scope, you can access the suggestion object via the `item` key.
+
+autocomplete/autocomplete-template
+
+:::
+
+## Remote search
+
+Search data from server-side.
+
+:::demo
+
+autocomplete/remote-search
+
+:::
+
+## Autocomplete Attributes
+
+| Name                              | Description                                                                                                                | Type                            | Accepted Values                                                | Default      |
+| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------------------- | ------------ |
+| placeholder                       | the placeholder of Autocomplete                                                                                            | string                          | —                                                              | —            |
+| clearable                         | whether to show clear button                                                                                               | boolean                         | —                                                              | false        |
+| disabled                          | whether Autocomplete is disabled                                                                                           | boolean                         | —                                                              | false        |
+| value-key                         | key name of the input suggestion object for display                                                                        | string                          | —                                                              | value        |
+| model-value / v-model             | binding value                                                                                                              | string                          | —                                                              | —            |
+| debounce                          | debounce delay when typing, in milliseconds                                                                                | number                          | —                                                              | 300          |
+| placement                         | placement of the popup menu                                                                                                | string                          | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
+| fetch-suggestions                 | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | —                                                              | —            |
+| popper-class                      | custom class name for autocomplete's dropdown                                                                              | string                          | —                                                              | —            |
+| trigger-on-focus                  | whether show suggestions when input focus                                                                                  | boolean                         | —                                                              | true         |
+| name                              | same as `name` in native input                                                                                             | string                          | —                                                              | —            |
+| select-when-unmatched             | whether to emit a `select` event on enter when there is no autocomplete match                                              | boolean                         | —                                                              | false        |
+| label                             | label text                                                                                                                 | string                          | —                                                              | —            |
+| hide-loading                      | whether to hide the loading icon in remote search                                                                          | boolean                         | —                                                              | false        |
+| popper-append-to-body(deprecated) | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | boolean                         | —                                                              | false        |
+| teleported                        | whether select dropdown is teleported to the body                                                                          | boolean                         | true / false                                                   | true         |
+| highlight-first-item              | whether to highlight first item in remote search suggestions by default                                                    | boolean                         | —                                                              | false        |
+| fit-input-width                   | whether the width of the dropdown is the same as the input                                                                 | boolean                         | —                                                              | false        |
+
+## Autocomplete Slots
+
+| Name    | Description                                                           |
+| ------- | --------------------------------------------------------------------- |
+| —       | Custom content for input suggestions. The scope parameter is { item } |
+| prefix  | content as Input prefix                                               |
+| suffix  | content as Input suffix                                               |
+| prepend | content to prepend before Input                                       |
+| append  | content to append after Input                                         |
+
+## Autocomplete Events
+
+| Name   | Description                                      | Parameters                |
+| ------ | ------------------------------------------------ | ------------------------- |
+| select | triggers when a suggestion is clicked            | suggestion being clicked  |
+| change | triggers when the icon inside Input value change | (value: string \| number) |
+
+## Autocomplete Methods
+
+| Method | Description             | Parameters |
+| ------ | ----------------------- | ---------- |
+| focus  | focus the input element | —          |
+| blur   | blur the input element  | —          |

docs/en-US/component/avatar.md

@@ -0,0 +1,74 @@
+---
+title: Avatar
+lang: en-US
+---
+
+# Avatar
+
+Avatars can be used to represent people or objects. It supports images, Icons, or characters.
+
+## Basic Usage
+
+Use `shape` and `size` prop to set avatar's shape and size.
+
+:::demo
+
+avatar/basic
+
+:::
+
+## Types
+
+It supports images, Icons, or characters.
+
+:::demo
+
+avatar/types
+
+:::
+
+## Fallback
+
+fallback when image load error.
+
+:::demo
+
+avatar/fallback
+
+:::
+
+## Fit Container
+
+Set how the image fit its container for an image avatar, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
+
+:::demo
+
+avatar/fit
+
+:::
+
+## Avatar API
+
+### Avatar Attributes
+
+| Name      | Description                                               | Type                                                       | Default     | Required |
+| --------- | --------------------------------------------------------- | ---------------------------------------------------------- | ----------- | -------- |
+| `icon`    | representation type to icon, more info on icon component. | `string \| Component`                                      | —           | No       |
+| `size`    | avatar size.                                              | `number \| 'large' \| 'default' \| 'small'`                | `'default'` | No       |
+| `shape`   | avatar shape.                                             | `'circle' \| 'square'`                                     | `'circle'`  | No       |
+| `src`     | the source of the image for an image avatar.              | `string`                                                   | —           | No       |
+| `src-set` | native attribute `srcset` of image avatar.                | `string`                                                   | —           | No       |
+| `alt`     | native attribute `alt` of image avatar.                   | `string`                                                   | —           | No       |
+| `fit`     | set how the image fit its container for an image avatar.  | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | `'cover'`   | No       |
+
+### Avatar Events
+
+| Name    | Description                    | Type                 |
+| ------- | ------------------------------ | -------------------- |
+| `error` | trigger when image load error. | `(e: Event) => void` |
+
+### Avatar Slots
+
+| Name      | Description               |
+| --------- | ------------------------- |
+| `default` | customize avatar content. |

docs/en-US/component/backtop.md

@@ -0,0 +1,51 @@
+---
+title: Backtop
+lang: en-US
+---
+
+# Backtop
+
+A button to back to top.
+
+## Basic Usage
+
+Scroll down to see the bottom-right button.
+
+:::demo
+
+backtop/basic
+
+:::
+
+## Customizations
+
+Display area is 40px \* 40px.
+
+:::demo
+
+backtop/custom
+
+:::
+
+## Backtop API
+
+### Backtop Attributes
+
+| Name                | Description                                                          | Type     | Default |
+| ------------------- | -------------------------------------------------------------------- | -------- | ------- |
+| `target`            | the target to trigger scroll.                                        | `string` | —       |
+| `visibility-height` | the button will not show until the scroll height reaches this value. | `number` | `200`   |
+| `right`             | right distance.                                                      | `number` | `40`    |
+| `bottom`            | bottom distance.                                                     | `number` | `40`    |
+
+## Backtop Events
+
+| Name    | Description          | Parameters                  |
+| ------- | -------------------- | --------------------------- |
+| `click` | triggers when click. | `(evt: MouseEvent) => void` |
+
+## Backtop Slots
+
+| Name      | Description                |
+| --------- | -------------------------- |
+| `default` | customize default content. |

docs/en-US/component/badge.md

@@ -0,0 +1,66 @@
+---
+title: Badge
+lang: en-US
+---
+
+# Badge
+
+A number or status mark on buttons and icons.
+
+## Basic Usage
+
+Displays the amount of new messages.
+
+:::demo The amount is defined with `value` which accepts `Number` or `String`.
+
+badge/basic
+
+:::
+
+## Max Value
+
+You can customize the max value.
+
+:::demo The max value is defined by property `max` which is a `Number`. Note that it only works when `value` is also a `Number`.
+
+badge/max
+
+:::
+
+## Customizations
+
+Displays text content other than numbers.
+
+:::demo When `value` is a `String`, it can display customized text.
+
+badge/customize
+
+:::
+
+## Red Dot
+
+Use a red dot to mark content that needs to be noticed.
+
+:::demo Use the attribute `is-dot`. It is a `Boolean`.
+
+badge/dot
+
+:::
+
+## Badge API
+
+### Badge Attributes
+
+| Name     | Description                                                                     | Type                                                        | Default    |
+| -------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------- | ---------- |
+| `value`  | display value.                                                                  | `string \| number`                                          | `''`       |
+| `max`    | maximum value, shows `{max}+` when exceeded. Only works if `value` is a number. | `number`                                                    | `99`       |
+| `is-dot` | if a little dot is displayed.                                                   | `boolean`                                                   | `false`    |
+| `hidden` | hidden badge.                                                                   | `boolean`                                                   | `false`    |
+| `type`   | badge type.                                                                     | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'danger'` |
+
+### Badge Slots
+
+| Name      | Description               |
+| --------- | ------------------------- |
+| `default` | customize default content |

docs/en-US/component/border.md

@@ -0,0 +1,38 @@
+---
+title: Border
+lang: en-US
+---
+
+# Border
+
+We standardize the borders that can be used in buttons, cards, pop-ups and other components.
+
+## Border style
+
+There are few border styles to choose.
+
+:::demo
+
+border/border
+
+:::
+
+## Radius
+
+There are few radius styles to choose.
+
+:::demo
+
+border/radius
+
+:::
+
+## Shadow
+
+There are few shadow styles to choose.
+
+:::demo
+
+border/shadow
+
+:::

docs/en-US/component/breadcrumb.md

@@ -0,0 +1,50 @@
+---
+title: Breadcrumb
+lang: en-US
+---
+
+# Breadcrumb
+
+Displays the location of the current page, making it easier to browser back.
+
+## Basic usage
+
+:::demo In `el-breadcrumb`, each `el-breadcrumb-item` is a tag that stands for every level starting from homepage. This component has a `String` attribute `separator`, and it determines the separator. Its default value is '/'.
+
+breadcrumb/basic
+
+:::
+
+## Icon separator
+
+:::demo Set `separator-icon` to use `svg icon` as the separator，it will cover `separator`
+
+breadcrumb/icon
+
+:::
+
+## Breadcrumb Attributes
+
+| Name           | Description                      | Type                  | Accepted Values | Default |
+| -------------- | -------------------------------- | --------------------- | --------------- | ------- |
+| separator      | separator character              | string                | —               | /       |
+| separator-icon | icon component of icon separator | `string \| Component` | —               | -       |
+
+## Breadcrumb Slots
+
+| Name | Description               | Subtags         |
+| ---- | ------------------------- | --------------- |
+| -    | customize default content | Breadcrumb Item |
+
+## Breadcrumb Item Attributes
+
+| Name    | Description                                               | Type          | Accepted Values | Default |
+| ------- | --------------------------------------------------------- | ------------- | --------------- | ------- |
+| to      | target route of the link, same as `to` of `vue-router`    | string/object | —               | —       |
+| replace | if `true`, the navigation will not leave a history record | boolean       | —               | false   |
+
+## Breadcrumb Item Slots
+
+| Name | Description               |
+| ---- | ------------------------- |
+| —    | customize default content |

docs/en-US/component/button.md

@@ -0,0 +1,165 @@
+---
+title: Button
+lang: en-US
+---
+
+# Button
+
+Commonly used button.
+
+## Basic usage
+
+:::demo Use `type`, `plain`, `round` and `circle` to define Button's style.
+
+button/basic
+
+:::
+
+## Disabled Button
+
+The `disabled` attribute determines if the button is disabled.
+
+:::demo Use `disabled` attribute to determine whether a button is disabled. It accepts a `Boolean` value.
+
+button/disabled
+
+:::
+
+## Link Button
+
+:::warning
+
+`type="text"` has been **deprecated**, and **will be** removed in <VersionTag version="3.0.0" />, consider switching to new API.
+
+New API `link` has been added in <VersionTag version="2.2.1" />, you can use `type` API to set the theme of your link button
+
+:::
+
+:::demo
+
+button/link
+
+:::
+
+## Text Button
+
+:::tip
+
+Text button has been upgraded with a new design since <el-tag round effect="plain" size="small">2.2.0</el-tag> , if you want to use the
+previous version like button, you might want to check [Link](./link.md#basic) out.
+
+The API is also updated, because the `type` attribute also represents the button's style. So we have to make a new API
+`text: boolean` for text button.
+
+:::
+
+Buttons without border and background.
+
+:::demo
+
+button/text
+
+:::
+
+## Icon Button
+
+Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.
+
+:::demo Use the `icon` attribute to add icon. You can find the icon list in Element Plus icon component. Adding icons to the right side of the text is achievable with an `<i>` tag. Custom icons can be used as well.
+
+button/icon
+
+:::
+
+## Button Group
+
+Displayed as a button group, can be used to group a series of similar operations.
+
+:::demo Use tag `<el-button-group>` to group your buttons.
+
+button/group
+
+:::
+
+## Loading Button
+
+Click the button to load data, then the button displays a loading state.
+
+Set `loading` attribute to `true` to display loading state.
+
+:::tip
+
+You can use the `loading` slot or `loadingIcon` to customize your loading component
+
+ps: `loading` slot has higher priority than loadingIcon
+
+:::
+
+:::demo
+
+button/loading
+
+:::
+
+## Sizes
+
+Besides default size, Button component provides three additional sizes for you to choose among different scenarios.
+
+:::demo Use attribute `size` to set additional sizes with `large`, `small`.
+
+button/size
+
+:::
+
+## Custom Color <VersionTag version="beta" />
+
+You can custom button color.
+
+We will calculate hover color & active color automatically.
+
+:::demo
+
+button/custom
+
+:::
+
+## Button Attributes
+
+| Name                                | Description                                                     | Type                  | Accepted Values                                               | Default |
+| ----------------------------------- | --------------------------------------------------------------- | --------------------- | ------------------------------------------------------------- | ------- |
+| size                                | button size                                                     | string                | large / default /small                                        | —       |
+| type                                | button type                                                     | string                | primary / success / warning / danger / info / <del>text</del> | —       |
+| plain                               | determine whether it's a plain button                           | boolean               | —                                                             | false   |
+| text <VersionTag version="2.2.0" /> | determine whether it's a text button                            | boolean               | —                                                             | false   |
+| bg <VersionTag version="2.2.0" />   | determine whether the text button background color is always on | boolean               | —                                                             | false   |
+| link <VersionTag version="2.2.1" /> | determine whether it's a link button                            | boolean               | —                                                             | false   |
+| round                               | determine whether it's a round button                           | boolean               | —                                                             | false   |
+| circle                              | determine whether it's a circle button                          | boolean               | —                                                             | false   |
+| loading                             | determine whether it's loading                                  | boolean               | —                                                             | false   |
+| loading-icon                        | customize loading icon component                                | `string \| Component` | —                                                             | Loading |
+| disabled                            | disable the button                                              | boolean               | —                                                             | false   |
+| icon                                | icon component                                                  | `string \| Component` | —                                                             | —       |
+| autofocus                           | same as native button's `autofocus`                             | boolean               | —                                                             | false   |
+| native-type                         | same as native button's `type`                                  | string                | button / submit / reset                                       | button  |
+| auto-insert-space                   | automatically insert a space between two chinese characters     | boolean               |                                                               | —       |
+
+## Button Slots
+
+| Name    | Description                 |
+| ------- | --------------------------- |
+| —       | customize default content   |
+| loading | customize loading component |
+| icon    | customize icon component    |
+
+## Button-Group Attributes
+
+| Name | Description                                      | Type   | Accepted Values                             | Default |
+| ---- | ------------------------------------------------ | ------ | ------------------------------------------- | ------- |
+| size | control the size of buttons in this button-group | string | large / default /small                      | —       |
+| type | control the type of buttons in this button-group | string | primary / success / warning / danger / info | —       |
+
+## Button-Group Slots
+
+| Name | Description                    | Subtags |
+| ---- | ------------------------------ | ------- |
+| -    | customize button group content | Button  |

docs/en-US/component/calendar.md

@@ -0,0 +1,60 @@
+---
+title: Calendar
+lang: en-US
+---
+
+# Calendar
+
+Display date.
+
+## Basic
+
+:::demo Set `value` to specify the currently displayed month. If `value` is not specified, current month is displayed. `value` supports two-way binding.
+
+calendar/basic
+
+:::
+
+## Custom Content
+
+:::demo Customize what is displayed in the calendar cell by setting `scoped-slot` named `date-cell`. In `scoped-slot` you can get the date (the date of the current cell), data (including the type, isSelected, day attribute). For details, please refer to the API documentation below.
+
+calendar/customize
+
+:::
+
+## Range
+
+:::demo Set the `range` attribute to specify the display range of the calendar. Start time must be Monday, end time must be Sunday, and the time span cannot exceed two months.
+
+calendar/range
+
+:::
+
+## Customize header
+
+:::demo
+
+calendar/header
+
+:::
+
+## Localization
+
+The default locale of is English, if you need to use other languages, please check [Internationalization](/en-US/guide/i18n)
+
+Note, date time locale (month name, first day of the week ...) are also configured in localization.
+
+## Attributes
+
+| Name                    | Description                                                                                                                                                    | Type           | Default |
+| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------- |
+| `model-value / v-model` | binding value                                                                                                                                                  | `Date`         | —       |
+| `range`                 | time range, including start time and end time. Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months. | `[Date, Date]` | —       |
+
+## Slots
+
+| Name        | Description                                                                                                                                                                                                                                             | Type                                                                                                      |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `date-cell` | `type` indicates which month the date belongs, optional values are prev-month, current-month, next-month; `isSelected` indicates whether the date is selected; `day` is the formatted date in the format YYYY-MM-DD; `date` is date the cell represents | `{ type: 'prev-month' \| 'current-month' \| 'next-month', isSelected: boolean, day: string, date: Date }` |
+| `header`    | content of the Calendar header                                                                                                                                                                                                                          | —                                                                                                         |

docs/en-US/component/card.md

@@ -0,0 +1,63 @@
+---
+title: Card
+lang: en-US
+---
+
+# Card
+
+Integrate information in a card container.
+
+## Basic usage
+
+Card includes title, content and operations.
+
+:::demo Card is made up of `header` and `body`. `header` is optional, and its content distribution depends on a named slot.
+
+card/basic
+
+:::
+
+## Simple card
+
+The header part can be omitted.
+
+:::demo
+
+card/simple
+
+:::
+
+## With images
+
+Display richer content by adding some configs.
+
+:::demo The `body-style` attribute defines CSS style of custom `body`. This example also uses `el-col` for layout.
+
+card/with-images
+
+:::
+
+## Shadow
+
+You can define when to show the card shadows
+
+:::demo The `shadow` attribute determines when the card shadows are displayed. It can be `always`, `hover` or `never`.
+
+card/shadow
+
+:::
+
+## Attributes
+
+| Name       | Description                                                   | Type   | Accepted Values        | Default               |
+| ---------- | ------------------------------------------------------------- | ------ | ---------------------- | --------------------- |
+| header     | title of the card. Also accepts a DOM passed by `slot#header` | string | —                      | —                     |
+| body-style | CSS style of body                                             | object | —                      | `{ padding: '20px' }` |
+| shadow     | when to show card shadows                                     | string | always / hover / never | always                |
+
+## Slots
+
+| Name   | Description                |
+| ------ | -------------------------- |
+| —      | customize default content  |
+| header | content of the Card header |

docs/en-US/component/carousel.md

@@ -0,0 +1,105 @@
+---
+title: Carousel
+lang: en-US
+---
+
+# Carousel
+
+Loop a series of images or texts in a limited space
+
+## Basic usage
+
+:::demo Combine `el-carousel` with `el-carousel-item`, and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside `el-carousel-item` tag. By default the carousel switches when mouse hovers over an indicator. Set `trigger` to `click`, and the carousel switches only when an indicator is clicked.
+
+carousel/basic
+
+:::
+
+## Indicators
+
+Indicators can be displayed outside the carousel
+
+:::demo The `indicator-position` attribute determines where the indicators are located. By default they are inside the carousel, and setting `indicator-position` to `outside` moves them outside; setting `indicator-position` to `none` hides the indicators.
+
+carousel/indicator
+
+:::
+
+## Arrows
+
+You can define when arrows are displayed
+
+:::demo The `arrow` attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting `arrow` to `always` or `never` shows/hides the arrows permanently.
+
+carousel/arrows
+
+:::
+
+## Card mode
+
+When a page is wide enough but has limited height, you can activate card mode for carousels
+
+:::demo Setting `type` to `card` activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.
+
+carousel/card
+
+:::
+
+## Vertical
+
+By default, `direction` is `horizontal`. Let carousel be displayed in the vertical direction by setting `direction` to `vertical`.
+
+:::demo
+
+carousel/vertical
+
+:::
+
+## Carousel Attributes
+
+| Name               | Description                                           | Type    | Accepted Values     | Default    |
+| ------------------ | ----------------------------------------------------- | ------- | ------------------- | ---------- |
+| height             | height of the carousel                                | string  | —                   | —          |
+| initial-index      | index of the initially active slide (starting from 0) | number  | —                   | 0          |
+| trigger            | how indicators are triggered                          | string  | hover/click         | hover      |
+| autoplay           | whether automatically loop the slides                 | boolean | —                   | true       |
+| interval           | interval of the auto loop, in milliseconds            | number  | —                   | 3000       |
+| indicator-position | position of the indicators                            | string  | outside/none        | —          |
+| arrow              | when arrows are shown                                 | string  | always/hover/never  | hover      |
+| type               | type of the Carousel                                  | string  | card                | —          |
+| loop               | display the items in loop                             | boolean | -                   | true       |
+| direction          | display direction                                     | string  | horizontal/vertical | horizontal |
+| pause-on-hover     | pause autoplay when hover                             | boolean | -                   | true       |
+
+## Carousel Events
+
+| Name   | Description                             | Parameters                                                   |
+| ------ | --------------------------------------- | ------------------------------------------------------------ |
+| change | triggers when the active slide switches | index of the new active slide, index of the old active slide |
+
+## Carousel Methods
+
+| Method        | Description                  | Parameters                                                                                               |
+| ------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------- |
+| setActiveItem | manually switch slide        | index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` |
+| prev          | switch to the previous slide | —                                                                                                        |
+| next          | switch to the next slide     | —                                                                                                        |
+
+## Carousel Slots
+
+| Name | Description               | Subtags       |
+| ---- | ------------------------- | ------------- |
+| -    | customize default content | Carousel-Item |
+
+## Carousel-Item Attributes
+
+| Name  | Description                                      | Type   | Accepted Values | Default |
+| ----- | ------------------------------------------------ | ------ | --------------- | ------- |
+| name  | name of the item, can be used in `setActiveItem` | string | —               | —       |
+| label | text content for the corresponding indicator     | string | —               | —       |
+
+## Carousel-Item Slots
+
+| Name | Description               |
+| ---- | ------------------------- |
+| —    | customize default content |

docs/en-US/component/checkbox.md

@@ -0,0 +1,147 @@
+---
+title: Checkbox
+lang: en-US
+---
+
+# Checkbox
+
+A group of options for multiple choices.
+
+## Basic usage
+
+Checkbox can be used alone to switch between two states.
+
+:::demo Define `v-model`(bind variable) in `el-checkbox`. The default value is a `Boolean` for single `checkbox`, and it becomes `true` when selected. Content inside the `el-checkbox` tag will become the description following the button of the checkbox.
+
+checkbox/basic
+
+:::
+
+## Disabled State
+
+Disabled state for checkbox.
+
+:::demo Set the `disabled` attribute.
+
+checkbox/disabled
+
+:::
+
+## Checkbox group
+
+It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.
+
+:::demo `checkbox-group` element can manage multiple checkboxes in one group by using `v-model` which is bound as an `Array`. Inside the `el-checkbox` element, `label` is the value of the checkbox. If no content is nested in that tag, `label` will be rendered as the description following the button of the checkbox. `label` also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.
+
+checkbox/grouping
+
+:::
+
+## Indeterminate
+
+The `indeterminate` property can help you to achieve a 'check all' effect.
+
+:::demo
+
+checkbox/intermediate
+
+:::
+
+## Minimum / Maximum items checked
+
+The `min` and `max` properties can help you to limit the number of checked items.
+
+:::demo
+
+checkbox/limitation
+
+:::
+
+## Button style
+
+Checkbox with button styles.
+
+:::demo You just need to change `el-checkbox` element into `el-checkbox-button` element. We also provide `size` attribute.
+
+checkbox/button-style
+
+:::
+
+## With borders
+
+:::demo The `border` attribute adds a border to Checkboxes.
+
+checkbox/with-border
+
+:::
+
+## Checkbox Attributes
+
+| Name                  | Description                                               | Type                               | Accepted Values        | Default |
+| --------------------- | --------------------------------------------------------- | ---------------------------------- | ---------------------- | ------- |
+| model-value / v-model | binding value                                             | string / number / boolean          | —                      | —       |
+| label                 | value of the Checkbox when used inside a `checkbox-group` | string / number / boolean / object | —                      | —       |
+| true-label            | value of the Checkbox if it's checked                     | string / number                    | —                      | —       |
+| false-label           | value of the Checkbox if it's not checked                 | string / number                    | —                      | —       |
+| disabled              | whether the Checkbox is disabled                          | boolean                            | —                      | false   |
+| border                | whether to add a border around Checkbox                   | boolean                            | —                      | false   |
+| size                  | size of the Checkbox                                      | string                             | large / default /small | —       |
+| name                  | native 'name' attribute                                   | string                             | —                      | —       |
+| checked               | if the Checkbox is checked                                | boolean                            | —                      | false   |
+| indeterminate         | same as `indeterminate` in native checkbox                | boolean                            | —                      | false   |
+| validate-event        | whether to trigger form validation                        | boolean                            | -                      | true    |
+
+## Checkbox Events
+
+| Name   | Description                             | Parameters        |
+| ------ | --------------------------------------- | ----------------- |
+| change | triggers when the binding value changes | the updated value |
+
+## Checkbox Slots
+
+| Name | Description               |
+| ---- | ------------------------- |
+| —    | customize default content |
+
+## Checkbox-group Attributes
+
+| Name                  | Description                                       | Type    | Accepted Values        | Default |
+| --------------------- | ------------------------------------------------- | ------- | ---------------------- | ------- |
+| model-value / v-model | binding value                                     | array   | —                      | []      |
+| size                  | size of checkbox                                  | string  | large / default /small | —       |
+| disabled              | whether the nesting checkboxes are disabled       | boolean | —                      | false   |
+| min                   | minimum number of checkbox checked                | number  | —                      | —       |
+| max                   | maximum number of checkbox checked                | number  | —                      | —       |
+| label                 | label for screen reader                           | string  | —                      | —       |
+| text-color            | font color when button is active                  | string  | —                      | #ffffff |
+| fill                  | border and background color when button is active | string  | —                      | #409EFF |
+| validate-event        | whether to trigger form validation                | boolean | -                      | true    |
+
+## Checkbox-group Events
+
+| Name   | Description                             | Parameters        |
+| ------ | --------------------------------------- | ----------------- |
+| change | triggers when the binding value changes | the updated value |
+
+## Checkbox-group Slots
+
+| Name | Description               | Subtags                    |
+| ---- | ------------------------- | -------------------------- |
+| -    | customize default content | Checkbox / Checkbox-button |
+
+## Checkbox-button Attributes
+
+| Name        | Description                                               | Type                               | Accepted Values | Default |
+| ----------- | --------------------------------------------------------- | ---------------------------------- | --------------- | ------- |
+| label       | value of the checkbox when used inside a `checkbox-group` | string / number / boolean / object | —               | —       |
+| true-label  | value of the checkbox if it's checked                     | string / number                    | —               | —       |
+| false-label | value of the checkbox if it's not checked                 | string / number                    | —               | —       |
+| disabled    | whether the checkbox is disabled                          | boolean                            | —               | false   |
+| name        | native 'name' attribute                                   | string                             | —               | —       |
+| checked     | if the checkbox is checked                                | boolean                            | —               | false   |
+
+## Checkbox-button Slots
+
+| Name | Description               |
+| ---- | ------------------------- |
+| —    | customize default content |

docs/en-US/component/collapse.md

@@ -0,0 +1,72 @@
+---
+title: Collapse
+lang: en-US
+---
+
+# Collapse
+
+Use Collapse to store contents.
+
+## Basic usage
+
+You can expand multiple panels
+
+:::demo
+
+collapse/basic
+
+:::
+
+## Accordion
+
+In accordion mode, only one panel can be expanded at once
+
+:::demo Activate accordion mode using the `accordion` attribute.
+
+collapse/accordion
+
+:::
+
+## Custom title
+
+Besides using the `title` attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.
+
+:::demo
+
+collapse/customization
+
+:::
+
+## Collapse Attributes
+
+| Name                  | Description                        | Type                                                 | Accepted Values | Default |
+| --------------------- | ---------------------------------- | ---------------------------------------------------- | --------------- | ------- |
+| model-value / v-model | currently active panel             | string (accordion mode) / array (non-accordion mode) | —               | —       |
+| accordion             | whether to activate accordion mode | boolean                                              | —               | false   |
+
+## Collapse Events
+
+| Name   | Description                        | Parameters                                                          |
+| ------ | ---------------------------------- | ------------------------------------------------------------------- |
+| change | triggers when active panels change | (activeNames: array (non-accordion mode) / string (accordion mode)) |
+
+## Collapse Slots
+
+| Name | Description               | Subtags       |
+| ---- | ------------------------- | ------------- |
+| -    | customize default content | Collapse Item |
+
+## Collapse Item Attributes
+
+| Name     | Description                        | Type          | Accepted Values | Default |
+| -------- | ---------------------------------- | ------------- | --------------- | ------- |
+| name     | unique identification of the panel | string/number | —               | —       |
+| title    | title of the panel                 | string        | —               | —       |
+| disabled | disable the collapse item          | boolean       | —               | —       |
+
+## Collapse Item Slot
+
+| Name  | Description                    |
+| ----- | ------------------------------ |
+| —     | content of Collapse Item       |
+| title | content of Collapse Item title |

docs/en-US/component/color-picker.md

@@ -0,0 +1,60 @@
+---
+title: ColorPicker
+lang: en-US
+---
+
+# ColorPicker
+
+ColorPicker is a color selector supporting multiple color formats.
+
+## Basic usage
+
+:::demo ColorPicker requires a string typed variable to be bound to v-model.
+
+color-picker/basic
+
+:::
+
+## Alpha
+
+:::demo ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the `show-alpha` attribute.
+
+color-picker/alpha
+
+:::
+
+## Predefined colors
+
+:::demo ColorPicker supports predefined color options
+
+color-picker/predefined-color
+
+:::
+
+## Sizes
+
+:::demo
+
+color-picker/sizes
+
+:::
+
+## Attributes
+
+| Name                  | Description                                  | Type    | Accepted Values        | Default                                                       |
+| --------------------- | -------------------------------------------- | ------- | ---------------------- | ------------------------------------------------------------- |
+| model-value / v-model | binding value                                | string  | —                      | —                                                             |
+| disabled              | whether to disable the ColorPicker           | boolean | —                      | false                                                         |
+| size                  | size of ColorPicker                          | string  | large / default /small | —                                                             |
+| show-alpha            | whether to display the alpha slider          | boolean | —                      | false                                                         |
+| color-format          | color format of v-model                      | string  | hsl / hsv / hex / rgb  | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
+| popper-class          | custom class name for ColorPicker's dropdown | string  | —                      | —                                                             |
+| predefine             | predefined color options                     | array   | —                      | —                                                             |
+| validate-event        | whether to trigger form validation           | boolean | -                      | true                                                          |
+
+## Events
+
+| Name          | Description                                    | Parameters         |
+| ------------- | ---------------------------------------------- | ------------------ |
+| change        | triggers when input value changes              | color value        |
+| active-change | triggers when the current active color changes | active color value |

docs/en-US/component/color.md

@@ -0,0 +1,81 @@
+---
+title: Color
+lang: en-US
+---
+
+# Color
+
+Element Plus uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.
+
+<style lang="scss">
+.demo-color-box {
+  position: relative;
+  border-radius: 4px;
+  padding: 20px;
+  margin: 8px 0;
+  height: 112px;
+  box-sizing: border-box;
+  color: var(--el-color-white);
+  font-size: 14px;
+
+  .bg-color-sub {
+    width: 100%;
+    height: 40px;
+    left: 0;
+    bottom: 0;
+    position: absolute;
+
+    .bg-blue-sub-item {
+      height: 100%;
+      display: inline-block;
+
+      &:first-child {
+        border-radius: 0 0 0 var(--el-border-radius-base);
+      }
+    }
+
+    .bg-secondary-sub-item {
+      height: 100%;
+      display: inline-block;
+      &:first-child {
+        border-radius: 0 0 0 var(--el-border-radius-base);
+      }
+    }
+  }
+
+  .value {
+    margin-top: 2px;
+  }
+}
+
+.demo-color-box-lite {
+  color: var(--el-text-color-primary);
+}
+</style>
+
+## Main Color
+
+The main color of Element Plus is bright and friendly blue.
+
+<!-- Do not touch -->
+<ClientOnly>
+  <MainColor />
+</ClientOnly>
+
+## Secondary Color
+
+Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)
+
+<!-- Do not touch -->
+<ClientOnly>
+  <SecondaryColors />
+</ClientOnly>
+
+## Neutral Color
+
+Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.
+
+<!-- Do not touch -->
+<ClientOnly>
+  <NeutralColor />
+</ClientOnly>

docs/en-US/component/container.md

@@ -0,0 +1,134 @@
+---
+title: Container
+lang: en-US
+---
+
+# Container
+
+Container components for scaffolding basic structure of the page:
+
+`<el-container>`: wrapper container. When nested with a `<el-header>` or `<el-footer>`, all its child elements will be vertically arranged. Otherwise horizontally.
+
+`<el-header>`: container for headers.
+
+`<el-aside>`: container for side sections (usually a side nav).
+
+`<el-main>`: container for main sections.
+
+`<el-footer>`: container for footers.
+
+:::tip
+
+These components use flex for layout, so please make sure your browser supports it. Besides, `<el-container>`'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a `<el-container>`.
+
+:::
+
+## Common layouts
+
+<style lang="scss">
+@use '../../examples/container/common-layout.scss';
+</style>
+
+:::demo
+
+container/layout-hm
+
+:::
+
+:::demo
+
+container/layout-hmf
+
+:::
+
+:::demo
+
+container/layout-am
+
+:::
+
+:::demo
+
+container/layout-ham
+
+:::
+
+:::demo
+
+container/layout-hamf
+
+:::
+
+:::demo
+
+container/layout-ahm
+
+:::
+
+:::demo
+
+container/layout-ahmf
+
+:::
+
+## Example
+
+:::demo
+
+container/example
+
+:::
+
+## Container Attributes
+
+| Name      | Description                         | Type   | Accepted Values       | Default                                                                    |
+| --------- | ----------------------------------- | ------ | --------------------- | -------------------------------------------------------------------------- |
+| direction | layout direction for child elements | string | horizontal / vertical | vertical when nested with `el-header` or `el-footer`; horizontal otherwise |
+
+## Container Slots
+
+| Name | Description               | Subtags                                    |
+| ---- | ------------------------- | ------------------------------------------ |
+| —    | customize default content | Container / Header / Aside / Main / Footer |
+
+## Header Attributes
+
+| Name   | Description          | Type   | Accepted Values | Default |
+| ------ | -------------------- | ------ | --------------- | ------- |
+| height | height of the header | string | —               | 60px    |
+
+## Header Slots
+
+| Name | Description               |
+| ---- | ------------------------- |
+| —    | customize default content |
+
+## Aside Attributes
+
+| Name  | Description               | Type   | Accepted Values | Default |
+| ----- | ------------------------- | ------ | --------------- | ------- |
+| width | width of the side section | string | —               | 300px   |
+
+## Aside Slots
+
+| Name | Description               |
+| ---- | ------------------------- |
+| —    | customize default content |
+
+## Main Slots
+
+| Name | Description               |
+| ---- | ------------------------- |
+| —    | customize default content |
+
+## Footer Attributes
+
+| Name   | Description          | Type   | Accepted Values | Default |
+| ------ | -------------------- | ------ | --------------- | ------- |
+| height | height of the footer | string | —               | 60px    |
+
+## Footer Slots
+
+| Name | Description               |
+| ---- | ------------------------- |
+| —    | customize default content |

docs/en-US/component/date-picker.md

@@ -0,0 +1,195 @@
+---
+title: DatePicker
+lang: en-US
+---
+
+# DatePicker
+
+Use Date Picker for date input.
+
+## Enter Date
+
+Basic date picker measured by 'day'.
+
+:::demo The measurement is determined by the `type` attribute. You can enable quick options via `shortcuts` property. The disabled date is set by `disabledDate`, which is a function.
+
+date-picker/enter-date
+
+:::
+
+## Other measurements
+
+You can choose week, month, year or multiple dates by extending the standard date picker component.
+
+:::demo
+
+date-picker/other-measurements
+
+:::
+
+## Date Range
+
+Picking a date range is supported.
+
+:::demo When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently, you can use the `unlink-panels` attribute.
+
+date-picker/date-range
+
+:::
+
+## Month Range
+
+Picking a month range is supported.
+
+:::demo When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the `unlink-panels` attribute.
+
+date-picker/month-range
+
+:::
+
+## Default Value
+
+If user hasn't picked a date, shows today's calendar by default. You can use `default-value` to set another date. Its value should be parsable by `new Date()`.
+
+If type is `daterange`, `default-value` sets the left side calendar.
+
+:::demo
+
+date-picker/default-value
+
+:::
+
+## Date Formats
+
+Use `format` to control displayed text's format in the input box. Use `value-format` to control binding value's format.
+
+By default, the component accepts and emits a `Date` object.
+
+Check the list [here](https://day.js.org/docs/en/display/format#list-of-all-available-formats) of all available formats of Day.js.
+
+:::warning
+
+Pay attention to capitalization
+
+:::
+
+:::demo
+
+date-picker/date-formats
+
+:::
+
+## Default time for start date and end date
+
+When picking a date range, you can assign the time part for start date and end date.
+
+:::demo By default, the time part of start date and end date are both `00:00:00`. Setting `default-time` can change their time respectively. It accepts an array of up to two Date objects. The first string sets the time for the start date, and the second for the end date.
+
+date-picker/default-time
+
+:::
+
+## Set custom content of prefix
+
+The content of prefix can be customized.
+
+:::demo Setting `prefix-icon` to component which you import form other .vue or generated by the render function.
+
+date-picker/custom-prefix-icon
+
+:::
+
+## Custom content
+
+The content of cell can be customized, in scoped-slot you can get the cell data.
+
+:::demo
+
+date-picker/custom-content
+
+:::
+
+For data details, please refer:
+
+```ts
+interface DateCell {
+  column: number
+  customClass: string
+  disabled: boolean
+  end: boolean
+  inRange: boolean
+  row: number
+  selected: Dayjs
+  isCurrent: boolean
+  isSelected: boolean
+  start: boolean
+  text: number
+  timestamp: number
+  date: Date
+  dayjs: Dayjs
+  type: 'normal' | 'today' | 'week' | 'next-month' | 'prev-month'
+}
+```
+
+## Localization
+
+The default locale of is English, if you need to use other languages, please check [Internationalization](/en-US/guide/i18n)
+
+Note, date time locale (month name, first day of the week ...) are also configured in localization.
+
+## Attributes
+
+| Name                  | Description                                                                                           | Type                                               | Accepted Values                                                          | Default     |
+| --------------------- | ----------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------ | ----------- |
+| model-value / v-model | binding value, if it is an array, the length should be 2                                              | Date / number / string / Array                     | —                                                                        | —           |
+| readonly              | whether DatePicker is read only                                                                       | boolean                                            | —                                                                        | false       |
+| disabled              | whether DatePicker is disabled                                                                        | boolean                                            | —                                                                        | false       |
+| size                  | size of Input                                                                                         | string                                             | large/default/small                                                      | default     |
+| editable              | whether the input is editable                                                                         | boolean                                            | —                                                                        | true        |
+| clearable             | whether to show clear button                                                                          | boolean                                            | —                                                                        | true        |
+| placeholder           | placeholder in non-range mode                                                                         | string                                             | —                                                                        | —           |
+| start-placeholder     | placeholder for the start date in range mode                                                          | string                                             | —                                                                        | —           |
+| end-placeholder       | placeholder for the end date in range mode                                                            | string                                             | —                                                                        | —           |
+| type                  | type of the picker                                                                                    | string                                             | year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange | date        |
+| format                | format of the displayed value in the input box                                                        | string                                             | see [date formats](/en-US/component/date-picker#date-formats)            | YYYY-MM-DD  |
+| popper-class          | custom class name for DatePicker's dropdown                                                           | string                                             | —                                                                        | —           |
+| range-separator       | range separator                                                                                       | string                                             | —                                                                        | '-'         |
+| default-value         | optional, default date of the calendar                                                                | Date / [Date, Date]                                | —                                                                        | —           |
+| default-time          | optional, the time value to use when selecting date range                                             | Date / [Date, Date]                                | —                                                                        | —           |
+| value-format          | optional, format of binding value. If not specified, the binding value will be a Date object          | string                                             | see [date formats](/en-US/component/date-picker#date-formats)            | —           |
+| id                    | same as `id` in native input                                                                          | string / [string, string]                          | —                                                                        | —           |
+| name                  | same as `name` in native input                                                                        | string                                             | —                                                                        | —           |
+| unlink-panels         | unlink two date-panels in range-picker                                                                | boolean                                            | —                                                                        | false       |
+| prefix-icon           | custom prefix icon component                                                                          | `string \| Component`                              | —                                                                        | Date        |
+| clear-icon            | custom clear icon component                                                                           | `string \| Component`                              | —                                                                        | CircleClose |
+| validate-event        | whether to trigger form validation                                                                    | boolean                                            | —                                                                        | true        |
+| disabled-date         | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function                                           | —                                                                        | —           |
+| shortcuts             | an object array to set shortcut options                                                               | `Array<{ text: string, value: Date \| Function }>` | —                                                                        | —           |
+| cell-class-name       | set custom className                                                                                  | Function(Date)                                     | —                                                                        | —           |
+| teleported            | whether date-picker dropdown is teleported to the body                                                | boolean                                            | true / false                                                             | true        |
+
+## Events
+
+| Name            | Description                                                               | Parameters              |
+| --------------- | ------------------------------------------------------------------------- | ----------------------- |
+| change          | triggers when user confirms the value                                     | `(val: typeof v-model)` |
+| blur            | triggers when Input blurs                                                 | `(e: FocusEvent)`       |
+| focus           | triggers when Input focuses                                               | `(e: FocusEvent)`       |
+| calendar-change | triggers when the calendar selected date is changed. Only for `daterange` | `(val: [Date, Date])`   |
+| panel-change    | triggers when the navigation button click.                                | `(date, mode, view)`    |
+| visible-change  | triggers when the DatePicker's dropdown appears/disappears                | `(visibility: boolean)` |
+
+## Methods
+
+| Method      | Description                 | Parameters |
+| ----------- | --------------------------- | ---------- |
+| focus       | focus the Input component   | —          |
+| handleOpen  | open the DatePicker popper  | —          |
+| handleClose | close the DatePicker popper | —          |
+
+## Slots
+
+| Name            | Description                    |
+| --------------- | ------------------------------ |
+| default         | custom cell content            |
+| range-separator | custom range separator content |

docs/en-US/component/datetime-picker.md

@@ -0,0 +1,112 @@
+---
+title: DateTimePicker
+lang: en-US
+---
+
+# DateTimePicker
+
+Select date and time in one picker.
+
+:::tip
+
+DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on attributes, you can refer to DatePicker and TimePicker.
+
+:::
+
+## Date and time
+
+:::demo You can select date and time in one picker at the same time by setting `type` to `datetime`. The way to use shortcuts is the same as Date Picker.
+
+datetime-picker/date-and-time
+
+:::
+
+## DateTime Formats
+
+Use `format` to control displayed text's format in the input box. Use `value-format` to control binding value's format.
+
+By default, the component accepts and emits a `Date` object.
+
+Check the list [here](https://day.js.org/docs/en/display/format#list-of-all-available-formats) of all available formats of Day.js.
+
+:::warning
+
+Pay attention to capitalization
+
+:::
+
+:::demo
+
+datetime-picker/date-and-time-formats
+
+:::
+
+## Date and time range
+
+:::demo You can select date and time range by setting `type` to `datetimerange`.
+
+datetime-picker/date-and-time-range
+
+:::
+
+## Default time value for start date and end date
+
+:::demo When picking date range on the date panel with type `datetimerange`, `00:00:00` will be used as the default time value for start and end date. We can control it with the `default-time` attribute. `default-time` accepts an array of up to two Date objects. The first item controls time value of the start date and the second item controls time value of the end date.
+
+datetime-picker/default-time
+
+:::
+
+## Attributes
+
+| Name                  | Description                                                                                           | Type                                             | Accepted Values                                               | Default             |
+| --------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- | ------------------- |
+| model-value / v-model | binding value, if it is an array, the length should be 2                                              | Date / number / string / Array                   | —                                                             | —                   |
+| readonly              | whether DatePicker is read only                                                                       | boolean                                          | —                                                             | false               |
+| disabled              | whether DatePicker is disabled                                                                        | boolean                                          | —                                                             | false               |
+| editable              | whether the input is editable                                                                         | boolean                                          | —                                                             | true                |
+| clearable             | whether to show clear button                                                                          | boolean                                          | —                                                             | true                |
+| size                  | size of Input                                                                                         | string                                           | large/default/small                                           | default             |
+| placeholder           | placeholder in non-range mode                                                                         | string                                           | —                                                             | —                   |
+| start-placeholder     | placeholder for the start date in range mode                                                          | string                                           | —                                                             | —                   |
+| end-placeholder       | placeholder for the end date in range mode                                                            | string                                           | —                                                             | —                   |
+| time-arrow-control    | whether to pick time using arrow buttons                                                              | boolean                                          | —                                                             | false               |
+| type                  | type of the picker                                                                                    | string                                           | year/month/date/datetime/ week/datetimerange/daterange        | date                |
+| format                | format of the displayed value in the input box                                                        | string                                           | see [date formats](/en-US/component/date-picker#date-formats) | YYYY-MM-DD HH:mm:ss |
+| popper-class          | custom class name for DateTimePicker's dropdown                                                       | string                                           | —                                                             | —                   |
+| range-separator       | range separator                                                                                       | string                                           | —                                                             | '-'                 |
+| default-value         | optional, default date of the calendar                                                                | Date / [Date, Date]                              |                                                               | —                   |
+| default-time          | the default time value after picking a date. Time `00:00:00` will be used if not specified            | Date / [Date, Date]                              | —                                                             | —                   |
+| value-format          | optional, format of binding value. If not specified, the binding value will be a Date object          | string                                           | see [date formats](https://day.js.org/docs/en/display/format) | —                   |
+| id                    | same as `id` in native input                                                                          | string / [string, string]                        | —                                                             | —                   |
+| name                  | same as `name` in native input                                                                        | string                                           | —                                                             | —                   |
+| unlink-panels         | unllink two date-panels in range-picker                                                               | boolean                                          | —                                                             | false               |
+| prefix-icon           | Custom prefix icon component                                                                          | `string \| Component`                            | —                                                             | Date                |
+| clear-icon            | Custom clear icon component                                                                           | `string \| Component`                            | —                                                             | CircleClose         |
+| shortcuts             | an object array to set shortcut options                                                               | object[{ text: string, value: date / function }] | —                                                             | —                   |
+| disabled-date         | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function(Date)                                   | —                                                             | —                   |
+| cell-class-name       | set custom className                                                                                  | Function(Date)                                   | —                                                             | —                   |
+| teleported            | whether datetime-picker dropdown is teleported to the body                                            | boolean                                          | true / false                                                  | true                |
+
+## Events
+
+| Name            | Description                                                                   | Parameters                                |
+| --------------- | ----------------------------------------------------------------------------- | ----------------------------------------- |
+| change          | triggers when user confirms the value                                         | component's binding value                 |
+| blur            | triggers when Input blurs                                                     | `(e: FocusEvent)`                         |
+| focus           | triggers when Input focuses                                                   | `(e: FocusEvent)`                         |
+| calendar-change | triggers when the calendar selected date is changed. Only for `datetimerange` | [Date, Date]                              |
+| visible-change  | triggers when the DateTimePicker's dropdown appears/disappears                | true when it appears, and false otherwise |
+
+## Methods
+
+| Method | Description               | Parameters |
+| ------ | ------------------------- | ---------- |
+| focus  | focus the Input component | —          |
+
+## Slots
+
+| Name            | Description                    |
+| --------------- | ------------------------------ |
+| default         | custom cell content            |
+| range-separator | custom range separator content |

docs/en-US/component/descriptions.md

@@ -0,0 +1,79 @@
+---
+title: Descriptions
+lang: en-US
+---
+
+# Descriptions
+
+Display multiple fields in list form.
+
+## Basic usage
+
+:::demo
+
+descriptions/basic-usage
+
+:::
+
+## Sizes
+
+:::demo
+
+descriptions/sizes
+
+:::
+
+## Vertical List
+
+:::demo
+
+descriptions/vertical-list
+
+:::
+
+## Customized Style
+
+:::demo
+
+descriptions/customized-style
+
+:::
+
+## Descriptions Attributes
+
+| Name      | Description                                | Type    | Accepted Values         | Default    |
+| --------- | ------------------------------------------ | ------- | ----------------------- | ---------- |
+| border    | with or without border                     | boolean | —                       | false      |
+| column    | numbers of `Descriptions Item` in one line | number  | —                       | 3          |
+| direction | direction of list                          | string  | vertical / horizontal   | horizontal |
+| size      | size of list                               | string  | large / default / small | default    |
+| title     | title text, display on the top left        | string  | —                       | —          |
+| extra     | extra text, display on the top right       | string  | —                       | —          |
+
+## Descriptions Slots
+
+| Name  | Description                                 | Subtags           |
+| ----- | ------------------------------------------- | ----------------- |
+| —     | customize default content                   | Descriptions Item |
+| title | custom title, display on the top left       | —                 |
+| extra | custom extra area, display on the top right | —                 |
+
+## Descriptions Item Attributes
+
+| Name             | Description                                                                                                                                                                                  | Type            | Accepted Values       | Default |
+| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | --------------------- | ------- |
+| label            | label text                                                                                                                                                                                   | string          | —                     | —       |
+| span             | colspan of column                                                                                                                                                                            | number          | —                     | 1       |
+| width            | column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content)                                                      | string / number | —                     | —       |
+| min-width        | column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content) | string / number | —                     | —       |
+| align            | column content alignment (If no `border`, effective for both label and content)                                                                                                              | string          | left / center / right | left    |
+| label-align      | column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)                                                  | string          | left / center / right | —       |
+| class-name       | column content custom class name                                                                                                                                                             | string          | —                     | —       |
+| label-class-name | column label custom class name                                                                                                                                                               | string          | —                     | —       |
+
+## Descriptions Item Slots
+
+| Name  | Description               |
+| ----- | ------------------------- |
+| —     | customize default content |
+| label | custom label              |

docs/en-US/component/dialog.md

@@ -0,0 +1,154 @@
+---
+title: Dialog
+lang: en-US
+---
+
+# Dialog
+
+Informs users while preserving the current page state.
+
+## Basic usage
+
+Dialog pops up a dialog box, and it's quite customizable.
+
+:::demo Set `model-value / v-model` attribute with a `Boolean`, and Dialog shows when it is `true`. The Dialog has two parts: `body` and `footer`, and the latter requires a `slot` named `footer`. The optional `title` attribute (empty by default) is for defining a title. Finally, this example demonstrates how `before-close` is used.
+
+dialog/basic-usage
+
+:::
+
+:::tip
+
+`before-close` only works when user clicks the close icon or the backdrop. If you have buttons that close the Dialog in the `footer` named slot, you can add what you would do with `before-close` in the buttons' click event handler.
+
+:::
+
+## Customized Content
+
+The content of Dialog can be anything, even a table or a form. This example shows how to use Element Plus Table and Form with Dialog.
+
+:::demo
+
+dialog/customization-content
+
+:::
+
+## Customized Header
+
+The `header` slot can be used to customize the area where the title is displayed. In order to maintain accessibility, use the `title` attribute in addition to using this slot, or use the `titleId` slot property to specify which element should be read out as the dialog title.
+
+:::demo
+
+dialog/customization-header
+
+:::
+
+## Nested Dialog
+
+If a Dialog is nested in another Dialog, `append-to-body` is required.
+
+:::demo Normally we do not recommend using nested Dialog. If you need multiple Dialogs rendered on the page, you can simply flat them so that they're siblings to each other. If you must nest a Dialog inside another Dialog, set `append-to-body` of the nested Dialog to true, and it will append to body instead of its parent node, so both Dialogs can be correctly rendered.
+
+dialog/nested-dialog
+
+:::
+
+## Centered content
+
+Dialog's content can be centered.
+
+:::demo Setting `center` to `true` will center dialog's header and footer horizontally. `center` only affects Dialog's header and footer. The body of Dialog can be anything, so sometimes it may not look good when centered. You need to write some CSS if you wish to center the body as well.
+
+dialog/centered-content
+
+:::
+
+:::tip
+
+The content of Dialog is lazily rendered, which means the default slot is not rendered onto the DOM until it is firstly opened. Therefore, if you need to perform a DOM manipulation or access a component using `ref`, do it in the `open` event callback.
+
+:::
+
+## Align Center dialog
+
+Open dialog from the center of the screen.
+
+:::demo Setting `align-center` to `true` will center the dialog both horizontally and vertically. The prop `top` will not work at the same time because the dialog is vertically centered in a flexbox.
+
+dialog/align-center
+
+## Destroy on Close
+
+When this is feature is enabled, the content under default slot will be destroyed with a `v-if` directive. Enable this when you have perf concerns.
+
+:::demo Note that by enabling this feature, the content will not be rendered before `transition.beforeEnter` dispatched, there will only be `overlay` `header(if any)` `footer(if any)`.
+
+dialog/destroy-on-close
+
+:::
+
+## Draggable Dialog
+
+Try to drag the `header` part.
+
+:::demo Set `draggable` to `true` to drag.
+
+dialog/draggable-dialog
+
+:::
+
+:::tip
+
+When using `modal` = false, please make sure that `append-to-body` was set to **true**, because `Dialog` was positioned by `position: relative`, when `modal` gets removed, `Dialog` will position itself based on the current position in the DOM, instead of `Document.Body`, thus the style will be messed up.
+
+:::
+
+## Attributes
+
+| Name                           | Description                                                                                       | Type                                              | Accepted Values | Default |
+| ------------------------------ | ------------------------------------------------------------------------------------------------- | ------------------------------------------------- | --------------- | ------- |
+| model-value / v-model          | visibility of Dialog                                                                              | boolean                                           | —               | —       |
+| title                          | title of Dialog. Can also be passed with a named slot (see the following table)                   | string                                            | —               | —       |
+| width                          | width of Dialog                                                                                   | string / number                                   | —               | 50%     |
+| fullscreen                     | whether the Dialog takes up full screen                                                           | boolean                                           | —               | false   |
+| top                            | value for `margin-top` of Dialog CSS                                                              | string                                            | —               | 15vh    |
+| modal                          | whether a mask is displayed                                                                       | boolean                                           | —               | true    |
+| append-to-body                 | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean                                           | —               | false   |
+| lock-scroll                    | whether scroll of body is disabled while Dialog is displayed                                      | boolean                                           | —               | true    |
+| custom-class <DeprecatedTag /> | custom class names for Dialog                                                                     | string                                            | —               | —       |
+| open-delay                     | Time(milliseconds) before open                                                                    | number                                            | —               | 0       |
+| close-delay                    | Time(milliseconds) before close                                                                   | number                                            | —               | 0       |
+| close-on-click-modal           | whether the Dialog can be closed by clicking the mask                                             | boolean                                           | —               | true    |
+| close-on-press-escape          | whether the Dialog can be closed by pressing ESC                                                  | boolean                                           | —               | true    |
+| show-close                     | whether to show a close button                                                                    | boolean                                           | —               | true    |
+| before-close                   | callback before Dialog closes, and it will prevent Dialog from closing                            | Function(done) (done is used to close the Dialog) | —               | —       |
+| draggable                      | enable dragging feature for Dialog                                                                | boolean                                           | —               | false   |
+| center                         | whether to align the header and footer in center                                                  | boolean                                           | —               | false   |
+| align-center                   | whether to align the dialog both horizontally and vertically                                      | boolean                                           | —               | false   |
+| destroy-on-close               | Destroy elements in Dialog when closed                                                            | boolean                                           | —               | false   |
+
+:::warning
+
+`custom-class` has been **deprecated**, and **will be** removed in <VersionTag version="2.3.0" />, please use `class`.
+
+:::
+
+## Slots
+
+| Name                    | Description                                                                                           |
+| ----------------------- | ----------------------------------------------------------------------------------------------------- |
+| —                       | content of Dialog                                                                                     |
+| header                  | content of the Dialog header; Replacing this removes the title, but does not remove the close button. |
+| title <DeprecatedTag /> | Works the same as the header slot. Use that instead.                                                  |
+| footer                  | content of the Dialog footer                                                                          |
+
+## Events
+
+| Name             | Description                                      | Parameters |
+| ---------------- | ------------------------------------------------ | ---------- |
+| open             | triggers when the Dialog opens                   | —          |
+| opened           | triggers when the Dialog opening animation ends  | —          |
+| close            | triggers when the Dialog closes                  | —          |
+| closed           | triggers when the Dialog closing animation ends  | —          |
+| open-auto-focus  | triggers after Dialog opens and content focused  | —          |
+| close-auto-focus | triggers after Dialog closed and content focused | —          |

docs/en-US/component/divider.md

@@ -0,0 +1,60 @@
+---
+title: Divider
+lang: en-US
+---
+
+# Divider
+
+The dividing line that separates the content.
+
+## Basic usage
+
+Divide the text of different paragraphs.
+
+:::demo
+
+divider/basic-usage
+
+:::
+
+## Custom content
+
+You can customize the content on the divider line.
+
+:::demo
+
+divider/custom-content
+
+:::
+
+## dashed line
+
+You can set the style of divider.
+
+:::demo
+
+divider/line-dashed
+
+:::
+
+## Vertical divider
+
+:::demo
+
+divider/vertical-divider
+
+:::
+
+## Divider Attributes
+
+| Name             | Description                                                | Type   | Accepted Values                                                                   | Default    |
+| ---------------- | ---------------------------------------------------------- | ------ | --------------------------------------------------------------------------------- | ---------- |
+| direction        | Set divider's direction                                    | string | horizontal / vertical                                                             | horizontal |
+| border-style     | Set the style of divider                                   | string | [CSS/border-style](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style) | solid      |
+| content-position | the position of the customized content on the divider line | string | left / right / center                                                             | center     |
+
+## Slots
+
+| Name | Description                            |
+| ---- | -------------------------------------- |
+| —    | customized content on the divider line |

docs/en-US/component/dropdown.md

@@ -0,0 +1,140 @@
+---
+title: Dropdown
+lang: en-US
+---
+
+# Dropdown
+
+Toggleable menu for displaying lists of links and actions.
+
+## Basic usage
+
+Hover on the dropdown menu to unfold it for more actions.
+
+:::demo The triggering element is rendered by the default `slot`, and the dropdown part is rendered by the `slot` named `dropdown`. By default, dropdown list shows when you hover on the triggering element without having to click it.
+
+dropdown/basic-usage
+
+:::
+
+## Triggering element
+
+Use the button to trigger the dropdown list.
+
+:::demo Use `split-button` to split the triggering element into a button group with the left button being a normal button and right one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class `divider` to item four.
+
+dropdown/triggering-element
+
+:::
+
+## How to trigger
+
+Click the triggering element or hover on it.
+
+:::demo Use the attribute `trigger`. By default, it is `hover`.
+
+dropdown/how-to-trigger
+
+:::
+
+## Menu hiding behavior
+
+Use `hide-on-click` to define if menu closes on clicking.
+
+:::demo By default menu will close when you click on menu items, and it can be turned off by setting hide-on-click to false.
+
+dropdown/menu-hiding-behavior
+
+:::
+
+## Command event
+
+Clicking each dropdown item fires an event whose parameter is assigned by each item.
+
+:::demo
+
+dropdown/command-event
+
+:::
+
+## Dropdown methods
+
+You can open or close the dropdown menu by manually use `handleOpen` or `handleClose`
+
+:::demo
+
+dropdown/dropdown-methods
+
+:::
+
+## Sizes
+
+Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.
+
+:::demo Use attribute `size` to set additional sizes with `large`, `default` or `small`.
+
+dropdown/sizes
+
+:::
+
+## Dropdown Attributes
+
+| Name           | Description                                                                                                           | Type            | Accepted Values                                          | Default                                                                    |
+| -------------- | --------------------------------------------------------------------------------------------------------------------- | --------------- | -------------------------------------------------------- | -------------------------------------------------------------------------- |
+| type           | menu button type, refer to `Button` Component, only works when `split-button` is true                                 | string          | —                                                        | —                                                                          |
+| size           | menu size, also works on the split button                                                                             | string          | large / default / small                                  | default                                                                    |
+| max-height     | the max height of menu                                                                                                | string / number | —                                                        | —                                                                          |
+| split-button   | whether a button group is displayed                                                                                   | boolean         | —                                                        | false                                                                      |
+| disabled       | Whether to disable                                                                                                    | boolean         | —                                                        | false                                                                      |
+| placement      | placement of pop menu                                                                                                 | string          | top/top-start/top-end/bottom/bottom-start/bottom-end     | bottom                                                                     |
+| trigger        | how to trigger                                                                                                        | string          | hover/click/contextmenu                                  | hover                                                                      |
+| hide-on-click  | whether to hide menu after clicking menu-item                                                                         | boolean         | —                                                        | true                                                                       |
+| show-timeout   | Delay time before show a dropdown (only works when trigger is `hover`)                                                | number          | —                                                        | 250                                                                        |
+| hide-timeout   | Delay time before hide a dropdown (only works when trigger is `hover`)                                                | number          | —                                                        | 150                                                                        |
+| role           | The ARIA role attribute for the dropdown menu. Depending on the use case, you may want to change this to 'navigation' | string          | —                                                        | 'menu'                                                                     |
+| tabindex       | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown                  | number          | —                                                        | 0                                                                          |
+| popper-class   | custom class name for Dropdown's dropdown                                                                             | string          | —                                                        | —                                                                          |
+| popper-options | [popper.js](https://popper.js.org/docs/v2/) parameters                                                                | Object          | refer to [popper.js](https://popper.js.org/docs/v2/) doc | `{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}` |
+
+## Dropdown Slots
+
+| Name     | Description                                                                                                                                   | Subtags       |
+| -------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| —        | content of Dropdown. Notice: Must be a valid html dom element (ex. `<span>, <button> etc.`) or `el-component`, to attach the trigger listener | —             |
+| dropdown | content of the Dropdown Menu, usually a `<el-dropdown-menu>` element                                                                          | Dropdown-Menu |
+
+## Dropdown Events
+
+| Name           | Description                                                       | Parameters                                    |
+| -------------- | ----------------------------------------------------------------- | --------------------------------------------- |
+| click          | if `split-button` is `true`, triggers when left button is clicked | —                                             |
+| command        | triggers when a dropdown item is clicked                          | the command dispatched from the dropdown item |
+| visible-change | triggers when the dropdown appears/disappears                     | true when it appears, and false otherwise     |
+
+## Dropdown Methods
+
+| Method      | Description             | Parameters |
+| ----------- | ----------------------- | ---------- |
+| handleOpen  | open the dropdown menu  | —          |
+| handleClose | close the dropdown menu | —          |
+
+## Dropdown-Menu Slots
+
+| Name | Description              | Subtags       |
+| ---- | ------------------------ | ------------- |
+| —    | content of Dropdown Menu | Dropdown-Item |
+
+## Dropdown-Item Attributes
+
+| Name     | Description                                                 | Type                  | Accepted Values | Default |
+| -------- | ----------------------------------------------------------- | --------------------- | --------------- | ------- |
+| command  | a command to be dispatched to Dropdown's `command` callback | string/number/object  | —               | —       |
+| disabled | whether the item is disabled                                | boolean               | —               | false   |
+| divided  | whether a divider is displayed                              | boolean               | —               | false   |
+| icon     | custom icon                                                 | `string \| Component` | —               | —       |
+
+## Dropdown-Item Slots
+
+| Name | Description                |
+| ---- | -------------------------- |
+| —    | customize of Dropdown Item |

docs/en-US/component/empty.md

@@ -0,0 +1,83 @@
+---
+title: Empty
+lang: en-US
+---
+
+# Empty
+
+Placeholder hints for empty states.
+
+## Basic usage
+
+:::demo
+
+empty/basic-usage
+
+:::
+
+## Custom image
+
+Use `image` prop to set image URL.
+
+:::demo
+
+empty/custom-image
+
+:::
+
+## Image size
+
+Use `image-size` prop to control image size.
+
+:::demo
+
+empty/image-size
+
+:::
+
+## Bottom content
+
+Use the default slot to insert content at the bottom.
+
+:::demo
+
+empty/bottom-content
+
+:::
+
+## Custom styles
+
+Now you can set custom style for empty component.
+Use `css/scss` language to change the global or local color. We set some global color variables: `--el-empty-fill-color-0`, `--el-empty-fill-color-1`, `--el-empty-fill-color-2`, ......, `--el-empty-fill-color-9`. You can use like: `:root { --el-empty-fill-color-0: red; --el-empty-fill-color-1: blue; }`.
+But usually, if you want to change style, you need to change all color, because these colors are a combination.
+
+### Default Variables
+
+| Variable                | Color                 |
+| ----------------------- | --------------------- |
+| --el-empty-fill-color-0 | var(--el-color-white) |
+| --el-empty-fill-color-1 | #fcfcfd               |
+| --el-empty-fill-color-2 | #f8f9fb               |
+| --el-empty-fill-color-3 | #f7f8fc               |
+| --el-empty-fill-color-4 | #eeeff3               |
+| --el-empty-fill-color-5 | #edeef2               |
+| --el-empty-fill-color-6 | #e9ebef               |
+| --el-empty-fill-color-7 | #e5e7e9               |
+| --el-empty-fill-color-8 | #e0e3e9               |
+| --el-empty-fill-color-9 | #d5d7de               |
+
+## Empty Attributes
+
+| Name        | Description        | Type   | Acceptable Value | Default |
+| ----------- | ------------------ | ------ | ---------------- | ------- |
+| image       | image URL          | string | —                | —       |
+| image-size  | image size (width) | number | —                | —       |
+| description | description        | string | —                | —       |
+
+## Empty Slots
+
+| Name        | Description           |
+| ----------- | --------------------- |
+| default     | Custom bottom content |
+| image       | Custom image          |
+| description | Custom description    |

docs/en-US/component/form.md

@@ -0,0 +1,203 @@
+---
+title: Form
+lang: en-US
+---
+
+# Form
+
+Form consists of `input`, `radio`, `select`, `checkbox` and so on. With form, you can collect, verify and submit data.
+
+:::tip
+
+The component has been upgraded with a flex layout to replace the old float layout.
+
+:::
+
+## Basic Form
+
+It includes all kinds of input items, such as `input`, `select`, `radio` and `checkbox`.
+
+:::demo In each `form` component, you need a `form-item` field to be the container of your input item.
+
+form/basic-form
+
+:::
+
+:::tip
+
+[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) regulates that
+
+> <i>When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.</i>
+
+To prevent this behavior, you can add `@submit.prevent` on `<el-form>`.
+
+:::
+
+## Inline Form
+
+When the vertical space is limited and the form is relatively simple, you can put it in one line.
+
+:::demo Set the `inline` attribute to `true` and the form will be inline.
+
+form/inline-form
+
+:::
+
+## Alignment
+
+Depending on your design, there are several different ways to align your label element.
+
+:::demo The `label-position` attribute decides how labels align, it can be `top` or `left`. When set to `top`, labels will be placed at the top of the form field.
+
+form/alignment
+
+:::
+
+## Validation
+
+Form component allows you to verify your data, helping you find and correct errors.
+
+:::demo Just add the `rules` attribute for `Form` component, pass validation rules, and set `prop` attribute for `FormItem` as a specific key that needs to be validated. See more information at [async-validator](https://github.com/yiminghe/async-validator).
+
+form/validation
+
+:::
+
+## Custom Validation Rules
+
+This example shows how to customize your own validation rules to finish a two-factor password verification.
+
+:::demo Here we use `status-icon` to reflect validation result as an icon.
+
+form/custom-validation
+
+:::
+
+:::tip
+
+Custom validate callback function must be called. See more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).
+
+:::
+
+## Add/Delete Form Item
+
+:::demo In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.
+
+form/form-items
+
+:::
+
+## Number Validate
+
+:::demo Number Validate need a `.number` modifier added on the input `v-model` binding，it's used to transform the string value to the number which is provided by Vue.
+
+form/number-validate
+
+:::
+
+:::tip
+
+When an `el-form-item` is nested in another `el-form-item`, its label width will be `0`. You can set `label-width` on that `el-form-item` if needed.
+
+:::
+
+## Size Control
+
+All components in a Form inherit their `size` attribute from that Form. Similarly, FormItem also has a `size` attribute.
+
+:::demo Still you can fine tune each component's `size` if you don't want that component to inherit its size from From or FormItem.
+
+form/size-control
+
+:::
+
+## Accessibility
+
+When only a single input (or related control such as select or checkbox) is inside of a `el-form-item`, the form item's label will automatically be attached to that input. However, if multiple inputs are inside of the `el-form-item`, the form item will be assigned the [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) role of [group](https://www.w3.org/TR/wai-aria/#group) instead. In this case, it is your responsibility to assign assistive labels to the individual inputs.
+
+:::demo
+
+form/accessibility
+
+:::
+
+## Form API
+
+### Form Attributes
+
+| Name                        | Description                                                                                                                    | Type                              | Default   |
+| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------- | --------- |
+| `model`                     | Data of form component.                                                                                                        | `Record<string, any>`             | —         |
+| `rules`                     | Validation rules of form.                                                                                                      | `FormRules`                       | —         |
+| `inline`                    | Whether the form is inline.                                                                                                    | `boolean`                         | `false`   |
+| `label-position`            | Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required.                                       | `'left' \| 'right' \| 'top'`      | `'right'` |
+| `label-width`               | Width of label, e.g. `'50px'`. All its direct child form items will inherit this value. `auto` is supported.                   | `string \| number`                | —         |
+| `label-suffix`              | Suffix of the label.                                                                                                           | `string`                          | —         |
+| `hide-required-asterisk`    | Whether to hide required fields should have a red asterisk (star) beside their labels.                                         | `boolean`                         | `false`   |
+| `require-asterisk-position` | Position of asterisk.                                                                                                          | `'left' \| 'right'`               | `'left'`  |
+| `show-message`              | Whether to show the error message.                                                                                             | `boolean`                         | `true`    |
+| `inline-message`            | Whether to display the error message inline with the form item.                                                                | `boolean`                         | `false`   |
+| `status-icon`               | Whether to display an icon indicating the validation result.                                                                   | `boolean`                         | `false`   |
+| `validate-on-rule-change`   | Whether to trigger validation when the `rules` prop is changed.                                                                | `boolean`                         | `true`    |
+| `size`                      | Control the size of components in this form.                                                                                   | `'large' \| 'default' \| 'small'` | —         |
+| `disabled`                  | Whether to disable all components in this form. If set to `true`, it will override the `disabled` prop of the inner component. | `boolean`                         | `false`   |
+| `scroll-to-error`           | When validation fails, scroll to the first error form entry.                                                                   | `boolean`                         | `false`   |
+
+### Form Methods
+
+| Method          | Description                                                        | Type                                                                                                                             |
+| --------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
+| `validate`      | Validate the whole form. Receives a callback or returns `Promise`. | `(callback?: (isValid: boolean, invalidFields?: ValidateFieldsError) => void) => Promise<void>`                                  |
+| `validateField` | Validate specified fields.                                         | `(props?: Arrayable<FormItemProp>, callback?: (isValid: boolean, invalidFields?: ValidateFieldsError) => void) => Promise<void>` |
+| `resetFields`   | Reset specified fields and remove validation result.               | `(props?: Arrayable<FormItemProp>) => void`                                                                                      |
+| `scrollToField` | Scroll to the specified fields.                                    | `(prop: FormItemProp) => void`                                                                                                   |
+| `clearValidate` | Clear validation message for specified fields.                     | `(props?: Arrayable<FormItemProp>) => void`                                                                                      |
+
+### Form Events
+
+| Name       | Description                             | Parameters                                                        |
+| ---------- | --------------------------------------- | ----------------------------------------------------------------- |
+| `validate` | triggers after a form item is validated | `(prop: FormItemProp, isValid: boolean, message: string) => void` |
+
+### Form Slots
+
+| Name | Description               | Subtags  |
+| ---- | ------------------------- | -------- |
+| -    | customize default content | FormItem |
+
+## Form Item API
+
+### Form Item Attributes
+
+| Name             | Description                                                                                                                                                   | Type                              | Default     |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
+| `prop`           | A key of `model`. It could be an array of property paths (e.g `['a', 'b', 0]`). In the use of `validate` and `resetFields` method, the attribute is required. | `string \| string[]`              | —           |
+| `label`          | Label text.                                                                                                                                                   | `string`                          | —           |
+| `label-width`    | Width of label, e.g. `'50px'`. `'auto'` is supported.                                                                                                         | `string \| number`                | —           |
+| `required`       | Whether the field is required or not, will be determined by validation rules if omitted.                                                                      | `boolean`                         | `false`     |
+| `rules`          | Validation rules of form, see the [following table](#formitemrule), more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).    | `FormItemRule \| FormItemRule[]`  | —           |
+| `error`          | Field error message, set its value and the field will validate error and show this message immediately.                                                       | `string`                          | —           |
+| `show-message`   | Whether to show the error message.                                                                                                                            | `boolean`                         | `true`      |
+| `inline-message` | Inline style validate message.                                                                                                                                | `boolean`                         | `false`     |
+| `size`           | Control the size of components in this form-item.                                                                                                             | `'large' \| 'default' \| 'small'` | `'default'` |
+
+#### FormItemRule
+
+| Name      | Description                     | Type                 | Default |
+| --------- | ------------------------------- | -------------------- | ------- |
+| `trigger` | How the validator is triggered. | `'blur' \| 'change'` | —       |
+
+### Form Item Slots
+
+| Name    | Description                                   | Slot Scope  |
+| ------- | --------------------------------------------- | ----------- |
+| —       | Content of Form Item.                         | —           |
+| `label` | Custom content to display on label.           | `{ label }` |
+| `error` | Custom content to display validation message. | `{ error }` |
+
+### Form Item Methods
+
+| Method          | Description                                       | Type         |
+| --------------- | ------------------------------------------------- | ------------ |
+| `resetField`    | Reset current field and remove validation result. | `() => void` |
+| `clearValidate` | Remove validation status of the field.            | `() => void` |

docs/en-US/component/icon.md

@@ -0,0 +1,226 @@
+---
+title: Icon
+lang: en-US
+---
+
+# Icon
+
+Element Plus provides a set of common icons.
+
+## Icon Usage
+
+- If you want to **use directly** like the example, you need to [globally register](https://v3.vuejs.org/guide/component-registration.html#global-registration) the components before using it.
+
+- If you want to see all available SVG icons please check [@element-plus/icons-vue@1.x](https://unpkg.com/browse/@element-plus/icons-vue@1/dist/es/)[@element-plus/icons-vue@latest](https://unpkg.com/browse/@element-plus/icons-vue@latest/dist/types/components/) and the source [element-plus-icons](https://github.com/element-plus/element-plus-icons) out or [Icon Collection](#icon-collection)
+
+## Installation
+
+### Using packaging manager
+
+```shell
+# Choose a package manager you like.
+
+# NPM
+$ npm install @element-plus/icons-vue
+# Yarn
+$ yarn add @element-plus/icons-vue
+# pnpm
+$ pnpm install @element-plus/icons-vue
+```
+
+### Register All Icons
+
+You need import all icons from `@element-plus/icons-vue` and register them globally.
+
+```ts
+// main.ts
+
+// if you're using CDN, please remove this line.
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+const app = createApp(App)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+```
+
+You can also refer to [this template](https://codepen.io/sxzz/pen/xxpvdrg).
+
+### Import in Browser
+
+Import Element Plus Icons through browser HTML tags directly, and use global variable `ElementPlusIconsVue`.
+
+According to different CDN providers, there are different introduction methods.
+Here we use [unpkg](https://unpkg.com) and [jsDelivr](https://jsdelivr.com) as example.
+You can also use other CDN providers.
+
+#### unpkg
+
+```html
+<script src="//unpkg.com/@element-plus/icons-vue"></script>
+```
+
+#### jsDelivr
+
+```html
+<script src="//cdn.jsdelivr.net/npm/@element-plus/icons-vue"></script>
+```
+
+:::tip
+
+We recommend using CDN to import Element Plus users to lock the version
+on the link address, so as not to be affected by incompatible updates when Element Plus
+is upgraded in the future. Please check [unpkg.com](https://unpkg.com) for
+the method to lock the version.
+
+:::
+
+### Auto Import
+
+Use [unplugin-icons](https://github.com/antfu/unplugin-icons) and [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)
+to automatically import any icon collections from iconify.
+You can refer to [this template](https://github.com/sxzz/element-plus-best-practices/blob/db2dfc983ccda5570033a0ac608a1bd9d9a7f658/vite.config.ts#L21-L58).
+
+## Simple Usage
+
+:::warning
+
+Because HTML standard has already defined a tag named [menu](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu),
+so you need to use an alias in order to render the icon, if you register `Menu` directly it will not work.
+
+:::
+
+```vue
+<!-- Use el-icon to provide attributes to SVG icon -->
+<template>
+  <div>
+    <el-icon :size="size" :color="color">
+      <Edit />
+    </el-icon>
+    <!-- Or use it independently without derive attributes from parent -->
+    <Edit />
+  </div>
+</template>
+```
+
+<vp-script setup>
+import { Edit, Share, Delete, Search, Loading } from '@element-plus/icons-vue'
+</vp-script>
+
+<ElRow>
+  <div>
+    <ElIcon :size="30">
+      <Edit />
+    </ElIcon>
+    <Edit />
+  </div>
+</ElRow>
+
+## Combined with el-icon
+
+`el-icon` provides extra attributes for raw SVG icon, for more detail, please read to the end.
+
+```vue
+<template>
+  <p>
+    with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2
+    seconds, you can also override this
+  </p>
+  <el-icon :size="20">
+    <Edit />
+  </el-icon>
+  <el-icon color="#409EFC" class="no-inherit">
+    <Share />
+  </el-icon>
+  <el-icon>
+    <Delete />
+  </el-icon>
+  <el-icon class="is-loading">
+    <Loading />
+  </el-icon>
+  <el-button type="primary">
+    <el-icon style="vertical-align: middle">
+      <Search />
+    </el-icon>
+    <span style="vertical-align: middle"> Search </span>
+  </el-button>
+</template>
+```
+
+<ElRow>
+  <p>
+    with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2
+    seconds, you can also override this
+  </p>
+  <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
+    <ElIcon :size="20">
+      <Edit />
+    </ElIcon>
+    <ElIcon color="#409EFC" class="no-inherit">
+      <Share />
+    </ElIcon>
+    <ElIcon>
+      <Delete />
+    </ElIcon>
+    <ElIcon class="is-loading">
+      <Loading />
+    </ElIcon>
+    <ElButton type="primary">
+      <ElIcon style="vertical-align: middle; color: #fff;">
+        <Search />
+      </ElIcon>
+      <span style="vertical-align: middle;"> Search </span>
+    </ElButton>
+  </div>
+</ElRow>
+
+## Using SVG icon directly
+
+```vue
+<template>
+  <div style="font-size: 20px">
+    <!-- Since svg icons do not carry any attributes by default -->
+    <!-- You need to provide attributes directly -->
+    <Edit style="width: 1em; height: 1em; margin-right: 8px" />
+    <Share style="width: 1em; height: 1em; margin-right: 8px" />
+    <Delete style="width: 1em; height: 1em; margin-right: 8px" />
+    <Search style="width: 1em; height: 1em; margin-right: 8px" />
+  </div>
+</template>
+```
+
+<ElRow>
+  <div style="font-size: 20px;">
+    <!-- Since svg icons do not carry any attributes by default -->
+    <!-- You need to provide attributes directly -->
+    <Edit style="width: 1em; height: 1em; margin-right: 8px;" />
+    <Share style="width: 1em; height: 1em; margin-right: 8px;" />
+    <Delete style="width: 1em; height: 1em; margin-right: 8px;" />
+    <Search style="width: 1em; height: 1em; margin-right: 8px;" />
+  </div>
+</ElRow>
+
+## Icon Collection
+
+:::tip
+
+**You can use SVG icon in any version** as long as you install it
+
+**You can click the icon to copy it**
+
+:::
+
+<IconList />
+
+## Icon Attributes
+
+| Name    | Description                | Type                           | Default                |
+| ------- | -------------------------- | ------------------------------ | ---------------------- |
+| `color` | SVG tag's fill attribute   | `Pick<CSSProperties, 'color'>` | inherit from color     |
+| `size`  | SVG icon size, size x size | `number \| string`             | inherit from font size |
+
+## Icon Slots
+
+| Name      | Description               |
+| --------- | ------------------------- |
+| `default` | customize default content |

docs/en-US/component/image.md

@@ -0,0 +1,119 @@
+---
+title: Image
+lang: en-US
+---
+
+# Image
+
+Besides the native features of img, support lazy load, custom placeholder and load failure, etc.
+
+## Basic Usage
+
+:::demo Indicate how the image should be resized to fit its container by `fit`, same as native [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
+
+image/basic-usage
+
+:::
+
+## Placeholder
+
+:::demo Custom placeholder content when image hasn't loaded yet by `slot = placeholder`
+
+image/placeholder
+
+:::
+
+## Load Failed
+
+:::demo Custom failed content when error occurs to image load by `slot = error`
+
+image/load-failed
+
+:::
+
+## Lazy Load
+
+:::tip
+
+Native `loading` has been supported since <VersionTag version="2.2.3" />, you can use `loading = "lazy"` to replace `lazy = true`.
+
+If the current browser supports native lazy loading, the native lazy loading will be used first, otherwise will be implemented through scroll.
+
+:::
+
+:::demo Use lazy load by `lazy = true`. Image will load until scroll into view when set. You can indicate scroll container that adds scroll listener to by `scroll-container`. If undefined, will be the nearest parent container whose overflow property is auto or scroll.
+
+image/lazy-load
+
+:::
+
+## Image Preview
+
+:::demo allow big image preview by setting `previewSrcList` prop. You can initialize the position of the first picture previewed by `initial-index`. The default initial position is 0.
+
+image/image-preview
+
+:::
+
+## Image API
+
+### Image Attributes
+
+| Name                                     | Description                                                                                                                                       | Type                                                       | Default                                                                 |
+| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `src`                                    | image source, same as native.                                                                                                                     | `string`                                                   | —                                                                       |
+| `fit`                                    | indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | —                                                                       |
+| `hide-on-click-modal`                    | when enabling preview, use this flag to control whether clicking on backdrop can exit preview mode.                                               | `boolean`                                                  | `false`                                                                 |
+| `loading` <VersionTag version="2.2.3" /> | Indicates how the browser should load the image, same as [native](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading)     | `'eager' \| 'lazy'`                                        | —                                                                       |
+| `lazy`                                   | whether to use lazy load.                                                                                                                         | `boolean`                                                  | `false`                                                                 |
+| `scroll-container`                       | the container to add scroll listener when using lazy load.                                                                                        | `string \| HTMLElement`                                    | the nearest parent container whose overflow property is auto or scroll. |
+| `alt`                                    | native attribute `alt`.                                                                                                                           | `string`                                                   | —                                                                       |
+| `referrer-policy`                        | native attribute `referrerPolicy`.                                                                                                                | `string`                                                   | —                                                                       |
+| `preview-src-list`                       | allow big image preview.                                                                                                                          | `string[]`                                                 | —                                                                       |
+| `z-index`                                | set image preview z-index.                                                                                                                        | `number`                                                   | —                                                                       |
+| `initial-index`                          | initial preview image index, less than the length of `url-list`.                                                                                  | `number`                                                   | `0`                                                                     |
+| `close-on-press-escape`                  | whether the image-viewer can be closed by pressing ESC                                                                                            | `boolean`                                                  | `true`                                                                  |
+| `preview-teleported`                     | whether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to `true`.                     | `boolean`                                                  | `false`                                                                 |
+
+### Image Events
+
+| Name     | Description                                                                                       | Type                      |
+| -------- | ------------------------------------------------------------------------------------------------- | ------------------------- |
+| `load`   | same as native load.                                                                              | `(e: Event) => void`      |
+| `error`  | same as native error.                                                                             | `(e: Error) => void`      |
+| `switch` | trigger when switching images.                                                                    | `(index: number) => void` |
+| `close`  | trigger when clicking on close button or when `hide-on-click-modal` enabled clicking on backdrop. | `() => void`              |
+
+### Image Slots
+
+| Name          | Description                                              |
+| ------------- | -------------------------------------------------------- |
+| `placeholder` | custom placeholder content when image hasn't loaded yet. |
+| `error`       | custom image load failed content.                        |
+| `viewer`      | description of the image.                                |
+
+## Image Viewer API
+
+### Image Viewer Attributes
+
+| Name                  | Description                                                                                                                   | Type               | Default |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------- |
+| `url-list`            | preview link list.                                                                                                            | `string[]`         | `[]`    |
+| `z-index`             | preview backdrop z-index.                                                                                                     | `number \| string` | —       |
+| `initial-index`       | the initial preview image index, less than or equal to the length of `url-list`.                                              | `number`           | `0`     |
+| `infinite`            | whether preview is infinite.                                                                                                  | `boolean`          | `true`  |
+| `hide-on-click-modal` | whether user can emit close event when clicking backdrop.                                                                     | `boolean`          | `false` |
+| `teleported`          | whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true`. | `boolean`          | `false` |
+
+### Image Viewer Events
+
+| Name     | Description                                                                                       | Type                      |
+| -------- | ------------------------------------------------------------------------------------------------- | ------------------------- |
+| `close`  | trigger when clicking on close button or when `hide-on-click-modal` enabled clicking on backdrop. | `() => void`              |
+| `switch` | trigger when switching images.                                                                    | `(index: number) => void` |
+
+## Image Viewer Methods
+
+| Method        | Description           | Parameters                                            |
+| ------------- | --------------------- | ----------------------------------------------------- |
+| setActiveItem | manually switch image | index of the image to be switched to, starting from 0 |

docs/en-US/component/infinite-scroll.md

@@ -0,0 +1,36 @@
+---
+title: Infinite
+lang: en-US
+---
+
+# Infinite Scroll
+
+Load more data while reach bottom of the page
+
+## Basic usage
+
+Add `v-infinite-scroll` to the list to automatically execute loading method when scrolling to the bottom.
+
+:::demo
+
+infinite-scroll/basic
+
+:::
+
+## Disable Loading
+
+:::demo
+
+infinite-scroll/disable-loading
+
+:::
+
+## Directives
+
+| Name                      | Description                                                                                                      | Type     | Accepted values | Default |
+| ------------------------- | ---------------------------------------------------------------------------------------------------------------- | -------- | --------------- | ------- |
+| v-infinite-scroll         | Load more data while reach bottom of the page                                                                    | function | -               | -       |
+| infinite-scroll-disabled  | is disabled                                                                                                      | boolean  | -               | false   |
+| infinite-scroll-delay     | throttle delay (ms)                                                                                              | number   | -               | 200     |
+| infinite-scroll-distance  | trigger distance (px)                                                                                            | number   | -               | 0       |
+| infinite-scroll-immediate | Whether to execute the loading method immediately, in case the content cannot be filled up in the initial state. | boolean  | -               | true    |

docs/en-US/component/input-number.md

@@ -0,0 +1,116 @@
+---
+title: Input
+lang: en-US
+---
+
+# Input Number
+
+Input numerical values with a customizable range.
+
+## Basic usage
+
+:::demo Bind a variable to `v-model` in `<el-input-number>` element and you are set.
+
+input-number/basic
+
+:::
+
+:::tip
+
+When inputting invalid string to the input box, input value will emit `NaN` to the upper layer as result of error
+
+:::
+
+## Disabled
+
+:::demo The `disabled` attribute accepts a `boolean`, and if the value is `true`, the component is disabled. If you just need to control the value within a range, you can add `min` attribute to set the minimum value and `max` to set the maximum value. By default, the minimum value is `0`.
+
+input-number/disabled
+
+:::
+
+## Steps
+
+Allows you to define incremental steps.
+
+:::demo Add `step` attribute to set the step.
+
+input-number/steps
+
+:::
+
+## Step strictly
+
+:::demo The `step-strictly` attribute accepts a `boolean`. if this attribute is `true`, input value can only be multiple of step.
+
+input-number/step-strictly
+
+:::
+
+## Precision
+
+:::demo Add `precision` attribute to set the precision of input value.
+
+input-number/precision
+
+:::
+
+:::tip
+
+The value of `precision` must be a non negative integer and should not be less than the decimal places of `step`.
+
+:::
+
+## Size
+
+Use attribute `size` to set additional sizes with `large` or `small`.
+
+:::demo
+
+input-number/size
+
+:::
+
+## Controls Position
+
+:::demo Set `controls-position` to decide the position of control buttons.
+
+input-number/controlled
+
+:::
+
+## Attributes
+
+| Name                          | Description                                      | Type                   | Accepted Values         | Default     |
+| ----------------------------- | ------------------------------------------------ | ---------------------- | ----------------------- | ----------- |
+| model-value / v-model         | binding value                                    | number / undefined     | —                       | —           |
+| min                           | the minimum allowed value                        | number                 | —                       | `-Infinity` |
+| max                           | the maximum allowed value                        | number                 | —                       | `Infinity`  |
+| step                          | incremental step                                 | number                 | —                       | 1           |
+| step-strictly                 | whether input value can only be multiple of step | boolean                | —                       | false       |
+| precision                     | precision of input value                         | number                 | —                       | —           |
+| size                          | size of the component                            | string                 | large / default / small | default     |
+| readonly                      | same as `readonly` in native input               | boolean                | —                       | false       |
+| disabled                      | whether the component is disabled                | boolean                | —                       | false       |
+| controls                      | whether to enable the control buttons            | boolean                | —                       | true        |
+| controls-position             | position of the control buttons                  | string                 | right                   | -           |
+| name                          | same as `name` in native input                   | string                 | —                       | —           |
+| label                         | label text                                       | string                 | —                       | —           |
+| placeholder                   | placeholder in input                             | string                 | -                       | -           |
+| value-on-clear **(\> 2.2.0)** | value should be set when input box is cleared    | string / number / null | min / max               | -           |
+| validate-event                | whether to trigger form validation               | boolean                | -                       | true        |
+
+## Events
+
+| Name   | Description                     | Parameters                                             |
+| ------ | ------------------------------- | ------------------------------------------------------ |
+| change | triggers when the value changes | (currentValue: number \| NaN, oldValue: number \| NaN) |
+| blur   | triggers when Input blurs       | (event: FocusEvent)                                    |
+| focus  | triggers when Input focuses     | (event: FocusEvent)                                    |
+
+## Methods
+
+| Method | Description                      | Parameters |
+| ------ | -------------------------------- | ---------- |
+| focus  | get focus the input component    | -          |
+| blur   | remove focus the input component | —          |

docs/en-US/component/input.md

@@ -0,0 +1,177 @@
+---
+title: Input
+lang: en-US
+---
+
+# Input
+
+Input data using mouse or keyboard.
+
+:::warning
+
+Input is a controlled component, it **always shows Vue binding value**.
+
+Under normal circumstances, `input` event should be handled. Its handler should update component's binding value (or use `v-model`). Otherwise, input box's value will not change.
+
+Do not support `v-model` modifiers.
+
+:::
+
+## Basic usage
+
+:::demo
+
+input/basic
+
+:::
+
+## Disabled
+
+:::demo Disable the Input with the `disabled` attribute.
+
+input/disabled
+
+:::
+
+## Clearable
+
+:::demo Make the Input clearable with the `clearable` attribute.
+
+input/clearable
+
+:::
+
+## Formatter
+
+Display value within it's situation with `formatter`, and we usually use `parser` at the same time.
+
+:::demo
+
+input/formatter
+
+:::
+
+## Password box
+
+:::demo Make a toggle-able password Input with the `show-password` attribute.
+
+input/password
+
+:::
+
+## Input with icon
+
+Add an icon to indicate input type.
+
+:::demo To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well.
+
+input/with-icon
+
+:::
+
+## Textarea
+
+Resizable for entering multiple lines of text information. Add attribute `type="textarea"` to change `input` into native `textarea`.
+
+:::demo Control the height by setting the `rows` prop.
+
+input/textarea
+
+:::
+
+## Autosize Textarea
+
+Setting the `autosize` prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea can automatically adjust.
+
+:::demo
+
+input/auto-sizing-textarea
+
+:::
+
+## Mixed input
+
+Prepend or append an element, generally a label or a button.
+
+:::demo Use `slot` to distribute elements that prepend or append to Input.
+
+input/mixed-input
+
+:::
+
+## Sizes
+
+:::demo Add `size` attribute to change the size of Input. In addition to the default size, there are two other options: `large`, `small`.
+
+input/various-size
+
+:::
+
+## Limit length
+
+:::demo `maxlength` and `minlength` attributes of input, they declare a limit on the number of characters a user can input. The "number of characters" is measured using JavaScript string length.Setting the `maxlength` prop for a text or textarea type of Input can limit the length of input value, allows you to show word count by setting `show-word-limit` to `true` at the same time.
+
+input/length-limiting
+
+:::
+
+## Input Attributes
+
+| Name                 | Description                                                                                                                            | Type                                  | Accepted Values                                                                                                                       | Default |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| type                 | type of input                                                                                                                          | string                                | text, textarea and other [native input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text    |
+| modelValue / v-model | binding value                                                                                                                          | string / number                       | —                                                                                                                                     | —       |
+| maxlength            | the max length                                                                                                                         | string / number                       | —                                                                                                                                     | —       |
+| minlength            | same as `minlength` in native input                                                                                                    | number                                | —                                                                                                                                     | —       |
+| show-word-limit      | whether show word count, only works when `type` is 'text' or 'textarea'                                                                | boolean                               | —                                                                                                                                     | false   |
+| placeholder          | placeholder of Input                                                                                                                   | string                                | —                                                                                                                                     | —       |
+| clearable            | whether to show clear button                                                                                                           | boolean                               | —                                                                                                                                     | false   |
+| formatter            | specifies the format of the value presented input.(only works when `type` is 'text')                                                   | `(value: string \| number) => string` | —                                                                                                                                     | —       |
+| parser               | specifies the value extracted from formatter input.(only works when `type` is 'text')                                                  | `(string) => string`                  | —                                                                                                                                     | —       |
+| show-password        | whether to show toggleable password input                                                                                              | boolean                               | —                                                                                                                                     | false   |
+| disabled             | whether Input is disabled                                                                                                              | boolean                               | —                                                                                                                                     | false   |
+| size                 | size of Input, works when `type` is not 'textarea'                                                                                     | string                                | large / default / small                                                                                                               | —       |
+| prefix-icon          | prefix icon component                                                                                                                  | `string \| Component`                 | —                                                                                                                                     | —       |
+| suffix-icon          | suffix icon component                                                                                                                  | `string \| Component`                 | —                                                                                                                                     | —       |
+| rows                 | number of rows of textarea, only works when `type` is 'textarea'                                                                       | number                                | —                                                                                                                                     | 2       |
+| autosize             | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. `{ minRows: 2, maxRows: 6 }` | boolean / object                      | —                                                                                                                                     | false   |
+| autocomplete         | same as `autocomplete` in native input                                                                                                 | string                                | —                                                                                                                                     | off     |
+| name                 | same as `name` in native input                                                                                                         | string                                | —                                                                                                                                     | —       |
+| readonly             | same as `readonly` in native input                                                                                                     | boolean                               | —                                                                                                                                     | false   |
+| max                  | same as `max` in native input                                                                                                          | —                                     | —                                                                                                                                     | —       |
+| min                  | same as `min` in native input                                                                                                          | —                                     | —                                                                                                                                     | —       |
+| step                 | same as `step` in native input                                                                                                         | —                                     | —                                                                                                                                     | —       |
+| resize               | control the resizability                                                                                                               | string                                | none / both / horizontal / vertical                                                                                                   | —       |
+| autofocus            | same as `autofocus` in native input                                                                                                    | boolean                               | —                                                                                                                                     | false   |
+| form                 | same as `form` in native input                                                                                                         | string                                | —                                                                                                                                     | —       |
+| label                | label text                                                                                                                             | string                                | —                                                                                                                                     | —       |
+| tabindex             | input tabindex                                                                                                                         | string / number                       | -                                                                                                                                     | -       |
+| validate-event       | whether to trigger form validation                                                                                                     | boolean                               | -                                                                                                                                     | true    |
+| input-style          | the style of the input element or textarea element                                                                                     | object                                | -                                                                                                                                     | {}      |
+
+## Input Slots
+
+| Name    | Description                                                               |
+| ------- | ------------------------------------------------------------------------- |
+| prefix  | content as Input prefix, only works when `type` is not 'textarea'         |
+| suffix  | content as Input suffix, only works when `type` is not 'textarea'         |
+| prepend | content to prepend before Input, only works when `type` is not 'textarea' |
+| append  | content to append after Input, only works when `type` is not 'textarea'   |
+
+## Input Events
+
+| Name   | Description                                                                                           | Parameters                |
+| ------ | ----------------------------------------------------------------------------------------------------- | ------------------------- |
+| blur   | triggers when Input blurs                                                                             | (event: FocusEvent)       |
+| focus  | triggers when Input focuses                                                                           | (event: FocusEvent)       |
+| change | triggers when the input box loses focus or the user presses Enter, only if the modelValue has changed | (value: string \| number) |
+| input  | triggers when the Input value change                                                                  | (value: string \| number) |
+| clear  | triggers when the Input is cleared by clicking the clear button                                       | —                         |
+
+## Input Methods
+
+| Method | Description                      | Parameters |
+| ------ | -------------------------------- | ---------- |
+| focus  | focus the input element          | —          |
+| blur   | blur the input element           | —          |
+| select | select the text in input element | —          |

docs/en-US/component/layout.md

@@ -0,0 +1,142 @@
+---
+title: Layout
+lang: en-US
+---
+
+# Layout
+
+Quickly and easily create layouts with the basic 24-column.
+
+:::tip
+
+The component uses flex layout by default, no need to set `type="flex"` manually.
+
+Please note that the parent container should avoid using `inline` related styles,
+which will cause the component to not fill up its width.
+
+:::
+
+## Basic layout
+
+Create basic grid layout using columns.
+
+:::demo With `row` and `col`, we can easily manipulate the layout using the `span` attribute.
+
+layout/basic-layout
+
+:::
+
+## Column spacing
+
+Column spacing is supported.
+
+:::demo Row provides `gutter` attribute to specify spacings between columns, and its default value is 0.
+
+layout/column-spacing
+
+:::
+
+## Hybrid layout
+
+Form a more complex hybrid layout by combining the basic 1/24 columns.
+
+:::demo
+
+layout/hybrid-layout
+
+:::
+
+## Column offset
+
+You can specify column offsets.
+
+:::demo You can specify the number of column offset by setting the value of `offset` attribute of Col.
+
+layout/column-offset
+
+:::
+
+## Alignment
+
+Default use the flex layout to make flexible alignment of columns.
+
+:::demo You can define the layout of child elements by setting `justify` attribute with start, center, end, space-between, space-around or space-evenly.
+
+layout/alignment
+
+:::
+
+## Responsive Layout
+
+Taking example by Bootstrap's responsive design, five breakpoints are preset:
+xs, sm, md, lg and xl.
+
+:::demo
+
+layout/responsive-layout
+
+:::
+
+## Utility classes for hiding elements
+
+Additionally, Element Plus provides a series of classes for hiding elements under
+certain conditions. These classes can be added to any DOM elements or custom components.
+You need to import the following CSS file to use these classes:
+
+```js
+import 'element-plus/theme-chalk/display.css'
+```
+
+The classes are:
+
+- `hidden-xs-only` - hide when on extra small viewports only
+- `hidden-sm-only` - hide when on small viewports only
+- `hidden-sm-and-down` - hide when on small viewports and down
+- `hidden-sm-and-up` - hide when on small viewports and up
+- `hidden-md-only` - hide when on medium viewports only
+- `hidden-md-and-down` - hide when on medium viewports and down
+- `hidden-md-and-up` - hide when on medium viewports and up
+- `hidden-lg-only` - hide when on large viewports only
+- `hidden-lg-and-down` - hide when on large viewports and down
+- `hidden-lg-and-up` - hide when on large viewports and up
+- `hidden-xl-only` - hide when on extra large viewports only
+
+## Row Attributes
+
+| Name    | Description                         | Type   | Accepted Values                                          | Default |
+| ------- | ----------------------------------- | ------ | -------------------------------------------------------- | ------- |
+| gutter  | grid spacing                        | number | —                                                        | 0       |
+| justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between/space-evenly | start   |
+| align   | vertical alignment of flex layout   | string | top/middle/bottom                                        | top     |
+| tag     | custom element tag                  | string | (\*)                                                     | div     |
+
+## Row Slots
+
+| Name | Description               | Subtags |
+| ---- | ------------------------- | ------- |
+| —    | customize default content | Col     |
+
+## Col Attributes
+
+| Name   | Description                                         | Type                                      | Accepted Values | Default |
+| ------ | --------------------------------------------------- | ----------------------------------------- | --------------- | ------- |
+| span   | number of column the grid spans                     | number                                    | —               | 24      |
+| offset | number of spacing on the left side of the grid      | number                                    | —               | 0       |
+| push   | number of columns that grid moves to the right      | number                                    | —               | 0       |
+| pull   | number of columns that grid moves to the left       | number                                    | —               | 0       |
+| xs     | `<768px` Responsive columns or column props object  | number/object (e.g. {span: 4, offset: 4}) | —               | —       |
+| sm     | `≥768px` Responsive columns or column props object  | number/object (e.g. {span: 4, offset: 4}) | —               | —       |
+| md     | `≥992px` Responsive columns or column props object  | number/object (e.g. {span: 4, offset: 4}) | —               | —       |
+| lg     | `≥1200px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | —               | —       |
+| xl     | `≥1920px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | —               | —       |
+| tag    | custom element tag                                  | string                                    | (\*)            | div     |
+
+## Col Slots
+
+| Name | Description               |
+| ---- | ------------------------- |
+| —    | customize default content |
+
+<style lang="scss">
+@use '../../examples/layout/index.scss';
+</style>

docs/en-US/component/link.md

@@ -0,0 +1,71 @@
+---
+title: Link
+lang: en-US
+---
+
+# Link
+
+Text hyperlink
+
+## Basic
+
+Basic text link
+
+:::demo
+
+link/basic
+
+:::
+
+## Disabled
+
+Disabled state of link
+
+:::demo
+
+link/disabled
+
+:::
+
+## Underline
+
+Underline of link
+
+:::demo
+
+link/underline
+
+:::
+
+## Icon
+
+Link with icon
+
+:::tip
+
+Use the `icon` attribute to add icon. You can pass either string for the component name (registered in advance) or the component itself which is a SVG Vue component. Element Plus has provided a set of icon that you can find at [icon](/en-US/component/icon)
+
+:::
+
+:::demo
+
+link/with-icon
+
+:::
+
+## Attributes
+
+| Name      | Description                         | Type                  | Accepted Values                                       | Default |
+| --------- | ----------------------------------- | --------------------- | ----------------------------------------------------- | ------- |
+| type      | type                                | string                | primary / success / warning / danger / info / default | default |
+| underline | whether the component has underline | boolean               | —                                                     | true    |
+| disabled  | whether the component is disabled   | boolean               | —                                                     | false   |
+| href      | same as native hyperlink's `href`   | string                | —                                                     | -       |
+| icon      | icon component                      | `string \| Component` | —                                                     | -       |
+
+## Slots
+
+| Name | Description               |
+| ---- | ------------------------- |
+| —    | customize default content |
+| icon | customize icon component  |

docs/en-US/component/loading.md

@@ -0,0 +1,103 @@
+---
+title: Loading
+lang: en-US
+---
+
+# Loading
+
+Show animation while loading data.
+
+## Loading inside a container
+
+Displays animation in a container (such as a table) while loading data.
+
+:::demo Element Plus provides two ways to invoke Loading: directive and service. For the custom directive `v-loading`, you just need to bind a `boolean` value to it. By default, the loading mask will append to the element where the directive is used. Adding the `body` modifier makes the mask append to the body element.
+
+loading/basic
+
+:::
+
+## Customization
+
+You can customize loading text, loading spinner and background color.
+
+:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. Similarly, the `element-loading-spinner / element-loading-svg` and `element-loading-background` attributes are used to set the svg icon, background color value, and loading icon, respectively.
+
+loading/customization
+
+:::
+
+:::warning
+
+Although the `element-loading-spinner / element-loading-svg` attribute supports incoming HTML fragments, it is very dangerous to dynamically render arbitrary HTML on the website, because it is easy to cause [XSS attack](https://en.wikipedia.org/wiki/Cross-site_scripting). Please make sure that the content of `element-loading-spinner / element-loading-svg` is trustworthy. **Never** assign user-submitted content to the `element-loading-spinner / element-loading-svg` attribute.
+
+:::
+
+## Full screen loading
+
+Show a full screen animation while loading data.
+
+:::demo When used as a directive, a full screen Loading requires the `fullscreen` modifier, and it will be appended to body. In this case, if you wish to disable scrolling on body, you can add another modifier `lock`. When used as a service, Loading will be full screen by default.
+
+loading/fullscreen
+
+:::
+
+## Service
+
+You can also invoke Loading with a service. Import Loading service:
+
+```ts
+import { ElLoading } from 'element-plus'
+```
+
+Invoke it:
+
+```ts
+ElLoading.service(options)
+```
+
+The parameter `options` is the configuration of Loading, and its details can be found in the following table. `LoadingService` returns a Loading instance, and you can close it by invoking its `close` method:
+
+```ts
+const loadingInstance = ElLoading.service(options)
+nextTick(() => {
+  // Loading should be closed asynchronously
+  loadingInstance.close()
+})
+```
+
+Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:
+
+```ts
+const loadingInstance1 = ElLoading.service({ fullscreen: true })
+const loadingInstance2 = ElLoading.service({ fullscreen: true })
+console.log(loadingInstance1 === loadingInstance2) // true
+```
+
+Calling the `close` method on any one of them can close this full screen Loading.
+
+If Element Plus is imported entirely, a globally method `$loading` will be registered to `app.config.globalProperties`. You can invoke it like this: `this.$loading(options)`, and it also returns a Loading instance.
+
+## Options
+
+| Attribute    | Description                                                                                                                                                              | Type          | Accepted Values | Default       |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | --------------- | ------------- |
+| target       | the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node | object/string | —               | document.body |
+| body         | same as the `body` modifier of `v-loading`                                                                                                                               | boolean       | —               | false         |
+| fullscreen   | same as the `fullscreen` modifier of `v-loading`                                                                                                                         | boolean       | —               | true          |
+| lock         | same as the `lock` modifier of `v-loading`                                                                                                                               | boolean       | —               | false         |
+| text         | loading text that displays under the spinner                                                                                                                             | string        | —               | —             |
+| spinner      | class name of the custom spinner                                                                                                                                         | string        | —               | —             |
+| background   | background color of the mask                                                                                                                                             | string        | —               | —             |
+| custom-class | custom class name for Loading                                                                                                                                            | string        | —               | —             |
+
+## Directives
+
+| Name                       | Description                                                  | Type    |
+| -------------------------- | ------------------------------------------------------------ | ------- |
+| v-loading                  | show animation while loading data                            | boolean |
+| element-loading-text       | loading text that displays under the spinner                 | string  |
+| element-loading-spinner    | icon of the custom spinner                                   | string  |
+| element-loading-svg        | icon of the custom spinner (same as element-loading-spinner) | string  |
+| element-loading-background | background color of the mask                                 | string  |

docs/en-US/component/menu.md

@@ -0,0 +1,141 @@
+---
+title: Menu
+lang: en-US
+---
+
+# Menu
+
+Menu that provides navigation for your website.
+
+## Top bar
+
+Top bar Menu can be used in a variety of scenarios.
+
+:::demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the sub-menu component to create a second level menu. Menu provides `background-color`, `text-color` and `active-text-color` to customize the colors.
+
+menu/basic
+
+:::
+
+## Left And Right
+
+:::demo You can make the menu items to the left or right.
+
+menu/left-and-right
+
+:::
+
+## Side bar
+
+Vertical Menu with sub-menus.
+
+:::demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.
+
+menu/vertical
+
+:::
+
+## Collapse
+
+Vertical Menu could be collapsed.
+
+:::demo
+
+menu/collapse
+
+:::
+
+## Menu Attributes
+
+| Name                | Description                                                                                                                                                           | Type    | Accepted Values       | Default  |
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------- | -------- |
+| mode                | menu display mode                                                                                                                                                     | string  | horizontal / vertical | vertical |
+| collapse            | whether the menu is collapsed (available only in vertical mode)                                                                                                       | boolean | —                     | false    |
+| ellipsis            | whether the menu is ellipsis (available only in horizontal mode)                                                                                                      | boolean | —                     | true     |
+| background-color    | background color of Menu (hex format) (deprecated, use `--bg-color` instead)                                                                                          | string  | —                     | #ffffff  |
+| text-color          | text color of Menu (hex format) (deprecated, use `--text-color` instead)                                                                                              | string  | —                     | #303133  |
+| active-text-color   | text color of currently active menu item (hex format) (deprecated, use `--active-color` instead)                                                                      | string  | —                     | #409EFF  |
+| default-active      | index of active menu on page load                                                                                                                                     | string  | —                     | —        |
+| default-openeds     | array that contains indexes of currently active sub-menus                                                                                                             | Array   | —                     | —        |
+| unique-opened       | whether only one sub-menu can be active                                                                                                                               | boolean | —                     | false    |
+| menu-trigger        | how sub-menus are triggered, only works when `mode` is 'horizontal'                                                                                                   | string  | hover / click         | hover    |
+| router              | whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action. Use with `default-active` to set the active item on load. | boolean | —                     | false    |
+| collapse-transition | whether to enable the collapse transition                                                                                                                             | boolean | —                     | true     |
+
+## Menu Methods
+
+| Methods Name | Description               | Parameters                            |
+| ------------ | ------------------------- | ------------------------------------- |
+| open         | open a specific sub-menu  | index: index of the sub-menu to open  |
+| close        | close a specific sub-menu | index: index of the sub-menu to close |
+
+## Menu Events
+
+| Name   | Description                               | Parameters                                                                                                                                                                 |
+| ------ | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| select | callback function when menu is activated  | index: index of activated menu, indexPath: index path of activated menu, item: the selected menu item, routeResult: result returned by `vue-router` if `router` is enabled |
+| open   | callback function when sub-menu expands   | index: index of expanded sub-menu, indexPath: index path of expanded sub-menu                                                                                              |
+| close  | callback function when sub-menu collapses | index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu                                                                                            |
+
+## Menu Slots
+
+| Name | Description               | Subtags                               |
+| ---- | ------------------------- | ------------------------------------- |
+| —    | customize default content | SubMenu / Menu-Item / Menu-Item-Group |
+
+## SubMenu Attributes
+
+| Name                              | Description                                                                                                                                   | Type                  | Accepted Values | Default                                         |
+| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | --------------- | ----------------------------------------------- |
+| index                             | unique identification                                                                                                                         | string                | —               | —                                               |
+| popper-class                      | custom class name for the popup menu                                                                                                          | string                | —               | —                                               |
+| show-timeout                      | timeout before showing a sub-menu                                                                                                             | number                | —               | 300                                             |
+| hide-timeout                      | timeout before hiding a sub-menu                                                                                                              | number                | —               | 300                                             |
+| disabled                          | whether the sub-menu is disabled                                                                                                              | boolean               | —               | false                                           |
+| popper-append-to-body(deprecated) | whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this prop                              | boolean               | —               | level one SubMenu: true / other SubMenus: false |
+| popper-offset                     | offset of the popper                                                                                                                          | number                | —               | 6                                               |
+| expand-close-icon                 | Icon when menu are expanded and submenu are closed, `expand-close-icon` and `expand-open-icon` need to be passed together to take effect      | `string \| Component` | —               | —                                               |
+| expand-open-icon                  | Icon when menu are expanded and submenu are opened, `expand-open-icon` and `expand-close-icon` need to be passed together to take effect      | `string \| Component` | —               | —                                               |
+| collapse-close-icon               | Icon when menu are collapsed and submenu are closed, `collapse-close-icon` and `collapse-open-icon` need to be passed together to take effect | `string \| Component` | —               | —                                               |
+| collapse-open-icon                | Icon when menu are collapsed and submenu are opened, `collapse-open-icon` and `collapse-close-icon` need to be passed together to take effect | `string \| Component` | —               | —                                               |
+
+## SubMenu Slots
+
+| Name  | Description               | Subtags                               |
+| ----- | ------------------------- | ------------------------------------- |
+| —     | customize default content | SubMenu / Menu-Item / Menu-Item-Group |
+| title | customize title content   | —                                     |
+
+## Menu-Item Attributes
+
+| Name     | Description           | Type        | Accepted Values | Default |
+| -------- | --------------------- | ----------- | --------------- | ------- |
+| index    | unique identification | string/null | —               | null    |
+| route    | Vue Router object     | object      | —               | —       |
+| disabled | whether disabled      | boolean     | —               | false   |
+
+## Menu-Item Events
+
+| Name  | Description                                 | Parameters             |
+| ----- | ------------------------------------------- | ---------------------- |
+| click | callback function when menu-item is clicked | el: menu-item instance |
+
+## Menu-Item Slots
+
+| Name  | Description               |
+| ----- | ------------------------- |
+| —     | customize default content |
+| title | customize title content   |
+
+## Menu-Item-Group Attributes
+
+| Name  | Description | Type   | Accepted Values | Default |
+| ----- | ----------- | ------ | --------------- | ------- |
+| title | group title | string | —               | —       |
+
+## Menu-Item-Group Slots
+
+| Name  | Description               | Subtags   |
+| ----- | ------------------------- | --------- |
+| —     | customize default content | Menu-Item |
+| title | customize group title     | —         |

docs/en-US/component/message.md

@@ -0,0 +1,134 @@
+---
+title: Message
+lang: en-US
+---
+
+# Message
+
+Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.
+
+## Basic usage
+
+Displays at the top, and disappears after 3 seconds.
+
+:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element Plus has registered a `$message` method for invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.
+
+message/basic
+
+:::
+
+## Types
+
+Used to show the feedback of Success, Warning, Message and Error activities.
+
+:::demo When you need more customizations, Message component can also take an object as parameter. For example, setting value of `type` can define different types, and its default is `info`. In such cases the main body is passed in as the value of `message`. Also, we have registered methods for different types, so you can directly call it without passing a type like `open4`.
+
+message/different-types
+
+:::
+
+## Closable
+
+A close button can be added.
+
+:::demo A default Message cannot be closed manually. If you need a closable message, you can set `showClose` field. Besides, same as notification, message has a controllable `duration`. Default duration is 3000 ms, and it won't disappear when set to `0`.
+
+message/closable
+
+:::
+
+## Centered text
+
+Use the `center` attribute to center the text.
+
+:::demo
+
+message/centered-content
+
+:::
+
+## Use HTML string
+
+`message` supports HTML string.
+
+:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
+
+message/raw-html
+
+:::
+
+:::warning
+
+Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
+
+:::
+
+## grouping
+
+merge messages with the same content.
+
+:::demo Set `grouping` to true and the same content of `message` will be merged.
+
+message/grouping
+
+:::
+
+## Global method
+
+Element Plus has added a global method `$message` for `app.config.globalProperties`. So in a vue instance you can call `Message` like what we did in this page.
+
+## Local import
+
+```ts
+import { ElMessage } from 'element-plus'
+```
+
+In this case you should call `ElMessage(options)`. We have also registered methods for different types, e.g. `ElMessage.success(options)`. You can call `ElMessage.closeAll()` to manually close all the instances.
+
+## App context inheritance <el-tag> >= 2.0.3</el-tag>
+
+Now message accepts a `context` as second parameter of the message constructor which allows you to inject current app's context to message which allows you to inherit all the properties of the app.
+
+You can use it like this:
+
+:::tip
+
+If you globally registered ElMessage component, it will automatically inherit your app context.
+
+:::
+
+```ts
+import { getCurrentInstance } from 'vue'
+import { ElMessage } from 'element-plus'
+
+// in your setup method
+const { appContext } = getCurrentInstance()!
+ElMessage({}, appContext)
+```
+
+## Message API
+
+### Options
+
+| Attribute                  | Description                                                                    | Type                                          | Default         |
+| -------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------- | --------------- |
+| `message`                  | message text                                                                   | `string \| VNode \| (() => VNode)`            | —               |
+| `type`                     | message type                                                                   | `'success' \| 'warning' \| 'info' \| 'error'` | `'info'`        |
+| `icon`                     | custom icon component, overrides `type`                                        | `string \| Component`                         | —               |
+| `dangerouslyUseHTMLString` | whether `message` is treated as HTML string                                    | `boolean`                                     | `false`         |
+| `custom-class`             | custom class name for Message                                                  | `string`                                      | —               |
+| `duration`                 | display duration, millisecond. If set to 0, it will not turn off automatically | `number`                                      | `3000`          |
+| `show-close`               | whether to show a close button                                                 | `boolean`                                     | `false`         |
+| `center`                   | whether to center the text                                                     | `boolean`                                     | `false`         |
+| `on-close`                 | callback function when closed with the message instance as the parameter       | `function`                                    | —               |
+| `offset`                   | set the distance to the top of viewport                                        | `number`                                      | `20`            |
+| `appendTo`                 | set the root element for the message                                           | `string \| HTMLElement`                       | `document.body` |
+| `grouping`                 | merge messages with the same content, type of VNode message is not supported   | `boolean`                                     | `false`         |
+
+### Methods
+
+`Message` and `this.$message` returns the current Message instance. To manually close the instance, you can call `close` on it.
+
+| Method  | Description       |
+| ------- | ----------------- |
+| `close` | close the Message |

docs/en-US/component/notification.md

@@ -0,0 +1,131 @@
+---
+title: Notification
+lang: en-US
+---
+
+# Notification
+
+Displays a global notification message at a corner of the page.
+
+## Basic usage
+
+:::demo Element Plus has registered the `$notify` method and it receives an object as its parameter. In the simplest case, you can set the `title` field and the` message` field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting `duration` you can control its duration. Specifically, if set to `0`, it will not close automatically. Note that `duration` receives a `Number` in milliseconds.
+
+notification/basic
+
+:::
+
+## With types
+
+We provide four types: success, warning, info and error.
+
+:::demo Element Plus provides four notification types: `success`, `warning`, `info` and `error`. They are set by the `type` field, and other values will be ignored. We also registered methods for these types that can be invoked directly like `open3` and `open4` without passing a `type` field.
+
+notification/different-types
+
+:::
+
+## Custom position
+
+Notification can emerge from any corner you like.
+
+:::demo The `position` attribute defines which corner Notification slides in. It can be `top-right`, `top-left`, `bottom-right` or `bottom-left`. Defaults to `top-right`.
+
+notification/positioning
+
+:::
+
+## With offset
+
+Customize Notification's offset from the edge of the screen.
+
+:::demo Set the `offset` attribute to customize Notification's offset from the edge of the screen. Note that every Notification instance of the same moment should have the same offset.
+
+notification/offsetting
+
+:::
+
+## Use HTML string
+
+`message` supports HTML string.
+
+:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
+
+notification/raw-html
+
+:::
+
+:::warning
+
+Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
+
+:::
+
+## Hide close button
+
+It is possible to hide the close button
+
+:::demo Set the `showClose` attribute to `false` so the notification cannot be closed by the user.
+
+notification/no-close
+
+:::
+
+## Global method
+
+Element Plus has added a global method `$notify` for `app.config.globalProperties`. So in a vue instance you can call `Notification` like what we did in this page.
+
+## Local import
+
+```javascript
+import { ElNotification } from 'element-plus'
+```
+
+In this case you should call `ElNotification(options)`. We have also registered methods for different types, e.g. `ElNotification.success(options)`. You can call `ElNotification.closeAll()` to manually close all the instances.
+
+## App context inheritance <el-tag>> 2.0.4</el-tag>
+
+Now notification accepts a `context` as second parameter of the message constructor which allows you to inject current app's context to notification which allows you to inherit all the properties of the app.
+
+You can use it like this:
+
+:::tip
+
+If you globally registered ElNotification component, it will automatically inherit your app context.
+
+:::
+
+```ts
+import { getCurrentInstance } from 'vue'
+import { ElNotification } from 'element-plus'
+
+// in your setup method
+const { appContext } = getCurrentInstance()!
+ElNotification({}, appContext)
+```
+
+## Options
+
+| Attribute                | Description                                                                                                        | Type                  | Accepted Values                             | Default       |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------ | --------------------- | ------------------------------------------- | ------------- |
+| title                    | title                                                                                                              | string                | —                                           | —             |
+| message                  | description text                                                                                                   | string/Vue.VNode      | —                                           | —             |
+| dangerouslyUseHTMLString | whether `message` is treated as HTML string                                                                        | boolean               | —                                           | false         |
+| type                     | notification type                                                                                                  | string                | success/warning/info/error                  | —             |
+| icon                     | custom icon component. It will be overridden by `type`                                                             | `string \| Component` | —                                           | —             |
+| customClass              | custom class name for Notification                                                                                 | string                | —                                           | —             |
+| duration                 | duration before close. It will not automatically close if set 0                                                    | number                | —                                           | 4500          |
+| position                 | custom position                                                                                                    | string                | top-right/top-left/bottom-right/bottom-left | top-right     |
+| showClose                | whether to show a close button                                                                                     | boolean               | —                                           | true          |
+| onClose                  | callback function when closed                                                                                      | function              | —                                           | —             |
+| onClick                  | callback function when notification clicked                                                                        | function              | —                                           | —             |
+| offset                   | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number                | —                                           | 0             |
+| appendTo                 | set the root element for the notification                                                                          | string / HTMLElement  | -                                           | document.body |
+| zIndex                   | initial zIndex                                                                                                     | number                | -                                           | 0             |
+
+## Methods
+
+`Notification` and `this.$notify` returns the current Notification instance. To manually close the instance, you can call `close` on it.
+| Method | Description |
+| ---- | ---- |
+| close | close the Notification |

docs/en-US/component/page-header.md

@@ -0,0 +1,124 @@
+---
+title: Page
+lang: en-US
+---
+
+# Page Header
+
+If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
+
+## Complete example
+
+:::demo
+
+page-header/complete
+
+:::
+
+## Basic usage
+
+Standard page header, for simply scenarios.
+
+:::demo
+
+page-header/basic
+
+:::
+
+## Custom icon
+
+The default icon might not meet your satisfaction, you can customize the icon by setting `icon` attribute
+like the example.
+
+:::demo
+
+page-header/custom-icon
+
+:::
+
+## No icon
+
+Sometimes the page is just full of elements, and you might not want the icon to show up on the page,
+you can set the `icon` attribute to `null` to get rid of it.
+
+:::demo
+
+page-header/no-icon
+
+:::
+
+## Breadcrumbs
+
+Page header allows you to add breadcrumbs for giving route information to the users by `breadcrumb` slot.
+
+:::demo
+
+page-header/breadcrumb
+
+:::
+
+## Additional operation section
+
+The header can be as complicated as needed, you may add additional sections to the header, to allow rich
+interactions.
+
+:::demo
+
+page-header/additional-sections
+
+:::
+
+## Main content
+
+Sometimes we want the head to show with some co-responding content, we can utilize the `default` slot for doing so.
+
+:::demo
+
+page-header/main-content
+
+:::
+
+## Anatomy
+
+The component is consisted of these parts
+
+```vue
+<template>
+  <el-page-header>
+    <!-- Line 1 -->
+    <template #breadcrumb />
+    <!-- Line 2 -->
+    <template #icon />
+    <template #title />
+    <template #content />
+    <template #extra />
+    <!-- Lines after 2 -->
+    <template #default />
+  </el-page-header>
+</template>
+```
+
+## Attributes
+
+| Name    | Description    | Type                  | Accepted Values | Default |
+| ------- | -------------- | --------------------- | --------------- | ------- |
+| icon    | icon component | `string \| Component` | —               | Back    |
+| title   | main title     | string                | —               | Back    |
+| content | content        | string                | —               | —       |
+
+## Events
+
+| Name | Description                         | Parameters |
+| ---- | ----------------------------------- | ---------- |
+| back | triggers when right side is clicked | —          |
+
+## Slots
+
+| Name       | Description        |
+| ---------- | ------------------ |
+| icon       | custom icon        |
+| title      | title content      |
+| content    | content            |
+| extra      | extra              |
+| breadcrumb | breadcrumb content |
+| default    | main content       |

docs/en-US/component/pagination.md

@@ -0,0 +1,116 @@
+---
+title: Pagination
+lang: en-US
+---
+
+# Pagination
+
+If you have too much data to display in one page, use pagination.
+
+## Basic usage
+
+:::demo Set `layout` with different pagination elements you wish to display separated with a comma. Pagination elements are: `prev` (a button navigating to the previous page), `next` (a button navigating to the next page), `pager` (page list), `jumper` (a jump-to input), `total` (total item count), `size` (a select to determine page size) and `->`(every element after this symbol will be pulled to the right).
+
+pagination/basic-usage
+
+:::
+
+## Number of pagers
+
+:::demo By default, Pagination collapses extra pager buttons when it has more than 7 pages. This can be configured with the `pager-count` attribute.
+
+pagination/number-of-pagers
+
+:::
+
+## Buttons with background color
+
+:::demo Set the `background` attribute and the buttons will have a background color.
+
+pagination/background-color
+
+:::
+
+## Small Pagination
+
+Use small pagination in the case of limited space.
+
+:::demo Just set the `small` attribute to `true` and the Pagination becomes smaller.
+
+pagination/small-pagination
+
+:::
+
+## Hide pagination when there is only one page
+
+When there is only one page, hide the pagination by setting the `hide-on-single-page` attribute.
+
+:::demo
+
+pagination/auto-hide-pagination
+
+:::
+
+## More elements
+
+Add more modules based on your scenario.
+
+:::demo This example is a complete use case. It uses `size-change` and `current-change` event to handle page size changes and current page changes. `page-sizes` accepts an array of integers, each of which represents a different page size in the `sizes` select options, e.g. `[100, 200, 300, 400]` indicates that the select will have four options: 100, 200, 300 or 400 items per page.
+
+pagination/more-elements
+
+:::
+
+## Attributes
+
+| Name                 | Description                                                                                                                     | Type                  | Accepted Values                                                          | Default                                |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------ | -------------------------------------- |
+| small                | whether to use small pagination                                                                                                 | boolean               | —                                                                        | false                                  |
+| background           | whether the buttons have a background color                                                                                     | boolean               | —                                                                        | false                                  |
+| page-size            | item count of each page, supports the v-model bidirectional binding                                                             | number                | —                                                                        | 10                                     |
+| default-page-size    | default initial value of page size                                                                                              | number                | -                                                                        | -                                      |
+| total                | total item count                                                                                                                | number                | —                                                                        | —                                      |
+| page-count           | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number                | —                                                                        | —                                      |
+| pager-count          | number of pagers. Pagination collapses when the total page count exceeds this value                                             | number                | (odd number between 5 and 21)                                            | 7                                      |
+| current-page         | current page number, supports the v-model bidirectional binding                                                                 | number                | —                                                                        | 1                                      |
+| default-current-page | default initial value of current-page                                                                                           | number                | -                                                                        | -                                      |
+| layout               | layout of Pagination, elements separated with a comma                                                                           | string                | `sizes` / `prev` / `pager` / `next` / `jumper` / `->` / `total` / `slot` | 'prev, pager, next, jumper, ->, total' |
+| page-sizes           | options of item count per page                                                                                                  | number[]              | —                                                                        | [10, 20, 30, 40, 50, 100]              |
+| popper-class         | custom class name for the page size Select's dropdown                                                                           | string                | —                                                                        | —                                      |
+| prev-text            | text for the prev button                                                                                                        | string                | —                                                                        | —                                      |
+| prev-icon            | icon for the prev button, higher priority of `prev-text`                                                                        | `string \| Component` | —                                                                        | ArrowLeft                              |
+| next-text            | text for the next button                                                                                                        | string                | —                                                                        | —                                      |
+| next-icon            | icon for the next button, higher priority of `next-text`                                                                        | `string \| Component` | —                                                                        | ArrowRight                             |
+| disabled             | whether Pagination is disabled                                                                                                  | boolean               | —                                                                        | false                                  |
+| hide-on-single-page  | whether to hide when there's only one page                                                                                      | boolean               | —                                                                        | -                                      |
+
+:::warning
+
+We'll detect some deprecated usages, if your pagination don't appeared or worked as expected, please check rules below:
+
+- You have to define one of `total` and `page-count`, otherwise we can't determine count of total pages.When both defined, `page-count` taken as priority.
+- If `current-page` is defined, you have to listen `current-page` change, by also define `@update:current-page`, otherwise pagination didn't work.
+- If `page-size` is defined while page size selector displayed(`sizes` included in `layout`), you have to listen `page-size` change as well, by define `@update:page-size`, otherwise change of page size didn't work.
+
+:::
+
+## Events
+
+| Name           | Description                                                       | Parameters           |
+| -------------- | ----------------------------------------------------------------- | -------------------- |
+| size-change    | triggers when `page-size` changes                                 | the new page size    |
+| current-change | triggers when `current-page` changes                              | the new current page |
+| prev-click     | triggers when the prev button is clicked and current page changes | the new current page |
+| next-click     | triggers when the next button is clicked and current page changes | the new current page |
+
+:::warning
+
+Events above are not recommended(but are still supported for compatible reason), better choice is to use the two-way data binding by `v-model`.
+
+:::
+
+## Slots
+
+| Name | Description                                                         |
+| ---- | ------------------------------------------------------------------- |
+| —    | custom content. To use this, you need to declare `slot` in `layout` |

docs/en-US/component/popconfirm.md

@@ -0,0 +1,67 @@
+---
+title: Popconfirm
+lang: en-US
+---
+
+# Popconfirm
+
+A simple confirmation dialog of an element click action.
+
+## Basic usage
+
+Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
+
+:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
+
+popconfirm/basic-usage
+
+:::
+
+## Customize
+
+You can customize Popconfirm like:
+
+:::demo
+
+popconfirm/customize
+
+:::
+
+## Trigger event
+
+Click the button to trigger the event
+
+:::demo
+
+popconfirm/trigger-event
+
+:::
+
+## Attributes
+
+| Name                | Description                                                                         | Type                  | Accepted Values                                    | Default         |
+| ------------------- | ----------------------------------------------------------------------------------- | --------------------- | -------------------------------------------------- | --------------- |
+| title               | Title                                                                               | String                | —                                                  | —               |
+| confirm-button-text | Confirm button text                                                                 | String                | —                                                  | —               |
+| cancel-button-text  | Cancel button text                                                                  | String                | —                                                  | —               |
+| confirm-button-type | Confirm button type                                                                 | String                | primary / success / warning / danger / info / text | primary         |
+| cancel-button-type  | Cancel button type                                                                  | String                | primary / success / warning / danger / info / text | text            |
+| icon                | Icon Component                                                                      | `string \| Component` | —                                                  | QuestionFilled  |
+| icon-color          | Icon color                                                                          | String                | —                                                  | #f90            |
+| hide-icon           | is hide Icon                                                                        | Boolean               | —                                                  | false           |
+| teleported          | whether popconfirm is teleported to the body                                        | boolean               | true / false                                       | true            |
+| persistent          | when popconfirm inactive and `persistent` is `false` , popconfirm will be destroyed | boolean               | —                                                  | false           |
+| width               | popconfirm width                                                                    | string/number         | -                                                  | Min width 150px |
+
+## Slots
+
+| Name      | Description                           |
+| --------- | ------------------------------------- |
+| reference | HTML element that triggers Popconfirm |
+
+## Events
+
+| Name    | Description                        | Parameters |
+| ------- | ---------------------------------- | ---------- |
+| confirm | triggers when click confirm button | —          |
+| cancel  | triggers when click cancel button  | —          |

docs/en-US/component/popover.md

@@ -0,0 +1,105 @@
+---
+title: Popover
+lang: en-US
+---
+
+# Popover
+
+## Basic usage
+
+Similar to Tooltip, Popover is also built with `ElPopper`. So for some duplicated attributes, please refer to the documentation of Tooltip.
+
+:::demo The `trigger` attribute is used to define how popover is triggered: `hover`, `click`, `focus` or `contextmenu` . If you want to manually controll it, you can set `:visible`.
+
+popover/basic-usage
+
+:::
+
+## Virtual triggering
+
+Like Tooltip, Popover can be triggered by virtual elements, if your use case includes separate the triggering element and the content element, you should definitely use the mechanism, normally we use `#reference` to place our triggering element, with `triggering-element` API you can set your triggering element anywhere you like, but notice that the triggering element should be an element that accepts `mouse` and `keyboard` event.
+
+:::warning
+
+`v-popover` is about to be deprecated, please use `virtual-ref` as alternative.
+
+:::
+
+:::demo
+
+popover/virtual-triggering
+
+:::
+
+## Rich content
+
+Other components/elements can be nested in popover. Following is an example of nested table.
+
+:::demo replace the `content` attribute with a default `slot`.
+
+popover/nested-information
+
+:::
+
+## Nested operation
+
+Of course, you can nest other operations. It's more light-weight than using a dialog.
+
+:::demo
+
+popover/nested-operation
+
+:::
+
+## Directive
+
+You can still using popover in directive way but this is **not recommended** anymore since this makes your application
+complicated, you may refer to the virtual triggering for more information.
+
+:::demo
+
+popover/directive-usage
+
+:::
+
+## Attributes
+
+| Name                      | Description                                                                                                                                                              | Type            | Accepted Values                                                                                           | Default                                                                    |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| trigger                   | how the popover is triggered                                                                                                                                             | string          | click/focus/hover/contextmenu                                                                             | click                                                                      |
+| title                     | popover title                                                                                                                                                            | string          | —                                                                                                         | —                                                                          |
+| effect                    | Tooltip theme, built-in theme: `dark` / `light`                                                                                                                          | string          | string                                                                                                    | light                                                                      |
+| content                   | popover content, can be replaced with a default `slot`                                                                                                                   | string          | —                                                                                                         | —                                                                          |
+| width                     | popover width                                                                                                                                                            | string / number | —                                                                                                         | Min width 150px                                                            |
+| placement                 | popover placement                                                                                                                                                        | string          | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom                                                                     |
+| disabled                  | whether Popover is disabled                                                                                                                                              | boolean         | —                                                                                                         | false                                                                      |
+| visible / v-model:visible | whether popover is visible                                                                                                                                               | Boolean         | —                                                                                                         | false                                                                      |
+| offset                    | popover offset                                                                                                                                                           | number          | —                                                                                                         | 0                                                                          |
+| transition                | popover transition animation                                                                                                                                             | string          | —                                                                                                         | el-fade-in-linear                                                          |
+| show-arrow                | whether a tooltip arrow is displayed or not. For more info, please refer to [ElPopper](https://github.com/element-plus/element-plus/tree/dev/packages/components/popper) | boolean         | —                                                                                                         | true                                                                       |
+| popper-options            | parameters for [popper.js](https://popper.js.org/docs/v2/)                                                                                                               | object          | please refer to [popper.js](https://popper.js.org/docs/v2/)                                               | `{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}` |
+| popper-class              | custom class name for popover                                                                                                                                            | string          | —                                                                                                         | —                                                                          |
+| show-after                | delay of appearance, in millisecond                                                                                                                                      | number          | —                                                                                                         | 0                                                                          |
+| hide-after                | delay of disappear, in millisecond                                                                                                                                       | number          | —                                                                                                         | 200                                                                        |
+| auto-close                | timeout in milliseconds to hide tooltip                                                                                                                                  | number          | —                                                                                                         | 0                                                                          |
+| tabindex                  | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover                                                                      | number          | —                                                                                                         | —                                                                          |
+| teleported                | whether popover dropdown is teleported to the body                                                                                                                       | boolean         | true / false                                                                                              | true                                                                       |
+| persistent                | when popover inactive and `persistent` is `false` , popover will be destroyed                                                                                            | boolean         | —                                                                                                         | true                                                                       |
+
+## Slots
+
+| Name      | Description                        |
+| --------- | ---------------------------------- |
+| —         | text content of popover            |
+| reference | HTML element that triggers popover |
+
+## Events
+
+| Name         | Description                                   | Parameters |
+| ------------ | --------------------------------------------- | ---------- |
+| show         | triggers when popover shows                   | —          |
+| before-enter | triggers when the entering transition befores | —          |
+| after-enter  | triggers when the entering transition ends    | —          |
+| hide         | triggers when popover hides                   | —          |
+| before-leave | triggers when the leaving transition befores  | —          |
+| after-leave  | triggers when the leaving transition ends     | —          |

docs/en-US/component/progress.md

@@ -0,0 +1,93 @@
+---
+title: Progress
+lang: en-US
+---
+
+# Progress
+
+Progress is used to show the progress of current operation, and inform the user the current status.
+
+## Linear progress bar
+
+:::demo Use `percentage` attribute to set the percentage. It's **required** and must be between `0-100`. You can custom text format by setting `format`.
+
+progress/linear-progress-bar
+
+:::
+
+## Internal percentage
+
+In this case the percentage takes no additional space.
+
+:::demo `stroke-width` attribute decides the `width` of progress bar, and use `text-inside` attribute to put description inside the progress bar.
+
+progress/internal-percentage
+
+:::
+
+## Custom color
+
+You can use `color` attr to set the progress bar color. it accepts color string, function, or array.
+
+:::demo
+
+progress/custom-color
+
+:::
+
+## Circular progress bar
+
+:::demo You can specify `type` attribute to `circle` to use circular progress bar, and use `width` attribute to change the size of circle.
+
+progress/circular-progress-bar
+
+:::
+
+## Dashboard progress bar
+
+You also can specify `type` attribute to `dashboard` to use dashboard progress bar.
+
+:::demo
+
+progress/dashboard-progress-bar
+
+:::
+
+## Customized content
+
+:::demo Use default slot to add customized content.
+
+progress/customized-content
+
+:::
+
+## Indeterminate progress
+
+:::demo Use `indeterminate` attribute to set indeterminate progress, with `duration` to control the animation duration.
+
+progress/indeterminate-progress
+
+:::
+
+## Attributes
+
+| Name           | Description                                                                           | Type                  | Accepted Values           | Default |
+| -------------- | ------------------------------------------------------------------------------------- | --------------------- | ------------------------- | ------- |
+| percentage     | percentage, **required**                                                              | number                | (0-100)                   | 0       |
+| type           | the type of progress bar                                                              | string                | line/circle/dashboard     | line    |
+| stroke-width   | the width of progress bar                                                             | number                | —                         | 6       |
+| text-inside    | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean               | —                         | false   |
+| status         | the current status of progress bar                                                    | string                | success/exception/warning | —       |
+| indeterminate  | set indeterminate progress                                                            | boolean               | -                         | false   |
+| duration       | control the animation duration of indeterminate progress                              | number                | -                         | 3       |
+| color          | background color of progress bar. Overrides `status` prop                             | string/function/array | —                         | ''      |
+| width          | the canvas width of circle progress bar                                               | number                | —                         | 126     |
+| show-text      | whether to show percentage                                                            | boolean               | —                         | true    |
+| stroke-linecap | circle/dashboard type shape at the end path                                           | string                | butt/round/square         | round   |
+| format         | custom text format                                                                    | function(percentage)  | —                         | —       |
+
+## Slots
+
+| Name    | Description                                       |
+| ------- | ------------------------------------------------- |
+| default | Customized content, parameter is `{ percentage }` |

docs/en-US/component/radio.md

@@ -0,0 +1,116 @@
+---
+title: Radio
+lang: en-US
+---
+
+# Radio
+
+Single selection among multiple options.
+
+## Basic usage
+
+Radio should not have too many options. Otherwise, use the Select component instead.
+
+:::demo Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of `label` is `String`, `Number` or `Boolean`.
+
+radio/basic-usage
+
+:::
+
+## Disabled
+
+`disabled` attribute is used to disable the radio.
+
+:::demo You just need to add the `disabled` attribute.
+
+radio/disabled
+
+:::
+
+## Radio button group
+
+Suitable for choosing from some mutually exclusive options.
+
+:::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter.
+
+radio/radio-button-group
+
+:::
+
+## Button style
+
+Radio with button styles.
+
+:::demo You just need to change `el-radio` element into `el-radio-button` element. We also provide `size` attribute.
+
+radio/button-style
+
+:::
+
+## With borders
+
+:::demo The `border` attribute adds a border to Radios.
+
+radio/with-borders
+
+:::
+
+## Radio Attributes
+
+| Name                  | Description                          | Type                      | Accepted Values        | Default |
+| --------------------- | ------------------------------------ | ------------------------- | ---------------------- | ------- |
+| model-value / v-model | binding value                        | string / number / boolean | —                      | —       |
+| label                 | the value of Radio                   | string / number / boolean | —                      | —       |
+| disabled              | whether Radio is disabled            | boolean                   | —                      | false   |
+| border                | whether to add a border around Radio | boolean                   | —                      | false   |
+| size                  | size of the Radio                    | string                    | large / default /small | —       |
+| name                  | native 'name' attribute              | string                    | —                      | —       |
+
+## Radio Events
+
+| Name   | Description                           | Parameters                          |
+| ------ | ------------------------------------- | ----------------------------------- |
+| change | triggers when the bound value changes | the label value of the chosen radio |
+
+## Radio Slots
+
+| Name | Description               |
+| ---- | ------------------------- |
+| —    | customize default content |
+
+## Radio-group Attributes
+
+| Name                  | Description                                       | Type                      | Accepted Values         | Default |
+| --------------------- | ------------------------------------------------- | ------------------------- | ----------------------- | ------- |
+| model-value / v-model | binding value                                     | string / number / boolean | —                       | —       |
+| size                  | the size of radio                                 | string                    | large / default / small | default |
+| disabled              | whether the nesting radios are disabled           | boolean                   | —                       | false   |
+| text-color            | font color when button is active                  | string                    | —                       | #ffffff |
+| fill                  | border and background color when button is active | string                    | —                       | #409EFF |
+| validate-event        | whether to trigger form validation                | boolean                   | -                       | true    |
+
+## Radio-group Events
+
+| Name   | Description                           | Parameters                          |
+| ------ | ------------------------------------- | ----------------------------------- |
+| change | triggers when the bound value changes | the label value of the chosen radio |
+
+## Radio-group Slots
+
+| Name | Description               | Subtags              |
+| ---- | ------------------------- | -------------------- |
+| —    | customize default content | Radio / Radio-button |
+
+## Radio-button Attributes
+
+| Name     | Description               | Type            | Accepted Values | Default |
+| -------- | ------------------------- | --------------- | --------------- | ------- |
+| label    | the value of radio        | string / number | —               | —       |
+| disabled | whether radio is disabled | boolean         | —               | false   |
+| name     | native 'name' attribute   | string          | —               | —       |
+
+## Radio-button Slots
+
+| Name | Description               |
+| ---- | ------------------------- |
+| —    | customize default content |

docs/en-US/component/rate.md

@@ -0,0 +1,105 @@
+---
+title: Rate
+lang: en-US
+---
+
+# Rate
+
+Used for rating
+
+## Basic usage
+
+:::demo Rate divides rating scores into several levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them an array with three element to reflect three levels using the `colors` attribute, and their two thresholds can be defined by `low-threshold` and `high-threshold`, or you can assign them with a object which key is the threshold between two levels and value is the corresponding color.
+
+rate/basic-usage
+
+:::
+
+## Sizes
+
+:::demo
+
+rate/sizes
+
+:::
+
+## With allow-half
+
+:::demo Add attribute `allow-half` Half star allowed
+
+rate/allow-half
+
+:::
+
+## With text
+
+Using text to indicate rating score
+
+:::demo Add attribute `show-text` to display text at the right of Rate. You can assign texts for different scores using `texts`. `texts` is an array whose length should be equal to the max score `max`.
+
+rate/text
+
+:::
+
+## More icons
+
+You can use different icons to distinguish different rate components.
+
+:::demo You can customize icons by passing `icons` an array with three elements or a object which key is the threshold between two levels and value is the corresponding icon. In this example, we also use `void-icon` to set the icon if it is unselected.
+
+rate/more-icons
+
+:::
+
+## Read-only
+
+Read-only Rate is for displaying rating score. Half star is supported.
+
+:::demo Use attribute `disabled` to make the component read-only. Add `show-score` to display the rating score at the right side. Additionally, you can use attribute `score-template` to provide a score template. It must contain `{value}`, and `{value}` will be replaced with the rating score.
+
+rate/readonly
+
+:::
+
+## Custom styles
+
+Now you can set custom style for rate component.
+Use `css/scss` language to change the global or local color. We set some global color variables: `--el-rate-void-color`, `--el-rate-fill-color`, `--el-rate-disabled-void-color`, `--el-rate-text-color`. You can use like: `:root { --el-rate-void-color: red; --el-rate-fill-color: blue; }`.
+
+### Default Variables
+
+| Variable                      | Default Color                 |
+| ----------------------------- | ----------------------------- |
+| --el-rate-void-color          | var(--el-border-color-darker) |
+| --el-rate-fill-color          | #f7ba2a                       |
+| --el-rate-disabled-void-color | var(--el-fill-color)          |
+| --el-rate-text-color          | var(--el-text-color-primary)  |
+
+## Attributes
+
+| Name                  | Description                                                                                                                                                                                                                    | Type             | Accepted Values         | Default                                                            |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | ----------------------- | ------------------------------------------------------------------ |
+| model-value / v-model | binding value                                                                                                                                                                                                                  | number           | —                       | 0                                                                  |
+| max                   | max rating score                                                                                                                                                                                                               | number           | —                       | 5                                                                  |
+| size                  | size of Rate                                                                                                                                                                                                                   | string           | large / default / small | default                                                            |
+| disabled              | whether Rate is read-only                                                                                                                                                                                                      | boolean          | —                       | false                                                              |
+| allow-half            | whether picking half start is allowed                                                                                                                                                                                          | boolean          | —                       | false                                                              |
+| low-threshold         | threshold value between low and medium level. The value itself will be included in low level                                                                                                                                   | number           | —                       | 2                                                                  |
+| high-threshold        | threshold value between medium and high level. The value itself will be included in high level                                                                                                                                 | number           | —                       | 4                                                                  |
+| colors                | colors for icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding color         | array/object     | —                       | ['#F7BA2A', '#F7BA2A', '#F7BA2A']                                  |
+| void-color            | color of unselected icons                                                                                                                                                                                                      | string           | —                       | #C6D1DE                                                            |
+| disabled-void-color   | color of unselected read-only icons                                                                                                                                                                                            | string           | —                       | #EFF2F7                                                            |
+| icons                 | icon components. If array, ot should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding icon component | array/object     | —                       | [StarFilled, StarFilled, StarFilled]                               |
+| void-icon             | component of unselected icons                                                                                                                                                                                                  | string/Component | —                       | Star                                                               |
+| disabled-void-icon    | component of unselected read-only icons                                                                                                                                                                                        | string/Component | —                       | StarFilled                                                         |
+| show-text             | whether to display texts                                                                                                                                                                                                       | boolean          | —                       | false                                                              |
+| show-score            | whether to display current score. show-score and show-text cannot be true at the same time                                                                                                                                     | boolean          | —                       | false                                                              |
+| text-color            | color of texts                                                                                                                                                                                                                 | string           | —                       | #1F2D3D                                                            |
+| texts                 | text array                                                                                                                                                                                                                     | array            | —                       | ['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise'] |
+| score-template        | score template                                                                                                                                                                                                                 | string           | —                       | {value}                                                            |
+
+## Events
+
+| Name   | Description                         | Parameters           |
+| ------ | ----------------------------------- | -------------------- |
+| change | Triggers when rate value is changed | value after changing |

docs/en-US/component/result.md

@@ -0,0 +1,41 @@
+---
+title: Result
+lang: en-US
+---
+
+# Result
+
+Used to give feedback on the result of user's operation or access exception.
+
+## Basic usage
+
+:::demo
+
+result/basic-usage
+
+:::
+
+## Customized content
+
+:::demo
+
+result/customized-content
+
+:::
+
+## Result Attributes
+
+| Name      | Description | Type   | Accepted Values                  | Default |
+| --------- | ----------- | ------ | -------------------------------- | ------- |
+| title     | title       | string | —                                | —       |
+| sub-title | sub title   | string | —                                | —       |
+| icon      | icon type   | string | success / warning / info / error | info    |
+
+## Result Slots
+
+| Name      | Description       |
+| --------- | ----------------- |
+| icon      | custom icon       |
+| title     | custom title      |
+| sub-title | custom sub title  |
+| extra     | custom extra area |

docs/en-US/component/scrollbar.md

@@ -0,0 +1,77 @@
+---
+title: Scrollbar
+lang: en-US
+---
+
+# Scrollbar
+
+Used to replace the browser's native scrollbar.
+
+## Basic usage
+
+:::demo Use `height` property to set the height of the scrollbar, or if not set, it adapts according to the parent container height.
+
+scrollbar/basic-usage
+
+:::
+
+## Horizontal scroll
+
+:::demo When the element width is greater than the scrollbar width, the horizontal scrollbar is displayed.
+
+scrollbar/horizontal-scroll
+
+:::
+
+## Max height
+
+:::demo The scrollbar is displayed only when the element height exceeds the max height.
+
+scrollbar/max-height
+
+:::
+
+## Manual scroll
+
+:::demo Use `setScrollTop` and `setScrollLeft` methods can control scrollbar manually.
+
+scrollbar/manual-scroll
+
+:::
+
+## Scrollbar Attributes
+
+| Name       | Description                                                                                                                     | Type            | Accepted Values | Default |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------- | --------------- | ------- |
+| height     | height of scrollbar                                                                                                             | string / number | —               | —       |
+| max-height | max height of scrollbar                                                                                                         | string / number | —               | —       |
+| native     | whether to use the native scrollbar style                                                                                       | boolean         | —               | false   |
+| wrap-style | style of warp container                                                                                                         | string          | —               | —       |
+| wrap-class | class of warp container                                                                                                         | string          | —               | —       |
+| view-style | style of view                                                                                                                   | string          | —               | —       |
+| view-class | class of view                                                                                                                   | string          | —               | —       |
+| noresize   | do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance | boolean         | —               | false   |
+| tag        | element tag of the view                                                                                                         | string          | —               | div     |
+| always     | always show scrollbar                                                                                                           | boolean         | —               | false   |
+| min-size   | minimum size of scrollbar                                                                                                       | number          | —               | 20      |
+
+## Scrollbar Events
+
+| Name   | Description             | Parameters                                        |
+| ------ | ----------------------- | ------------------------------------------------- |
+| scroll | triggers when scrolling | distance of scrolling `{ scrollLeft, scrollTop }` |
+
+## Scrollbar Methods
+
+| Method        | Description                                | Parameters                                            |
+| ------------- | ------------------------------------------ | ----------------------------------------------------- |
+| scrollTo      | scrolls to a particular set of coordinates | (options: ScrollToOptions \| number, yCoord?: number) |
+| setScrollTop  | Set distance to scroll top                 | (scrollTop: number)                                   |
+| setScrollLeft | Set distance to scroll left                | (scrollLeft: number)                                  |
+| update        | update scrollbar state manually            | —                                                     |
+
+## Scrollbar Slots
+
+| Name | Description               |
+| ---- | ------------------------- |
+| —    | customize default content |

docs/en-US/component/select-v2.md

@@ -0,0 +1,195 @@
+---
+title: Virtualized Select
+lang: en-US
+---
+
+# <ElBadge value="beta">Select V2 virtualized selector</ElBadge>
+
+:::tip
+
+This component is still under testing, if you found any bug or issue please report it at [GitHub](https://github.com/element-plus/element-plus/issues) for us to fix.
+
+:::
+
+## Background
+
+In some use-cases, a single selector may end up loading tens of thousands of rows of data.
+Rendering that much data into the DOM could be a burden to the browser, which can result in performance issues.
+For a better user and developer experience, we decided to add this component.
+
+## Basic usage
+
+The simplest selector
+
+:::demo
+
+select-v2/basic-usage
+
+:::
+
+## Multi select
+
+The basic multi-select selector with tags
+
+:::demo
+
+select-v2/multiple
+
+:::
+
+## Hide extra tags when the selected items are too many.
+
+You can collapse tags to a text by using `collapse-tags` attribute. You can check them when mouse hover collapse text by using `collapse-tags-tooltip` attribute.
+
+:::demo
+
+select-v2/hide-extra-tags
+
+:::
+
+## Filterable multi-select
+
+When the options are overwhelmingly too many, you can use `filterable` option to enable filter feature for finding out the desired option
+
+:::demo
+
+select-v2/filterable
+
+:::
+
+## Disabled selector and select options
+
+You can choose to disable selector itself or the option.
+
+:::demo
+
+select-v2/disabled
+
+:::
+
+## Option Grouping
+
+We can group option as we wanted, as long as the data satisfies the pattern.
+
+:::demo
+
+select-v2/grouping
+
+:::
+
+## Customized option renderer
+
+We can define our own template for rendering the option in the popup.
+
+:::demo
+
+select-v2/customized-option
+
+:::
+
+## Clearable selector
+
+We can clear all the selected options at once, also applicable for single select.
+
+:::demo
+
+select-v2/clearable
+
+:::
+
+## Create Option
+
+Create and select new items that are not included in select options
+
+By using the `allow-create` attribute, users can create new items by typing in the input box. Note that for `allow-create` to work, `filterable` must be `true`.
+
+:::tip
+
+It will be better to set `:reserve-keyword="false"` when use `allow-create`
+
+:::
+
+:::demo
+
+select-v2/allow-create
+
+:::
+
+## Remote search
+
+Enter keywords and search data from server.
+
+:::demo Set the value of `filterable` and `remote` with `true` to enable remote search, and you should pass the `remote-method`. `remote-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value.
+
+select-v2/remote-search
+
+:::
+
+## use value-key
+
+:::demo when `options.value` is an object, you should set a unique identity key name for value
+
+select-v2/use-valueKey
+
+:::
+
+## SelectV2 Attributes
+
+| Name                              | Description                                                                                                                              | Type                               | Accepted Values                                                                                           | Default       |
+| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------- |
+| model-value / v-model             | biding value                                                                                                                             | string / number / boolean / object | —                                                                                                         | —             |
+| multiple                          | is multiple                                                                                                                              | boolean                            | —                                                                                                         | false         |
+| disabled                          | is disabled                                                                                                                              | boolean                            | —                                                                                                         | false         |
+| value-key                         | unique identity key name for value, required when value is an object                                                                     | string                             | —                                                                                                         | value         |
+| size                              | input box size                                                                                                                           | string                             | large/default/small                                                                                       | default       |
+| clearable                         | whether select can be cleared                                                                                                            | boolean                            | —                                                                                                         | false         |
+| clear-icon                        | custom clear icon                                                                                                                        | `string \| Component`              | —                                                                                                         | CircleClose   |
+| collapse-tags                     | whether to collapse tags to a text when multiple selecting                                                                               | boolean                            | —                                                                                                         | false         |
+| collapse-tags-tooltip             | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true                         | boolean                            | true / false                                                                                              | false         |
+| multiple-limit                    | maximum number of options user can select when multiple is true. No limit when set to 0                                                  | number                             | —                                                                                                         | 0             |
+| name                              | the name attribute of select input                                                                                                       | string                             | —                                                                                                         | —             |
+| effect                            | Tooltip theme, built-in theme: `dark` / `light`                                                                                          | string                             | string                                                                                                    | light         |
+| autocomplete                      | autocomplete of select input                                                                                                             | string                             | —                                                                                                         | off           |
+| placeholder                       | the autocomplete attribute of select input                                                                                               | string                             | —                                                                                                         | Please select |
+| filterable                        | is filterable                                                                                                                            | boolean                            | —                                                                                                         | false         |
+| allow-create                      | whether creating new items is allowed. To use this, `filterable` must be true                                                            | boolean                            | —                                                                                                         | false         |
+| reserve-keyword                   | whether reserve the keyword after select filtered option.                                                                                | boolean                            | —                                                                                                         | true          |
+| no-data-text                      | displayed text when there is no options, you can also use slot empty                                                                     | string                             | —                                                                                                         | No Data       |
+| popper-class                      | custom class name for Select's dropdown                                                                                                  | string                             | —                                                                                                         | —             |
+| popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false              | boolean                            | -                                                                                                         | false         |
+| teleported                        | whether select dropdown is teleported to the body                                                                                        | boolean                            | true / false                                                                                              | true          |
+| persistent                        | when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed                                          | boolean                            | true / false                                                                                              | true          |
+| popper-options                    | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/)                                                         | object                             | -                                                                                                         | -             |
+| automatic-dropdown                | for non-filterable Select, this prop decides if the option menu pops up when the input is focused                                        | boolean                            | -                                                                                                         | false         |
+| height                            | The height of the dropdown panel, 34px for each item                                                                                     | number                             | -                                                                                                         | 170           |
+| scrollbar-always-on               | Controls whether the scrollbar is always displayed                                                                                       | boolean                            | -                                                                                                         | false         |
+| remote                            | whether search data from server                                                                                                          | boolean                            | —                                                                                                         | false         |
+| remote-method                     | function that gets called when the input value changes. Its parameter is the current input value. To use this, `filterable` must be true | function(keyword: string)          | —                                                                                                         | —             |
+| validate-event                    | whether to trigger form validation                                                                                                       | boolean                            | -                                                                                                         | true          |
+| placement                         | position of dropdown                                                                                                                     | string                             | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom-start  |
+
+<span style="display: none;">
+<!-- | default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
+| filter-method | 自定义搜索方法 | function | — | — |
+| loading | 是否正在从远程获取数据 | boolean | — | false |
+| loading-text | 远程加载时显示的文字 | string | — | 加载中 | -->
+</span>
+
+## SelectV2 Events
+
+| Name           | Description                                                   | Params                                    |
+| -------------- | ------------------------------------------------------------- | ----------------------------------------- |
+| change         | triggers when the selected value changes                      | current selected value                    |
+| visible-change | triggers when the dropdown appears/disappears                 | true when it appears, and false otherwise |
+| remove-tag     | triggers when a tag is removed in multiple mode               | removed tag value                         |
+| clear          | triggers when the clear icon is clicked in a clearable Select | —                                         |
+| blur           | triggers when Input blurs                                     | (event: FocusEvent)                       |
+| focus          | triggers when Input focuses                                   | (event: FocusEvent)                       |
+
+## SelectV2 Slots
+
+| Name    | Description                   |
+| ------- | ----------------------------- |
+| default | Option renderer               |
+| empty   | content when options is empty |
+| prefix  | prefix content of input       |

docs/en-US/component/select.md

@@ -0,0 +1,210 @@
+---
+title: Select
+lang: en-US
+---
+
+# Select
+
+When there are plenty of options, use a drop-down menu to display and select desired ones.
+
+## Basic usage
+
+:::demo `v-model` is the value of `el-option` that is currently selected.
+
+select/basic-usage
+
+:::
+
+## Disabled option
+
+:::demo Set the value of `disabled` in `el-option` to `true` to disable this option.
+
+select/disabled-option
+
+:::
+
+## Disabled select
+
+Disable the whole component.
+
+:::demo Set `disabled` of `el-select` to make it disabled.
+
+select/disabled
+
+:::
+
+## Clearable single select
+
+You can clear Select using a clear icon.
+
+:::demo Set `clearable` attribute for `el-select` and a clear icon will appear. Note that `clearable` is only for single select.
+
+select/clearable
+
+:::
+
+## Basic multiple select
+
+Multiple select uses tags to display selected options.
+
+:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using `collapse-tags` attribute. You can check them when mouse hover collapse text by using `collapse-tags-tooltip` attribute.
+
+select/multiple
+
+:::
+
+## Custom template
+
+You can customize HTML templates for options.
+
+:::demo Insert customized HTML templates into the slot of `el-option`.
+
+select/custom-template
+
+:::
+
+## Grouping
+
+Display options in groups.
+
+:::demo Use `el-option-group` to group the options, and its `label` attribute stands for the name of the group.
+
+select/grouping
+
+:::
+
+## Option filtering
+
+You can filter options for your desired ones.
+
+:::demo Adding `filterable` to `el-select` enables filtering. By default, Select will find all the options whose `label` attribute contains the input value. If you prefer other filtering strategies, you can pass the `filter-method`. `filter-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value.
+
+select/filterable
+
+:::
+
+## Remote Search
+
+Enter keywords and search data from server.
+
+:::demo Set the value of `filterable` and `remote` with `true` to enable remote search, and you should pass the `remote-method`. `remote-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value. Note that if `el-option` is rendered with the `v-for` directive, you should add the `key` attribute for `el-option`. Its value needs to be unique, such as `item.value` in the following example.
+
+select/remote-search
+
+:::
+
+## Create new items
+
+Create and select new items that are not included in select options
+
+:::demo By using the `allow-create` attribute, users can create new items by typing in the input box. Note that for `allow-create` to work, `filterable` must be `true`. This example also demonstrates `default-first-option`. When this attribute is set to `true`, you can select the first option in the current option list by hitting enter without having to navigate with mouse or arrow keys.
+
+select/allow-create
+
+:::
+
+:::tip
+
+If the binding value of Select is an object, make sure to assign `value-key` as its unique identity key name.
+
+:::
+
+## Select Attributes
+
+| Name                              | Description                                                                                                                 | Type                                       | Accepted Values                                                                                           | Default          |
+| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------- | ---------------- |
+| model-value / v-model             | binding value                                                                                                               | array / string / number / boolean / object | —                                                                                                         | —                |
+| multiple                          | whether multiple-select is activated                                                                                        | boolean                                    | true / false                                                                                              | false            |
+| disabled                          | whether Select is disabled                                                                                                  | boolean                                    | true / false                                                                                              | false            |
+| value-key                         | unique identity key name for value, required when value is an object                                                        | string                                     | —                                                                                                         | value            |
+| size                              | size of Input                                                                                                               | string                                     | large/default/small                                                                                       | default          |
+| clearable                         | whether select can be cleared                                                                                               | boolean                                    | true / false                                                                                              | false            |
+| collapse-tags                     | whether to collapse tags to a text when multiple selecting                                                                  | boolean                                    | true / false                                                                                              | false            |
+| collapse-tags-tooltip             | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true            | boolean                                    | true / false                                                                                              | false            |
+| multiple-limit                    | maximum number of options user can select when `multiple` is `true`. No limit when set to 0                                 | number                                     | —                                                                                                         | 0                |
+| name                              | the name attribute of select input                                                                                          | string                                     | —                                                                                                         | —                |
+| effect                            | Tooltip theme, built-in theme: `dark` / `light`                                                                             | string                                     | string                                                                                                    | light            |
+| autocomplete                      | the autocomplete attribute of select input                                                                                  | string                                     | —                                                                                                         | off              |
+| placeholder                       | placeholder                                                                                                                 | string                                     | —                                                                                                         | Select           |
+| filterable                        | whether Select is filterable                                                                                                | boolean                                    | true / false                                                                                              | false            |
+| allow-create                      | whether creating new items is allowed. To use this, `filterable` must be true                                               | boolean                                    | true / false                                                                                              | false            |
+| filter-method                     | custom filter method                                                                                                        | function                                   | —                                                                                                         | —                |
+| remote                            | whether options are loaded from server                                                                                      | boolean                                    | true / false                                                                                              | false            |
+| remote-method                     | custom remote search method                                                                                                 | function                                   | —                                                                                                         | —                |
+| remote-show-suffix                | in remote search method show suffix icon                                                                                    | boolean                                    | true / false                                                                                              | false            |
+| loading                           | whether Select is loading data from server                                                                                  | boolean                                    | true / false                                                                                              | false            |
+| loading-text                      | displayed text while loading data from server                                                                               | string                                     | —                                                                                                         | Loading          |
+| no-match-text                     | displayed text when no data matches the filtering query, you can also use slot `empty`                                      | string                                     | —                                                                                                         | No matching data |
+| no-data-text                      | displayed text when there is no options, you can also use slot `empty`                                                      | string                                     | —                                                                                                         | No data          |
+| popper-class                      | custom class name for Select's dropdown                                                                                     | string                                     | —                                                                                                         | —                |
+| reserve-keyword                   | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option                          | boolean                                    | true / false                                                                                              | true             |
+| default-first-option              | select first matching option on enter key. Use with `filterable` or `remote`                                                | boolean                                    | true / false                                                                                              | false            |
+| popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean                                    | true / false                                                                                              | true             |
+| teleported                        | whether select dropdown is teleported to the body                                                                           | boolean                                    | true / false                                                                                              | true             |
+| persistent                        | when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed                             | boolean                                    | true / false                                                                                              | true             |
+| automatic-dropdown                | for non-filterable Select, this prop decides if the option menu pops up when the input is focused                           | boolean                                    | true / false                                                                                              | false            |
+| clear-icon                        | Custom clear icon component                                                                                                 | `string \| Component`                      | —                                                                                                         | CircleClose      |
+| fit-input-width                   | whether the width of the dropdown is the same as the input                                                                  | boolean                                    | true / false                                                                                              | false            |
+| suffix-icon                       | Custom suffix icon component                                                                                                | `string \| Component`                      | —                                                                                                         | ArrowDown        |
+| suffix-transition <DeprecatedTag />                | animation when dropdown appears/disappears icon                                                                             | boolean                                    | true / false                                                                                              | true             |
+| tag-type                          | tag type                                                                                                                    | string                                     | success/info/warning/danger                                                                               | info             |
+| validate-event                    | whether to trigger form validation                                                                                          | boolean                                    | true / false                                                                                              | true             |
+| placement                         | position of dropdown                                                                                                        | string                                     | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom-start     |
+
+:::warning
+
+`suffix-transition` has been **deprecated**, and **will be** removed in <VersionTag version="2.3.0" />, please use override style scheme.
+
+:::
+## Select Events
+
+| Name           | Description                                                   | Parameters                                |
+| -------------- | ------------------------------------------------------------- | ----------------------------------------- |
+| change         | triggers when the selected value changes                      | current selected value                    |
+| visible-change | triggers when the dropdown appears/disappears                 | true when it appears, and false otherwise |
+| remove-tag     | triggers when a tag is removed in multiple mode               | removed tag value                         |
+| clear          | triggers when the clear icon is clicked in a clearable Select | —                                         |
+| blur           | triggers when Input blurs                                     | (event: FocusEvent)                       |
+| focus          | triggers when Input focuses                                   | (event: FocusEvent)                       |
+
+## Select Slots
+
+| Name   | Description                      | Subtags               |
+| ------ | -------------------------------- | --------------------- |
+| —      | Option component list            | Option Group / Option |
+| prefix | content as Select prefix         | —                     |
+| empty  | content when there is no options | —                     |
+
+## Option Group Attributes
+
+| Name     | Description                                  | Type    | Accepted Values | Default |
+| -------- | -------------------------------------------- | ------- | --------------- | ------- |
+| label    | name of the group                            | string  | —               | —       |
+| disabled | whether to disable all options in this group | boolean | —               | false   |
+
+## Option Group Slots
+
+| Name | Description               | Subtags |
+| ---- | ------------------------- | ------- |
+| -    | customize default content | Option  |
+
+## Option Attributes
+
+| Name     | Description                                 | Type                               | Accepted Values | Default |
+| -------- | ------------------------------------------- | ---------------------------------- | --------------- | ------- |
+| value    | value of option                             | string / number / boolean / object | —               | —       |
+| label    | label of option, same as `value` if omitted | string/number                      | —               | —       |
+| disabled | whether option is disabled                  | boolean                            | —               | false   |
+
+## Option Slots
+
+| Name | Description               |
+| ---- | ------------------------- |
+| —    | customize default content |
+
+## Methods
+
+| Method | Description                                     | Parameters |
+| ------ | ----------------------------------------------- | ---------- |
+| focus  | focus the Input component                       | -          |
+| blur   | blur the Input component, and hide the dropdown | -          |

docs/en-US/component/skeleton.md

@@ -0,0 +1,113 @@
+---
+title: Skeleton
+lang: en-US
+---
+
+# Skeleton
+
+When loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.
+
+## Basic usage
+
+The basic skeleton.
+
+:::demo
+
+skeleton/basic-usage
+
+:::
+
+## Configurable Rows
+
+You can configure the row numbers yourself, for more precise rendering effect, the actual rendered row number will always be 1 row more than the given number, that is because we are rendering a title row with 33% width of the others.
+
+:::demo
+
+skeleton/configurable-rows
+
+:::
+
+## Animation
+
+We have provided a switch flag indicating whether showing the loading animation, called `animated` when this is true, all children of `el-skeleton` will show animation
+
+:::demo
+
+skeleton/animation
+
+:::
+
+## Customized Template
+
+Element Plus only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.
+
+Also we have provided different types skeleton unit that you can choose, for more detailed info, please scroll down to the bottom of this page to see the API description. Also, when building your own customized skeleton structure, you should be structuring them as closer to the real DOM as possible, which avoiding the DOM bouncing caused by the height difference.
+
+:::demo
+
+skeleton/customized-template
+
+:::
+
+## Loading state
+
+When `Loading` ends, we always need to show the real UI with data to our end users. with the attribute `loading` we can control whether showing the DOM. You can also use slot `default` to structure the real DOM element.
+
+:::demo
+
+skeleton/loading-state
+
+:::
+
+## Rendering a list of data
+
+Most of the time, skeleton is used as indicators of rendering a list of data which haven't been fetched from server yet, then we need to create a list of skeleton out of no where to make it look like it is loading, with `count` attribute, you can control how many these templates you need to render to the browser.
+
+:::tip
+
+We do not recommend rendering lots of fake UI to the browser, it will still cause the performance issue, it also costs longer to destroy the skeleton. Keep `count` as small as it can be to make better user experience.
+
+:::
+
+:::demo
+
+skeleton/rendering-with-data
+
+:::
+
+## Avoiding rendering bouncing.
+
+Sometimes API responds very quickly, when that happens, the skeleton just gets rendered to the DOM then it needs to switch back to real DOM, that causes the sudden flashy. To avoid such thing, you can use the `throttle` attribute.
+
+:::demo
+
+skeleton/avoiding-rendering-bouncing
+
+:::
+
+## Skeleton API
+
+### Skeleton Attributes
+
+| Name       | Description                                                      | Type      | Default |
+| ---------- | ---------------------------------------------------------------- | --------- | ------- |
+| `animated` | whether showing the animation                                    | `boolean` | `false` |
+| `count`    | how many fake items to render to the DOM                         | `number`  | `1`     |
+| `loading`  | whether showing the real DOM                                     | `boolean` | `false` |
+| `rows`     | numbers of the row, only useful when no template slot were given | `number`  | `3`     |
+| `throttle` | Rendering delay in millseconds                                   | `number`  | `0`     |
+
+### Skeleton Slots
+
+| Name       | Description                        | Scope             |
+| ---------- | ---------------------------------- | ----------------- |
+| `default`  | Real rendering DOM                 | `$attrs`          |
+| `template` | Custom rendering skeleton template | `{ key: number }` |
+
+## Skeleton Item API
+
+### Skeleton Item Attributes
+
+| Name      | Description                         | Type                                                                                      | Default  |
+| --------- | ----------------------------------- | ----------------------------------------------------------------------------------------- | -------- |
+| `variant` | The current rendering skeleton type | `'p' \| 'text' \| 'h1' \| 'h3' \| 'caption' \| 'button' \| 'image' \| 'circle' \| 'rect'` | `'text'` |

docs/en-US/component/slider.md

@@ -0,0 +1,118 @@
+---
+title: Slider
+lang: en-US
+---
+
+# Slider
+
+Drag the slider within a fixed range.
+
+## Basic usage
+
+The current value is displayed when the slider is being dragged.
+
+:::demo Customize the initial value of the slider by setting the binding value.
+
+slider/basic-usage
+
+:::
+
+## Discrete values
+
+The options can be discrete.
+
+:::demo Set step size with the `step` attribute. You can display breakpoints by setting the `show-stops` attribute.
+
+slider/discrete-values
+
+:::
+
+## Slider with input box
+
+Set value via a input box.
+
+:::demo Set the `show-input` attribute to display an input box on the right.
+
+slider/slider-with-input-box
+
+:::
+
+## Sizes
+
+:::demo
+
+slider/sizes
+
+:::
+
+## Placement
+
+You can custom tooltip placement.
+
+:::demo
+
+slider/placement
+
+:::
+
+## Range selection
+
+Selecting a range of values is supported.
+
+:::demo Setting the `range` attribute activates range mode, where the binding value is an array made up of two boundary values.
+
+slider/range-selection
+
+:::
+
+## Vertical mode
+
+:::demo Setting the `vertical` attribute to `true` enables vertical mode. In vertical mode, the `height` attribute is required.
+
+slider/vertical-mode
+
+:::
+
+## Show marks
+
+:::demo Setting this `marks` attribute can show mark on slider.
+
+slider/show-marks
+
+:::
+
+## Attributes
+
+| Name                  | Description                                                                                              | Type            | Accepted Values                                                                                           | Default |
+| --------------------- | -------------------------------------------------------------------------------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------- | ------- |
+| model-value / v-model | binding value                                                                                            | number          | —                                                                                                         | 0       |
+| min                   | minimum value                                                                                            | number          | —                                                                                                         | 0       |
+| max                   | maximum value                                                                                            | number          | —                                                                                                         | 100     |
+| disabled              | whether Slider is disabled                                                                               | boolean         | —                                                                                                         | false   |
+| step                  | step size                                                                                                | number          | —                                                                                                         | 1       |
+| show-input            | whether to display an input box, works when `range` is false                                             | boolean         | —                                                                                                         | false   |
+| show-input-controls   | whether to display control buttons when `show-input` is true                                             | boolean         | —                                                                                                         | true    |
+| size                  | size of the slider wrapper, will not work in vertical mode                                               | string          | large / default / small                                                                                   | default |
+| input-size            | size of the input box, when set `size`, the default is the value of `size`                               | string          | large / default / small                                                                                   | default |
+| show-stops            | whether to display breakpoints                                                                           | boolean         | —                                                                                                         | false   |
+| show-tooltip          | whether to display tooltip value                                                                         | boolean         | —                                                                                                         | true    |
+| format-tooltip        | format to display tooltip value                                                                          | function(value) | —                                                                                                         | —       |
+| range                 | whether to select a range                                                                                | boolean         | —                                                                                                         | false   |
+| vertical              | vertical mode                                                                                            | boolean         | —                                                                                                         | false   |
+| height                | Slider height, required in vertical mode                                                                 | string          | —                                                                                                         | —       |
+| label                 | label for screen reader                                                                                  | string          | —                                                                                                         | —       |
+| range-start-label     | when `range` is true, screen reader label for the start of the range                                     | string          | —                                                                                                         | —       |
+| range-end-label       | when `range` is true, screen reader label for the end of the range                                       | string          | —                                                                                                         | —       |
+| format-value-text     | format to display the `aria-valuenow` attribute for screen readers                                       | function(value) | —                                                                                                         | —       |
+| debounce              | debounce delay when typing, in milliseconds, works when `show-input` is true                             | number          | —                                                                                                         | 300     |
+| tooltip-class         | custom class name for the tooltip                                                                        | string          | —                                                                                                         | —       |
+| placement             | position of Tooltip                                                                                      | string          | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | top     |
+| marks                 | marks, type of key must be `number` and must in closed interval `[min, max]`, each mark can custom style | object          | —                                                                                                         | —       |
+| validate-event        | whether to trigger form validation                                                                       | boolean         | -                                                                                                         | true    |
+
+## Events
+
+| Name   | Description                                                                                                       | Parameters           |
+| ------ | ----------------------------------------------------------------------------------------------------------------- | -------------------- |
+| change | triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released) | value after changing |
+| input  | triggers when the data changes (It'll be emitted in real time during sliding)                                     | value after changing |

docs/en-US/component/space.md

@@ -0,0 +1,141 @@
+---
+title: Space
+lang: en-US
+---
+
+# Space
+
+Even though we have [Divider](/en-US/component/divider), but sometimes we need more than one [Divider](/en-US/component/divider) to split the elements apart, so we stack each elements upon [Divider](/en-US/component/divider), but doing so not only makes our code ugly but also makes it difficult to maintain. **Space** is this kind of component provides us both productivity and elegance.
+
+## Basic usage
+
+The basic use case is using this component to provide unified space between each components
+
+:::demo Using Space to provide space
+
+space/basic
+
+:::
+
+## Vertical layout
+
+Using `direction` attribute to control the layout, we use `flex-direction` to implement this.
+
+:::demo We also provide vertical layout.
+
+space/vertical-layout
+
+:::
+
+## Control the size of the space
+
+Control the space size via `size` API.
+
+You can set the size with built-in sizes `small`, `default`, `large`, these size coresponds to `8px`, `12px`, `16px`. The default size is `small`, A.K.A. `8px`
+
+You can also using customized size to override it. Refer to the next part.
+
+:::demo
+
+space/control-size
+
+:::
+
+## Customized Size
+
+Sometimes built-in sizes could not meet the business needs, we can use custom size (number type) to control the space between items.
+
+:::demo
+
+space/customized-size
+
+:::
+
+:::tip
+
+Do not use `ElSpace` with components that depend on ancestor width (height), e.g. `ElSlider`, in this case when you drag the trigger button the bar will grow which causes misplacement between cursor and trigger button.
+
+:::
+
+## Auto wrapping
+
+When in **horizontal** mode, using `wrap` (**bool type**) to control auto wrapping behavior.
+
+:::demo Using `wrap` to control line wrap
+
+space/auto-wrapping
+
+:::
+
+## Spacer
+
+Sometimes we want something more than blank space, so we have (spacer) to help us.
+
+## Literal type spacer
+
+:::demo
+
+space/literal-type-spacer
+
+:::
+
+## Spacer can also be VNode
+
+:::demo
+
+space/vnode-type-spacer
+
+:::
+
+## Alignment
+
+Setting this attribute can adjust the alignment of child nodes, the desirable value can be found at [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).
+
+:::demo Using `alignment`
+
+space/alignment
+
+:::
+
+## Fill the container
+
+Through the `fill` **(Boolean type)** parameter, you can control whether the child node automatically fills the container.
+
+In the following example, when set to `fill`, the width of the child node will automatically adapt to the width of the container.
+
+:::demo Use fill to automatically fill the container with child nodes
+
+space/fill
+
+:::
+
+You can also use the `fillRatio` parameter to customize the filling ratio. The default value is `100`, which represents filling based on the width of the parent container at `100%`.
+
+It should be noted that the expression of horizontal layout and vertical layout is slightly different, the specific effect can be viewed in the following example.
+
+:::demo Use fillRatio to customize the fill ratio
+
+space/fill-ratio
+
+:::
+
+## Space Attributes
+
+| Name       | Description                     | Type                               | Available value                                                             | Default    |
+| ---------- | ------------------------------- | ---------------------------------- | --------------------------------------------------------------------------- | ---------- |
+| alignment  | Controls the alignment of items | string                             | [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | 'center'   |
+| class      | Classname                       | string / Array / Object            | -                                                                           | -          |
+| direction  | Placement direction             | string                             | vertical/horizontal                                                         | horizontal |
+| prefixCls  | Prefix for space-items          | string                             | el-space                                                                    | -          |
+| style      | Extra style rules               | string / Array / Object            | -                                                                           | -          |
+| spacer     | Spacer                          | string / number / VNode            | -                                                                           | -          |
+| size       | Spacing size                    | string / number / [number, number] | -                                                                           | 'small'    |
+| wrap       | Auto wrapping                   | boolean                            | true / false                                                                | false      |
+| fill       | Whether to fill the container   | boolean                            | true / false                                                                | false      |
+| fill-ratio | Ratio of fill                   | number                             | -                                                                           | 100        |
+
+## Space Slot
+
+| name    | description        |
+| ------- | ------------------ |
+| default | Items to be spaced |