docs(架构调整): 去掉docs过往架构的参考md，影响docs build

docs/.vitepress/vitepress/components/demo/dept.ts

@@ -1,35 +1,3 @@
-// import { getCurrentInstance } from 'vue'
-
-let installed = false
-await loadStyle()
-await loadKanKanThemeChalkStyle()
-await loadSDKDep()
-await loadSDK()
-
-export function setupDept() {
-    if (installed) return
-    // const instance = getCurrentInstance()
-
-    // const __sdk = (window.__sdk = new window.KanKan({
-    //   num: 'KJ-t-wOXfx2SDFy',
-    //   // server: 'https://test.4dkankan.com',
-    //   server: '/demoServer',
-    // }))
-    // instance.appContext.app.provide('__sdk', __sdk)
-    // instance.appContext.app.use(ElementPlus)
-    installed = true
-}
-
-export function loadStyle() {
-    return new Promise((resolve, reject) => {
-        const link = document.createElement('link')
-        link.rel = 'stylesheet'
-        link.href = '#STYLE#'
-        link.addEventListener('load', resolve)
-        link.addEventListener('error', reject)
-        document.body.append(link)
-    })
-}
 export function loadSDKDep() {
     return new Promise((resolve, reject) => {
         const script = document.createElement('script')

docs/components.d.ts

@@ -4,101 +4,99 @@
 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']
-        Main: typeof import('./.vitepress/vitepress/components/demo/main.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']
-        RouterLink: typeof import('vue-router')['RouterLink']
-        RouterView: typeof import('vue-router')['RouterView']
-        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']
-        'VpDemo copy': typeof import('./.vitepress/vitepress/components/vp-demo copy.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']
-        VpGemer: typeof import('./.vitepress/vitepress/components/vp-gemer.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 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']
+    Main: typeof import('./.vitepress/vitepress/components/demo/main.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']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    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/en-US/component/affix.md

@@ -1,68 +0,0 @@
----
-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

@@ -1,104 +0,0 @@
----
-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

@@ -1,81 +0,0 @@
----
-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

@@ -1,74 +0,0 @@
----
-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

@@ -1,51 +0,0 @@
----
-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

@@ -1,66 +0,0 @@
----
-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

@@ -1,38 +0,0 @@
----
-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

@@ -1,50 +0,0 @@
----
-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

@@ -1,165 +0,0 @@
----
-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

@@ -1,60 +0,0 @@
----
-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

@@ -1,63 +0,0 @@
----
-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

@@ -1,105 +0,0 @@
----
-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

@@ -1,147 +0,0 @@
----
-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

@@ -1,72 +0,0 @@
----
-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

@@ -1,60 +0,0 @@
----
-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

@@ -1,81 +0,0 @@
----
-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

@@ -1,134 +0,0 @@
----
-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

@@ -1,195 +0,0 @@
----
-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

@@ -1,112 +0,0 @@
----
-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

@@ -1,79 +0,0 @@
----
-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

@@ -1,154 +0,0 @@
----
-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

@@ -1,60 +0,0 @@
----
-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

@@ -1,140 +0,0 @@
----
-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

@@ -1,83 +0,0 @@
----
-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

@@ -1,203 +0,0 @@
----
-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

@@ -1,226 +0,0 @@
----
-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

@@ -1,119 +0,0 @@
----
-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

@@ -1,36 +0,0 @@
----
-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

@@ -1,116 +0,0 @@
----
-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

@@ -1,177 +0,0 @@
----
-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

@@ -1,142 +0,0 @@
----
-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

@@ -1,71 +0,0 @@
----
-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

@@ -1,103 +0,0 @@
----
-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

@@ -1,141 +0,0 @@
----
-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

@@ -1,134 +0,0 @@
----
-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

@@ -1,131 +0,0 @@
----
-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

@@ -1,124 +0,0 @@
----
-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

@@ -1,116 +0,0 @@
----
-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

@@ -1,67 +0,0 @@
----
-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

@@ -1,105 +0,0 @@
----
-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

@@ -1,93 +0,0 @@
----
-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

@@ -1,116 +0,0 @@
----
-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

@@ -1,105 +0,0 @@
----
-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

@@ -1,41 +0,0 @@
----
-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

@@ -1,77 +0,0 @@
----
-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

@@ -1,195 +0,0 @@
----
-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

@@ -1,210 +0,0 @@
----
-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

@@ -1,113 +0,0 @@
----
-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

@@ -1,118 +0,0 @@
----
-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

@@ -1,141 +0,0 @@
----
-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 |

docs/en-US/component/steps.md

@@ -1,113 +0,0 @@
----
-title: Steps
-lang: en-US
----
-
-# Steps
-
-Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.
-
-## Basic usage
-
-Simple step bar.
-
-:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Number` type. The unit of the `space` attribute is `px`. If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed.
-
-steps/basic
-
-:::
-
-## Step bar that contains status
-
-Shows the status of the step for each step.
-
-:::demo Use `title` attribute to set the name of the step, or override the attribute by using a named `slot`. We have listed all the slot names for you at the end of this page.
-
-steps/with-status
-
-:::
-
-## Center
-
-Title and description can be centered.
-
-:::demo
-
-steps/centered
-
-:::
-
-## Step bar with description
-
-There is description for each step.
-
-:::demo
-
-steps/with-description
-
-:::
-
-## Step bar with icon
-
-A variety of custom icons can be used in the step bar.
-
-:::demo The icon is set by the `icon` property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named `slot`.
-
-steps/with-icon
-
-:::
-
-## Vertical step bar
-
-Vertical step bars.
-
-:::demo You only need to set the `direction` attribute to `vertical` in the `el-steps` element.
-
-steps/vertical
-
-:::
-
-## Simple step bar
-
-Simple step bars, where `align-center`, `description`, `direction` and `space` will be ignored.
-
-:::demo
-
-steps/simple
-
-:::
-
-## Steps Attributes
-
-| Name           | Description                                                                   | Type            | Accepted Values                           | Default    |
-| -------------- | ----------------------------------------------------------------------------- | --------------- | ----------------------------------------- | ---------- |
-| space          | the spacing of each step, will be responsive if omitted. Supports percentage. | number / string | —                                         | —          |
-| direction      | display direction                                                             | string          | vertical/horizontal                       | horizontal |
-| active         | current activation step                                                       | number          | —                                         | 0          |
-| process-status | status of current step                                                        | string          | wait / process / finish / error / success | process    |
-| finish-status  | status of end step                                                            | string          | wait / process / finish / error / success | finish     |
-| align-center   | center title and description                                                  | boolean         | —                                         | false      |
-| simple         | whether to apply simple theme                                                 | boolean         | -                                         | false      |
-
-## Steps Slots
-
-| Name | Description               | Subtags |
-| ---- | ------------------------- | ------- |
-| -    | customize default content | Step    |
-
-## Step Attributes
-
-| Name        | Description                                                              | Type                  | Accepted Values                           | Default |
-| ----------- | ------------------------------------------------------------------------ | --------------------- | ----------------------------------------- | ------- |
-| title       | step title                                                               | string                | —                                         | —       |
-| description | step description                                                         | string                | —                                         | —       |
-| icon        | step custom icon. Icons can be passed via named slot as well             | `string \| Component` | —                                         | —       |
-| status      | current status. It will be automatically set by Steps if not configured. | string                | wait / process / finish / error / success | —       |
-
-## Step Slots
-
-| Name        | Description      |
-| ----------- | ---------------- |
-| icon        | custom icon      |
-| title       | step title       |
-| description | step description |

docs/en-US/component/switch.md

@@ -1,115 +0,0 @@
----
-title: Switch
-lang: en-US
----
-
-# Switch
-
-Switch is used for switching between two opposing states.
-
-## Basic usage
-
-:::demo Bind `v-model` to a `Boolean` typed variable. The `--el-switch-on-color` and `--el-switch-off-color` CSS variables decides the background color in two states.
-
-switch/basic
-
-:::
-
-## Sizes
-
-:::demo
-
-switch/sizes
-
-:::
-
-## Text description
-
-You can add `active-text` and `inactive-text` attribute to show texts. use `inline-prompt` attribute to control text is displayed inside dot.
-
-:::demo You can add `active-text` and `inactive-text` attribute to show texts.
-
-switch/text-description
-
-:::
-
-## Display custom icons
-
-:::tip
-
-Use the `active-icon` and `inactive-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 You can add `active-icon` and `inactive-icon` attribute to show icons. use `inline-prompt` attribute to control icon is displayed inside dot.
-
-switch/custom-icons
-
-:::
-
-## Extended value types
-
-:::demo You can set `active-value` and `inactive-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
-
-switch/extended-value-types
-
-:::
-
-## Disabled
-
-:::demo Adding the `disabled` attribute disables Switch.
-
-switch/disabled
-
-:::
-
-## Loading
-
-:::demo Setting the `loading` attribute to `true` indicates a loading state on the Switch.
-
-switch/loading
-
-:::
-
-## prevent switching
-
-:::demo set the `before-change` property, If `false` is returned or a `Promise` is returned and then is rejected, will stop switching.
-
-switch/prevent-switching
-
-:::
-
-## Attributes
-
-| Name                  | Description                                                                                                                                     | Type                                | Accepted Values         | Default |
-| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ----------------------- | ------- |
-| model-value / v-model | binding value, it should be equivalent to either `active-value` or `inactive-value`, by default it's `boolean` type                             | boolean / string / number           | —                       | —       |
-| disabled              | whether Switch is disabled                                                                                                                      | boolean                             | —                       | false   |
-| loading               | whether Switch is in loading state                                                                                                              | boolean                             | —                       | false   |
-| size                  | size of Switch                                                                                                                                  | string                              | large / default / small | default |
-| width                 | width of Switch                                                                                                                                 | number / string                     | —                       | —       |
-| inline-prompt         | whether icon or text is displayed inside dot, only the first character will be rendered for text                                                | boolean                             | —                       | false   |
-| active-icon           | component of the icon displayed when in `on` state, overrides `active-text`                                                                     | `string \| Component`               | —                       | —       |
-| inactive-icon         | component of the icon displayed when in `off` state, overrides `inactive-text`                                                                  | `string \| Component`               | —                       | —       |
-| active-text           | text displayed when in `on` state                                                                                                               | string                              | —                       | —       |
-| inactive-text         | text displayed when in `off` state                                                                                                              | string                              | —                       | —       |
-| active-value          | switch value when in `on` state                                                                                                                 | boolean / string / number           | —                       | true    |
-| inactive-value        | switch value when in `off` state                                                                                                                | boolean / string / number           | —                       | false   |
-| active-color          | background color when in `on` state ( deprecated, use CSS var `--el-switch-on-color` instead )                                                  | string                              | —                       | —       |
-| inactive-color        | background color when in `off` state ( deprecated, use CSS var `--el-switch-off-color` instead )                                                | string                              | —                       | —       |
-| border-color          | border color of the switch ( deprecated, use CSS var `--el-switch-border-color` instead )                                                       | string                              | —                       | —       |
-| name                  | input name of Switch                                                                                                                            | string                              | —                       | —       |
-| validate-event        | whether to trigger form validation                                                                                                              | boolean                             | —                       | true    |
-| before-change         | before-change hook before the switch state changes. If `false` is returned or a `Promise` is returned and then is rejected, will stop switching | `() => Promise<boolean> \| boolean` | —                       | —       |
-
-## Events
-
-| Name   | Description                 | Parameters           |
-| ------ | --------------------------- | -------------------- |
-| change | triggers when value changes | value after changing |
-
-## Methods
-
-| Method | Description                | Parameters |
-| ------ | -------------------------- | ---------- |
-| focus  | focus the Switch component | —          |

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

@@ -1,538 +0,0 @@
----
-title: Virtualized Table
-lang: en-US
----
-
-# Virtualized Table <VersionTag version="beta" />
-
-Along with the evolutionary web development, table component has always been the most popular component in our web apps especially for dashboards, data analysis. For [Table V1](./table.md), with even just 1000 records of data, it can be very annoying when using it, because the poor performance.
-
-With Virtualized Table, you can render massive chunks of data in a blink of an eye.
-
-:::tip
-
-This component is **still under testing**, use at your own risk. if you found any bug or issue please report it at [GitHub](https://github.com/element-plus/element-plus/issues) for us to fix. Also there were some APIs which was not mentioned in this documentation, some of them were not
-fully developed yet, so that we are not mentioning them here.
-
-**Even though** Virtualized Table is efficient, but when the data load is too big, your **network**, **memory size** can be the bottle neck of your app. So keep in mind that Virtualized Table is never the ultimate solution for everything, consider paginate your data, add filters etc.
-
-:::
-
-## Basic usage
-
-Let's render a basic case of Virtualized Table with 10 columns by 1000 rows, to demonstrate how performant it is.
-
-:::demo
-
-table-v2/basic
-
-:::
-
-## Auto resizer
-
-When you do not feel like you want to pass the `width` and `height` property to the table, you can use the `AutoResizer`
-component to wrap the table component and it will update the width and height for you automatically.
-
-Resize your browser to see how it works.
-
-:::tip
-
-Make sure the parent node of `AutoResizer` **HAS A FIXED HEIGHT**, because the height value was set to `100%` by default.
-You may also set it via passing through `style` attribute to `AutoResizer`.
-
-:::
-
-:::demo
-
-table-v2/auto-resizer
-
-:::
-
-## Customize Cell Renderer
-
-Of course, you can render the table cell per your needs, here is a simple example of how to customize your cell.
-
-:::demo
-
-table-v2/cell-templating
-
-:::
-
-## Table with selections
-
-Using customized cell renderer to allow selection for your table.
-
-:::demo
-
-table-v2/selection
-
-:::
-
-## Inline editing
-
-Just like selections we demonstrated above, you can use the same method to enable inline editing.
-
-:::demo
-
-table-v2/inline-editing
-
-:::
-
-## Table with status
-
-You can highlight your table content to distinguish between "success, information, warning, danger" and other states.
-
-Use `row-class-name` to customize how the row looks. In this case, every 10th row will be highlighted with `bg-blue-200` class, every 5th row will be highlighted with `bg-red-100` class.
-
-:::demo
-
-table-v2/row-class
-
-:::
-
-## Table with sticky rows
-
-You can make some rows stick to the top of the table, and that can be very easily achieved by using `fixed-data` attribute.
-
-You can add dynamically set the sticky row with scroll events like this example did.
-
-:::demo
-
-table-v2/sticky-rows
-
-:::
-
-## Table with fixed columns
-
-For some reason, you want to make the columns stick on the left and right, you can do that by adding special attributes for table.
-
-You can set the column's attribute `fixed` to `true` (representing `FixedDir.LEFT`) or `FixedDir.LEFT` or `FixedDir.RIGHT`
-
-:::demo
-
-table-v2/fixed-columns
-
-:::
-
-## Grouping header
-
-By customizing your header renderer you can group your header like this example did.
-
-:::tip
-
-In this case we used `JSX` feature which is not supported in the playground, you may try them out in your local environment or online IDEs such as `codesandbox`.
-
-It is recommended that you write your table component in JSX, since it contains VNode manipulations.
-
-:::
-
-:::demo
-
-table-v2/grouping-header
-
-:::
-
-## Filter
-
-Virtualized Table providers customizing header renderers for rendering customized header, then we can use that to render filters
-
-:::demo
-
-table-v2/filter
-
-:::
-
-## Sortable
-
-You can sort the table with sort state.
-
-:::demo
-
-table-v2/sort
-
-:::
-
-## Controlled Sort
-
-You can define multiple sortable column when you need it. Keep in mind that if you define multiple sortable columns, the UI
-might seem strange to your users since the it is unclear which column is being sorted.
-
-:::demo
-
-table-v2/controlled-sort
-
-:::
-
-## Cross hovering
-
-When the list is big, and sometimes you get lost which row and column you are currently visiting, using this is extremely
-helpful.
-
-:::demo
-
-table-v2/cross-hovering
-
-:::
-
-## Colspan
-
-Virtualized table did not use built-in `table` element, so that `colspan` and `rowspan` is a little bit different than [TableV1](./table.md). With customized row renderer, we can still do that. In this case, you'll learn how to do that.
-
-:::demo
-
-table-v2/colspan
-
-:::
-
-## Rowspan
-
-Since we have [Colspan](#colspan) of course we have row span as well, it is a little bit different than colspan but the idea
-is basically the same.
-
-:::demo
-
-table-v2/rowspan
-
-:::
-
-## Rowspan and Colspan together
-
-We can combine rowspan and colspan together to meet your business goal!
-
-:::demo
-
-table-v2/spans
-
-:::
-
-## Tree data
-
-Virtual Table can also render data like tree, you can expand/collapse the tree node by clicking the arrow icon.
-
-:::demo
-
-table-v2/tree-data
-
-:::
-
-## Dynamic height rows
-
-Virtual Table can also render rows with dynamic height, when you have data without knowing how big the content it would be, you
-might want to use this feature for rendering a dynamic height row. You must pass down `estimated-row-height` to enable this
-feature, and the closer the estimated height is, the smoother the rendering will be.
-
-:::tip
-
-The height of each row is dynamically measured while rendering the rows, so that the UI **might be** bouncing if you are trying
-to render a large amount of data.
-
-:::
-
-:::demo
-
-table-v2/dynamic-height
-
-:::
-
-## Detail view
-
-With dynamic height rendering, we can use that to render detail view in the table.
-
-:::demo
-
-table-v2/detailed-view
-
-:::
-
-## Customized Footer
-
-Rendering a customized footer when you want to show a concluding message or information.
-
-:::demo
-
-table-v2/footer
-
-:::
-
-## Customized Empty Renderer
-
-Render customized empty element
-
-:::demo
-
-table-v2/empty
-
-:::
-
-## Overlay
-
-Render an overlay above the table when you want to show a loading indicator or something else.
-
-:::demo
-
-table-v2/overlay
-
-:::
-
-## Manual scrolling
-
-Use the methods exposed by Table V2 to scroll manually/programmatically with desired offset/rows.
-
-:::tip
-
-The second parameter for `scrollToRow` is the scrolling strategy which by default is `auto`, it calculates the position
-to scroll by itself. You can pass the strategy yourselves if you want to scroll to a specific position.
-The available options are `"auto" | "center" | "end" | "start" | "smart"`
-
-The difference between `smart` and `auto` is that `auto` is a subset of `smart` scroll strategy.
-
-:::
-
-:::demo
-
-table-v2/manual-scroll
-
-:::
-
-## TableV2 Attributes
-
-| Name                      | Description                                                                                                                | Type                                                 | Default   |
-| ------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | --------- |
-| cache                     | Number of rows rendered in advance for boosting the performance                                                            | Number                                               | 2         |
-| estimated-row-height      | The estimated row height for rendering dynamic height rows                                                                 | Number                                               | -         |
-| header-class              | Customized class name passed to header wrapper                                                                             | String/Function\<[HeaderClassGetter](#typings)\>     | -         |
-| header-props              | Customized props name passed to header component                                                                           | Object/Function\<[HeaderPropsGetter](#typings)\>     | -         |
-| header-cell-props         | Customized props name passed to header cell component                                                                      | Object/Function\<[HeaderCellPropsGetter](#typings)\> | -         |
-| header-height             | The height of entire header, when it's array, it will render as many header rows as the given array's length               | Number/Array\<Number\>                               | 50        |
-| footer-height             | The height of the footer element, when presented, it will be part of the calculation of the table's height.                | Number                                               | 0         |
-| row-class                 | Customized class name passed to row wrapper                                                                                | String/Function\<[RowClassGetter](#typings)\>        | -         |
-| row-key                   | The key of each row, if not provided, it will be the index of the row                                                      | String/Symbol/Number                                 | id        |
-| row-props                 | Customized props name passed to row component                                                                              | Object/Function\<[RowPropsGetter](#typings)\>        | -         |
-| row-height                | The height of each row, used for calculating the total height of the table                                                 | Number                                               | 50        |
-| cell-props                | extra props passed to each cell (except header cells)                                                                      | Object/Function\<[CellPropsGetter](#typings)\>       | -         |
-| columns                   | An array of column definitions.                                                                                            | Array\<[Column](#column-attribute)\>                 | -         |
-| data                      | An array of data to be rendered in the table.                                                                              | Array\<[Data](#typings)\>                            | []        |
-| data-getter               | An method which helps customizing the how to fetch the data from the data source.                                          | Function                                             | -         |
-| fixed-data                | Data for rendering rows above the main content and below the header                                                        | Array\<[Data](#typings)\>                            | -         |
-| expand-column-key         | The column key indicates which row is expandable                                                                           | String                                               | -         |
-| expanded-row-keys         | An array of keys for expanded rows, can be used with `v-model`                                                             | Array\<[KeyType](#typings)\>                         | -         |
-| default-expanded-row-keys | An array of keys for default expanded rows, **NON REACTIVE**                                                               | Array\<[KeyType](#typings)\>                         | -         |
-| class                     | Class name for the the virtual table, will be applied to all three tables (left, right, main)                              | String/Array/Object                                  | -         |
-| fixed                     | Flag indicates the table column's width is a fixed or flexible.                                                            | Boolean                                              | false     |
-| width \*                  | Width for the table, required                                                                                              | Number                                               | -         |
-| height \*                 | Height for the table, required                                                                                             | Number                                               | -         |
-| max-height                | Maximum height for the table                                                                                               | Number                                               | -         |
-| h-scrollbar-size          | Indicates the horizontal scrollbar's size for the table, used to prevent the horizontal and vertical scrollbar to collapse | Number                                               | 6         |
-| v-scrollbar-size          | Indicates the vertical scrollbar's size for the table, used to prevent the horizontal and vertical scrollbar to collapse   | Number                                               | 6         |
-| scrollbar-always-on       | If true, the scrollbar will always be shown instead of when mouse is placed above the table                                | Boolean                                              | false     |
-| sort-by                   | Sort indicator                                                                                                             | Object\<[SortBy](#typings)\>                         | {}        |
-| sort-state                | Multiple sort indicator                                                                                                    | Object\<[SortState](#typings)\>                      | undefined |
-
-## TableV2 Slots
-
-| Name        | Params                          |
-| ----------- | ------------------------------- |
-| cell        | [CellSlotProps](#typings)       |
-| header      | [HeaderSlotProps](#typings)     |
-| header-cell | [HeaderCellSlotProps](#typings) |
-| row         | [RowSlotProps](#typings)        |
-| footer      | -                               |
-| empty       | -                               |
-| overlay     | -                               |
-
-## TableV2 Events
-
-| Name                 | Description                                                           | Parameters                               |
-| -------------------- | --------------------------------------------------------------------- | ---------------------------------------- |
-| column-sort          | Invoked when column sorted                                            | Object\<ColumnSortParam\>                |
-| expanded-rows-change | Invoked when expanded rows changed                                    | `Array<KeyType>`                         |
-| end-reached          | Invoked when the end of the table is reached                          | -                                        |
-| scroll               | Invoked after scrolled                                                | Object\<[ScrollParams](#typings)\>       |
-| rows-rendered        | Invoked when rows are rendered                                        | Object\<[RowsRenderedParams](#typings)\> |
-| row-expand           | Invoked when expand/collapse the tree node by clicking the arrow icon | Object\<[RowExpandParams](#typings)\>    |
-| row-event-handlers   | A collection of handlers attached to each row                         | Object\<[RowEventHandlers](#typings)\>   |
-
-## TableV2 Methods
-
-| Event Name   | Description                                          | Parameters                                                                 |
-| ------------ | ---------------------------------------------------- | -------------------------------------------------------------------------- |
-| scrollTo     | Scroll to a given position                           | `{ scrollLeft?: number, scrollTop?: number}`                               |
-| scrollToLeft | Scroll to a given horizontal position                | `scrollLeft: number`                                                       |
-| scrollToTop  | Scroll to a given vertical position                  | `scrollTop: number`                                                        |
-| scrollToRow  | scroll to a given row with specified scroll strategy | `row: number, strategy?: "auto" \|"center" \| "end" \| "start" \| "smart"` |
-
-:::tip
-
-Note that these are `JavaScript` Objects, so that you **CANNOT USE** kebab-case for these attributes
-
-:::
-
-## Column Attribute
-
-| Name           | Description                                                               | Type                                                                                                                                                             | Default |
-| -------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| align          | Alignment of the table cell content                                       | [Alignment](https://github.com/element-plus/element-plus/blob/b92b22932758f0ddea98810ae248f6ca62f77e25/packages/components/table-v2/src/constants.ts#L6)         | left    |
-| class          | Class name for the column                                                 | String                                                                                                                                                           | -       |
-| fixed          | Fixed direction of the column                                             | Boolean/[FixedDir](https://github.com/element-plus/element-plus/blob/b92b22932758f0ddea98810ae248f6ca62f77e25/packages/components/table-v2/src/constants.ts#L11) | false   |
-| flexGrow       | CSSProperties flex grow, Only useful when not this is not a fixed table   | Number                                                                                                                                                           | 0       |
-| flexShrink     | CSSProperties flex shrink, Only useful when not this is not a fixed table | Number                                                                                                                                                           | 1       |
-| headerClass    | Used for customizing header column class                                  | String                                                                                                                                                           | -       |
-| hidden         | Whether the column is invisible                                           | Boolean                                                                                                                                                          | -       |
-| style          | Customized style for column cell, will be merged with grid cell           | CSSProperties                                                                                                                                                    | -       |
-| sortable       | Indicates whether the column is sortable                                  | Boolean                                                                                                                                                          | -       |
-| title          | The default text rendered in header cell                                  | String                                                                                                                                                           | -       |
-| maxWidth       | Maximum width for the column                                              | String                                                                                                                                                           | -       |
-| minWidth       | Minimum width for the column                                              | String                                                                                                                                                           | -       |
-| width \*       | Width for the column **Required**                                         | Number                                                                                                                                                           | -       |
-| cellRenderer   | Customized Cell renderer                                                  | VueComponent/(props: [CellRenderProps](#renderer-typings)) => VNode                                                                                              | -       |
-| headerRenderer | Customized Header renderer                                                | VueComponent/(props: [HeaderRenderProps](#renderer-typings)) => VNode                                                                                            | -       |
-
-## Typings
-
-<details>
-<summary>Show Type Declarations</summary>
-
-```ts
-type HeaderClassGetter = (param: {
-  columns: Column<any>[]
-  headerIndex: number
-}) => string
-
-type HeaderPropsGetter = (param: {
-  columns: Column<any>[]
-  headerIndex: number
-}) => Record<string, any>
-
-type HeaderCellPropsGetter = (param: {
-  columns: Column<any>[]
-  column: Column<any>
-  columnIndex: number
-  headerIndex: number
-  style: CSSProperties
-}) => Record<string, any>
-
-type RowClassGetter = (param: {
-  columns: Column<any>[]
-  rowData: any
-  rowIndex: number
-}) => string
-
-type RowPropsGetter = (param: {
-  columns: Column<any>[]
-  rowData: any
-  rowIndex: number
-}) => Record<string, any>
-
-type CellPropsGetter = (param: {
-  column: Column<any>
-  columns: Column<any>[]
-  columnIndex: number
-  cellData: any
-  rowData: any
-  rowIndex: number
-}) => void
-
-type CellRenderProps<T> = {
-  cellData: T
-  column: Column<T>
-  columns: Column<T>[]
-  columnIndex: number
-  rowData: any
-  rowIndex: number
-}
-
-type HeaderRenderProps<T> = {
-  column: Column<T>
-  columns: Column<T>[]
-  columnIndex: number
-  headerIndex: number
-}
-
-type ScrollParams = {
-  xAxisScrollDir: 'forward' | 'backward'
-  scrollLeft: number
-  yAxisScrollDir: 'forward' | 'backward'
-  scrollTop: number
-}
-
-type CellSlotProps<T> = {
-  column: Column<T>
-  columns: Column<T>[]
-  columnIndex: number
-  depth: number
-  style: CSSProperties
-  rowData: any
-  rowIndex: number
-  isScrolling: boolean
-  expandIconProps?:
-    | {
-        rowData: any
-        rowIndex: number
-        onExpand: (expand: boolean) => void
-      }
-    | undefined
-}
-
-type HeaderSlotProps = {
-  cells: VNode[]
-  columns: Column<any>[]
-  headerIndex: number
-}
-
-type HeaderCellSlotProps = {
-  class: string
-  columns: Column<any>[]
-  column: Column<any>
-  columnIndex: number
-  headerIndex: number
-  style: CSSProperties
-  headerCellProps?: any
-  sortBy: SortBy
-  sortState?: SortState | undefined
-  onColumnSorted: (e: MouseEvent) => void
-}
-
-type RowSlotProps = {
-  columnIndex: number
-  rowIndex: number
-  data: any
-  key: number | string
-  isScrolling?: boolean | undefined
-  style: CSSProperties
-}
-
-type Data = {
-  [key: KeyType]: any
-  children?: Array<any>
-}
-
-type FixedData = Data
-
-type KeyType = string | number | symbol
-
-type ColumnSortParam<T> = { column: Column<T>; key: KeyType; order: SortOrder }
-
-enum SortOrder {
-  ASC = 'asc',
-  DESC = 'desc',
-}
-
-type SortBy = { key: KeyType; Order: SortOrder }
-type SortState = Record<KeyType, SortOrder>
-```
-
-</details>
-
-## FAQs
-
-#### How do I render a list with checkbox in the first column?
-
-Since you are allowed to define your own cell renderer, you can do what the example
-[Customize Cell Renderer](#customize-cell-renderer) did to render `checkbox` yourselves, and maintaining the
-state by yourselves.
-
-#### Why virtualized table provides less features than [TableV1](./table.md)
-
-For virtualized table, we intend to provide less feature and let our users to implement their own features per demand.
-Integrating too many features makes the code hard to maintain and for most users the basic features are enough. Some key
-features were not developed yet. We would love to hear from you. Join [Discord](https://discord.link/ElementPlus) to stay tuned.

docs/en-US/component/tabs.md

@@ -1,122 +0,0 @@
----
-title: Tabs
-lang: en-US
----
-
-# Tabs
-
-Divide data collections which are related yet belong to different types.
-
-## Basic usage
-
-Basic and concise tabs.
-
-:::demo Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the `value` attribute.
-
-tabs/basic
-
-:::
-
-## Card Style
-
-Tabs styled as cards.
-
-:::demo Set `type` to `card` can get a card-styled tab.
-
-tabs/card-style
-
-:::
-
-## Border card
-
-Border card tabs.
-
-:::demo Set `type` to `border-card`.
-
-tabs/border-card
-
-:::
-
-## Tab position
-
-You can use `tab-position` attribute to set the tab's position.
-
-:::demo You can choose from four directions: `tabPosition="left|right|top|bottom"`
-
-tabs/tab-position
-
-:::
-
-## Custom Tab
-
-You can use named slot to customize the tab label content.
-
-:::demo
-
-tabs/custom-tab
-
-:::
-
-## Add & close tab
-
-Only card type Tabs support addable & closeable.
-
-:::demo
-
-tabs/dynamic-tabs
-
-:::
-
-## Customized trigger button of new tab
-
-:::demo
-
-tabs/customized-trigger
-
-:::
-
-## Tabs Attributes
-
-| Name                  | Description                                                                                                                             | Type                                | Accepted Values       | Default           |
-| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | --------------------- | ----------------- |
-| model-value / v-model | binding value, name of the selected tab                                                                                                 | string / number                     | —                     | name of first tab |
-| type                  | type of Tab                                                                                                                             | string                              | card/border-card      | —                 |
-| closable              | whether Tab is closable                                                                                                                 | boolean                             | —                     | false             |
-| addable               | whether Tab is addable                                                                                                                  | boolean                             | —                     | false             |
-| editable              | whether Tab is addable and closable                                                                                                     | boolean                             | —                     | false             |
-| tab-position          | position of tabs                                                                                                                        | string                              | top/right/bottom/left | top               |
-| stretch               | whether width of tab automatically fits its container                                                                                   | boolean                             | -                     | false             |
-| before-leave          | hook function before switching tab. If `false` is returned or a `Promise` is returned and then is rejected, switching will be prevented | Function(activeName, oldActiveName) | —                     | —                 |
-
-## Tabs Events
-
-| Name       | Description                                           | Parameters                                                           |
-| ---------- | ----------------------------------------------------- | -------------------------------------------------------------------- |
-| tab-click  | triggers when a tab is clicked                        | (pane: `TabsPaneContext`, ev: `Event`)                               |
-| tab-change | triggers when `activeName` is changed                 | (name: `TabPanelName`)                                               |
-| tab-remove | triggers when tab-remove button is clicked            | (name: `TabPanelName`)                                               |
-| tab-add    | triggers when tab-add button is clicked               | —                                                                    |
-| edit       | triggers when tab-add button or tab-remove is clicked | (paneName: `TabPanelName \| undefined`, action: `'remove' \| 'add'`) |
-
-## Tabs Slots
-
-| Name | Description               | Subtags  |
-| ---- | ------------------------- | -------- |
-| -    | customize default content | Tab-pane |
-
-## Tab-pane Attributes
-
-| Name     | Description                                                                          | Type            | Accepted Values | Default                                                                        |
-| -------- | ------------------------------------------------------------------------------------ | --------------- | --------------- | ------------------------------------------------------------------------------ |
-| label    | title of the tab                                                                     | string          | —               | —                                                                              |
-| disabled | whether Tab is disabled                                                              | boolean         | —               | false                                                                          |
-| name     | identifier corresponding to the name of Tabs, representing the alias of the tab-pane | string / number | —               | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '0' |
-| closable | whether Tab is closable                                                              | boolean         | —               | false                                                                          |
-| lazy     | whether Tab is lazily rendered                                                       | boolean         | —               | false                                                                          |
-
-## Tab-pane Slots
-
-| Name  | Description        |
-| ----- | ------------------ |
-| -     | Tab-pane's content |
-| label | Tab-pane's label   |

docs/en-US/component/tag.md

@@ -1,118 +0,0 @@
----
-title: Tag
-lang: en-US
----
-
-# Tag
-
-Used for marking and selection.
-
-## Basic usage
-
-:::demo Use the `type` attribute to define Tag's type. In addition, the `color` attribute can be used to set the background color of the Tag.
-
-tag/basic
-
-:::
-
-## Removable Tag
-
-:::demo `closable` attribute can be used to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `disable-transitions` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed.
-
-tag/removable
-
-:::
-
-## Edit Dynamically
-
-You can use the `close` event to add and remove tag dynamically.
-
-:::demo
-
-tag/editable
-
-:::
-
-## Sizes
-
-Besides default size, Tag 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`.
-
-tag/sizes
-
-:::
-
-## Theme
-
-Tag provide three different themes: `dark`、`light` and `plain`
-
-:::demo Using `effect` to change, default is `light`
-
-tag/theme
-
-:::
-
-## Rounded <el-tag>> 2.1.7</el-tag>
-
-Tag can also be rounded like button.
-
-:::demo
-
-tag/rounded
-
-:::
-
-## Checkable tag
-
-Sometimes because of the business needs, we might need checkbox like tag, but **button like checkbox** cannot meet our needs, here comes `check-tag`
-
-:::demo basic check-tag usage, the API is rather simple.
-
-tag/checkable
-
-:::
-
-## Attributes
-
-| Name                | Description                          | Type    | Accepted Values             | Default |
-| ------------------- | ------------------------------------ | ------- | --------------------------- | ------- |
-| type                | component type                       | string  | success/info/warning/danger | —       |
-| closable            | whether Tag can be removed           | boolean | —                           | false   |
-| disable-transitions | whether to disable animations        | boolean | —                           | false   |
-| hit                 | whether Tag has a highlighted border | boolean | —                           | false   |
-| color               | background color of the Tag          | string  | —                           | —       |
-| size                | tag size                             | string  | large / default /small      | default |
-| effect              | component theme                      | string  | dark / light / plain        | light   |
-| round               | whether Tag is rounded               | boolean | —                           | false   |
-
-## Events
-
-| Name  | Description                  | Parameters |
-| ----- | ---------------------------- | ---------- |
-| click | triggers when Tag is clicked | —          |
-| close | triggers when Tag is removed | —          |
-
-## Slots
-
-| Name | Description               |
-| ---- | ------------------------- |
-| —    | customize default content |
-
-## CheckTag Attributes
-
-| Name    | Description | Type    | Accepted Values | Default |
-| ------- | ----------- | ------- | --------------- | ------- |
-| checked | is checked  | boolean | true/false      | —       |
-
-## CheckTag Events
-
-| Name   | Description                        | Parameters |
-| ------ | ---------------------------------- | ---------- |
-| change | triggers when Check Tag is clicked | checked    |
-
-## CheckTag Slots
-
-| Name | Description               |
-| ---- | ------------------------- |
-| —    | customize default content |

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

@@ -1,84 +0,0 @@
----
-title: TimePicker
-lang: en-US
----
-
-# TimePicker
-
-Use Time Picker for time input.
-
-## Arbitrary time picker
-
-Can pick an arbitrary time.
-
-:::demo By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the `arrow-control` attribute is set.
-
-time-picker/basic
-
-:::
-
-## Limit the time range
-
-You can also limit the time range.
-
-:::demo Limit the time range by specifying `disabledHours` `disabledMinutes` and `disabledSeconds`.
-
-time-picker/basic-range
-
-:::
-
-## Arbitrary time range
-
-Can pick an arbitrary time range.
-
-:::demo We can pick a time range by adding an `is-range` attribute. Also, `arrow-control` is supported in range mode.
-
-time-picker/range
-
-:::
-
-## 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 TimePicker is read only                          | boolean                                | —                                                             | false       |
-| disabled              | whether TimePicker 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                                       | —           |
-| placeholder           | placeholder in non-range mode                            | string                                 | —                                                             | —           |
-| start-placeholder     | placeholder for the start time in range mode             | string                                 | —                                                             | —           |
-| end-placeholder       | placeholder for the end time in range mode               | string                                 | —                                                             | —           |
-| is-range              | whether to pick a time range                             | boolean                                | —                                                             | false       |
-| arrow-control         | whether to pick time using arrow buttons                 | boolean                                | —                                                             | false       |
-| popper-class          | custom class name for TimePicker's dropdown              | string                                 | —                                                             | —           |
-| range-separator       | range separator                                          | string                                 | —                                                             | '-'         |
-| format                | format of the displayed value in the input box           | string                                 | see [date formats](/en-US/component/date-picker#date-formats) | HH:mm:ss    |
-| default-value         | optional, default date of the calendar                   | Date / [Date, Date]                    | —                                                             | —           |
-| id                    | same as `id` in native input                             | string / [string, string]              | —                                                             | -           |
-| name                  | same as `name` in native input                           | string                                 | —                                                             | —           |
-| prefix-icon           | Custom prefix icon component                             | `string \| Component`                  | —                                                             | Clock       |
-| clear-icon            | Custom clear icon component                              | `string \| Component`                  | —                                                             | CircleClose |
-| disabled-hours        | To specify the array of hours that cannot be selected    | function                               | —                                                             | —           |
-| disabled-minutes      | To specify the array of minutes that cannot be selected  | Function(selectedHour)                 | —                                                             | —           |
-| disabled-seconds      | To specify the array of seconds that cannot be selected  | Function(selectedHour, selectedMinute) | —                                                             | —           |
-| teleported            | whether time-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)`       |
-| visible-change | triggers when the TimePicker's dropdown appears/disappears | `(visibility: boolean)` |
-
-## Methods
-
-| Method      | Description                 | Parameters |
-| ----------- | --------------------------- | ---------- |
-| focus       | focus the Input component   | —          |
-| blur        | blur the Input component    | —          |
-| handleOpen  | open the TimePicker popper  | —          |
-| handleClose | close the TimePicker popper | —          |

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

@@ -1,84 +0,0 @@
----
-title: TimeSelect
-lang: en-US
----
-
-# TimeSelect
-
-Use Time Select for time input.
-
-The available time range is 00:00 to 23:59
-
-## Fixed time picker
-
-Provide a list of fixed time for users to choose.
-
-:::demo Use `el-time-select` label, then assign start time, end time and time step with `start`, `end` and `step`.
-
-time-select/basic
-
-:::
-
-## Time Formats
-
-Use `format` to control format of time(hours and minutes).
-
-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
-
-time-select/time-formats
-
-:::
-
-## Fixed time range
-
-If start( end ) time is picked at first, then the status of end( start ) time's options will change accordingly.
-
-:::demo
-
-time-select/time-range
-
-:::
-
-## Attributes
-
-| Name                  | Description                                              | Type                  | Accepted Values                                                                        | Default     |
-| --------------------- | -------------------------------------------------------- | --------------------- | -------------------------------------------------------------------------------------- | ----------- |
-| model-value / v-model | binding value                                            | string                | —                                                                                      | —           |
-| disabled              | whether TimeSelect 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                | —                                                                                      | —           |
-| name                  | same as `name` in native input                           | string                | —                                                                                      | —           |
-| effect                | Tooltip theme, built-in theme: `dark` / `light`          | string                | string                                                                                 | light       |
-| prefix-icon           | Custom prefix icon component                             | `string \| Component` | —                                                                                      | Clock       |
-| clear-icon            | Custom clear icon component                              | `string \| Component` | —                                                                                      | CircleClose |
-| start                 | start time                                               | string                | —                                                                                      | 09:00       |
-| end                   | end time                                                 | string                | —                                                                                      | 18:00       |
-| step                  | time step                                                | string                | —                                                                                      | 00:30       |
-| min-time              | minimum time, any time before this time will be disabled | string                | —                                                                                      | 00:00       |
-| max-time              | maximum time, any time after this time will be disabled  | string                | —                                                                                      | —           |
-| format                | set format of time                                       | string                | see [formats](https://day.js.org/docs/en/display/format#list-of-all-available-formats) | HH:mm       |
-
-## Events
-
-| Name   | Description                           | Parameters                |
-| ------ | ------------------------------------- | ------------------------- |
-| change | triggers when user confirms the value | component's binding value |
-| blur   | triggers when Input blurs             | (event: FocusEvent)       |
-| focus  | triggers when Input focuses           | (event: FocusEvent)       |
-
-## Methods
-
-| Method | Description               | Parameters |
-| ------ | ------------------------- | ---------- |
-| focus  | focus the Input component | —          |
-| blur   | blur the Input component  | —          |

docs/en-US/component/timeline.md

@@ -1,75 +0,0 @@
----
-title: Timeline
-lang: en-US
----
-
-# Timeline
-
-Visually display timeline.
-
-## Basic usage
-
-Timeline can be split into multiple activities. Timestamps are important features that distinguish them from other components. Note the difference with Steps.
-
-:::demo
-
-timeline/basic
-
-:::
-
-## Custom node
-
-Size, color, and icons can be customized in node.
-
-:::demo
-
-timeline/custom-node
-
-:::
-
-## Custom timestamp
-
-Timestamp can be placed on top of content when content is too high.
-
-:::demo
-
-timeline/custom-timestamp
-
-:::
-
-## Vertically centered
-
-Timeline-Item is centered vertically.
-
-:::demo
-
-timeline/center
-
-:::
-
-## Timeline Slots
-
-| Name | Description                 | Subtags       |
-| ---- | --------------------------- | ------------- |
-| —    | Custom content for timeline | Timeline-Item |
-
-## Timeline-Item Attributes
-
-| Name           | Description                 | Type                  | Accepted Values                             | Default |
-| -------------- | --------------------------- | --------------------- | ------------------------------------------- | ------- |
-| timestamp      | timestamp content           | string                | —                                           | —       |
-| hide-timestamp | whether to show timestamp   | boolean               | —                                           | false   |
-| center         | Whether vertically centered | boolean               | —                                           | false   |
-| placement      | position of timestamp       | string                | top / bottom                                | bottom  |
-| type           | node type                   | string                | primary / success / warning / danger / info | —       |
-| color          | background color of node    | string                | hsl / hsv / hex / rgb                       | —       |
-| size           | node size                   | string                | normal / large                              | normal  |
-| icon           | icon component              | `string \| Component` | —                                           | —       |
-| hollow         | icon is hollow              | boolean               | —                                           | false   |
-
-## Timeline-Item Slots
-
-| Name | Description                      |
-| ---- | -------------------------------- |
-| —    | Custom content for timeline item |
-| dot  | Custom defined node              |

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

@@ -1,84 +0,0 @@
----
-title: Tooltip V2
-lang: en-US
----
-
-# Tooltip V2
-
-For the existing tooltip, it has too many APIs which is not very intuitive and accessible, so we created this much simpler tooltip, which does only one simple thing - showing tooltip. The structure of having a tooltip is kind of the same, but the API is different. In this version we have provided the components individually, you can compose your own tooltip by using the components.
-
-## Basic usage
-
-**Hover** or **tab** on the icon to see the tooltip.
-
-:::demo
-
-tooltip-v2/basic-usage
-
-:::
-
-## Accessible tooltip
-
-:::demo
-
-tooltip-v2/a11y
-
-:::
-
-## Transition / Animation
-
-You may set transition/animation via `CSS` animation/transition or [Transition](https://vuejs.org/guide/built-ins/transition.html#transition) component for your tooltip content when opening.
-
-:::tip
-
-By default, tooltip v2 ONLY allows a half-way transition/animation which only occurs when the tooltip is shown. This is because the implementation uses `v-if` to show/hide the tooltip. When closing, the content element is removed from DOM, so that the transition / animation will be interrupted.
-
-:::
-
-:::demo
-
-tooltip-v2/transition
-
-:::
-
-### Full transition
-
-Of course, you can have full transition for your tooltip content. But this requires using [Transition](https://vuejs.org/guide/built-ins/transition.html#transition) component, checkout the demo below.
-
-:::demo
-
-tooltip-v2/full-transition
-
-:::
-
-## Render to the root element
-
-By default, unlike [tooltip v1](./tooltip.md), the tooltip will be rendered to the body element. **tooltip v2** will render to where the trigger/reference element is. But you can still render to to the root element by using `Teleport` component.
-
-:::demo
-
-tooltip-v2/render-to-root
-
-:::
-
-## With arrow
-
-:::demo
-
-tooltip-v2/arrow
-
-:::
-
-<!-- ## Composing your own tooltip
-
-## Tooltip V2 APIs
-
-### Tooltip Root
-
-### Tooltip Trigger
-
-### Tooltip Content
-
-### Tooltip Arrow
-
-### Tooltip Reference -->

docs/en-US/component/tooltip.md

@@ -1,177 +0,0 @@
----
-title: Tooltip
-lang: en-US
----
-
-# Tooltip
-
-Display prompt information for mouse hover.
-
-## Basic usage
-
-Tooltip has 9 placements.
-
-:::demo Use attribute `content` to set the display content when hover. The attribute `placement` determines the position of the tooltip. Its value is `[orientation]-[alignment]` with four orientations `top`, `left`, `right`, `bottom` and three alignments `start`, `end`, `null`, and the default alignment is null. Take `placement="left-end"` for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.
-
-tooltip/basic
-
-:::
-
-## Theme
-
-Tooltip has two built-in themes: `dark` and `light`.
-
-:::tip
-
-To use customized theme, you will have to known where your tooltip is rendered into, if your tooltip is rendered into the root element, you will need to set the css rule globally.
-
-It is recommended that not using linear gradient background color when you using customized theme and showing the arrow at the same time, because the popup arrow and the content are two different elements,
-the popup arrow's style needs to be set individually, and when it comes to the gradient background color, it might seem a little bit weird.
-
-:::
-
-:::demo Set `effect` to modify theme, and the default value is `dark`.
-
-tooltip/theme
-
-:::
-
-## More Content
-
-Display multiple lines of text and set their format.
-
-:::demo Override attribute `content` of `el-tooltip` by adding a slot named `content`.
-
-tooltip/rich-content
-
-:::
-
-## Advanced usage
-
-In addition to basic usages, there are some attributes that allow you to customize your own:
-
-`transition` attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear.
-
-`disabled` attribute allows you to disable `tooltip`. You just need set it to `true`.
-
-In fact, Tooltip is an extension based on [ElPopper](https://github.com/element-plus/element-plus/tree/dev/packages/components/popper), you can use any attribute that are allowed in ElPopper.
-
-:::demo
-
-tooltip/advanced-usage
-
-:::
-
-:::tip
-
-The `router-link` component is not supported in tooltip, please use `vm.$router.push`.
-
-Disabled form elements are not supported for Tooltip, more information can be found at [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter). You need to wrap the disabled form element with a container element for Tooltip to work.
-
-:::
-
-## HTML as content
-
-The content attribute can be set to HTML string.
-
-:::warning
-
-Although `content` 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 `raw-content` is on, please make sure `content` is trusted, and **never** assign user-provided `content`.
-
-:::
-
-:::demo
-
-tooltip/html-content
-
-:::
-
-## Virtual triggering
-
-Sometimes we want to render the tooltip on some other trigger element,
-we can separate the trigger and the content.
-
-:::tip
-
-Virtual triggering tooltip is controlled component, so that you will have to control the visibility of the tooltip your own
-when this happens, **YOU WILL NOT** be able to close the tooltip by clicking somewhere else.
-
-:::
-
-:::demo
-
-tooltip/virtual-trigger
-
-:::
-
-## Singleton
-
-Tooltip can also be singleton, which means you can have multiple trigger with only one tooltip instance, this function is implemented based on `Virtual triggering`
-
-:::tip
-
-Known issue: when using singleton, the popup will be bouncing out from unexpected places
-
-:::
-
-:::demo
-
-tooltip/singleton
-
-:::
-
-## Controlled
-
-Tooltip can be controlled by the parent component, by using `:visible` you can implement two way binding.
-
-:::demo
-
-tooltip/controlled
-
-:::
-
-## Animations
-
-Tooltip can be customized animated, you can set the the desired animation function as you desired.
-
-:::demo
-
-tooltip/animations
-
-:::
-
-## Attributes
-
-| Name                                     | Description                                                                                                                                                  | Type                         | Accepted Values                                                                                           | Default                                                                    |
-| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
-| append-to                                | which element the tooltip CONTENT appends to                                                                                                                 | `CSSSelector \| HTMLElement` | —                                                                                                         | #el-popper-container-[randomValue]                                         |
-| effect                                   | Tooltip theme, built-in theme: `dark` / `light`                                                                                                              | string                       | dark / light                                                                                              | dark                                                                       |
-| content                                  | display content, can be overridden by `slot#content`                                                                                                         | String                       | —                                                                                                         | —                                                                          |
-| raw-content                              | whether `content` is treated as HTML string                                                                                                                  | boolean                      | —                                                                                                         | false                                                                      |
-| 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 | bottom                                                                     |
-| visible / v-model:visible                | visibility of Tooltip                                                                                                                                        | boolean                      | —                                                                                                         | false                                                                      |
-| disabled                                 | whether Tooltip is disabled                                                                                                                                  | boolean                      | —                                                                                                         | false                                                                      |
-| offset                                   | offset of the Tooltip                                                                                                                                        | number                       | —                                                                                                         | 0                                                                          |
-| transition                               | animation name                                                                                                                                               | string                       | —                                                                                                         | el-fade-in-linear                                                          |
-| visible-arrow (will deprecate in 2.1.0 ) | whether an arrow is displayed. For more information, check [ElPopper](https://github.com/element-plus/element-plus/tree/dev/packages/components/popper) page | boolean                      | —                                                                                                         | true                                                                       |
-| 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}}]}` |
-| show-after                               | delay of appearance, in millisecond                                                                                                                          | number                       | —                                                                                                         | 0                                                                          |
-| show-arrow                               | whether the tooltip content has an arrow                                                                                                                     | boolean                      | true / false                                                                                              | true                                                                       |
-| hide-after                               | delay of disappear, in millisecond                                                                                                                           | number                       | —                                                                                                         | 200                                                                        |
-| auto-close                               | timeout in milliseconds to hide tooltip                                                                                                                      | number                       | —                                                                                                         | 0                                                                          |
-| manual                                   | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true`                                                       | boolean                      | —                                                                                                         | false                                                                      |
-| popper-class                             | custom class name for Tooltip's popper                                                                                                                       | string                       | —                                                                                                         | —                                                                          |
-| enterable                                | whether the mouse can enter the tooltip                                                                                                                      | Boolean                      | —                                                                                                         | true                                                                       |
-| tabindex                                 | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Tooltip                                                          | number                       | —                                                                                                         | 0                                                                          |
-| teleported                               | whether tooltip content is teleported, if `true` it will be teleported to where `append-to` sets                                                             | boolean                      | true / false                                                                                              | true                                                                       |
-| trigger                                  | How should the tooltip be triggered (to show)                                                                                                                | string                       | hover / click / focus / contextmenu                                                                       | hover                                                                      |
-| virtual-triggering                       | Indicates whether virtual triggering is enabled                                                                                                              | boolean                      | —                                                                                                         | false                                                                      |
-| virtual-ref                              | Indicates the reference element to which the tooltip is attached                                                                                             | HTMLElement                  | —                                                                                                         | —                                                                          |
-| trigger-keys                             | When you click the mouse to focus on the trigger element, you can define a set of keyboard codes to control the display of tooltip through the keyboard      | Array                        | —                                                                                                         | `['Enter','Space']`                                                        |
-
-## Slots
-
-| Name    | Description                            |
-| ------- | -------------------------------------- |
-| —       | Tooltip triggering & reference element |
-| content | customize content                      |

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

@@ -1,109 +0,0 @@
----
-title: TreeSelect
-lang: en-US
----
-
-# TreeSelect
-
-The tree selector of the dropdown menu,
-it combines the functions of components `el-tree` and `el-select`.
-
-## Basic usage
-
-Selector for tree structures.
-
-:::demo
-
-tree-select/basic
-
-:::
-
-:::tip
-
-Since `render-after-expand` defaults to `true`,
-the selected label name may not be displayed when echoing,
-you can set it to `false` to display the correct name.
-
-:::
-
-## Select any level
-
-When using the `check-strictly=true` attribute, any node can be checked,
-otherwise only leaf nodes are supported.
-
-:::demo
-
-tree-select/check-strictly
-
-:::
-
-:::tip
-
-When using `show-checkbox`, since `check-on-click-node` is false by default,
-it can only be selected by checking, you can set it to true,
-and then click the node to select.
-
-:::
-
-## Multiple Selection
-
-Multiple selection using clicks or checkbox.
-
-:::demo
-
-tree-select/multiple
-
-:::
-
-## Disabled Selection
-
-Disable options using the disabled field.
-
-:::demo
-
-tree-select/disabled
-
-:::
-
-## Filterable
-
-Use keyword filtering or custom filtering methods.
-`filterMethod` can custom filter method for data,
-`filterNodeMethod` can custom filter method for data node.
-
-:::demo
-
-tree-select/filterable
-
-:::
-
-## Custom content
-
-Contents of custom tree nodes.
-
-:::demo
-
-tree-select/slots
-
-:::
-
-## LazyLoad
-
-Lazy loading of tree nodes, suitable for large data lists.
-
-:::demo
-
-tree-select/lazy
-
-:::
-
-## Attributes
-
-Since this component combines the functions of components `el-tree` and `el-select`,
-the original properties have not been changed, so no repetition here,
-and please go to the original component to view the documentation.
-
-| Attributes                              | Methods                       | Events                              | Slots                              |
-| --------------------------------------- | ----------------------------- | ----------------------------------- | ---------------------------------- |
-| [tree](./tree.md#attributes)            | [tree](./tree.md#method)      | [tree](./tree.md#events)            | [tree](./tree.md#slots)            |
-| [select](./select.md#select-attributes) | [select](./select.md#methods) | [select](./select.md#select-events) | [select](./select.md#select-slots) |

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

@@ -1,135 +0,0 @@
----
-title: Virtualized Tree
-lang: en-US
----
-
-# <ElBadge value="beta">Tree V2 virtualized tree</ElBadge>
-
-Tree view with blazing fast scrolling performance for any amount of data
-
-## Basic usage
-
-Basic tree structure.
-
-:::demo
-
-tree-v2/basic
-
-:::
-
-## Selectable
-
-Used for node selection.
-
-:::demo
-
-tree-v2/selectable
-
-:::
-
-## Disabled checkbox
-
-The checkbox of a node can be set as disabled.
-
-:::demo In the example, `disabled` property is declared in defaultProps, and some nodes are set as `disabled: true`. The corresponding checkboxes are disabled and can't be clicked.
-
-tree-v2/disabled
-
-:::
-
-## Default expanded and default checked
-
-Tree nodes can be initially expanded or checked
-
-:::demo Use `default-expanded-keys` and `default-checked-keys` to set initially expanded and initially checked nodes respectively.
-
-tree-v2/default-state
-
-:::
-
-## Custom node content
-
-The content of tree nodes can be customized, so you can add icons or buttons as you will
-
-:::demo
-
-tree-v2/custom-node
-
-:::
-
-## Tree node filtering
-
-Tree nodes can be filtered
-
-:::demo Invoke the `filter` method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, `filter-node-method` is required, and its value is the filtering method.
-
-tree-v2/filter
-
-:::
-
-## TreeV2 Attributes
-
-| Name                  | Description                                                                                                                                  | Type                  | Default |
-| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------- |
-| data                  | tree data                                                                                                                                    | array                 | —       |
-| empty-text            | text displayed when data is void                                                                                                             | string                | —       |
-| props                 | configuration options, see the following table                                                                                               | object                | —       |
-| highlight-current     | whether current node is highlighted                                                                                                          | boolean               | false   |
-| expand-on-click-node  | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon.   | boolean               | true    |
-| check-on-click-node   | whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox. | boolean               | false   |
-| default-expanded-keys | array of keys of initially expanded nodes                                                                                                    | array                 | —       |
-| show-checkbox         | whether node is selectable                                                                                                                   | boolean               | false   |
-| check-strictly        | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true`                                        | boolean               | false   |
-| default-checked-keys  | array of keys of initially checked nodes                                                                                                     | array                 | —       |
-| current-node-key      | key of initially selected node                                                                                                               | string / number       | —       |
-| filter-method         | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden.                             | Function(value, data) | —       |
-| indent                | horizontal indentation of nodes in adjacent levels in pixels                                                                                 | number                | 16      |
-| icon                  | custome tree node icon                                                                                                                       | `string \| Component` | -       |
-
-## props
-
-| Attribute | Description                                                                          | Type           | Default  |
-| --------- | ------------------------------------------------------------------------------------ | -------------- | -------- |
-| value     | unique identity key name for nodes, its value should be unique across the whole tree | string, number | id       |
-| label     | specify which key of node object is used as the node's label                         | string         | label    |
-| children  | specify which node object is used as the node's subtree                              | string         | children |
-| disabled  | specify which key of node object represents if node's checkbox is disabled           | string         | disabled |
-
-## TreeV2 Method
-
-`Tree` has the following method, which returns the currently selected array of nodes.
-| Method | Description | Parameters |
-| --------------- | ---------------------------------------- | ---------------------------------------- |
-| filter | filter all tree nodes, filtered nodes will be hidden | `(query: string)` |
-| getCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes | `(leafOnly: boolean)` |
-| getCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys | `(leafOnly: boolean)` |
-| setCheckedKeys | set certain nodes to be checked | `(keys: TreeKey[])` |
-| setChecked | set node to be checked or not | `(key: TreeKey, checked: boolean)` |
-| setExpandedKeys | set certain nodes to be expanded | `(keys: TreeKey[])` |
-| getHalfCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of nodes | - |
-| getHalfCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of node's keys | - |
-| getCurrentKey | return the highlight node's key (undefined if no node is highlighted) | - |
-| getCurrentNode | return the highlight node's data (undefined if no node is highlighted) | - |
-| setCurrentKey | set highlighted node by key | `(key: TreeKey)` |
-| getNode | get node by key or data | `(data: TreeKey \| TreeNodeData)` |
-| expandNode | expand specified node | `(node: TreeNode)` |
-| collapseNode | collapse specified node | `(node: TreeNode)` |
-| setData | When the data is very large, using reactive data will cause the poor performance, so we provide a way to avoid this situation | `(data: TreeData)` |
-
-## TreeV2 Events
-
-| Name             | Description                                          | Parameters                                                                                                                              |
-| ---------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| node-click       | triggers when a node is clicked                      | `(data: TreeNodeData, node: TreeNode, e: MouseEvent)`                                                                                   |
-| node-contextmenu | triggers when a node is clicked by right button      | `(e: Event, data: TreeNodeData, node: TreeNode)`                                                                                        |
-| check-change     | triggers when the selected state of the node changes | `(data: TreeNodeData, checked: boolean)`                                                                                                |
-| check            | triggers after clicking the checkbox of a node       | `(data: TreeNodeData, info: { checkedKeys: TreeKey[],checkedNodes: TreeData, halfCheckedKeys: TreeKey[], halfCheckedNodes: TreeData,})` |
-| current-change   | triggers when current node changes                   | `(data: TreeNodeData, node: TreeNode)`                                                                                                  |
-| node-expand      | triggers when current node open                      | `(data: TreeNodeData, node: TreeNode)`                                                                                                  |
-| node-collapse    | triggers when current node close                     | `(data: TreeNodeData, node: TreeNode)`                                                                                                  |
-
-## TreeV2 Slots
-
-| Name | Description                                                                                    |
-| ---- | ---------------------------------------------------------------------------------------------- |
-| -    | Custom content for tree nodes. The scope parameter is `{ node: TreeNode, data: TreeNodeData }` |

docs/en-US/component/typography.md

@@ -1,39 +0,0 @@
----
-title: Typography
-lang: en-US
----
-
-# Typography
-
-We create a font convention to ensure the best presentation across different platforms.
-
-## Font
-
-:::demo
-
-typography/font
-
-:::
-
-## Font Convention
-
-:::demo
-
-typography/convention
-
-:::
-
-## Font Line Height
-
-:::demo
-
-typography/line-height
-
-:::
-
-## Font-family
-
-```css
-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
-  'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-```

docs/en-US/component/upload.md

@@ -1,141 +0,0 @@
----
-title: Upload
-lang: en-US
----
-
-# Upload
-
-Upload files by clicking or drag-and-drop.
-
-## Basic Usage
-
-:::demo Customize upload button type and text using `slot`. Set `limit` and `on-exceed` to limit the maximum number of uploads allowed and specify method when the limit is exceeded. Plus, you can abort removing a file in the `before-remove` hook.
-
-upload/basic
-
-:::
-
-## Cover Previous File
-
-:::demo Set `limit` and `on-exceed` to automatically replace the previous file when select a new file.
-
-upload/limit-cover
-
-:::
-
-## User Avatar
-
-Use `before-upload` hook to limit the upload file format and size.
-
-:::demo
-
-upload/avatar
-
-:::
-
-## Photo Wall
-
-Use `list-type` to change the fileList style.
-
-:::demo
-
-upload/photo-wall
-
-:::
-
-## Custom Thumbnail
-
-Use `scoped-slot` to change default thumbnail template.
-
-:::demo
-
-upload/custom-thumbnail
-
-:::
-
-## File List with Thumbnail
-
-:::demo
-
-upload/file-list-with-thumbnail
-
-:::
-
-## File List Control
-
-Use `on-change` hook function to control upload file list.
-
-:::demo
-
-upload/file-list
-
-:::
-
-## Drag to Upload
-
-You can drag your file to a certain area to upload it.
-
-:::demo
-
-upload/drag-and-drop
-
-:::
-
-## Manual Upload
-
-:::demo
-
-upload/manual
-
-:::
-
-## Upload API
-
-### Attributes
-
-| Name                              | Description                                                                                                                                                                           | Type                                                                                          | Default  | Required |
-| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | -------- | -------- |
-| `action`                          | request URL.                                                                                                                                                                          | `string`                                                                                      | —        | Yes      |
-| `headers`                         | request headers.                                                                                                                                                                      | `Headers \| Record<string, any>`                                                              | —        | No       |
-| `method`                          | set upload request method.                                                                                                                                                            | `string`                                                                                      | `'post'` | No       |
-| `multiple`                        | whether uploading multiple files is permitted.                                                                                                                                        | `boolean`                                                                                     | `false`  | No       |
-| `data`                            | additions options of request.                                                                                                                                                         | `Record<string, any>`                                                                         | —        | No       |
-| `name`                            | key name for uploaded file.                                                                                                                                                           | `string`                                                                                      | `'file'` | No       |
-| `with-credentials`                | whether cookies are sent.                                                                                                                                                             | `boolean`                                                                                     | `false`  | No       |
-| `show-file-list`                  | whether to show the uploaded file list.                                                                                                                                               | `boolean`                                                                                     | `true`   | No       |
-| `drag`                            | whether to activate drag and drop mode.                                                                                                                                               | `boolean`                                                                                     | `false`  | No       |
-| `accept`                          | accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode === true`.                                     | `string`                                                                                      | —        | No       |
-| `on-preview`                      | hook function when clicking the uploaded files.                                                                                                                                       | `(uploadFile: UploadFile) => void`                                                            | —        | No       |
-| `on-remove`                       | hook function when files are removed.                                                                                                                                                 | `(uploadFile: UploadFile, uploadFiles: UploadFiles) => void`                                  | —        | No       |
-| `on-success`                      | hook function when uploaded successfully.                                                                                                                                             | `(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => void`                   | —        | No       |
-| `on-error`                        | hook function when some errors occurs.                                                                                                                                                | `(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => void`                    | —        | No       |
-| `on-progress`                     | hook function when some progress occurs.                                                                                                                                              | `(evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => void`        | —        | No       |
-| `on-change`                       | hook function when select file or upload file success or upload file fail.                                                                                                            | `(uploadFile: UploadFile, uploadFiles: UploadFiles) => void`                                  | —        | No       |
-| `on-exceed`                       | hook function when limit is exceeded.                                                                                                                                                 | `(files: File[], uploadFiles: UploadFiles) => void`                                           | —        | No       |
-| `before-upload`                   | hook function before uploading with the file to be uploaded as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, uploading will be aborted.      | `(rawFile: UploadRawFile) => Awaitable<void \| undefined \| null \| boolean \| File \| Blob>` | —        | No       |
-| `before-remove`                   | hook function before removing a file with the file and file list as its parameters. If `false` is returned or a `Promise` is returned and then is rejected, removing will be aborted. | `(uploadFile: UploadFile, uploadFiles: UploadFiles) => Awaitable<boolean>`                    | —        | No       |
-| `file-list` / `v-model:file-list` | default uploaded files.                                                                                                                                                               | `UploadUserFile[]`                                                                            | `[]`     | No       |
-| `list-type`                       | type of file list.                                                                                                                                                                    | `'text' \| 'picture' \| 'picture-card'`                                                       | `'text'` | No       |
-| `auto-upload`                     | whether to auto upload file.                                                                                                                                                          | `boolean`                                                                                     | `true`   | No       |
-| `http-request`                    | override default xhr behavior, allowing you to implement your own upload-file's request.                                                                                              | `(options: UploadRequestOptions) => XMLHttpRequest \| Promise<unknown>`                       | —        | No       |
-| `disabled`                        | whether to disable upload.                                                                                                                                                            | `boolean`                                                                                     | `false`  | No       |
-| `limit`                           | maximum number of uploads allowed.                                                                                                                                                    | `number`                                                                                      | —        | No       |
-
-### Slots
-
-| Name      | Description                         | Type                   |
-| --------- | ----------------------------------- | ---------------------- |
-| `default` | customize default content.          | -                      |
-| `trigger` | content which triggers file dialog. | -                      |
-| `tip`     | content of tips.                    | -                      |
-| `file`    | content of thumbnail template.      | `{ file: UploadFile }` |
-
-### Exposes
-
-| Name           | Description                                                                                            | Type                                                                      |
-| -------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
-| `abort`        | cancel upload request.                                                                                 | `(file: UploadFile) => void`                                              |
-| `submit`       | upload the file list manually.                                                                         | `() => void`                                                              |
-| `clearFiles`   | clear the file list (this method is not supported in the `before-upload` hook).                        | `(status?: Array<"ready" \| "uploading" \| "success" \| "fail">) => void` |
-| `handleStart`  | select the file manually.                                                                              | `(rawFile: UploadRawFile) => void`                                        |
-| `handleRemove` | remove the file manually. `file` and `rawFile` has been merged. `rawFile` will be removed in `v2.2.0`. | `(file: UploadFile \| UploadRawFile, rawFile?: UploadRawFile) => void`    |

docs/en-US/guide/changelog.md

@@ -1,18 +0,0 @@
----
-title: 'Changelog'
-lang: en-US
----
-
-<style scoped lang="scss">
-@at-root .hero-content {
-  padding: 32px;
-}
-</style>
-
-# Changelog
-
-Element Plus team uses **weekly** release strategy under normal circumstance, but critical bug fixes would require hotfix so the actual release number **could be** more than 1 per week.
-
-On this page you can only see the latest 30 records of our [changelog](https://github.com/element-plus/element-plus/blob/dev/CHANGELOG.en-US.md).
-
-<VpChangelog />

docs/en-US/guide/commit-examples.md

@@ -1,85 +0,0 @@
-# Commit Examples
-
-## Why this chapter exists
-
-Please refer to [Conventional Commits](https://www.conventionalcommits.org/) for more information.
-
-A good commit message enables us:
-
-1. To understand what the contributor is trying to do
-2. Automatically generates change log
-
-### Rule for writing commit message
-
-```md
-# (If applied, this commit will...) <subject> (Max 72 characters)
-
-# |<---- Using a Maximum Of 72 Characters ---->|
-
-# Explain why this change is being made
-
-# |<---- Try To Limit Each Line to a Maximum Of 72 Characters ---->|
-
-# Provide links or keys to any relevant tickets, articles or other resources
-
-# Use issues and merge requests' full URLs instead of short references,
-
-# as they are displayed as plain text outside of GitLab
-
-# --- COMMIT END ---
-
-# --------------------
-
-# Remember to
-
-# Capitalize the subject line
-
-# Use the imperative mood in the subject line
-
-# Do not end the subject line with a period
-
-# Subject must contain at least 3 words
-
-# Separate subject from body with a blank line
-
-# Commits that change 30 or more lines across at least 3 files should
-
-# describe these changes in the commit body
-
-# Do not use Emojis
-
-# Use the body to explain what and why vs. how
-
-# Can use multiple lines with "-" for bullet points in body
-
-# For more information: https://chris.beams.io/posts/git-commit/
-
-# --------------------
-```
-
-### Template for commit messages
-
-Below is a template commit message for your reference.
-
-```md
-feat(components): [button] I did something with button
-
-Blank between subject and body is expected.(period is expected)
-Describes your change in one line or multi-line.
-Capitalize your first letter when starting a new line
-Please do not exceeds 72 characters per line, because that would be harder to comprehend.
-
-- You can also add bullet list symbol for better layout
-```
-
-For the subject header, the format is:
-
-```
-[type](scope): [messages]
-```
-
-You can checkout the allowed values for **type** and **scope** in [commitlint.config.js](https://github.com/element-plus/element-plus/blob/c2ee36a7fc72b17742d43ecdff4e2912c416141d/commitlint.config.js#L57),
-
-### Useful links
-
-[Keeping git commit history clean](https://about.gitlab.com/blog/2018/06/07/keeping-git-commit-history-clean/)

docs/en-US/guide/dark-mode.md

@@ -1,84 +0,0 @@
----
-title: Dark Mode
-lang: en-US
----
-
-# Dark Mode <VersionTag version="2.2.0" />
-
-After a long time, Element Plus supports dark mode!
-
-We extracted and unified all necessary variables to make it possible to implement based on CSS Vars.
-
-## How to enable it?
-
-First you can create a switch to toggle `dark` class of html.
-
-> If you only need dark mode, just add `dark` class for html.
-
-```html
-<html class="dark">
-  <head></head>
-  <body></body>
-</html>
-```
-
-> If you want to toggle it, i recommend [useDark | VueUse](https://vueuse.org/core/useDark/).
-
-Then, you can quickly enable it with just one line of code to import CSS in your entry.
-
-```ts
-// main.ts
-// if you just want to import css
-import 'element-plus/theme-chalk/dark/css-vars.css'
-```
-
-> If you want an example, you can refer to [element-plus-vite-starter](https://github.com/element-plus/element-plus-vite-starter).
-
-## Custom variables
-
-### By CSS
-
-Just override it by CSS Vars.
-
-For example, new file `styles/dark/css-vars.css`:
-
-```css
-html.dark {
-  /* custom dark bg color */
-  --el-bg-color: #626aef;
-}
-```
-
-Import it after styles of Element Plus:
-
-```ts
-// main.ts
-import 'element-plus/theme-chalk/dark/css-vars.css'
-import './styles/dark/css-vars.css'
-```
-
-### By SCSS
-
-If you use scss, you can also import scss file to compile.
-
-> You can refer [Theming](./theming.md) to get more info.
-
-```scss
-// styles/element/index.scss
-/*just override what you need*/
-@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
-  $bg-color: (
-    'page': #0a0a0a,
-    '': #626aef,
-    'overlay': #1d1e1f,
-  )
-);
-```
-
-```ts
-// main.ts
-import './styles/element/index.scss'
-
-// or just want to import scss?
-// import 'element-plus/theme-chalk/src/dark/css-vars.scss'
-```

docs/en-US/guide/design.md

@@ -1,42 +0,0 @@
----
-title: Design
-lang: en-US
----
-
-# Design Disciplines
-
-<design-guide />
-
-## Consistency
-
-- **Consistent with real life:** in line with the process and logic of real life,
-  and comply with languages and habits that the users are used to.
-
-- **Consistent within interface:** all elements should be consistent, such as:
-  design style, icons and texts, position of elements, etc.
-
-## Feedback
-
-- **Operation feedback:** enable the users to clearly perceive their operations
-  by style updates and interactive effects.
-
-- **Visual feedback:** reflect current state by updating or
-  rearranging elements of the page.
-
-## Efficiency
-
-- **Simplify the process:** keep operating process simple and intuitive.
-
-- **Definite and clear:** enunciate your intentions clearly so
-  that the users can quickly understand and make decisions.
-
-- **Easy to identify:** the interface should be straightforward,
-  which helps the users to identify and frees them from memorizing and recalling.
-
-## Controllability
-
-- **Decision making:** giving advice about operations is acceptable, but do not
-  make decisions for the users.
-
-- **Controlled consequences:** users should be granted the freedom to operate,
-  including canceling, aborting or terminating current operation.

docs/en-US/guide/dev-faq.md

@@ -1,36 +0,0 @@
-# Development FAQ
-
-Here are the problems that are easy to encounter in development.
-
-## If you encounter dependency related issues
-
-```bash
-rm -fr node_modules
-pnpm i
-```
-
-## Link local dependencies
-
-```bash
-# get dist
-pnpm build
-cd dist/element-plus
-# set cur element-plus to global `node_modules`
-pnpm link --global
-# for esm we also need link element-plus for dist
-pnpm link --global element-plus
-
-# go to your project, link to `element-plus`
-cd your-project
-pnpm link --global element-plus
-```
-
-> More info see [pnpm link](https://pnpm.io/cli/link).
-
-## Theme
-
-We should not write Chinese comments in scss files.
-
-It will generate warning `@charset "UTF-8";` in the header of css file when built with vite.
-
-> More info see [#3219](https://github.com/element-plus/element-plus/issues/3219).

docs/en-US/guide/dev-guide.md

@@ -1,50 +0,0 @@
-# Local Development
-
-## Bootstrap project
-
-With command
-
-```bash
-pnpm i
-```
-
-the project will install all dependencies.
-
-## Website preview
-
-With command
-
-```bash
-pnpm docs:dev
-```
-
-the project will launch website for you to preview all existing component.
-
-## Local development
-
-See [Local development guide](https://github.com/element-plus/element-plus/blob/dev/CONTRIBUTING.md)
-
-1. With command
-
-```shell
-pnpm dev
-```
-
-will start the local development environment.
-
-2. Add your component into `play/src/App.vue`
-
-> App.vue
-
-```vue
-<template>
-  <ComponentYouAreDeveloping />
-</template>
-
-<script setup lang="ts">
-// make sure this component is registered in @element-plus/components
-import { ComponentYouAreDeveloping } from '@element-plus/components'
-</script>
-```
-
-Modify `App.vue` file per your needs to get things work.

docs/en-US/guide/i18n.md

@@ -1,138 +0,0 @@
----
-title: Internationalization
-lang: en-US
----
-
-# Internationalization
-
-Element Plus components are using English **by default**, if you wish you use other
-languages, you can get you answer by keep reading.
-
-## Global configuration
-
-Element Plus provides global configurations
-
-```typescript
-import ElementPlus from 'element-plus'
-import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
-
-app.use(ElementPlus, {
-  locale: zhCn,
-})
-```
-
-## ConfigProvider
-
-Element Plus also provides a Vue component [ConfigProvider](/en-US/component/config-provider)
-for globally configuring locale and other settings.
-
-```html
-<template>
-  <el-config-provider :locale="locale">
-    <app />
-  </el-config-provider>
-</template>
-
-<script>
-  import { defineComponent } from 'vue'
-  import { ElConfigProvider } from 'element-plus'
-
-  import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
-
-  export default defineComponent({
-    components: {
-      ElConfigProvider,
-    },
-    setup() {
-      return {
-        locale: zhCn,
-      }
-    },
-  })
-</script>
-```
-
-## CDN Usage
-
-If you are using Element Plus via CDN, then you need to do this, let's again take
-unpkg as an example
-
-```html
-<script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>
-<script>
-  app.use(ElementPlus, {
-    locale: ElementPlusLocaleZhCn,
-  })
-</script>
-```
-
-Full documentation refer to: [ConfigProvider](/en-US/component/config-provider)
-
-[Supported Language List](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)
-
-<ul class="language-list">
-  <li>Simplified Chinese (zh-cn)</li>
-  <li>American English (en)</li>
-  <li>Azerbaijani (az)</li>
-  <li>German (de)</li>
-  <li>Portuguese (pt)</li>
-  <li>Spanish (es)</li>
-  <li>Danish (da)</li>
-  <li>French (fr)</li>
-  <li>Norwegian (nb-NO)</li>
-  <li>Traditional Chinese (zh-tw)</li>
-  <li>Italian (it)</li>
-  <li>Korean (ko)</li>
-  <li>Japanese (ja)</li>
-  <li>Dutch (nl)</li>
-  <li>Vietnamese (vi)</li>
-  <li>Russian (ru)</li>
-  <li>Turkish (tr)</li>
-  <li>Brazilian Portuguese (pt-br)</li>
-  <li>Farsi (fa)</li>
-  <li>Thai (th)</li>
-  <li>Indonesian (id)</li>
-  <li>Bulgarian (bg)</li>
-  <li>Pashto (pa)</li>
-  <li>Polish (pl)</li>
-  <li>Finnish (fi)</li>
-  <li>Swedish (sv)</li>
-  <li>Greek (el)</li>
-  <li>Slovak (sk)</li>
-  <li>Catalunya (ca)</li>
-  <li>Czech (cs)</li>
-  <li>Ukrainian (uk)</li>
-  <li>Turkmen (tk)</li>
-  <li>Tamil (ta)</li>
-  <li>Latvian (lv)</li>
-  <li>Afrikaans (af)</li>
-  <li>Estonian (et)</li>
-  <li>Slovenian (sl)</li>
-  <li>Arabic (ar)</li>
-  <li>Hebrew (he)</li>
-  <li>Lithuanian (lt)</li>
-  <li>Mongolian (mn)</li>
-  <li>Kazakh (kk)</li>
-  <li>Hungarian (hu)</li>
-  <li>Romanian (ro)</li>
-  <li>Kurdish (ku)</li>
-  <li>Uighur (ug-cn)</li>
-  <li>Khmer (km)</li>
-  <li>Serbian (sr)</li>
-  <li>Basque (eu)</li>
-  <li>Kyrgyz (ky)</li>
-  <li>Armenian (hy-am)</li>
-  <li>Croatian (hr)</li>
-  <li>Esperanto (eo)</li>
-  <li>Bengali (bn)</li>
-</ul>
-
-If you need any other languages, [PR](https://github.com/element-plus/element-plus/pulls)
-is always welcomed, you only need to add a language file at
-[here](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang).
-
-<style>
-  .language-list {
-    list-style: disc
-  }
-</style>

docs/en-US/guide/migration.md

@@ -1,25 +0,0 @@
----
-title: Migration
-lang: en-US
----
-
-# Migration
-
-[This guide](https://github.com/element-plus/element-plus/discussions/5658) will help you upgrade from Element 2.x to Element Plus.
-
-## Vue 3 migration build
-
-You may encounter some issues when using Element Plus with Vue 3 migration build. Some of the components rely on Vue 3 internal API's. It's worth trying to adjust compatConfig mode to 3, either globally or [per component in your project](https://v3.vuejs.org/guide/migration/migration-build.html#per-component-config).
-
-## Migration Tool :hammer_and_wrench:
-
-We have made a migration tool for you to migrate your project from [Element UI](https://element.eleme.io) to Element Plus.
-You can find the [gogo code migration tool](https://github.com/thx/gogocode/tree/main/packages/gogocode-plugin-element) here.
-
-We have tested this on [Vue Element Admin](https://github.com/PanJiaChen/vue-element-admin) (Vue 2 + Element UI). You can find the transpiled code [here](https://github.com/gogocodeio/vue-element-admin).
-
-<style scoped>
-  details {
-    margin-top: 8px;
-  }
-</style>

docs/en-US/guide/namespace.md

@@ -1,69 +0,0 @@
----
-title: Custom Namespace
-lang: en-US
----
-
-## Custom namespace <VersionTag version="2.2.0" />
-
-:::tip
-
-We provide a example in [element-plus-vite-starter](https://github.com/element-plus/element-plus-vite-starter).
-Just check it.
-
-:::
-
-Default namespace is `el`.
-In special cases, we may need to customize its namespace.
-
-Since we use sass to write styles, if you want to customize all namespaces.
-We have to assume that you already use sass.
-
-You must set `ElConfigProvider` and scss `$namespace` at the same time.
-
-### Set `ElConfigProvider`
-
-Use `ElConfigProvider` wrap your root component.
-
-```vue
-<!-- App.vue -->
-<template>
-  <el-config-provider namespace="ep">
-    <!-- ... -->
-  </el-config-provider>
-</template>
-```
-
-### Set Scss & Css Vars
-
-Create `styles/element/index.scss`:
-
-```scss
-// styles/element/index.scss
-// we can add this to custom namespace, default is 'el'
-@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
-  $namespace: 'ep'
-);
-// ...
-```
-
-Import `styles/element/index.scss` in `vite.config.ts`:
-
-> The same is true for webpack, which needs to be set in `preprocessorOptions`.
-
-```ts
-import { defineConfig } from 'vite'
-// https://vitejs.dev/config/
-export default defineConfig({
-  // ...
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: `@use "~/styles/element/index.scss" as *;`,
-      },
-    },
-  },
-  // ...
-})
-```
-
-That's all.

docs/en-US/guide/nav.md

@@ -1,73 +0,0 @@
----
-title: Navigation
-lang: en-US
----
-
-<style>
-:root {
-  --categories-c-bg: #F9FAFC;
-  --categories-c-page: #E5E9F2;
-  --categories-c-overlay: white;
-  --categories-c-text: #99A9BF;
-  --categories-c-icon: #E5E9F2;
-  --categories-c-line: #E5E9F2;
-}
-
-.dark {
-  --categories-c-bg: #1D1E1F;
-  --categories-c-page: #0A0A0A;
-  --categories-c-overlay: #141414;
-  --categories-c-text: #53637A;
-  --categories-c-icon: #2F333D;
-  --categories-c-line: #242529;
-}
-</style>
-
-# Navigation
-
-Navigation focuses on solving the users' problems of where to go and how to get
-there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.
-
-## Choose the right navigation
-
-An appropriate navigation gives users a smooth experience, while an inappropriate
-one leads to confusion. Here are the differences between sidebar navigation and
-top navigation
-
-## Side Navigation
-
-Affix the navigation at the left edge, thus improves its visibility, making it
-easier to switch between pages. In this case, the top area of the page holds
-commonly used tools, e.g. search bar, help button, notice button, etc. Suitable
-for background management or utility websites.
-
-### Level 1 categories
-
-Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.
-
-<L1Categories />
-
-### Level 2 categories
-
-Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in
-combination of second level navigation, making it easier for the users to locate
-and navigate.
-
-<L2Categories />
-
-### Level 3 categories
-
-Suitable for complicated utility websites. The left sidebar holds first level
-navigation, and the middle column displays second level navigation or other utility
-options.
-
-<L3Categories />
-
-## Top Navigation
-
-Conforms to the normal browsing order from top to bottom, which makes things more
-natural. The navigation amount and text length are limited to the width of the top.
-
-Suitable for sites with few navigation and large chunks.
-
-<TopNavigationExample />

docs/en-US/guide/quickstart.md

@@ -1,209 +0,0 @@
----
-title: Quick Start
-lang: en-US
----
-
-# Quick Start
-
-This section describes how to use Element Plus in your project.
-
-## Usage
-
-### Full Import
-
-If you don’t care about the bundle size so much, it’s more convenient to use full import.
-
-```typescript
-// main.ts
-import { createApp } from 'vue'
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import App from './App.vue'
-
-const app = createApp(App)
-
-app.use(ElementPlus)
-app.mount('#app')
-```
-
-#### Volar support
-
-If you use volar, please add the global component type definition to `compilerOptions.types` in `tsconfig.json`.
-
-```json
-// tsconfig.json
-{
-  "compilerOptions": {
-    // ...
-    "types": ["element-plus/global"]
-  }
-}
-```
-
-### On-demand Import
-
-You need to use an additional plugin to import components you used.
-
-#### Auto import <el-tag type="primary" style="vertical-align: middle;" effect="dark" size="small">Recommend</el-tag>
-
-First you need to install `unplugin-vue-components` and `unplugin-auto-import`.
-
-```shell
-npm install -D unplugin-vue-components unplugin-auto-import
-```
-
-Then add the code below into your `Vite` or `Webpack` config file.
-
-##### Vite
-
-```ts
-// vite.config.ts
-import { defineConfig } from 'vite'
-import AutoImport from 'unplugin-auto-import/vite'
-import Components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
-
-export default defineConfig({
-  // ...
-  plugins: [
-    // ...
-    AutoImport({
-      resolvers: [ElementPlusResolver()],
-    }),
-    Components({
-      resolvers: [ElementPlusResolver()],
-    }),
-  ],
-})
-```
-
-##### Webpack
-
-```js
-// webpack.config.js
-const AutoImport = require('unplugin-auto-import/webpack')
-const Components = require('unplugin-vue-components/webpack')
-const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
-
-module.exports = {
-  // ...
-  plugins: [
-    AutoImport({
-      resolvers: [ElementPlusResolver()],
-    }),
-    Components({
-      resolvers: [ElementPlusResolver()],
-    }),
-  ],
-}
-```
-
-For more bundlers ([Rollup](https://rollupjs.org/), [Vue CLI](https://cli.vuejs.org/)) and configs please reference [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components#installation) and [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import#install).
-
-### Manually import
-
-Element Plus provides out of box [Tree Shaking](https://webpack.js.org/guides/tree-shaking/)
-functionalities based on ES Module.
-
-But you need install [unplugin-element-plus](https://github.com/element-plus/unplugin-element-plus) for style import.
-And refer to the [docs](https://github.com/element-plus/unplugin-element-plus#readme) for how to configure it.
-
-> App.vue
-
-```html
-<template>
-  <el-button>I am ElButton</el-button>
-</template>
-<script>
-  import { ElButton } from 'element-plus'
-  export default {
-    components: { ElButton },
-  }
-</script>
-```
-
-```ts
-// vite.config.ts
-import { defineConfig } from 'vite'
-import ElementPlus from 'unplugin-element-plus/vite'
-
-export default defineConfig({
-  // ...
-  plugins: [ElementPlus()],
-})
-```
-
-:::warning
-
-You need to manually import the styles if you're using `unplugin-element-plus` and only used the component API.
-
-Example:
-
-```ts
-import 'element-plus/es/components/message/style/css'
-import { ElMessage } from 'element-plus'
-```
-
-:::
-
-## Starter Template
-
-We provide a [Vite Template](https://github.com/element-plus/element-plus-vite-starter).
-For Laravel users we have a [Laravel Template](https://github.com/element-plus/element-plus-in-laravel-starter).
-
-## Global Configuration
-
-When registering Element Plus, you can pass a global config object with `size` and
-`zIndex` to set the default `size` for form components, and `zIndex` for
-popup components, the default value for `zIndex` is `2000`.
-
-Full import:
-
-```ts
-import { createApp } from 'vue'
-import ElementPlus from 'element-plus'
-import App from './App.vue'
-
-const app = createApp(App)
-app.use(ElementPlus, { size: 'small', zIndex: 3000 })
-```
-
-On-demand:
-
-```vue
-<template>
-  <el-config-provider :size="size" :z-index="zIndex">
-    <app />
-  </el-config-provider>
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-import { ElConfigProvider } from 'element-plus'
-
-export default defineComponent({
-  components: {
-    ElConfigProvider,
-  },
-  setup() {
-    return {
-      zIndex: 3000,
-      size: 'small',
-    }
-  },
-})
-</script>
-```
-
-## Using Nuxt.js
-
-We can also use [Nuxt.js](https://v3.nuxtjs.org/)：
-
-<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
-  <iframe src="https://glitch.com/edit/#!/nuxt-element-plus?path=components%2FExamples.vue%3A1%3A0" alt="nuxt-element-plus on glitch" style="height: 100%; width: 100%; border: 0;"></iframe>
-</div>
-
-## Let's Get Started
-
-You can bootstrap your project from now on. For each components usage, please
-refer to the individual component documentation.

docs/en-US/guide/theming.md

@@ -1,254 +0,0 @@
----
-title: Theming
-lang: en-US
----
-
-# Custom theme
-
-Element Plus uses BEM-styled CSS so that you can override styles easily. But if
-you need to replace styles at a large scale, e.g. change the theme color from
-blue to orange or green, maybe overriding them one by one is not a good idea.
-
-We provide four ways to change the style variables.
-
-## Change theme color
-
-These are examples about custom theme.
-
-- Full import: [element-plus-vite-starter](https://github.com/element-plus/element-plus-vite-starter)
-- On demand: [unplugin-element-plus/examples/vite](https://github.com/element-plus/unplugin-element-plus)
-
-### By SCSS variables
-
-`theme-chalk` is written in SCSS.
-You can find SCSS variables in [`packages/theme-chalk/src/common/var.scss`](https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss).
-
-:::warning
-
-We use sass modules ([sass:map](https://sass-lang.com/documentation/values/maps)...) and `@use` to refactor all SCSS variables. And by using `@use` to all SCSS variables, it solves the duplicate output problem caused by `@import`.
-
-> [Introducing Sass Modules | CSS-TRICKS](https://css-tricks.com/introducing-sass-modules/)
-
-For example, We use `$colors` as a map to preserve different types of colors.
-
-`$notification` is a map where all variables of the `notification` component at.
-
-In the future, we will write documentation for variables that can be customized for each component. You can also directly checkout the source [var.scss](https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss).
-
-:::
-
-```scss
-$colors: () !default;
-$colors: map.deep-merge(
-  (
-    'white': #ffffff,
-    'black': #000000,
-    'primary': (
-      'base': #409eff,
-    ),
-    'success': (
-      'base': #67c23a,
-    ),
-    'warning': (
-      'base': #e6a23c,
-    ),
-    'danger': (
-      'base': #f56c6c,
-    ),
-    'error': (
-      'base': #f56c6c,
-    ),
-    'info': (
-      'base': #909399,
-    ),
-  ),
-  $colors
-);
-```
-
-### How to override it?
-
-If your project also uses SCSS, you can directly change Element Plus style variables. Create a new style file, e.g. `styles/element/index.scss`:
-
-:::warning
-
-You should use `@use 'xxx.scss' as *;` instead of `@import 'xxx.scss';`.
-
-Because the sass team said they will remove `@import` eventually.
-
-> [Sass: @use](https://sass-lang.com/documentation/at-rules/use) vs [Sass: @import](https://sass-lang.com/documentation/at-rules/import)
-
-:::
-
-```scss
-// styles/element/index.scss
-/* just override what you need */
-@forward 'element-plus/theme-chalk/src/common/var.scss' with (
-  $colors: (
-    'primary': (
-      'base': green,
-    ),
-  )
-);
-
-// If you just import on demand, you can ignore the following content.
-// if you want to import all styles:
-// @use "element-plus/theme-chalk/src/index.scss" as *;
-```
-
-Then in the entry file of your project, import this style file instead of Element's built CSS:
-
-:::tip
-
-Import `element/index.scss` before scss of element-plus to avoid the problem of sass mixed variables, because we need generate light-x by your custom variables.
-
-:::
-
-Create a `element/index.scss` to combine your variables and variables of element-plus. (If you import them in ts, they will not be combined.)
-
-:::tip
-
-In addition, you should distinguish your scss from the element variable scss.
-If they are mixed together, each hot update of `element-plus` needs to compile a large number of scss files, resulting in slow speed.
-
-:::
-
-```ts
-import { createApp } from 'vue'
-import './styles/element/index.scss'
-import ElementPlus from 'element-plus'
-import App from './App.vue'
-
-const app = createApp(App)
-app.use(ElementPlus)
-```
-
-If you are using vite, and you want to custom theme when importing on demand.
-
-Use `scss.additionalData` to compile variables with scss of every component.
-
-```ts
-import path from 'path'
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-// You can also use unplugin-vue-components
-// import Components from 'unplugin-vue-components/vite'
-// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
-
-// or use unplugin-element-plus
-import ElementPlus from 'unplugin-element-plus/vite'
-
-// vite.config.ts
-export default defineConfig({
-  resolve: {
-    alias: {
-      '~/': `${path.resolve(__dirname, 'src')}/`,
-    },
-  },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: `@use "~/styles/element/index.scss" as *;`,
-      },
-    },
-  },
-  plugins: [
-    vue(),
-    // use unplugin-vue-components
-    // Components({
-    //   resolvers: [
-    //     ElementPlusResolver({
-    //       importStyle: "sass",
-    //       // directives: true,
-    //       // version: "2.1.5",
-    //     }),
-    //   ],
-    // }),
-    // or use unplugin-element-plus
-    ElementPlus({
-      useSource: true,
-    }),
-  ],
-})
-```
-
-If you are using webpack, and you want to custom theme when importing on demand.
-
-```ts
-// webpack.config.ts
-// use unplugin-element-plus
-
-import ElementPlus from 'unplugin-element-plus/webpack'
-
-export default defineConfig({
-  css: {
-    loaderOptions: {
-      scss: {
-        additionalData: `@use "~/styles/element/index.scss" as *;`,
-      },
-    },
-  },
-  plugins: [
-    ElementPlus({
-      useSource: true,
-    }),
-  ],
-})
-```
-
-### By CSS Variable
-
-CSS Variables is a very useful feature, already supported by almost all browsers. (IE: Wait?)
-
-> Learn more from [Using CSS custom properties (variables) | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
-
-We have used css variables to reconstruct the style system of almost all components.
-
-:::tip
-
-It is compatible with the SCSS variable system. We use the function of SCSS to automatically generate css variables for use.
-
-:::
-
-This means you can dynamically change individual variables inside the component to better customize it without having to modify scss and recompile it.
-
-> In the future, the css variable names and role documentation for each component will be written to each component.
-
-Like this:
-
-```css
-:root {
-  --el-color-primary: green;
-}
-```
-
-If you just want to customize a particular component, just add inline styles for certain components individually.
-
-```html
-<el-tag style="--el-tag-bg-color: red">Tag</el-tag>
-```
-
-For performance reasons, it is more recommended to custom css variables under a class rather than the global `:root`.
-
-```css
-.custom-class {
-  --el-tag-bg-color: red;
-}
-```
-
-If you want to control css var by script, try this:
-
-```ts
-// document.documentElement is global
-const el = document.documentElement
-// const el = document.getElementById('xxx')
-
-// get css var
-getComputedStyle(el).getPropertyValue(`--el-color-primary`)
-
-// set css var
-el.style['--el-color-primary'] = 'red'
-```
-
-If you want a more elegant way, check this out.
-[useCssVar | VueUse](https://vueuse.org/core/usecssvar/)

docs/en-US/guide/transitions.md

@@ -1,48 +0,0 @@
----
-title: Built-in Transitions
-lang: en-US
----
-
-# Built-in Transition
-
-You can use Element's built-in transitions directly.
-Before that, please read the [transition docs](https://vuejs.org/guide/built-ins/transition.html).
-
-## Fade
-
-:::demo We have two fading effects: `el-fade-in-linear` and `el-fade-in`.
-
-transitions/fade
-
-:::
-
-## Zoom
-
-:::demo `el-zoom-in-center`, `el-zoom-in-top` and `el-zoom-in-bottom` are provided.
-
-transitions/zoom
-
-:::
-
-## Collapse
-
-For collapse effect, use the `el-collapse-transition` component.
-
-:::demo
-
-transitions/collapse
-
-:::
-
-## On-demand import
-
-```ts
-// collapse
-import { ElCollapseTransition } from 'element-plus'
-// fade/zoom
-import 'element-plus/lib/theme-chalk/base.css'
-import App from './App.vue'
-
-const app = createApp(App)
-app.component(ElCollapseTransition.name, ElCollapseTransition)
-```

docs/en-US/guide/translation.md

@@ -1,39 +0,0 @@
----
-title: Translation
-lang: en-US
----
-
-# Translation
-
-## Documentation
-
-In this chapter, we will discuss how to help translating the documentation of Element Plus.
-
-### Background
-
-Before we did the upgrade of the documentation architecture, each documentation update needs 5 languages,
-which most of the contributors use online translator for their non-native languages,
-sometimes it would be not only inaccurate but also stressful to them.
-
-So we decided to give the documentation site an upgrade.
-
-- From webpack to Vite
-- From manually maintained to automated
-
-We took [Crowdin](https://crowdin.com) as our first step to make the documentation site more automated.
-
-### How do I translate the documentation?
-
-1. Create an account on [Crowdin](https://crowdin.com), it is recommended that you use your GitHub account to authorize Crowdin.
-2. Go to [Element Plus](https://crowdin.com/project/element-plus) project.
-3. Choose the language you want to contribute to.
-4. Find the file you want to translate.
-5. Do the translation.
-
-That simple, and the UI is very intuitive to use, you should have no trouble using it.
-After you submit your work, it would be online once the translation is approved by proofreader.
-
-### How can I become a proofreader?
-
-You can [raise an issue](https://crowdin.com/project/element-plus/discussions) on Crowdin to us for
-becoming a proofreader of the language you wish to be.

docs/en-US/index.md

@@ -1,9 +0,0 @@
----
-title: A Vue 3 UI Framework
-page: true
-lang: en-US
----
-
-<ClientOnly>
-  <ParallaxHome />
-</ClientOnly>

docs/en-US/resource/index.md

@@ -1,6 +0,0 @@
----
-page: true
-lang: en-US
----
-
-<Resource />

docs/zh-CN/component-bk/affix.md

@@ -1,68 +0,0 @@
----
-title: Affix
-lang: zh-CN
----
-
-# 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/zh-CN/component-bk/alert.md

@@ -1,104 +0,0 @@
----
-title: Alert
-lang: zh-CN
----
-
-# 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/zh-CN/component-bk/autocomplete.md

@@ -1,81 +0,0 @@
----
-title: Autocomplete
-lang: zh-CN
----
-
-## 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/zh-CN/component-bk/avatar.md

@@ -1,74 +0,0 @@
----
-title: Avatar
-lang: zh-CN
----
-
-# 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/zh-CN/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/zh-CN/component-bk/backtop.md

@@ -1,51 +0,0 @@
----
-title: Backtop
-lang: zh-CN
----
-
-# 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/zh-CN/component-bk/badge.md

@@ -1,66 +0,0 @@
----
-title: Badge
-lang: zh-CN
----
-
-# 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/zh-CN/component-bk/border.md

@@ -1,38 +0,0 @@
----
-title: Border
-lang: zh-CN
----
-
-# 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/zh-CN/component-bk/breadcrumb.md

@@ -1,50 +0,0 @@
----
-title: Breadcrumb
-lang: zh-CN
----
-
-# 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/zh-CN/component-bk/button.md

@@ -1,16 +0,0 @@
----
-title: Button
-lang: zh-CN
----
-
-# 按钮
-
-一般按钮使用如下。
-
-## 基本用法
-
-:::demo Use `type`, `plain`, `round` and `circle` to define Button's style.
-
-button/basic
-
-:::